@umbraco-cms/backoffice 14.0.0--preview005-2dd3b083 → 14.0.0--preview005-7ef2bd26

package/dist-cms/packages/block/block-grid/property-editors/block-grid-group-configuration/manifests.d.ts

@@ -0,0 +1,2 @@
+import type { ManifestPropertyEditorUi } from '../../../../core/extension-registry/index.js';
+export declare const manifest: ManifestPropertyEditorUi;

package/dist-cms/packages/block/block-grid/property-editors/block-grid-group-configuration/manifests.js

@@ -0,0 +1,11 @@
+export const manifest = {
+    type: 'propertyEditorUi',
+    alias: 'Umb.PropertyEditorUi.BlockTypeGroupConfiguration',
+    name: 'Block Grid Group Configuration Property Editor UI',
+    js: () => import('./property-editor-ui-block-grid-group-configuration.element.js'),
+    meta: {
+        label: '',
+        icon: 'icon-box-alt',
+        group: 'common',
+    },
+};

package/dist-cms/packages/block/block-grid/property-editors/block-grid-group-configuration/property-editor-ui-block-grid-group-configuration.element.d.ts

@@ -0,0 +1,19 @@
+import type { UmbPropertyEditorUiElement } from '../../../../core/extension-registry/index.js';
+import { UmbLitElement } from '../../../../../shared/lit-element/index.js';
+import type { UmbPropertyEditorConfigCollection } from '../../../../core/property-editor/index.js';
+import type { UmbBlockGridGroupType } from '../../../index.js';
+export declare class UmbPropertyEditorUIBlockGridGroupConfigurationElement extends UmbLitElement implements UmbPropertyEditorUiElement {
+    #private;
+    private _value;
+    get value(): Array<UmbBlockGridGroupType>;
+    set value(value: Array<UmbBlockGridGroupType>);
+    set config(config: UmbPropertyEditorConfigCollection | undefined);
+    render(): import("lit-html").TemplateResult<1>;
+    static styles: import("../../../../../external/lit/index.js").CSSResult[];
+}
+export default UmbPropertyEditorUIBlockGridGroupConfigurationElement;
+declare global {
+    interface HTMLElementTagNameMap {
+        'umb-property-editor-ui-block-grid-group-configuration': UmbPropertyEditorUIBlockGridGroupConfigurationElement;
+    }
+}

package/dist-cms/packages/block/block-grid/property-editors/block-grid-group-configuration/property-editor-ui-block-grid-group-configuration.element.js

