@pictogrammers/components 0.3.2 → 0.4.0

package/pg/menu/menu.ts

@@ -0,0 +1,119 @@
+import { Component, Prop, Part, forEach } from '@pictogrammers/element';
+import PgMenuItem from '../menuItem/menuItem';
+
+import template from './menu.html';
+import style from './menu.css';
+
+const noIcon = 'M0 0h24v24H0V0zm2 2v20h20V2H2z';
+
+@Component({
+  selector: 'pg-menu',
+  style,
+  template
+})
+export default class PgMenu extends HTMLElement {
+
+  @Prop() items: any[] = [];
+
+  @Part() $items: HTMLDivElement;
+
+  connectedCallback() {
+    forEach({
+      container: this.$items,
+      items: this.items,
+      type: (item) => {
+        return item.type ?? PgMenuItem;
+      },
+      create: ($item: any, item) => {
+        $item.addEventListener('close', (e: any) => {
+          const { depth } = e.detail;
+          this.dispatchEvent(new CustomEvent('close', {
+            detail: {
+              depth
+            }
+          }));
+        });
+        $item.addEventListener('select', (e: any) => {
+          const { index } = e.detail;
+          this.dispatchEvent(new CustomEvent('select', {
+            detail: {
+              indexes: [index],
+              item
+            }
+          }));
+        });
+        $item.addEventListener('up', (e: any) => {
+          const { index } = e.detail;
+          this.#focus(index - 1, -1, index);
+        });
+        $item.addEventListener('down', (e: any) => {
+          const { index } = e.detail;
+          this.#focus(index + 1, 1, index);
+        });
+      }
+    });
+    this.$items.addEventListener('hasCheck', (e: any) => {
+      e.stopPropagation();
+      this.$items.classList.toggle('check', true);
+    });
+  }
+
+  #focus(index, fallback, initIndex) {
+    if (index === initIndex) {
+      return;
+    }
+    if (index === -1) {
+      return this.#focus(this.items.length - 1, fallback, initIndex);
+    }
+    if (index >= this.items.length) {
+      return this.#focus(0, fallback, initIndex);
+    }
+    const item = this.$items.children[index] as any;
+    if (item.focusable === false || this.items[index].disabled) {
+      return this.#focus(index + fallback, fallback, initIndex);
+    }
+    item?.focus();
+  }
+
+  focus(index) {
+    if (index === -1) {
+      this.#focus(0, 1, this.items.length - 1);
+    } else {
+      const item = this.$items.children[index] as HTMLElement;
+      item?.focus();
+    }
+  }
+
+  /**
+   * Calculate height of items + gap + padding
+   * @param startIndex Start index.
+   * @param endIndex End index.
+   */
+  getItemOffset(startIndex, endIndex): number {
+    const computedStyle = getComputedStyle(this.$items);
+    let height = parseInt(computedStyle.getPropertyValue('padding-top'), 10);
+    const total = this.items.length;
+    if (startIndex > total || endIndex > total) {
+      throw new Error('startIndex or endIndex not within range of items');
+    }
+    for (let i = startIndex; i < endIndex; i++) {
+      const ele = this.$items.children[i] as any;
+      height += ele.getHeight();
+    }
+    return height;
+  }
+
+  /**
+   * Get the height of an individiaual item.
+   * @param index Item index
+   * @returns {number} Item height
+   */
+  getItemHeight(index) {
+    if (index > this.items.length) {
+      throw new Error('index outside range of items');
+    }
+    const ele = this.$items.children[index] as any;
+    return ele.getHeight();
+  }
+
+}

package/pg/menuDivider/README.md

@@ -0,0 +1,7 @@
+# `<pg-menu-divider>`
+
+The `PgMenuDivider` is used as a `type: PgMenuDivider` with the `pg-menu` component items.
+
+```typescript
+import '@pictogrammers/components/pgMenuDivider.js';
+```

package/pg/menuDivider/__examples__/basic/basic.html

@@ -0,0 +1,3 @@
+<div class="example">
+  <pg-menu part="menu"></pg-menu>
+</div>

package/pg/menuDivider/__examples__/basic/basic.ts

