diff --git a/src/Umbraco.Web.UI.Client/src/packages/documents/document-types/workspace/document-type-workspace-editor.element.ts b/src/Umbraco.Web.UI.Client/src/packages/documents/document-types/workspace/document-type-workspace-editor.element.ts index 6b59a6b6b5..8d382274bf 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/documents/document-types/workspace/document-type-workspace-editor.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/documents/document-types/workspace/document-type-workspace-editor.element.ts @@ -3,6 +3,7 @@ import type { UmbInputWithAliasElement } from '@umbraco-cms/backoffice/component import { umbFocus, UmbLitElement } from '@umbraco-cms/backoffice/lit-element'; import { css, html, customElement, state, ifDefined } from '@umbraco-cms/backoffice/external/lit'; import { UMB_MODAL_MANAGER_CONTEXT, UMB_ICON_PICKER_MODAL } from '@umbraco-cms/backoffice/modal'; +import type { UUITextareaElement } from '@umbraco-cms/backoffice/external/uui'; @customElement('umb-document-type-workspace-editor') export class UmbDocumentTypeWorkspaceEditorElement extends UmbLitElement { @@ -12,6 +13,9 @@ export class UmbDocumentTypeWorkspaceEditorElement extends UmbLitElement { @state() private _alias?: string; + @state() + private _description?: string; + @state() private _icon?: string; @@ -33,6 +37,11 @@ export class UmbDocumentTypeWorkspaceEditorElement extends UmbLitElement { if (!this.#workspaceContext) return; this.observe(this.#workspaceContext.name, (name) => (this._name = name), '_observeName'); this.observe(this.#workspaceContext.alias, (alias) => (this._alias = alias), '_observeAlias'); + this.observe( + this.#workspaceContext.description, + (description) => (this._description = description), + '_observeDescription', + ); this.observe(this.#workspaceContext.icon, (icon) => (this._icon = icon), '_observeIcon'); this.observe(this.#workspaceContext.isNew, (isNew) => (this._isNew = isNew), '_observeIsNew'); } @@ -61,6 +70,10 @@ export class UmbDocumentTypeWorkspaceEditorElement extends UmbLitElement { this.#workspaceContext?.setAlias(event.target.alias ?? ''); } + #onDescriptionChange(event: InputEvent & { target: UUITextareaElement }) { + this.#workspaceContext?.setDescription(event.target.value.toString() ?? ''); + } + render() { return html` @@ -69,15 +82,24 @@ export class UmbDocumentTypeWorkspaceEditorElement extends UmbLitElement { - - +
+ + + + +
`; @@ -96,10 +118,27 @@ export class UmbDocumentTypeWorkspaceEditorElement extends UmbLitElement { flex: 1 1 auto; } + #editors { + display: flex; + flex: 1 1 auto; + flex-direction: column; + gap: var(--uui-size-space-1); + } + #name { width: 100%; } + #description { + width: 100%; + --uui-input-height: var(--uui-size-8); + --uui-input-border-color: transparent; + } + + #description:hover { + --uui-input-border-color: var(--uui-color-border); + } + #icon { font-size: calc(var(--uui-size-layout-3) / 2); margin-right: var(--uui-size-space-2);