diff --git a/packages/uui-card-media/lib/uui-card-media.element.ts b/packages/uui-card-media/lib/uui-card-media.element.ts index 04618a0a2..7c45d721b 100644 --- a/packages/uui-card-media/lib/uui-card-media.element.ts +++ b/packages/uui-card-media/lib/uui-card-media.element.ts @@ -174,6 +174,8 @@ export class UUICardMediaElement extends UUICardElement { font-size: var(--uui-type-small-size); box-sizing: border-box; padding: var(--uui-size-2) var(--uui-size-4); + text-align: left; + word-break: break-word; } :host([disabled]) #open-part { diff --git a/packages/uui-input-lock/lib/UUIInputLockEvent.ts b/packages/uui-input-lock/lib/UUIInputLockEvent.ts new file mode 100644 index 000000000..893b3376d --- /dev/null +++ b/packages/uui-input-lock/lib/UUIInputLockEvent.ts @@ -0,0 +1,13 @@ +import { UUIEvent } from '@umbraco-ui/uui-base/lib/events'; +import { UUIInputLockElement } from './uui-input-lock.element'; + +export class UUIInputLockEvent extends UUIEvent<{}, UUIInputLockElement> { + public static readonly LOCK_CHANGE: string = 'lock-change'; + + constructor(evName: string, eventInit: any | null = {}) { + super(evName, { + ...{ bubbles: true }, + ...eventInit, + }); + } +} diff --git a/packages/uui-input-lock/lib/uui-input-lock.element.ts b/packages/uui-input-lock/lib/uui-input-lock.element.ts index aeb42d019..861319df8 100644 --- a/packages/uui-input-lock/lib/uui-input-lock.element.ts +++ b/packages/uui-input-lock/lib/uui-input-lock.element.ts @@ -7,6 +7,7 @@ import { iconUnlock, } from '@umbraco-ui/uui-icon-registry-essential/lib/svgs'; import { property } from 'lit/decorators.js'; +import { UUIInputLockEvent } from './UUIInputLockEvent'; /** * @element uui-input-lock @@ -37,6 +38,8 @@ export class UUIInputLockElement extends UUIInputElement { _onLockToggle() { this.readonly = this.locked = !this.locked; + this.pristine = false; + this.dispatchEvent(new UUIInputLockEvent(UUIInputLockEvent.LOCK_CHANGE)); } renderIcon() { diff --git a/packages/uui-input-lock/lib/uui-input-lock.test.ts b/packages/uui-input-lock/lib/uui-input-lock.test.ts index 2d8486e4f..f75cc750f 100644 --- a/packages/uui-input-lock/lib/uui-input-lock.test.ts +++ b/packages/uui-input-lock/lib/uui-input-lock.test.ts @@ -1,9 +1,10 @@ -import { expect, fixture, html } from '@open-wc/testing'; +import { expect, fixture, html, oneEvent } from '@open-wc/testing'; import { UUIInputElement } from '@umbraco-ui/uui-input/lib'; import '@umbraco-ui/uui-icon/lib'; import '@umbraco-ui/uui-button/lib'; import { UUIInputLockElement } from './uui-input-lock.element'; +import { UUIInputLockEvent } from './UUIInputLockEvent'; describe('UUIInputLockElement', () => { let element: UUIInputLockElement; @@ -45,4 +46,21 @@ describe('UUIInputLockElement', () => { await toggle.click(); await expect(element.readonly).to.be.true; }); + + it('emits lock change event', async () => { + const listener = oneEvent(element, UUIInputLockEvent.LOCK_CHANGE, false); + + const toggle = element.shadowRoot?.querySelector( + '#lock', + ) as HTMLButtonElement; + await toggle.click(); + + const event = await listener; + + expect(event).to.exist; + expect(event.type).to.equal(UUIInputLockEvent.LOCK_CHANGE); + expect(event.bubbles).to.be.true; + expect(event.composed).to.be.false; + expect(event!.target).to.equal(element); + }); });