@@ -0,0 +1,28 @@
+import { Component, Part, Prop } from '@pictogrammers/element';
+
+import PgMenu from '../../../menu/menu';
+import PgMenuDivider from '../../menuDivider';
+
+import template from './basic.html';
+
+@Component({
+  selector: 'x-pg-menu-divider-basic',
+  template
+})
+export default class XPgMenuDividerBasic extends HTMLElement {
+  @Part() $menu: PgMenu;
+
+  connectedCallback() {
+    this.$menu.items = [{
+      label: 'Item 1',
+      value: 'item1'
+    },
+    {
+      type: PgMenuDivider
+    },
+    {
+      label: 'Item 2',
+      value: 'item2'
+    }];
+  }
+}

package/pg/menuDivider/index.ts

@@ -0,0 +1,3 @@
+import PgMenuDivider from './menuDivider';
+
+export default PgMenuDivider;

package/pg/menuDivider/menuDivider.css

@@ -0,0 +1,9 @@
+:host {
+  display: contents;
+}
+
+[part=divider] {
+  margin-top: 0.25rem;
+  border-top: 1px solid var(--pg-menu-divider-color, rgba(69, 60, 79, 0.5));
+  margin-bottom: 0.25rem;
+}

package/pg/menuDivider/menuDivider.html

@@ -0,0 +1 @@
+<div part="divider"></div>

package/pg/menuDivider/menuDivider.ts

@@ -0,0 +1,22 @@
+import { Component, Prop, Part } from '@pictogrammers/element';
+
+import template from './menuDivider.html';
+import style from './menuDivider.css';
+
+@Component({
+  selector: 'pg-menu-divider',
+  style,
+  template
+})
+export default class PgMenuDivider extends HTMLElement {
+  @Prop() focusable = false;
+
+  @Part() $divider: HTMLDivElement;
+
+  getHeight(): number {
+    const computedStyle = window.getComputedStyle(this.$divider);
+    const marginTop = parseFloat(computedStyle.marginTop);
+    const marginBottom = parseFloat(computedStyle.marginBottom);
+    return this.$divider.getBoundingClientRect().height + marginTop + marginBottom;
+  }
+}

package/pg/menuIcon/menuIcon.ts

