@umbraco-cms/backoffice 14.0.0--preview006-0420711d → 14.0.0--preview006-0bd2add0

package/dist-cms/assets/lang/en-us.js

@@ -1443,7 +1443,7 @@ export default {
         enableListViewHeading: 'Enable list view',
         enableListViewDescription: 'Configures the content item to show a sortable and searchable list of its\n      children, the children will not be shown in the tree\n    ',
         allowedTemplatesHeading: 'Allowed Templates',
-        allowedTemplatesDescription: 'Choose which templates editors are allowed to use on content of this type\n    ',
+        allowedTemplatesDescription: 'Choose which templates editors are allowed to use on content of this type',
         allowAsRootHeading: 'Allow as root',
         allowAsRootDescription: 'Allow editors to create content of this type in the root of the content tree.\n    ',
         childNodesHeading: 'Allowed child node types',

package/dist-cms/assets/lang/en-us.ts

@@ -1563,7 +1563,7 @@ export default {
 		enableListViewDescription:
 			'Configures the content item to show a sortable and searchable list of its\n      children, the children will not be shown in the tree\n    ',
 		allowedTemplatesHeading: 'Allowed Templates',
-		allowedTemplatesDescription: 'Choose which templates editors are allowed to use on content of this type\n    ',
+		allowedTemplatesDescription: 'Choose which templates editors are allowed to use on content of this type',
 		allowAsRootHeading: 'Allow as root',
 		allowAsRootDescription: 'Allow editors to create content of this type in the root of the content tree.\n    ',
 		childNodesHeading: 'Allowed child node types',

package/dist-cms/custom-elements.json

@@ -9722,11 +9722,6 @@
           "type": "array",
           "default": "[null]"
         }
-      ],
-      "events": [
-        {
-          "name": "change"
-        }
       ]
     },
     {

package/dist-cms/packages/core/modal/token/template-picker-modal.token.js

@@ -5,6 +5,6 @@ export const UMB_TEMPLATE_PICKER_MODAL = new UmbModalToken('Umb.Modal.TreePicker
         size: 'small',
     },
     data: {
-        treeAlias: 'Umb.Tree.Templates',
+        treeAlias: 'Umb.Tree.Template',
     },
 });

package/dist-cms/packages/documents/document-types/workspace/views/templates/document-type-workspace-view-templates.element.d.ts

@@ -1,6 +1,6 @@
-import '../../../../../templating/templates/components/input-template/input-template.element.js';
 import { UmbLitElement } from '../../../../../../shared/lit-element/index.js';
 import type { UmbWorkspaceViewElement } from '../../../../../core/extension-registry/index.js';