@@ -0,0 +1,61 @@
+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;
+};
+var __classPrivateFieldGet = (this && this.__classPrivateFieldGet) || function (receiver, state, kind, f) {
+    if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a getter");
+    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 _UmbPropertyEditorUIBlockGridGroupConfigurationElement_instances, _UmbPropertyEditorUIBlockGridGroupConfigurationElement_addGroup;
+import { html, customElement, property, css } from '../../../../../external/lit/index.js';
+import { UmbLitElement } from '../../../../../shared/lit-element/index.js';
+import { UmbTextStyles } from '../../../../../shared/style/index.js';
+import { UmbId } from '../../../../core/id/index.js';
+let UmbPropertyEditorUIBlockGridGroupConfigurationElement = class UmbPropertyEditorUIBlockGridGroupConfigurationElement extends UmbLitElement {
+    constructor() {
+        super(...arguments);
+        _UmbPropertyEditorUIBlockGridGroupConfigurationElement_instances.add(this);
+        this._value = [];
+    }
+    get value() {
+        return this._value;
+    }
+    set value(value) {
+        this._value = value || [];
+    }
+    set config(config) { }
+    render() {
+        return html `
+			<uui-button label=${this.localize.term('blockEditor_addBlockGroup')} look="placeholder" @click=${__classPrivateFieldGet(this, _UmbPropertyEditorUIBlockGridGroupConfigurationElement_instances, "m", _UmbPropertyEditorUIBlockGridGroupConfigurationElement_addGroup)}>
+				${this.localize.term('blockEditor_addBlockGroup')}
+			</uui-button>
+		`;
+    }
+};
+_UmbPropertyEditorUIBlockGridGroupConfigurationElement_instances = new WeakSet();
+_UmbPropertyEditorUIBlockGridGroupConfigurationElement_addGroup = function _UmbPropertyEditorUIBlockGridGroupConfigurationElement_addGroup() {
+    this.value = [...this._value, { name: 'Unnamed group', key: UmbId.new() }];
+    this.dispatchEvent(new CustomEvent('property-value-change'));
+};
+UmbPropertyEditorUIBlockGridGroupConfigurationElement.styles = [
+    UmbTextStyles,
+    css `
+			uui-button {
+				display: block;
+			}
+		`,
+];
+__decorate([
+    property({ type: Array })
+], UmbPropertyEditorUIBlockGridGroupConfigurationElement.prototype, "value", null);
+__decorate([
+    property({ attribute: false })
+], UmbPropertyEditorUIBlockGridGroupConfigurationElement.prototype, "config", null);
+UmbPropertyEditorUIBlockGridGroupConfigurationElement = __decorate([
+    customElement('umb-property-editor-ui-block-grid-group-configuration')
+], UmbPropertyEditorUIBlockGridGroupConfigurationElement);
+export { UmbPropertyEditorUIBlockGridGroupConfigurationElement };
+export default UmbPropertyEditorUIBlockGridGroupConfigurationElement;

package/dist-cms/packages/block/block-grid/property-editors/block-grid-type-configuration/property-editor-ui-block-grid-type-configuration.element.d.ts

@@ -1,14 +1,21 @@
-import type { UmbBlockTypeBaseModel } from '../../../block-type/index.js';
+import type { UmbBlockTypeWithGroupKey } from '../../../block-type/index.js';
 import '../../../block-type/components/input-block-type/index.js';
 import type { UmbPropertyEditorUiElement } from '../../../../core/extension-registry/index.js';
-import type { UmbPropertyEditorConfigCollection } from '../../../../core/property-editor/index.js';
+import { type UmbPropertyEditorConfigCollection } from '../../../../core/property-editor/index.js';
 import { UmbLitElement } from '../../../../../shared/lit-element/index.js';
 /**
  * @element umb-property-editor-ui-block-grid-type-configuration
  */
 export declare class UmbPropertyEditorUIBlockGridTypeConfigurationElement extends UmbLitElement implements UmbPropertyEditorUiElement {
-    value: UmbBlockTypeBaseModel[];
+    #private;
+    private _value;
+    get value(): Array<UmbBlockTypeWithGroupKey>;
+    set value(value: Array<UmbBlockTypeWithGroupKey>);
     config?: UmbPropertyEditorConfigCollection;
+    private _blockGroups;
+    private _mappedValuesAndGroups;
+    private _workspacePath?;
+    constructor();
     render(): import("lit-html").TemplateResult<1>;
     static styles: import("../../../../../external/lit/index.js").CSSResult[];
 }

package/dist-cms/packages/block/block-grid/property-editors/block-grid-type-configuration/property-editor-ui-block-grid-type-configuration.element.js

@@ -4,34 +4,153 @@ 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;
 };
