Update events documentation

packages/lit-dev-content/site/_includes/projects/docs/components/events/child/index.html

@@ -0,0 +1,3 @@
+<script type="module" src="./my-element.js"></script>
+
+<my-element></my-element>

packages/lit-dev-content/site/_includes/projects/docs/components/events/child/my-element.ts

@@ -0,0 +1,15 @@
+import { LitElement, html, customElement, property } from '@polymer/lit-element';
+
+@customElement('my-element')
+export class MyElement extends LitElement {
+  @property({type: Number}) count = 0;
+  protected render() {
+    return html`
+      <p><button @click="${this._increment}">Click Me!</button></p>
+      <p>Click count: ${this.count}</p>
+    `;
+  }
+  private _increment(e: Event) {
+    this.count++;
+  }
+}

packages/lit-dev-content/site/_includes/projects/events/childimperative/project.json → packages/lit-dev-content/site/_includes/projects/docs/components/events/child/project.json

@@ -1,6 +1,6 @@
 {
   "files": {
-    "my-element.js": {},
+    "my-element.ts": {},
     "index.html": {}
   }
 }

packages/lit-dev-content/site/_includes/projects/docs/components/events/comm/index.html

@@ -0,0 +1,6 @@
+<script type="module" src="./my-listener.js"></script>
+<script type="module" src="./my-dispatcher.js"></script>
+
+<my-listener>
+  <my-dispatcher></my-dispatcher>
+</my-listener>

packages/lit-dev-content/site/_includes/projects/docs/components/events/comm/my-dispatcher.ts

@@ -0,0 +1,29 @@
+import { LitElement, html, property, customElement } from '@polymer/lit-element';
+
+@customElement('my-dispatcher')
+class MyDispatcher extends LitElement {
+  @property() label = 'Check me!';
+  defaultMessage = '🙂';
+  @property() message = this.defaultMessage;
+  private _resetMessage?: NodeJS.Timeout;
+  protected render() {
+    return html`
+      <label><input type="checkbox" @click=${this._tryChange}>${this.label}</label>
+      <div>${this.message}</div>
+    `;
+  }
+  private _tryChange(e: Event) {
+    const detail = {message: this.message};
+    const event = new CustomEvent('checked', {detail, bubbles: true, composed: true, cancelable: true});
+    this.dispatchEvent(event);
+    if (event.defaultPrevented) {
+      e.preventDefault();
+    }
+    this.message = detail.message;
+  }
+  protected updated() {
+    clearTimeout(this._resetMessage);
+    this._resetMessage =
+      setTimeout(() => this.message = this.defaultMessage, 1000);
+  }
+}

packages/lit-dev-content/site/_includes/projects/docs/components/events/comm/my-listener.ts

@@ -0,0 +1,22 @@
+import { LitElement, html, property, customElement } from '@polymer/lit-element';
+
+@customElement('my-listener')
+class MyListener extends LitElement {
+  @property() canCheck = false;
+  protected render() {
+    return html`
+      <p @checked=${this._checkedHandler}><slot></slot></p>
+      <hr>
+      <p>${this.canCheck ? 'Allowing' : 'Preventing'} check</p>
+      <p><button @click=${this._clickHandler}>Toggle</button></p>`;
+  }
+  private _checkedHandler(e: CustomEvent) {
+    if (!this.canCheck) {
+      e.preventDefault();
+      e.detail.message = '✅ Prevented!!';
+    }
+  }
+  private _clickHandler() {
+    this.canCheck = !this.canCheck;
+  }
+}

packages/lit-dev-content/site/_includes/projects/docs/components/events/comm/project.json

@@ -0,0 +1,7 @@
+{
+  "files": {
+    "my-dispatcher.ts": {},
+    "my-listener.ts": {},
+    "index.html": {}
+  }
+}

packages/lit-dev-content/site/_includes/projects/docs/components/events/delegation/index.html

@@ -0,0 +1,3 @@
+<script type="module" src="./my-element.js"></script>
+
+<my-element></my-element>

