Add TextArea to styleguide

styleguide-app/Examples/TextArea.elm

@@ -0,0 +1,137 @@
+module Examples.TextArea exposing (Msg, State, example, init, update)
+
+{- \
+   @docs Msg, State, example, init, update,
+-}
+
+import Dict exposing (Dict)
+import Html
+import Nri.Ui.Checkbox.V1 as Checkbox
+import Nri.Ui.TextArea.V1 as TextArea
+import Nri.Ui.Text.V1 as Text
+import ModuleExample as ModuleExample exposing (Category(..), ModuleExample)
+
+
+{-| -}
+type Msg
+    = InputGiven Id String
+    | ToggleLabel Bool
+    | ToggleAutoResize Bool
+    | ToggleErrorState Bool
+    | NoOp
+
+
+{-| -}
+type alias State =
+    { textValues : Dict Int String
+    , showLabel : Bool
+    , isInError : Bool
+    , autoResize : Bool
+    }
+
+
+{-| -}
+example : (Msg -> msg) -> State -> ModuleExample msg
+example parentMessage state =
+    { filename = "Nri/TextArea.elm"
+    , category = Inputs
+    , content =
+        [ Text.heading [ Html.text "Textarea controls" ]
+        , Html.div []
+            [ Checkbox.viewWithLabel
+                { identifier = "show-textarea-label"
+                , label = "Show Label"
+                , setterMsg = ToggleLabel
+                , isChecked = Just state.showLabel
+                , disabled = False
+                , theme = Checkbox.Square Checkbox.Default
+                , noOpMsg = NoOp
+                }
+            , Checkbox.viewWithLabel
+                { identifier = "textarea-autoresize"
+                , label = "Autoresize"
+                , setterMsg = ToggleAutoResize
+                , isChecked = Just state.autoResize
+                , disabled = False
+                , theme = Checkbox.Square Checkbox.Default
+                , noOpMsg = NoOp
+                }
+            , Checkbox.viewWithLabel
+                { identifier = "textarea-isInError"
+                , label = "Show Error State"
+                , setterMsg = ToggleErrorState
+                , isChecked = Just state.isInError
+                , disabled = False
+                , theme = Checkbox.Square Checkbox.Default
+                , noOpMsg = NoOp
+                }
+            ]
+        , TextArea.view
+            { value = Maybe.withDefault "" <| Dict.get 1 state.textValues
+            , autofocus = False
+            , onInput = InputGiven 1
+            , isInError = state.isInError
+            , label = "TextArea.view"
+            , autoResize = state.autoResize
+            , placeholder = "Placeholder"
+            , showLabel = state.showLabel
+            }
+        , TextArea.writing
+            { value = Maybe.withDefault "" <| Dict.get 2 state.textValues
+            , autofocus = False
+            , onInput = InputGiven 2
+            , isInError = state.isInError
+            , label = "TextArea.writing"
+            , autoResize = state.autoResize
+            , placeholder = "Placeholder"
+            , showLabel = state.showLabel
+            }
+        ]
+            |> List.map (Html.map parentMessage)
+    }
+
+
+{-| -}
+init : State
+init =
+    { textValues = Dict.empty
+    , showLabel = True
+    , isInError = False
+    , autoResize = False
+    }
+
+
+{-| -}
+update : Msg -> State -> ( State, Cmd Msg )
+update msg state =
+    case msg of
+        InputGiven id newValue ->
+            ( { state | textValues = Dict.insert id newValue state.textValues }
+            , Cmd.none
+            )
+
+        ToggleLabel bool ->
+            ( { state | showLabel = bool }
+            , Cmd.none
+            )
+
+        ToggleErrorState bool ->
+            ( { state | isInError = bool }
+            , Cmd.none
+            )
+
+        ToggleAutoResize bool ->
+            ( { state | autoResize = bool }
+            , Cmd.none
+            )
+
+        NoOp ->
+            ( state, Cmd.none )
+
+
+
+-- INTERNAL
+
+
+type alias Id =
+    Int

styleguide-app/NriModules.elm

@@ -1,7 +1,8 @@
 module NriModules exposing (ModuleStates, Msg, init, nriThemedModules, styles, subscriptions, update)
 
-import Css exposing (..)
+import Nri.Ui.AssetPath as AssetPath exposing (Asset(Asset))
 import DEPRECATED.Css.File exposing (Stylesheet, compile, stylesheet)
