remove all references to label module

Author: hapticdata

dist/acc-components.js

@@ -18,7 +18,6 @@ import { NodeObserver, NodeObservation } from './types';
 import { OptgroupElement } from './optgroup';
 import { isElement } from '../utils';
 import { property } from "./decorators";
-import {getLabelTemplate} from "./label";
 
 //@ts-ignore
 const { FlattenedNodesObserver } = require('@polymer/polymer/lib/utils/flattened-nodes-observer.js');
@@ -49,9 +48,6 @@ export class AbstractSelectLitElement extends AbstractUIElement {
     @property({ type: Boolean })
     public hideLabel: boolean = false;
 
-    @property({ type: String })
-    public id:string;
-
     protected _nodeChildSelector = 'acc-item';
 
     /**
@@ -68,17 +64,9 @@ export class AbstractSelectLitElement extends AbstractUIElement {
      * this map is flattened to include all items nested in a group
      */
     protected _nodes:SelectableElement[] = [];
-    protected labelHtml:any;
 
     private __nodesObserver: NodeObserver;
 
-    _propertiesChanged(props:any, changed:any, prev:any){
-        super._propertiesChanged(props, changed, prev);
-        if (changed && changed.label) {
-            this.labelHtml = getLabelTemplate(changed.label, this.id);
-        }
-    }
-
     connectedCallback(){
         super.connectedCallback();
         this.__nodesObserver = new FlattenedNodesObserver(this, this._handleNodesObserverUpdate);

src/components/abstract-select.ts

@@ -1,7 +1,7 @@
 import autobind from 'autobind-decorator';
 import { setBooleanAttribute } from './../utils';
 import { KeyboardShortcutObserver } from './../keyboard-shortcut-observer';
-import { html, LitElement } from '@polymer/lit-element';
+import { LitElement } from '@polymer/lit-element';
 import { property } from './decorators';
 
 
@@ -11,7 +11,6 @@ export interface UIProperties {
     shortcut: string;
 }
 
-
 export class AbstractUIElement extends LitElement {
     /**
      * the label for the element, useful for display as well as screen readers

src/components/abstract-ui.ts

@@ -12,13 +12,10 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-import { backgroundColor, bodyFontFamily, labelColor } from './styles';
-import { isAbstractInputElement, AbstractInputElement } from './abstract-input';
+import { backgroundColor, bodyFontFamily, labelColor, labelStyleChunk } from './styles';
 import { html } from '@polymer/lit-element';
 import { SelectableElement, AbstractSelectLitElement } from './abstract-select';
-import { isElement } from '../utils';
 import { property } from './decorators';
-import {getLabelTemplate} from "./label";
 
 
 interface InputModeElement extends SelectableElement {
@@ -146,6 +143,8 @@ export class InputModeSelectElement extends AbstractSelectLitElement {
 
         return html`
         <style>
+            ${labelStyleChunk()}
+
             :host select, button {
                 font-size: 18px;
             }
@@ -214,7 +213,7 @@ export class InputModeSelectElement extends AbstractSelectLitElement {
             }
 
             </style>
-            ${getLabelTemplate('Tracking', 'select')}
+            <label for="select">Tracking</label>
             <div class="select-style">
                 <select class="accessibility-selector" on-input="${onSelectInput}" id="select">
                     ${this.items.map((node,i)=>{

src/components/input-mode-select.ts

@@ -1,3 +1,4 @@
+import { labelStyleChunk } from './styles';
 // Copyright 2018 Google LLC
 //
 // Licensed under the Apache License, Version 2.0 (the "License");
@@ -18,7 +19,6 @@ import { accentColor, labelColor } from './styles';
 import { AbstractUIElement } from './abstract-ui';
 import { html } from '@polymer/lit-element';
 import { property } from './decorators';
-import { getLabelTemplate } from "./label";
 
 const normalizeValue = (min:number, max:number, value:number) => {
     // console.log('calling normalize values for', name);
@@ -62,13 +62,6 @@ class RangeElement extends AbstractUIElement {
     @property({ type: Boolean })
     public inlineLabel:boolean = false;
 
-    protected labelHtml:any;
-
-
-    constructor(){
-        super();
-        this.labelHtml = html`0`;
-    }
 
     changeGradient(e:any) {
         this.value = e.currentTarget.value;
@@ -100,38 +93,30 @@ class RangeElement extends AbstractUIElement {
         super._handleShortcut();
     }
 
-    _propertiesChanged(props:any, changed:any, prev:any){
-        if(!changed){
-            return;
-        }
-        if (changed && changed.label) {
-            this.labelHtml = getLabelTemplate(changed.label, this.id);
-            this.requestRender();
-        }
-        super._propertiesChanged(props, changed, prev);
-    }
-
-    _render({ name, min, max, step, value }: RangeProperties){
+    _render({ label, name, min, max, step, value }: RangeProperties){
 
         const [minf, maxf, valuef] = [min, max, value].map(parseFloat);
 
         const inputHtml = html`
-            <input class="range-slider__range"
-               on-input=${(e:any) => this.changeGradient(e)}
-               id="${this.id}"
-               name="${name}"
-               type="range"
-               min="${min}"
-               max="${max}"
-               step="${step}"
-               disabled?="${this.disabled}"
-               aria-label="${name}"
-               value="${value}"></input>
-        `
+            <input
+                id="range-slider"
+                class="range-slider__range"
+                on-input=${(e:any) => this.changeGradient(e)}
+                name="${name}"
+                type="range"
+                min="${min}"
+                max="${max}"
+                step="${step}"
+                disabled?="${this.disabled}"
+                aria-label="${name}"
+                value="${value}"></input>
+        `;
 
         return html`
             <style>
 
+            ${labelStyleChunk()}
+
             :host([inline]), [inline] {
                 display: inline-block;
             }
@@ -154,9 +139,6 @@ class RangeElement extends AbstractUIElement {
                 align-self: flex-start;
             }
 
-
-
-
             input[type="range"]{
                 -webkit-appearance: none;
                 -moz-apperance: none;
@@ -234,7 +216,7 @@ class RangeElement extends AbstractUIElement {
             </style>
 
             <div class="range-slider">
-                ${this.labelHtml}
+                <label for="range-slider">${label}</label>
                 ${this.inlineLabel ? html`<span id="input-container">${inputHtml}</span>` : inputHtml}
             </div>
         `;

src/components/label.ts

@@ -75,4 +75,18 @@ export const iconSize = applyVariable('iconSize');
 
 export const fillColor = applyVariable('fillColor');
 
-export const outlineBorderColor = applyVariable('outlineBorderColor')
+export const outlineBorderColor = applyVariable('outlineBorderColor')
+
+
+
+export const labelStyleChunk = (selector: string= 'label') => `
+    ${selector} {
+        font-family: ${bodyFontFamily};
+        font-size: 18px;
+        padding: 0px 0px 20px 0px;
+        font-weight: 700;
+        text-transform: capitalize;
+        display: block;
+        cursor: pointer;
+        color: ${labelColor};
+    }`;