@@ -38,31 +38,33 @@ export default class PgMenuIcon extends HTMLElement {
   @Part() $colorPicker: any;
   @Part() $colorHexRgb: any;
 
-  @Local('#000000') cachePngColor: string;
-  @Local('24') cachePngSize: string;
-  @Local('#000000') cacheSvgColor: string;
+  @Local('store') store = new Map<string, any>([
+    ['cachePngColor', '#000000'],
+    ['cachePngSize', 24],
+    ['cacheSvgColor', '#000000']
+  ]);
 
   color = 'svg';
-  @Prop() currentIndex: 0;
+  @Prop() currentIndex: number = 0;
   @Prop() icon: Icon = new Icon();
 
   connectedCallback() {
     // Wire Up Context Menu
     this.$copyIconName.addEventListener('click', this.handleCopyIconName.bind(this));
     this.$svgBlack.addEventListener('click', () => {
-      this.cacheSvgColor = '#000000';
+      this.store.set('cacheSvgColor', '#000000');
       this.render();
     });
     this.$svgWhite.addEventListener('click', () => {
-      this.cacheSvgColor = '#FFFFFF';
+      this.store.set('cacheSvgColor', '#FFFFFF');
       this.render();
     });
     let preventSvgColor = false;
     this.$svgColor.addEventListener('click', () => {
       if (preventSvgColor) { preventSvgColor = false; return; }
       this.color = 'svg';
-      this.$colorPicker.value = this.cacheSvgColor;
-      this.$colorHexRgb.value = this.cacheSvgColor;
+      this.$colorPicker.value = this.store.get('cacheSvgColor');
+      this.$colorHexRgb.value = this.store.get('cacheSvgColor');
       const self = this;
       //createPopper(this.$svgColor, this.$color, {
       //  placement: 'bottom-start'
@@ -83,19 +85,19 @@ export default class PgMenuIcon extends HTMLElement {
       document.addEventListener('mousedown', handleMouseDown);
     });
     this.$pngBlack.addEventListener('click', () => {
-      this.cachePngColor = '#000000';
+      this.store.set('cachePngColor', '#000000');
       this.render();
     });
     this.$pngWhite.addEventListener('click', () => {
-      this.cachePngColor = '#FFFFFF';
+      this.store.set('cachePngColor', '#FFFFFF');
       this.render();
     });
     let preventPngColor = false;
     this.$pngColor.addEventListener('click', () => {
       if (preventPngColor) { preventPngColor = false; return; }
       this.color = 'png';
-      this.$colorPicker.value = this.cachePngColor;
-      this.$colorHexRgb.value = this.cachePngColor;
+      this.$colorPicker.value = this.store.get('cachePngColor');
+      this.$colorHexRgb.value = this.store.get('cachePngColor');
       const self = this;
       //createPopper(this.$pngColor, this.$color, {
       //  placement: 'bottom-start'
@@ -116,26 +118,26 @@ export default class PgMenuIcon extends HTMLElement {
       document.addEventListener('mousedown', handleMouseDown);
     });
     this.$png24.addEventListener('click', () => {
-      this.cachePngSize = '24';
+      this.store.set('cachePngSize', 24);
       this.render();
     });
     this.$png36.addEventListener('click', () => {
-      this.cachePngSize = '36';
+      this.store.set('cachePngSize', 36);
       this.render();
     });
     this.$png48.addEventListener('click', () => {
-      this.cachePngSize = '48';
+      this.store.set('cachePngSize', 48);
       this.render();
     });
     this.$png96.addEventListener('click', () => {
-      this.cachePngSize = '96';
+      this.store.set('cachePngSize', 96);
       this.render();
     });
     this.$svgDownload.addEventListener('click', () => {
-      alert(`SVG ${this.cacheSvgColor}`);
+      alert(`SVG ${this.store.get('cacheSvgColor')}`);
     });
     this.$pngDownload.addEventListener('click', () => {
-      alert(`SVG ${this.cachePngSize} ${this.cachePngColor}`);
+      alert(`SVG ${this.store.get('cachePngSize')} ${this.store.get('cachePngColor')}`);
     });
     this.$copySvgInline.addEventListener('click', () => {
       const icon = this.icon;
@@ -214,16 +216,19 @@ export default class PgMenuIcon extends HTMLElement {
 
   render() {
     // Context Menu
-    this.$svgBlack.classList.toggle('active', this.cacheSvgColor === '#000000');
-    this.$svgWhite.classList.toggle('active', this.cacheSvgColor === '#FFFFFF');
-    this.$svgColor.classList.toggle('active', this.cacheSvgColor !== '#000000' && this.cacheSvgColor !== '#FFFFFF');
-    this.$pngBlack.classList.toggle('active', this.cachePngColor === '#000000');
-    this.$pngWhite.classList.toggle('active', this.cachePngColor === '#FFFFFF');
-    this.$pngColor.classList.toggle('active', this.cachePngColor !== '#000000' && this.cachePngColor !== '#FFFFFF');
-    this.$png24.classList.toggle('active', this.cachePngSize === '24');
-    this.$png36.classList.toggle('active', this.cachePngSize === '36');
-    this.$png48.classList.toggle('active', this.cachePngSize === '48');
-    this.$png96.classList.toggle('active', this.cachePngSize === '96');
+    const cacheSvgColor = this.store.get('cacheSvgColor');
+    const cachePngColor = this.store.get('cachePngColor');
+    const cachePngSize = this.store.get('cachePngSize');
+    this.$svgBlack.classList.toggle('active', cacheSvgColor === '#000000');
+    this.$svgWhite.classList.toggle('active', cacheSvgColor === '#FFFFFF');
+    this.$svgColor.classList.toggle('active', cacheSvgColor !== '#000000' && cacheSvgColor !== '#FFFFFF');
+    this.$pngBlack.classList.toggle('active', cachePngColor === '#000000');
+    this.$pngWhite.classList.toggle('active', cachePngColor === '#FFFFFF');
+    this.$pngColor.classList.toggle('active', cachePngColor !== '#000000' && cachePngColor !== '#FFFFFF');
+    this.$png24.classList.toggle('active', cachePngSize === 24);
+    this.$png36.classList.toggle('active', cachePngSize === 36);
+    this.$png48.classList.toggle('active', cachePngSize === 48);
+    this.$png96.classList.toggle('active', cachePngSize === 96);
     this.$colorPicker.addEventListener('select', this.handleColorSelect.bind(this));
     this.$colorHexRgb.addEventListener('change', this.handleHexRgbChange.bind(this));
     this.syncEyedropper();
@@ -232,10 +237,10 @@ export default class PgMenuIcon extends HTMLElement {
   handleColorSelect(e) {
     switch(this.color) {
       case 'svg':
-        this.cacheSvgColor = e.detail.hex;
+        this.store.set('cacheSvgColor', e.detail.hex);
         break;
       case 'png':
-        this.cachePngColor = e.detail.hex;
+        this.store.set('cachePngColor', e.detail.hex);
         break;
     }
     this.$colorHexRgb.value = e.detail.hex;
@@ -245,10 +250,10 @@ export default class PgMenuIcon extends HTMLElement {
   handleHexRgbChange(e) {
     switch(this.color) {
       case 'svg':
-        this.cacheSvgColor = e.detail.hex;
+        this.store.set('cacheSvgColor', e.detail.hex);
         break;
       case 'png':
-        this.cachePngColor = e.detail.hex;
+        this.store.set('cachePngColor', e.detail.hex);
         break;
     }
     this.$colorPicker.value = e.detail.hex;
@@ -256,13 +261,15 @@ export default class PgMenuIcon extends HTMLElement {
   }
 
   syncEyedropper() {
-    if (this.cachePngColor !== '#000000' && this.cachePngColor !== '#FFFFFF') {
-      this.$pngColor.style.color = this.cachePngColor;
+    const cachePngColor = this.store.get('cachePngColor');
+    if (cachePngColor !== '#000000' && cachePngColor !== '#FFFFFF') {
+      this.$pngColor.style.color = cachePngColor;
     } else {
       this.$pngColor.style.color = 'transparent';
     }
-    if (this.cacheSvgColor !== '#000000' && this.cacheSvgColor !== '#FFFFFF') {
-      this.$svgColor.style.color = this.cacheSvgColor;
+    const cacheSvgColor = this.store.get('cacheSvgColor');
+    if (cacheSvgColor !== '#000000' && cacheSvgColor !== '#FFFFFF') {
+      this.$svgColor.style.color = cacheSvgColor;
     } else {
       this.$svgColor.style.color = 'transparent';
     }

package/pg/menuItem/README.md

@@ -0,0 +1,32 @@
+# `<pg-menu>`
+
+The `PgMenuItem` is used with the `pg-menu` as a `type: PgMenuItem`.
+
+For icon support use `PgMenuItemIcon`.
+
+## Usage
+
+```typescript
+import '@pictogrammers/components/pgMenuItem.js';
+```
+
+```typescript
+this.$items = [{
+  type: PgMenuItem,
+  label: 'Item 1'
+}];
+```
+
+| Attributes | Tested   | Description |
+| ---------- | -------- | ----------- |
+| `label`    |          | Item label. |
+| `checked`  |          | Item checked. |
+| `disabled` |          | Item disabled. |
+
+## Events
+
+```typescript
+this.$item.addEventListener('select', (e: any) => {
+  const { index } = e.detail;
+});
+```

package/pg/menuItem/__examples__/basic/basic.html

@@ -0,0 +1,26 @@
+<div class="example">
+  <pg-menu-item part="item"></pg-menu-item>
+</div>
+<div>
+  <table style="border: 1px solid #ddd;margin-block-start: 0.5rem;">
+    <thead>
+      <tr>
+        <th>Property</th>
+        <th>Value</th>
+        <th>&nbsp;</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr>
+        <td><code>checked</code></td>
+        <td part="checkedValue"></td>
+        <td><input part="checkedToggle" type="checkbox"/></td>
+      </tr>
+      <tr>
+        <td><code>disabled</code></td>
+        <td part="disabledValue"></td>
+        <td><input part="disabledToggle" type="checkbox"/></td>
+      </tr>
+    </tbody>
+  </table>
+</div>

package/pg/menuItem/__examples__/basic/basic.ts

@@ -0,0 +1,41 @@
+import { Component, Part } from '@pictogrammers/element';
+
+import PgMenuItem from '../../menuItem';
+
+import template from './basic.html';
+
+@Component({
+  selector: 'x-pg-menu-item-basic',
+  template
+})
+export default class XPgMenuItemBasic extends HTMLElement {
+  @Part() $item: PgMenuItem;
+  @Part() $checkedToggle: HTMLInputElement;
+  @Part() $disabledToggle: HTMLInputElement;
+  @Part() $checkedValue: HTMLDivElement;
+  @Part() $disabledValue: HTMLDivElement;
+
+  connectedCallback() {
+    this.$item.label = 'Item 1';
+    this.$item.checked = false;
+    this.$item.disabled = false;
+
+    this.$checkedValue.textContent = `${this.$item.checked}`;
+    this.$disabledValue.textContent = `${this.$item.disabled}`;
+
+    this.$item.addEventListener('select', (e: any) => {
+      this.$checkedToggle.checked = e.target.checked;
+      this.$checkedValue.textContent = `${this.$item.checked}`;
+    });
+
+    this.$checkedToggle.addEventListener('change', (e: any) => {
+      this.$item.checked = e.target.checked;
+      this.$checkedValue.textContent = `${this.$item.checked}`;
+    });
+
+    this.$disabledToggle.addEventListener('change', (e: any) => {
+      this.$item.disabled = e.target.checked;
+      this.$disabledValue.textContent = `${this.$item.disabled}`;
+    });
+  }
+}

package/pg/menuItem/index.ts

@@ -0,0 +1,3 @@
+import PgMenuItem from './menuItem';
+
+export default PgMenuItem;

package/pg/menuItem/menuItem.css

@@ -0,0 +1,97 @@
+:host {
+  display: contents;
+}
+
+[part=label] {
+  outline: none;
+  display: flex;
+  align-items: center;
+  font-family: var(--pg-font-family);
+  text-align: var(--pg-menu-item-text-align, left);
+  background: var(--pg-menu-item-background, transparent);
+  padding: var(--pg-menu-item-padding, 0.25rem 0.5rem 0.25rem 0.5rem);
+  border-color: transparent;
+  border-width: 0;
+  border-style: solid;
+  border-top-left-radius: var(--pg-menu-item-border-radius-top, 0.25rem);
+  border-top-right-radius: var(--pg-menu-item-border-radius-top, 0.25rem);
+  border-bottom-left-radius: var(--pg-menu-item-border-radius-bottom, 0.25rem);
+  border-bottom-right-radius: var(--pg-menu-item-border-radius-bottom, 0.25rem);
+  color: var(--pg-menu-item-color, #453C4F);
+}
+
+[part=label]:not(:disabled):active,
+[part=label]:not(:disabled):hover {
+  background: var(--pg-menu-item-selected-background, #453C4F);
+  color: #FFFFFF;
+}
+
+[part=label]:not(:disabled):active {
+  background: var(--pg-menu-item-active-background, #5f516e);
+}
+
+[part=label]:disabled {
+  color: var(--pg-menu-item-disabled-color, rgb(69, 60, 79, 0.75));
+}
+
+@container style(--pg-menu-_has-check: true) {
+  [part=label] {
+    padding-inline-start: 1.5rem;
+  }
+
+  [part=label].checked::before {
+    position: absolute;
+    translate: -1.5rem 0;
+    content: var(--pg-menu-item-check, url("data:image/svg+xml; utf8, <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M 17.5,10.2501L 10.5,17.25L 6.5,13.25L 7.9,11.8L 10.5,14.4L 16.0857,8.8L 17.5,10.25Z' fill='rgb(69, 60, 79)' /></svg>"));
+    width: 1.5rem;
+    height: 1.5rem;
+  }
+
+  [part=label].checked:active::before,
+  [part=label].checked:hover::before {
+    content: var(--pg-menu-item-hover-check, url("data:image/svg+xml; utf8, <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M 17.5,10.2501L 10.5,17.25L 6.5,13.25L 7.9,11.8L 10.5,14.4L 16.0857,8.8L 17.5,10.25Z' fill='white' /></svg>"));
+  }
+
+  [part=label].checked:disabled::before {
+    content: var(--pg-menu-item-disabled-check, url("data:image/svg+xml; utf8, <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M 17.5,10.2501L 10.5,17.25L 6.5,13.25L 7.9,11.8L 10.5,14.4L 16.0857,8.8L 17.5,10.25Z' fill='rgb(69, 60, 79, 0.5)' /></svg>"));
+  }
+}
+
+[part=label]:focus-visible {
+  position: relative;
+}
+
+[part=label]:focus-visible::after {
+  pointer-events: none;
+  content: '';
+  position: absolute;
+  top: -1px;
+  right: -1px;
+  bottom: -1px;
+  left: -1px;
+  border-radius: 0.25rem;
+  box-shadow: 0 0 0 3px var(--pg-focus-color, rgb(79, 143, 249, 0.5));
+}
+
+[part=label]:focus-visible:not(:hover)::after {
+  background: var(--pg-focus-background-color, rgb(79, 143, 249, 0.1));
+}
+
+
+[part=label].more::after {
+  position: absolute;
+  translate: -0.5rem 0;
+  right: 0;
+  content: var(--pg-menu-item-check, url("data:image/svg+xml; utf8, <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M8.59,16.58L13.17,12L8.59,7.41L10,6L16,12L10,18L8.59,16.58Z' fill='rgb(69, 60, 79)' /></svg>"));
+  width: 1.5rem;
+  height: 1.5rem;
+}
+
+[part=label].more:active::after,
+[part=label].more:hover::after {
+  content: var(--pg-menu-item-hover-check, url("data:image/svg+xml; utf8, <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M8.59,16.58L13.17,12L8.59,7.41L10,6L16,12L10,18L8.59,16.58Z' fill='white' /></svg>"));
+}
+
+[part=label].more:disabled::after {
+  content: var(--pg-menu-item-disabled-check, url("data:image/svg+xml; utf8, <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M8.59,16.58L13.17,12L8.59,7.41L10,6L16,12L10,18L8.59,16.58Z' fill='rgb(69, 60, 79, 0.5)' /></svg>"));
+}

package/pg/menuItem/menuItem.html

@@ -0,0 +1 @@
+<button part="label"></button>

package/pg/menuItem/menuItem.ts

@@ -0,0 +1,77 @@
+import { Component, Prop, Part, forEach } from '@pictogrammers/element';
+
+import template from './menuItem.html';
+import style from './menuItem.css';
+
+const noIcon = 'M0 0h24v24H0V0zm2 2v20h20V2H2z';
+
+@Component({
+  selector: 'pg-menu-item',
+  style,
+  template
+})
+export default class PgMenuItem extends HTMLElement {
+  static delegatesFocus = true;
+
+  @Prop() index: number;
+  @Prop() label: string = '';
+  @Prop() checked: boolean = false;
+  @Prop() disabled: boolean = false;
+  @Prop() items: any[] = [];
+
+  @Part() $label: HTMLButtonElement;
+
+  render(changes) {
+    if (changes.label) {
+      this.$label.textContent = this.label;
+    }
+    if (changes.disabled) {
+      this.$label.disabled = this.disabled;
+    }
+    if (changes.checked) {
+      this.$label.classList.toggle('checked', this.checked);
+    }
+    if (changes.checked) {
+      if (this.checked === true) {
+        this.dispatchEvent(new CustomEvent('hasCheck', { bubbles: true }));
+      }
+    }
+  }
+
+  connectedCallback() {
+    this.$label.addEventListener('click', () => {
+      this.dispatchEvent(new CustomEvent('select', {
+        detail: { index: this.index }
+      }));
+    });
+    this.$label.addEventListener('keydown', (e: KeyboardEvent) => {
+      switch (e.key) {
+        case 'ArrowDown':
+          this.dispatchEvent(new CustomEvent('down', {
+            detail: { index: this.index }
+          }));
+          e.preventDefault();
+          break;
+        case 'ArrowUp':
+          this.dispatchEvent(new CustomEvent('up', {
+            detail: { index: this.index }
+          }));
+          e.preventDefault();
+          break;
+        case 'Escape':
+          this.dispatchEvent(new CustomEvent('close'));
+          e.preventDefault();
+          break;
+      }
+    });
+  }
+
+  focus() {
+    this.$label.focus();
+  }
+
+  getHeight(): number {
+    return this.$label.getBoundingClientRect().height;
+  }
+
+}