+import Examples.TextArea as TextAreaExample
 import Examples.Text as TextExample
 import Examples.Text.Quiz as TextQuizExample
 import Html exposing (Html, img)
@@ -10,20 +11,24 @@ import ModuleExample exposing (Category(..), ModuleExample)
 import Navigation
 import Nri.Ui.Text.Quiz.V1 as TextQuiz
 import Nri.Ui.Text.V1 as Text
+import Nri.Ui.TextArea.V1 as TextArea
 import String.Extra
 
 
 type alias ModuleStates =
-    {}
+    { textAreaExampleState : TextAreaExample.State
+    }
 
 
 init : ModuleStates
 init =
-    {}
+    { textAreaExampleState = TextAreaExample.init
+    }
 
 
 type Msg
     = ShowItWorked String String
+    | TextAreaExampleMsg TextAreaExample.Msg
     | NoOp
 
 
@@ -35,7 +40,16 @@ update msg moduleStates =
                 _ =
                     Debug.log group message
             in
-            ( moduleStates, Cmd.none )
+                ( moduleStates, Cmd.none )
+
+        TextAreaExampleMsg msg ->
+            let
+                ( textAreaExampleState, cmd ) =
+                    TextAreaExample.update msg moduleStates.textAreaExampleState
+            in
+                ( { moduleStates | textAreaExampleState = textAreaExampleState }
+                , Cmd.map TextAreaExampleMsg cmd
+                )
 
         NoOp ->
             ( moduleStates, Cmd.none )
@@ -63,6 +77,7 @@ nriThemedModules : ModuleStates -> List (ModuleExample Msg)
 nriThemedModules model =
     [ TextExample.example
     , TextQuizExample.example
+    , TextAreaExample.example TextAreaExampleMsg model.textAreaExampleState
     ]
 
 
@@ -89,4 +104,20 @@ styles =
           ]
         , (Text.styles |> .css) ()
         , (TextQuiz.styles |> .css) ()
+        , (TextArea.styles |> .css) assets
         ]
+
+
+type alias Assets =
+    { iconCalendar_svg : Asset
+    , icons_searchGray_svg : Asset
+    , icons_xBlue_svg : Asset
+    }
+
+
+assets : Assets
+assets =
+    { iconCalendar_svg = Asset ""
+    , icons_searchGray_svg = Asset ""
+    , icons_xBlue_svg = Asset ""
+    }

styleguide-app/assets/TextArea.js

@@ -0,0 +1,100 @@
+function AutoresizeTextArea() {
+  var _this = HTMLElement.call(this) || this;
+  _this._onInput = _this._onInput.bind(_this);
+  _this._textarea = document.createElement("textarea");
+  return _this;
+}
+
+AutoresizeTextArea.prototype = Object.create(HTMLElement.prototype);
+AutoresizeTextArea.prototype.constructor = AutoresizeTextArea;
+
+Object.defineProperties(AutoresizeTextArea.prototype, {
+  defaultValue: {
+    get: function() {
+      return this._textarea.defaultValue;
+    },
+    set: function(value) {
+      this._textarea.defaultValue = value;
+    }
+  },
+  autofocus: {
+    get: function() {
+      return this._textarea.autofocus;
+    },
+    set: function(value) {
+      this._textarea.autofocus = value;
+    }
+  },
+  placeholder: {
+    get: function() {
+      return this._textarea.placeholder;
+    },
+    set: function(value) {
+      this._textarea.placeholder = value;
+    }
+  },
+  value: {
+    get: function() {
+      return this._textarea.value;
+    },
+    set: function(value) {
+      this._textarea.value = value;
+    }
+  }
+});
+
+AutoresizeTextArea.prototype._onInput = function() {
+  var minHeight = null;
+  if (this._textarea.style.minHeight) {
+    minHeight = parseInt(this._textarea.style.minHeight, 10);
+  } else {
+    minHeight = parseInt(window.getComputedStyle(this._textarea).height, 10);
+  }
+
+  this._textarea.style.overflowY = "hidden";
+  this._textarea.style.minHeight = minHeight + "px";
+  if (this._textarea.scrollHeight > minHeight) {
+    this._textarea.style.height = "auto";
+    this._textarea.style.height = this._textarea.scrollHeight + "px";
+  } else {
+    this._textarea.style.height = minHeight + "px";
+  }
+
+  this.dispatchEvent(new Event("input"));
+};
+
+AutoresizeTextArea.prototype._reflectAttributes = function() {
+  while (this.attributes.length) {
+    var attribute = this.attributes[0];
+    this.removeAttributeNode(attribute);
+    this._textarea.setAttributeNode(attribute);
+  }
+  for (var k in this.dataset) {
+    this._textarea.dataset[k] = this.dataset[k];
+    delete this.dataset[k];
+  }
+};
+
+AutoresizeTextArea.prototype.attributeChangedCallback = function(
+  attribute,
+  previous,
+  next
+) {
+  if (previous && !next) {
+    this._textarea.removeAttribute(attribute);
+  } else {
+    this._textarea.setAttribute(attribute, next);
+  }
+};
+
+AutoresizeTextArea.prototype.connectedCallback = function() {
+  this._textarea.addEventListener("input", this._onInput);
+  this._reflectAttributes();
+  this.appendChild(this._textarea);
+};
+
+AutoresizeTextArea.prototype.disconnectedCallback = function() {
+  this._textarea.removeEventListener("input", this._onInput);
+};
+
+customElements.define("autoresize-textarea", AutoresizeTextArea);

