move emby-webcomponents to components and reflect paths

src/components/emby-input/emby-input.css

@@ -0,0 +1,40 @@
+.emby-input {
+    display: block;
+    margin: 0;
+    margin-bottom: 0 !important;
+    /* Remove select styling */
+    /* Font size must the 16px or larger to prevent iOS page zoom on focus */
+    font-size: 110%;
+    /* General select styles: change as needed */
+    font-family: inherit;
+    font-weight: inherit;
+    padding: .4em .25em;
+    /* Prevent padding from causing width overflow */
+    -webkit-box-sizing: border-box;
+    box-sizing: border-box;
+    outline: none !important;
+    -webkit-tap-highlight-color: rgba(0,0,0,0);
+    width: 100%;
+}
+
+    .emby-input::-moz-focus-inner {
+        border: 0;
+    }
+
+.inputContainer {
+    margin-bottom: 1.8em;
+}
+
+.inputLabel {
+    display: inline-block;
+    margin-bottom: .25em;
+}
+
+.emby-input + .fieldDescription {
+    margin-top: .25em;
+}
+
+.emby-input-iconbutton {
+    -webkit-align-self: flex-end;
+    align-self: flex-end;
+}

src/components/emby-input/emby-input.js

@@ -0,0 +1,125 @@
+define(['layoutManager', 'browser', 'dom', 'css!./emby-input', 'registerElement'], function (layoutManager, browser, dom) {
+    'use strict';
+
+    var EmbyInputPrototype = Object.create(HTMLInputElement.prototype);
+
+    var inputId = 0;
+    var supportsFloatingLabel = false;
+
+    if (Object.getOwnPropertyDescriptor && Object.defineProperty) {
+
+        var descriptor = Object.getOwnPropertyDescriptor(HTMLInputElement.prototype, 'value');
+
+        // descriptor returning null in webos
+        if (descriptor && descriptor.configurable) {
+            var baseSetMethod = descriptor.set;
+            descriptor.set = function (value) {
+                baseSetMethod.call(this, value);
+
+                this.dispatchEvent(new CustomEvent('valueset', {
+                    bubbles: false,
+                    cancelable: false
+                }));
+            };
+
+            Object.defineProperty(HTMLInputElement.prototype, 'value', descriptor);
+            supportsFloatingLabel = true;
+        }
+    }
+
+    EmbyInputPrototype.createdCallback = function () {
+
+        if (!this.id) {
+            this.id = 'embyinput' + inputId;
+            inputId++;
+        } if (this.classList.contains('emby-input')) {
+            return;
+        }
+
+        this.classList.add('emby-input');
+
+        var parentNode = this.parentNode;
+        var document = this.ownerDocument;
+        var label = document.createElement('label');
+        label.innerHTML = this.getAttribute('label') || '';
+        label.classList.add('inputLabel');
+        label.classList.add('inputLabelUnfocused');
+
+        label.htmlFor = this.id;
+        parentNode.insertBefore(label, this);
+        this.labelElement = label;
+
+        dom.addEventListener(this, 'focus', function () {
+            onChange.call(this);
+
+            // For Samsung orsay devices
+            if (document.attachIME) {
+                document.attachIME(this);
+            }
+
+            label.classList.add('inputLabelFocused');
+            label.classList.remove('inputLabelUnfocused');
+        }, {
+            passive: true
+        });
+
+        dom.addEventListener(this, 'blur', function () {
+            onChange.call(this);
+            label.classList.remove('inputLabelFocused');
+            label.classList.add('inputLabelUnfocused');
+        }, {
+            passive: true
+        });
+
+        dom.addEventListener(this, 'change', onChange, {
+            passive: true
+        });
+        dom.addEventListener(this, 'input', onChange, {
+            passive: true
+        });
+        dom.addEventListener(this, 'valueset', onChange, {
+            passive: true
+        });
+
+        if (browser.orsay) {
+            if (this === document.activeElement) {
+                //Make sure the IME pops up if this is the first/default element on the page
+                if (document.attachIME) {
+                    document.attachIME(this);
+                }
+            }
+        }
+
+    };
+
+    function onChange() {
+
+        var label = this.labelElement;
+        if (this.value) {
+            label.classList.remove('inputLabel-float');
+        } else {
+
+            var instanceSupportsFloat = supportsFloatingLabel && this.type !== 'date' && this.type !== 'time';
+
+            if (instanceSupportsFloat) {
+                label.classList.add('inputLabel-float');
+            }
+        }
+    }
+
+    EmbyInputPrototype.attachedCallback = function () {
+
+        this.labelElement.htmlFor = this.id;
+
+        onChange.call(this);
+    };
+
+    EmbyInputPrototype.label = function (text) {
+        this.labelElement.innerHTML = text;
+    };
+
+    document.registerElement('emby-input', {
+        prototype: EmbyInputPrototype,
+        extends: 'input'
+    });
+});