@umbraco-cms/backoffice 14.0.0--preview005-b4989b95 → 14.0.0--preview005-d06b80f2

package/dist-cms/apps/app/app.element.js

@@ -138,6 +138,7 @@ async function _UmbAppElement_setAuthStatus() {
     // Instruct all requests to use the auth flow to get and use the access_token for all subsequent requests
     OpenAPI.TOKEN = () => __classPrivateFieldGet(this, _UmbAppElement_authContext, "f").getLatestToken();
     OpenAPI.WITH_CREDENTIALS = true;
+    OpenAPI.CREDENTIALS = 'include';
 };
 _UmbAppElement_redirect = function _UmbAppElement_redirect() {
     // If there is a ?code parameter in the url, then we are in the middle of the oauth flow

package/dist-cms/custom-elements.json

@@ -500,7 +500,7 @@
         {
           "name": "styles",
           "type": "array",
-          "default": "[\"UmbTextStyles\"]"
+          "default": "[\"UmbTextStyles\",null]"
         }
       ]
     },

package/dist-cms/packages/block/block/modals/block-catalogue/block-catalogue-modal.element.d.ts

@@ -2,8 +2,7 @@ import type { UmbBlockCatalogueModalData, UmbBlockCatalogueModalValue } from '..
 import { UmbModalBaseElement } from '../../../../core/modal/index.js';
 export declare class UmbBlockCatalogueModalElement extends UmbModalBaseElement<UmbBlockCatalogueModalData, UmbBlockCatalogueModalValue> {
     #private;
-    private _blocks;
-    private _blockGroups;
+    private _groupedBlocks;
     _openClipboard?: boolean;
     _workspacePath?: string;
     constructor();

package/dist-cms/packages/block/block/modals/block-catalogue/block-catalogue-modal.element.js

@@ -12,14 +12,12 @@ var __classPrivateFieldGet = (this && this.__classPrivateFieldGet) || function (
 var _UmbBlockCatalogueModalElement_instances, _UmbBlockCatalogueModalElement_renderClipboard, _UmbBlockCatalogueModalElement_renderCreateEmpty, _UmbBlockCatalogueModalElement_renderViews;
 import { UMB_BLOCK_WORKSPACE_MODAL } from '../../workspace/index.js';
 import { css, html, customElement, state, repeat, ifDefined, nothing } from '../../../../../external/lit/index.js';
-import { groupBy } from '../../../../../external/lodash/index.js';
 import { UMB_MODAL_CONTEXT, UmbModalBaseElement, UmbModalRouteRegistrationController, } from '../../../../core/modal/index.js';
 let UmbBlockCatalogueModalElement = class UmbBlockCatalogueModalElement extends UmbModalBaseElement {
     constructor() {
         super();
         _UmbBlockCatalogueModalElement_instances.add(this);
-        this._blocks = [];
-        this._blockGroups = [];
+        this._groupedBlocks = [];
         this.consumeContext(UMB_MODAL_CONTEXT, (modalContext) => {
             new UmbModalRouteRegistrationController(this, UMB_BLOCK_WORKSPACE_MODAL)
                 //.addAdditionalPath('block') // No need for additional path specification in this context as this is for sure the only workspace we want to open here.
@@ -42,15 +40,15 @@ let UmbBlockCatalogueModalElement = class UmbBlockCatalogueModalElement extends
         if (!this.data)
             return;
         this._openClipboard = this.data.openClipboard ?? false;
-        this._blocks = this.data.blocks ?? [];
-        this._blockGroups = this.data.blockGroups ?? [];
+        const blocks = this.data.blocks ?? [];
+        const blockGroups = this.data.blockGroups ?? [];
+        const noGroupBlocks = blocks.filter((block) => !blockGroups.find((group) => group.key === block.groupKey));
+        const grouped = blockGroups.map((group) => ({
+            name: group.name ?? '',
+            blocks: blocks.filter((block) => block.groupKey === group.key),
+        }));
+        this._groupedBlocks = [{ blocks: noGroupBlocks }, ...grouped];
     }
-    /*
-    #onClickBlock(contentElementTypeKey: string) {
-        this.modalContext?.updateValue({ key: contentElementTypeKey });
-        this.modalContext?.submit();
-    }
-    */
     render() {
         return html `
 			<umb-body-layout headline="${this.localize.term('blockEditor_addBlock')}">
@@ -72,14 +70,9 @@ _UmbBlockCatalogueModalElement_renderClipboard = function _UmbBlockCatalogueModa
     return html `Clipboard`;
 };
 _UmbBlockCatalogueModalElement_renderCreateEmpty = function _UmbBlockCatalogueModalElement_renderCreateEmpty() {
-    const blockArrays = groupBy(this._blocks, 'groupKey');
-    const mappedGroupsAndBlocks = Object.entries(blockArrays).map(([key, value]) => {
-        const group = this._blockGroups.find((group) => group.key === key);
-        return { name: group?.name, blocks: value };
-    });
     return html `
-			${mappedGroupsAndBlocks.map((group) => html `
-					${group.name ? html `<h2>${group.name}</h2>` : nothing}
+			${this._groupedBlocks.map((group) => html `
+					${group.name ? html `<h4>${group.name}</h4>` : nothing}
 					<div class="blockGroup">
 						${repeat(group.blocks, (block) => block.contentElementTypeKey, (block) => html `
 								<uui-card-block-type
@@ -97,12 +90,18 @@ _UmbBlockCatalogueModalElement_renderCreateEmpty = function _UmbBlockCatalogueMo
 _UmbBlockCatalogueModalElement_renderViews = function _UmbBlockCatalogueModalElement_renderViews() {
     return html `
 			<uui-tab-group slot="navigation">
-				<uui-tab label="Create Empty" ?active=${!this._openClipboard} @click=${() => (this._openClipboard = false)}>
-					Create Empty
+				<uui-tab
+					label=${this.localize.term('blockEditor_tabCreateEmpty')}
+					?active=${!this._openClipboard}
+					@click=${() => (this._openClipboard = false)}>
+					<umb-localize key=${this.localize.term('blockEditor_tabCreateEmpty')}>Create Empty</umb-localize>
 					<uui-icon slot="icon" name="icon-add"></uui-icon>
 				</uui-tab>
-				<uui-tab label="Clipboard" ?active=${this._openClipboard} @click=${() => (this._openClipboard = true)}>
-					Clipboard
+				<uui-tab
+					label=${this.localize.term('blockEditor_tabClipboard')}
+					?active=${this._openClipboard}
+					@click=${() => (this._openClipboard = true)}>
+					<umb-localize key=${this.localize.term('blockEditor_tabClipboard')}>Clipboard</umb-localize>
 					<uui-icon slot="icon" name="icon-paste-in"></uui-icon>
 				</uui-tab>
 			</uui-tab-group>
@@ -125,10 +124,7 @@ UmbBlockCatalogueModalElement.styles = [
 ];
 __decorate([
     state()
-], UmbBlockCatalogueModalElement.prototype, "_blocks", void 0);
-__decorate([
-    state()
-], UmbBlockCatalogueModalElement.prototype, "_blockGroups", void 0);
+], UmbBlockCatalogueModalElement.prototype, "_groupedBlocks", void 0);
 __decorate([
     state()
 ], UmbBlockCatalogueModalElement.prototype, "_openClipboard", void 0);

package/dist-cms/packages/block/block/modals/block-catalogue/block-catalogue-modal.token.d.ts

@@ -1,11 +1,8 @@
-import type { UmbBlockTypeBaseModel, UmbBlockWorkspaceData } from '../../../index.js';
+import type { UmbBlockTypeBaseModel, UmbBlockTypeGroup, UmbBlockWorkspaceData } from '../../../index.js';
 import { UmbModalToken } from '../../../../core/modal/index.js';
 export interface UmbBlockCatalogueModalData {
     blocks: Array<UmbBlockTypeBaseModel>;
-    blockGroups?: Array<{
-        name: string;
-        key: string;
-    }>;
+    blockGroups?: Array<UmbBlockTypeGroup>;
     openClipboard?: boolean;
     blockOriginData: UmbBlockWorkspaceData['originData'];
 }

package/dist-cms/packages/block/block-grid/property-editors/block-grid-editor/property-editor-ui-block-grid.element.d.ts

@@ -5,15 +5,19 @@ import type { UmbPropertyEditorConfigCollection } from '../../../../core/propert
  * @element umb-property-editor-ui-block-grid
  */
 export declare class UmbPropertyEditorUIBlockGridElement extends UmbLitElement implements UmbPropertyEditorUiElement {
+    #private;
     value: string;
-    config?: UmbPropertyEditorConfigCollection;
-    private _routes;
-    private _routerPath;
-    private _activePath;
-    private _variantId?;
+    private _limitMin?;
+    private _limitMax?;
+    private _blocks?;
+    private _blockGroups?;
+    private _layouts;
+    private _catalogueRouteBuilder?;
+    private _directRoute?;
+    private _createButtonLabel;
+    set config(config: UmbPropertyEditorConfigCollection | undefined);
     constructor();
-    setupRoutes(): void;
-    render(): import("lit-html").TemplateResult<1> | "loading...";
+    render(): import("lit-html").TemplateResult<1>;
     static styles: import("../../../../../external/lit/index.js").CSSResult[];
 }
 export default UmbPropertyEditorUIBlockGridElement;

package/dist-cms/packages/block/block-grid/property-editors/block-grid-editor/property-editor-ui-block-grid.element.js

@@ -4,104 +4,152 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-import { UMB_PROPERTY_CONTEXT } from '../../../../core/property/index.js';
-import { html, customElement, property, state } from '../../../../../external/lit/index.js';
+var __classPrivateFieldGet = (this && this.__classPrivateFieldGet) || function (receiver, state, kind, f) {
+    if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a getter");
+    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot read private member from an object whose class did not declare it");
+    return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
+};
+var __classPrivateFieldSet = (this && this.__classPrivateFieldSet) || function (receiver, state, value, kind, f) {
+    if (kind === "m") throw new TypeError("Private method is not writable");
+    if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a setter");
+    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot write private member to an object whose class did not declare it");
+    return (kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value;
+};
+var _UmbPropertyEditorUIBlockGridElement_catalogueModal;
+import { html, customElement, property, state, css } from '../../../../../external/lit/index.js';
 import { UmbTextStyles } from '../../../../../shared/style/index.js';
 import { UmbLitElement } from '../../../../../shared/lit-element/index.js';
+import { UMB_BLOCK_CATALOGUE_MODAL, } from '../../../index.js';
+import { UmbModalRouteRegistrationController } from '../../../../core/modal/index.js';
+import { UMB_PROPERTY_CONTEXT } from '../../../../core/property/index.js';
 /**
  * @element umb-property-editor-ui-block-grid
  */
 let UmbPropertyEditorUIBlockGridElement = class UmbPropertyEditorUIBlockGridElement extends UmbLitElement {
+    set config(config) {
+        if (!config)
+            return;
+        const validationLimit = config.getValueByAlias('validationLimit');
+        this._limitMin = validationLimit?.min;
+        this._limitMax = validationLimit?.max;
+        this._blocks = config.getValueByAlias('blocks') ?? [];
+        this._blockGroups = config.getValueByAlias('blockGroups') ?? [];
+        const customCreateButtonLabel = config.getValueByAlias('createLabel');
+        if (customCreateButtonLabel) {
+            this._createButtonLabel = customCreateButtonLabel;
+        }
+        else if (this._blocks.length === 1) {
+            this._createButtonLabel = this.localize.term('blockEditor_addThis', [this._blocks[0].label]);
+        }
+        //const useInlineEditingAsDefault = config.getValueByAlias<boolean>('useInlineEditingAsDefault');
+        //this.#context.setInlineEditingMode(useInlineEditingAsDefault);
+        //config.useSingleBlockMode
+        //config.useLiveEditing
+        //config.useInlineEditingAsDefault
+        this.style.maxWidth = config.getValueByAlias('maxPropertyWidth') ?? '';
+        //this.#context.setEditorConfiguration(config);
+    }
     constructor() {
         super();
+        _UmbPropertyEditorUIBlockGridElement_catalogueModal.set(this, void 0);
         this.value = '';
-        this._routes = [];
-        this.consumeContext(UMB_PROPERTY_CONTEXT, (context) => {
-            this.observe(context?.variantId, (propertyVariantId) => {
-                this._variantId = propertyVariantId;
-                this.setupRoutes();
-            });
+        this._layouts = [];
+        this._createButtonLabel = this.localize.term('blockEditor_addBlock');
+        this.consumeContext(UMB_PROPERTY_CONTEXT, (propertyContext) => {
+            this.observe(propertyContext?.alias, (alias) => {
+                __classPrivateFieldGet(this, _UmbPropertyEditorUIBlockGridElement_catalogueModal, "f").setUniquePathValue('propertyAlias', alias);
+            }, 'observePropertyAlias');
         });
-    }
-    setupRoutes() {
-        this._routes = [];
-        if (this._variantId !== undefined) {
-            this._routes = [
-                {
-                    path: 'modal-1',
-                    component: () => {
-                        return import('./property-editor-ui-block-grid-inner-test.element.js');
-                    },
-                    setup: (component) => {
-                        if (component instanceof HTMLElement) {
-                            component.name = 'block-grid-1';
-                        }
-                    },
-                },
-                {
-                    path: 'modal-2',
-                    component: () => {
-                        return import('./property-editor-ui-block-grid-inner-test.element.js');
-                    },
-                    setup: (component) => {
-                        if (component instanceof HTMLElement) {
-                            component.name = 'block-grid-2';
-                        }
-                    },
+        __classPrivateFieldSet(this, _UmbPropertyEditorUIBlockGridElement_catalogueModal, new UmbModalRouteRegistrationController(this, UMB_BLOCK_CATALOGUE_MODAL)
+            .addUniquePaths(['propertyAlias'])
+            .addAdditionalPath(':view/:index')
+            .onSetup((routingInfo) => {
+            const index = routingInfo.index ? parseInt(routingInfo.index) : -1;
+            return {
+                data: {
+                    blocks: this._blocks ?? [],
+                    blockGroups: this._blockGroups ?? [],
+                    openClipboard: routingInfo.view === 'clipboard',
+                    blockOriginData: { index: index },
                 },
-            ];
-        }
+            };
+        })
+            .observeRouteBuilder((routeBuilder) => {
+            this._catalogueRouteBuilder = routeBuilder;
+        }), "f");
     }
     render() {
-        return this._variantId
-            ? html `<div>
-					umb-property-editor-ui-block-grid, inner routing test:
-
-					<uui-tab-group slot="navigation">
-						<uui-tab
-							label="TAB 1"
-							href="${this._routerPath + '/'}modal-1"
-							.active=${this._routerPath + '/' + 'modal-1' === this._activePath}></uui-tab>
-						<uui-tab
-							label="TAB 2"
-							href="${this._routerPath + '/'}modal-2"
-							.active=${this._routerPath + '/' + 'modal-2' === this._activePath}></uui-tab>
-					</uui-tab-group>
-
-					<umb-variant-router-slot
-						.variantId=${[this._variantId]}
-						id="router-slot"
-						.routes="${this._routes}"
-						@init=${(event) => {
-                this._routerPath = event.target.absoluteRouterPath;
-            }}
-						@change=${(event) => {
-                this._activePath = event.target.localActiveViewPath;
-            }}>
-					</umb-variant-router-slot>
-			  </div>`
-            : 'loading...';
+        if (this._blocks?.length === 1) {
+            const elementKey = this._blocks[0].contentElementTypeKey;
+            this._directRoute =
+                this._catalogueRouteBuilder?.({ view: 'create', index: -1 }) + 'modal/umb-modal-workspace/create/' + elementKey;
+        }
+        return html `<uui-button-group>
+			<uui-button
+				id="add-button"
+				look="placeholder"
+				label=${this._createButtonLabel}
+				href=${this._directRoute ?? this._catalogueRouteBuilder?.({ view: 'create', index: -1 }) ?? ''}></uui-button>
+			<uui-button
+				label=${this.localize.term('content_createFromClipboard')}
+				look="placeholder"
+				href=${this._catalogueRouteBuilder?.({ view: 'clipboard', index: -1 }) ?? ''}>
+				<uui-icon name="icon-paste-in"></uui-icon>
+			</uui-button>
+		</uui-button-group>`;
     }
 };
-UmbPropertyEditorUIBlockGridElement.styles = [UmbTextStyles];
+_UmbPropertyEditorUIBlockGridElement_catalogueModal = new WeakMap();
+UmbPropertyEditorUIBlockGridElement.styles = [
+    UmbTextStyles,
+    css `
+			:host {
+				display: grid;
+				gap: 1px;
+			}
+			> div {
+				display: flex;
+				flex-direction: column;
+				align-items: stretch;
+			}
+
+			uui-button-group {
+				padding-top: 1px;
+				display: grid;
+				grid-template-columns: 1fr auto;
+			}
+		`,
+];
 __decorate([
     property()
 ], UmbPropertyEditorUIBlockGridElement.prototype, "value", void 0);
 __decorate([
-    property({ attribute: false })
-], UmbPropertyEditorUIBlockGridElement.prototype, "config", void 0);
+    state()
+], UmbPropertyEditorUIBlockGridElement.prototype, "_limitMin", void 0);
+__decorate([
+    state()
+], UmbPropertyEditorUIBlockGridElement.prototype, "_limitMax", void 0);
 __decorate([
     state()
-], UmbPropertyEditorUIBlockGridElement.prototype, "_routes", void 0);
+], UmbPropertyEditorUIBlockGridElement.prototype, "_blocks", void 0);
 __decorate([
     state()
-], UmbPropertyEditorUIBlockGridElement.prototype, "_routerPath", void 0);
+], UmbPropertyEditorUIBlockGridElement.prototype, "_blockGroups", void 0);
 __decorate([
     state()
-], UmbPropertyEditorUIBlockGridElement.prototype, "_activePath", void 0);
+], UmbPropertyEditorUIBlockGridElement.prototype, "_layouts", void 0);
 __decorate([
     state()
-], UmbPropertyEditorUIBlockGridElement.prototype, "_variantId", void 0);
+], UmbPropertyEditorUIBlockGridElement.prototype, "_catalogueRouteBuilder", void 0);
+__decorate([
+    state()
+], UmbPropertyEditorUIBlockGridElement.prototype, "_directRoute", void 0);
+__decorate([
+    state()
+], UmbPropertyEditorUIBlockGridElement.prototype, "_createButtonLabel", void 0);
+__decorate([
+    property({ attribute: false })
+], UmbPropertyEditorUIBlockGridElement.prototype, "config", null);
 UmbPropertyEditorUIBlockGridElement = __decorate([
     customElement('umb-property-editor-ui-block-grid')
 ], UmbPropertyEditorUIBlockGridElement);

package/dist-cms/packages/block/block-list/property-editors/block-list-editor/property-editor-ui-block-list.element.d.ts

@@ -3,7 +3,6 @@ import type { UmbPropertyEditorUiElement } from '../../../../core/extension-regi
 import { UmbLitElement } from '../../../../../shared/lit-element/index.js';
 import type { UmbPropertyEditorConfigCollection } from '../../../../core/property-editor/index.js';
 import type { UmbBlockLayoutBaseModel, UmbBlockValueType } from '../../../index.js';
-import type { UmbModalRouteBuilder } from '../../../../core/modal/index.js';
 export interface UmbBlockListLayoutModel extends UmbBlockLayoutBaseModel {
 }
 export interface UmbBlockListValueModel extends UmbBlockValueType<UmbBlockListLayoutModel> {
@@ -16,12 +15,14 @@ export declare class UmbPropertyEditorUIBlockListElement extends UmbLitElement i
     private _value;
     get value(): UmbBlockListValueModel;
     set value(value: UmbBlockListValueModel | undefined);
+    private _createButtonLabel;
     set config(config: UmbPropertyEditorConfigCollection | undefined);
     private _limitMin?;
     private _limitMax?;
     private _blocks?;
-    _layouts: Array<UmbBlockLayoutBaseModel>;
-    _catalogueRouteBuilder?: UmbModalRouteBuilder;
+    private _layouts;
+    private _catalogueRouteBuilder?;
+    private _directRoute?;
     constructor();
     render(): import("lit-html").TemplateResult<1>;
     static styles: import("../../../../../external/lit/index.js").CSSResult[];

package/dist-cms/packages/block/block-list/property-editors/block-list-editor/property-editor-ui-block-list.element.js

@@ -9,7 +9,13 @@ var __classPrivateFieldGet = (this && this.__classPrivateFieldGet) || function (
     if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot read private member from an object whose class did not declare it");
     return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
 };
-var _UmbPropertyEditorUIBlockListElement_sorter, _UmbPropertyEditorUIBlockListElement_context;
+var __classPrivateFieldSet = (this && this.__classPrivateFieldSet) || function (receiver, state, value, kind, f) {
+    if (kind === "m") throw new TypeError("Private method is not writable");
+    if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a setter");
+    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot write private member to an object whose class did not declare it");
+    return (kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value;
+};
+var _UmbPropertyEditorUIBlockListElement_sorter, _UmbPropertyEditorUIBlockListElement_catalogueModal, _UmbPropertyEditorUIBlockListElement_context;
 import { UmbBlockListManagerContext } from '../../manager/block-list-manager.context.js';
 import '../../components/block-list-block/index.js';
 import { UMB_BLOCK_LIST_PROPERTY_EDITOR_ALIAS } from './manifests.js';
@@ -20,6 +26,7 @@ import { UMB_BLOCK_CATALOGUE_MODAL } from '../../../index.js';
 import { UmbModalRouteRegistrationController } from '../../../../core/modal/index.js';
 import { UmbChangeEvent } from '../../../../core/event/index.js';
 import { UmbSorterController } from '../../../../core/sorter/index.js';
+import { UMB_PROPERTY_CONTEXT } from '../../../../core/property/index.js';
 const SORTER_CONFIG = {
     getUniqueOfElement: (element) => {
         return element.getAttribute('data-udi');
@@ -56,6 +63,13 @@ let UmbPropertyEditorUIBlockListElement = class UmbPropertyEditorUIBlockListElem
         this._limitMax = validationLimit?.max;
         const blocks = config.getValueByAlias('blocks') ?? [];
         __classPrivateFieldGet(this, _UmbPropertyEditorUIBlockListElement_context, "f").setBlockTypes(blocks);
+        const customCreateButtonLabel = config.getValueByAlias('createLabel');
+        if (customCreateButtonLabel) {
+            this._createButtonLabel = customCreateButtonLabel;
+        }
+        else if (blocks.length === 1) {
+            this._createButtonLabel = `${this.localize.term('general_add')} ${blocks[0].label}`;
+        }
         const useInlineEditingAsDefault = config.getValueByAlias('useInlineEditingAsDefault');
         __classPrivateFieldGet(this, _UmbPropertyEditorUIBlockListElement_context, "f").setInlineEditingMode(useInlineEditingAsDefault);
         //config.useSingleBlockMode
@@ -73,13 +87,20 @@ let UmbPropertyEditorUIBlockListElement = class UmbPropertyEditorUIBlockListElem
                 __classPrivateFieldGet(this, _UmbPropertyEditorUIBlockListElement_context, "f").setLayouts(model);
             },
         }));
+        _UmbPropertyEditorUIBlockListElement_catalogueModal.set(this, void 0);
         this._value = {
             layout: {},
             contentData: [],
             settingsData: [],
         };
+        this._createButtonLabel = this.localize.term('content_createEmpty');
         this._layouts = [];
         _UmbPropertyEditorUIBlockListElement_context.set(this, new UmbBlockListManagerContext(this));
+        this.consumeContext(UMB_PROPERTY_CONTEXT, (propertyContext) => {
+            this.observe(propertyContext?.alias, (alias) => {
+                __classPrivateFieldGet(this, _UmbPropertyEditorUIBlockListElement_catalogueModal, "f").setUniquePathValue('propertyAlias', alias);
+            }, 'observePropertyAlias');
+        });
         // TODO: Prevent initial notification from these observes:
         this.observe(__classPrivateFieldGet(this, _UmbPropertyEditorUIBlockListElement_context, "f").layouts, (layouts) => {
             this._value = { ...this._value, layout: { [UMB_BLOCK_LIST_PROPERTY_EDITOR_ALIAS]: layouts } };
@@ -105,7 +126,8 @@ let UmbPropertyEditorUIBlockListElement = class UmbPropertyEditorUIBlockListElem
         this.observe(__classPrivateFieldGet(this, _UmbPropertyEditorUIBlockListElement_context, "f").blockTypes, (blockTypes) => {
             this._blocks = blockTypes;
         });
-        new UmbModalRouteRegistrationController(this, UMB_BLOCK_CATALOGUE_MODAL)
+        __classPrivateFieldSet(this, _UmbPropertyEditorUIBlockListElement_catalogueModal, new UmbModalRouteRegistrationController(this, UMB_BLOCK_CATALOGUE_MODAL)
+            .addUniquePaths(['propertyAlias'])
             .addAdditionalPath(':view/:index')
             .onSetup((routingInfo) => {
             const index = routingInfo.index ? parseInt(routingInfo.index) : -1;
@@ -119,9 +141,14 @@ let UmbPropertyEditorUIBlockListElement = class UmbPropertyEditorUIBlockListElem
         })
             .observeRouteBuilder((routeBuilder) => {
             this._catalogueRouteBuilder = routeBuilder;
-        });
+        }), "f");
     }
     render() {
+        if (this._blocks?.length === 1) {
+            const elementKey = this._blocks[0].contentElementTypeKey;
+            this._directRoute =
+                this._catalogueRouteBuilder?.({ view: 'create', index: -1 }) + 'modal/umb-modal-workspace/create/' + elementKey;
+        }
         return html ` ${repeat(this._layouts, (x) => x.contentUdi, (layoutEntry, index) => html `<uui-button-inline-create
 							href=${this._catalogueRouteBuilder?.({ view: 'create', index: index }) ?? ''}></uui-button-inline-create>
 						<umb-property-editor-ui-block-list-block data-udi=${layoutEntry.contentUdi} .layout=${layoutEntry}>
@@ -130,10 +157,8 @@ let UmbPropertyEditorUIBlockListElement = class UmbPropertyEditorUIBlockListElem
 				<uui-button
 					id="add-button"
 					look="placeholder"
-					label=${this.localize.term('content_createEmpty')}
-					href=${this._catalogueRouteBuilder?.({ view: 'create', index: -1 }) ?? ''}>
-					${this.localize.term('content_createEmpty')}
-				</uui-button>
+					label=${this._createButtonLabel}
+					href=${this._directRoute ?? this._catalogueRouteBuilder?.({ view: 'create', index: -1 }) ?? ''}></uui-button>
 				<uui-button
 					label=${this.localize.term('content_createFromClipboard')}
 					look="placeholder"
@@ -144,6 +169,7 @@ let UmbPropertyEditorUIBlockListElement = class UmbPropertyEditorUIBlockListElem
     }
 };
 _UmbPropertyEditorUIBlockListElement_sorter = new WeakMap();
