diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/components/input-with-alias/input-with-alias.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/components/input-with-alias/input-with-alias.element.ts index 24f5c0cab7..fb75b79bdf 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/components/input-with-alias/input-with-alias.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/components/input-with-alias/input-with-alias.element.ts @@ -1,4 +1,4 @@ -import { css, customElement, html, property, state } from '@umbraco-cms/backoffice/external/lit'; +import { css, customElement, html, nothing, property, state } from '@umbraco-cms/backoffice/external/lit'; import { UmbChangeEvent } from '@umbraco-cms/backoffice/event'; import { UmbFormControlMixin } from '@umbraco-cms/backoffice/validation'; import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element'; @@ -13,6 +13,9 @@ export class UmbInputWithAliasElement extends UmbFormControlMixin(UmbLit @property({ type: String, reflect: false }) alias?: string; + @property({ type: Boolean, reflect: true, attribute: 'alias-readonly' }) + aliasReadonly = false; + @property({ type: Boolean, attribute: 'auto-generate-alias' }) autoGenerateAlias?: boolean; @@ -75,11 +78,14 @@ export class UmbInputWithAliasElement extends UmbFormControlMixin(UmbLit @input=${this.#onAliasChange} .value=${this.alias} placeholder="Enter alias..." - ?disabled=${this._aliasLocked}> + ?disabled=${this._aliasLocked && !this.aliasReadonly} + ?readonly=${this.aliasReadonly}> -
''} id="alias-lock" slot="prepend"> - -
+ ${this.aliasReadonly + ? nothing + : html`
''} id="alias-lock" slot="prepend"> + +
`} `; @@ -105,6 +111,7 @@ export class UmbInputWithAliasElement extends UmbFormControlMixin(UmbLit justify-content: center; cursor: pointer; } + #alias-lock uui-icon { margin-bottom: 2px; } diff --git a/src/Umbraco.Web.UI.Client/src/packages/media/media-types/workspace/media-type-workspace-editor.element.ts b/src/Umbraco.Web.UI.Client/src/packages/media/media-types/workspace/media-type-workspace-editor.element.ts index f2d91c4b49..ac79122095 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/media/media-types/workspace/media-type-workspace-editor.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/media/media-types/workspace/media-type-workspace-editor.element.ts @@ -3,6 +3,7 @@ import { UMB_MEDIA_TYPE_WORKSPACE_CONTEXT } from './media-type-workspace.context import { css, html, customElement, state, ifDefined } from '@umbraco-cms/backoffice/external/lit'; import { UmbLitElement, umbFocus } from '@umbraco-cms/backoffice/lit-element'; import { UMB_ICON_PICKER_MODAL, UMB_MODAL_MANAGER_CONTEXT } from '@umbraco-cms/backoffice/modal'; +import type { UmbInputWithAliasElement } from '@umbraco-cms/backoffice/components'; @customElement('umb-media-type-workspace-editor') export class UmbMediaTypeWorkspaceEditorElement extends UmbLitElement { diff --git a/src/Umbraco.Web.UI.Client/src/packages/members/member-type/workspace/member-type-workspace-editor.element.ts b/src/Umbraco.Web.UI.Client/src/packages/members/member-type/workspace/member-type-workspace-editor.element.ts index e3581adc00..065cc79855 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/members/member-type/workspace/member-type-workspace-editor.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/members/member-type/workspace/member-type-workspace-editor.element.ts @@ -1,4 +1,5 @@ import { UMB_MEMBER_TYPE_WORKSPACE_CONTEXT } from './member-type-workspace.context-token.js'; +import type { UmbInputWithAliasElement } from '@umbraco-cms/backoffice/components'; import { css, html, customElement, state, ifDefined } from '@umbraco-cms/backoffice/external/lit'; import { UmbLitElement, umbFocus } from '@umbraco-cms/backoffice/lit-element'; import { UMB_ICON_PICKER_MODAL, UMB_MODAL_MANAGER_CONTEXT } from '@umbraco-cms/backoffice/modal';