From 449ffbdf0afa27657d8fcdc5939d4c886a1a37af Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Niels=20Lyngs=C3=B8?= Date: Thu, 18 May 2023 22:03:08 +0200 Subject: [PATCH] split data-type-picker from property-editor-ui-p.. --- .../data-type-picker-flow-modal.token.ts | 18 ++ .../libs/modal/token/index.ts | 1 + .../models/data-type-model.ts} | 2 - .../libs/models/index.ts | 2 + .../src/packages/core/components/index.ts | 1 - .../ref-data-type/ref-data-type.element.ts | 73 ++++++ .../ref-data-type/ref-data-type.stories.ts | 54 +++++ .../ref-property-editor-ui.element.ts | 10 +- .../ref-property-editor-ui.stories.ts | 8 +- .../property-settings-modal.element.ts | 4 +- .../data-type-picker-flow-modal.element.ts | 209 ++++++++++++++++++ .../data-type-picker-flow-modal.stories.ts | 19 ++ .../core/property-editors/modals/manifests.ts | 6 + ...property-editor-ui-picker-modal.element.ts | 4 +- .../data-type-flow-input.element.ts} | 41 ++-- .../settings/data-types/components/index.ts | 1 + 16 files changed, 415 insertions(+), 38 deletions(-) create mode 100644 src/Umbraco.Web.UI.Client/libs/modal/token/data-type-picker-flow-modal.token.ts rename src/Umbraco.Web.UI.Client/{src/packages/settings/data-types/types.ts => libs/models/data-type-model.ts} (86%) create mode 100644 src/Umbraco.Web.UI.Client/src/packages/core/components/ref-data-type/ref-data-type.element.ts create mode 100644 src/Umbraco.Web.UI.Client/src/packages/core/components/ref-data-type/ref-data-type.stories.ts create mode 100644 src/Umbraco.Web.UI.Client/src/packages/core/property-editors/modals/data-type-picker-flow/data-type-picker-flow-modal.element.ts create mode 100644 src/Umbraco.Web.UI.Client/src/packages/core/property-editors/modals/data-type-picker-flow/data-type-picker-flow-modal.stories.ts rename src/Umbraco.Web.UI.Client/src/packages/{core/components/input-data-type/input-data-type.element.ts => settings/data-types/components/data-type-flow-input/data-type-flow-input.element.ts} (69%) diff --git a/src/Umbraco.Web.UI.Client/libs/modal/token/data-type-picker-flow-modal.token.ts b/src/Umbraco.Web.UI.Client/libs/modal/token/data-type-picker-flow-modal.token.ts new file mode 100644 index 0000000000..c5bab648a2 --- /dev/null +++ b/src/Umbraco.Web.UI.Client/libs/modal/token/data-type-picker-flow-modal.token.ts @@ -0,0 +1,18 @@ +import { UmbModalToken } from '@umbraco-cms/backoffice/modal'; + +export interface UmbDataTypePickerFlowModalData { + selection?: Array; + submitLabel?: string; +} + +export type UmbDataTypePickerFlowModalResult = { + selection: Array; +}; + +export const UMB_DATA_TYPE_PICKER_FLOW_MODAL = new UmbModalToken< + UmbDataTypePickerFlowModalData, + UmbDataTypePickerFlowModalResult +>('Umb.Modal.DataTypePickerFlow', { + type: 'sidebar', + size: 'small', +}); diff --git a/src/Umbraco.Web.UI.Client/libs/modal/token/index.ts b/src/Umbraco.Web.UI.Client/libs/modal/token/index.ts index 8d460e2577..616fc58aaa 100644 --- a/src/Umbraco.Web.UI.Client/libs/modal/token/index.ts +++ b/src/Umbraco.Web.UI.Client/libs/modal/token/index.ts @@ -29,3 +29,4 @@ export * from './folder-modal.token'; export * from './partial-view-picker-modal.token'; export * from './dictionary-item-picker-modal.token'; export * from './data-type-picker-modal.token'; +export * from './data-type-picker-flow-modal.token'; diff --git a/src/Umbraco.Web.UI.Client/src/packages/settings/data-types/types.ts b/src/Umbraco.Web.UI.Client/libs/models/data-type-model.ts similarity index 86% rename from src/Umbraco.Web.UI.Client/src/packages/settings/data-types/types.ts rename to src/Umbraco.Web.UI.Client/libs/models/data-type-model.ts index 636a67cc81..33e35d560d 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/settings/data-types/types.ts +++ b/src/Umbraco.Web.UI.Client/libs/models/data-type-model.ts @@ -1,5 +1,3 @@ -// Temp file for data type types - import { DataTypeResponseModel } from '@umbraco-cms/backoffice/backend-api'; export interface UmbDataTypeModel extends Omit { diff --git a/src/Umbraco.Web.UI.Client/libs/models/index.ts b/src/Umbraco.Web.UI.Client/libs/models/index.ts index 7a1f9b5766..80828eb93c 100644 --- a/src/Umbraco.Web.UI.Client/libs/models/index.ts +++ b/src/Umbraco.Web.UI.Client/libs/models/index.ts @@ -1,3 +1,5 @@ +export type * from './data-type-model'; + /** Tried to find a common base of our entities — used by Entity Workspace Context */ export type UmbEntityBase = { id?: string; diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/components/index.ts b/src/Umbraco.Web.UI.Client/src/packages/core/components/index.ts index a05057e2dc..5fce9a02a8 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/components/index.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/components/index.ts @@ -35,7 +35,6 @@ import './date-input/date-input.element'; import './input-color-picker/input-color-picker.element'; import './input-eye-dropper/input-eye-dropper.element'; import './input-multi-url/input-multi-url.element'; -import './input-data-type/input-data-type.element'; import './input-slider/input-slider.element'; import './input-toggle/input-toggle.element'; import './input-upload-field/input-upload-field.element'; diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/components/ref-data-type/ref-data-type.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/components/ref-data-type/ref-data-type.element.ts new file mode 100644 index 0000000000..d147b03040 --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/packages/core/components/ref-data-type/ref-data-type.element.ts @@ -0,0 +1,73 @@ +import { UUIRefNodeElement } from '@umbraco-ui/uui'; +import { html } from 'lit'; +import { customElement, property } from 'lit/decorators.js'; + +/** + * @element umb-ref-data-type + * @description - Component for displaying a reference to a Data Type + * @extends UUIRefNodeElement + */ +@customElement('umb-ref-data-type') +export class UmbRefDataTypeElement extends UUIRefNodeElement { + protected fallbackIcon = + ''; + + /** + * Name + * @type {string} + * @attr + * @default '' + */ + @property({ type: String }) + name = ''; + + /** + * Property Editor UI Alias + * @type {string} + * @attr + * @default '' + */ + @property({ type: String, attribute: 'property-editor-ui-alias' }) + propertyEditorUiAlias = ''; + + /** + * Property Editor Model Alias + * @type {string} + * @attr + * @default '' + */ + @property({ type: String, attribute: 'property-editor-model-alias' }) + propertyEditorModelAlias = ''; + + protected renderDetail() { + const details: string[] = []; + + if (this.name !== '') { + details.push(this.name); + } + + if (this.propertyEditorUiAlias !== '') { + details.push(this.propertyEditorUiAlias); + } else { + details.push('Data Type Property Editor UI Missing'); + } + if (this.propertyEditorModelAlias !== '') { + details.push(this.propertyEditorModelAlias); + } else { + details.push('Data Type Property Editor Model Missing'); + } + + if (this.detail !== '') { + details.push(this.detail); + } + return html`${details.join(' | ')}`; + } + + static styles = [...UUIRefNodeElement.styles]; +} + +declare global { + interface HTMLElementTagNameMap { + 'umb-ref-data-type': UmbRefDataTypeElement; + } +} diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/components/ref-data-type/ref-data-type.stories.ts b/src/Umbraco.Web.UI.Client/src/packages/core/components/ref-data-type/ref-data-type.stories.ts new file mode 100644 index 0000000000..e650472acb --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/packages/core/components/ref-data-type/ref-data-type.stories.ts @@ -0,0 +1,54 @@ +import { Meta, StoryObj } from '@storybook/web-components'; +import { html } from 'lit'; +import './ref-data-type.element'; +import type { UmbRefDataTypeElement } from './ref-data-type.element'; + +const meta: Meta = { + title: 'Components/Ref Data Type', + component: 'umb-ref-property-editor-ui', +}; + +export default meta; +type Story = StoryObj; + +export const Overview: Story = { + args: { + name: 'Custom Data Type', + name: 'Umb.DataType.CustomUI', + dataTypeKey: 'Umbraco.JSON', + }, +}; + +export const WithDetail: Story = { + args: { + name: 'Custom Data Type', + name: 'Umb.DataType.CustomUI', + dataTypeKey: 'Umbraco.JSON', + detail: 'With some custom details', + }, +}; + +export const WithSlots: Story = { + args: { + name: 'Custom Data Type', + name: 'Umb.DataType.CustomUI', + dataTypeKey: 'Umbraco.JSON', + detail: 'With some custom details', + }, + render: (args) => html` + +
10
+
+ + + + + +
+ + `, +}; diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/components/ref-property-editor-ui/ref-property-editor-ui.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/components/ref-property-editor-ui/ref-property-editor-ui.element.ts index f28f91d5bb..1927f9317a 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/components/ref-property-editor-ui/ref-property-editor-ui.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/components/ref-property-editor-ui/ref-property-editor-ui.element.ts @@ -9,8 +9,6 @@ import { customElement, property } from 'lit/decorators.js'; */ @customElement('umb-ref-property-editor-ui') export class UmbRefPropertyEditorUIElement extends UUIRefNodeElement { - - protected fallbackIcon = ''; @@ -30,7 +28,7 @@ export class UmbRefPropertyEditorUIElement extends UUIRefNodeElement { * @default '' */ @property({ type: String, attribute: 'property-editor-model-alias' }) - propertyEditorAlias = ''; + propertyEditorModelAlias = ''; protected renderDetail() { const details: string[] = []; @@ -39,8 +37,8 @@ export class UmbRefPropertyEditorUIElement extends UUIRefNodeElement { details.push(this.alias); } - if (this.propertyEditorAlias !== '') { - details.push(this.propertyEditorAlias); + if (this.propertyEditorModelAlias !== '') { + details.push(this.propertyEditorModelAlias); } else { details.push('Property Editor Missing'); } @@ -50,7 +48,7 @@ export class UmbRefPropertyEditorUIElement extends UUIRefNodeElement { } return html`${details.join(' | ')}`; } - + static styles = [...UUIRefNodeElement.styles]; } diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/components/ref-property-editor-ui/ref-property-editor-ui.stories.ts b/src/Umbraco.Web.UI.Client/src/packages/core/components/ref-property-editor-ui/ref-property-editor-ui.stories.ts index cf45fa130e..da26d01e6e 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/components/ref-property-editor-ui/ref-property-editor-ui.stories.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/components/ref-property-editor-ui/ref-property-editor-ui.stories.ts @@ -15,7 +15,7 @@ export const Overview: Story = { args: { name: 'Custom Property Editor UI', alias: 'Umb.PropertyEditorUI.CustomUI', - propertyEditorAlias: 'Umbraco.JSON', + propertyEditorModelAlias: 'Umbraco.JSON', }, }; @@ -23,7 +23,7 @@ export const WithDetail: Story = { args: { name: 'Custom Property Editor UI', alias: 'Umb.PropertyEditorUI.CustomUI', - propertyEditorAlias: 'Umbraco.JSON', + propertyEditorModelAlias: 'Umbraco.JSON', detail: 'With some custom details', }, }; @@ -32,14 +32,14 @@ export const WithSlots: Story = { args: { name: 'Custom Property Editor UI', alias: 'Umb.PropertyEditorUI.CustomUI', - propertyEditorAlias: 'Umbraco.JSON', + propertyEditorModelAlias: 'Umbraco.JSON', detail: 'With some custom details', }, render: (args) => html`
10
diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/modals/property-settings/property-settings-modal.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/modals/property-settings/property-settings-modal.element.ts index 2544c4538d..d0fea5b658 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/modals/property-settings/property-settings-modal.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/modals/property-settings/property-settings-modal.element.ts @@ -209,9 +209,9 @@ export class UmbPropertySettingsModalElement extends UmbModalBaseElement< placeholder="Enter description..." .value=${this._returnData.description}>
- + @change=${this.#onDataTypeIdChange}>
Validation diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/property-editors/modals/data-type-picker-flow/data-type-picker-flow-modal.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/property-editors/modals/data-type-picker-flow/data-type-picker-flow-modal.element.ts new file mode 100644 index 0000000000..351e5e6354 --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/packages/core/property-editors/modals/data-type-picker-flow/data-type-picker-flow-modal.element.ts @@ -0,0 +1,209 @@ +import { css, html } from 'lit'; +import { UUITextStyles } from '@umbraco-ui/uui-css/lib'; +import { customElement, property, state } from 'lit/decorators.js'; +import { repeat } from 'lit/directives/repeat.js'; +import { groupBy } from 'lodash-es'; +import type { UUIInputEvent } from '@umbraco-ui/uui'; +import { + UmbPropertyEditorUIPickerModalData, + UmbPropertyEditorUIPickerModalResult, + UmbModalHandler, +} from '@umbraco-cms/backoffice/modal'; +import { ManifestPropertyEditorUI, umbExtensionsRegistry } from '@umbraco-cms/backoffice/extension-registry'; +import { UmbLitElement } from '@umbraco-cms/internal/lit-element'; + +interface GroupedPropertyEditorUIs { + [key: string]: Array; +} +@customElement('umb-data-type-picker-flow-modal') +export class UmbDataTypePickerFlowModalElement extends UmbLitElement { + @property({ attribute: false }) + modalHandler?: UmbModalHandler; + + @property({ type: Object }) + data?: UmbPropertyEditorUIPickerModalData; + + @state() + private _groupedPropertyEditorUIs: GroupedPropertyEditorUIs = {}; + + @state() + private _selection: Array = []; + + @state() + private _submitLabel = 'Select'; + + #propertyEditorUIs: Array = []; + #currentFilterQuery = ''; + + connectedCallback(): void { + super.connectedCallback(); + + this._selection = this.data?.selection ?? []; + this._submitLabel = this.data?.submitLabel ?? this._submitLabel; + + this._usePropertyEditorUIs(); + } + + private _usePropertyEditorUIs() { + if (!this.data) return; + + this.observe(umbExtensionsRegistry.extensionsOfType('propertyEditorUI'), (propertyEditorUIs) => { + // TODO: this should use same code as querying. + this.#propertyEditorUIs = propertyEditorUIs; + this._performFiltering(); + }); + } + + private _handleClick(propertyEditorUI: ManifestPropertyEditorUI) { + this._select(propertyEditorUI.alias); + } + + private _select(alias: string) { + this._selection = [alias]; + } + + private _handleFilterInput(event: UUIInputEvent) { + const query = (event.target.value as string) || ''; + this.#currentFilterQuery = query.toLowerCase(); + this._performFiltering(); + } + private _performFiltering() { + const result = !this.#currentFilterQuery + ? this.#propertyEditorUIs + : this.#propertyEditorUIs.filter((propertyEditorUI) => { + return ( + propertyEditorUI.name.toLowerCase().includes(this.#currentFilterQuery) || + propertyEditorUI.alias.toLowerCase().includes(this.#currentFilterQuery) + ); + }); + + // TODO: When filtering, then we should also display the available data types, in a separate list as the UIs. + + this._groupedPropertyEditorUIs = groupBy(result, 'meta.group'); + } + + private _close() { + this.modalHandler?.reject(); + } + + private _submit() { + this.modalHandler?.submit({ selection: this._selection }); + } + + render() { + return html` + + ${this._renderFilter()} ${this._renderGrid()} +
+ + +
+ + `; + } + + private _renderFilter() { + return html` + + `; + } + + private _renderGrid() { + return html` ${Object.entries(this._groupedPropertyEditorUIs).map( + ([key, value]) => + html`

${key}

+ ${this._renderGroupItems(value)}` + )}`; + } + + private _renderGroupItems(groupItems: Array) { + return html`
    + ${repeat( + groupItems, + (propertyEditorUI) => propertyEditorUI.alias, + (propertyEditorUI) => html`
  • + +
    • ` + )} +
`; + } + + static styles = [ + UUITextStyles, + css` + #filter { + width: 100%; + margin-bottom: var(--uui-size-space-4); + } + + #filter-icon { + padding-left: var(--uui-size-space-2); + } + + #item-grid { + display: grid; + grid-template-columns: repeat(auto-fill, minmax(70px, 1fr)); + margin: 0; + padding: 0; + grid-gap: var(--uui-size-space-4); + } + + #item-grid .item { + display: flex; + align-items: flex-start; + justify-content: center; + list-style: none; + height: 100%; + border: 1px solid transparent; + border-radius: var(--uui-border-radius); + } + + #item-grid .item:hover { + background: var(--uui-color-surface-emphasis); + color: var(--uui-color-interactive-emphasis); + cursor: pointer; + } + + #item-grid .item[selected] button { + background: var(--uui-color-selected); + color: var(--uui-color-selected-contrast); + } + + #item-grid .item button { + background: none; + border: none; + cursor: pointer; + padding: var(--uui-size-space-3); + display: flex; + align-items: center; + flex-direction: column; + justify-content: center; + font-size: 0.8rem; + height: 100%; + width: 100%; + color: var(--uui-color-interactive); + border-radius: var(--uui-border-radius); + } + + #item-grid .item .icon { + font-size: 2em; + margin-bottom: var(--uui-size-space-2); + } + `, + ]; +} + +export default UmbDataTypePickerFlowModalElement; + +declare global { + interface HTMLElementTagNameMap { + 'umb-data-type-picker-flow-modal': UmbDataTypePickerFlowModalElement; + } +} diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/property-editors/modals/data-type-picker-flow/data-type-picker-flow-modal.stories.ts b/src/Umbraco.Web.UI.Client/src/packages/core/property-editors/modals/data-type-picker-flow/data-type-picker-flow-modal.stories.ts new file mode 100644 index 0000000000..0d888ea375 --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/packages/core/property-editors/modals/data-type-picker-flow/data-type-picker-flow-modal.stories.ts @@ -0,0 +1,19 @@ +import { Meta, Story } from '@storybook/web-components'; +import { html } from 'lit'; +import type { UmbDataTypePickerFlowModalElement } from './data-type-picker-flow-modal.element'; +import type { UmbPropertyEditorUIPickerModalData } from '@umbraco-cms/backoffice/modal'; + +import './data-type-picker-flow-modal.element'; +import '../../../components/body-layout/body-layout.element'; + +export default { + title: 'API/Modals/Layouts/Data Type Picker Flow', + component: 'umb-data-type-picker-flow-modal', + id: 'umb-data-type-picker-flow-modal', +} as Meta; + +const data: UmbPropertyEditorUIPickerModalData = { selection: [] }; + +export const Overview: Story = () => html` + +`; diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/property-editors/modals/manifests.ts b/src/Umbraco.Web.UI.Client/src/packages/core/property-editors/modals/manifests.ts index bd7dc33169..674f034bea 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/property-editors/modals/manifests.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/property-editors/modals/manifests.ts @@ -7,6 +7,12 @@ const modals: Array = [ name: 'Property Editor UI Picker Modal', loader: () => import('./property-editor-ui-picker/property-editor-ui-picker-modal.element'), }, + { + type: 'modal', + alias: 'Umb.Modal.DataTypePickerFlow', + name: 'Data Type Picker Flow Modal', + loader: () => import('./data-type-picker-flow/data-type-picker-flow-modal.element'), + }, ]; export const manifests = [...modals]; diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/property-editors/modals/property-editor-ui-picker/property-editor-ui-picker-modal.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/property-editors/modals/property-editor-ui-picker/property-editor-ui-picker-modal.element.ts index bda34eddbf..b16772dcd0 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/property-editors/modals/property-editor-ui-picker/property-editor-ui-picker-modal.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/property-editors/modals/property-editor-ui-picker/property-editor-ui-picker-modal.element.ts @@ -86,13 +86,13 @@ export class UmbPropertyEditorUIPickerModalElement extends UmbLitElement { render() { return html` - + ${this._renderFilter()} ${this._renderGrid()}
- + `; } diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/components/input-data-type/input-data-type.element.ts b/src/Umbraco.Web.UI.Client/src/packages/settings/data-types/components/data-type-flow-input/data-type-flow-input.element.ts similarity index 69% rename from src/Umbraco.Web.UI.Client/src/packages/core/components/input-data-type/input-data-type.element.ts rename to src/Umbraco.Web.UI.Client/src/packages/settings/data-types/components/data-type-flow-input/data-type-flow-input.element.ts index 5244958f38..6b2da756ea 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/components/input-data-type/input-data-type.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/settings/data-types/components/data-type-flow-input/data-type-flow-input.element.ts @@ -3,27 +3,25 @@ import { UUITextStyles } from '@umbraco-ui/uui-css/lib'; import { customElement, property, state } from 'lit/decorators.js'; import { FormControlMixin } from '@umbraco-ui/uui-base/lib/mixins'; import { UmbLitElement } from '@umbraco-cms/internal/lit-element'; -import { ManifestPropertyEditorUI, umbExtensionsRegistry } from '@umbraco-cms/backoffice/extension-registry'; -import { - UmbModalRouteRegistrationController, - UMB_PROPERTY_EDITOR_UI_PICKER_MODAL, -} from '@umbraco-cms/backoffice/modal'; +import { umbExtensionsRegistry } from '@umbraco-cms/backoffice/extension-registry'; +import { UmbModalRouteRegistrationController, UMB_DATA_TYPE_PICKER_FLOW_MODAL } from '@umbraco-cms/backoffice/modal'; +import type { UmbDataTypeModel } from '@umbraco-cms/backoffice/models'; // Note: Does only support picking a single data type. But this could be developed later into this same component. To follow other picker input components. /** - * Form control for picking a data type. - * @element umb-input-data-type + * Form control for picking or creating a data type. + * @element umb-data-type-flow-input * @fires change - when the value of the input changes * @fires blur - when the input loses focus * @fires focus - when the input gains focus */ -@customElement('umb-input-data-type') +@customElement('umb-data-type-flow-input') export class UmbInputDataTypeElement extends FormControlMixin(UmbLitElement) { protected getFormElement() { return undefined; } - @state() private _selectedPropertyEditorUI?: ManifestPropertyEditorUI; + @state() private _selectedDataType?: UmbDataTypeModel; /** * @param {string} dataTypeId @@ -41,7 +39,7 @@ export class UmbInputDataTypeElement extends FormControlMixin(UmbLitElement) { constructor() { super(); - new UmbModalRouteRegistrationController(this, UMB_PROPERTY_EDITOR_UI_PICKER_MODAL) + new UmbModalRouteRegistrationController(this, UMB_DATA_TYPE_PICKER_FLOW_MODAL) .onSetup(() => { return { selection: [this._value.toString()], @@ -62,33 +60,34 @@ export class UmbInputDataTypeElement extends FormControlMixin(UmbLitElement) { #observeDataTypeId() { if (!this._value) return; - this.observe( + /*this.observe( umbExtensionsRegistry.getByTypeAndAlias('propertyEditorUI', this._value.toString()), (propertyEditorUI) => { if (!propertyEditorUI) return; - this._selectedPropertyEditorUI = propertyEditorUI; + this._selectedDataType = propertyEditorUI; }, 'observePropertyEditorUI' - ); + );*/ } render() { - return this._selectedPropertyEditorUI + return this._selectedDataType ? html` - { console.warn('TO BE DONE..'); }} border> - + + - + ` : html`