@umbraco-cms/backoffice 14.0.0--preview004-1a99c50f → 14.0.0--preview004-e91a3686

package/dist-cms/custom-elements.json

@@ -7594,6 +7594,91 @@
         }
       ]
     },
+    {
+      "name": "umb-input-member-type",
+      "path": "./../src/packages/members/member-types/components/input-member-type/input-member-type.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"
+        },
+        {
+          "name": "pickableFilter"
+        }
+      ],
+      "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": "pickableFilter",
+          "attribute": "pickableFilter"
+        },
+        {
+          "name": "styles",
+          "type": "array",
+          "default": "[null]"
+        }
+      ]
+    },
     {
       "name": "umb-member-type-workspace-editor",
       "path": "./../src/packages/members/member-types/workspace/member-type-workspace-editor.element.ts",
@@ -7621,6 +7706,84 @@
         }
       ]
     },
+    {
+      "name": "umb-input-member",
+      "path": "./../src/packages/members/members/components/input-member/input-member.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-member-workspace-editor",
       "path": "./../src/packages/members/members/workspace/member-workspace-editor.element.ts",

package/dist-cms/packages/core/modal/token/member-type-picker-modal.token.d.ts

@@ -0,0 +1,5 @@
+import { UmbModalToken, UmbPickerModalValue, UmbTreePickerModalData } from '../index.js';
+import { UmbEntityTreeItemModel } from '../../tree/index.js';
+export type UmbMemberTypePickerModalData = UmbTreePickerModalData<UmbEntityTreeItemModel>;
+export type UmbMemberTypePickerModalValue = UmbPickerModalValue;
+export declare const UMB_MEMBER_TYPE_PICKER_MODAL: UmbModalToken<UmbMemberTypePickerModalData, UmbPickerModalValue>;

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

@@ -0,0 +1,10 @@
+import { UmbModalToken } from '../index.js';
+export const UMB_MEMBER_TYPE_PICKER_MODAL = new UmbModalToken('Umb.Modal.TreePicker', {
+    modal: {
+        type: 'sidebar',
+        size: 'small',
+    },
+    data: {
+        treeAlias: 'Umb.Tree.MemberType',
+    },
+});

package/dist-cms/packages/members/manifests.d.ts

@@ -1 +1,2 @@
+import './members/components/index.js';
 export declare const manifests: (import("../core/index.js").ManifestSectionSidebarApp | import("../core/index.js").ManifestDashboard | import("../core/index.js").ManifestEntityAction | import("../core/index.js").ManifestMenu | import("../core/index.js").ManifestMenuItemTreeKind | import("../core/index.js").ManifestSection | import("../core/index.js").ManifestStore | import("../core/index.js").ManifestTree | import("../core/index.js").ManifestTreeItem | import("../core/index.js").ManifestTreeStore | import("../core/index.js").ManifestWorkspace | import("../core/index.js").ManifestWorkspaceAction | import("../core/index.js").ManifestWorkspaceView | import("../core/index.js").ManifestRepository<import("../../libs/extension-api/index.js").UmbApi>)[];

package/dist-cms/packages/members/manifests.js

@@ -3,6 +3,7 @@ import { manifests as menuSectionManifests } from './menu.manifests.js';
 import { manifests as memberGroupManifests } from './member-groups/manifests.js';
 import { manifests as memberTypeManifests } from './member-types/manifests.js';
 import { manifests as memberManifests } from './members/manifests.js';
+import './members/components/index.js';
 export const manifests = [
     ...memberSectionManifests,
     ...menuSectionManifests,

package/dist-cms/packages/members/member-types/components/index.d.ts

@@ -0,0 +1 @@
+import './input-member-type/input-member-type.element.js';

package/dist-cms/packages/members/member-types/components/index.js

@@ -0,0 +1 @@
+import './input-member-type/input-member-type.element.js';

package/dist-cms/packages/members/member-types/components/input-member-type/input-member-type.context.d.ts

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

package/dist-cms/packages/members/member-types/components/input-member-type/input-member-type.context.js

@@ -0,0 +1,10 @@
+import { UMB_MEMBER_TYPE_PICKER_MODAL } from '../../../../core/modal/token/member-type-picker-modal.token.js';
+import { UMB_MEMBER_TYPE_REPOSITORY_ALIAS } from '../../repository/index.js';
+import { UmbPickerInputContext } from '../../../../core/picker-input/index.js';
+export class UmbMemberTypePickerContext extends UmbPickerInputContext {
+    constructor(host) {
+        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+        // @ts-ignore
+        super(host, UMB_MEMBER_TYPE_REPOSITORY_ALIAS, UMB_MEMBER_TYPE_PICKER_MODAL);
+    }
+}

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

@@ -0,0 +1,55 @@
+import { UmbLitElement } from '../../../../../shared/lit-element/index.js';
+import type { MemberTypeItemResponseModel } from '../../../../../external/backend-api/index.js';
+declare const UmbMemberTypeInputElement_base: (new (...args: any[]) => import("../../../../../external/uui/index.js").FormControlMixinInterface) & typeof UmbLitElement;
+export declare class UmbMemberTypeInputElement extends UmbMemberTypeInputElement_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);
+    get pickableFilter(): ((item: MemberTypeItemResponseModel) => boolean) | undefined;
+    set pickableFilter(newVal: ((item: MemberTypeItemResponseModel) => boolean) | undefined);
+    private _items?;
+    constructor();
+    connectedCallback(): void;
+    protected _openPicker(): void;
+    protected getFormElement(): undefined;
+    render(): import("lit-html").TemplateResult<1>;
+    private _renderItem;
+    static styles: import("@lit/reactive-element/css-tag.js").CSSResult[];
+}
+export default UmbMemberTypeInputElement;
+declare global {
+    interface HTMLElementTagNameMap {
+        'umb-input-member-type': UmbMemberTypeInputElement;
+    }
+}

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

