update textarea

dashboard-ui/bower_components/emby-webcomponents/.bower.json

@@ -15,12 +15,12 @@
   },
   "devDependencies": {},
   "ignore": [],
-  "version": "1.4.53",
-  "_release": "1.4.53",
+  "version": "1.4.54",
+  "_release": "1.4.54",
   "_resolution": {
     "type": "version",
-    "tag": "1.4.53",
-    "commit": "300770cf6f36621ffdb2d2482438916f1520ffb5"
+    "tag": "1.4.54",
+    "commit": "e54c908295025a828f897937f4e41d3ec9f122ba"
   },
   "_source": "https://github.com/MediaBrowser/emby-webcomponents.git",
   "_target": "^1.2.0",

dashboard-ui/bower_components/emby-webcomponents/emby-textarea/emby-textarea.css

@@ -0,0 +1,54 @@
+[is="emby-textarea"] {
+    display: block;
+    margin: 0;
+    margin-bottom: 0 !important;
+    background: none;
+    border: 1px solid rgb(221, 221, 221);
+    border-width: 0 0 1px 0;
+    /* Prefixed box-sizing rules necessary for older browsers */
+    -webkit-box-sizing: border-box;
+    -moz-box-sizing: border-box;
+    box-sizing: border-box;
+    /* Remove select styling */
+    /* Font size must the 16px or larger to prevent iOS page zoom on focus */
+    font-size: inherit;
+    /* General select styles: change as needed */
+    font-family: inherit;
+    font-weight: inherit;
+    color: inherit;
+    padding: .35em 0 .3em 0;
+    cursor: pointer;
+    outline: none !important;
+    width: 100%;
+    background-color: transparent;
+    border-radius: 0;
+}
+
+.inputContainer {
+    margin-bottom: 2em;
+}
+
+.textareaLabel {
+    display: inline-block;
+    transition: all .2s ease-out;
+}
+
+.textareaLabel.focused:not(.blank) {
+    color: #52B54B;
+}
+
+.emby-textarea-selectionbar {
+    height: 2px;
+    transform: scale(.01, 1);
+    transition: transform .25s ease-out;
+    position: relative;
+    top: -1px;
+    margin-bottom: .5em;
+    -webkit-transform-origin: center center;
+    transform-origin: center center;
+}
+
+[is="emby-textarea"]:focus + .emby-textarea-selectionbar {
+    background-color: #52B54B;
+    transform: none;
+}

dashboard-ui/bower_components/emby-webcomponents/emby-textarea/emby-textarea.js

@@ -0,0 +1,161 @@
+define(['layoutManager', 'browser', 'css!./emby-textarea', 'registerElement'], function (layoutManager, browser) {
+
+    function autoGrow(textarea, maxLines) {
+        var self = this;
+
+        if (maxLines === undefined) {
+            maxLines = 999;
+        }
+
+        /**
+         * Calculates the vertical padding of the element
+         * @param textarea
+         * @returns {number}
+         */
+        self.getOffset = function (textarea) {
+            var style = window.getComputedStyle(textarea, null),
+                props = ['paddingTop', 'paddingBottom'],
+                offset = 0;
+
+            for (var i = 0; i < props.length; i++) {
+                offset += parseInt(style[props[i]]);
+            }
+            return offset;
+        };
+
+        var offset;
+        function reset() {
+            textarea.rows = 1;
+            offset = self.getOffset(textarea);
+            self.rows = textarea.rows || 1;
+            self.lineHeight = (textarea.scrollHeight / self.rows) - (offset / self.rows);
+            self.maxAllowedHeight = (self.lineHeight * maxLines) - offset;
+        }
+
+        function autogrowFn() {
+            if (!self.lineHeight || self.lineHeight <= 0) {
+                reset();
+            }
+            if (self.lineHeight <= 0) {
+                textarea.style.overflowY = 'scroll';
+                textarea.style.height = 'auto';
+                textarea.rows = 3;
+                return;
+            }
+            var newHeight = 0, hasGrown = false;
+
+            if ((textarea.scrollHeight - offset) > self.maxAllowedHeight) {
+                textarea.style.overflowY = 'scroll';
+                newHeight = self.maxAllowedHeight;
+            }
+            else {
+                textarea.style.overflowY = 'hidden';
+                textarea.style.height = 'auto';
+                newHeight = textarea.scrollHeight/* - offset*/;
+                hasGrown = true;
+            }
+            textarea.style.height = newHeight + 'px';
+        }
+
+        // Call autogrowFn() when textarea's value is changed
+        textarea.addEventListener('input', autogrowFn);
+        textarea.addEventListener('focus', autogrowFn);
+        textarea.addEventListener('valueset', autogrowFn);
+
+        autogrowFn();
+    }
+
+    var EmbyTextAreaPrototype = Object.create(HTMLTextAreaElement.prototype);
+
+    var elementId = 0;
+    var supportsFloatingLabel = false;
+
+    if (Object.getOwnPropertyDescriptor && Object.defineProperty) {
+
+        var descriptor = Object.getOwnPropertyDescriptor(HTMLTextAreaElement.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(HTMLTextAreaElement.prototype, 'value', descriptor);
+            supportsFloatingLabel = true;
+        }
+    }
+
+    EmbyTextAreaPrototype.createdCallback = function () {
+
+        if (!this.id) {
+            this.id = 'embytextarea' + elementId;
+            elementId++;
+        }
+    };
+
+    EmbyTextAreaPrototype.attachedCallback = function () {
+
+        if (this.getAttribute('data-embytextarea') == 'true') {
+            return;
+        }
+
+        this.rows = 1;
+        this.setAttribute('data-embytextarea', 'true');
+
+        var parentNode = this.parentNode;
+        var label = this.ownerDocument.createElement('label');
+        label.innerHTML = this.getAttribute('label') || '';
+        label.classList.add('textareaLabel');
+
+        if (!supportsFloatingLabel || this.type == 'date') {
+            label.classList.add('nofloat');
+        }
+
+        label.htmlFor = this.id;
+        parentNode.insertBefore(label, this);
+
+        var div = document.createElement('div');
+        div.classList.add('emby-textarea-selectionbar');
+        parentNode.insertBefore(div, this.nextSibling);
+
+        function onChange() {
+            if (this.value) {
+                label.classList.remove('blank');
+            } else {
+                label.classList.add('blank');
+            }
+        }
+
+        this.addEventListener('focus', function () {
+            onChange.call(this);
+            label.classList.add('focused');
+        });
+        this.addEventListener('blur', function () {
+            onChange.call(this);
+            label.classList.remove('focused');
+        });
+
+        this.addEventListener('change', onChange);
+        this.addEventListener('input', onChange);
+        this.addEventListener('valueset', onChange);
+
+        onChange.call(this);
+
+        this.label = function (text) {
+            label.innerHTML = text;
+        };
+
+        new autoGrow(this);
+    };
+
+    document.registerElement('emby-textarea', {
+        prototype: EmbyTextAreaPrototype,
+        extends: 'textarea'
+    });
+});