add hidelabel attr to abstract-select, support in input-mode-select

hapticdata · hapticdata · commit b2f76a76e88b · 2018-11-05T02:13:27.000-05:00
rename AbstractSelectLitElement to AbstractSelectElement
diff --git a/example.html b/example.html
@@ -33,8 +33,8 @@
 <body>
 
 <acc-side-panel label="Components">
-    <acc-group label="Tracking Group" hidelabel>
-        <acc-input-mode-select contentselector="#main-content">
+    <acc-group label="Tracking">
+        <acc-input-mode-select contentselector="#main-content" hidelabel>
             <acc-mouse-input amplification="10" label="Custom Mouse/Keyboard"></acc-mouse-input>
             <acc-pose-input amplification="2" smoothing="0.5"></acc-pose-input>
         </acc-input-mode-select>
diff --git a/src/components/abstract-select.ts b/src/components/abstract-select.ts
@@ -1,3 +1,4 @@
+import { UIProperties } from './abstract-ui';
 // Copyright 2018 Google LLC
 //
 // Licensed under the Apache License, Version 2.0 (the "License");
@@ -23,6 +24,10 @@ import { property } from "./decorators";
 const { FlattenedNodesObserver } = require('@polymer/polymer/lib/utils/flattened-nodes-observer.js');
 
 
+export interface SelectProperties extends UIProperties {
+    hideLabel: boolean;
+}
+
 export interface SelectableElement extends Element {
     selected:boolean;
     value:string;
@@ -40,7 +45,7 @@ export const isSelectableElement = (el:any): el is SelectableElement =>
  * AbstractSelectLitElement is an Abstract class and therefore should always be extended
  * This class manages the [selected] attribute state of all children added into its slot
  */
-export class AbstractSelectLitElement extends AbstractUIElement {
+export class AbstractSelectElement extends AbstractUIElement {
 
     /**
      * hide the label visually, only provide to aria
diff --git a/src/components/input-mode-select.ts b/src/components/input-mode-select.ts
@@ -14,7 +14,7 @@
 
 import { backgroundColor, bodyFontFamily, labelColor, labelStyleChunk } from './styles';
 import { html } from '@polymer/lit-element';
-import { SelectableElement, AbstractSelectLitElement } from './abstract-select';
+import { SelectableElement, AbstractSelectElement, SelectProperties } from './abstract-select';
 import { property } from './decorators';
 
 
@@ -37,33 +37,22 @@ interface UIElements {
  * Creates a UI element for selecting an appropriate input method,
  * bundles proper initialization, event bubbling, access to calibration
  * and messaging.
- * @extends AbstractSelectLitElement
+ * @extends AbstractSelectElement
  */
-export class InputModeSelectElement extends AbstractSelectLitElement {
+export class InputModeSelectElement extends AbstractSelectElement {
 
     /**
      * provide a selector for the content element the input is applied to
      */
     @property({ type: String })
     public contentSelector:string = 'body'; //'acc-content';
 
-
-    @property({ type: String})
-    public label:string = '';
-
     constructor() {
         super();
         this._nodeChildSelector = '*';
+        this.label = this.label || 'Tracking';
     }
 
-    // focus() {
-    //     super.focus();
-    //     const select = this.shadowRoot.querySelector('select');
-    //     if(select) {
-    //         select.focus();
-    //     }
-    // }
-
 
     set contentElement(element: HTMLElement | null) {
         this.items.forEach(item => {
@@ -131,7 +120,7 @@ export class InputModeSelectElement extends AbstractSelectLitElement {
         super._addNode(node);
     }
 
-    _render({label}:UIElements){
+    _render({label, hideLabel}: SelectProperties){
         const sI = this.selectedIndex;
         const hasControls = this.selected && this.selected.hasControls;
 
@@ -213,9 +202,9 @@ export class InputModeSelectElement extends AbstractSelectLitElement {
             }
 
             </style>
-            <label for="select">Tracking</label>
+            ${hideLabel ? '' : html`<label for="select">${label}</label>`}
             <div class="select-style">
-                <select class="accessibility-selector" on-input="${onSelectInput}" id="select">
+                <select class="accessibility-selector" on-input="${onSelectInput}" id="select" aria-label$="${label}">
                     ${this.items.map((node,i)=>{
                         const isSelected = i === sI;
                         return html`<option value="${node.inputType}" selected="${isSelected}">${node.label}</option>`;
diff --git a/src/components/select.ts b/src/components/select.ts
@@ -14,7 +14,7 @@
 
 import autobind from 'autobind-decorator';
 import { backgroundColor, bodyFontFamily, labelColor } from './styles';
-import { SelectableElement, AbstractSelectLitElement, isOptgroupElement } from './abstract-select';
+import { SelectableElement, AbstractSelectElement, isOptgroupElement } from './abstract-select';
 import { OptgroupElement } from './optgroup';
 
 import { html } from '@polymer/lit-element';
@@ -42,10 +42,7 @@ const toOptionTemplate = (node: OptionItem) =>
 
 
 
-export class SelectElement extends AbstractSelectLitElement  {
-
-
-    protected labelHtml:any;
+export class SelectElement extends AbstractSelectElement  {
 
 
     get items(): OptionItem[] {
