@umbraco-cms/backoffice 1.0.0-next.ea1e6e6f → 1.0.0-next.ed0b8881

package/dist-cms/packages/core/property-editors/uis/tree-picker/manifests.d.ts

@@ -1,2 +1,2 @@
-import type { ManifestPropertyEditorUI } from '../../../extension-registry/index.js';
-export declare const manifests: ManifestPropertyEditorUI[];
+import type { ManifestPropertyEditorUi } from '../../../extension-registry/index.js';
+export declare const manifests: ManifestPropertyEditorUi[];

package/dist-cms/packages/core/property-editors/uis/tree-picker/manifests.js

@@ -1,33 +1,33 @@
 import { manifest as startNode } from './config/start-node/manifests.js';
 const manifest = {
-    type: 'propertyEditorUI',
-    alias: 'Umb.PropertyEditorUI.TreePicker',
+    type: 'propertyEditorUi',
+    alias: 'Umb.PropertyEditorUi.TreePicker',
     name: 'Tree Picker Property Editor UI',
     loader: () => import('./property-editor-ui-tree-picker.element.js'),
     meta: {
         label: 'Tree Picker',
         icon: 'umb:page-add',
         group: 'pickers',
-        propertyEditorModel: 'Umbraco.MultiNodeTreePicker',
-        config: {
+        propertyEditorAlias: 'Umbraco.MultiNodeTreePicker',
+        settings: {
             properties: [
                 {
                     alias: 'startNode',
                     label: 'Start node',
                     description: '',
-                    propertyEditorUI: 'Umb.PropertyEditorUI.TreePicker.StartNode',
+                    propertyEditorUiAlias: 'Umb.PropertyEditorUi.TreePicker.StartNode',
                 },
                 {
                     alias: 'filter',
                     label: 'Allow items of type',
                     description: '',
-                    propertyEditorUI: 'Umb.PropertyEditorUI.TreePicker',
+                    propertyEditorUiAlias: 'Umb.PropertyEditorUi.TreePicker',
                 },
                 {
                     alias: 'showOpenButton',
                     label: 'Show open button',
                     description: 'Opens the node in a dialog',
-                    propertyEditorUI: 'Umb.PropertyEditorUI.Toggle',
+                    propertyEditorUiAlias: 'Umb.PropertyEditorUi.Toggle',
                 },
             ],
         },

package/dist-cms/packages/core/property-editors/uis/upload-field/manifests.d.ts

@@ -1,2 +1,2 @@
-import type { ManifestPropertyEditorUI } from '../../../extension-registry/index.js';
-export declare const manifest: ManifestPropertyEditorUI;
+import type { ManifestPropertyEditorUi } from '../../../extension-registry/index.js';
+export declare const manifest: ManifestPropertyEditorUi;

package/dist-cms/packages/core/property-editors/uis/upload-field/manifests.js

@@ -1,11 +1,11 @@
 export const manifest = {
-    type: 'propertyEditorUI',
-    alias: 'Umb.PropertyEditorUI.UploadField',
+    type: 'propertyEditorUi',
+    alias: 'Umb.PropertyEditorUi.UploadField',
     name: 'Upload Field Property Editor UI',
     loader: () => import('./property-editor-ui-upload-field.element.js'),
     meta: {
         label: 'Upload Field',
-        propertyEditorModel: 'Umbraco.UploadField',
+        propertyEditorAlias: 'Umbraco.UploadField',
         icon: 'umb:download-alt',
         group: 'common',
     },

package/dist-cms/packages/core/property-editors/uis/user-picker/manifests.d.ts

@@ -1,2 +1,2 @@
-import type { ManifestPropertyEditorUI } from '../../../extension-registry/index.js';
-export declare const manifest: ManifestPropertyEditorUI;
+import type { ManifestPropertyEditorUi } from '../../../extension-registry/index.js';
+export declare const manifest: ManifestPropertyEditorUi;

package/dist-cms/packages/core/property-editors/uis/user-picker/manifests.js

@@ -1,11 +1,11 @@
 export const manifest = {
-    type: 'propertyEditorUI',
-    alias: 'Umb.PropertyEditorUI.UserPicker',
+    type: 'propertyEditorUi',
+    alias: 'Umb.PropertyEditorUi.UserPicker',
     name: 'User Picker Property Editor UI',
     loader: () => import('./property-editor-ui-user-picker.element.js'),
     meta: {
         label: 'User Picker',
-        propertyEditorModel: 'Umbraco.UserPicker',
+        propertyEditorAlias: 'Umbraco.UserPicker',
         icon: 'umb:user',
         group: 'people',
     },

package/dist-cms/packages/core/property-editors/uis/value-type/manifests.d.ts

@@ -1,2 +1,2 @@
-import type { ManifestPropertyEditorUI } from '../../../extension-registry/index.js';
-export declare const manifest: ManifestPropertyEditorUI;
+import type { ManifestPropertyEditorUi } from '../../../extension-registry/index.js';
+export declare const manifest: ManifestPropertyEditorUi;

package/dist-cms/packages/core/property-editors/uis/value-type/manifests.js

@@ -1,12 +1,12 @@
 export const manifest = {
-    type: 'propertyEditorUI',
-    alias: 'Umb.PropertyEditorUI.ValueType',
+    type: 'propertyEditorUi',
+    alias: 'Umb.PropertyEditorUi.ValueType',
     name: 'Value Type Property Editor UI',
     loader: () => import('./property-editor-ui-value-type.element.js'),
     meta: {
         label: 'Value Type',
         icon: 'umb:autofill',
         group: 'common',
-        propertyEditorModel: 'Umbraco.JSON',
+        propertyEditorAlias: 'Umbraco.JSON',
     },
 };

package/dist-cms/packages/core/section/section-main/section-main.element.js

@@ -22,8 +22,8 @@ let UmbSectionMainElement = class UmbSectionMainElement extends LitElement {
 				height: 100%;
 			}
 
-			main,
-			slot {
+			main {
+				position: relative;
 				display: flex;
 				flex-direction: column;
 				height: 100%;

package/dist-cms/packages/core/section/section-sidebar/section-sidebar.element.js

@@ -27,7 +27,7 @@ let UmbSectionSidebarElement = class UmbSectionSidebarElement extends UmbLitElem
         UUITextStyles,
         css `
 			:host {
-				flex: 0 0 300px;
+				flex: 0 0 var(--umb-section-sidebar-width);
 				background-color: var(--uui-color-surface);
 				height: 100%;
 				border-right: 1px solid var(--uui-color-border);

package/dist-cms/packages/core/section/section-sidebar-context-menu/section-sidebar-context-menu.element.js

@@ -83,16 +83,25 @@ let UmbSectionSidebarContextMenuElement = class UmbSectionSidebarContextMenuElem
 			}
 			#action-modal {
 				position: absolute;
-				left: 300px;
+				left: var(--umb-section-sidebar-width);
 				height: 100%;
 				z-index: 1;
 				top: 0;
-				width: 300px;
+				width: var(--umb-section-sidebar-width);
 				border: none;
 				border-left: 1px solid var(--uui-color-border);
 				border-right: 1px solid var(--uui-color-border);
 				background-color: var(--uui-color-surface);
 			}
+
+			#action-modal h3 {
+				padding: var(--uui-size-4) var(--uui-size-8);
+				margin: 0;
+				min-height: var(--umb-header-layout-height);
+				box-sizing: border-box;
+				display: flex;
+				align-items: center;
+			}
 		`,
     ]; }
 };

package/dist-cms/packages/core/section/section-sidebar-menu-with-entity-actions/section-sidebar-menu-with-entity-actions.element.js

@@ -4,8 +4,8 @@ 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 { css, html, customElement } from '../../../../external/lit/index.js';
 import { UmbSectionSidebarMenuElement } from '../section-sidebar-menu/section-sidebar-menu.element.js';
+import { css, html, customElement } from '../../../../external/lit/index.js';
 import { umbExtensionsRegistry, } from '../../extension-registry/index.js';
 import '../../menu/menu.element.js';
 const manifestWithEntityActions = {

package/dist-cms/packages/core/section/section-views/section-views.element.js

@@ -43,7 +43,7 @@ let UmbSectionViewsElement = class UmbSectionViewsElement extends UmbLitElement
             };
         });
         const routes = [...dashboardRoutes, ...viewRoutes];
-        this._routes = routes?.length > 0 ? [...routes, { path: '**', redirectTo: routes?.[0]?.path }] : [];
+        this._routes = routes?.length > 0 ? [...routes, { path: '', redirectTo: routes?.[0]?.path }] : [];
     }
     _observeSectionAlias() {
         if (!this._sectionContext)
@@ -79,16 +79,18 @@ let UmbSectionViewsElement = class UmbSectionViewsElement extends UmbLitElement
         return html `
 			${this._routes.length > 0
             ? html `
-						<div id="header">${this.#renderDashboards()} ${this.#renderViews()}</div>
-						<umb-router-slot
-							.routes=${this._routes}
-							@init=${(event) => {
+						<umb-body-layout>
+							<div id="header" slot="header">${this.#renderDashboards()} ${this.#renderViews()}</div>
+							<umb-router-slot
+								.routes=${this._routes}
+								@init=${(event) => {
                 this._routerPath = event.target.absoluteRouterPath;
             }}
-							@change=${(event) => {
+								@change=${(event) => {
                 this._activePath = event.target.localActiveViewPath;
             }}>
-						</umb-router-slot>
+							</umb-router-slot>
+						</umb-body-layout>
 				  `
             : nothing}
 		`;
@@ -125,6 +127,13 @@ let UmbSectionViewsElement = class UmbSectionViewsElement extends UmbLitElement
     static { this.styles = [
         UUITextStyles,
         css `
+			:host {
+				position: relative;
+				display: flex;
+				flex-direction: column;
+				height: 100%;
+			}
+
 			#header {
 				background-color: var(--uui-color-surface);
 				border-bottom: 1px solid var(--uui-color-divider-standalone);

package/dist-cms/packages/core/tree/index.d.ts

@@ -1,4 +1,3 @@
-export * from './context-menu/index.js';
 export * from './entity-tree-item/index.js';
 export * from './tree-item/index.js';
 export * from './tree-item-base/index.js';

package/dist-cms/packages/core/tree/index.js

@@ -1,4 +1,3 @@
-export * from './context-menu/index.js';
 export * from './entity-tree-item/index.js';
 export * from './tree-item/index.js';
 export * from './tree-item-base/index.js';

package/dist-cms/packages/core/tree/tree-item/tree-item.context.interface.d.ts

@@ -9,6 +9,7 @@ export interface UmbTreeItemContext<TreeItemType extends TreeItemPresentationMod
     treeItem: Observable<TreeItemType | undefined>;
     hasChildren: Observable<boolean>;
     isLoading: Observable<boolean>;
+    isSelectableContext: Observable<boolean>;
     isSelectable: Observable<boolean>;
     isSelected: Observable<boolean>;
     isActive: Observable<boolean>;

package/dist-cms/packages/core/tree/tree-item-base/tree-item-base.context.d.ts

@@ -13,6 +13,7 @@ export declare class UmbTreeItemContextBase<TreeItemType extends TreeItemPresent
     hasChildren: import("rxjs/internal/Observable.js").Observable<boolean>;
     isLoading: import("rxjs/internal/Observable.js").Observable<boolean>;
     isSelectable: import("rxjs/internal/Observable.js").Observable<boolean>;
+    isSelectableContext: import("rxjs/internal/Observable.js").Observable<boolean>;
     isSelected: import("rxjs/internal/Observable.js").Observable<boolean>;
     isActive: import("rxjs/internal/Observable.js").Observable<boolean>;
     hasActions: import("rxjs/internal/Observable.js").Observable<boolean>;

package/dist-cms/packages/core/tree/tree-item-base/tree-item-base.context.js

@@ -8,6 +8,7 @@ export class UmbTreeItemContextBase {
     #hasChildren;
     #isLoading;
     #isSelectable;
+    #isSelectableContext;
     #isSelected;
     #isActive;
     #hasActions;
@@ -25,6 +26,8 @@ export class UmbTreeItemContextBase {
         this.isLoading = this.#isLoading.asObservable();
         this.#isSelectable = new UmbBooleanState(false);
         this.isSelectable = this.#isSelectable.asObservable();
+        this.#isSelectableContext = new UmbBooleanState(false);
+        this.isSelectableContext = this.#isSelectableContext.asObservable();
         this.#isSelected = new UmbBooleanState(false);
         this.isSelected = this.#isSelected.asObservable();
         this.#isActive = new UmbBooleanState(false);
@@ -101,6 +104,7 @@ export class UmbTreeItemContextBase {
         if (!this.treeContext)
             return;
         new UmbObserverController(this.host, this.treeContext.selectable, (value) => {
+            this.#isSelectableContext.next(value);
             // If the tree is selectable, check if this item is selectable
             if (value === true) {
                 const isSelectable = this.treeContext?.selectableFilter?.(this.getTreeItem()) ?? true;

package/dist-cms/packages/core/tree/tree-item-base/tree-item-base.element.d.ts

@@ -5,6 +5,7 @@ export declare class UmbTreeItemBaseElement extends UmbLitElement {
     private _childItems?;
     private _href?;
     private _isLoading;
+    private _isSelectableContext;
     private _isSelectable;
     private _isSelected;
     private _hasChildren;

package/dist-cms/packages/core/tree/tree-item-base/tree-item-base.element.js

@@ -13,6 +13,7 @@ let UmbTreeItemBaseElement = class UmbTreeItemBaseElement extends UmbLitElement
     constructor() {
         super();
         this._isLoading = false;
+        this._isSelectableContext = false;
         this._isSelectable = false;
         this._isSelected = false;
         this._hasChildren = false;
@@ -28,6 +29,7 @@ let UmbTreeItemBaseElement = class UmbTreeItemBaseElement extends UmbLitElement
             this.observe(this.#treeItemContext.treeItem, (value) => (this._item = value));
             this.observe(this.#treeItemContext.hasChildren, (value) => (this._hasChildren = value));
             this.observe(this.#treeItemContext.isLoading, (value) => (this._isLoading = value));
+            this.observe(this.#treeItemContext.isSelectableContext, (value) => (this._isSelectableContext = value));
             this.observe(this.#treeItemContext.isSelectable, (value) => (this._isSelectable = value));
             this.observe(this.#treeItemContext.isSelected, (value) => (this._isSelected = value));
             this.observe(this.#treeItemContext.path, (value) => (this._href = value));
@@ -60,18 +62,21 @@ let UmbTreeItemBaseElement = class UmbTreeItemBaseElement extends UmbLitElement
     _openActions() {
         this.#treeItemContext?.toggleContextMenu();
     }
+    // Note: Currently we want to prevent opening when the item is in a selectable context, but this might change in the future.
+    // If we like to be able to open items in selectable context, then we might want to make it as a menu item action, so you have to click ... and chose an action called 'Edit'
     render() {
         return html `
 			<uui-menu-item
 				@show-children=${this._onShowChildren}
 				@selected=${this._handleSelectedItem}
 				@deselected=${this._handleDeselectedItem}
+				?disabled=${this._isSelectableContext && !this._isSelectable}
 				?selectable=${this._isSelectable}
 				?selected=${this._isSelected}
 				.loading=${this._isLoading}
 				.hasChildren=${this._hasChildren}
 				label="${ifDefined(this._item?.name)}"
-				href="${ifDefined(this._href)}">
+				href="${ifDefined(this._isSelectableContext ? undefined : this._href)}">
 				${this.#renderIcon()} ${this.#renderLabel()} ${this.#renderActions()} ${this.#renderChildItems()}
 				<slot></slot>
 			</uui-menu-item>
@@ -127,6 +132,9 @@ __decorate([
 __decorate([
     state()
 ], UmbTreeItemBaseElement.prototype, "_isLoading", void 0);
+__decorate([
+    state()
+], UmbTreeItemBaseElement.prototype, "_isSelectableContext", void 0);
 __decorate([
     state()
 ], UmbTreeItemBaseElement.prototype, "_isSelectable", void 0);

package/dist-cms/packages/core/tree/tree.element.d.ts

@@ -2,8 +2,6 @@ import { TreeItemPresentationModel } from '../../../external/backend-api/index.j
 import { UmbLitElement } from '../../../shared/lit-element/index.js';
 import './tree-item/tree-item.element.js';
 import './tree-item-base/tree-item-base.element.js';
-import './context-menu/tree-context-menu-page.service.js';
-import './context-menu/tree-context-menu.service.js';
 export declare class UmbTreeElement extends UmbLitElement {
     #private;
     get alias(): string | undefined;

package/dist-cms/packages/core/tree/tree.element.js

@@ -9,8 +9,6 @@ import { html, nothing, customElement, property, state, repeat } from '../../../
 import { UmbLitElement } from '../../../shared/lit-element/index.js';
 import './tree-item/tree-item.element.js';
 import './tree-item-base/tree-item-base.element.js';
-import './context-menu/tree-context-menu-page.service.js';
-import './context-menu/tree-context-menu.service.js';
 let UmbTreeElement = class UmbTreeElement extends UmbLitElement {
     constructor() {
         super(...arguments);

package/dist-cms/packages/core/workspace/index.d.ts

@@ -1,6 +1,7 @@
 export * from './workspace-action/index.js';
 export * from './workspace-action-menu/index.js';
 export * from './workspace-editor/index.js';
+export * from './workspace-footer/index.js';
 export * from './workspace-context/index.js';
 export * from './workspace-variant/index.js';
 export * from './workspace-split-view-manager.class.js';

package/dist-cms/packages/core/workspace/index.js

@@ -1,6 +1,7 @@
 export * from './workspace-action/index.js';
 export * from './workspace-action-menu/index.js';
 export * from './workspace-editor/index.js';
+export * from './workspace-footer/index.js';
 export * from './workspace-context/index.js';
 export * from './workspace-variant/index.js';
 export * from './workspace-split-view-manager.class.js';

package/dist-cms/packages/core/workspace/workspace-editor/workspace-editor.element.js

@@ -104,8 +104,8 @@ let UmbWorkspaceEditorElement = class UmbWorkspaceEditorElement extends UmbLitEl
 				${this.enforceNoFooter
             ? ''
             : html `
-							<umb-workspace-footer alias=${this.alias}>
-								<slot name="footer"></slot>
+							<umb-workspace-footer slot="footer" alias=${this.alias}>
+								<slot name="footer-info"></slot>
 								<slot name="actions" slot="actions"></slot>
 							</umb-workspace-footer>
 					  `}

package/dist-cms/packages/core/workspace/workspace-footer/index.d.ts

@@ -0,0 +1 @@
+export * from './workspace-footer.element.js';

package/dist-cms/packages/core/workspace/workspace-footer/index.js

@@ -0,0 +1 @@
+export * from './workspace-footer.element.js';

package/dist-cms/packages/core/workspace/workspace-property/workspace-property.context.d.ts

@@ -30,7 +30,7 @@ export declare class UmbWorkspacePropertyContext<ValueType = any> {
     setDescription(description: WorkspacePropertyData<ValueType>['description']): void;
     setValue(value: WorkspacePropertyData<ValueType>['value']): void;
     changeValue(value: WorkspacePropertyData<ValueType>['value']): void;
-    setConfig(config: WorkspacePropertyData<ValueType>['config']): void;
+    setConfig(config: WorkspacePropertyData<ValueType>['config'] | undefined): void;
     setVariantId(variantId: UmbVariantId | undefined): void;
     getVariantId(): UmbVariantId | undefined;
     resetValue(): void;

package/dist-cms/packages/core/workspace/workspace-property/workspace-property.element.d.ts

@@ -53,7 +53,7 @@ export declare class UmbWorkspacePropertyElement extends UmbLitElement {
      * @attr
      * @default ''
      */
-    set config(value: DataTypePropertyPresentationModel[]);
+    set config(value: DataTypePropertyPresentationModel[] | undefined);
     /**
      * PropertyVariantId. A Variant ID to identify which variant its value is stored on.
      * @public

package/dist-cms/packages/core/workspace/workspace-property/workspace-property.element.js

@@ -114,7 +114,7 @@ let UmbWorkspacePropertyElement = class UmbWorkspacePropertyElement extends UmbL
     }
     _observePropertyEditorUI() {
         this.propertyEditorUIObserver?.destroy();
-        this.propertyEditorUIObserver = this.observe(umbExtensionsRegistry.getByTypeAndAlias('propertyEditorUI', this._propertyEditorUiAlias), (manifest) => {
+        this.propertyEditorUIObserver = this.observe(umbExtensionsRegistry.getByTypeAndAlias('propertyEditorUi', this._propertyEditorUiAlias), (manifest) => {
             this._gotEditorUI(manifest);
         });
     }

package/dist-cms/packages/core/workspace/workspace-variant/index.d.ts

@@ -1,2 +1,3 @@
+export * from './variantable-property/variantable-property.element.js';
 export * from './workspace-variant.context.js';
 export * from './workspace-variant.element.js';

package/dist-cms/packages/core/workspace/workspace-variant/index.js

@@ -1,2 +1,3 @@
+export * from './variantable-property/variantable-property.element.js';
 export * from './workspace-variant.context.js';
 export * from './workspace-variant.element.js';

package/dist-cms/packages/documents/dashboards/redirect-management/dashboard-redirect-management.element.js

@@ -4,7 +4,7 @@ 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 { UUITextStyles } from '../../../../external/uui/index.js';
+import { UUITextStyles, } from '../../../../external/uui/index.js';
 import { css, html, nothing, customElement, state, query, property } from '../../../../external/lit/index.js';
 import { UMB_MODAL_CONTEXT_TOKEN, UMB_CONFIRM_MODAL } from '../../../core/modal/index.js';
 import { UmbLitElement } from '../../../../shared/lit-element/index.js';
@@ -222,7 +222,7 @@ let UmbDashboardRedirectManagementElement = class UmbDashboardRedirectManagement
         css `
 			:host {
 				display: block;
-				margin: var(--uui-size-layout-1);
+				padding: var(--uui-size-layout-1);
 			}
 
 			.actions {

package/dist-cms/packages/documents/document-types/modals/allowed-document-types/allowed-document-types-modal.element.d.ts

@@ -3,7 +3,9 @@ import { UmbModalBaseElement } from '../../../../../shared/modal/index.js';
 export declare class UmbAllowedDocumentTypesModalElement extends UmbModalBaseElement<UmbAllowedDocumentTypesModalData, UmbAllowedDocumentTypesModalResult> {
     #private;
     private _allowedDocumentTypes;
-    firstUpdated(): Promise<void>;
+    private _headline?;
+    connectedCallback(): void;
+    private _retrieveAllowedChildrenOf;
     private _handleCancel;
     render(): import("lit-html").TemplateResult<1>;
     static styles: import("@lit/reactive-element/css-tag.js").CSSResult[];

package/dist-cms/packages/documents/document-types/modals/allowed-document-types/allowed-document-types-modal.element.js

@@ -15,12 +15,23 @@ let UmbAllowedDocumentTypesModalElement = class UmbAllowedDocumentTypesModalElem
         this._allowedDocumentTypes = [];
     }
     #documentTypeRepository;
-    async firstUpdated() {
-        // TODO: Support root aka. id of null? or maybe its an active prop, like 'atRoot'.
-        // TODO: show error
-        if (!this.data?.id)
-            return;
-        const { data } = await this.#documentTypeRepository.requestAllowedChildTypesOf(this.data.id);
+    connectedCallback() {
+        super.connectedCallback();
+        const parentName = this.data?.parentName;
+        if (parentName) {
+            this._headline = `Create at '${parentName}'`;
+        }
+        else {
+            this._headline = `Create`;
+        }
+        if (this.data?.parentId) {
+            // TODO: Support root aka. id of null? or maybe its an active prop, like 'atRoot'.
+            // TODO: show error
+            this._retrieveAllowedChildrenOf(this.data.parentId);
+        }
+    }
+    async _retrieveAllowedChildrenOf(id) {
+        const { data } = await this.#documentTypeRepository.requestAllowedChildTypesOf(id);
         if (data) {
             this._allowedDocumentTypes = data;
         }
@@ -38,7 +49,7 @@ let UmbAllowedDocumentTypesModalElement = class UmbAllowedDocumentTypesModalElem
     }
     render() {
         return html `
-			<umb-body-layout headline="Headline">
+			<umb-body-layout headline=${this._headline}>
 				<uui-box>
 					${this._allowedDocumentTypes.length === 0 ? html `<p>No allowed types</p>` : nothing}
 					${this._allowedDocumentTypes.map((item) => html `
@@ -56,6 +67,9 @@ let UmbAllowedDocumentTypesModalElement = class UmbAllowedDocumentTypesModalElem
 __decorate([
     state()
 ], UmbAllowedDocumentTypesModalElement.prototype, "_allowedDocumentTypes", void 0);
+__decorate([
+    state()
+], UmbAllowedDocumentTypesModalElement.prototype, "_headline", void 0);
 UmbAllowedDocumentTypesModalElement = __decorate([
     customElement('umb-allowed-document-types-modal')
 ], UmbAllowedDocumentTypesModalElement);

package/dist-cms/packages/documents/document-types/workspace/document-type-workspace-editor.element.js

@@ -73,7 +73,7 @@ let UmbDocumentTypeWorkspaceEditorElement = class UmbDocumentTypeWorkspaceEditor
 					</uui-input>
 				</div>
 
-				<div slot="footer">
+				<div slot="footer-info">
 					<!-- TODO: Shortcuts Modal? -->
 					<uui-button label="Show keyboard shortcuts">
 						Keyboard Shortcuts

package/dist-cms/packages/documents/document-types/workspace/manifests.js

@@ -29,7 +29,7 @@ const workspaceEditorViews = [
         alias: 'Umb.WorkspaceView.DocumentType.Structure',
         name: 'Document Type Workspace Structure View',
         loader: () => import('./views/structure/document-type-workspace-view-structure.element.js'),
-        weight: 100,
+        weight: 800,
         meta: {
             label: 'Structure',
             pathname: 'structure',
@@ -41,13 +41,13 @@ const workspaceEditorViews = [
     },
     {
         type: 'workspaceEditorView',
-        alias: 'Umb.WorkspaceView.DocumentType.Permissions',
-        name: 'Document Type Workspace Permissions View',
-        loader: () => import('./views/details/document-type-workspace-view-details.element.js'),
-        weight: 100,
+        alias: 'Umb.WorkspaceView.DocumentType.Settings',
+        name: 'Document Type Workspace Settings View',
+        loader: () => import('./views/settings/document-type-workspace-view-settings.element.js'),
+        weight: 600,
         meta: {
-            label: 'Details',
-            pathname: 'details',
+            label: 'Settings',
+            pathname: 'settings',
             icon: 'umb:settings',
         },
         conditions: {
@@ -59,7 +59,7 @@ const workspaceEditorViews = [
         alias: 'Umb.WorkspaceView.DocumentType.Templates',
         name: 'Document Type Workspace Templates View',
         loader: () => import('./views/templates/document-type-workspace-view-templates.element.js'),
-        weight: 100,
+        weight: 400,
         meta: {
             label: 'Templates',
             pathname: 'templates',

package/dist-cms/packages/documents/document-types/workspace/views/design/document-type-workspace-view-edit-tab.element.js

@@ -70,7 +70,7 @@ let UmbDocumentTypeWorkspaceViewEditTabElement = class UmbDocumentTypeWorkspaceV
 						</uui-box>
 				  `
             : ''}
-			${repeat(this._groups, (group) => group.name, (group) => html `<uui-box .headline=${group.name || ''}>
+			${repeat(this._groups, (group) => group.name, (group) => html ` <uui-box .headline=${group.name || ''}>
 					<umb-document-type-workspace-view-edit-properties
 						container-id=${group.id}
 						container-type="Group"
@@ -82,12 +82,18 @@ let UmbDocumentTypeWorkspaceViewEditTabElement = class UmbDocumentTypeWorkspaceV
     static { this.styles = [
         UUITextStyles,
         css `
-			uui-box {
+			:host {
+				display: block;
 				margin: var(--uui-size-layout-1);
+				padding-bottom: var(--uui-size-layout-1); // To enforce some distance to the bottom of the scroll-container.
+			}
+			uui-box {
+				margin-top: var(--uui-size-layout-1);
 			}
 
 			#add {
 				width: 100%;
+				margin-top: var(--uui-size-layout-1);
 			}
 		`,
     ]; }