+var __classPrivateFieldSet = (this && this.__classPrivateFieldSet) || function (receiver, state, value, kind, f) {
+    if (kind === "m") throw new TypeError("Private method is not writable");
+    if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a setter");
+    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot write private member to an object whose class did not declare it");
+    return (kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value;
+};
+var __classPrivateFieldGet = (this && this.__classPrivateFieldGet) || function (receiver, state, kind, f) {
+    if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a getter");
+    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 _UmbPropertyEditorUIBlockGridTypeConfigurationElement_instances, _UmbPropertyEditorUIBlockGridTypeConfigurationElement_datasetContext, _UmbPropertyEditorUIBlockGridTypeConfigurationElement_blockTypeWorkspaceModalRegistration, _UmbPropertyEditorUIBlockGridTypeConfigurationElement_observeProperties, _UmbPropertyEditorUIBlockGridTypeConfigurationElement_mapValuesToBlockGroups, _UmbPropertyEditorUIBlockGridTypeConfigurationElement_onChange, _UmbPropertyEditorUIBlockGridTypeConfigurationElement_onCreate, _UmbPropertyEditorUIBlockGridTypeConfigurationElement_deleteGroup, _UmbPropertyEditorUIBlockGridTypeConfigurationElement_changeGroupName, _UmbPropertyEditorUIBlockGridTypeConfigurationElement_renderGroupInput;
 import '../../../block-type/components/input-block-type/index.js';
-import { html, customElement, property } from '../../../../../external/lit/index.js';
+import { html, customElement, property, state, repeat, nothing, css } from '../../../../../external/lit/index.js';
+import { UmbPropertyValueChangeEvent, } from '../../../../core/property-editor/index.js';
 import { UmbTextStyles } from '../../../../../shared/style/index.js';
 import { UmbLitElement } from '../../../../../shared/lit-element/index.js';
+import { UMB_BLOCK_GRID_TYPE, } from '../../../index.js';
+import { UMB_PROPERTY_DATASET_CONTEXT } from '../../../../core/property/index.js';
+import { UMB_WORKSPACE_MODAL, UmbModalRouteRegistrationController } from '../../../../core/modal/index.js';
 /**
  * @element umb-property-editor-ui-block-grid-type-configuration
  */
 let UmbPropertyEditorUIBlockGridTypeConfigurationElement = class UmbPropertyEditorUIBlockGridTypeConfigurationElement extends UmbLitElement {
+    get value() {
+        return this._value;
+    }
+    set value(value) {
+        this._value = value ?? [];
+    }
     constructor() {
-        super(...arguments);
-        this.value = [];
+        super();
+        _UmbPropertyEditorUIBlockGridTypeConfigurationElement_instances.add(this);
+        _UmbPropertyEditorUIBlockGridTypeConfigurationElement_datasetContext.set(this, void 0);
+        _UmbPropertyEditorUIBlockGridTypeConfigurationElement_blockTypeWorkspaceModalRegistration.set(this, void 0);
+        this._value = [];
+        this._blockGroups = [];
+        this._mappedValuesAndGroups = [];
+        this.consumeContext(UMB_PROPERTY_DATASET_CONTEXT, async (instance) => {
+            __classPrivateFieldSet(this, _UmbPropertyEditorUIBlockGridTypeConfigurationElement_datasetContext, instance, "f");
+            __classPrivateFieldGet(this, _UmbPropertyEditorUIBlockGridTypeConfigurationElement_instances, "m", _UmbPropertyEditorUIBlockGridTypeConfigurationElement_observeProperties).call(this);
+        });
+        __classPrivateFieldGet(this, _UmbPropertyEditorUIBlockGridTypeConfigurationElement_blockTypeWorkspaceModalRegistration, "f")?.destroy();
+        __classPrivateFieldSet(this, _UmbPropertyEditorUIBlockGridTypeConfigurationElement_blockTypeWorkspaceModalRegistration, new UmbModalRouteRegistrationController(this, UMB_WORKSPACE_MODAL)
+            .addAdditionalPath(UMB_BLOCK_GRID_TYPE)
+            .onSetup(() => {
+            return { data: { entityType: UMB_BLOCK_GRID_TYPE, preset: {} }, modal: { size: 'large' } };
+        })
+            .observeRouteBuilder((routeBuilder) => {
+            const newpath = routeBuilder({});
+            this._workspacePath = newpath;
+        }), "f");
     }
     render() {
-        return html `<umb-input-block-type
-			entity-type="block-grid-type"
-			.value=${this.value}
-			@change=${(e) => {
-            this.value = e.target.value;
-        }}></umb-input-block-type>`;
+        return html `${repeat(this._mappedValuesAndGroups, (group) => group.key, (group) => html `${group.key ? __classPrivateFieldGet(this, _UmbPropertyEditorUIBlockGridTypeConfigurationElement_instances, "m", _UmbPropertyEditorUIBlockGridTypeConfigurationElement_renderGroupInput).call(this, group.key, group.name) : nothing}
+					<umb-input-block-type
+						.value=${group.blocks}
+						.workspacePath=${this._workspacePath}
+						@create=${(e) => __classPrivateFieldGet(this, _UmbPropertyEditorUIBlockGridTypeConfigurationElement_instances, "m", _UmbPropertyEditorUIBlockGridTypeConfigurationElement_onCreate).call(this, e, group.key ?? null)}
+						@change=${(e) => __classPrivateFieldGet(this, _UmbPropertyEditorUIBlockGridTypeConfigurationElement_instances, "m", _UmbPropertyEditorUIBlockGridTypeConfigurationElement_onChange).call(this, e, group.key)}></umb-input-block-type>`)}`;
     }
 };
-UmbPropertyEditorUIBlockGridTypeConfigurationElement.styles = [UmbTextStyles];
+_UmbPropertyEditorUIBlockGridTypeConfigurationElement_datasetContext = new WeakMap();
+_UmbPropertyEditorUIBlockGridTypeConfigurationElement_blockTypeWorkspaceModalRegistration = new WeakMap();
+_UmbPropertyEditorUIBlockGridTypeConfigurationElement_instances = new WeakSet();
+_UmbPropertyEditorUIBlockGridTypeConfigurationElement_observeProperties = async function _UmbPropertyEditorUIBlockGridTypeConfigurationElement_observeProperties() {
+    if (!__classPrivateFieldGet(this, _UmbPropertyEditorUIBlockGridTypeConfigurationElement_datasetContext, "f"))
+        return;
+    this.observe(await __classPrivateFieldGet(this, _UmbPropertyEditorUIBlockGridTypeConfigurationElement_datasetContext, "f").propertyValueByAlias('blockGroups'), (value) => {
+        this._blockGroups = value ?? [];
+        __classPrivateFieldGet(this, _UmbPropertyEditorUIBlockGridTypeConfigurationElement_instances, "m", _UmbPropertyEditorUIBlockGridTypeConfigurationElement_mapValuesToBlockGroups).call(this);
+    });
+    this.observe(await __classPrivateFieldGet(this, _UmbPropertyEditorUIBlockGridTypeConfigurationElement_datasetContext, "f").propertyValueByAlias('blocks'), () => {
+        __classPrivateFieldGet(this, _UmbPropertyEditorUIBlockGridTypeConfigurationElement_instances, "m", _UmbPropertyEditorUIBlockGridTypeConfigurationElement_mapValuesToBlockGroups).call(this);
+    });
+};
+_UmbPropertyEditorUIBlockGridTypeConfigurationElement_mapValuesToBlockGroups = function _UmbPropertyEditorUIBlockGridTypeConfigurationElement_mapValuesToBlockGroups() {
+    // What if a block is in a group that does not exist in the block groups? Should it be removed? (Right now they will never be rendered)
+    const valuesWithNoGroup = this._value.filter((value) => !value.groupKey);
+    const valuesWithGroup = this._blockGroups.map((group) => {
+        return { name: group.name, key: group.key, blocks: this._value.filter((value) => value.groupKey === group.key) };
+    });
+    this._mappedValuesAndGroups = [{ blocks: valuesWithNoGroup }, ...valuesWithGroup];
+};
+_UmbPropertyEditorUIBlockGridTypeConfigurationElement_onChange = function _UmbPropertyEditorUIBlockGridTypeConfigurationElement_onChange(e, groupKey) {
+    const updatedValues = e.target.value.map((value) => ({ ...value, groupKey }));
+    const filteredValues = this.value.filter((value) => value.groupKey !== groupKey);
+    this.value = [...filteredValues, ...updatedValues];
+    this.dispatchEvent(new UmbPropertyValueChangeEvent());
+};
+_UmbPropertyEditorUIBlockGridTypeConfigurationElement_onCreate = function _UmbPropertyEditorUIBlockGridTypeConfigurationElement_onCreate(e, groupKey) {
+    const selectedElementType = e.detail.contentElementTypeKey;
+    if (selectedElementType) {
+        __classPrivateFieldGet(this, _UmbPropertyEditorUIBlockGridTypeConfigurationElement_blockTypeWorkspaceModalRegistration, "f")?.open({}, 'create/' + selectedElementType + '/' + groupKey);
+    }
+};
+_UmbPropertyEditorUIBlockGridTypeConfigurationElement_deleteGroup = function _UmbPropertyEditorUIBlockGridTypeConfigurationElement_deleteGroup(groupKey) {
+    __classPrivateFieldGet(this, _UmbPropertyEditorUIBlockGridTypeConfigurationElement_datasetContext, "f")?.setPropertyValue('blockGroups', this._blockGroups.filter((group) => group.key !== groupKey));
+    // Should blocks that belonged to the removed group be deleted as well?
+    this.value = this._value.filter((block) => block.groupKey !== groupKey);
+};
+_UmbPropertyEditorUIBlockGridTypeConfigurationElement_changeGroupName = function _UmbPropertyEditorUIBlockGridTypeConfigurationElement_changeGroupName(e, groupKey) {
+    const groupName = e.target.value;
+    __classPrivateFieldGet(this, _UmbPropertyEditorUIBlockGridTypeConfigurationElement_datasetContext, "f")?.setPropertyValue('blockGroups', this._blockGroups.map((group) => (group.key === groupKey ? { ...group, name: groupName } : group)));
+};
+_UmbPropertyEditorUIBlockGridTypeConfigurationElement_renderGroupInput = function _UmbPropertyEditorUIBlockGridTypeConfigurationElement_renderGroupInput(groupKey, groupName) {
+    return html `<uui-input
+			auto-width
+			label="Group"
+			.value=${groupName ?? ''}
+			@change=${(e) => __classPrivateFieldGet(this, _UmbPropertyEditorUIBlockGridTypeConfigurationElement_instances, "m", _UmbPropertyEditorUIBlockGridTypeConfigurationElement_changeGroupName).call(this, e, groupKey)}>
+			<uui-button compact slot="append" label="delete" @click=${() => __classPrivateFieldGet(this, _UmbPropertyEditorUIBlockGridTypeConfigurationElement_instances, "m", _UmbPropertyEditorUIBlockGridTypeConfigurationElement_deleteGroup).call(this, groupKey)}>
+				<uui-icon name="icon-trash"></uui-icon>
+			</uui-button>
+		</uui-input>`;
+};
+UmbPropertyEditorUIBlockGridTypeConfigurationElement.styles = [
+    UmbTextStyles,
+    css `
+			uui-input {
+				margin-top: var(--uui-size-6);
+				margin-bottom: var(--uui-size-4);
+			}
+
+			uui-input:not(:hover, :focus) {
+				border: 1px solid transparent;
+			}
+			uui-input:not(:hover, :focus) uui-button {
+				opacity: 0;
+			}
+		`,
+];
 __decorate([
     property({ attribute: false })
-], UmbPropertyEditorUIBlockGridTypeConfigurationElement.prototype, "value", void 0);
+], UmbPropertyEditorUIBlockGridTypeConfigurationElement.prototype, "value", null);
 __decorate([
     property({ type: Object, attribute: false })
 ], UmbPropertyEditorUIBlockGridTypeConfigurationElement.prototype, "config", void 0);