packages/lit-dev-content/site/_includes/projects/docs/components/events/delegation/my-element.ts

@@ -0,0 +1,18 @@
+import { LitElement, html, customElement, property } from '@polymer/lit-element';
+@customElement('my-element')
+class MyElement extends LitElement {
+  @property() clicked = '';
+  protected render() {
+    return html`
+      <div @click="${this._clickHandler}">
+        <p><button>Item 1</button></p>
+        <p><button>Item 2</button></p>
+        <p><button>Item 3</button></p>
+      </div>
+      <p>Clicked: ${this.clicked}</p>
+    `;
+  }
+  private _clickHandler(e: Event) {
+    this.clicked = e.target === e.currentTarget ? 'container' : e.target.textContent;
+  }
+}

packages/lit-dev-content/site/_includes/projects/docs/components/events/delegation/project.json

@@ -0,0 +1,7 @@
+{
+  "files": {
+    "my-element.ts": {},
+    "index.html": {}
+  },
+  "previewHeight": "160px"
+}

packages/lit-dev-content/site/_includes/projects/docs/components/events/dispatch/index.html

@@ -0,0 +1,6 @@
+<script type="module" src="./my-listener.js"></script>
+<script type="module" src="./my-dispatcher.js"></script>
+
+<my-listener>
+  <my-dispatcher></my-dispatcher>
+</my-listener>

packages/lit-dev-content/site/_includes/projects/docs/components/events/dispatch/my-dispatcher.ts

@@ -0,0 +1,22 @@
+import { LitElement, html, customElement, query } from '@polymer/lit-element';
+@customElement('my-dispatcher')
+class MyDispatcher extends LitElement {
+  @query('input', true) _input!: HTMLInputElement;
+  protected render() {
+    return html`
+      <p>Name: <input></p>
+      <p><button @click=${this._dispatchLogin}>Login</button></p>
+    `;
+  }
+  private _dispatchLogin() {
+    const name = this._input.value.trim();
+    if (name) {
+      const options = {
+        detail: {name},
+        bubbles: true,
+        composed: true
+      };
+      this.dispatchEvent(new CustomEvent('mylogin', options));
+    }
+  }
+}

packages/lit-dev-content/site/_includes/projects/docs/components/events/dispatch/my-listener.ts

@@ -0,0 +1,13 @@
+import { LitElement, html, customElement, property } from '@polymer/lit-element';
+@customElement('my-listener')
+class MyListener extends LitElement {
+  @property() name = '';
+  protected render() {
+    return html`
+      <p @mylogin=${this._loginListener}><slot></slot></p>
+      <p>Login: ${this.name}</p>`;
+  }
+  private _loginListener(e: CustomEvent) {
+    this.name = e.detail.name;
+  }
+}

packages/lit-dev-content/site/_includes/projects/docs/components/events/dispatch/project.json

@@ -0,0 +1,7 @@
+{
+  "files": {
+    "my-dispatcher.ts": {},
+    "my-listener.ts": {},
+    "index.html": {}
+  }
+}

packages/lit-dev-content/site/_includes/projects/docs/components/events/host/index.html

@@ -0,0 +1,3 @@
+<script type="module" src="./my-element.js"></script>
+
+<my-element></my-element>

packages/lit-dev-content/site/_includes/projects/docs/components/events/host/my-element.ts

@@ -0,0 +1,22 @@
+import { LitElement, html, customElement, property } from '@polymer/lit-element';
+@customElement('my-element')
+class MyElement extends LitElement {
+  @property() hostName = '';
+  @property() shadowName = '';
+  constructor() {
+    super();
+    this.addEventListener('click', (e: Event) => this.hostName = e.target.localName);
+  }
+  protected createRenderRoot() {
+    const root = super.createRenderRoot();
+    root.addEventListener('click', (e: Event) => this.shadowName = e.target.localName);
+    return root;
+  }
+  protected render() {
+    return html`
+      <p><button>Click Me!</button></p>
+      <p>Component target: ${this.hostName}</p>
+      <p>Shadow target: ${this.shadowName}</p>
+    `;
+  }
+}