@@ -0,0 +1,164 @@
+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 { UmbMemberTypePickerContext } from './input-member-type.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';
+let UmbMemberTypeInputElement = class UmbMemberTypeInputElement 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 = splitStringToArray(idsString);
+    }
+    get pickableFilter() {
+        return this.#pickerContext.pickableFilter;
+    }
+    set pickableFilter(newVal) {
+        this.#pickerContext.pickableFilter = newVal;
+    }
+    #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 UmbMemberTypePickerContext(this);
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        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));
+    }
+    _openPicker() {
+        this.#pickerContext.openPicker({
+            hideTreeRoot: true,
+        });
+    }
+    getFormElement() {
+        return undefined;
+    }
+    render() {
+        return html `
+			${this.#renderItems()}
+			${this.#renderAddButton()}
+		`;
+    }
+    #renderItems() {
+        if (!this._items)
+            return;
+        // TODO: Add sorting. [LK]
+        return html `
+			<uui-ref-list
+				>${repeat(this._items, (item) => item.id, (item) => this._renderItem(item))}</uui-ref-list
+			>
+		`;
+    }
+    #renderAddButton() {
+        if (this.max > 0 && this.selectedIds.length >= this.max)
+            return;
+        return html `
+			<uui-button
+				id="add-button"
+				look="placeholder"
+				@click=${this._openPicker}
+				label="${this.localize.term('general_choose')}"
+				>${this.localize.term('general_choose')}</uui-button
+			>
+		`;
+    }
+    _renderItem(item) {
+        if (!item.id)
+            return;
+        return html `
+			<uui-ref-node-document-type name=${ifDefined(item.name)}>
+				<uui-action-bar slot="actions">
+					<uui-button
+						@click=${() => this.#pickerContext.requestRemoveItem(item.id)}
+						label="Remove Member Type ${item.name}"
+						>${this.localize.term('general_remove')}</uui-button
+					>
+				</uui-action-bar>
+			</uui-ref-node-document-type>
+		`;
+    }
+    static { this.styles = [
+        css `
+			#add-button {
+				width: 100%;
+			}
+		`,
+    ]; }
+};
+__decorate([
+    property({ type: Number })
+], UmbMemberTypeInputElement.prototype, "min", null);
+__decorate([
+    property({ type: String, attribute: 'min-message' })
+], UmbMemberTypeInputElement.prototype, "minMessage", void 0);
+__decorate([
+    property({ type: Number })
+], UmbMemberTypeInputElement.prototype, "max", null);
+__decorate([
+    property({ type: String, attribute: 'min-message' })
+], UmbMemberTypeInputElement.prototype, "maxMessage", void 0);
+__decorate([
+    property()
+], UmbMemberTypeInputElement.prototype, "value", null);
+__decorate([
+    property()
+], UmbMemberTypeInputElement.prototype, "pickableFilter", null);
+__decorate([
+    state()
+], UmbMemberTypeInputElement.prototype, "_items", void 0);
+UmbMemberTypeInputElement = __decorate([
+    customElement('umb-input-member-type')
+], UmbMemberTypeInputElement);
+export { UmbMemberTypeInputElement };
+export default UmbMemberTypeInputElement;

