diff --git a/src/Umbraco.Web.UI.Client/src/external/lit/index.ts b/src/Umbraco.Web.UI.Client/src/external/lit/index.ts index a1f349289879..5bfaa54c6e66 100644 --- a/src/Umbraco.Web.UI.Client/src/external/lit/index.ts +++ b/src/Umbraco.Web.UI.Client/src/external/lit/index.ts @@ -1,6 +1,7 @@ export * from 'lit'; export * from 'lit/decorators.js'; -export { directive, AsyncDirective, type PartInfo } from 'lit/async-directive.js'; +export { directive, AsyncDirective, Directive, PartType } from 'lit/async-directive.js'; +export type { PartInfo } from 'lit/async-directive.js'; export * from 'lit/directives/class-map.js'; export * from 'lit/directives/if-defined.js'; export * from 'lit/directives/map.js'; diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/lit-element/directives/ignore-password-managers.lit-directive.ts b/src/Umbraco.Web.UI.Client/src/packages/core/lit-element/directives/ignore-password-managers.lit-directive.ts new file mode 100644 index 000000000000..17771984cb62 --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/packages/core/lit-element/directives/ignore-password-managers.lit-directive.ts @@ -0,0 +1,38 @@ +import { directive, Directive, noChange, nothing, PartType } from '@umbraco-cms/backoffice/external/lit'; +import type { ElementPart, PartInfo } from '@umbraco-cms/backoffice/external/lit'; + +/** + * @description The directive applies attributes to ignore password managers on the given element. + */ +class UmbIgnorePasswordManagersDirective extends Directive { + #attributes = [ + { name: 'data-1p-ignore', value: '' }, // 1Password + { name: 'data-bwignore', value: '' }, // Bitwarden + { name: 'data-form-type', value: 'other' }, // Dashlane + { name: 'data-lpignore', value: 'true' }, // LastPass + ]; + + constructor(partInfo: PartInfo) { + super(partInfo); + if (partInfo.type != PartType.ELEMENT) { + throw new Error('The `umbIgnorePasswordManagers` directive can only be used in element parts'); + } + } + + override render() { + return nothing; + } + + override update(part: ElementPart) { + this.#attributes.forEach((attr) => { + part.element.setAttribute(attr.name, attr.value); + }); + return noChange; + } +} + +/** + * @description A Lit directive which applies password manager ignore attributes to an element. + * @example html`
` + */ +export const umbIgnorePasswordManagers = directive(UmbIgnorePasswordManagersDirective); diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/lit-element/directives/index.ts b/src/Umbraco.Web.UI.Client/src/packages/core/lit-element/directives/index.ts index f6877c9c117e..6a83c8be2404 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/lit-element/directives/index.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/lit-element/directives/index.ts @@ -1,2 +1,3 @@ -export * from './focus.lit-directive.js'; export * from './destroy.lit-directive.js'; +export * from './focus.lit-directive.js'; +export * from './ignore-password-managers.lit-directive.js'; diff --git a/src/Umbraco.Web.UI.Client/src/packages/tiptap/components/input-tiptap/input-tiptap.element.ts b/src/Umbraco.Web.UI.Client/src/packages/tiptap/components/input-tiptap/input-tiptap.element.ts index 89996511511c..1409144cd0a4 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/tiptap/components/input-tiptap/input-tiptap.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/tiptap/components/input-tiptap/input-tiptap.element.ts @@ -16,7 +16,7 @@ import { import { loadManifestApi } from '@umbraco-cms/backoffice/extension-api'; import { umbExtensionsRegistry } from '@umbraco-cms/backoffice/extension-registry'; import { UmbChangeEvent } from '@umbraco-cms/backoffice/event'; -import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element'; +import { umbIgnorePasswordManagers, UmbLitElement } from '@umbraco-cms/backoffice/lit-element'; import { UmbFormControlMixin } from '@umbraco-cms/backoffice/validation'; import type { CSSResultGroup } from '@umbraco-cms/backoffice/external/lit'; import type { UmbPropertyEditorConfigCollection } from '@umbraco-cms/backoffice/property-editor'; @@ -204,7 +204,7 @@ export class UmbInputTiptapElement extends UmbFormControlMixin html`
`)} ${when(!loading, () => html`${this.#renderStyles()}${this.#renderToolbar()}`)} -
+
${when(!loading, () => this.#renderStatusbar())} `; }