@umbraco-cms/backoffice 14.0.0--preview004-83eb6818 → 14.0.0--preview004-044c3492

package/dist-cms/custom-elements.json

@@ -1939,6 +1939,17 @@
         }
       ]
     },
+    {
+      "name": "umb-popover-layout",
+      "path": "./../src/packages/core/components/popover-layout/popover-layout.element.ts",
+      "properties": [
+        {
+          "name": "styles",
+          "type": "array",
+          "default": "[\"UmbTextStyles\",null]"
+        }
+      ]
+    },
     {
       "name": "umb-property-editor-config",
       "path": "./../src/packages/core/components/property-editor-config/property-editor-config.element.ts",

package/dist-cms/packages/core/collection/components/collection-view-bundle.element.d.ts

@@ -1,13 +1,13 @@
 import { ManifestCollectionView } from '../../extension-registry/models/collection-view.model.js';
+import { nothing } from '../../../../external/lit/index.js';
 import { UmbLitElement } from '../../../../shared/lit-element/index.js';
 export declare class UmbCollectionViewBundleElement extends UmbLitElement {
     #private;
     _views: Array<ManifestCollectionView>;
     _currentView?: ManifestCollectionView;
-    private _isOpen;
     private _collectionRootPathname;
     constructor();
-    render(): import("lit-html").TemplateResult<1>;
+    render(): import("lit-html").TemplateResult<1> | typeof nothing;
     static styles: import("@lit/reactive-element/css-tag.js").CSSResult[];
 }
 declare global {

package/dist-cms/packages/core/collection/components/collection-view-bundle.element.js

@@ -13,7 +13,6 @@ export let UmbCollectionViewBundleElement = class UmbCollectionViewBundleElement
     constructor() {
         super();
         this._views = [];
-        this._isOpen = false;
         this._collectionRootPathname = '';
         this.consumeContext(UMB_COLLECTION_CONTEXT, (context) => {
             this.#collectionContext = context;
@@ -26,6 +25,7 @@ export let UmbCollectionViewBundleElement = class UmbCollectionViewBundleElement
     }
     #observeCurrentView() {
         this.observe(this.#collectionContext.currentView, (view) => {
+            //TODO: This is not called when the view is changed
             this._currentView = view;
         }, 'umbCurrentCollectionViewObserver');
     }
@@ -34,39 +34,43 @@ export let UmbCollectionViewBundleElement = class UmbCollectionViewBundleElement
             this._views = views;
         }, 'umbCollectionViewsObserver');
     }
-    #toggleDropdown() {
-        this._isOpen = !this._isOpen;
-    }
-    #closeDropdown() {
-        this._isOpen = false;
-    }
     render() {
-        return html `${this.#renderLayoutButton()}`;
-    }
-    #renderLayoutButton() {
         if (!this._currentView)
             return nothing;
-        return html ` <umb-dropdown .open="${this._isOpen}" @close=${this.#closeDropdown}>
-			<uui-button slot="trigger" label="status" @click=${this.#toggleDropdown}
-				>${this.#renderItemDisplay(this._currentView)}</uui-button
-			>
-			<div slot="dropdown" class="filter-dropdown">${this._views.map((view) => this.#renderItem(view))}</div>
-		</umb-dropdown>`;
+        return html `
+			<uui-button compact popovertarget="collection-view-bundle-popover" label="status">
+				${this.#renderItemDisplay(this._currentView)}
+			</uui-button>
+			<uui-popover-container id="collection-view-bundle-popover" popover placement="bottom">
+				<umb-popover-layout>
+					<div class="filter-dropdown">${this._views.map((view) => this.#renderItem(view))}</div>
+				</umb-popover-layout>
+			</uui-popover-container>
+		`;
     }
     #renderItem(view) {
-        return html `<a href="${this._collectionRootPathname}/${view.meta.pathName}">${this.#renderItemDisplay(view)}</a>`;
+        return html `
+			<uui-button compact href="${this._collectionRootPathname}/${view.meta.pathName}">
+				${this.#renderItemDisplay(view)} <span class="label">${view.meta.label}</span>
+			</uui-button>
+		`;
     }
     #renderItemDisplay(view) {