package/dist-cms/packages/members/member-types/index.d.ts

@@ -0,0 +1,4 @@
+import './components/index.js';
+export * from './components/index.js';
+export * from './repository/index.js';
+export * from './entity.js';

package/dist-cms/packages/members/member-types/index.js

@@ -0,0 +1,4 @@
+import './components/index.js';
+export * from './components/index.js';
+export * from './repository/index.js';
+export * from './entity.js';

package/dist-cms/packages/members/member-types/manifests.d.ts

@@ -1 +1,2 @@
+import './components/index.js';
 export declare const manifests: (import("../../core/index.js").ManifestEntityAction | import("../../core/index.js").ManifestMenuItemTreeKind | import("../../core/index.js").ManifestStore | import("../../core/index.js").ManifestTree | import("../../core/index.js").ManifestTreeItem | import("../../core/index.js").ManifestTreeStore | import("../../core/index.js").ManifestWorkspace | import("../../core/index.js").ManifestWorkspaceAction | import("../../core/index.js").ManifestWorkspaceView | import("../../core/index.js").ManifestRepository<import("../../../libs/extension-api/index.js").UmbApi>)[];

package/dist-cms/packages/members/member-types/manifests.js

@@ -1,12 +1,13 @@
+import { manifests as entityActionsManifests } from './entity-actions/manifests.js';
 import { manifests as menuItemManifests } from './menu-item/manifests.js';
-import { manifests as treeManifests } from './tree/manifests.js';
 import { manifests as repositoryManifests } from './repository/manifests.js';
+import { manifests as treeManifests } from './tree/manifests.js';
 import { manifests as workspaceManifests } from './workspace/manifests.js';
-import { manifests as entityActionManifests } from './entity-actions/manifests.js';
+import './components/index.js';
 export const manifests = [
+    ...entityActionsManifests,
     ...menuItemManifests,
-    ...treeManifests,
     ...repositoryManifests,
+    ...treeManifests,
     ...workspaceManifests,
-    ...entityActionManifests,
 ];

package/dist-cms/packages/members/member-types/repository/index.d.ts

@@ -1 +1,2 @@
-export { UmbMemberTypeRepository } from './member-type.repository.js';
+export * from './member-type.repository.js';
+export * from './manifests.js';

package/dist-cms/packages/members/member-types/repository/index.js

@@ -1 +1,2 @@
-export { UmbMemberTypeRepository } from './member-type.repository.js';
+export * from './member-type.repository.js';
+export * from './manifests.js';

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

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

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

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

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

@@ -0,0 +1,53 @@
+import { UmbLitElement } from '../../../../../shared/lit-element/index.js';
+import type { MemberItemResponseModel } from '../../../../../external/backend-api/index.js';
+declare const UmbInputMemberElement_base: (new (...args: any[]) => import("../../../../../external/uui/index.js").FormControlMixinInterface) & typeof UmbLitElement;
+export declare class UmbInputMemberElement extends UmbInputMemberElement_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 _openPicker(): void;
+    protected _requestRemoveItem(item: MemberItemResponseModel): void;
+    protected getFormElement(): undefined;
+    render(): import("lit-html").TemplateResult<1>;
+    private _renderItem;
+    static styles: import("@lit/reactive-element/css-tag").CSSResult[];
+}
+export default UmbInputMemberElement;
+declare global {
+    interface HTMLElementTagNameMap {
+        'umb-input-member': UmbInputMemberElement;
+    }
+}