+_UmbPropertyEditorUIBlockListElement_catalogueModal = new WeakMap();
 _UmbPropertyEditorUIBlockListElement_context = new WeakMap();
 UmbPropertyEditorUIBlockListElement.styles = [
     UmbTextStyles,
@@ -168,6 +194,9 @@ UmbPropertyEditorUIBlockListElement.styles = [
 __decorate([
     property({ attribute: false })
 ], UmbPropertyEditorUIBlockListElement.prototype, "value", null);
+__decorate([
+    state()
+], UmbPropertyEditorUIBlockListElement.prototype, "_createButtonLabel", void 0);
 __decorate([
     property({ attribute: false })
 ], UmbPropertyEditorUIBlockListElement.prototype, "config", null);
@@ -186,6 +215,9 @@ __decorate([
 __decorate([
     state()
 ], UmbPropertyEditorUIBlockListElement.prototype, "_catalogueRouteBuilder", void 0);
+__decorate([
+    state()
+], UmbPropertyEditorUIBlockListElement.prototype, "_directRoute", void 0);
 UmbPropertyEditorUIBlockListElement = __decorate([
     customElement('umb-property-editor-ui-block-list')
 ], UmbPropertyEditorUIBlockListElement);

package/dist-cms/shared/auth/auth.context.d.ts

@@ -1,3 +1,4 @@
+import type { UmbOpenApiConfiguration } from './models/openApiConfiguration.js';
 import type { UmbControllerHostElement } from '../../libs/controller-api/index.js';
 import { UmbBaseController } from '../../libs/class-api/index.js';
 export declare class UmbAuthContext extends UmbBaseController {
@@ -28,7 +29,7 @@ export declare class UmbAuthContext extends UmbBaseController {
      *
      * NB! The user may experience being redirected to the login screen if the token is expired.
      *
-     * @example
+     * @example <caption>Using the latest token</caption>
      * ```js
      *   const token = await authContext.getLatestToken();
      *   const result = await fetch('https://my-api.com', { headers: { Authorization: `Bearer ${token}` } });
@@ -48,4 +49,37 @@ export declare class UmbAuthContext extends UmbBaseController {
      * @memberof UmbAuthContext
      */
     signOut(): Promise<void>;
+    /**
+     * Get the server url to the Management API.
+     * @memberof UmbAuthContext
+     * @example <caption>Using the server url</caption>
+     * ```js
+     * 	const serverUrl = authContext.getServerUrl();
+     * 	OpenAPI.BASE = serverUrl;
+     * ```
+     * @example <caption></caption>
+     * ```js
+     * 	const serverUrl = authContext.getServerUrl();
+     * 	const token = await authContext.getLatestToken();
+     * 	const result = await fetch(`${serverUrl}/umbraco/management/api/v1/my-resource`, { headers: { Authorization: `Bearer ${token}` } });
+     * ```
+     * @returns The server url to the Management API
+     */
+    getServerUrl(): string;
+    /**
+     * Get the default OpenAPI configuration, which is set up to communicate with the Management API.
+     * @remark This is useful if you want to communicate with your own resources generated by the [openapi-typescript-codegen](https://github.com/ferdikoomen/openapi-typescript-codegen) library.
+     * @memberof UmbAuthContext
+     *
+     * @example <caption>Using the default OpenAPI configuration</caption>
+     * ```js
+     *  	const defaultOpenApi = authContext.getOpenApiConfiguration();
+     *  	OpenAPI.BASE = defaultOpenApi.base;
+     * 		OpenAPI.WITH_CREDENTIALS = defaultOpenApi.withCredentials;
+     * 		OpenAPI.CREDENTIALS = defaultOpenApi.credentials;
+     * 		OpenAPI.TOKEN = defaultOpenApi.token;
+     * ```
+     * @returns The default OpenAPI configuration
+     */
+    getOpenApiConfiguration(): UmbOpenApiConfiguration;
 }