+__decorate([
+    state()
+], UmbPropertyEditorUIBlockGridTypeConfigurationElement.prototype, "_blockGroups", void 0);
+__decorate([
+    state()
+], UmbPropertyEditorUIBlockGridTypeConfigurationElement.prototype, "_mappedValuesAndGroups", void 0);
+__decorate([
+    state()
+], UmbPropertyEditorUIBlockGridTypeConfigurationElement.prototype, "_workspacePath", void 0);
 UmbPropertyEditorUIBlockGridTypeConfigurationElement = __decorate([
     customElement('umb-property-editor-ui-block-grid-type-configuration')
 ], UmbPropertyEditorUIBlockGridTypeConfigurationElement);

package/dist-cms/packages/block/block-grid/property-editors/manifests.js

@@ -2,4 +2,11 @@ import { manifest as blockGridEditor } from './block-grid-editor/manifests.js';
 import { manifest as blockGridLayoutStylesheet } from './block-grid-layout-stylesheet/manifests.js';
 import { manifest as blockGridTypeConfiguration } from './block-grid-type-configuration/manifests.js';
 import { manifest as blockGridColumnSpan } from './block-grid-column-span/manifests.js';
-export const manifests = [blockGridTypeConfiguration, blockGridEditor, blockGridLayoutStylesheet, blockGridColumnSpan];
+import { manifest as blockGridGroupConfiguration } from './block-grid-group-configuration/manifests.js';
+export const manifests = [
+    blockGridTypeConfiguration,
+    blockGridEditor,
+    blockGridLayoutStylesheet,
+    blockGridColumnSpan,
+    blockGridGroupConfiguration,
+];

