@umbraco-cms/backoffice 14.0.0--preview004-d0befea1 → 14.0.0--preview004-81428bf9

package/dist-cms/custom-elements.json

@@ -5377,6 +5377,84 @@
         }
       ]
     },
+    {
+      "name": "umb-dictionary-item-input",
+      "path": "./../src/packages/dictionary/dictionary/components/dictionary-item-input/dictionary-item-input.element.ts",
+      "attributes": [
+        {
+          "name": "min",
+          "description": "This is a minimum amount of selected items in this input.",
+          "type": "number",
+          "default": "\"0\""
+        },
+        {
+          "name": "max",
+          "description": "This is a maximum amount of selected items in this input.",
+          "type": "number",
+          "default": "\"Infinity\""
+        },
+        {
+          "name": "min-message",
+          "description": "Min validation message.",
+          "type": "boolean",
+          "default": "\"\""
+        },
+        {
+          "name": "maxMessage",
+          "description": "Max validation message.",
+          "type": "boolean",
+          "default": "\"\""
+        },
+        {
+          "name": "value",
+          "type": "string"
+        }
+      ],
+      "properties": [
+        {
+          "name": "min",
+          "attribute": "min",
+          "description": "This is a minimum amount of selected items in this input.",
+          "type": "number",
+          "default": "\"0\""
+        },
+        {
+          "name": "max",
+          "attribute": "max",
+          "description": "This is a maximum amount of selected items in this input.",
+          "type": "number",
+          "default": "\"Infinity\""
+        },
+        {
+          "name": "minMessage",
+          "attribute": "min-message",
+          "description": "Min validation message.",
+          "type": "boolean",
+          "default": "\"\""
+        },
+        {
+          "name": "maxMessage",
+          "attribute": "maxMessage",
+          "description": "Max validation message.",
+          "type": "boolean",
+          "default": "\"\""
+        },
+        {
+          "name": "selectedIds",
+          "type": "string[]"
+        },
+        {
+          "name": "value",
+          "attribute": "value",
+          "type": "string"
+        },
+        {
+          "name": "styles",
+          "type": "array",
+          "default": "[null]"
+        }
+      ]
+    },
     {
       "name": "umb-create-dictionary-modal",
       "path": "./../src/packages/dictionary/dictionary/entity-actions/create/create-dictionary-modal.element.ts",

package/dist-cms/packages/core/modal/token/import-dictionary-modal.token.d.ts

@@ -3,7 +3,7 @@ export interface UmbImportDictionaryModalData {
     unique: string | null;
 }
 export interface UmbImportDictionaryModalValue {
-    temporaryFileId?: string;
+    temporaryFileId: string;
     parentId?: string;
 }
 export declare const UMB_IMPORT_DICTIONARY_MODAL: UmbModalToken<UmbImportDictionaryModalData, UmbImportDictionaryModalValue>;

package/dist-cms/packages/dictionary/dictionary/components/dictionary-item-input/dictionary-item-input.context.d.ts

@@ -0,0 +1,6 @@
+import { UmbPickerInputContext } from '../../../../core/picker-input/index.js';
+import { UmbControllerHostElement } from '../../../../../libs/controller-api/index.js';
+import { DictionaryItemItemResponseModel } from '../../../../../external/backend-api/index.js';
+export declare class UmbDictionaryItemPickerContext extends UmbPickerInputContext<DictionaryItemItemResponseModel> {
+    constructor(host: UmbControllerHostElement);
+}

package/dist-cms/packages/dictionary/dictionary/components/dictionary-item-input/dictionary-item-input.context.js

@@ -0,0 +1,7 @@
+import { UmbPickerInputContext } from '../../../../core/picker-input/index.js';
+import { UMB_DICTIONARY_ITEM_PICKER_MODAL } from '../../../../core/modal/index.js';
+export class UmbDictionaryItemPickerContext extends UmbPickerInputContext {
+    constructor(host) {
+        super(host, 'Umb.Repository.Dictionary', UMB_DICTIONARY_ITEM_PICKER_MODAL);
+    }
+}

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

@@ -0,0 +1,50 @@
+import { UmbLitElement } from '../../../../../shared/lit-element/index.js';
+declare const UmbDictionaryItemInputElement_base: (new (...args: any[]) => import("../../../../../external/uui/index.js").FormControlMixinInterface) & typeof UmbLitElement;
+export declare class UmbDictionaryItemInputElement extends UmbDictionaryItemInputElement_base {
+    #private;
+    /**
+     * This is a minimum amount of selected items in this input.
+     * @type {number}
+     * @attr
+     * @default 0
+     */
+    get min(): number;
+    set min(value: number);
+    /**
+     * Min validation message.
+     * @type {boolean}
+     * @attr
+     * @default
+     */
+    minMessage: string;
+    /**
+     * This is a maximum amount of selected items in this input.
+     * @type {number}
+     * @attr
+     * @default Infinity
+     */
+    get max(): number;
+    set max(value: number);
+    /**
+     * Max validation message.
+     * @type {boolean}
+     * @attr
+     * @default
+     */
+    maxMessage: string;
+    get selectedIds(): Array<string>;
+    set selectedIds(ids: Array<string>);
+    set value(idsString: string);
+    private _items?;
+    constructor();
+    protected getFormElement(): undefined;
+    render(): import("lit-html").TemplateResult<1>;
+    private _renderItem;
+    static styles: import("@lit/reactive-element/css-tag.js").CSSResult[];
+}
+export default UmbDictionaryItemInputElement;
+declare global {
+    interface HTMLElementTagNameMap {
+        'umb-dictionary-item-input': UmbDictionaryItemInputElement;
+    }
+}

package/dist-cms/packages/dictionary/dictionary/components/dictionary-item-input/dictionary-item-input.element.js

@@ -0,0 +1,134 @@
+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 { UmbDictionaryItemPickerContext } from './dictionary-item-input.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';
+export let UmbDictionaryItemInputElement = class UmbDictionaryItemInputElement extends FormControlMixin(UmbLitElement) {
+    /**
+     * This is a minimum amount of selected items in this input.
+     * @type {number}
+     * @attr
+     * @default 0
+     */
+    get min() {
+        return this.#pickerContext.min;
+    }
+    set min(value) {
+        this.#pickerContext.min = value;
+    }
+    /**
+     * This is a maximum amount of selected items in this input.
+     * @type {number}
+     * @attr
+     * @default Infinity
+     */
+    get max() {
+        return this.#pickerContext.max;
+    }
+    set max(value) {
+        this.#pickerContext.max = value;
+    }
+    get selectedIds() {
+        return this.#pickerContext.getSelection();
+    }
+    set selectedIds(ids) {
+        this.#pickerContext.setSelection(ids);
+    }
+    set value(idsString) {
+        // Its with full purpose we don't call super.value, as thats being handled by the observation of the context selection.
+        this.selectedIds = idsString.split(/[ ,]+/);
+    }
+    #pickerContext;
+    constructor() {
+        super();
+        /**
+         * Min validation message.
+         * @type {boolean}
+         * @attr
+         * @default
+         */
+        this.minMessage = 'This field need more items';
+        /**
+         * Max validation message.
+         * @type {boolean}
+         * @attr
+         * @default
+         */
+        this.maxMessage = 'This field exceeds the allowed amount of items';
+        this.#pickerContext = new UmbDictionaryItemPickerContext(this);
+        this.addValidator('rangeUnderflow', () => this.minMessage, () => !!this.min && this.#pickerContext.getSelection().length < this.min);
+        this.addValidator('rangeOverflow', () => this.maxMessage, () => !!this.max && this.#pickerContext.getSelection().length > this.max);
+        this.observe(this.#pickerContext.selection, (selection) => (super.value = selection.join(',')));
+        this.observe(this.#pickerContext.selectedItems, (selectedItems) => (this._items = selectedItems));
+    }
+    getFormElement() {
+        return undefined;
+    }
+    render() {
+        return html `
+			${this._items
+            ? html ` <uui-ref-list
+						>${repeat(this._items, (item) => item.id, (item) => this._renderItem(item))}
+				  </uui-ref-list>`
+            : ''}
+			${this.#renderAddButton()}
+		`;
+    }
+    #renderAddButton() {
+        if (this.max > 0 && this.selectedIds.length >= this.max)
+            return;
+        return html `<uui-button
+			id="add-button"
+			look="placeholder"
+			@click=${() => this.#pickerContext.openPicker()}
+			label=${this.localize.term('general_add')}></uui-button>`;
+    }
+    _renderItem(item) {
+        if (!item.id)
+            return;
+        return html `
+			<uui-ref-node name=${ifDefined(item.name)} detail=${ifDefined(item.id)}>
+				<!-- TODO: implement is trashed <uui-tag size="s" slot="tag" color="danger">Trashed</uui-tag> -->
+				<uui-action-bar slot="actions">
+					<uui-button
+						@click=${() => this.#pickerContext.requestRemoveItem(item.id)}
+						label=${this.localize.term('actions_remove')}></uui-button>
+				</uui-action-bar>
+			</uui-ref-node>
+		`;
+    }
+    static { this.styles = [
+        css `
+			#add-button {
+				width: 100%;
+			}
+		`,
+    ]; }
+};
+__decorate([
+    property({ type: Number })
+], UmbDictionaryItemInputElement.prototype, "min", null);
+__decorate([
+    property({ type: String, attribute: 'min-message' })
+], UmbDictionaryItemInputElement.prototype, "minMessage", void 0);
+__decorate([
+    property({ type: Number })
+], UmbDictionaryItemInputElement.prototype, "max", null);
+__decorate([
+    property({ type: String, attribute: 'min-message' })
+], UmbDictionaryItemInputElement.prototype, "maxMessage", void 0);
+__decorate([
+    property()
+], UmbDictionaryItemInputElement.prototype, "value", null);
+__decorate([
+    state()
+], UmbDictionaryItemInputElement.prototype, "_items", void 0);
+UmbDictionaryItemInputElement = __decorate([
+    customElement('umb-dictionary-item-input')
+], UmbDictionaryItemInputElement);
+export default UmbDictionaryItemInputElement;

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

@@ -0,0 +1 @@
+export * from './dictionary-item-input/dictionary-item-input.element.js';

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

@@ -0,0 +1 @@
+export * from './dictionary-item-input/dictionary-item-input.element.js';

package/dist-cms/packages/dictionary/dictionary/entity-actions/export/export.action.js

@@ -1,4 +1,4 @@
-import { UmbTextStyles } from "../../../../../shared/style/index.js";
+import { UmbTextStyles } from '../../../../../shared/style/index.js';
 import { UmbEntityActionBase } from '../../../../core/entity-action/index.js';
 import { UMB_MODAL_MANAGER_CONTEXT_TOKEN, UMB_EXPORT_DICTIONARY_MODAL, } from '../../../../core/modal/index.js';
 export default class UmbExportDictionaryEntityAction extends UmbEntityActionBase {
@@ -11,16 +11,27 @@ export default class UmbExportDictionaryEntityAction extends UmbEntityActionBase
         });
     }
     async execute() {
-        // TODO: what to do if modal service is not available?
         if (!this.#modalContext)
             return;
         const modalContext = this.#modalContext?.open(UMB_EXPORT_DICTIONARY_MODAL, { unique: this.unique });
-        // TODO: get type from modal result
         const { includeChildren } = await modalContext.onSubmit();
         if (includeChildren === undefined)
             return;
+        // Export the file
         const result = await this.repository?.export(this.unique, includeChildren);
-        // TODO => get location header to route to new item
-        console.log(result);
+        const blobContent = await result?.data;
+        if (!blobContent)
+            return;
+        const blob = new Blob([blobContent], { type: 'text/plain' });
+        const a = document.createElement('a');
+        const url = window.URL.createObjectURL(blob);
+        // Download
+        a.href = url;
+        a.download = `${this.unique}.udt`;
+        document.body.appendChild(a);
+        a.click();
+        document.body.removeChild(a);
+        // Clean up
+        window.URL.revokeObjectURL(url);
     }
 }

package/dist-cms/packages/dictionary/dictionary/entity-actions/import/import-dictionary-modal.element.d.ts

@@ -1,14 +1,14 @@
+import '../../components/dictionary-item-input/dictionary-item-input.element.js';
 import { UmbImportDictionaryModalData, UmbImportDictionaryModalValue, UmbModalBaseElement } from '../../../../core/modal/index.js';
 export declare class UmbImportDictionaryModalLayout extends UmbModalBaseElement<UmbImportDictionaryModalData, UmbImportDictionaryModalValue> {
     #private;
-    static styles: import("@lit/reactive-element/css-tag.js").CSSResult[];
+    private _parentId?;
+    private _temporaryFileId?;
     private _form;
-    private _uploadedDictionaryTempId?;
-    private _showUploadView;
-    private _showImportView;
-    private _showErrorView;
-    private _selection;
+    constructor();
+    connectedCallback(): void;
     render(): import("lit-html").TemplateResult<1>;
+    static styles: import("@lit/reactive-element/css-tag.js").CSSResult[];
 }
 export default UmbImportDictionaryModalLayout;
 declare global {