Merge branch 'feature/input-with-alias' into feature/user-group-alias

This commit is contained in:
Mads Rasmussen
2024-05-02 13:14:05 +02:00
3 changed files with 14 additions and 5 deletions

View File

@@ -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<string>(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<string>(UmbLit
@input=${this.#onAliasChange}
.value=${this.alias}
placeholder="Enter alias..."
?disabled=${this._aliasLocked}>
?disabled=${this._aliasLocked && !this.aliasReadonly}
?readonly=${this.aliasReadonly}>
<!-- TODO: validation for bad characters -->
<div @click=${this.#onToggleAliasLock} @keydown=${() => ''} id="alias-lock" slot="prepend">
<uui-icon name=${this._aliasLocked ? 'icon-lock' : 'icon-unlocked'}></uui-icon>
</div>
${this.aliasReadonly
? nothing
: html`<div @click=${this.#onToggleAliasLock} @keydown=${() => ''} id="alias-lock" slot="prepend">
<uui-icon name=${this._aliasLocked ? 'icon-lock' : 'icon-unlocked'}></uui-icon>
</div>`}
</uui-input>
</uui-input>
`;
@@ -105,6 +111,7 @@ export class UmbInputWithAliasElement extends UmbFormControlMixin<string>(UmbLit
justify-content: center;
cursor: pointer;
}
#alias-lock uui-icon {
margin-bottom: 2px;
}

View File

@@ -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 {

View File

@@ -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';