@umbraco-cms/backoffice 14.0.0--preview005-0faefb02 → 14.0.0--preview005-3e13e595

package/dist-cms/custom-elements.json

@@ -8213,6 +8213,10 @@
           "type": "boolean",
           "default": "\"\""
         },
+        {
+          "name": "showOpenButton",
+          "type": "boolean | undefined"
+        },
         {
           "name": "allowedContentTypeIds",
           "type": "string[] | undefined"
@@ -8255,6 +8259,11 @@
           "name": "selectedIds",
           "type": "string[]"
         },
+        {
+          "name": "showOpenButton",
+          "attribute": "showOpenButton",
+          "type": "boolean | undefined"
+        },
         {
           "name": "allowedContentTypeIds",
           "attribute": "allowedContentTypeIds",

package/dist-cms/packages/documents/documents/components/input-document/input-document.element.d.ts

@@ -39,7 +39,8 @@ export declare class UmbInputDocumentElement extends UmbInputDocumentElement_bas
     showOpenButton?: boolean;
     ignoreUserStartNodes?: boolean;
     set value(idsString: string);
-    private _items;
+    private _editDocumentPath;
+    private _items?;
     constructor();
     protected getFormElement(): undefined;
     render(): import("lit-html").TemplateResult<1>;

package/dist-cms/packages/documents/documents/components/input-document/input-document.element.js

@@ -9,12 +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 _UmbInputDocumentElement_instances, _UmbInputDocumentElement_sorter, _UmbInputDocumentElement_pickerContext, _UmbInputDocumentElement_pickableFilter, _UmbInputDocumentElement_openPicker, _UmbInputDocumentElement_openItem, _UmbInputDocumentElement_renderItems, _UmbInputDocumentElement_renderAddButton, _UmbInputDocumentElement_renderItem, _UmbInputDocumentElement_renderIcon, _UmbInputDocumentElement_renderIsTrashed, _UmbInputDocumentElement_renderOpenButton;
+var _UmbInputDocumentElement_instances, _UmbInputDocumentElement_sorter, _UmbInputDocumentElement_pickerContext, _UmbInputDocumentElement_pickableFilter, _UmbInputDocumentElement_openPicker, _UmbInputDocumentElement_renderItems, _UmbInputDocumentElement_renderAddButton, _UmbInputDocumentElement_renderItem, _UmbInputDocumentElement_renderIcon, _UmbInputDocumentElement_renderIsTrashed, _UmbInputDocumentElement_renderOpenButton;
 import { UmbDocumentPickerContext } from './input-document.context.js';
 import { css, html, customElement, property, state, ifDefined, repeat } from '../../../../../external/lit/index.js';
 import { FormControlMixin } from '../../../../../external/uui/index.js';
 import { UmbLitElement } from '../../../../../shared/lit-element/index.js';
 import { splitStringToArray } from '../../../../../shared/utils/index.js';
+import { UMB_WORKSPACE_MODAL, UmbModalRouteRegistrationController } from '../../../../core/modal/index.js';
 import { UmbSorterController } from '../../../../core/sorter/index.js';
 const SORTER_CONFIG = {
     compareElementToModel: (element, model) => {
@@ -84,7 +85,7 @@ let UmbInputDocumentElement = class UmbInputDocumentElement extends FormControlM
          * @default
          */
         this.maxMessage = 'This field exceeds the allowed amount of items';
-        this._items = [];
+        this._editDocumentPath = '';
         _UmbInputDocumentElement_pickerContext.set(this, new UmbDocumentPickerContext(this));
         _UmbInputDocumentElement_pickableFilter.set(this, (item) => {
             if (this.allowedContentTypeIds && this.allowedContentTypeIds.length > 0) {
@@ -92,6 +93,14 @@ let UmbInputDocumentElement = class UmbInputDocumentElement extends FormControlM
             }
             return true;
         });
+        new UmbModalRouteRegistrationController(this, UMB_WORKSPACE_MODAL)
+            .addAdditionalPath('document')
+            .onSetup(() => {
+            return { data: { entityType: 'document', preset: {} } };
+        })
+            .observeRouteBuilder((routeBuilder) => {
+            this._editDocumentPath = routeBuilder({});
+        });
         this.addValidator('rangeUnderflow', () => this.minMessage, () => !!this.min && __classPrivateFieldGet(this, _UmbInputDocumentElement_pickerContext, "f").getSelection().length < this.min);
         this.addValidator('rangeOverflow', () => this.maxMessage, () => !!this.max && __classPrivateFieldGet(this, _UmbInputDocumentElement_pickerContext, "f").getSelection().length > this.max);
         this.observe(__classPrivateFieldGet(this, _UmbInputDocumentElement_pickerContext, "f").selection, (selection) => (super.value = selection.join(',')));
@@ -116,10 +125,6 @@ _UmbInputDocumentElement_openPicker = function _UmbInputDocumentElement_openPick
         pickableFilter: __classPrivateFieldGet(this, _UmbInputDocumentElement_pickableFilter, "f"),
     });
 };
