npm - @umbraco-cms/backoffice - Versions diffs - 14.0.0--preview004-e6d96d04 → 14.0.0--preview004-b8e797f1 - Mend

@umbraco-cms/backoffice 14.0.0--preview004-e6d96d04 → 14.0.0--preview004-b8e797f1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (12) hide show

package/dist-cms/packages/core/components/multiple-text-string-input/input-multiple-text-string.element.js CHANGED Viewed

@@ -8,12 +8,40 @@ import { css, html, nothing, repeat, customElement, property, state } from '../.
 import { FormControlMixin } from '../../../../external/uui/index.js';
 import { UmbChangeEvent } from '../../event/index.js';
 import { UmbLitElement } from '../../../../shared/lit-element/index.js';
+import { UmbSorterController } from '../../sorter/index.js';
+const SORTER_CONFIG = {
+    compareElementToModel: (element, model) => {
+        return element.getAttribute('data-sort-entry-id') === model.value;
+    },
+    querySelectModelToElement: (container, modelEntry) => {
+        return container.querySelector('data-sort-entry-id=[' + modelEntry.value + ']');
+    },
+    identifier: 'Umb.SorterIdentifier.ColorEditor',
+    itemSelector: 'umb-input-multiple-text-string-item',
+    containerSelector: '#sorter-wrapper',
+};
 /**
  * @element umb-input-multiple-text-string
  */
 let UmbInputMultipleTextStringElement = class UmbInputMultipleTextStringElement extends FormControlMixin(UmbLitElement) {
+    #prevalueSorter;
     constructor() {
         super();
+        this.#prevalueSorter = new UmbSorterController(this, {
+            ...SORTER_CONFIG,
+            performItemInsert: (args) => {
+                const frozenArray = [...this.items];
+                const indexToMove = frozenArray.findIndex((x) => x.value === args.item.value);
+                frozenArray.splice(indexToMove, 1);
+                frozenArray.splice(args.newIndex, 0, args.item);
+                this.items = frozenArray;
+                this.dispatchEvent(new UmbChangeEvent());
+                return true;
+            },
+            performItemRemove: (args) => {
+                return true;
+            },
+        });
         /**
          * Min validation message.
          * @type {boolean}
@@ -63,6 +91,7 @@ let UmbInputMultipleTextStringElement = class UmbInputMultipleTextStringElement
         // TODO: when we have a way to overwrite the missing value validator we can remove this
         this.value = items?.length > 0 ? 'some value' : '';
         this._items = items ?? [];
+        this.#prevalueSorter.setModel(this.items);
     }
     // TODO: Some inputs might not have a value that is either FormDataEntryValue or FormData.
     //  How do we handle this?
@@ -104,13 +133,15 @@ let UmbInputMultipleTextStringElement = class UmbInputMultipleTextStringElement
         return undefined;
     }
     render() {
-        return html ` ${this.#renderItems()} ${this.#renderAddButton()} `;
+        return html `<div id="sorter-wrapper">${this.#renderItems()}</div>
+			${this.#renderAddButton()} `;
     }
     #renderItems() {
         return html `
 			${repeat(this._items, (item, index) => index, (item, index) => html ` <umb-input-multiple-text-string-item
 						value=${item.value}
 						name="item-${index}"
+						data-sort-entry-id=${item.value}
 						@input=${(event) => this.#onInput(event, index)}
 						@delete="${(event) => this.#deleteItem(event, index)}"
 						?disabled=${this.disabled}
@@ -137,6 +168,18 @@ let UmbInputMultipleTextStringElement = class UmbInputMultipleTextStringElement
 			#action {
 				display: block;
 			}
+			.--umb-sorter-placeholder {
+				position: relative;
+				visibility: hidden;
+			}
+			.--umb-sorter-placeholder::after {
+				content: '';
+				position: absolute;
+				inset: 0px;
+				border-radius: var(--uui-border-radius);
+				border: 1px dashed var(--uui-color-divider-emphasis);
+			}
 		`,
     ]; }
 };

package/dist-cms/packages/core/property-editor/schemas/Umbraco.CheckboxList.js CHANGED Viewed

@@ -1,7 +1,7 @@
 export const manifest = {
     type: 'propertyEditorSchema',
     name: 'Checkbox List',
-    alias: 'Umbraco.CheckBoxList',
+    alias: 'Umbraco.CheckboxList',
     meta: {
         defaultPropertyEditorUiAlias: 'Umb.PropertyEditorUi.CheckboxList',
     },

package/dist-cms/packages/dictionary/dictionary/workspace/dictionary-workspace-editor.element.js CHANGED Viewed

@@ -40,6 +40,7 @@ let UmbDictionaryWorkspaceEditorElement = class UmbDictionaryWorkspaceEditorElem
 						<uui-icon name="icon-arrow-left"></uui-icon>
 					</uui-button>
 					<uui-input
+						placeholder=${this.localize.term('placeholders_entername')}
 						.value=${this._name ?? ''}
 						@input="${this.#handleInput}"
 						label="${this.localize.term('general_dictionary')} ${this.localize.term('general_name')}"></uui-input>

package/dist-cms/packages/templating/templates/modals/query-builder/query-builder-filter.element.d.ts CHANGED Viewed

@@ -12,7 +12,7 @@ export declare class UmbQueryBuilderFilterElement extends UmbLitElement {
     private _renderOperatorsDropdown;
     private _renderConstraintValueInput;
     render(): import("lit-html").TemplateResult<1>;
-    static styles: import("@lit/reactive-element/css-tag").CSSResult[];
+    static styles: import("@lit/reactive-element/css-tag.js").CSSResult[];
 }
 export default UmbQueryBuilderFilterElement;
 declare global {

package/dist-cms/packages/templating/templates/modals/query-builder/query-builder-filter.element.js CHANGED Viewed

@@ -4,7 +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, property, state } from '../../../../../external/lit/index.js';
+import { localizeOperators, localizePropertyType } from './utils.js';
+import { css, html, customElement, property, state, ifDefined, } from '../../../../../external/lit/index.js';
 import { UmbLitElement } from '../../../../../shared/lit-element/index.js';
 import { TemplateQueryPropertyTypeModel, } from '../../../../../external/backend-api/index.js';
 let UmbQueryBuilderFilterElement = class UmbQueryBuilderFilterElement extends UmbLitElement {
@@ -62,15 +63,18 @@ let UmbQueryBuilderFilterElement = class UmbQueryBuilderFilterElement extends Um
         }
     }
     _renderOperatorsDropdown() {
-        return html `<umb-dropdown look="outline" id="operator-dropdown" label="choose operator">
+        if (!this.settings?.operators)
+            return;
+        const operators = localizeOperators(this.settings?.operators, this.currentPropertyType);
+        return html `<umb-dropdown look="outline" id="operator-dropdown" label="Choose operator">
 			<span slot="label">${this.filter?.operator ?? ''}</span>
 			<uui-combobox-list @change=${this.#setOperator} class="options-list">
-				${this.settings?.operators
+				${operators
             ?.filter((operator) => this.currentPropertyType ? operator.applicableTypes?.includes(this.currentPropertyType) : true)
-            .map((operator) => html `<uui-combobox-list-option .value=${operator.operator ?? ''}
-								>${operator.operator}</uui-combobox-list-option
-							>`)}</uui-combobox-list
-			>
+            .map((operator) => html `<uui-combobox-list-option .value=${operator.operator ?? ''}>
+								<umb-localize .key=${operator.localizeKey}> ${operator.operator} </umb-localize>
+							</uui-combobox-list-option>`)}
+			</uui-combobox-list>
 		</umb-dropdown>`;
     }
     _renderConstraintValueInput() {
@@ -86,23 +90,32 @@ let UmbQueryBuilderFilterElement = class UmbQueryBuilderFilterElement extends Um
         }
     }
     render() {
+        const properties = localizePropertyType(this.settings?.properties);
         return html `
 			<span>${this.unremovable ? this.localize.term('template_where') : this.localize.term('template_and')}</span>
 			<umb-dropdown look="outline" id="property-alias-dropdown" label="Property alias">
 				<span slot="label">${this.filter?.propertyAlias ?? ''}</span>
 				<uui-combobox-list @change=${this.#setPropertyAlias} class="options-list">
-					${this.settings?.properties?.map((property) => html `<uui-combobox-list-option tabindex="0" .value=${property.alias ?? ''}
-								>${property.alias}</uui-combobox-list-option
-							>`)}
+					${properties?.map((property) => html `<uui-combobox-list-option tabindex="0" .value=${property.alias ?? ''}>
+								<umb-localize key=${ifDefined(property.localizeKey)}> ${property.alias}</umb-localize>
+							</uui-combobox-list-option>`)}
 				</uui-combobox-list></umb-dropdown
 			>
 			${this.filter?.propertyAlias ? this._renderOperatorsDropdown() : ''}
 			${this.filter?.operator ? this._renderConstraintValueInput() : ''}
 			<uui-button-group>
-				<uui-button title="Add filter" label="Add filter" compact @click=${this.#addFilter}>
+				<uui-button
+					title=${this.localize.term('general_add')}
+					label=${this.localize.term('general_add')}
+					compact
+					@click=${this.#addFilter}>
 					<uui-icon name="icon-add"></uui-icon>
 				</uui-button>
-				<uui-button title="Remove filter" label="Remove filter" compact @click=${this.#removeOrReset}>
+				<uui-button
+					title=${this.localize.term('general_remove')}
+					label=${this.localize.term('general_remove')}
+					compact
+					@click=${this.#removeOrReset}>
 					<uui-icon name="delete"></uui-icon>
 				</uui-button>
 			</uui-button-group>

package/dist-cms/packages/templating/templates/modals/query-builder/query-builder.element.js CHANGED Viewed

@@ -5,7 +5,8 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
 import { UmbTemplateRepository } from '../../repository/template.repository.js';
-import { css, html, customElement, state, query, queryAll } from '../../../../../external/lit/index.js';
+import { localizePropertyType, localizeSort } from './utils.js';
+import { css, html, customElement, state, query, queryAll, ifDefined } from '../../../../../external/lit/index.js';
 import { UmbModalBaseElement, UMB_DOCUMENT_PICKER_MODAL, UMB_MODAL_MANAGER_CONTEXT_TOKEN, } from '../../../../core/modal/index.js';
 import { UmbDocumentRepository } from '../../../../documents/documents/index.js';
 import './query-builder-filter.element.js';
@@ -144,24 +145,30 @@ let UmbChooseInsertTypeModalElement = class UmbChooseInsertTypeModalElement exte
     #updateFilters;
     #removeFilter;
     render() {
+        const properties = localizePropertyType(this._queryBuilderSettings?.properties);
+        const sort = localizeSort(this._queryRequest.sort);
         return html `
-			<umb-body-layout headline="Query builder">
+			<umb-body-layout headline=${this.localize.term('template_queryBuilder')}>
 				<div id="main">
 					<uui-box>
 						<div class="row">
-							I want
+							<umb-localize key="template_iWant">I want</umb-localize>
 							<umb-dropdown look="outline" id="content-type-dropdown" label="Choose content type">
-								<span slot="label">${this._queryRequest?.contentTypeAlias ?? 'all content'}</span>
+								<span slot="label">
+									${this._queryRequest?.contentTypeAlias ?? this.localize.term('template_allContent')}
+								</span>
 								<uui-combobox-list @change=${this.#setContentType} class="options-list">
 									<uui-combobox-list-option value="">all content</uui-combobox-list-option>
-									${this._queryBuilderSettings?.contentTypeAliases?.map((alias) => html `<uui-combobox-list-option .value=${alias}
-												>content of type "${alias}"</uui-combobox-list-option
-											>`)}
+									${this._queryBuilderSettings?.contentTypeAliases?.map((alias) => html `<uui-combobox-list-option .value=${alias}>
+												<umb-localize key="template_contentOfType" .args=${[alias]}>
+													content of type "${alias}"
+												</umb-localize>
+											</uui-combobox-list-option>`)}
 								</uui-combobox-list></umb-dropdown
 							>
-							from
-							<uui-button look="outline" @click=${this.#openDocumentPicker} label="Choose root content"
-								>${this._selectedRootContentName}
+							<umb-localize key="template_from">from</umb-localize>
+							<uui-button look="outline" @click=${this.#openDocumentPicker} label="Choose root content">
+								${this._selectedRootContentName}
 							</uui-button>
 						</div>
 						<div id="filter-container">
@@ -174,35 +181,45 @@ let UmbChooseInsertTypeModalElement = class UmbChooseInsertTypeModalElement exte
 								@remove-filter=${this.#removeFilter}></umb-query-builder-filter>
 						</div>
 						<div class="row">
-							ordered by
+							<umb-localize key="template_orderBy">order by</umb-localize>
 							<umb-dropdown look="outline" id="sort-dropdown" label="Property alias">
 								<span slot="label">${this._queryRequest.sort?.propertyAlias ?? ''}</span>
 								<uui-combobox-list @change=${this.#setSortProperty} class="options-list">
-									${this._queryBuilderSettings?.properties?.map((property) => html `<uui-combobox-list-option .value=${property.alias ?? ''}
-												>${property.alias}</uui-combobox-list-option
-											>`)}
-								</uui-combobox-list></umb-dropdown
-							>
+									${properties?.map((property) => html `<uui-combobox-list-option .value=${property.alias ?? ''}>
+												<umb-localize key=${ifDefined(property.localizeKey)}>${property.alias}</umb-localize>
+											</uui-combobox-list-option>`)}
+								</uui-combobox-list>
+							</umb-dropdown>
-							${this._queryRequest.sort?.propertyAlias
-            ? html `<uui-button look="outline" @click=${this.#setSortDirection}
-										>${this._queryRequest.sort.direction ?? this._defaultSortDirection}</uui-button
-								  >`
+							${sort?.propertyAlias
+            ? html `<uui-button look="outline" @click=${this.#setSortDirection}>
+										<umb-localize key=${ifDefined(sort.localizeKey)}>
+											${sort.direction ?? this._defaultSortDirection}
+										</umb-localize>
+								  </uui-button>`
             : ''}
 						</div>
 						<div class="row">
-							<span id="results-count"
-								>${this._templateQuery?.resultCount ?? 0} items returned, in ${this._templateQuery?.executionTime ?? 0}
-								ms</span
-							>
+							<span id="results-count">
+								${this._templateQuery?.resultCount ?? 0}
+								<umb-localize key="template_itemsReturned">items returned, in</umb-localize>
+								${this._templateQuery?.executionTime ?? 0} ms
+							</span>
 						</div>
 						<umb-code-block language="C#" copy>${this._templateQuery?.queryExpression ?? ''}</umb-code-block>
 					</uui-box>
 				</div>
 				<div slot="actions">
-					<uui-button @click=${this.#close} look="secondary" label="Close">Close</uui-button>
-					<uui-button @click=${this.#submit} look="primary" color="positive" label="Submit">Submit</uui-button>
+					<uui-button
+						@click=${this.#close}
+						look="secondary"
+						label=${this.localize.term('buttons_confirmActionCancel')}></uui-button>
+					<uui-button
+						@click=${this.#submit}
+						look="primary"
+						color="positive"
+						label=${this.localize.term('buttons_submitChanges')}></uui-button>
 				</div>
 			</umb-body-layout>
 		`;

package/dist-cms/packages/templating/templates/modals/query-builder/utils.d.ts ADDED Viewed

@@ -0,0 +1,14 @@
+import { TemplateQueryExecuteSortModel, TemplateQueryOperatorModel, TemplateQueryPropertyPresentationModel, TemplateQueryPropertyTypeModel } from '../../../../../external/backend-api/index.js';
+type TemplateOperatorModel = TemplateQueryOperatorModel & {
+    localizeKey?: string;
+};
+type TemplatePropertyModel = TemplateQueryPropertyPresentationModel & {
+    localizeKey?: string;
+};
+type TemplateSortModel = TemplateQueryExecuteSortModel & {
+    localizeKey?: string;
+};
+export declare function localizeOperators(operators: Array<TemplateQueryOperatorModel>, currentPropertyType: TemplateQueryPropertyTypeModel | null): Array<TemplateOperatorModel>;
+export declare function localizePropertyType(propertyTypes?: Array<TemplateQueryPropertyPresentationModel>): TemplatePropertyModel[] | undefined;
+export declare function localizeSort(sort?: TemplateQueryExecuteSortModel | null): TemplateSortModel | undefined;
+export {};

package/dist-cms/packages/templating/templates/modals/query-builder/utils.js ADDED Viewed

@@ -0,0 +1,96 @@
+import { OperatorModel, TemplateQueryPropertyTypeModel, UserOrderModel, } from '../../../../../external/backend-api/index.js';
+export function localizeOperators(operators, currentPropertyType) {
+    switch (currentPropertyType) {
+        case TemplateQueryPropertyTypeModel.STRING:
+            return isString(operators);
+        case TemplateQueryPropertyTypeModel.INTEGER:
+            return isInteger(operators);
+        case TemplateQueryPropertyTypeModel.DATE_TIME:
+            return isDateTime(operators);
+        default:
+            return operators;
+    }
+}
+export function localizePropertyType(propertyTypes) {
+    if (!propertyTypes)
+        return;
+    return propertyTypes.map((propertyType) => {
+        switch (propertyType.alias) {
+            case UserOrderModel.NAME:
+                return { ...propertyType, localizeKey: 'template_name' };
+            case UserOrderModel.ID:
+                return { ...propertyType, localizeKey: 'template_id' };
+            case UserOrderModel.CREATE_DATE:
+                return { ...propertyType, localizeKey: 'template_createdDate' };
+            case UserOrderModel.UPDATE_DATE:
+                return { ...propertyType, localizeKey: 'template_lastUpdatedDate' };
+            default:
+                return propertyType;
+        }
+    });
+}
+export function localizeSort(sort) {
+    if (!sort?.direction)
+        return undefined;
+    switch (sort.direction) {
+        case 'ascending':
+            return { ...sort, localizeKey: 'template_ascending' };
+        case 'descending':
+            return { ...sort, localizeKey: 'template_descending' };
+        default:
+            return sort;
+    }
+}
+// Following code is for localization of operators (checks on property type);
+function isString(operators) {
+    return operators.map((operator) => {
+        switch (operator.operator) {
+            case OperatorModel.EQUALS:
+                return { ...operator, localizeKey: 'template_is' };
+            case OperatorModel.NOT_EQUALS:
+                return { ...operator, localizeKey: 'template_isNot' };
+            case OperatorModel.CONTAINS:
+                return { ...operator, localizeKey: 'template_contains' };
+            case OperatorModel.NOT_CONTAINS:
+                return { ...operator, localizeKey: 'template_doesNotContain' };
+            default:
+                return operator;
+        }
+    });
+}
+function isInteger(operators) {
+    return operators.map((operator) => {
+        switch (operator.operator) {
+            case OperatorModel.EQUALS:
+                return { ...operator, localizeKey: 'template_equals' };
+            case OperatorModel.NOT_EQUALS:
+                return { ...operator, localizeKey: 'template_doesNotEqual' };
+            case OperatorModel.GREATER_THAN:
+                return { ...operator, localizeKey: 'template_greaterThan' };
+            case OperatorModel.GREATER_THAN_EQUAL_TO:
+                return { ...operator, localizeKey: 'template_greaterThanEqual' };
+            case OperatorModel.LESS_THAN:
+                return { ...operator, localizeKey: 'template_lessThan' };
+            case OperatorModel.LESS_THAN_EQUAL_TO:
+                return { ...operator, localizeKey: 'template_lessThanEqual' };
+            default:
+                return operator;
+        }
+    });
+}
+function isDateTime(operators) {
+    return operators.map((operator) => {
+        switch (operator.operator) {
+            case OperatorModel.GREATER_THAN:
+                return { ...operator, localizeKey: 'template_before' };
+            case OperatorModel.GREATER_THAN_EQUAL_TO:
+                return { ...operator, localizeKey: 'template_beforeIncDate' };
+            case OperatorModel.LESS_THAN:
+                return { ...operator, localizeKey: 'template_after' };
+            case OperatorModel.LESS_THAN_EQUAL_TO:
+                return { ...operator, localizeKey: 'template_afterIncDate' };
+            default:
+                return operator;
+        }
+    });
+}

package/dist-cms/packages/templating/templates/workspace/template-workspace-editor.element.js CHANGED Viewed

@@ -53,7 +53,7 @@ let UmbTemplateWorkspaceEditorElement = class UmbTemplateWorkspaceEditorElement
             });
             this.inputQuery$.pipe(debounceTime(250)).subscribe((nameInputValue) => {
                 this.#templateWorkspaceContext?.setName(nameInputValue);
-                if (this.#isNew && !this._alias)
+                if (this.#isNew)
                     this.#templateWorkspaceContext?.setAlias(camelCase(nameInputValue));
             });
         });
@@ -64,6 +64,7 @@ let UmbTemplateWorkspaceEditorElement = class UmbTemplateWorkspaceEditorElement
         this.inputQuery$.next(value);
     }
     #onAliasInput(event) {
+        event.stopPropagation();
         const target = event.target;
         const value = target.value;
         this.#templateWorkspaceContext?.setAlias(value);
@@ -150,7 +151,7 @@ let UmbTemplateWorkspaceEditorElement = class UmbTemplateWorkspaceEditorElement
 				.value=${this._name}
 				@input=${this.#onNameInput}
 				label="template name">
-				<uui-input-lock slot="append" value=${ifDefined(this._alias)} @change=${this.#onAliasInput}></uui-input-lock>
+				<uui-input-lock slot="append" value=${ifDefined(this._alias)} @input=${this.#onAliasInput}></uui-input-lock>
 			</uui-input>
 			<uui-box>

package/dist-cms/packages/templating/templates/workspace/template-workspace.context.js CHANGED Viewed

@@ -120,6 +120,7 @@ ${currentContent}`;
             else {
                 this.#treeRepository.requestRootTreeItems();
             }
+            this.setIsNew(false);
             return;
         }
         if (template?.id) {