package/dist-cms/packages/block/block-grid/types.d.ts

@@ -1,4 +1,5 @@
-import type { UmbBlockTypeBaseModel } from '../block-type/index.js';
+import type { UmbBlockTypeBaseModel, UmbBlockTypeWithGroupKey } from '../block-type/index.js';
+export declare const UMB_BLOCK_GRID_TYPE = "block-grid-type";
 export interface UmbBlockGridType extends UmbBlockTypeBaseModel {
     columnSpanOptions: Array<number>;
     allowAtRoot: boolean;
@@ -8,5 +9,11 @@ export interface UmbBlockGridType extends UmbBlockTypeBaseModel {
     thumbnail?: string;
     areaGridColumns?: number;
     areas: Array<any>;
-    groupKey: null | string;
+}
+export interface UmbBlockGridGroupType {
+    name: string;
+    key: string;
+}
+export interface UmbBlockGridGroupTypeConfiguration extends Partial<UmbBlockGridGroupType> {
+    blocks: Array<UmbBlockTypeWithGroupKey>;
 }

package/dist-cms/packages/block/block-grid/types.js

@@ -1 +1 @@
-export {};
+export const UMB_BLOCK_GRID_TYPE = 'block-grid-type';

package/dist-cms/packages/block/block-list/property-editors/block-list-type-configuration/property-editor-ui-block-list-type-configuration.element.d.ts

@@ -7,6 +7,9 @@ import { UmbLitElement } from '../../../../../shared/lit-element/index.js';
  * @element umb-property-editor-ui-block-list-type-configuration
  */
 export declare class UmbPropertyEditorUIBlockListBlockConfigurationElement extends UmbLitElement implements UmbPropertyEditorUiElement {
+    #private;
+    private _workspacePath?;
+    constructor();
     value: UmbBlockTypeBaseModel[];
     config?: UmbPropertyEditorConfigCollection;
     render(): import("lit-html").TemplateResult<1>;

package/dist-cms/packages/block/block-list/property-editors/block-list-type-configuration/property-editor-ui-block-list-type-configuration.element.js

@@ -4,28 +4,66 @@ 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;
 };
+var __classPrivateFieldGet = (this && this.__classPrivateFieldGet) || function (receiver, state, kind, f) {
+    if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a getter");
+    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 __classPrivateFieldSet = (this && this.__classPrivateFieldSet) || function (receiver, state, value, kind, f) {
+    if (kind === "m") throw new TypeError("Private method is not writable");
+    if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a setter");
+    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot write private member to an object whose class did not declare it");
+    return (kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value;
+};
+var _UmbPropertyEditorUIBlockListBlockConfigurationElement_instances, _UmbPropertyEditorUIBlockListBlockConfigurationElement_blockTypeWorkspaceModalRegistration, _UmbPropertyEditorUIBlockListBlockConfigurationElement_onCreate;
 import '../../../block-type/components/input-block-type/index.js';
-import { html, customElement, property } from '../../../../../external/lit/index.js';
+import { UMB_BLOCK_LIST_TYPE } from '../../types.js';
+import { html, customElement, property, state } from '../../../../../external/lit/index.js';
 import { UmbTextStyles } from '../../../../../shared/style/index.js';
 import { UmbLitElement } from '../../../../../shared/lit-element/index.js';
+import { UMB_WORKSPACE_MODAL, UmbModalRouteRegistrationController } from '../../../../core/modal/index.js';
 /**
  * @element umb-property-editor-ui-block-list-type-configuration
  */
 let UmbPropertyEditorUIBlockListBlockConfigurationElement = class UmbPropertyEditorUIBlockListBlockConfigurationElement extends UmbLitElement {
     constructor() {
-        super(...arguments);
+        super();
+        _UmbPropertyEditorUIBlockListBlockConfigurationElement_instances.add(this);
+        _UmbPropertyEditorUIBlockListBlockConfigurationElement_blockTypeWorkspaceModalRegistration.set(this, void 0);
         this.value = [];
+        __classPrivateFieldGet(this, _UmbPropertyEditorUIBlockListBlockConfigurationElement_blockTypeWorkspaceModalRegistration, "f")?.destroy();
+        __classPrivateFieldSet(this, _UmbPropertyEditorUIBlockListBlockConfigurationElement_blockTypeWorkspaceModalRegistration, new UmbModalRouteRegistrationController(this, UMB_WORKSPACE_MODAL)
+            .addAdditionalPath(UMB_BLOCK_LIST_TYPE)
+            .onSetup(() => {
+            return { data: { entityType: UMB_BLOCK_LIST_TYPE, preset: {} }, modal: { size: 'large' } };
+        })
+            .observeRouteBuilder((routeBuilder) => {
+            const newpath = routeBuilder({});
+            this._workspacePath = newpath;
+        }), "f");
     }
     render() {
         return html `<umb-input-block-type
-			entity-type="block-list-type"
 			.value=${this.value}
+			.workspacePath=${this._workspacePath}
+			@create=${__classPrivateFieldGet(this, _UmbPropertyEditorUIBlockListBlockConfigurationElement_instances, "m", _UmbPropertyEditorUIBlockListBlockConfigurationElement_onCreate)}
 			@change=${(e) => {
             this.value = e.target.value;
         }}></umb-input-block-type>`;
     }
 };
+_UmbPropertyEditorUIBlockListBlockConfigurationElement_blockTypeWorkspaceModalRegistration = new WeakMap();
+_UmbPropertyEditorUIBlockListBlockConfigurationElement_instances = new WeakSet();
+_UmbPropertyEditorUIBlockListBlockConfigurationElement_onCreate = function _UmbPropertyEditorUIBlockListBlockConfigurationElement_onCreate(e) {
+    const selectedElementType = e.detail.contentElementTypeKey;
+    if (selectedElementType) {
+        __classPrivateFieldGet(this, _UmbPropertyEditorUIBlockListBlockConfigurationElement_blockTypeWorkspaceModalRegistration, "f")?.open({}, 'create/' + selectedElementType + '/null');
+    }
+};
 UmbPropertyEditorUIBlockListBlockConfigurationElement.styles = [UmbTextStyles];
+__decorate([
+    state()
+], UmbPropertyEditorUIBlockListBlockConfigurationElement.prototype, "_workspacePath", void 0);
 __decorate([
     property({ attribute: false })
 ], UmbPropertyEditorUIBlockListBlockConfigurationElement.prototype, "value", void 0);

package/dist-cms/packages/block/block-list/types.d.ts

@@ -1,5 +1,6 @@
 import type { UmbBlockTypeBaseModel } from '../block-type/index.js';
 import type { UmbBlockLayoutBaseModel } from '../index.js';
+export declare const UMB_BLOCK_LIST_TYPE = "block-list-type";
 export interface UmbBlockListTypeModel extends UmbBlockTypeBaseModel {
 }
 export interface UmbBlockListLayoutModel extends UmbBlockLayoutBaseModel {

package/dist-cms/packages/block/block-list/types.js

@@ -1 +1 @@
-export {};
+export const UMB_BLOCK_LIST_TYPE = 'block-list-type';

package/dist-cms/packages/block/block-type/components/index.d.ts

@@ -1,2 +1,2 @@
-export * from './input-block-type/index.js';
 export * from './block-type-card/index.js';
+export * from './input-block-type/index.js';

package/dist-cms/packages/block/block-type/components/index.js

@@ -1,2 +1,2 @@
-export * from './input-block-type/index.js';
 export * from './block-type-card/index.js';
+export * from './input-block-type/index.js';

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

@@ -5,10 +5,8 @@ export declare class UmbInputBlockTypeElement<BlockType extends UmbBlockTypeBase
     #private;
     get value(): BlockType[];
     set value(items: BlockType[]);
-    get entityType(): string | undefined;
-    set entityType(entityType: string | undefined);
+    workspacePath?: string;
     private _items;
-    private _workspacePath?;
     constructor();
     create(): void;
     deleteItem(contentElementTypeKey: string): void;

package/dist-cms/packages/block/block-type/components/input-block-type/input-block-type.element.js

@@ -4,65 +4,52 @@ 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;
 };
-var __classPrivateFieldGet = (this && this.__classPrivateFieldGet) || function (receiver, state, kind, f) {
-    if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a getter");
-    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 __classPrivateFieldSet = (this && this.__classPrivateFieldSet) || function (receiver, state, value, kind, f) {
     if (kind === "m") throw new TypeError("Private method is not writable");
     if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a setter");
     if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot write private member to an object whose class did not declare it");
     return (kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value;
 };
-var _UmbInputBlockTypeElement_instances, _UmbInputBlockTypeElement_entityType, _UmbInputBlockTypeElement_blockTypeWorkspaceModalRegistration, _UmbInputBlockTypeElement_renderButton, _UmbInputBlockTypeElement_renderItem;
-import { UMB_DOCUMENT_TYPE_PICKER_MODAL, UMB_MODAL_MANAGER_CONTEXT, UMB_WORKSPACE_MODAL, UmbModalRouteRegistrationController, } from '../../../../core/modal/index.js';
+var __classPrivateFieldGet = (this && this.__classPrivateFieldGet) || function (receiver, state, kind, f) {
+    if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a getter");
+    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 _UmbInputBlockTypeElement_instances, _UmbInputBlockTypeElement_datasetContext, _UmbInputBlockTypeElement_filter, _UmbInputBlockTypeElement_renderItem, _UmbInputBlockTypeElement_renderButton;
+import { UMB_DOCUMENT_TYPE_PICKER_MODAL, UMB_MODAL_MANAGER_CONTEXT } from '../../../../core/modal/index.js';
 import '../block-type-card/index.js';
 import { css, html, customElement, property, state, repeat } from '../../../../../external/lit/index.js';
 import { UmbLitElement } from '../../../../../shared/lit-element/index.js';
+import { UMB_PROPERTY_DATASET_CONTEXT } from '../../../../core/property/index.js';
 import { UmbChangeEvent } from '../../../../core/event/index.js';
 let UmbInputBlockTypeElement = class UmbInputBlockTypeElement extends UmbLitElement {
-    //
     get value() {
         return this._items;
     }
     set value(items) {
         this._items = items ?? [];
     }
-    get entityType() {
-        return __classPrivateFieldGet(this, _UmbInputBlockTypeElement_entityType, "f");
-    }
-    set entityType(entityType) {
-        __classPrivateFieldSet(this, _UmbInputBlockTypeElement_entityType, entityType, "f");
-        __classPrivateFieldGet(this, _UmbInputBlockTypeElement_blockTypeWorkspaceModalRegistration, "f")?.destroy();
-        if (entityType) {
-            // TODO: Make specific modal token that requires data.
-            __classPrivateFieldSet(this, _UmbInputBlockTypeElement_blockTypeWorkspaceModalRegistration, new UmbModalRouteRegistrationController(this, UMB_WORKSPACE_MODAL)
-                .addAdditionalPath(entityType)
-                .onSetup(() => {
-                return { data: { entityType: entityType, preset: {} }, modal: { size: 'large' } };
-            })
-                .observeRouteBuilder((routeBuilder) => {
-                const newpath = routeBuilder({});
-                this._workspacePath = newpath;
-            }), "f");
-        }
-    }
     constructor() {
         super();
         _UmbInputBlockTypeElement_instances.add(this);
-        _UmbInputBlockTypeElement_entityType.set(this, void 0);
         this._items = [];
-        _UmbInputBlockTypeElement_blockTypeWorkspaceModalRegistration.set(this, void 0);
+        _UmbInputBlockTypeElement_datasetContext.set(this, void 0);
+        _UmbInputBlockTypeElement_filter.set(this, []);
         _UmbInputBlockTypeElement_renderItem.set(this, (item) => {
             return html `
 			<umb-block-type-card
-				.workspacePath=${this._workspacePath}
+				.workspacePath=${this.workspacePath}
 				.key=${item.contentElementTypeKey}
 				@delete=${() => this.deleteItem(item.contentElementTypeKey)}>
 			</umb-block-type-card>
 		`;
         });
+        this.consumeContext(UMB_PROPERTY_DATASET_CONTEXT, async (instance) => {
+            __classPrivateFieldSet(this, _UmbInputBlockTypeElement_datasetContext, instance, "f");
+            this.observe(await __classPrivateFieldGet(this, _UmbInputBlockTypeElement_datasetContext, "f")?.propertyValueByAlias('blocks'), (value) => {
+                __classPrivateFieldSet(this, _UmbInputBlockTypeElement_filter, value, "f");
+            });
+        });
     }
     create() {
         this.consumeContext(UMB_MODAL_MANAGER_CONTEXT, async (modalManager) => {
@@ -76,34 +63,33 @@ let UmbInputBlockTypeElement = class UmbInputBlockTypeElement extends UmbLitElem
                         // Only pick elements:
                         docType.isElement &&
                             // Prevent picking the an already used element type:
-                            this._items.find((x) => x.contentElementTypeKey === docType.unique) === undefined,
+                            __classPrivateFieldGet(this, _UmbInputBlockTypeElement_filter, "f") &&
+                            __classPrivateFieldGet(this, _UmbInputBlockTypeElement_filter, "f").find((x) => x.contentElementTypeKey === docType.unique) === undefined,
                     },
                 });
                 const modalValue = await modalContext?.onSubmit();
                 const selectedElementType = modalValue.selection[0];
                 if (selectedElementType) {
-                    __classPrivateFieldGet(this, _UmbInputBlockTypeElement_blockTypeWorkspaceModalRegistration, "f")?.open({}, 'create/' + selectedElementType);
+                    this.dispatchEvent(new CustomEvent('create', { detail: { contentElementTypeKey: selectedElementType } }));
                 }
             }
         });
-        // No need to fire a change event, as all changes are made directly to the property, via context api.
     }
     deleteItem(contentElementTypeKey) {
-        this._items = this._items.filter((x) => x.contentElementTypeKey !== contentElementTypeKey);
+        this.value = this._items.filter((x) => x.contentElementTypeKey !== contentElementTypeKey);
         this.dispatchEvent(new UmbChangeEvent());
     }
     getFormElement() {
         return undefined;
     }
     render() {
-        return html `
-			${this._items ? repeat(this._items, (item) => item.contentElementTypeKey, __classPrivateFieldGet(this, _UmbInputBlockTypeElement_renderItem, "f")) : ''}
-			${__classPrivateFieldGet(this, _UmbInputBlockTypeElement_instances, "m", _UmbInputBlockTypeElement_renderButton).call(this)}
-		`;
+        return html `<div>
+			${repeat(this.value, (block) => block.contentElementTypeKey, __classPrivateFieldGet(this, _UmbInputBlockTypeElement_renderItem, "f"))} ${__classPrivateFieldGet(this, _UmbInputBlockTypeElement_instances, "m", _UmbInputBlockTypeElement_renderButton).call(this)}
+		</div>`;
     }
 };
-_UmbInputBlockTypeElement_entityType = new WeakMap();
-_UmbInputBlockTypeElement_blockTypeWorkspaceModalRegistration = new WeakMap();
+_UmbInputBlockTypeElement_datasetContext = new WeakMap();
+_UmbInputBlockTypeElement_filter = new WeakMap();
 _UmbInputBlockTypeElement_renderItem = new WeakMap();
 _UmbInputBlockTypeElement_instances = new WeakSet();
 _UmbInputBlockTypeElement_renderButton = function _UmbInputBlockTypeElement_renderButton() {
@@ -116,7 +102,7 @@ _UmbInputBlockTypeElement_renderButton = function _UmbInputBlockTypeElement_rend
 };
 UmbInputBlockTypeElement.styles = [
     css `
-			:host {
+			div {
 				display: grid;
 				gap: var(--uui-size-space-3);
 				grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
@@ -125,6 +111,7 @@ UmbInputBlockTypeElement.styles = [
 
 			#add-button {
 				text-align: center;
+				min-height: 150px;
 				height: 100%;
 			}
 
@@ -132,20 +119,29 @@ UmbInputBlockTypeElement.styles = [
 				display: block;
 				margin: 0 auto;
 			}
+
+			uui-input {
+				border: none;
+				margin: var(--uui-size-space-6) 0 var(--uui-size-space-4);
+			}
+
+			uui-input:hover uui-button {
+				opacity: 1;
+			}
+			uui-input uui-button {
+				opacity: 0;
+			}
 		`,
 ];
 __decorate([
     property({ type: Array, attribute: false })
 ], UmbInputBlockTypeElement.prototype, "value", null);
 __decorate([
-    property({ type: String, attribute: 'entity-type' })
-], UmbInputBlockTypeElement.prototype, "entityType", null);
+    property({ type: String })
+], UmbInputBlockTypeElement.prototype, "workspacePath", void 0);
 __decorate([
     state()
 ], UmbInputBlockTypeElement.prototype, "_items", void 0);
-__decorate([
-    state()
-], UmbInputBlockTypeElement.prototype, "_workspacePath", void 0);
 UmbInputBlockTypeElement = __decorate([
     customElement('umb-input-block-type')
 ], UmbInputBlockTypeElement);