-_UmbInputDocumentElement_openItem = function _UmbInputDocumentElement_openItem(item) {
-    // TODO: Implement the Content editing infinity editor. [LK]
-    console.log('TODO: _openItem', item);
-};
 _UmbInputDocumentElement_renderItems = function _UmbInputDocumentElement_renderItems() {
     if (!this._items)
         return;
@@ -166,9 +171,13 @@ _UmbInputDocumentElement_renderIsTrashed = function _UmbInputDocumentElement_ren
 _UmbInputDocumentElement_renderOpenButton = function _UmbInputDocumentElement_renderOpenButton(item) {
     if (!this.showOpenButton)
         return;
-    return html `<uui-button @click=${() => __classPrivateFieldGet(this, _UmbInputDocumentElement_instances, "m", _UmbInputDocumentElement_openItem).call(this, item)} label="Open document ${item.name}"
-			>${this.localize.term('general_open')}</uui-button
-		>`;
+    return html `
+			<uui-button
+				href="${this._editDocumentPath}edit/${item.id}"
+				label="${this.localize.term('general_open')} ${item.name}">
+				${this.localize.term('general_open')}
+			</uui-button>
+		`;
 };
 UmbInputDocumentElement.styles = [
     css `
@@ -208,6 +217,9 @@ __decorate([
 __decorate([
     property()
 ], UmbInputDocumentElement.prototype, "value", null);
+__decorate([
+    state()
+], UmbInputDocumentElement.prototype, "_editDocumentPath", void 0);
 __decorate([
     state()
 ], UmbInputDocumentElement.prototype, "_items", void 0);

package/dist-cms/packages/media/media/components/input-media/input-media.element.d.ts

@@ -38,6 +38,7 @@ export declare class UmbInputMediaElement extends UmbInputMediaElement_base {
     showOpenButton?: boolean;
     ignoreUserStartNodes?: boolean;
     set value(idsString: string);
+    private _editMediaPath;
     private _items?;
     constructor();
     protected getFormElement(): undefined;

package/dist-cms/packages/media/media/components/input-media/input-media.element.js

@@ -9,12 +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 _UmbInputMediaElement_instances, _UmbInputMediaElement_sorter, _UmbInputMediaElement_pickerContext, _UmbInputMediaElement_pickableFilter, _UmbInputMediaElement_openPicker, _UmbInputMediaElement_openItem, _UmbInputMediaElement_renderItems, _UmbInputMediaElement_renderAddButton, _UmbInputMediaElement_renderItem, _UmbInputMediaElement_renderIsTrashed;
+var _UmbInputMediaElement_instances, _UmbInputMediaElement_sorter, _UmbInputMediaElement_pickerContext, _UmbInputMediaElement_pickableFilter, _UmbInputMediaElement_openPicker, _UmbInputMediaElement_openItem, _UmbInputMediaElement_renderItems, _UmbInputMediaElement_renderAddButton, _UmbInputMediaElement_renderItem, _UmbInputMediaElement_renderIsTrashed, _UmbInputMediaElement_renderOpenButton;
 import { UmbMediaPickerContext } from './input-media.context.js';
 import { css, html, customElement, property, state, ifDefined, repeat } from '../../../../../external/lit/index.js';
 import { FormControlMixin } from '../../../../../external/uui/index.js';
 import { UmbLitElement } from '../../../../../shared/lit-element/index.js';
 import { splitStringToArray } from '../../../../../shared/utils/index.js';
+import { UMB_WORKSPACE_MODAL, UmbModalRouteRegistrationController } from '../../../../core/modal/index.js';
 import { UmbSorterController } from '../../../../core/sorter/index.js';
 const SORTER_CONFIG = {
     compareElementToModel: (element, model) => {
@@ -84,6 +85,7 @@ let UmbInputMediaElement = class UmbInputMediaElement extends FormControlMixin(U
          * @default
          */
         this.maxMessage = 'This field exceeds the allowed amount of items';
+        this._editMediaPath = '';
         _UmbInputMediaElement_pickerContext.set(this, new UmbMediaPickerContext(this));
         _UmbInputMediaElement_pickableFilter.set(this, (item) => {
             /* TODO: Media item doesn't have the content/media-type ID available to query.
@@ -94,6 +96,14 @@ let UmbInputMediaElement = class UmbInputMediaElement extends FormControlMixin(U
             // }
             return true;
         });
+        new UmbModalRouteRegistrationController(this, UMB_WORKSPACE_MODAL)
+            .addAdditionalPath('media')
+            .onSetup(() => {
+            return { data: { entityType: 'media', preset: {} } };
+        })
+            .observeRouteBuilder((routeBuilder) => {
+            this._editMediaPath = routeBuilder({});
+        });
         this.observe(__classPrivateFieldGet(this, _UmbInputMediaElement_pickerContext, "f").selection, (selection) => (super.value = selection.join(',')));
         this.observe(__classPrivateFieldGet(this, _UmbInputMediaElement_pickerContext, "f").selectedItems, (selectedItems) => (this._items = selectedItems));
         this.addValidator('rangeUnderflow', () => this.minMessage, () => !!this.min && __classPrivateFieldGet(this, _UmbInputMediaElement_pickerContext, "f").getSelection().length < this.min);
@@ -143,7 +153,6 @@ _UmbInputMediaElement_renderAddButton = function _UmbInputMediaElement_renderAdd
 };
 _UmbInputMediaElement_renderItem = function _UmbInputMediaElement_renderItem(item) {
     // TODO: `file-ext` value has been hardcoded here. Find out if API model has value for it. [LK]
-    // TODO: How to handle the `showOpenButton` option? [LK]
     return html `
 			<uui-card-media
 				name=${ifDefined(item.name === null ? undefined : item.name)}
@@ -151,6 +160,7 @@ _UmbInputMediaElement_renderItem = function _UmbInputMediaElement_renderItem(ite
 				file-ext="jpg">
 				${__classPrivateFieldGet(this, _UmbInputMediaElement_instances, "m", _UmbInputMediaElement_renderIsTrashed).call(this, item)}
 				<uui-action-bar slot="actions">
+					${__classPrivateFieldGet(this, _UmbInputMediaElement_instances, "m", _UmbInputMediaElement_renderOpenButton).call(this, item)}
 					<uui-button label="Copy media">
 						<uui-icon name="icon-documents"></uui-icon>
 					</uui-button>
@@ -166,6 +176,18 @@ _UmbInputMediaElement_renderIsTrashed = function _UmbInputMediaElement_renderIsT
         return;
     return html `<uui-tag size="s" slot="tag" color="danger">Trashed</uui-tag>`;
 };
+_UmbInputMediaElement_renderOpenButton = function _UmbInputMediaElement_renderOpenButton(item) {
+    if (!this.showOpenButton)
+        return;
+    return html `
+			<uui-button
+				compact
+				href="${this._editMediaPath}edit/${item.id}"
+				label=${this.localize.term('general_edit') + ` ${item.name}`}>
+				<uui-icon name="icon-edit"></uui-icon>
+			</uui-button>
+		`;
+};
 UmbInputMediaElement.styles = [
     css `
 			.container {
@@ -214,6 +236,9 @@ __decorate([
 __decorate([
     property()
 ], UmbInputMediaElement.prototype, "value", null);
+__decorate([
+    state()
+], UmbInputMediaElement.prototype, "_editMediaPath", void 0);
 __decorate([
     state()
 ], UmbInputMediaElement.prototype, "_items", void 0);

package/dist-cms/packages/members/members/components/input-member/input-member.element.d.ts

@@ -35,9 +35,11 @@ export declare class UmbInputMemberElement extends UmbInputMemberElement_base {
     maxMessage: string;
     get selectedIds(): Array<string>;
     set selectedIds(ids: Array<string>);
+    showOpenButton?: boolean;
     allowedContentTypeIds?: string[] | undefined;
     set value(idsString: string);
-    private _items;
+    private _editMemberPath;
+    private _items?;
     constructor();
     protected _openPicker(): void;
     protected _requestRemoveItem(item: MemberItemResponseModel): void;

package/dist-cms/packages/members/members/components/input-member/input-member.element.js

@@ -9,11 +9,12 @@ 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 _UmbInputMemberElement_instances, _UmbInputMemberElement_sorter, _UmbInputMemberElement_pickableFilter, _UmbInputMemberElement_openPicker, _UmbInputMemberElement_requestRemoveItem, _UmbInputMemberElement_renderItems, _UmbInputMemberElement_renderAddButton, _UmbInputMemberElement_renderItem, _UmbInputMemberElement_renderIsTrashed;
+var _UmbInputMemberElement_instances, _UmbInputMemberElement_sorter, _UmbInputMemberElement_pickableFilter, _UmbInputMemberElement_openPicker, _UmbInputMemberElement_requestRemoveItem, _UmbInputMemberElement_renderItems, _UmbInputMemberElement_renderAddButton, _UmbInputMemberElement_renderItem, _UmbInputMemberElement_renderOpenButton, _UmbInputMemberElement_renderIsTrashed;
 import { css, html, customElement, property, state, ifDefined, repeat } from '../../../../../external/lit/index.js';
 import { FormControlMixin } from '../../../../../external/uui/index.js';
 import { UmbLitElement } from '../../../../../shared/lit-element/index.js';
 import { splitStringToArray } from '../../../../../shared/utils/index.js';
+import { UMB_WORKSPACE_MODAL, UmbModalRouteRegistrationController } from '../../../../core/modal/index.js';
 import { UmbSorterController } from '../../../../core/sorter/index.js';
 const SORTER_CONFIG = {
     compareElementToModel: (element, model) => {
@@ -94,7 +95,7 @@ let UmbInputMemberElement = class UmbInputMemberElement extends FormControlMixin
          * @default
          */
         this.maxMessage = 'This field exceeds the allowed amount of items';
-        this._items = [];
+        this._editMemberPath = '';
         _UmbInputMemberElement_pickableFilter.set(this, (item) => {
             // TODO: Uncomment, once `UmbMemberPickerContext` has been implemented. [LK]
             console.log('member.pickableFilter', item);
@@ -103,6 +104,14 @@ let UmbInputMemberElement = class UmbInputMemberElement extends FormControlMixin
             // 	}
             return true;
         });
+        new UmbModalRouteRegistrationController(this, UMB_WORKSPACE_MODAL)
+            .addAdditionalPath('member')
+            .onSetup(() => {
+            return { data: { entityType: 'member', preset: {} } };
+        })
+            .observeRouteBuilder((routeBuilder) => {
+            this._editMemberPath = routeBuilder({});
+        });
         // TODO: Uncomment, once `UmbMemberPickerContext` has been implemented. [LK]
         // this.addValidator(
         // 	'rangeUnderflow',
@@ -173,13 +182,28 @@ _UmbInputMemberElement_renderItem = function _UmbInputMemberElement_renderItem(i
 			<uui-ref-node name=${ifDefined(item.name)} detail=${ifDefined(item.id)}>
 				${__classPrivateFieldGet(this, _UmbInputMemberElement_instances, "m", _UmbInputMemberElement_renderIsTrashed).call(this, item)}
 				<uui-action-bar slot="actions">
-					<uui-button @click=${() => __classPrivateFieldGet(this, _UmbInputMemberElement_instances, "m", _UmbInputMemberElement_requestRemoveItem).call(this, item)} label="Remove member ${item.name}"
-						>Remove</uui-button
-					>
+					${__classPrivateFieldGet(this, _UmbInputMemberElement_instances, "m", _UmbInputMemberElement_renderOpenButton).call(this, item)}
+					<uui-button
+						@click=${() => this._requestRemoveItem(item)}
+						label="${this.localize.term('general_remove')} ${item.name}">
+						${this.localize.term('general_remove')}
+					</uui-button>
 				</uui-action-bar>
 			</uui-ref-node>
 		`;
 };
+_UmbInputMemberElement_renderOpenButton = function _UmbInputMemberElement_renderOpenButton(item) {
+    if (!this.showOpenButton)
+        return;
+    return html `
+			<uui-button
+				compact
+				href="${this._editMemberPath}edit/${item.id}"
+				label=${this.localize.term('general_edit') + ` ${item.name}`}>
+				<uui-icon name="icon-edit"></uui-icon>
+			</uui-button>
+		`;
+};
 _UmbInputMemberElement_renderIsTrashed = function _UmbInputMemberElement_renderIsTrashed(item) {
     // TODO: Uncomment, once the Management API model support deleted members. [LK]
     //if (!item.isTrashed) return;
@@ -208,12 +232,18 @@ __decorate([
 __decorate([
     property({ type: String, attribute: 'min-message' })
 ], UmbInputMemberElement.prototype, "maxMessage", void 0);
+__decorate([
+    property({ type: Boolean })
+], UmbInputMemberElement.prototype, "showOpenButton", void 0);
 __decorate([
     property({ type: Array })
 ], UmbInputMemberElement.prototype, "allowedContentTypeIds", void 0);
 __decorate([
     property()
 ], UmbInputMemberElement.prototype, "value", null);
+__decorate([
+    state()
+], UmbInputMemberElement.prototype, "_editMemberPath", void 0);
 __decorate([
     state()
 ], UmbInputMemberElement.prototype, "_items", void 0);