packages/lit-dev-content/site/_includes/projects/events/events/project.json → packages/lit-dev-content/site/_includes/projects/docs/components/events/host/project.json

@@ -1,6 +1,6 @@
 {
   "files": {
-    "my-element.js": {},
+    "my-element.ts": {},
     "index.html": {}
   }
 }

packages/lit-dev-content/site/_includes/projects/docs/components/events/list/index.html

@@ -0,0 +1,3 @@
+<script type="module" src="./my-element.js"></script>
+
+<my-element></my-element>

packages/lit-dev-content/site/_includes/projects/docs/components/events/list/my-element.ts

@@ -0,0 +1,22 @@
+import { LitElement, html, customElement, property } from '@polymer/lit-element';
+@customElement('my-element')
+class MyElement extends LitElement {
+  @property() clicked = '';
+  @property() focused = '';
+  data = [1, 2, 3];
+  protected render() {
+    return html`
+      <div key="container" @click=${this._clickHandler}>
+        ${this.data.map(i => html`<p><button key=${i} @focus=${this._focusHandler}>Item ${i}</button></p>`)}
+      </div>
+      <p>Clicked: ${this.clicked}</p>
+      <p>Focused: ${this.focused}</p>
+    `;
+  }
+  private _clickHandler(e: Event) {
+    this.clicked = (e.target as Element).getAttribute('key');
+  }
+  private _focusHandler(e: Event) {
+    this.focused = (e.target as Element).textContent;
+  }
+}

packages/lit-dev-content/site/_includes/projects/docs/components/events/list/project.json

@@ -0,0 +1,7 @@
+{
+  "files": {
+    "my-element.ts": {},
+    "index.html": {}
+  },
+  "previewHeight": "190px"
+}

packages/lit-dev-content/site/_includes/projects/docs/components/events/update/index.html

@@ -0,0 +1,6 @@
+<script type="module" src="./my-listener.js"></script>
+<script type="module" src="./my-dispatcher.js"></script>
+
+<my-listener>
+  <my-dispatcher></my-dispatcher>
+</my-listener>

packages/lit-dev-content/site/_includes/projects/docs/components/events/update/my-dispatcher.ts

@@ -0,0 +1,18 @@
+import { LitElement, html, property, customElement } from '@polymer/lit-element';
+
+@customElement('my-dispatcher')
+class MyDispatcher extends LitElement {
+  @property({type: Boolean}) open = true;
+  protected render() {
+    return html`
+      <p><button @click=${this._notify}>${this.open ? 'Close' : 'Open'}</button></p>
+      <p ?hidden=${!this.open}>Content!</p>
+    `;
+  }
+  private async _notify() {
+    this.open = !this.open;
+    await this.updateComplete;
+    const name = this.open ? 'opened' : 'closed';
+    this.dispatchEvent(new CustomEvent(name, {bubbles: true, composed: true}));
+  }
+}

packages/lit-dev-content/site/_includes/projects/docs/components/events/update/my-listener.ts

@@ -0,0 +1,19 @@
+import { LitElement, html, property, customElement } from '@polymer/lit-element';
+
+@customElement('my-listener')
+class MyListener extends LitElement {
+  @property({type: String}) height: string|null = null;
+  protected render() {
+    return html`
+      <p @opened=${this._listener} @closed=${this._listener}><slot></slot></p>
+      <p>Height: ${this.height}px</p>`;
+  }
+  private _listener() {
+    this.height = null;
+  }
+  protected updated() {
+    if (this.height === null) {
+      requestAnimationFrame(() => this.height = this.getBoundingClientRect().height);
+    }
+  }
+}

packages/lit-dev-content/site/_includes/projects/docs/components/events/update/project.json

@@ -0,0 +1,7 @@
+{
+  "files": {
+    "my-dispatcher.ts": {},
+    "my-listener.ts": {},
+    "index.html": {}
+  }
+}