+import '../../../../../templating/templates/index.js';
 export declare class UmbDocumentTypeWorkspaceViewTemplatesElement extends UmbLitElement implements UmbWorkspaceViewElement {
     #private;
     private _defaultTemplateId;

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

@@ -16,11 +16,11 @@ var __classPrivateFieldGet = (this && this.__classPrivateFieldGet) || function (
     return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
 };
 var _UmbDocumentTypeWorkspaceViewTemplatesElement_instances, _UmbDocumentTypeWorkspaceViewTemplatesElement_workspaceContext, _UmbDocumentTypeWorkspaceViewTemplatesElement_templateInputChange;
-import '../../../../../templating/templates/components/input-template/input-template.element.js';
 import { css, html, customElement, state } from '../../../../../../external/lit/index.js';
 import { UmbTextStyles } from '../../../../../../shared/style/index.js';
 import { UmbLitElement } from '../../../../../../shared/lit-element/index.js';
 import { UMB_WORKSPACE_CONTEXT } from '../../../../../core/workspace/index.js';
+import '../../../../../templating/templates/index.js'; // TODO: This is needed to register the <umb-input-template> element, but it should be done in a better way without importing the whole module.
 let UmbDocumentTypeWorkspaceViewTemplatesElement = class UmbDocumentTypeWorkspaceViewTemplatesElement extends UmbLitElement {
     constructor() {
         super();
@@ -47,12 +47,12 @@ let UmbDocumentTypeWorkspaceViewTemplatesElement = class UmbDocumentTypeWorkspac
         }, 'allowedTemplateIds');
     }
     render() {
-        return html `<uui-box headline="Templates">
-			<umb-property-layout alias="Templates" label="Allowed Templates">
-				<div slot="description">Choose which templates editors are allowed to use on content of this type</div>
+        return html `<uui-box headline="${this.localize.term('treeHeaders_templates')}">
+			<umb-property-layout alias="Templates" label="${this.localize.term('contentTypeEditor_allowedTemplatesHeading')}">
+				<div slot="description">${this.localize.term('contentTypeEditor_allowedTemplatesDescription')}</div>
 				<div id="templates" slot="editor">
 					<umb-input-template
-						.defaultId=${this._defaultTemplateId ?? ''}
+						.defaultUnique=${this._defaultTemplateId ?? ''}
 						.selectedIds=${this._allowedTemplateIds}
 						@change=${__classPrivateFieldGet(this, _UmbDocumentTypeWorkspaceViewTemplatesElement_instances, "m", _UmbDocumentTypeWorkspaceViewTemplatesElement_templateInputChange)}></umb-input-template>
 				</div>

package/dist-cms/packages/templating/templates/components/input-template/input-template.element.js

@@ -9,13 +9,14 @@ 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 _UmbInputTemplateElement_instances, _UmbInputTemplateElement_observePickedTemplates, _UmbInputTemplateElement_onCardChange, _UmbInputTemplateElement_openPicker, _UmbInputTemplateElement_removeTemplate, _UmbInputTemplateElement_openTemplate;
+var _UmbInputTemplateElement_instances, _UmbInputTemplateElement_observePickedTemplates, _UmbInputTemplateElement_appendTemplates, _UmbInputTemplateElement_onCardChange, _UmbInputTemplateElement_openPicker, _UmbInputTemplateElement_removeTemplate, _UmbInputTemplateElement_openTemplate;
 import '../template-card/template-card.element.js';
 import { UmbTemplateItemRepository } from '../../repository/item/index.js';
 import { css, html, customElement, property, state } from '../../../../../external/lit/index.js';
 import { FormControlMixin } from '../../../../../external/uui/index.js';
 import { UMB_TEMPLATE_PICKER_MODAL, UMB_MODAL_MANAGER_CONTEXT } from '../../../../core/modal/index.js';
 import { UmbLitElement } from '../../../../../shared/lit-element/index.js';
+import { UmbChangeEvent } from '../../../../core/event/index.js';
 let UmbInputTemplateElement = class UmbInputTemplateElement extends FormControlMixin(UmbLitElement) {
     get selectedIds() {
         return this._selectedIds;
@@ -30,7 +31,6 @@ let UmbInputTemplateElement = class UmbInputTemplateElement extends FormControlM
     set defaultUnique(newId) {
         this._defaultUnique = newId;
         super.value = newId;
-        __classPrivateFieldGet(this, _UmbInputTemplateElement_instances, "m", _UmbInputTemplateElement_observePickedTemplates).call(this);
     }
     constructor() {
         super();
@@ -41,7 +41,7 @@ let UmbInputTemplateElement = class UmbInputTemplateElement extends FormControlM
          * @attr
          * @default
          */
-        this.minMessage = 'This field need more items';
+        this.minMessage = 'This field needs more items';
         /**
          * Max validation message.
          * @type {boolean}
@@ -71,14 +71,18 @@ let UmbInputTemplateElement = class UmbInputTemplateElement extends FormControlM
 						?default="${template.unique === this.defaultUnique}">
 						<uui-button
 							slot="actions"
-							label="Remove Template ${template.name}"
+							label="${this.localize.term('general_remove') + ' ' + template.name}"
 							@click="${() => __classPrivateFieldGet(this, _UmbInputTemplateElement_instances, "m", _UmbInputTemplateElement_removeTemplate).call(this, template.unique ?? '')}"
 							compact>
 							<uui-icon name="icon-trash"></uui-icon>
 						</uui-button>
 					</umb-template-card>
 				`)}
-			<uui-button id="add-button" look="placeholder" label="open" @click="${__classPrivateFieldGet(this, _UmbInputTemplateElement_instances, "m", _UmbInputTemplateElement_openPicker)}">Add</uui-button>
+			<uui-button
+				id="add-button"
+				look="placeholder"
+				label="${this.localize.term('general_add')}"
+				@click="${__classPrivateFieldGet(this, _UmbInputTemplateElement_instances, "m", _UmbInputTemplateElement_openPicker)}"></uui-button>
 		`;
     }
 };
@@ -90,29 +94,36 @@ _UmbInputTemplateElement_observePickedTemplates = async function _UmbInputTempla
         this.requestUpdate('_pickedTemplates', oldValue);
     }, '_observeTemplates');
 };
+_UmbInputTemplateElement_appendTemplates = function _UmbInputTemplateElement_appendTemplates(unique) {
+    this.selectedIds = [...(this.selectedIds ?? []), ...unique];
+    // If there is no default, set the first picked template as default.
+    if (!this.defaultUnique && this.selectedIds.length) {
+        this.defaultUnique = this.selectedIds[0];
+    }
+    this.dispatchEvent(new UmbChangeEvent());
+};
 _UmbInputTemplateElement_onCardChange = function _UmbInputTemplateElement_onCardChange(e) {
     e.stopPropagation();
     const unique = e.target.value;
     this.defaultUnique = unique;
-    this.dispatchEvent(new CustomEvent('change'));
+    this.dispatchEvent(new UmbChangeEvent());
 };
-_UmbInputTemplateElement_openPicker = function _UmbInputTemplateElement_openPicker() {
-    // TODO: Change experience, so its not multi selectable. But instead already picked templates should be unpickable. (awaiting general picker features for such)
+_UmbInputTemplateElement_openPicker = async function _UmbInputTemplateElement_openPicker() {
     const modalContext = this._modalContext?.open(UMB_TEMPLATE_PICKER_MODAL, {
         data: {
+            hideTreeRoot: true,
             multiple: true,
-            pickableFilter: (template) => template.unique !== null,
+            pickableFilter: (template) => template.unique !== null && !this._selectedIds.includes(template.unique),
         },
-        value: {
-            selection: [...this._selectedIds],
-        },
-    });
-    modalContext?.onSubmit().then((value) => {
-        if (!value?.selection)
-            return;
-        this.selectedIds = value.selection.filter((x) => x !== null);
-        this.dispatchEvent(new CustomEvent('change'));
     });
+    const value = await modalContext?.onSubmit().catch(() => undefined);
+    if (!value?.selection)
+        return;
+    const selectedIds = value.selection.filter((x) => x !== null);
+    if (!selectedIds.length)
+        return;
+    // Add templates to row of picked templates and dispatch change event
+    __classPrivateFieldGet(this, _UmbInputTemplateElement_instances, "m", _UmbInputTemplateElement_appendTemplates).call(this, selectedIds);
 };
 _UmbInputTemplateElement_removeTemplate = function _UmbInputTemplateElement_removeTemplate(unique) {
     /*
@@ -125,6 +136,16 @@ _UmbInputTemplateElement_removeTemplate = function _UmbInputTemplateElement_remo
     BTW. its weird cause the damage of removing the default template is equally bad when there is one or more templates.
     */
     this.selectedIds = this._selectedIds.filter((x) => x !== unique);
+    // If the default template is removed, set the first picked template as default or reset defaultUnique.
+    if (unique === this.defaultUnique) {
+        if (this.selectedIds.length) {
+            this.defaultUnique = this.selectedIds[0];
+        }
+        else {
+            this.defaultUnique = '';
+        }
+    }
+    this.dispatchEvent(new UmbChangeEvent());
 };
 _UmbInputTemplateElement_openTemplate = function _UmbInputTemplateElement_openTemplate(e) {
     alert('open template modal');

package/dist-cms/packages/templating/templates/components/template-card/template-card.element.js

@@ -45,8 +45,12 @@ let UmbTemplateCardElement = class UmbTemplateCardElement extends FormControlMix
 				<uui-icon class="logo" name="icon-layout"></uui-icon>
 				<strong>${this.name.length ? this.name : 'Untitled template'}</strong>
 			</button>
-			<uui-button id="bottom" label="Default template" ?disabled="${this.default}" @click="${__classPrivateFieldGet(this, _UmbTemplateCardElement_instances, "m", _UmbTemplateCardElement_setSelection)}">
-				${this.default ? '(Default template)' : 'Make default'}
+			<uui-button
+				id="bottom"
+				label="${this.localize.term('settings_defaulttemplate')}"
+				?disabled="${this.default}"
+				@click="${__classPrivateFieldGet(this, _UmbTemplateCardElement_instances, "m", _UmbTemplateCardElement_setSelection)}">
+				(${this.localize.term(this.default ? 'settings_defaulttemplate' : 'grid_setAsDefault')})
 			</uui-button>
 			<slot name="actions"></slot>
 		</div>`;