styleguide-app/assets/custom-elements.min.js

@@ -0,0 +1,724 @@
+(function() {
+  "use strict";
+  var h = new function() {}();
+  var aa = new Set(
+    "annotation-xml color-profile font-face font-face-src font-face-uri font-face-format font-face-name missing-glyph".split(
+      " "
+    )
+  );
+  function n(b) {
+    var a = aa.has(b);
+    b = /^[a-z][.0-9_a-z]*-[\-.0-9_a-z]*$/.test(b);
+    return !a && b;
+  }
+  function p(b) {
+    var a = b.isConnected;
+    if (void 0 !== a) return a;
+    for (; b && !(b.__CE_isImportDocument || b instanceof Document); )
+      b =
+        b.parentNode ||
+        (window.ShadowRoot && b instanceof ShadowRoot ? b.host : void 0);
+    return !(!b || !(b.__CE_isImportDocument || b instanceof Document));
+  }
+  function q(b, a) {
+    for (; a && a !== b && !a.nextSibling; ) a = a.parentNode;
+    return a && a !== b ? a.nextSibling : null;
+  }
+  function t(b, a, c) {
+    c = c ? c : new Set();
+    for (var d = b; d; ) {
+      if (d.nodeType === Node.ELEMENT_NODE) {
+        var e = d;
+        a(e);
+        var f = e.localName;
+        if ("link" === f && "import" === e.getAttribute("rel")) {
+          d = e.import;
+          if (d instanceof Node && !c.has(d))
+            for (c.add(d), d = d.firstChild; d; d = d.nextSibling) t(d, a, c);
+          d = q(b, e);
+          continue;
+        } else if ("template" === f) {
+          d = q(b, e);
+          continue;
+        }
+        if ((e = e.__CE_shadowRoot))
+          for (e = e.firstChild; e; e = e.nextSibling) t(e, a, c);
+      }
+      d = d.firstChild ? d.firstChild : q(b, d);
+    }
+  }
+  function u(b, a, c) {
+    b[a] = c;
+  }
+  function v() {
+    this.a = new Map();
+    this.o = new Map();
+    this.f = [];
+    this.b = !1;
+  }
+  function ba(b, a, c) {
+    b.a.set(a, c);
+    b.o.set(c.constructor, c);
+  }
+  function w(b, a) {
+    b.b = !0;
+    b.f.push(a);
+  }
+  function x(b, a) {
+    b.b &&
+      t(a, function(a) {
+        return y(b, a);
+      });
+  }
+  function y(b, a) {
+    if (b.b && !a.__CE_patched) {
+      a.__CE_patched = !0;
+      for (var c = 0; c < b.f.length; c++) b.f[c](a);
+    }
+  }
+  function z(b, a) {
+    var c = [];
+    t(a, function(b) {
+      return c.push(b);
+    });
+    for (a = 0; a < c.length; a++) {
+      var d = c[a];
+      1 === d.__CE_state ? b.connectedCallback(d) : A(b, d);
+    }
+  }
+  function B(b, a) {
+    var c = [];
+    t(a, function(b) {
+      return c.push(b);
+    });
+    for (a = 0; a < c.length; a++) {
+      var d = c[a];
+      1 === d.__CE_state && b.disconnectedCallback(d);
+    }
+  }
+  function C(b, a, c) {
+    c = c ? c : {};
+    var d = c.w || new Set(),
+      e =
+        c.s ||
+        function(a) {
+          return A(b, a);
+        },
+      f = [];
+    t(
+      a,
+      function(a) {
+        if ("link" === a.localName && "import" === a.getAttribute("rel")) {
+          var c = a.import;
+          c instanceof Node &&
+            ((c.__CE_isImportDocument = !0), (c.__CE_hasRegistry = !0));
+          c && "complete" === c.readyState
+            ? (c.__CE_documentLoadHandled = !0)
+            : a.addEventListener("load", function() {
+                var c = a.import;
+                if (!c.__CE_documentLoadHandled) {
+                  c.__CE_documentLoadHandled = !0;
+                  var f = new Set(d);
+                  f.delete(c);
+                  C(b, c, { w: f, s: e });
+                }
+              });
+        } else f.push(a);
+      },
+      d
+    );
+    if (b.b) for (a = 0; a < f.length; a++) y(b, f[a]);
+    for (a = 0; a < f.length; a++) e(f[a]);
+  }
+  function A(b, a) {
+    if (void 0 === a.__CE_state) {
+      var c = a.ownerDocument;
+      if (c.defaultView || (c.__CE_isImportDocument && c.__CE_hasRegistry))
+        if ((c = b.a.get(a.localName))) {
+          c.constructionStack.push(a);
+          var d = c.constructor;
+          try {
+            try {
+              if (new d() !== a)
+                throw Error(
+                  "The custom element constructor did not produce the element being upgraded."
+                );
+            } finally {
+              c.constructionStack.pop();
+            }
+          } catch (m) {
+            throw ((a.__CE_state = 2), m);
+          }
+          a.__CE_state = 1;
+          a.__CE_definition = c;
+          if (c.attributeChangedCallback)
+            for (c = c.observedAttributes, d = 0; d < c.length; d++) {
+              var e = c[d],
+                f = a.getAttribute(e);
+              null !== f && b.attributeChangedCallback(a, e, null, f, null);
+            }
+          p(a) && b.connectedCallback(a);
+        }
+    }
+  }
+  v.prototype.connectedCallback = function(b) {
+    var a = b.__CE_definition;
+    a.connectedCallback && a.connectedCallback.call(b);
+  };
+  v.prototype.disconnectedCallback = function(b) {
+    var a = b.__CE_definition;
+    a.disconnectedCallback && a.disconnectedCallback.call(b);
+  };
+  v.prototype.attributeChangedCallback = function(b, a, c, d, e) {
+    var f = b.__CE_definition;
+    f.attributeChangedCallback &&
+      -1 < f.observedAttributes.indexOf(a) &&
+      f.attributeChangedCallback.call(b, a, c, d, e);
+  };
+  function D(b, a) {
+    this.c = b;
+    this.a = a;
+    this.b = void 0;
+    C(this.c, this.a);
+    "loading" === this.a.readyState &&
+      (
+        (this.b = new MutationObserver(this.f.bind(this))),
+        this.b.observe(this.a, { childList: !0, subtree: !0 })
+      );
+  }
+  function E(b) {
+    b.b && b.b.disconnect();
+  }
+  D.prototype.f = function(b) {
+    var a = this.a.readyState;
+    ("interactive" !== a && "complete" !== a) || E(this);
+    for (a = 0; a < b.length; a++)
+      for (var c = b[a].addedNodes, d = 0; d < c.length; d++) C(this.c, c[d]);
+  };
+  function ca() {
+    var b = this;
+    this.b = this.a = void 0;
+    this.f = new Promise(function(a) {
+      b.b = a;
+      b.a && a(b.a);
+    });
+  }
+  function F(b) {
+    if (b.a) throw Error("Already resolved.");
+    b.a = void 0;
+    b.b && b.b(void 0);
+  }
+  function G(b) {
+    this.i = !1;
+    this.c = b;
+    this.m = new Map();
+    this.j = function(b) {
+      return b();
+    };
+    this.g = !1;
+    this.l = [];
+    this.u = new D(b, document);
+  }
+  G.prototype.define = function(b, a) {
+    var c = this;
+    if (!(a instanceof Function))
+      throw new TypeError("Custom element constructors must be functions.");
+    if (!n(b))
+      throw new SyntaxError("The element name '" + b + "' is not valid.");
+    if (this.c.a.get(b))
+      throw Error(
+        "A custom element with name '" + b + "' has already been defined."
+      );
+    if (this.i) throw Error("A custom element is already being defined.");
+    this.i = !0;
+    var d, e, f, m, l;
+    try {
+      var g = function(b) {
+        var a = k[b];
+        if (void 0 !== a && !(a instanceof Function))
+          throw Error("The '" + b + "' callback must be a function.");
+        return a;
+      },
+        k = a.prototype;
+      if (!(k instanceof Object))
+        throw new TypeError(
+          "The custom element constructor's prototype is not an object."
+        );
+      d = g("connectedCallback");
+      e = g("disconnectedCallback");
+      f = g("adoptedCallback");
+      m = g("attributeChangedCallback");
+      l = a.observedAttributes || [];
+    } catch (r) {
+      return;
+    } finally {
+      this.i = !1;
+    }
+    a = {
+      localName: b,
+      constructor: a,
+      connectedCallback: d,
+      disconnectedCallback: e,
+      adoptedCallback: f,
+      attributeChangedCallback: m,
+      observedAttributes: l,
+      constructionStack: []
+    };
+    ba(this.c, b, a);
+    this.l.push(a);
+    this.g ||
+      (
+        (this.g = !0),
+        this.j(function() {
+          return da(c);
+        })
+      );
+  };
+  function da(b) {
+    if (!1 !== b.g) {
+      b.g = !1;
+      for (var a = b.l, c = [], d = new Map(), e = 0; e < a.length; e++)
+        d.set(a[e].localName, []);
+      C(b.c, document, {
+        s: function(a) {
+          if (void 0 === a.__CE_state) {
+            var e = a.localName,
+              f = d.get(e);
+            f ? f.push(a) : b.c.a.get(e) && c.push(a);
+          }
+        }
+      });
+      for (e = 0; e < c.length; e++) A(b.c, c[e]);
+      for (; 0 < a.length; ) {
+        for (
+          var f = a.shift(), e = f.localName, f = d.get(f.localName), m = 0;
+          m < f.length;
+          m++
+        )
+          A(b.c, f[m]);
+        (e = b.m.get(e)) && F(e);
+      }
+    }
+  }
+  G.prototype.get = function(b) {
+    if ((b = this.c.a.get(b))) return b.constructor;
+  };
+  G.prototype.whenDefined = function(b) {
+    if (!n(b))
+      return Promise.reject(
+        new SyntaxError("'" + b + "' is not a valid custom element name.")
+      );
+    var a = this.m.get(b);
+    if (a) return a.f;
+    a = new ca();
+    this.m.set(b, a);
+    this.c.a.get(b) &&
+      !this.l.some(function(a) {
+        return a.localName === b;
+      }) &&
+      F(a);
+    return a.f;
+  };
+  G.prototype.v = function(b) {
+    E(this.u);
+    var a = this.j;
+    this.j = function(c) {
+      return b(function() {
+        return a(c);
+      });
+    };
+  };
+  window.CustomElementRegistry = G;
+  G.prototype.define = G.prototype.define;
+  G.prototype.get = G.prototype.get;
+  G.prototype.whenDefined = G.prototype.whenDefined;
+  G.prototype.polyfillWrapFlushCallback = G.prototype.v;
+  var H = window.Document.prototype.createElement,
+    ea = window.Document.prototype.createElementNS,
+    fa = window.Document.prototype.importNode,
+    ga = window.Document.prototype.prepend,
+    ha = window.Document.prototype.append,
+    ia = window.DocumentFragment.prototype.prepend,
+    ja = window.DocumentFragment.prototype.append,
+    I = window.Node.prototype.cloneNode,
+    J = window.Node.prototype.appendChild,
+    K = window.Node.prototype.insertBefore,
+    L = window.Node.prototype.removeChild,
+    M = window.Node.prototype.replaceChild,
+    N = Object.getOwnPropertyDescriptor(window.Node.prototype, "textContent"),
+    O = window.Element.prototype.attachShadow,
+    P = Object.getOwnPropertyDescriptor(window.Element.prototype, "innerHTML"),
+    Q = window.Element.prototype.getAttribute,
+    R = window.Element.prototype.setAttribute,
+    S = window.Element.prototype.removeAttribute,
+    T = window.Element.prototype.getAttributeNS,
+    U = window.Element.prototype.setAttributeNS,
+    ka = window.Element.prototype.removeAttributeNS,
+    la = window.Element.prototype.insertAdjacentElement,
+    ma = window.Element.prototype.prepend,
+    na = window.Element.prototype.append,
+    V = window.Element.prototype.before,
+    oa = window.Element.prototype.after,
+    pa = window.Element.prototype.replaceWith,
+    qa = window.Element.prototype.remove,
+    ra = window.HTMLElement,
+    W = Object.getOwnPropertyDescriptor(
+      window.HTMLElement.prototype,
+      "innerHTML"
+    ),
+    sa = window.HTMLElement.prototype.insertAdjacentElement;
+  function ta() {
+    var b = X;
+    window.HTMLElement = (function() {
+      function a() {
+        var a = this.constructor,
+          d = b.o.get(a);
+        if (!d)
+          throw Error(
+            "The custom element being constructed was not registered with `customElements`."
+          );
+        var e = d.constructionStack;
+        if (!e.length)
+          return (e = H.call(document, d.localName)), Object.setPrototypeOf(
+            e,
+            a.prototype
+          ), (e.__CE_state = 1), (e.__CE_definition = d), y(b, e), e;
+        var d = e.length - 1,
+          f = e[d];
+        if (f === h)
+          throw Error(
+            "The HTMLElement constructor was either called reentrantly for this constructor or called multiple times."
+          );
+        e[d] = h;
+        Object.setPrototypeOf(f, a.prototype);
+        y(b, f);
+        return f;
+      }
+      a.prototype = ra.prototype;
+      return a;
+    })();
+  }
+  function Y(b, a, c) {
+    function d(a) {
+      return function(d) {
+        for (var c = [], e = 0; e < arguments.length; ++e)
+          c[e - 0] = arguments[e];
+        for (var e = [], f = [], k = 0; k < c.length; k++) {
+          var r = c[k];
+          r instanceof Element && p(r) && f.push(r);
+          if (r instanceof DocumentFragment)
+            for (r = r.firstChild; r; r = r.nextSibling) e.push(r);
+          else e.push(r);
+        }
+        a.apply(this, c);
+        for (c = 0; c < f.length; c++) B(b, f[c]);
+        if (p(this))
+          for (c = 0; c < e.length; c++)
+            (f = e[c]), f instanceof Element && z(b, f);
+      };
+    }
+    c.h && (a.prepend = d(c.h));
+    c.append && (a.append = d(c.append));
+  }
+  function ua() {
+    var b = X;
+    u(Document.prototype, "createElement", function(a) {
+      if (this.__CE_hasRegistry) {
+        var c = b.a.get(a);
+        if (c) return new c.constructor();
+      }
+      a = H.call(this, a);
+      y(b, a);
+      return a;
+    });
+    u(Document.prototype, "importNode", function(a, c) {
+      a = fa.call(this, a, c);
+      this.__CE_hasRegistry ? C(b, a) : x(b, a);
+      return a;
+    });
+    u(Document.prototype, "createElementNS", function(a, c) {
+      if (
+        this.__CE_hasRegistry &&
+        (null === a || "http://www.w3.org/1999/xhtml" === a)
+      ) {
+        var d = b.a.get(c);
+        if (d) return new d.constructor();
+      }
+      a = ea.call(this, a, c);
+      y(b, a);
+      return a;
+    });
+    Y(b, Document.prototype, { h: ga, append: ha });
+  }
+  function va() {
+    var b = X;
+    function a(a, d) {
+      Object.defineProperty(a, "textContent", {
+        enumerable: d.enumerable,
+        configurable: !0,
+        get: d.get,
+        set: function(a) {
+          if (this.nodeType === Node.TEXT_NODE) d.set.call(this, a);
+          else {
+            var c = void 0;
+            if (this.firstChild) {
+              var e = this.childNodes,
+                l = e.length;
+              if (0 < l && p(this))
+                for (var c = Array(l), g = 0; g < l; g++) c[g] = e[g];
+            }
+            d.set.call(this, a);
+            if (c) for (a = 0; a < c.length; a++) B(b, c[a]);
+          }
+        }
+      });
+    }
+    u(Node.prototype, "insertBefore", function(a, d) {
+      if (a instanceof DocumentFragment) {
+        var c = Array.prototype.slice.apply(a.childNodes);
+        a = K.call(this, a, d);
+        if (p(this)) for (d = 0; d < c.length; d++) z(b, c[d]);
+        return a;
+      }
+      c = p(a);
+      d = K.call(this, a, d);
+      c && B(b, a);
+      p(this) && z(b, a);
+      return d;
+    });
+    u(Node.prototype, "appendChild", function(a) {
+      if (a instanceof DocumentFragment) {
+        var c = Array.prototype.slice.apply(a.childNodes);
+        a = J.call(this, a);
+        if (p(this)) for (var e = 0; e < c.length; e++) z(b, c[e]);
+        return a;
+      }
+      c = p(a);
+      e = J.call(this, a);
+      c && B(b, a);
+      p(this) && z(b, a);
+      return e;
+    });
+    u(Node.prototype, "cloneNode", function(a) {
+      a = I.call(this, a);
+      this.ownerDocument.__CE_hasRegistry ? C(b, a) : x(b, a);
+      return a;
+    });
+    u(Node.prototype, "removeChild", function(a) {
+      var c = p(a),
+        e = L.call(this, a);
+      c && B(b, a);
+      return e;
+    });
+    u(Node.prototype, "replaceChild", function(a, d) {
+      if (a instanceof DocumentFragment) {
+        var e = Array.prototype.slice.apply(a.childNodes);
+        a = M.call(this, a, d);
+        if (p(this)) for (B(b, d), d = 0; d < e.length; d++) z(b, e[d]);
+        return a;
+      }
+      var e = p(a),
+        c = M.call(this, a, d),
+        m = p(this);
+      m && B(b, d);
+      e && B(b, a);
+      m && z(b, a);
+      return c;
+    });
+    N && N.get
+      ? a(Node.prototype, N)
+      : w(b, function(b) {
+          a(b, {
+            enumerable: !0,
+            configurable: !0,
+            get: function() {
+              for (var a = [], b = 0; b < this.childNodes.length; b++)
+                a.push(this.childNodes[b].textContent);
+              return a.join("");
+            },
+            set: function(a) {
+              for (; this.firstChild; ) L.call(this, this.firstChild);
+              J.call(this, document.createTextNode(a));
+            }
+          });
+        });
+  }
+  function wa(b) {
+    var a = Element.prototype;
+    function c(a) {
+      return function(c) {
+        for (var d = [], e = 0; e < arguments.length; ++e)
+          d[e - 0] = arguments[e];
+        for (var e = [], l = [], g = 0; g < d.length; g++) {
+          var k = d[g];
+          k instanceof Element && p(k) && l.push(k);
+          if (k instanceof DocumentFragment)
+            for (k = k.firstChild; k; k = k.nextSibling) e.push(k);
+          else e.push(k);
+        }
+        a.apply(this, d);
+        for (d = 0; d < l.length; d++) B(b, l[d]);
+        if (p(this))
+          for (d = 0; d < e.length; d++)
+            (l = e[d]), l instanceof Element && z(b, l);
+      };
+    }
+    V && (a.before = c(V));
+    V && (a.after = c(oa));
+    pa &&
+      u(a, "replaceWith", function(a) {
+        for (var d = [], c = 0; c < arguments.length; ++c)
+          d[c - 0] = arguments[c];
+        for (var c = [], m = [], l = 0; l < d.length; l++) {
+          var g = d[l];
+          g instanceof Element && p(g) && m.push(g);
+          if (g instanceof DocumentFragment)
+            for (g = g.firstChild; g; g = g.nextSibling) c.push(g);
+          else c.push(g);
+        }
+        l = p(this);
+        pa.apply(this, d);
+        for (d = 0; d < m.length; d++) B(b, m[d]);
+        if (l)
+          for (B(b, this), d = 0; d < c.length; d++)
+            (m = c[d]), m instanceof Element && z(b, m);
+      });
+    qa &&
+      u(a, "remove", function() {
+        var a = p(this);
+        qa.call(this);
+        a && B(b, this);
+      });
+  }
+  function xa() {
+    var b = X;
+    function a(a, c) {
+      Object.defineProperty(a, "innerHTML", {
+        enumerable: c.enumerable,
+        configurable: !0,
+        get: c.get,
+        set: function(a) {
+          var d = this,
+            e = void 0;
+          p(this) &&
+            (
+              (e = []),
+              t(this, function(a) {
+                a !== d && e.push(a);
+              })
+            );
+          c.set.call(this, a);
+          if (e)
+            for (var f = 0; f < e.length; f++) {
+              var k = e[f];
+              1 === k.__CE_state && b.disconnectedCallback(k);
+            }
+          this.ownerDocument.__CE_hasRegistry ? C(b, this) : x(b, this);
+          return a;
+        }
+      });
+    }
+    function c(a, c) {
+      u(a, "insertAdjacentElement", function(a, d) {
+        var e = p(d);
+        a = c.call(this, a, d);
+        e && B(b, d);
+        p(a) && z(b, d);
+        return a;
+      });
+    }
+    O &&
+      u(Element.prototype, "attachShadow", function(a) {
+        return (this.__CE_shadowRoot = a = O.call(this, a));
+      });
+    P && P.get
+      ? a(Element.prototype, P)
+      : W && W.get
+        ? a(HTMLElement.prototype, W)
+        : w(b, function(b) {
+            a(b, {
+              enumerable: !0,
+              configurable: !0,
+              get: function() {
+                return I.call(this, !0).innerHTML;
+              },
+              set: function(a) {
+                var b = "template" === this.localName,
+                  d = b ? this.content : this,
+                  c = H.call(document, this.localName);
+                for (c.innerHTML = a; 0 < d.childNodes.length; )
+                  L.call(d, d.childNodes[0]);
+                for (a = b ? c.content : c; 0 < a.childNodes.length; )
+                  J.call(d, a.childNodes[0]);
+              }
+            });
+          });
+    u(Element.prototype, "setAttribute", function(a, c) {
+      if (1 !== this.__CE_state) return R.call(this, a, c);
+      var d = Q.call(this, a);
+      R.call(this, a, c);
+      c = Q.call(this, a);
+      b.attributeChangedCallback(this, a, d, c, null);
+    });
+    u(Element.prototype, "setAttributeNS", function(a, c, f) {
+      if (1 !== this.__CE_state) return U.call(this, a, c, f);
+      var d = T.call(this, a, c);
+      U.call(this, a, c, f);
+      f = T.call(this, a, c);
+      b.attributeChangedCallback(this, c, d, f, a);
+    });
+    u(Element.prototype, "removeAttribute", function(a) {
+      if (1 !== this.__CE_state) return S.call(this, a);
+      var c = Q.call(this, a);
+      S.call(this, a);
+      null !== c && b.attributeChangedCallback(this, a, c, null, null);
+    });
+    u(Element.prototype, "removeAttributeNS", function(a, c) {
+      if (1 !== this.__CE_state) return ka.call(this, a, c);
+      var d = T.call(this, a, c);
+      ka.call(this, a, c);
+      var e = T.call(this, a, c);
+      d !== e && b.attributeChangedCallback(this, c, d, e, a);
+    });
+    sa
+      ? c(HTMLElement.prototype, sa)
+      : la
+        ? c(Element.prototype, la)
+        : console.warn(
+            "Custom Elements: `Element#insertAdjacentElement` was not patched."
+          );
+    Y(b, Element.prototype, { h: ma, append: na });
+    wa(b);
+  } /*
+
+ Copyright (c) 2016 The Polymer Project Authors. All rights reserved.
+ This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
+ The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
+ The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
+ Code distributed by Google as part of the polymer project is also
+ subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
+*/
+  var Z = window.customElements;
+  if (
+    !Z ||
+    Z.forcePolyfill ||
+    "function" != typeof Z.define ||
+    "function" != typeof Z.get
+  ) {
+    var X = new v();
+    ta();
+    ua();
+    Y(X, DocumentFragment.prototype, { h: ia, append: ja });
+    va();
+    xa();
+    document.__CE_hasRegistry = !0;
+    var customElements = new G(X);
+    Object.defineProperty(window, "customElements", {
+      configurable: !0,
+      enumerable: !0,
+      value: customElements
+    });
+  }
+}.call(self));
+
+//# sourceMappingURL=custom-elements.min.js.map

styleguide-app/index.html

@@ -4,6 +4,8 @@
 	<meta charset="utf-8">
 	<title>NoRedInk style guide</title>
   <link href="https://fonts.googleapis.com/css?family=Muli:400,400i,600,600i,700,700i,800,800i,900,900i" rel="stylesheet">
+  <script src="assets/custom-elements.min.js"></script>
+  <script src="assets/TextArea.js"></script>
 </head>
 <body>
   <script src="elm.js"></script>