-        return html `<span class="item"><uui-icon name=${view.meta.icon}></uui-icon> ${view.meta.label}</span>`;
+        return html `<uui-icon name=${view.meta.icon}></uui-icon>`;
     }
     static { this.styles = [
         UmbTextStyles,
         css `
-			.item {
+			:host {
+				--uui-button-content-align: left;
 			}
-
-			a {
-				display: block;
+			.label {
+				margin-left: var(--uui-size-space-1);
+			}
+			.filter-dropdown {
+				display: flex;
+				gap: var(--uui-size-space-3);
+				flex-direction: column;
 			}
 		`,
     ]; }
@@ -77,9 +81,6 @@ __decorate([
 __decorate([
     state()
 ], UmbCollectionViewBundleElement.prototype, "_currentView", void 0);
-__decorate([
-    state()
-], UmbCollectionViewBundleElement.prototype, "_isOpen", void 0);
 __decorate([
     state()
 ], UmbCollectionViewBundleElement.prototype, "_collectionRootPathname", void 0);

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

@@ -31,3 +31,4 @@ export * from './ref-property-editor-ui/index.js';
 export * from './table/index.js';
 export * from './tooltip-menu/index.js';
 export * from './variant-selector/index.js';
+export * from './popover-layout/index.js';

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

@@ -33,3 +33,4 @@ export * from './ref-property-editor-ui/index.js';
 export * from './table/index.js';
 export * from './tooltip-menu/index.js';
 export * from './variant-selector/index.js';
+export * from './popover-layout/index.js';

package/dist-cms/packages/core/components/popover-layout/index.d.ts

@@ -0,0 +1,2 @@
+import './popover-layout.element.js';
+export * from './popover-layout.element.js';

package/dist-cms/packages/core/components/popover-layout/index.js

@@ -0,0 +1,2 @@
+import './popover-layout.element.js';
+export * from './popover-layout.element.js';

package/dist-cms/packages/core/components/popover-layout/popover-layout.element.d.ts

@@ -0,0 +1,10 @@
+import { UmbLitElement } from '../../../../shared/lit-element/index.js';
+export declare class UmbPopoverLayoutElement extends UmbLitElement {
+    render(): import("lit-html").TemplateResult<1>;
+    static styles: import("@lit/reactive-element/css-tag").CSSResult[];
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'umb-popover-layout': UmbPopoverLayoutElement;
+    }
+}

package/dist-cms/packages/core/components/popover-layout/popover-layout.element.js

@@ -0,0 +1,33 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    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 { UmbTextStyles } from '../../../../shared/style/index.js';
+import { css, html, customElement } from '../../../../external/lit/index.js';
+import { UmbLitElement } from '../../../../shared/lit-element/index.js';
+// TODO: maybe move this to UI Library.
+// TODO: add overwrites for customization.
+export let UmbPopoverLayoutElement = class UmbPopoverLayoutElement extends UmbLitElement {
+    render() {
+        return html `<slot></slot>`;
+    }
+    static { this.styles = [
+        UmbTextStyles,
+        css `
+			:host {
+				background-color: var(--uui-color-surface);
+				display: block;
+				border: 1px solid var(--uui-color-border);
+				border-radius: var(--uui-border-radius);
+				box-shadow: var(--uui-shadow-depth-3);
+				padding: var(--uui-size-space-3);
+				overflow: clip;
+			}
+		`,
+    ]; }
+};
+UmbPopoverLayoutElement = __decorate([
+    customElement('umb-popover-layout')
+], UmbPopoverLayoutElement);

package/dist-cms/packages/templating/scripts/entity-actions/create/create-empty.action.js

@@ -4,6 +4,10 @@ export class UmbCreateScriptAction extends UmbEntityActionBase {
         super(host, repositoryAlias, unique);
     }
     async execute() {
+        if (this.unique !== null) {
+            // Note: %2F is a slash (/)
+            this.unique = this.unique.replace(/\//g, '%2F');
+        }
         history.pushState(null, '', `section/settings/workspace/script/create/${this.unique ?? 'null'}`);
     }
 }

package/dist-cms/packages/templating/scripts/workspace/script-workspace-edit.element.d.ts

@@ -5,7 +5,6 @@ export declare class UmbScriptWorkspaceEditElement extends UmbLitElement {
     private set _name(value);
     private _content?;
     private _path?;
-    private _dirName?;
     private _ready?;
     private _codeEditor?;
     private _modalContext?;

package/dist-cms/packages/templating/scripts/workspace/script-workspace-edit.element.js

@@ -26,7 +26,6 @@ export let UmbScriptWorkspaceEditElement = class UmbScriptWorkspaceEditElement e
         this.#name = '';
         this._content = '';
         this._path = '';
-        this._dirName = '';
         this._ready = false;
         this.#isNew = false;
         this.inputQuery$ = new Subject();
@@ -42,8 +41,7 @@ export let UmbScriptWorkspaceEditElement = class UmbScriptWorkspaceEditElement e
                 this._content = content;
             });
             this.observe(this.#scriptsWorkspaceContext.path, (path) => {
-                this._path = path;
-                this._dirName = this._path?.substring(0, this._path?.lastIndexOf('\\'))?.replace(/\\/g, '/');
+                this._path = path?.replace(/\\/g, '/');
             });
             this.observe(this.#scriptsWorkspaceContext.isNew, (isNew) => {
                 this.#isNew = !!isNew;
@@ -81,7 +79,7 @@ export let UmbScriptWorkspaceEditElement = class UmbScriptWorkspaceEditElement e
 					.value=${this._name}
 					@input=${this.#onNameInput}
 					label="template name"></uui-input>
-				<small>Scripts/${this._dirName}${this._name}.js</small>
+				<small>Scripts/${this._path}</small>
 			</div>
 			<uui-box>
 				<!-- the div below in the header is to make the box display nicely with code editor -->
@@ -152,9 +150,6 @@ __decorate([
 __decorate([
     state()
 ], UmbScriptWorkspaceEditElement.prototype, "_path", void 0);
-__decorate([
-    state()
-], UmbScriptWorkspaceEditElement.prototype, "_dirName", void 0);
 __decorate([
     state()
 ], UmbScriptWorkspaceEditElement.prototype, "_ready", void 0);

package/dist-cms/packages/templating/scripts/workspace/script-workspace.context.d.ts

@@ -16,7 +16,7 @@ export declare class UmbScriptWorkspaceContext extends UmbEditableWorkspaceConte
     setContent(value: string): void;
     load(entityKey: string): Promise<void>;
     create(parentKey: string): Promise<void>;
-    getEntityId(): string | undefined;
+    getEntityId(): string;
     save(): Promise<void>;
     destroy(): void;
     getEntityType(): string;

package/dist-cms/packages/templating/scripts/workspace/script-workspace.context.js

@@ -52,7 +52,10 @@ export class UmbScriptWorkspaceContext extends UmbEditableWorkspaceContextBase {
         this.setIsNew(true);
     }
     getEntityId() {
-        return this.getData()?.path;
+        const path = this.getData()?.path?.replace(/\//g, '%2F');
+        const name = this.getData()?.name;
+        // Note: %2F is a slash (/)
+        return path && name ? `${path}%2F${name}` : name || '';
     }
     async save() {
         const script = this.getData();
@@ -65,7 +68,10 @@ export class UmbScriptWorkspaceContext extends UmbEditableWorkspaceContextBase {
                 content: script.content,
                 parentPath: script.path + '/',
             };
-            this.repository.create(createRequestBody);
+            const { error } = await this.repository.create(createRequestBody);
+            if (!error) {
+                this.setIsNew(false);
+            }
             return Promise.resolve();
         }
         if (!script.path)
@@ -75,7 +81,10 @@ export class UmbScriptWorkspaceContext extends UmbEditableWorkspaceContextBase {
             existingPath: script.path,
             content: script.content,
         };
-        this.repository.save(script.path, updateRequestBody);
+        const { error } = await this.repository.save(script.path, updateRequestBody);
+        if (!error) {
+            //TODO Update the URL to the new name
+        }
         return Promise.resolve();
     }
     destroy() {

package/dist-cms/packages/templating/scripts/workspace/script-workspace.element.js

@@ -12,16 +12,16 @@ import { UmbWorkspaceIsNewRedirectController } from '../../../core/workspace/ind
 export let UmbScriptWorkspaceElement = class UmbScriptWorkspaceElement extends UmbLitElement {
     constructor() {
         super(...arguments);
-        this.#scriptWorkspaceContext = new UmbScriptWorkspaceContext(this);
+        this.#workspaceContext = new UmbScriptWorkspaceContext(this);
         this._routes = [
             {
                 path: 'create/:parentKey',
                 component: import('./script-workspace-edit.element.js'),
-                setup: async (component, info) => {
+                setup: async (_component, info) => {
                     const parentKey = info.match.params.parentKey;
                     const decodePath = decodeURIComponent(parentKey);
-                    this.#scriptWorkspaceContext.create(decodePath === 'null' ? '' : decodePath);
-                    new UmbWorkspaceIsNewRedirectController(this, this.#scriptWorkspaceContext, this.shadowRoot.querySelector('umb-router-slot'));
+                    this.#workspaceContext.create(decodePath === 'null' ? '' : decodePath);
+                    new UmbWorkspaceIsNewRedirectController(this, this.#workspaceContext, this.shadowRoot.querySelector('umb-router-slot'));
                 },
             },
             {
@@ -30,12 +30,12 @@ export let UmbScriptWorkspaceElement = class UmbScriptWorkspaceElement extends U
                 setup: (component, info) => {
                     const key = info.match.params.key;
                     const decodePath = decodeURIComponent(key).replace('-js', '.js');
-                    this.#scriptWorkspaceContext.load(decodePath);
+                    this.#workspaceContext.load(decodePath);
                 },
             },
         ];
     }
-    #scriptWorkspaceContext;
+    #workspaceContext;
     render() {
         return html `<umb-router-slot .routes=${this._routes}></umb-router-slot>`;
     }

package/dist-cms/packages/templating/stylesheets/workspace/stylesheet-workspace-editor.element.d.ts

@@ -4,7 +4,6 @@ export declare class UmbStylesheetWorkspaceEditorElement extends UmbLitElement {
     private get _name();
     private set _name(value);
     private _path?;
-    private _dirName?;
     private inputQuery$;
     constructor();
     render(): import("lit-html").TemplateResult<1>;

package/dist-cms/packages/templating/stylesheets/workspace/stylesheet-workspace-editor.element.js

@@ -34,15 +34,7 @@ export let UmbStylesheetWorkspaceEditorElement = class UmbStylesheetWorkspaceEdi
     #observeNameAndPath() {
         if (!this.#workspaceContext)
             return;
-        this.observe(this.#workspaceContext.path, (path) => {
-            this._path = path;
-            if (this._path?.includes('.css')) {
-                this._dirName = this._path?.substring(0, this._path?.lastIndexOf('\\') + 1)?.replace(/\\/g, '/');
-            }
-            else {
-                this._dirName = path + '/';
-            }
-        }, '_observeStylesheetPath');
+        this.observe(this.#workspaceContext.path, (path) => (this._path = path?.replace(/\\/g, '/')), '_observeStylesheetPath');
         this.observe(this.#workspaceContext.name, (name) => (this._name = name), '_observeStylesheetName');
     }
     #onNameChange(event) {
@@ -61,7 +53,7 @@ export let UmbStylesheetWorkspaceEditorElement = class UmbStylesheetWorkspaceEdi
 						.value=${this._name}
 						@input="${this.#onNameChange}">
 					</uui-input>
-					<small>/css/${this._dirName}${this._name}.css</small>
+					<small>/css/${this._path}</small>
 				</div>
 
 				<div slot="footer-info">
@@ -109,9 +101,6 @@ __decorate([
 __decorate([
     state()
 ], UmbStylesheetWorkspaceEditorElement.prototype, "_path", void 0);
-__decorate([
-    state()
-], UmbStylesheetWorkspaceEditorElement.prototype, "_dirName", void 0);
 UmbStylesheetWorkspaceEditorElement = __decorate([
     customElement('umb-stylesheet-workspace-editor')
 ], UmbStylesheetWorkspaceEditorElement);

package/dist-cms/packages/templating/stylesheets/workspace/stylesheet-workspace.context.js

@@ -1,5 +1,5 @@
 import { UmbStylesheetRepository } from '../repository/stylesheet.repository.js';
-import { UmbEditableWorkspaceContextBase } from '../../../core/workspace/index.js';
+import { UmbEditableWorkspaceContextBase, } from '../../../core/workspace/index.js';
 import { UmbArrayState, UmbBooleanState, UmbObjectState } from '../../../../libs/observable-api/index.js';
 import { loadCodeEditor } from '../../code-editor/index.js';
 import { UmbContextToken } from '../../../../libs/context-api/index.js';
@@ -132,7 +132,10 @@ export class UmbStylesheetWorkspaceContext extends UmbEditableWorkspaceContextBa
                 existingPath: stylesheet.path,
                 content: stylesheet.content,
             };
-            this.repository.save(stylesheet.path, updateRequestBody);
+            const { error } = await this.repository.save(stylesheet.path, updateRequestBody);
+            if (!error) {
+                //TODO Update the URL to the new name
+            }
             return Promise.resolve();
         }
     }

package/dist-cms/packages/user/user/collection/user-collection-header.element.js

@@ -6,7 +6,6 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 };
 import { css, html, customElement, state, repeat, ifDefined } from '../../../../external/lit/index.js';
 import { UmbLitElement } from '../../../../shared/lit-element/index.js';
-import { UmbDropdownElement } from '../../../core/components/index.js';
 import { UMB_COLLECTION_CONTEXT } from '../../../core/collection/index.js';
 import { UMB_CREATE_USER_MODAL, UMB_INVITE_USER_MODAL, UMB_MODAL_MANAGER_CONTEXT_TOKEN, } from '../../../core/modal/index.js';
 import { UserOrderModel, UserStateModel } from '../../../../external/backend-api/index.js';
@@ -42,13 +41,6 @@ export let UmbUserCollectionHeaderElement = class UmbUserCollectionHeaderElement
             this._userGroups = data.items;
         }
     }
-    #onDropdownClick(event) {
-        const composedPath = event.composedPath();
-        const dropdown = composedPath.find((el) => el instanceof UmbDropdownElement);
-        if (dropdown) {
-            dropdown.open = !dropdown.open;
-        }
-    }
     _updateSearch(event) {
         const target = event.target;
         const filter = target.value || '';
@@ -81,8 +73,9 @@ export let UmbUserCollectionHeaderElement = class UmbUserCollectionHeaderElement
     }
     render() {
         return html `
-			${this.#renderCollectionActions()} ${this.#renderSearch()} ${this.#renderFilters()}
-			${this.#renderCollectionViews()}
+			<div style="display: flex; gap: var(--uui-size-space-4)">${this.#renderCollectionActions()}</div>
+			${this.#renderSearch()}
+			<div>${this.#renderFilters()} ${this.#renderCollectionViews()}</div>
 		`;
     }
     #renderCollectionActions() {
@@ -120,46 +113,65 @@ export let UmbUserCollectionHeaderElement = class UmbUserCollectionHeaderElement
         this.#collectionContext?.setUserGroupFilter(ids);
     }
     #getUserGroupFilterLabel() {
-        return this._userGroupFilterSelection.length === 0
+        const length = this._userGroupFilterSelection.length;
+        const max = 2;
+        //TODO: Temp solution to limit the amount of states shown
+        return length === 0
             ? this.localize.term('general_all')
-            : this._userGroupFilterSelection.map((group) => group.name).join(', ');
+            : this._userGroupFilterSelection
+                .slice(0, max)
+                .map((group) => group.name)
+                .join(', ') + (length > max ? ' + ' + (length - max) : '');
+    }
+    #getStatusFilterLabel() {
+        const length = this._stateFilterSelection.length;
+        const max = 2;
+        //TODO: Temp solution to limit the amount of states shown
+        return length === 0
+            ? this.localize.term('general_all')
+            : this._stateFilterSelection
+                .slice(0, max)
+                .map((state) => this.localize.term('user_state' + state))
+                .join(', ') + (length > max ? ' + ' + (length - max) : '');
     }
     #renderFilters() {
         return html ` ${this.#renderStatusFilter()} ${this.#renderUserGroupFilter()} `;
     }
     #renderStatusFilter() {
         return html `
-			<umb-dropdown class="filter">
-				<uui-button @click=${this.#onDropdownClick} slot="trigger" label="status">
-					<umb-localize key="general_status"></umb-localize>:
-					<umb-localize key=${'user_state' + this._stateFilterSelection}></umb-localize>
-				</uui-button>
-
-				<div slot="dropdown" class="filter-dropdown">
-					${this._stateFilterOptions.map((option) => html `<uui-checkbox
-								label=${this.localize.term('user_state' + option)}
-								@change=${this.#onStateFilterChange}
-								name="state"
-								value=${option}></uui-checkbox>`)}
-				</div>
-			</umb-dropdown>
+			<uui-button popovertarget="popover-user-status-filter" label="status">
+				<umb-localize key="general_status"></umb-localize>: <b>${this.#getStatusFilterLabel()}</b>
+			</uui-button>
+			<uui-popover-container id="popover-user-status-filter" popover placement="bottom">
+				<umb-popover-layout>
+					<div class="filter-dropdown">
+						${this._stateFilterOptions.map((option) => html `<uui-checkbox
+									label=${this.localize.term('user_state' + option)}
+									@change=${this.#onStateFilterChange}
+									name="state"
+									value=${option}></uui-checkbox>`)}
+					</div>
+				</umb-popover-layout>
+			</uui-popover-container>
 		`;
     }
     #renderUserGroupFilter() {
         return html `
-			<umb-dropdown class="filter">
-				<uui-button @click=${this.#onDropdownClick} slot="trigger" label=${this.localize.term('general_groups')}>
-					<umb-localize key="general_groups"></umb-localize>: ${this.#getUserGroupFilterLabel()}
-				</uui-button>
-				<div slot="dropdown" class="filter-dropdown">
-					${repeat(this._userGroups, (group) => group.id, (group) => html `
-							<uui-checkbox
-								label=${ifDefined(group.name)}
-								value=${ifDefined(group.id)}
-								@change=${this.#onUserGroupFilterChange}></uui-checkbox>
-						`)}
-				</div>
-			</umb-dropdown>
+			<uui-button popovertarget="popover-user-group-filter" label=${this.localize.term('general_groups')}>
+				<umb-localize key="general_groups"></umb-localize>: <b>${this.#getUserGroupFilterLabel()}</b>
+			</uui-button>
+			<uui-popover-container id="popover-user-group-filter" popover placement="bottom">
+				<umb-popover-layout>
+					<div class="filter-dropdown">
+						${repeat(this._userGroups, (group) => group.id, (group) => html `
+								<uui-checkbox
+									label=${ifDefined(group.name)}
+									value=${ifDefined(group.id)}
+									@change=${this.#onUserGroupFilterChange}></uui-checkbox>
+							`)}
+					</div>
+				</umb-popover-layout>
+			</uui-popover-container>
 		`;
     }
     #renderCollectionViews() {
@@ -189,7 +201,6 @@ export let UmbUserCollectionHeaderElement = class UmbUserCollectionHeaderElement
 				display: flex;
 				gap: var(--uui-size-space-3);
 				flex-direction: column;
-				width: fit-content;
 			}
 		`,
     ]; }