Feat: Input Lock Event & Media Card Name (#806)

Author: loivsen

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 {

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,
+    });
+  }
+}

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() {

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);
+  });
 });