@api-client/ui 0.2.10 → 0.2.11

package/demo/md/buttons/icon-button.ts

@@ -1,184 +0,0 @@
-import { html, TemplateResult } from 'lit'
-import '../../../src/md/icon-button/ui-icon-button.js'
-import { DemoPage } from '../../../src/demo/DemoPage.js'
-import * as Icons from '../../../src/md/icons/Icons.js'
-import IconButtonElement from '../../../src/md/icon-button/internals/IconButton.js'
-
-class ComponentDemoPage extends DemoPage {
-  override accessor componentName = 'API icon button'
-
-  _clickHandler(e: Event): void {
-    const button = e.target as IconButtonElement
-    console.log(`A ${button.type} button was clicked.`)
-  }
-
-  _activeHandler(e: Event): void {
-    const button = e.target as IconButtonElement
-    console.log(`A ${button.type} button was ${button.active ? 'activated' : 'deactivated'}`)
-  }
-
-  contentTemplate(): TemplateResult {
-    return html`
-      <a href="../">Back</a>
-      <section class="demo-section">
-        <h2 class="title-large">Filled icon button</h2>
-        <div class="demo-row icons-demo-row">
-          <ui-icon-button
-            type="filled"
-            @click="${this._clickHandler}"
-            @active="${this._activeHandler}"
-            aria-label="Settings: standard filled button"
-            >${Icons.settings}</ui-icon-button
-          >
-          <ui-icon-button
-            type="filled"
-            toggle
-            @click="${this._clickHandler}"
-            @active="${this._activeHandler}"
-            aria-label="Settings: toggle filled button"
-            >${Icons.settings}</ui-icon-button
-          >
-          <ui-icon-button
-            type="filled"
-            toggle
-            active
-            @click="${this._clickHandler}"
-            @active="${this._activeHandler}"
-            aria-label="Settings: toggle, active filled button"
-            >${Icons.settings}</ui-icon-button
-          >
-          <ui-icon-button
-            type="filled"
-            disabled
-            @click="${this._clickHandler}"
-            @active="${this._activeHandler}"
-            aria-label="Settings: disabled filled button"
-            >${Icons.settings}</ui-icon-button
-          >
-
-          <p class="label-large">No toggle</p>
-          <p class="label-large">Toggle (unselected)</p>
-          <p class="label-large">Toggle (selected)</p>
-          <p class="label-large">Disabled</p>
-        </div>
-      </section>
-
-      <section class="demo-section">
-        <h2 class="title-large">Filled tonal icon button</h2>
-        <div class="demo-row icons-demo-row">
-          <ui-icon-button
-            type="tonal"
-            @click="${this._clickHandler}"
-            @active="${this._activeHandler}"
-            aria-label="Settings: standard tonal button"
-            >${Icons.settings}</ui-icon-button
-          >
-          <ui-icon-button
-            type="tonal"
-            toggle
-            @click="${this._clickHandler}"
-            @active="${this._activeHandler}"
-            aria-label="Settings: toggle tonal button"
-            >${Icons.settings}</ui-icon-button
-          >
-          <ui-icon-button
-            type="tonal"
-            active
-            toggle
-            @click="${this._clickHandler}"
-            @active="${this._activeHandler}"
-            aria-label="Settings: toggle, active tonal button"
-            >${Icons.settings}</ui-icon-button
-          >
-          <ui-icon-button
-            type="tonal"
-            disabled
-            @click="${this._clickHandler}"
-            @active="${this._activeHandler}"
-            aria-label="Settings: disabled tonal button"
-            >${Icons.settings}</ui-icon-button
-          >
-
-          <p class="label-large">No toggle</p>
-          <p class="label-large">Toggle (unselected)</p>
-          <p class="label-large">Toggle (selected)</p>
-          <p class="label-large">Disabled</p>
-        </div>
-      </section>
-
-      <section class="demo-section">
-        <h2 class="title-large">Outlined icon button</h2>
-        <div class="demo-row icons-demo-row">
-          <ui-icon-button
-            type="outlined"
-            @click="${this._clickHandler}"
-            @active="${this._activeHandler}"
-            aria-labelledby="iont"
-            >${Icons.settings}</ui-icon-button
-          >
-          <ui-icon-button
-            type="outlined"
-            toggle
-            @click="${this._clickHandler}"
-            @active="${this._activeHandler}"
-            aria-labelledby="iotu"
-            >${Icons.settings}</ui-icon-button
-          >
-          <ui-icon-button
-            type="outlined"
-            active
-            toggle
-            @click="${this._clickHandler}"
-            @active="${this._activeHandler}"
-            aria-labelledby="iots"
-            >${Icons.settings}</ui-icon-button
-          >
-          <ui-icon-button
-            type="outlined"
-            disabled
-            @click="${this._clickHandler}"
-            @active="${this._activeHandler}"
-            aria-labelledby="iod"
-            >${Icons.settings}</ui-icon-button
-          >
-
-          <p class="label-large" id="iont">No toggle</p>
-          <p class="label-large" id="iotu">Toggle (unselected)</p>
-          <p class="label-large" id="iots">Toggle (selected)</p>
-          <p class="label-large" id="iod">Disabled</p>
-        </div>
-      </section>
-
-      <section class="demo-section">
-        <h2 class="title-large">Standard icon button</h2>
-        <div class="demo-row icons-demo-row">
-          <ui-icon-button @click="${this._clickHandler}" @active="${this._activeHandler}" aria-labelledby="isnt"
-            >${Icons.settings}</ui-icon-button
-          >
-          <ui-icon-button toggle @click="${this._clickHandler}" @active="${this._activeHandler}" aria-labelledby="istu"
-            >${Icons.settings}</ui-icon-button
-          >
-          <ui-icon-button
-            toggle
-            active
-            @click="${this._clickHandler}"
-            @active="${this._activeHandler}"
-            aria-labelledby="ists"
-            >${Icons.settings}</ui-icon-button
-          >
-          <ui-icon-button disabled @click="${this._clickHandler}" @active="${this._activeHandler}" aria-labelledby="isd"
-            >${Icons.settings}</ui-icon-button
-          >
-
-          <p class="label-large" id="isnt">No toggle</p>
-          <p class="label-large" id="istu">Toggle (unselected)</p>
-          <p class="label-large" id="ists">Toggle (selected)</p>
-          <p class="label-large" id="isd">Disabled</p>
-        </div>
-      </section>
-    `
-  }
-}
-
-const instance = new ComponentDemoPage()
-instance.render()