diff --git a/dist/thermostat-popup-card.js b/dist/thermostat-popup-card.js
index 7ed4628..63a2fc9 100644
--- a/dist/thermostat-popup-card.js
+++ b/dist/thermostat-popup-card.js
@@ -11,56 +11,7 @@
  * subject to an additional IP rights grant found at
  * http://polymer.github.io/PATENTS.txt
  */
-const directives = new WeakMap();
-/**
- * Brands a function as a directive factory function so that lit-html will call
- * the function during template rendering, rather than passing as a value.
- *
- * A _directive_ is a function that takes a Part as an argument. It has the
- * signature: `(part: Part) => void`.
- *
- * A directive _factory_ is a function that takes arguments for data and
- * configuration and returns a directive. Users of directive usually refer to
- * the directive factory as the directive. For example, "The repeat directive".
- *
- * Usually a template author will invoke a directive factory in their template
- * with relevant arguments, which will then return a directive function.
- *
- * Here's an example of using the `repeat()` directive factory that takes an
- * array and a function to render an item:
- *
- * ```js
- * html`<ul><${repeat(items, (item) => html`<li>${item}</li>`)}</ul>`
- * ```
- *
- * When `repeat` is invoked, it returns a directive function that closes over
- * `items` and the template function. When the outer template is rendered, the
- * return directive function is called with the Part for the expression.
- * `repeat` then performs it's custom logic to render multiple items.
- *
- * @param f The directive factory function. Must be a function that returns a
- * function of the signature `(part: Part) => void`. The returned function will
- * be called with the part object.
- *
- * @example
- *
- * import {directive, html} from 'lit-html';
- *
- * const immutable = directive((v) => (part) => {
- *   if (part.value !== v) {
- *     part.setValue(v)
- *   }
- * });
- */
-const directive = (f) => ((...args) => {
-    const d = f(...args);
-    directives.set(d, true);
-    return d;
-});
-const isDirective = (o) => {
-    return typeof o === 'function' && directives.has(o);
-};
-
+const t=new WeakMap,e=e=>"function"==typeof e&&t.has(e),s=void 0!==window.customElements&&void 0!==window.customElements.polyfillWrapFlushCallback,i=(t,e,s=null,i=null)=>{for(;e!==s;){const s=e.nextSibling;t.insertBefore(e,i),e=s}},n=(t,e,s=null)=>{for(;e!==s;){const s=e.nextSibling;t.removeChild(e),e=s}},o={},r={},a=`{{lit-${String(Math.random()).slice(2)}}}`,l=`\x3c!--${a}--\x3e`,h=new RegExp(`${a}|${l}`),c="$lit$";class d{constructor(t,e){this.parts=[],this.element=e;const s=[],i=[],n=document.createTreeWalker(e.content,133,null,!1);let o=0,r=-1,l=0;const{strings:d,values:{length:p}}=t;for(;l<p;){const t=n.nextNode();if(null!==t){if(r++,1===t.nodeType){if(t.hasAttributes()){const e=t.attributes,{length:s}=e;let i=0;for(let t=0;t<s;t++)u(e[t].name,c)&&i++;for(;i-- >0;){const e=d[l],s=g.exec(e)[2],i=s.toLowerCase()+c,n=t.getAttribute(i);t.removeAttribute(i);const o=n.split(h);this.parts.push({type:"attribute",index:r,name:s,strings:o}),l+=o.length-1}}"TEMPLATE"===t.tagName&&(i.push(t),n.currentNode=t.content)}else if(3===t.nodeType){const e=t.data;if(e.indexOf(a)>=0){const i=t.parentNode,n=e.split(h),o=n.length-1;for(let e=0;e<o;e++){let s,o=n[e];if(""===o)s=m();else{const t=g.exec(o);null!==t&&u(t[2],c)&&(o=o.slice(0,t.index)+t[1]+t[2].slice(0,-c.length)+t[3]),s=document.createTextNode(o)}i.insertBefore(s,t),this.parts.push({type:"node",index:++r})}""===n[o]?(i.insertBefore(m(),t),s.push(t)):t.data=n[o],l+=o}}else if(8===t.nodeType)if(t.data===a){const e=t.parentNode;null!==t.previousSibling&&r!==o||(r++,e.insertBefore(m(),t)),o=r,this.parts.push({type:"node",index:r}),null===t.nextSibling?t.data="":(s.push(t),r--),l++}else{let e=-1;for(;-1!==(e=t.data.indexOf(a,e+1));)this.parts.push({type:"node",index:-1}),l++}}else n.currentNode=i.pop()}for(const t of s)t.parentNode.removeChild(t)}}const u=(t,e)=>{const s=t.length-e.length;return s>=0&&t.slice(s)===e},p=t=>-1!==t.index,m=()=>document.createComment(""),g=/([ \x09\x0a\x0c\x0d])([^\0-\x1F\x7F-\x9F "'>=/]+)([ \x09\x0a\x0c\x0d]*=[ \x09\x0a\x0c\x0d]*(?:[^ \x09\x0a\x0c\x0d"'`<>=]*|"[^"]*|'[^']*))$/;
 /**
  * @license
  * Copyright (c) 2017 The Polymer Project Authors. All rights reserved.
@@ -74,59 +25,7 @@ const isDirective = (o) => {
  * subject to an additional IP rights grant found at
  * http://polymer.github.io/PATENTS.txt
  */
-/**
- * True if the custom elements polyfill is in use.
- */
-const isCEPolyfill = window.customElements !== undefined &&
-    window.customElements.polyfillWrapFlushCallback !==
-        undefined;
-/**
- * Reparents nodes, starting from `start` (inclusive) to `end` (exclusive),
- * into another container (could be the same container), before `before`. If
- * `before` is null, it appends the nodes to the container.
- */
-const reparentNodes = (container, start, end = null, before = null) => {
-    while (start !== end) {
-        const n = start.nextSibling;
-        container.insertBefore(start, before);
-        start = n;
-    }
-};
-/**
- * Removes nodes, starting from `start` (inclusive) to `end` (exclusive), from
- * `container`.
- */
-const removeNodes = (container, start, end = null) => {
-    while (start !== end) {
-        const n = start.nextSibling;
-        container.removeChild(start);
-        start = n;
-    }
-};
-
-/**
- * @license
- * Copyright (c) 2018 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
- */
-/**
- * A sentinel value that signals that a value was handled by a directive and
- * should not be written to the DOM.
- */
-const noChange = {};
-/**
- * A sentinel value that signals a NodePart to fully clear its content.
- */
-const nothing = {};
-
+class f{constructor(t,e,s){this.__parts=[],this.template=t,this.processor=e,this.options=s}update(t){let e=0;for(const s of this.__parts)void 0!==s&&s.setValue(t[e]),e++;for(const t of this.__parts)void 0!==t&&t.commit()}_clone(){const t=s?this.template.element.content.cloneNode(!0):document.importNode(this.template.element.content,!0),e=[],i=this.template.parts,n=document.createTreeWalker(t,133,null,!1);let o,r=0,a=0,l=n.nextNode();for(;r<i.length;)if(o=i[r],p(o)){for(;a<o.index;)a++,"TEMPLATE"===l.nodeName&&(e.push(l),n.currentNode=l.content),null===(l=n.nextNode())&&(n.currentNode=e.pop(),l=n.nextNode());if("node"===o.type){const t=this.processor.handleTextExpression(this.options);t.insertAfterNode(l.previousSibling),this.__parts.push(t)}else this.__parts.push(...this.processor.handleAttributeExpressions(l,o.name,o.strings,this.options));r++}else this.__parts.push(void 0),r++;return s&&(document.adoptNode(t),customElements.upgrade(t)),t}}
 /**
  * @license
  * Copyright (c) 2017 The Polymer Project Authors. All rights reserved.
@@ -139,447 +38,7 @@ const nothing = {};
  * 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
- */
-/**
- * An expression marker with embedded unique key to avoid collision with
- * possible text in templates.
- */
-const marker = `{{lit-${String(Math.random()).slice(2)}}}`;
-/**
- * An expression marker used text-positions, multi-binding attributes, and
- * attributes with markup-like text values.
- */
-const nodeMarker = `<!--${marker}-->`;
-const markerRegex = new RegExp(`${marker}|${nodeMarker}`);
-/**
- * Suffix appended to all bound attribute names.
- */
-const boundAttributeSuffix = '$lit$';
-/**
- * An updateable Template that tracks the location of dynamic parts.
- */
-class Template {
-    constructor(result, element) {
-        this.parts = [];
-        this.element = element;
-        const nodesToRemove = [];
-        const stack = [];
-        // Edge needs all 4 parameters present; IE11 needs 3rd parameter to be null
-        const walker = document.createTreeWalker(element.content, 133 /* NodeFilter.SHOW_{ELEMENT|COMMENT|TEXT} */, null, false);
-        // Keeps track of the last index associated with a part. We try to delete
-        // unnecessary nodes, but we never want to associate two different parts
-        // to the same index. They must have a constant node between.
-        let lastPartIndex = 0;
-        let index = -1;
-        let partIndex = 0;
-        const { strings, values: { length } } = result;
-        while (partIndex < length) {
-            const node = walker.nextNode();
-            if (node === null) {
-                // We've exhausted the content inside a nested template element.
-                // Because we still have parts (the outer for-loop), we know:
-                // - There is a template in the stack
-                // - The walker will find a nextNode outside the template
-                walker.currentNode = stack.pop();
-                continue;
-            }
-            index++;
-            if (node.nodeType === 1 /* Node.ELEMENT_NODE */) {
-                if (node.hasAttributes()) {
-                    const attributes = node.attributes;
-                    const { length } = attributes;
-                    // Per
-                    // https://developer.mozilla.org/en-US/docs/Web/API/NamedNodeMap,
-                    // attributes are not guaranteed to be returned in document order.
-                    // In particular, Edge/IE can return them out of order, so we cannot
-                    // assume a correspondence between part index and attribute index.
-                    let count = 0;
-                    for (let i = 0; i < length; i++) {
-                        if (endsWith(attributes[i].name, boundAttributeSuffix)) {
-                            count++;
-                        }
-                    }
-                    while (count-- > 0) {
-                        // Get the template literal section leading up to the first
-                        // expression in this attribute
-                        const stringForPart = strings[partIndex];
-                        // Find the attribute name
-                        const name = lastAttributeNameRegex.exec(stringForPart)[2];
-                        // Find the corresponding attribute
-                        // All bound attributes have had a suffix added in
-                        // TemplateResult#getHTML to opt out of special attribute
-                        // handling. To look up the attribute value we also need to add
-                        // the suffix.
-                        const attributeLookupName = name.toLowerCase() + boundAttributeSuffix;
-                        const attributeValue = node.getAttribute(attributeLookupName);
-                        node.removeAttribute(attributeLookupName);
-                        const statics = attributeValue.split(markerRegex);
-                        this.parts.push({ type: 'attribute', index, name, strings: statics });
-                        partIndex += statics.length - 1;
-                    }
-                }
-                if (node.tagName === 'TEMPLATE') {
-                    stack.push(node);
-                    walker.currentNode = node.content;
-                }
-            }
-            else if (node.nodeType === 3 /* Node.TEXT_NODE */) {
-                const data = node.data;
-                if (data.indexOf(marker) >= 0) {
-                    const parent = node.parentNode;
-                    const strings = data.split(markerRegex);
-                    const lastIndex = strings.length - 1;
-                    // Generate a new text node for each literal section
-                    // These nodes are also used as the markers for node parts
-                    for (let i = 0; i < lastIndex; i++) {
-                        let insert;
-                        let s = strings[i];
-                        if (s === '') {
-                            insert = createMarker();
-                        }
-                        else {
-                            const match = lastAttributeNameRegex.exec(s);
-                            if (match !== null && endsWith(match[2], boundAttributeSuffix)) {
-                                s = s.slice(0, match.index) + match[1] +
-                                    match[2].slice(0, -boundAttributeSuffix.length) + match[3];
-                            }
-                            insert = document.createTextNode(s);
-                        }
-                        parent.insertBefore(insert, node);
-                        this.parts.push({ type: 'node', index: ++index });
-                    }
-                    // If there's no text, we must insert a comment to mark our place.
-                    // Else, we can trust it will stick around after cloning.
-                    if (strings[lastIndex] === '') {
-                        parent.insertBefore(createMarker(), node);
-                        nodesToRemove.push(node);
-                    }
-                    else {
-                        node.data = strings[lastIndex];
-                    }
-                    // We have a part for each match found
-                    partIndex += lastIndex;
-                }
-            }
-            else if (node.nodeType === 8 /* Node.COMMENT_NODE */) {
-                if (node.data === marker) {
-                    const parent = node.parentNode;
-                    // Add a new marker node to be the startNode of the Part if any of
-                    // the following are true:
-                    //  * We don't have a previousSibling
-                    //  * The previousSibling is already the start of a previous part
-                    if (node.previousSibling === null || index === lastPartIndex) {
-                        index++;
-                        parent.insertBefore(createMarker(), node);
-                    }
-                    lastPartIndex = index;
-                    this.parts.push({ type: 'node', index });
-                    // If we don't have a nextSibling, keep this node so we have an end.
-                    // Else, we can remove it to save future costs.
-                    if (node.nextSibling === null) {
-                        node.data = '';
-                    }
-                    else {
-                        nodesToRemove.push(node);
-                        index--;
-                    }
-                    partIndex++;
-                }
-                else {
-                    let i = -1;
-                    while ((i = node.data.indexOf(marker, i + 1)) !== -1) {
-                        // Comment node has a binding marker inside, make an inactive part
-                        // The binding won't work, but subsequent bindings will
-                        // TODO (justinfagnani): consider whether it's even worth it to
-                        // make bindings in comments work
-                        this.parts.push({ type: 'node', index: -1 });
-                        partIndex++;
-                    }
-                }
-            }
-        }
-        // Remove text binding nodes after the walk to not disturb the TreeWalker
-        for (const n of nodesToRemove) {
-            n.parentNode.removeChild(n);
-        }
-    }
-}
-const endsWith = (str, suffix) => {
-    const index = str.length - suffix.length;
-    return index >= 0 && str.slice(index) === suffix;
-};
-const isTemplatePartActive = (part) => part.index !== -1;
-// Allows `document.createComment('')` to be renamed for a
-// small manual size-savings.
-const createMarker = () => document.createComment('');
-/**
- * This regex extracts the attribute name preceding an attribute-position
- * expression. It does this by matching the syntax allowed for attributes
- * against the string literal directly preceding the expression, assuming that
- * the expression is in an attribute-value position.
- *
- * See attributes in the HTML spec:
- * https://www.w3.org/TR/html5/syntax.html#elements-attributes
- *
- * " \x09\x0a\x0c\x0d" are HTML space characters:
- * https://www.w3.org/TR/html5/infrastructure.html#space-characters
- *
- * "\0-\x1F\x7F-\x9F" are Unicode control characters, which includes every
- * space character except " ".
- *
- * So an attribute is:
- *  * The name: any character except a control character, space character, ('),
- *    ("), ">", "=", or "/"
- *  * Followed by zero or more space characters
- *  * Followed by "="
- *  * Followed by zero or more space characters
- *  * Followed by:
- *    * Any character except space, ('), ("), "<", ">", "=", (`), or
- *    * (") then any non-("), or
- *    * (') then any non-(')
- */
-const lastAttributeNameRegex = /([ \x09\x0a\x0c\x0d])([^\0-\x1F\x7F-\x9F "'>=/]+)([ \x09\x0a\x0c\x0d]*=[ \x09\x0a\x0c\x0d]*(?:[^ \x09\x0a\x0c\x0d"'`<>=]*|"[^"]*|'[^']*))$/;
-
-/**
- * @license
- * Copyright (c) 2017 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
- */
-/**
- * An instance of a `Template` that can be attached to the DOM and updated
- * with new values.
- */
-class TemplateInstance {
-    constructor(template, processor, options) {
-        this.__parts = [];
-        this.template = template;
-        this.processor = processor;
-        this.options = options;
-    }
-    update(values) {
-        let i = 0;
-        for (const part of this.__parts) {
-            if (part !== undefined) {
-                part.setValue(values[i]);
-            }
-            i++;
-        }
-        for (const part of this.__parts) {
-            if (part !== undefined) {
-                part.commit();
-            }
-        }
-    }
-    _clone() {
-        // There are a number of steps in the lifecycle of a template instance's
-        // DOM fragment:
-        //  1. Clone - create the instance fragment
-        //  2. Adopt - adopt into the main document
-        //  3. Process - find part markers and create parts
-        //  4. Upgrade - upgrade custom elements
-        //  5. Update - set node, attribute, property, etc., values
-        //  6. Connect - connect to the document. Optional and outside of this
-        //     method.
-        //
-        // We have a few constraints on the ordering of these steps:
-        //  * We need to upgrade before updating, so that property values will pass
-        //    through any property setters.
-        //  * We would like to process before upgrading so that we're sure that the
-        //    cloned fragment is inert and not disturbed by self-modifying DOM.
-        //  * We want custom elements to upgrade even in disconnected fragments.
-        //
-        // Given these constraints, with full custom elements support we would
-        // prefer the order: Clone, Process, Adopt, Upgrade, Update, Connect
-        //
-        // But Safari dooes not implement CustomElementRegistry#upgrade, so we
-        // can not implement that order and still have upgrade-before-update and
-        // upgrade disconnected fragments. So we instead sacrifice the
-        // process-before-upgrade constraint, since in Custom Elements v1 elements
-        // must not modify their light DOM in the constructor. We still have issues
-        // when co-existing with CEv0 elements like Polymer 1, and with polyfills
-        // that don't strictly adhere to the no-modification rule because shadow
-        // DOM, which may be created in the constructor, is emulated by being placed
-        // in the light DOM.
-        //
-        // The resulting order is on native is: Clone, Adopt, Upgrade, Process,
-        // Update, Connect. document.importNode() performs Clone, Adopt, and Upgrade
-        // in one step.
-        //
-        // The Custom Elements v1 polyfill supports upgrade(), so the order when
-        // polyfilled is the more ideal: Clone, Process, Adopt, Upgrade, Update,
-        // Connect.
-        const fragment = isCEPolyfill ?
-            this.template.element.content.cloneNode(true) :
-            document.importNode(this.template.element.content, true);
-        const stack = [];
-        const parts = this.template.parts;
-        // Edge needs all 4 parameters present; IE11 needs 3rd parameter to be null
-        const walker = document.createTreeWalker(fragment, 133 /* NodeFilter.SHOW_{ELEMENT|COMMENT|TEXT} */, null, false);
-        let partIndex = 0;
-        let nodeIndex = 0;
-        let part;
-        let node = walker.nextNode();
-        // Loop through all the nodes and parts of a template
-        while (partIndex < parts.length) {
-            part = parts[partIndex];
-            if (!isTemplatePartActive(part)) {
-                this.__parts.push(undefined);
-                partIndex++;
-                continue;
-            }
-            // Progress the tree walker until we find our next part's node.
-            // Note that multiple parts may share the same node (attribute parts
-            // on a single element), so this loop may not run at all.
-            while (nodeIndex < part.index) {
-                nodeIndex++;
-                if (node.nodeName === 'TEMPLATE') {
-                    stack.push(node);
-                    walker.currentNode = node.content;
-                }
-                if ((node = walker.nextNode()) === null) {
-                    // We've exhausted the content inside a nested template element.
-                    // Because we still have parts (the outer for-loop), we know:
-                    // - There is a template in the stack
-                    // - The walker will find a nextNode outside the template
-                    walker.currentNode = stack.pop();
-                    node = walker.nextNode();
-                }
-            }
-            // We've arrived at our part's node.
-            if (part.type === 'node') {
-                const part = this.processor.handleTextExpression(this.options);
-                part.insertAfterNode(node.previousSibling);
-                this.__parts.push(part);
-            }
-            else {
-                this.__parts.push(...this.processor.handleAttributeExpressions(node, part.name, part.strings, this.options));
-            }
-            partIndex++;
-        }
-        if (isCEPolyfill) {
-            document.adoptNode(fragment);
-            customElements.upgrade(fragment);
-        }
-        return fragment;
-    }
-}
-
-/**
- * @license
- * Copyright (c) 2017 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
- */
-const commentMarker = ` ${marker} `;
-/**
- * The return type of `html`, which holds a Template and the values from
- * interpolated expressions.
- */
-class TemplateResult {
-    constructor(strings, values, type, processor) {
-        this.strings = strings;
-        this.values = values;
-        this.type = type;
-        this.processor = processor;
-    }
-    /**
-     * Returns a string of HTML used to create a `<template>` element.
-     */
-    getHTML() {
-        const l = this.strings.length - 1;
-        let html = '';
-        let isCommentBinding = false;
-        for (let i = 0; i < l; i++) {
-            const s = this.strings[i];
-            // For each binding we want to determine the kind of marker to insert
-            // into the template source before it's parsed by the browser's HTML
-            // parser. The marker type is based on whether the expression is in an
-            // attribute, text, or comment poisition.
-            //   * For node-position bindings we insert a comment with the marker
-            //     sentinel as its text content, like <!--{{lit-guid}}-->.
-            //   * For attribute bindings we insert just the marker sentinel for the
-            //     first binding, so that we support unquoted attribute bindings.
-            //     Subsequent bindings can use a comment marker because multi-binding
-            //     attributes must be quoted.
-            //   * For comment bindings we insert just the marker sentinel so we don't
-            //     close the comment.
-            //
-            // The following code scans the template source, but is *not* an HTML
-            // parser. We don't need to track the tree structure of the HTML, only
-            // whether a binding is inside a comment, and if not, if it appears to be
-            // the first binding in an attribute.
-            const commentOpen = s.lastIndexOf('<!--');
-            // We're in comment position if we have a comment open with no following
-            // comment close. Because <-- can appear in an attribute value there can
-            // be false positives.
-            isCommentBinding = (commentOpen > -1 || isCommentBinding) &&
-                s.indexOf('-->', commentOpen + 1) === -1;
-            // Check to see if we have an attribute-like sequence preceeding the
-            // expression. This can match "name=value" like structures in text,
-            // comments, and attribute values, so there can be false-positives.
-            const attributeMatch = lastAttributeNameRegex.exec(s);
-            if (attributeMatch === null) {
-                // We're only in this branch if we don't have a attribute-like
-                // preceeding sequence. For comments, this guards against unusual
-                // attribute values like <div foo="<!--${'bar'}">. Cases like
-                // <!-- foo=${'bar'}--> are handled correctly in the attribute branch
-                // below.
-                html += s + (isCommentBinding ? commentMarker : nodeMarker);
-            }
-            else {
-                // For attributes we use just a marker sentinel, and also append a
-                // $lit$ suffix to the name to opt-out of attribute-specific parsing
-                // that IE and Edge do for style and certain SVG attributes.
-                html += s.substr(0, attributeMatch.index) + attributeMatch[1] +
-                    attributeMatch[2] + boundAttributeSuffix + attributeMatch[3] +
-                    marker;
-            }
-        }
-        html += this.strings[l];
-        return html;
-    }
-    getTemplateElement() {
-        const template = document.createElement('template');
-        template.innerHTML = this.getHTML();
-        return template;
-    }
-}
-/**
- * A TemplateResult for SVG fragments.
- *
- * This class wraps HTML in an `<svg>` tag in order to parse its contents in the
- * SVG namespace, then modifies the template to remove the `<svg>` tag so that
- * clones only container the original fragment.
- */
-class SVGTemplateResult extends TemplateResult {
-    getHTML() {
-        return `<svg>${super.getHTML()}</svg>`;
-    }
-    getTemplateElement() {
-        const template = super.getTemplateElement();
-        const content = template.content;
-        const svgElement = content.firstChild;
-        content.removeChild(svgElement);
-        reparentNodes(content, svgElement.firstChild);
-        return template;
-    }
-}
-
+ */const _=` ${a} `;class y{constructor(t,e,s,i){this.strings=t,this.values=e,this.type=s,this.processor=i}getHTML(){const t=this.strings.length-1;let e="",s=!1;for(let i=0;i<t;i++){const t=this.strings[i],n=t.lastIndexOf("\x3c!--");s=(n>-1||s)&&-1===t.indexOf("--\x3e",n+1);const o=g.exec(t);e+=null===o?t+(s?_:l):t.substr(0,o.index)+o[1]+o[2]+c+o[3]+a}return e+=this.strings[t],e}getTemplateElement(){const t=document.createElement("template");return t.innerHTML=this.getHTML(),t}}class v extends y{getHTML(){return`<svg>${super.getHTML()}</svg>`}getTemplateElement(){const t=super.getTemplateElement(),e=t.content,s=e.firstChild;return e.removeChild(s),i(e,s.firstChild),t}}
 /**
  * @license
  * Copyright (c) 2017 The Polymer Project Authors. All rights reserved.
@@ -592,433 +51,7 @@ class SVGTemplateResult extends TemplateResult {
  * 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
- */
-const isPrimitive = (value) => {
-    return (value === null ||
-        !(typeof value === 'object' || typeof value === 'function'));
-};
-const isIterable = (value) => {
-    return Array.isArray(value) ||
-        // tslint:disable-next-line:no-any
-        !!(value && value[Symbol.iterator]);
-};
-/**
- * Writes attribute values to the DOM for a group of AttributeParts bound to a
- * single attibute. The value is only set once even if there are multiple parts
- * for an attribute.
- */
-class AttributeCommitter {
-    constructor(element, name, strings) {
-        this.dirty = true;
-        this.element = element;
-        this.name = name;
-        this.strings = strings;
-        this.parts = [];
-        for (let i = 0; i < strings.length - 1; i++) {
-            this.parts[i] = this._createPart();
-        }
-    }
-    /**
-     * Creates a single part. Override this to create a differnt type of part.
-     */
-    _createPart() {
-        return new AttributePart(this);
-    }
-    _getValue() {
-        const strings = this.strings;
-        const l = strings.length - 1;
-        let text = '';
-        for (let i = 0; i < l; i++) {
-            text += strings[i];
-            const part = this.parts[i];
-            if (part !== undefined) {
-                const v = part.value;
-                if (isPrimitive(v) || !isIterable(v)) {
-                    text += typeof v === 'string' ? v : String(v);
-                }
-                else {
-                    for (const t of v) {
-                        text += typeof t === 'string' ? t : String(t);
-                    }
-                }
-            }
-        }
-        text += strings[l];
-        return text;
-    }
-    commit() {
-        if (this.dirty) {
-            this.dirty = false;
-            this.element.setAttribute(this.name, this._getValue());
-        }
-    }
-}
-/**
- * A Part that controls all or part of an attribute value.
- */
-class AttributePart {
-    constructor(committer) {
-        this.value = undefined;
-        this.committer = committer;
-    }
-    setValue(value) {
-        if (value !== noChange && (!isPrimitive(value) || value !== this.value)) {
-            this.value = value;
-            // If the value is a not a directive, dirty the committer so that it'll
-            // call setAttribute. If the value is a directive, it'll dirty the
-            // committer if it calls setValue().
-            if (!isDirective(value)) {
-                this.committer.dirty = true;
-            }
-        }
-    }
-    commit() {
-        while (isDirective(this.value)) {
-            const directive = this.value;
-            this.value = noChange;
-            directive(this);
-        }
-        if (this.value === noChange) {
-            return;
-        }
-        this.committer.commit();
-    }
-}
-/**
- * A Part that controls a location within a Node tree. Like a Range, NodePart
- * has start and end locations and can set and update the Nodes between those
- * locations.
- *
- * NodeParts support several value types: primitives, Nodes, TemplateResults,
- * as well as arrays and iterables of those types.
- */
-class NodePart {
-    constructor(options) {
-        this.value = undefined;
-        this.__pendingValue = undefined;
-        this.options = options;
-    }
-    /**
-     * Appends this part into a container.
-     *
-     * This part must be empty, as its contents are not automatically moved.
-     */
-    appendInto(container) {
-        this.startNode = container.appendChild(createMarker());
-        this.endNode = container.appendChild(createMarker());
-    }
-    /**
-     * Inserts this part after the `ref` node (between `ref` and `ref`'s next
-     * sibling). Both `ref` and its next sibling must be static, unchanging nodes
-     * such as those that appear in a literal section of a template.
-     *
-     * This part must be empty, as its contents are not automatically moved.
-     */
-    insertAfterNode(ref) {
-        this.startNode = ref;
-        this.endNode = ref.nextSibling;
-    }
-    /**
-     * Appends this part into a parent part.
-     *
-     * This part must be empty, as its contents are not automatically moved.
-     */
-    appendIntoPart(part) {
-        part.__insert(this.startNode = createMarker());
-        part.__insert(this.endNode = createMarker());
-    }
-    /**
-     * Inserts this part after the `ref` part.
-     *
-     * This part must be empty, as its contents are not automatically moved.
-     */
-    insertAfterPart(ref) {
-        ref.__insert(this.startNode = createMarker());
-        this.endNode = ref.endNode;
-        ref.endNode = this.startNode;
-    }
-    setValue(value) {
-        this.__pendingValue = value;
-    }
-    commit() {
-        while (isDirective(this.__pendingValue)) {
-            const directive = this.__pendingValue;
-            this.__pendingValue = noChange;
-            directive(this);
-        }
-        const value = this.__pendingValue;
-        if (value === noChange) {
-            return;
-        }
-        if (isPrimitive(value)) {
-            if (value !== this.value) {
-                this.__commitText(value);
-            }
-        }
-        else if (value instanceof TemplateResult) {
-            this.__commitTemplateResult(value);
-        }
-        else if (value instanceof Node) {
-            this.__commitNode(value);
-        }
-        else if (isIterable(value)) {
-            this.__commitIterable(value);
-        }
-        else if (value === nothing) {
-            this.value = nothing;
-            this.clear();
-        }
-        else {
-            // Fallback, will render the string representation
-            this.__commitText(value);
-        }
-    }
-    __insert(node) {
-        this.endNode.parentNode.insertBefore(node, this.endNode);
-    }
-    __commitNode(value) {
-        if (this.value === value) {
-            return;
-        }
-        this.clear();
-        this.__insert(value);
-        this.value = value;
-    }
-    __commitText(value) {
-        const node = this.startNode.nextSibling;
-        value = value == null ? '' : value;
-        // If `value` isn't already a string, we explicitly convert it here in case
-        // it can't be implicitly converted - i.e. it's a symbol.
-        const valueAsString = typeof value === 'string' ? value : String(value);
-        if (node === this.endNode.previousSibling &&
-            node.nodeType === 3 /* Node.TEXT_NODE */) {
-            // If we only have a single text node between the markers, we can just
-            // set its value, rather than replacing it.
-            // TODO(justinfagnani): Can we just check if this.value is primitive?
-            node.data = valueAsString;
-        }
-        else {
-            this.__commitNode(document.createTextNode(valueAsString));
-        }
-        this.value = value;
-    }
-    __commitTemplateResult(value) {
-        const template = this.options.templateFactory(value);
-        if (this.value instanceof TemplateInstance &&
-            this.value.template === template) {
-            this.value.update(value.values);
-        }
-        else {
-            // Make sure we propagate the template processor from the TemplateResult
-            // so that we use its syntax extension, etc. The template factory comes
-            // from the render function options so that it can control template
-            // caching and preprocessing.
-            const instance = new TemplateInstance(template, value.processor, this.options);
-            const fragment = instance._clone();
-            instance.update(value.values);
-            this.__commitNode(fragment);
-            this.value = instance;
-        }
-    }
-    __commitIterable(value) {
-        // For an Iterable, we create a new InstancePart per item, then set its
-        // value to the item. This is a little bit of overhead for every item in
-        // an Iterable, but it lets us recurse easily and efficiently update Arrays
-        // of TemplateResults that will be commonly returned from expressions like:
-        // array.map((i) => html`${i}`), by reusing existing TemplateInstances.
-        // If _value is an array, then the previous render was of an
-        // iterable and _value will contain the NodeParts from the previous
-        // render. If _value is not an array, clear this part and make a new
-        // array for NodeParts.
-        if (!Array.isArray(this.value)) {
-            this.value = [];
-            this.clear();
-        }
-        // Lets us keep track of how many items we stamped so we can clear leftover
-        // items from a previous render
-        const itemParts = this.value;
-        let partIndex = 0;
-        let itemPart;
-        for (const item of value) {
-            // Try to reuse an existing part
-            itemPart = itemParts[partIndex];
-            // If no existing part, create a new one
-            if (itemPart === undefined) {
-                itemPart = new NodePart(this.options);
-                itemParts.push(itemPart);
-                if (partIndex === 0) {
-                    itemPart.appendIntoPart(this);
-                }
-                else {
-                    itemPart.insertAfterPart(itemParts[partIndex - 1]);
-                }
-            }
-            itemPart.setValue(item);
-            itemPart.commit();
-            partIndex++;
-        }
-        if (partIndex < itemParts.length) {
-            // Truncate the parts array so _value reflects the current state
-            itemParts.length = partIndex;
-            this.clear(itemPart && itemPart.endNode);
-        }
-    }
-    clear(startNode = this.startNode) {
-        removeNodes(this.startNode.parentNode, startNode.nextSibling, this.endNode);
-    }
-}
-/**
- * Implements a boolean attribute, roughly as defined in the HTML
- * specification.
- *
- * If the value is truthy, then the attribute is present with a value of
- * ''. If the value is falsey, the attribute is removed.
- */
-class BooleanAttributePart {
-    constructor(element, name, strings) {
-        this.value = undefined;
-        this.__pendingValue = undefined;
-        if (strings.length !== 2 || strings[0] !== '' || strings[1] !== '') {
-            throw new Error('Boolean attributes can only contain a single expression');
-        }
-        this.element = element;
-        this.name = name;
-        this.strings = strings;
-    }
-    setValue(value) {
-        this.__pendingValue = value;
-    }
-    commit() {
-        while (isDirective(this.__pendingValue)) {
-            const directive = this.__pendingValue;
-            this.__pendingValue = noChange;
-            directive(this);
-        }
-        if (this.__pendingValue === noChange) {
-            return;
-        }
-        const value = !!this.__pendingValue;
-        if (this.value !== value) {
-            if (value) {
-                this.element.setAttribute(this.name, '');
-            }
-            else {
-                this.element.removeAttribute(this.name);
-            }
-            this.value = value;
-        }
-        this.__pendingValue = noChange;
-    }
-}
-/**
- * Sets attribute values for PropertyParts, so that the value is only set once
- * even if there are multiple parts for a property.
- *
- * If an expression controls the whole property value, then the value is simply
- * assigned to the property under control. If there are string literals or
- * multiple expressions, then the strings are expressions are interpolated into
- * a string first.
- */
-class PropertyCommitter extends AttributeCommitter {
-    constructor(element, name, strings) {
-        super(element, name, strings);
-        this.single =
-            (strings.length === 2 && strings[0] === '' && strings[1] === '');
-    }
-    _createPart() {
-        return new PropertyPart(this);
-    }
-    _getValue() {
-        if (this.single) {
-            return this.parts[0].value;
-        }
-        return super._getValue();
-    }
-    commit() {
-        if (this.dirty) {
-            this.dirty = false;
-            // tslint:disable-next-line:no-any
-            this.element[this.name] = this._getValue();
-        }
-    }
-}
-class PropertyPart extends AttributePart {
-}
-// Detect event listener options support. If the `capture` property is read
-// from the options object, then options are supported. If not, then the thrid
-// argument to add/removeEventListener is interpreted as the boolean capture
-// value so we should only pass the `capture` property.
-let eventOptionsSupported = false;
-try {
-    const options = {
-        get capture() {
-            eventOptionsSupported = true;
-            return false;
-        }
-    };
-    // tslint:disable-next-line:no-any
-    window.addEventListener('test', options, options);
-    // tslint:disable-next-line:no-any
-    window.removeEventListener('test', options, options);
-}
-catch (_e) {
-}
-class EventPart {
-    constructor(element, eventName, eventContext) {
-        this.value = undefined;
-        this.__pendingValue = undefined;
-        this.element = element;
-        this.eventName = eventName;
-        this.eventContext = eventContext;
-        this.__boundHandleEvent = (e) => this.handleEvent(e);
-    }
-    setValue(value) {
-        this.__pendingValue = value;
-    }
-    commit() {
-        while (isDirective(this.__pendingValue)) {
-            const directive = this.__pendingValue;
-            this.__pendingValue = noChange;
-            directive(this);
-        }
-        if (this.__pendingValue === noChange) {
-            return;
-        }
-        const newListener = this.__pendingValue;
-        const oldListener = this.value;
-        const shouldRemoveListener = newListener == null ||
-            oldListener != null &&
-                (newListener.capture !== oldListener.capture ||
-                    newListener.once !== oldListener.once ||
-                    newListener.passive !== oldListener.passive);
-        const shouldAddListener = newListener != null && (oldListener == null || shouldRemoveListener);
-        if (shouldRemoveListener) {
-            this.element.removeEventListener(this.eventName, this.__boundHandleEvent, this.__options);
-        }
-        if (shouldAddListener) {
-            this.__options = getOptions(newListener);
-            this.element.addEventListener(this.eventName, this.__boundHandleEvent, this.__options);
-        }
-        this.value = newListener;
-        this.__pendingValue = noChange;
-    }
-    handleEvent(event) {
-        if (typeof this.value === 'function') {
-            this.value.call(this.eventContext || this.element, event);
-        }
-        else {
-            this.value.handleEvent(event);
-        }
-    }
-}
-// We copy options because of the inconsistent behavior of browsers when reading
-// the third argument of add/removeEventListener. IE11 doesn't support options
-// at all. Chrome 41 only reads `capture` if the argument is an object.
-const getOptions = (o) => o &&
-    (eventOptionsSupported ?
-        { capture: o.capture, passive: o.passive, once: o.once } :
-        o.capture);
-
+ */const w=t=>null===t||!("object"==typeof t||"function"==typeof t),b=t=>Array.isArray(t)||!(!t||!t[Symbol.iterator]);class S{constructor(t,e,s){this.dirty=!0,this.element=t,this.name=e,this.strings=s,this.parts=[];for(let t=0;t<s.length-1;t++)this.parts[t]=this._createPart()}_createPart(){return new x(this)}_getValue(){const t=this.strings,e=t.length-1;let s="";for(let i=0;i<e;i++){s+=t[i];const e=this.parts[i];if(void 0!==e){const t=e.value;if(w(t)||!b(t))s+="string"==typeof t?t:String(t);else for(const e of t)s+="string"==typeof e?e:String(e)}}return s+=t[e],s}commit(){this.dirty&&(this.dirty=!1,this.element.setAttribute(this.name,this._getValue()))}}class x{constructor(t){this.value=void 0,this.committer=t}setValue(t){t===o||w(t)&&t===this.value||(this.value=t,e(t)||(this.committer.dirty=!0))}commit(){for(;e(this.value);){const t=this.value;this.value=o,t(this)}this.value!==o&&this.committer.commit()}}class C{constructor(t){this.value=void 0,this.__pendingValue=void 0,this.options=t}appendInto(t){this.startNode=t.appendChild(m()),this.endNode=t.appendChild(m())}insertAfterNode(t){this.startNode=t,this.endNode=t.nextSibling}appendIntoPart(t){t.__insert(this.startNode=m()),t.__insert(this.endNode=m())}insertAfterPart(t){t.__insert(this.startNode=m()),this.endNode=t.endNode,t.endNode=this.startNode}setValue(t){this.__pendingValue=t}commit(){for(;e(this.__pendingValue);){const t=this.__pendingValue;this.__pendingValue=o,t(this)}const t=this.__pendingValue;t!==o&&(w(t)?t!==this.value&&this.__commitText(t):t instanceof y?this.__commitTemplateResult(t):t instanceof Node?this.__commitNode(t):b(t)?this.__commitIterable(t):t===r?(this.value=r,this.clear()):this.__commitText(t))}__insert(t){this.endNode.parentNode.insertBefore(t,this.endNode)}__commitNode(t){this.value!==t&&(this.clear(),this.__insert(t),this.value=t)}__commitText(t){const e=this.startNode.nextSibling,s="string"==typeof(t=null==t?"":t)?t:String(t);e===this.endNode.previousSibling&&3===e.nodeType?e.data=s:this.__commitNode(document.createTextNode(s)),this.value=t}__commitTemplateResult(t){const e=this.options.templateFactory(t);if(this.value instanceof f&&this.value.template===e)this.value.update(t.values);else{const s=new f(e,t.processor,this.options),i=s._clone();s.update(t.values),this.__commitNode(i),this.value=s}}__commitIterable(t){Array.isArray(this.value)||(this.value=[],this.clear());const e=this.value;let s,i=0;for(const n of t)s=e[i],void 0===s&&(s=new C(this.options),e.push(s),0===i?s.appendIntoPart(this):s.insertAfterPart(e[i-1])),s.setValue(n),s.commit(),i++;i<e.length&&(e.length=i,this.clear(s&&s.endNode))}clear(t=this.startNode){n(this.startNode.parentNode,t.nextSibling,this.endNode)}}class ${constructor(t,e,s){if(this.value=void 0,this.__pendingValue=void 0,2!==s.length||""!==s[0]||""!==s[1])throw new Error("Boolean attributes can only contain a single expression");this.element=t,this.name=e,this.strings=s}setValue(t){this.__pendingValue=t}commit(){for(;e(this.__pendingValue);){const t=this.__pendingValue;this.__pendingValue=o,t(this)}if(this.__pendingValue===o)return;const t=!!this.__pendingValue;this.value!==t&&(t?this.element.setAttribute(this.name,""):this.element.removeAttribute(this.name),this.value=t),this.__pendingValue=o}}class P extends S{constructor(t,e,s){super(t,e,s),this.single=2===s.length&&""===s[0]&&""===s[1]}_createPart(){return new M(this)}_getValue(){return this.single?this.parts[0].value:super._getValue()}commit(){this.dirty&&(this.dirty=!1,this.element[this.name]=this._getValue())}}class M extends x{}let k=!1;try{const t={get capture(){return k=!0,!1}};window.addEventListener("test",t,t),window.removeEventListener("test",t,t)}catch(t){}class N{constructor(t,e,s){this.value=void 0,this.__pendingValue=void 0,this.element=t,this.eventName=e,this.eventContext=s,this.__boundHandleEvent=t=>this.handleEvent(t)}setValue(t){this.__pendingValue=t}commit(){for(;e(this.__pendingValue);){const t=this.__pendingValue;this.__pendingValue=o,t(this)}if(this.__pendingValue===o)return;const t=this.__pendingValue,s=this.value,i=null==t||null!=s&&(t.capture!==s.capture||t.once!==s.once||t.passive!==s.passive),n=null!=t&&(null==s||i);i&&this.element.removeEventListener(this.eventName,this.__boundHandleEvent,this.__options),n&&(this.__options=E(t),this.element.addEventListener(this.eventName,this.__boundHandleEvent,this.__options)),this.value=t,this.__pendingValue=o}handleEvent(t){"function"==typeof this.value?this.value.call(this.eventContext||this.element,t):this.value.handleEvent(t)}}const E=t=>t&&(k?{capture:t.capture,passive:t.passive,once:t.once}:t.capture);
 /**
  * @license
  * Copyright (c) 2017 The Polymer Project Authors. All rights reserved.
@@ -1031,45 +64,7 @@ const getOptions = (o) => o &&
  * 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
- */
-/**
- * Creates Parts when a template is instantiated.
- */
-class DefaultTemplateProcessor {
-    /**
-     * Create parts for an attribute-position binding, given the event, attribute
-     * name, and string literals.
-     *
-     * @param element The element containing the binding
-     * @param name  The attribute name
-     * @param strings The string literals. There are always at least two strings,
-     *   event for fully-controlled bindings with a single expression.
-     */
-    handleAttributeExpressions(element, name, strings, options) {
-        const prefix = name[0];
-        if (prefix === '.') {
-            const committer = new PropertyCommitter(element, name.slice(1), strings);
-            return committer.parts;
-        }
-        if (prefix === '@') {
-            return [new EventPart(element, name.slice(1), options.eventContext)];
-        }
-        if (prefix === '?') {
-            return [new BooleanAttributePart(element, name.slice(1), strings)];
-        }
-        const committer = new AttributeCommitter(element, name, strings);
-        return committer.parts;
-    }
-    /**
-     * Create parts for a text-position binding.
-     * @param templateFactory
-     */
-    handleTextExpression(options) {
-        return new NodePart(options);
-    }
-}
-const defaultTemplateProcessor = new DefaultTemplateProcessor();
-
+ */const T=new class{handleAttributeExpressions(t,e,s,i){const n=e[0];if("."===n){return new P(t,e.slice(1),s).parts}return"@"===n?[new N(t,e.slice(1),i.eventContext)]:"?"===n?[new $(t,e.slice(1),s)]:new S(t,e,s).parts}handleTextExpression(t){return new C(t)}};
 /**
  * @license
  * Copyright (c) 2017 The Polymer Project Authors. All rights reserved.
@@ -1082,41 +77,7 @@ const defaultTemplateProcessor = new DefaultTemplateProcessor();
  * 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
- */
-/**
- * The default TemplateFactory which caches Templates keyed on
- * result.type and result.strings.
- */
-function templateFactory(result) {
-    let templateCache = templateCaches.get(result.type);
-    if (templateCache === undefined) {
-        templateCache = {
-            stringsArray: new WeakMap(),
-            keyString: new Map()
-        };
-        templateCaches.set(result.type, templateCache);
-    }
-    let template = templateCache.stringsArray.get(result.strings);
-    if (template !== undefined) {
-        return template;
-    }
-    // If the TemplateStringsArray is new, generate a key from the strings
-    // This key is shared between all templates with identical content
-    const key = result.strings.join(marker);
-    // Check if we already have a Template for this key
-    template = templateCache.keyString.get(key);
-    if (template === undefined) {
-        // If we have not seen this key before, create a new Template
-        template = new Template(result, result.getTemplateElement());
-        // Cache the Template for this key
-        templateCache.keyString.set(key, template);
-    }
-    // Cache all future queries for this TemplateStringsArray
-    templateCache.stringsArray.set(result.strings, template);
-    return template;
-}
-const templateCaches = new Map();
-
+ */function A(t){let e=O.get(t.type);void 0===e&&(e={stringsArray:new WeakMap,keyString:new Map},O.set(t.type,e));let s=e.stringsArray.get(t.strings);if(void 0!==s)return s;const i=t.strings.join(a);return s=e.keyString.get(i),void 0===s&&(s=new d(t,t.getTemplateElement()),e.keyString.set(i,s)),e.stringsArray.set(t.strings,s),s}const O=new Map,R=new WeakMap;
 /**
  * @license
  * Copyright (c) 2017 The Polymer Project Authors. All rights reserved.
@@ -1130,33 +91,6 @@ const templateCaches = new Map();
  * subject to an additional IP rights grant found at
  * http://polymer.github.io/PATENTS.txt
  */
-const parts = new WeakMap();
-/**
- * Renders a template result or other value to a container.
- *
- * To update a container with new values, reevaluate the template literal and
- * call `render` with the new result.
- *
- * @param result Any value renderable by NodePart - typically a TemplateResult
- *     created by evaluating a template tag like `html` or `svg`.
- * @param container A DOM parent to render to. The entire contents are either
- *     replaced, or efficiently updated if the same result type was previous
- *     rendered there.
- * @param options RenderOptions for the entire render tree rendered to this
- *     container. Render options must *not* change between renders to the same
- *     container, as those changes will not effect previously rendered DOM.
- */
-const render = (result, container, options) => {
-    let part = parts.get(container);
-    if (part === undefined) {
-        removeNodes(container, container.firstChild);
-        parts.set(container, part = new NodePart(Object.assign({ templateFactory }, options)));
-        part.appendInto(container);
-    }
-    part.setValue(result);
-    part.commit();
-};
-
 /**
  * @license
  * Copyright (c) 2017 The Polymer Project Authors. All rights reserved.
@@ -1170,21 +104,7 @@ const render = (result, container, options) => {
  * subject to an additional IP rights grant found at
  * http://polymer.github.io/PATENTS.txt
  */
-// IMPORTANT: do not change the property name or the assignment expression.
-// This line will be used in regexes to search for lit-html usage.
-// TODO(justinfagnani): inject version number at build time
-(window['litHtmlVersions'] || (window['litHtmlVersions'] = [])).push('1.1.2');
-/**
- * Interprets a template literal as an HTML template that can efficiently
- * render to and update a container.
- */
-const html = (strings, ...values) => new TemplateResult(strings, values, 'html', defaultTemplateProcessor);
-/**
- * Interprets a template literal as an SVG template that can efficiently
- * render to and update a container.
- */
-const svg = (strings, ...values) => new SVGTemplateResult(strings, values, 'svg', defaultTemplateProcessor);
-
+(window.litHtmlVersions||(window.litHtmlVersions=[])).push("1.1.2");const D=(t,...e)=>new y(t,e,"html",T),H=(t,...e)=>new v(t,e,"svg",T),q=133;function F(t,e){const{element:{content:s},parts:i}=t,n=document.createTreeWalker(s,q,null,!1);let o=L(i),r=i[o],a=-1,l=0;const h=[];let c=null;for(;n.nextNode();){a++;const t=n.currentNode;for(t.previousSibling===c&&(c=null),e.has(t)&&(h.push(t),null===c&&(c=t)),null!==c&&l++;void 0!==r&&r.index===a;)r.index=null!==c?-1:r.index-l,o=L(i,o),r=i[o]}h.forEach(t=>t.parentNode.removeChild(t))}const V=t=>{let e=11===t.nodeType?0:1;const s=document.createTreeWalker(t,q,null,!1);for(;s.nextNode();)e++;return e},L=(t,e=-1)=>{for(let s=e+1;s<t.length;s++){const e=t[s];if(p(e))return s}return-1};
 /**
  * @license
  * Copyright (c) 2017 The Polymer Project Authors. All rights reserved.
@@ -1198,1011 +118,7 @@ const svg = (strings, ...values) => new SVGTemplateResult(strings, values, 'svg'
  * subject to an additional IP rights grant found at
  * http://polymer.github.io/PATENTS.txt
  */
-const walkerNodeFilter = 133 /* NodeFilter.SHOW_{ELEMENT|COMMENT|TEXT} */;
-/**
- * Removes the list of nodes from a Template safely. In addition to removing
- * nodes from the Template, the Template part indices are updated to match
- * the mutated Template DOM.
- *
- * As the template is walked the removal state is tracked and
- * part indices are adjusted as needed.
- *
- * div
- *   div#1 (remove) <-- start removing (removing node is div#1)
- *     div
- *       div#2 (remove)  <-- continue removing (removing node is still div#1)
- *         div
- * div <-- stop removing since previous sibling is the removing node (div#1,
- * removed 4 nodes)
- */
-function removeNodesFromTemplate(template, nodesToRemove) {
-    const { element: { content }, parts } = template;
-    const walker = document.createTreeWalker(content, walkerNodeFilter, null, false);
-    let partIndex = nextActiveIndexInTemplateParts(parts);
-    let part = parts[partIndex];
-    let nodeIndex = -1;
-    let removeCount = 0;
-    const nodesToRemoveInTemplate = [];
-    let currentRemovingNode = null;
-    while (walker.nextNode()) {
-        nodeIndex++;
-        const node = walker.currentNode;
-        // End removal if stepped past the removing node
-        if (node.previousSibling === currentRemovingNode) {
-            currentRemovingNode = null;
-        }
-        // A node to remove was found in the template
-        if (nodesToRemove.has(node)) {
-            nodesToRemoveInTemplate.push(node);
-            // Track node we're removing
-            if (currentRemovingNode === null) {
-                currentRemovingNode = node;
-            }
-        }
-        // When removing, increment count by which to adjust subsequent part indices
-        if (currentRemovingNode !== null) {
-            removeCount++;
-        }
-        while (part !== undefined && part.index === nodeIndex) {
-            // If part is in a removed node deactivate it by setting index to -1 or
-            // adjust the index as needed.
-            part.index = currentRemovingNode !== null ? -1 : part.index - removeCount;
-            // go to the next active part.
-            partIndex = nextActiveIndexInTemplateParts(parts, partIndex);
-            part = parts[partIndex];
-        }
-    }
-    nodesToRemoveInTemplate.forEach((n) => n.parentNode.removeChild(n));
-}
-const countNodes = (node) => {
-    let count = (node.nodeType === 11 /* Node.DOCUMENT_FRAGMENT_NODE */) ? 0 : 1;
-    const walker = document.createTreeWalker(node, walkerNodeFilter, null, false);
-    while (walker.nextNode()) {
-        count++;
-    }
-    return count;
-};
-const nextActiveIndexInTemplateParts = (parts, startIndex = -1) => {
-    for (let i = startIndex + 1; i < parts.length; i++) {
-        const part = parts[i];
-        if (isTemplatePartActive(part)) {
-            return i;
-        }
-    }
-    return -1;
-};
-/**
- * Inserts the given node into the Template, optionally before the given
- * refNode. In addition to inserting the node into the Template, the Template
- * part indices are updated to match the mutated Template DOM.
- */
-function insertNodeIntoTemplate(template, node, refNode = null) {
-    const { element: { content }, parts } = template;
-    // If there's no refNode, then put node at end of template.
-    // No part indices need to be shifted in this case.
-    if (refNode === null || refNode === undefined) {
-        content.appendChild(node);
-        return;
-    }
-    const walker = document.createTreeWalker(content, walkerNodeFilter, null, false);
-    let partIndex = nextActiveIndexInTemplateParts(parts);
-    let insertCount = 0;
-    let walkerIndex = -1;
-    while (walker.nextNode()) {
-        walkerIndex++;
-        const walkerNode = walker.currentNode;
-        if (walkerNode === refNode) {
-            insertCount = countNodes(node);
-            refNode.parentNode.insertBefore(node, refNode);
-        }
-        while (partIndex !== -1 && parts[partIndex].index === walkerIndex) {
-            // If we've inserted the node, simply adjust all subsequent parts
-            if (insertCount > 0) {
-                while (partIndex !== -1) {
-                    parts[partIndex].index += insertCount;
-                    partIndex = nextActiveIndexInTemplateParts(parts, partIndex);
-                }
-                return;
-            }
-            partIndex = nextActiveIndexInTemplateParts(parts, partIndex);
-        }
-    }
-}
-
-/**
- * @license
- * Copyright (c) 2017 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
- */
-// Get a key to lookup in `templateCaches`.
-const getTemplateCacheKey = (type, scopeName) => `${type}--${scopeName}`;
-let compatibleShadyCSSVersion = true;
-if (typeof window.ShadyCSS === 'undefined') {
-    compatibleShadyCSSVersion = false;
-}
-else if (typeof window.ShadyCSS.prepareTemplateDom === 'undefined') {
-    console.warn(`Incompatible ShadyCSS version detected. ` +
-        `Please update to at least @webcomponents/webcomponentsjs@2.0.2 and ` +
-        `@webcomponents/shadycss@1.3.1.`);
-    compatibleShadyCSSVersion = false;
-}
-/**
- * Template factory which scopes template DOM using ShadyCSS.
- * @param scopeName {string}
- */
-const shadyTemplateFactory = (scopeName) => (result) => {
-    const cacheKey = getTemplateCacheKey(result.type, scopeName);
-    let templateCache = templateCaches.get(cacheKey);
-    if (templateCache === undefined) {
-        templateCache = {
-            stringsArray: new WeakMap(),
-            keyString: new Map()
-        };
-        templateCaches.set(cacheKey, templateCache);
-    }
-    let template = templateCache.stringsArray.get(result.strings);
-    if (template !== undefined) {
-        return template;
-    }
-    const key = result.strings.join(marker);
-    template = templateCache.keyString.get(key);
-    if (template === undefined) {
-        const element = result.getTemplateElement();
-        if (compatibleShadyCSSVersion) {
-            window.ShadyCSS.prepareTemplateDom(element, scopeName);
-        }
-        template = new Template(result, element);
-        templateCache.keyString.set(key, template);
-    }
-    templateCache.stringsArray.set(result.strings, template);
-    return template;
-};
-const TEMPLATE_TYPES = ['html', 'svg'];
-/**
- * Removes all style elements from Templates for the given scopeName.
- */
-const removeStylesFromLitTemplates = (scopeName) => {
-    TEMPLATE_TYPES.forEach((type) => {
-        const templates = templateCaches.get(getTemplateCacheKey(type, scopeName));
-        if (templates !== undefined) {
-            templates.keyString.forEach((template) => {
-                const { element: { content } } = template;
-                // IE 11 doesn't support the iterable param Set constructor
-                const styles = new Set();
-                Array.from(content.querySelectorAll('style')).forEach((s) => {
-                    styles.add(s);
-                });
-                removeNodesFromTemplate(template, styles);
-            });
-        }
-    });
-};
-const shadyRenderSet = new Set();
-/**
- * For the given scope name, ensures that ShadyCSS style scoping is performed.
- * This is done just once per scope name so the fragment and template cannot
- * be modified.
- * (1) extracts styles from the rendered fragment and hands them to ShadyCSS
- * to be scoped and appended to the document
- * (2) removes style elements from all lit-html Templates for this scope name.
- *
- * Note, <style> elements can only be placed into templates for the
- * initial rendering of the scope. If <style> elements are included in templates
- * dynamically rendered to the scope (after the first scope render), they will
- * not be scoped and the <style> will be left in the template and rendered
- * output.
- */
-const prepareTemplateStyles = (scopeName, renderedDOM, template) => {
-    shadyRenderSet.add(scopeName);
-    // If `renderedDOM` is stamped from a Template, then we need to edit that
-    // Template's underlying template element. Otherwise, we create one here
-    // to give to ShadyCSS, which still requires one while scoping.
-    const templateElement = !!template ? template.element : document.createElement('template');
-    // Move styles out of rendered DOM and store.
-    const styles = renderedDOM.querySelectorAll('style');
-    const { length } = styles;
-    // If there are no styles, skip unnecessary work
-    if (length === 0) {
-        // Ensure prepareTemplateStyles is called to support adding
-        // styles via `prepareAdoptedCssText` since that requires that
-        // `prepareTemplateStyles` is called.
-        //
-        // ShadyCSS will only update styles containing @apply in the template
-        // given to `prepareTemplateStyles`. If no lit Template was given,
-        // ShadyCSS will not be able to update uses of @apply in any relevant
-        // template. However, this is not a problem because we only create the
-        // template for the purpose of supporting `prepareAdoptedCssText`,
-        // which doesn't support @apply at all.
-        window.ShadyCSS.prepareTemplateStyles(templateElement, scopeName);
-        return;
-    }
-    const condensedStyle = document.createElement('style');
-    // Collect styles into a single style. This helps us make sure ShadyCSS
-    // manipulations will not prevent us from being able to fix up template
-    // part indices.
-    // NOTE: collecting styles is inefficient for browsers but ShadyCSS
-    // currently does this anyway. When it does not, this should be changed.
-    for (let i = 0; i < length; i++) {
-        const style = styles[i];
-        style.parentNode.removeChild(style);
-        condensedStyle.textContent += style.textContent;
-    }
-    // Remove styles from nested templates in this scope.
-    removeStylesFromLitTemplates(scopeName);
-    // And then put the condensed style into the "root" template passed in as
-    // `template`.
-    const content = templateElement.content;
-    if (!!template) {
-        insertNodeIntoTemplate(template, condensedStyle, content.firstChild);
-    }
-    else {
-        content.insertBefore(condensedStyle, content.firstChild);
-    }
-    // Note, it's important that ShadyCSS gets the template that `lit-html`
-    // will actually render so that it can update the style inside when
-    // needed (e.g. @apply native Shadow DOM case).
-    window.ShadyCSS.prepareTemplateStyles(templateElement, scopeName);
-    const style = content.querySelector('style');
-    if (window.ShadyCSS.nativeShadow && style !== null) {
-        // When in native Shadow DOM, ensure the style created by ShadyCSS is
-        // included in initially rendered output (`renderedDOM`).
-        renderedDOM.insertBefore(style.cloneNode(true), renderedDOM.firstChild);
-    }
-    else if (!!template) {
-        // When no style is left in the template, parts will be broken as a
-        // result. To fix this, we put back the style node ShadyCSS removed
-        // and then tell lit to remove that node from the template.
-        // There can be no style in the template in 2 cases (1) when Shady DOM
-        // is in use, ShadyCSS removes all styles, (2) when native Shadow DOM
-        // is in use ShadyCSS removes the style if it contains no content.
-        // NOTE, ShadyCSS creates its own style so we can safely add/remove
-        // `condensedStyle` here.
-        content.insertBefore(condensedStyle, content.firstChild);
-        const removes = new Set();
-        removes.add(condensedStyle);
-        removeNodesFromTemplate(template, removes);
-    }
-};
-/**
- * Extension to the standard `render` method which supports rendering
- * to ShadowRoots when the ShadyDOM (https://github.com/webcomponents/shadydom)
- * and ShadyCSS (https://github.com/webcomponents/shadycss) polyfills are used
- * or when the webcomponentsjs
- * (https://github.com/webcomponents/webcomponentsjs) polyfill is used.
- *
- * Adds a `scopeName` option which is used to scope element DOM and stylesheets
- * when native ShadowDOM is unavailable. The `scopeName` will be added to
- * the class attribute of all rendered DOM. In addition, any style elements will
- * be automatically re-written with this `scopeName` selector and moved out
- * of the rendered DOM and into the document `<head>`.
- *
- * It is common to use this render method in conjunction with a custom element
- * which renders a shadowRoot. When this is done, typically the element's
- * `localName` should be used as the `scopeName`.
- *
- * In addition to DOM scoping, ShadyCSS also supports a basic shim for css
- * custom properties (needed only on older browsers like IE11) and a shim for
- * a deprecated feature called `@apply` that supports applying a set of css
- * custom properties to a given location.
- *
- * Usage considerations:
- *
- * * Part values in `<style>` elements are only applied the first time a given
- * `scopeName` renders. Subsequent changes to parts in style elements will have
- * no effect. Because of this, parts in style elements should only be used for
- * values that will never change, for example parts that set scope-wide theme
- * values or parts which render shared style elements.
- *
- * * Note, due to a limitation of the ShadyDOM polyfill, rendering in a
- * custom element's `constructor` is not supported. Instead rendering should
- * either done asynchronously, for example at microtask timing (for example
- * `Promise.resolve()`), or be deferred until the first time the element's
- * `connectedCallback` runs.
- *
- * Usage considerations when using shimmed custom properties or `@apply`:
- *
- * * Whenever any dynamic changes are made which affect
- * css custom properties, `ShadyCSS.styleElement(element)` must be called
- * to update the element. There are two cases when this is needed:
- * (1) the element is connected to a new parent, (2) a class is added to the
- * element that causes it to match different custom properties.
- * To address the first case when rendering a custom element, `styleElement`
- * should be called in the element's `connectedCallback`.
- *
- * * Shimmed custom properties may only be defined either for an entire
- * shadowRoot (for example, in a `:host` rule) or via a rule that directly
- * matches an element with a shadowRoot. In other words, instead of flowing from
- * parent to child as do native css custom properties, shimmed custom properties
- * flow only from shadowRoots to nested shadowRoots.
- *
- * * When using `@apply` mixing css shorthand property names with
- * non-shorthand names (for example `border` and `border-width`) is not
- * supported.
- */
-const render$1 = (result, container, options) => {
-    if (!options || typeof options !== 'object' || !options.scopeName) {
-        throw new Error('The `scopeName` option is required.');
-    }
-    const scopeName = options.scopeName;
-    const hasRendered = parts.has(container);
-    const needsScoping = compatibleShadyCSSVersion &&
-        container.nodeType === 11 /* Node.DOCUMENT_FRAGMENT_NODE */ &&
-        !!container.host;
-    // Handle first render to a scope specially...
-    const firstScopeRender = needsScoping && !shadyRenderSet.has(scopeName);
-    // On first scope render, render into a fragment; this cannot be a single
-    // fragment that is reused since nested renders can occur synchronously.
-    const renderContainer = firstScopeRender ? document.createDocumentFragment() : container;
-    render(result, renderContainer, Object.assign({ templateFactory: shadyTemplateFactory(scopeName) }, options));
-    // When performing first scope render,
-    // (1) We've rendered into a fragment so that there's a chance to
-    // `prepareTemplateStyles` before sub-elements hit the DOM
-    // (which might cause them to render based on a common pattern of
-    // rendering in a custom element's `connectedCallback`);
-    // (2) Scope the template with ShadyCSS one time only for this scope.
-    // (3) Render the fragment into the container and make sure the
-    // container knows its `part` is the one we just rendered. This ensures
-    // DOM will be re-used on subsequent renders.
-    if (firstScopeRender) {
-        const part = parts.get(renderContainer);
-        parts.delete(renderContainer);
-        // ShadyCSS might have style sheets (e.g. from `prepareAdoptedCssText`)
-        // that should apply to `renderContainer` even if the rendered value is
-        // not a TemplateInstance. However, it will only insert scoped styles
-        // into the document if `prepareTemplateStyles` has already been called
-        // for the given scope name.
-        const template = part.value instanceof TemplateInstance ?
-            part.value.template :
-            undefined;
-        prepareTemplateStyles(scopeName, renderContainer, template);
-        removeNodes(container, container.firstChild);
-        container.appendChild(renderContainer);
-        parts.set(container, part);
-    }
-    // After elements have hit the DOM, update styling if this is the
-    // initial render to this container.
-    // This is needed whenever dynamic changes are made so it would be
-    // safest to do every render; however, this would regress performance
-    // so we leave it up to the user to call `ShadyCSS.styleElement`
-    // for dynamic changes.
-    if (!hasRendered && needsScoping) {
-        window.ShadyCSS.styleElement(container.host);
-    }
-};
-
-/**
- * @license
- * Copyright (c) 2017 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 _a;
-/**
- * When using Closure Compiler, JSCompiler_renameProperty(property, object) is
- * replaced at compile time by the munged name for object[property]. We cannot
- * alias this function, so we have to use a small shim that has the same
- * behavior when not compiling.
- */
-window.JSCompiler_renameProperty =
-    (prop, _obj) => prop;
-const defaultConverter = {
-    toAttribute(value, type) {
-        switch (type) {
-            case Boolean:
-                return value ? '' : null;
-            case Object:
-            case Array:
-                // if the value is `null` or `undefined` pass this through
-                // to allow removing/no change behavior.
-                return value == null ? value : JSON.stringify(value);
-        }
-        return value;
-    },
-    fromAttribute(value, type) {
-        switch (type) {
-            case Boolean:
-                return value !== null;
-            case Number:
-                return value === null ? null : Number(value);
-            case Object:
-            case Array:
-                return JSON.parse(value);
-        }
-        return value;
-    }
-};
-/**
- * Change function that returns true if `value` is different from `oldValue`.
- * This method is used as the default for a property's `hasChanged` function.
- */
-const notEqual = (value, old) => {
-    // This ensures (old==NaN, value==NaN) always returns false
-    return old !== value && (old === old || value === value);
-};
-const defaultPropertyDeclaration = {
-    attribute: true,
-    type: String,
-    converter: defaultConverter,
-    reflect: false,
-    hasChanged: notEqual
-};
-const microtaskPromise = Promise.resolve(true);
-const STATE_HAS_UPDATED = 1;
-const STATE_UPDATE_REQUESTED = 1 << 2;
-const STATE_IS_REFLECTING_TO_ATTRIBUTE = 1 << 3;
-const STATE_IS_REFLECTING_TO_PROPERTY = 1 << 4;
-const STATE_HAS_CONNECTED = 1 << 5;
-/**
- * The Closure JS Compiler doesn't currently have good support for static
- * property semantics where "this" is dynamic (e.g.
- * https://github.com/google/closure-compiler/issues/3177 and others) so we use
- * this hack to bypass any rewriting by the compiler.
- */
-const finalized = 'finalized';
-/**
- * Base element class which manages element properties and attributes. When
- * properties change, the `update` method is asynchronously called. This method
- * should be supplied by subclassers to render updates as desired.
- */
-class UpdatingElement extends HTMLElement {
-    constructor() {
-        super();
-        this._updateState = 0;
-        this._instanceProperties = undefined;
-        this._updatePromise = microtaskPromise;
-        this._hasConnectedResolver = undefined;
-        /**
-         * Map with keys for any properties that have changed since the last
-         * update cycle with previous values.
-         */
-        this._changedProperties = new Map();
-        /**
-         * Map with keys of properties that should be reflected when updated.
-         */
-        this._reflectingProperties = undefined;
-        this.initialize();
-    }
-    /**
-     * Returns a list of attributes corresponding to the registered properties.
-     * @nocollapse
-     */
-    static get observedAttributes() {
-        // note: piggy backing on this to ensure we're finalized.
-        this.finalize();
-        const attributes = [];
-        // Use forEach so this works even if for/of loops are compiled to for loops
-        // expecting arrays
-        this._classProperties.forEach((v, p) => {
-            const attr = this._attributeNameForProperty(p, v);
-            if (attr !== undefined) {
-                this._attributeToPropertyMap.set(attr, p);
-                attributes.push(attr);
-            }
-        });
-        return attributes;
-    }
-    /**
-     * Ensures the private `_classProperties` property metadata is created.
-     * In addition to `finalize` this is also called in `createProperty` to
-     * ensure the `@property` decorator can add property metadata.
-     */
-    /** @nocollapse */
-    static _ensureClassProperties() {
-        // ensure private storage for property declarations.
-        if (!this.hasOwnProperty(JSCompiler_renameProperty('_classProperties', this))) {
-            this._classProperties = new Map();
-            // NOTE: Workaround IE11 not supporting Map constructor argument.
-            const superProperties = Object.getPrototypeOf(this)._classProperties;
-            if (superProperties !== undefined) {
-                superProperties.forEach((v, k) => this._classProperties.set(k, v));
-            }
-        }
-    }
-    /**
-     * Creates a property accessor on the element prototype if one does not exist.
-     * The property setter calls the property's `hasChanged` property option
-     * or uses a strict identity check to determine whether or not to request
-     * an update.
-     * @nocollapse
-     */
-    static createProperty(name, options = defaultPropertyDeclaration) {
-        // Note, since this can be called by the `@property` decorator which
-        // is called before `finalize`, we ensure storage exists for property
-        // metadata.
-        this._ensureClassProperties();
-        this._classProperties.set(name, options);
-        // Do not generate an accessor if the prototype already has one, since
-        // it would be lost otherwise and that would never be the user's intention;
-        // Instead, we expect users to call `requestUpdate` themselves from
-        // user-defined accessors. Note that if the super has an accessor we will
-        // still overwrite it
-        if (options.noAccessor || this.prototype.hasOwnProperty(name)) {
-            return;
-        }
-        const key = typeof name === 'symbol' ? Symbol() : `__${name}`;
-        Object.defineProperty(this.prototype, name, {
-            // tslint:disable-next-line:no-any no symbol in index
-            get() {
-                return this[key];
-            },
-            set(value) {
-                const oldValue = this[name];
-                this[key] = value;
-                this._requestUpdate(name, oldValue);
-            },
-            configurable: true,
-            enumerable: true
-        });
-    }
-    /**
-     * Creates property accessors for registered properties and ensures
-     * any superclasses are also finalized.
-     * @nocollapse
-     */
-    static finalize() {
-        // finalize any superclasses
-        const superCtor = Object.getPrototypeOf(this);
-        if (!superCtor.hasOwnProperty(finalized)) {
-            superCtor.finalize();
-        }
-        this[finalized] = true;
-        this._ensureClassProperties();
-        // initialize Map populated in observedAttributes
-        this._attributeToPropertyMap = new Map();
-        // make any properties
-        // Note, only process "own" properties since this element will inherit
-        // any properties defined on the superClass, and finalization ensures
-        // the entire prototype chain is finalized.
-        if (this.hasOwnProperty(JSCompiler_renameProperty('properties', this))) {
-            const props = this.properties;
-            // support symbols in properties (IE11 does not support this)
-            const propKeys = [
-                ...Object.getOwnPropertyNames(props),
-                ...(typeof Object.getOwnPropertySymbols === 'function') ?
-                    Object.getOwnPropertySymbols(props) :
-                    []
-            ];
-            // This for/of is ok because propKeys is an array
-            for (const p of propKeys) {
-                // note, use of `any` is due to TypeSript lack of support for symbol in
-                // index types
-                // tslint:disable-next-line:no-any no symbol in index
-                this.createProperty(p, props[p]);
-            }
-        }
-    }
-    /**
-     * Returns the property name for the given attribute `name`.
-     * @nocollapse
-     */
-    static _attributeNameForProperty(name, options) {
-        const attribute = options.attribute;
-        return attribute === false ?
-            undefined :
-            (typeof attribute === 'string' ?
-                attribute :
-                (typeof name === 'string' ? name.toLowerCase() : undefined));
-    }
-    /**
-     * Returns true if a property should request an update.
-     * Called when a property value is set and uses the `hasChanged`
-     * option for the property if present or a strict identity check.
-     * @nocollapse
-     */
-    static _valueHasChanged(value, old, hasChanged = notEqual) {
-        return hasChanged(value, old);
-    }
-    /**
-     * Returns the property value for the given attribute value.
-     * Called via the `attributeChangedCallback` and uses the property's
-     * `converter` or `converter.fromAttribute` property option.
-     * @nocollapse
-     */
-    static _propertyValueFromAttribute(value, options) {
-        const type = options.type;
-        const converter = options.converter || defaultConverter;
-        const fromAttribute = (typeof converter === 'function' ? converter : converter.fromAttribute);
-        return fromAttribute ? fromAttribute(value, type) : value;
-    }
-    /**
-     * Returns the attribute value for the given property value. If this
-     * returns undefined, the property will *not* be reflected to an attribute.
-     * If this returns null, the attribute will be removed, otherwise the
-     * attribute will be set to the value.
-     * This uses the property's `reflect` and `type.toAttribute` property options.
-     * @nocollapse
-     */
-    static _propertyValueToAttribute(value, options) {
-        if (options.reflect === undefined) {
-            return;
-        }
-        const type = options.type;
-        const converter = options.converter;
-        const toAttribute = converter && converter.toAttribute ||
-            defaultConverter.toAttribute;
-        return toAttribute(value, type);
-    }
-    /**
-     * Performs element initialization. By default captures any pre-set values for
-     * registered properties.
-     */
-    initialize() {
-        this._saveInstanceProperties();
-        // ensures first update will be caught by an early access of
-        // `updateComplete`
-        this._requestUpdate();
-    }
-    /**
-     * Fixes any properties set on the instance before upgrade time.
-     * Otherwise these would shadow the accessor and break these properties.
-     * The properties are stored in a Map which is played back after the
-     * constructor runs. Note, on very old versions of Safari (<=9) or Chrome
-     * (<=41), properties created for native platform properties like (`id` or
-     * `name`) may not have default values set in the element constructor. On
-     * these browsers native properties appear on instances and therefore their
-     * default value will overwrite any element default (e.g. if the element sets
-     * this.id = 'id' in the constructor, the 'id' will become '' since this is
-     * the native platform default).
-     */
-    _saveInstanceProperties() {
-        // Use forEach so this works even if for/of loops are compiled to for loops
-        // expecting arrays
-        this.constructor
-            ._classProperties.forEach((_v, p) => {
-            if (this.hasOwnProperty(p)) {
-                const value = this[p];
-                delete this[p];
-                if (!this._instanceProperties) {
-                    this._instanceProperties = new Map();
-                }
-                this._instanceProperties.set(p, value);
-            }
-        });
-    }
-    /**
-     * Applies previously saved instance properties.
-     */
-    _applyInstanceProperties() {
-        // Use forEach so this works even if for/of loops are compiled to for loops
-        // expecting arrays
-        // tslint:disable-next-line:no-any
-        this._instanceProperties.forEach((v, p) => this[p] = v);
-        this._instanceProperties = undefined;
-    }
-    connectedCallback() {
-        this._updateState = this._updateState | STATE_HAS_CONNECTED;
-        // Ensure first connection completes an update. Updates cannot complete
-        // before connection and if one is pending connection the
-        // `_hasConnectionResolver` will exist. If so, resolve it to complete the
-        // update, otherwise requestUpdate.
-        if (this._hasConnectedResolver) {
-            this._hasConnectedResolver();
-            this._hasConnectedResolver = undefined;
-        }
-    }
-    /**
-     * Allows for `super.disconnectedCallback()` in extensions while
-     * reserving the possibility of making non-breaking feature additions
-     * when disconnecting at some point in the future.
-     */
-    disconnectedCallback() {
-    }
-    /**
-     * Synchronizes property values when attributes change.
-     */
-    attributeChangedCallback(name, old, value) {
-        if (old !== value) {
-            this._attributeToProperty(name, value);
-        }
-    }
-    _propertyToAttribute(name, value, options = defaultPropertyDeclaration) {
-        const ctor = this.constructor;
-        const attr = ctor._attributeNameForProperty(name, options);
-        if (attr !== undefined) {
-            const attrValue = ctor._propertyValueToAttribute(value, options);
-            // an undefined value does not change the attribute.
-            if (attrValue === undefined) {
-                return;
-            }
-            // Track if the property is being reflected to avoid
-            // setting the property again via `attributeChangedCallback`. Note:
-            // 1. this takes advantage of the fact that the callback is synchronous.
-            // 2. will behave incorrectly if multiple attributes are in the reaction
-            // stack at time of calling. However, since we process attributes
-            // in `update` this should not be possible (or an extreme corner case
-            // that we'd like to discover).
-            // mark state reflecting
-            this._updateState = this._updateState | STATE_IS_REFLECTING_TO_ATTRIBUTE;
-            if (attrValue == null) {
-                this.removeAttribute(attr);
-            }
-            else {
-                this.setAttribute(attr, attrValue);
-            }
-            // mark state not reflecting
-            this._updateState = this._updateState & ~STATE_IS_REFLECTING_TO_ATTRIBUTE;
-        }
-    }
-    _attributeToProperty(name, value) {
-        // Use tracking info to avoid deserializing attribute value if it was
-        // just set from a property setter.
-        if (this._updateState & STATE_IS_REFLECTING_TO_ATTRIBUTE) {
-            return;
-        }
-        const ctor = this.constructor;
-        const propName = ctor._attributeToPropertyMap.get(name);
-        if (propName !== undefined) {
-            const options = ctor._classProperties.get(propName) || defaultPropertyDeclaration;
-            // mark state reflecting
-            this._updateState = this._updateState | STATE_IS_REFLECTING_TO_PROPERTY;
-            this[propName] =
-                // tslint:disable-next-line:no-any
-                ctor._propertyValueFromAttribute(value, options);
-            // mark state not reflecting
-            this._updateState = this._updateState & ~STATE_IS_REFLECTING_TO_PROPERTY;
-        }
-    }
-    /**
-     * This private version of `requestUpdate` does not access or return the
-     * `updateComplete` promise. This promise can be overridden and is therefore
-     * not free to access.
-     */
-    _requestUpdate(name, oldValue) {
-        let shouldRequestUpdate = true;
-        // If we have a property key, perform property update steps.
-        if (name !== undefined) {
-            const ctor = this.constructor;
-            const options = ctor._classProperties.get(name) || defaultPropertyDeclaration;
-            if (ctor._valueHasChanged(this[name], oldValue, options.hasChanged)) {
-                if (!this._changedProperties.has(name)) {
-                    this._changedProperties.set(name, oldValue);
-                }
-                // Add to reflecting properties set.
-                // Note, it's important that every change has a chance to add the
-                // property to `_reflectingProperties`. This ensures setting
-                // attribute + property reflects correctly.
-                if (options.reflect === true &&
-                    !(this._updateState & STATE_IS_REFLECTING_TO_PROPERTY)) {
-                    if (this._reflectingProperties === undefined) {
-                        this._reflectingProperties = new Map();
-                    }
-                    this._reflectingProperties.set(name, options);
-                }
-            }
-            else {
-                // Abort the request if the property should not be considered changed.
-                shouldRequestUpdate = false;
-            }
-        }
-        if (!this._hasRequestedUpdate && shouldRequestUpdate) {
-            this._enqueueUpdate();
-        }
-    }
-    /**
-     * Requests an update which is processed asynchronously. This should
-     * be called when an element should update based on some state not triggered
-     * by setting a property. In this case, pass no arguments. It should also be
-     * called when manually implementing a property setter. In this case, pass the
-     * property `name` and `oldValue` to ensure that any configured property
-     * options are honored. Returns the `updateComplete` Promise which is resolved
-     * when the update completes.
-     *
-     * @param name {PropertyKey} (optional) name of requesting property
-     * @param oldValue {any} (optional) old value of requesting property
-     * @returns {Promise} A Promise that is resolved when the update completes.
-     */
-    requestUpdate(name, oldValue) {
-        this._requestUpdate(name, oldValue);
-        return this.updateComplete;
-    }
-    /**
-     * Sets up the element to asynchronously update.
-     */
-    async _enqueueUpdate() {
-        // Mark state updating...
-        this._updateState = this._updateState | STATE_UPDATE_REQUESTED;
-        let resolve;
-        let reject;
-        const previousUpdatePromise = this._updatePromise;
-        this._updatePromise = new Promise((res, rej) => {
-            resolve = res;
-            reject = rej;
-        });
-        try {
-            // Ensure any previous update has resolved before updating.
-            // This `await` also ensures that property changes are batched.
-            await previousUpdatePromise;
-        }
-        catch (e) {
-            // Ignore any previous errors. We only care that the previous cycle is
-            // done. Any error should have been handled in the previous update.
-        }
-        // Make sure the element has connected before updating.
-        if (!this._hasConnected) {
-            await new Promise((res) => this._hasConnectedResolver = res);
-        }
-        try {
-            const result = this.performUpdate();
-            // If `performUpdate` returns a Promise, we await it. This is done to
-            // enable coordinating updates with a scheduler. Note, the result is
-            // checked to avoid delaying an additional microtask unless we need to.
-            if (result != null) {
-                await result;
-            }
-        }
-        catch (e) {
-            reject(e);
-        }
-        resolve(!this._hasRequestedUpdate);
-    }
-    get _hasConnected() {
-        return (this._updateState & STATE_HAS_CONNECTED);
-    }
-    get _hasRequestedUpdate() {
-        return (this._updateState & STATE_UPDATE_REQUESTED);
-    }
-    get hasUpdated() {
-        return (this._updateState & STATE_HAS_UPDATED);
-    }
-    /**
-     * Performs an element update. Note, if an exception is thrown during the
-     * update, `firstUpdated` and `updated` will not be called.
-     *
-     * You can override this method to change the timing of updates. If this
-     * method is overridden, `super.performUpdate()` must be called.
-     *
-     * For instance, to schedule updates to occur just before the next frame:
-     *
-     * ```
-     * protected async performUpdate(): Promise<unknown> {
-     *   await new Promise((resolve) => requestAnimationFrame(() => resolve()));
-     *   super.performUpdate();
-     * }
-     * ```
-     */
-    performUpdate() {
-        // Mixin instance properties once, if they exist.
-        if (this._instanceProperties) {
-            this._applyInstanceProperties();
-        }
-        let shouldUpdate = false;
-        const changedProperties = this._changedProperties;
-        try {
-            shouldUpdate = this.shouldUpdate(changedProperties);
-            if (shouldUpdate) {
-                this.update(changedProperties);
-            }
-        }
-        catch (e) {
-            // Prevent `firstUpdated` and `updated` from running when there's an
-            // update exception.
-            shouldUpdate = false;
-            throw e;
-        }
-        finally {
-            // Ensure element can accept additional updates after an exception.
-            this._markUpdated();
-        }
-        if (shouldUpdate) {
-            if (!(this._updateState & STATE_HAS_UPDATED)) {
-                this._updateState = this._updateState | STATE_HAS_UPDATED;
-                this.firstUpdated(changedProperties);
-            }
-            this.updated(changedProperties);
-        }
-    }
-    _markUpdated() {
-        this._changedProperties = new Map();
-        this._updateState = this._updateState & ~STATE_UPDATE_REQUESTED;
-    }
-    /**
-     * Returns a Promise that resolves when the element has completed updating.
-     * The Promise value is a boolean that is `true` if the element completed the
-     * update without triggering another update. The Promise result is `false` if
-     * a property was set inside `updated()`. If the Promise is rejected, an
-     * exception was thrown during the update.
-     *
-     * To await additional asynchronous work, override the `_getUpdateComplete`
-     * method. For example, it is sometimes useful to await a rendered element
-     * before fulfilling this Promise. To do this, first await
-     * `super._getUpdateComplete()`, then any subsequent state.
-     *
-     * @returns {Promise} The Promise returns a boolean that indicates if the
-     * update resolved without triggering another update.
-     */
-    get updateComplete() {
-        return this._getUpdateComplete();
-    }
-    /**
-     * Override point for the `updateComplete` promise.
-     *
-     * It is not safe to override the `updateComplete` getter directly due to a
-     * limitation in TypeScript which means it is not possible to call a
-     * superclass getter (e.g. `super.updateComplete.then(...)`) when the target
-     * language is ES5 (https://github.com/microsoft/TypeScript/issues/338).
-     * This method should be overridden instead. For example:
-     *
-     *   class MyElement extends LitElement {
-     *     async _getUpdateComplete() {
-     *       await super._getUpdateComplete();
-     *       await this._myChild.updateComplete;
-     *     }
-     *   }
-     */
-    _getUpdateComplete() {
-        return this._updatePromise;
-    }
-    /**
-     * Controls whether or not `update` should be called when the element requests
-     * an update. By default, this method always returns `true`, but this can be
-     * customized to control when to update.
-     *
-     * * @param _changedProperties Map of changed properties with old values
-     */
-    shouldUpdate(_changedProperties) {
-        return true;
-    }
-    /**
-     * Updates the element. This method reflects property values to attributes.
-     * It can be overridden to render and keep updated element DOM.
-     * Setting properties inside this method will *not* trigger
-     * another update.
-     *
-     * * @param _changedProperties Map of changed properties with old values
-     */
-    update(_changedProperties) {
-        if (this._reflectingProperties !== undefined &&
-            this._reflectingProperties.size > 0) {
-            // Use forEach so this works even if for/of loops are compiled to for
-            // loops expecting arrays
-            this._reflectingProperties.forEach((v, k) => this._propertyToAttribute(k, this[k], v));
-            this._reflectingProperties = undefined;
-        }
-    }
-    /**
-     * Invoked whenever the element is updated. Implement to perform
-     * post-updating tasks via DOM APIs, for example, focusing an element.
-     *
-     * Setting properties inside this method will trigger the element to update
-     * again after this update cycle completes.
-     *
-     * * @param _changedProperties Map of changed properties with old values
-     */
-    updated(_changedProperties) {
-    }
-    /**
-     * Invoked when the element is first updated. Implement to perform one time
-     * work on the element after update.
-     *
-     * Setting properties inside this method will trigger the element to update
-     * again after this update cycle completes.
-     *
-     * * @param _changedProperties Map of changed properties with old values
-     */
-    firstUpdated(_changedProperties) {
-    }
-}
-_a = finalized;
-/**
- * Marks class as having finished creating properties.
- */
-UpdatingElement[_a] = true;
-
+const Y=(t,e)=>`${t}--${e}`;let I=!0;void 0===window.ShadyCSS?I=!1:void 0===window.ShadyCSS.prepareTemplateDom&&(console.warn("Incompatible ShadyCSS version detected. Please update to at least @webcomponents/webcomponentsjs@2.0.2 and @webcomponents/shadycss@1.3.1."),I=!1);const z=t=>e=>{const s=Y(e.type,t);let i=O.get(s);void 0===i&&(i={stringsArray:new WeakMap,keyString:new Map},O.set(s,i));let n=i.stringsArray.get(e.strings);if(void 0!==n)return n;const o=e.strings.join(a);if(n=i.keyString.get(o),void 0===n){const s=e.getTemplateElement();I&&window.ShadyCSS.prepareTemplateDom(s,t),n=new d(e,s),i.keyString.set(o,n)}return i.stringsArray.set(e.strings,n),n},U=["html","svg"],B=new Set,j=(t,e,s)=>{B.add(t);const i=s?s.element:document.createElement("template"),n=e.querySelectorAll("style"),{length:o}=n;if(0===o)return void window.ShadyCSS.prepareTemplateStyles(i,t);const r=document.createElement("style");for(let t=0;t<o;t++){const e=n[t];e.parentNode.removeChild(e),r.textContent+=e.textContent}(t=>{U.forEach(e=>{const s=O.get(Y(e,t));void 0!==s&&s.keyString.forEach(t=>{const{element:{content:e}}=t,s=new Set;Array.from(e.querySelectorAll("style")).forEach(t=>{s.add(t)}),F(t,s)})})})(t);const a=i.content;s?function(t,e,s=null){const{element:{content:i},parts:n}=t;if(null==s)return void i.appendChild(e);const o=document.createTreeWalker(i,q,null,!1);let r=L(n),a=0,l=-1;for(;o.nextNode();){for(l++,o.currentNode===s&&(a=V(e),s.parentNode.insertBefore(e,s));-1!==r&&n[r].index===l;){if(a>0){for(;-1!==r;)n[r].index+=a,r=L(n,r);return}r=L(n,r)}}}(s,r,a.firstChild):a.insertBefore(r,a.firstChild),window.ShadyCSS.prepareTemplateStyles(i,t);const l=a.querySelector("style");if(window.ShadyCSS.nativeShadow&&null!==l)e.insertBefore(l.cloneNode(!0),e.firstChild);else if(s){a.insertBefore(r,a.firstChild);const t=new Set;t.add(r),F(s,t)}};window.JSCompiler_renameProperty=(t,e)=>t;const W={toAttribute(t,e){switch(e){case Boolean:return t?"":null;case Object:case Array:return null==t?t:JSON.stringify(t)}return t},fromAttribute(t,e){switch(e){case Boolean:return null!==t;case Number:return null===t?null:Number(t);case Object:case Array:return JSON.parse(t)}return t}},J=(t,e)=>e!==t&&(e==e||t==t),Z={attribute:!0,type:String,converter:W,reflect:!1,hasChanged:J},G=Promise.resolve(!0),X=1,K=4,Q=8,tt=16,et=32,st="finalized";class it extends HTMLElement{constructor(){super(),this._updateState=0,this._instanceProperties=void 0,this._updatePromise=G,this._hasConnectedResolver=void 0,this._changedProperties=new Map,this._reflectingProperties=void 0,this.initialize()}static get observedAttributes(){this.finalize();const t=[];return this._classProperties.forEach((e,s)=>{const i=this._attributeNameForProperty(s,e);void 0!==i&&(this._attributeToPropertyMap.set(i,s),t.push(i))}),t}static _ensureClassProperties(){if(!this.hasOwnProperty(JSCompiler_renameProperty("_classProperties",this))){this._classProperties=new Map;const t=Object.getPrototypeOf(this)._classProperties;void 0!==t&&t.forEach((t,e)=>this._classProperties.set(e,t))}}static createProperty(t,e=Z){if(this._ensureClassProperties(),this._classProperties.set(t,e),e.noAccessor||this.prototype.hasOwnProperty(t))return;const s="symbol"==typeof t?Symbol():`__${t}`;Object.defineProperty(this.prototype,t,{get(){return this[s]},set(e){const i=this[t];this[s]=e,this._requestUpdate(t,i)},configurable:!0,enumerable:!0})}static finalize(){const t=Object.getPrototypeOf(this);if(t.hasOwnProperty(st)||t.finalize(),this[st]=!0,this._ensureClassProperties(),this._attributeToPropertyMap=new Map,this.hasOwnProperty(JSCompiler_renameProperty("properties",this))){const t=this.properties,e=[...Object.getOwnPropertyNames(t),..."function"==typeof Object.getOwnPropertySymbols?Object.getOwnPropertySymbols(t):[]];for(const s of e)this.createProperty(s,t[s])}}static _attributeNameForProperty(t,e){const s=e.attribute;return!1===s?void 0:"string"==typeof s?s:"string"==typeof t?t.toLowerCase():void 0}static _valueHasChanged(t,e,s=J){return s(t,e)}static _propertyValueFromAttribute(t,e){const s=e.type,i=e.converter||W,n="function"==typeof i?i:i.fromAttribute;return n?n(t,s):t}static _propertyValueToAttribute(t,e){if(void 0===e.reflect)return;const s=e.type,i=e.converter;return(i&&i.toAttribute||W.toAttribute)(t,s)}initialize(){this._saveInstanceProperties(),this._requestUpdate()}_saveInstanceProperties(){this.constructor._classProperties.forEach((t,e)=>{if(this.hasOwnProperty(e)){const t=this[e];delete this[e],this._instanceProperties||(this._instanceProperties=new Map),this._instanceProperties.set(e,t)}})}_applyInstanceProperties(){this._instanceProperties.forEach((t,e)=>this[e]=t),this._instanceProperties=void 0}connectedCallback(){this._updateState=this._updateState|et,this._hasConnectedResolver&&(this._hasConnectedResolver(),this._hasConnectedResolver=void 0)}disconnectedCallback(){}attributeChangedCallback(t,e,s){e!==s&&this._attributeToProperty(t,s)}_propertyToAttribute(t,e,s=Z){const i=this.constructor,n=i._attributeNameForProperty(t,s);if(void 0!==n){const t=i._propertyValueToAttribute(e,s);if(void 0===t)return;this._updateState=this._updateState|Q,null==t?this.removeAttribute(n):this.setAttribute(n,t),this._updateState=this._updateState&~Q}}_attributeToProperty(t,e){if(this._updateState&Q)return;const s=this.constructor,i=s._attributeToPropertyMap.get(t);if(void 0!==i){const t=s._classProperties.get(i)||Z;this._updateState=this._updateState|tt,this[i]=s._propertyValueFromAttribute(e,t),this._updateState=this._updateState&~tt}}_requestUpdate(t,e){let s=!0;if(void 0!==t){const i=this.constructor,n=i._classProperties.get(t)||Z;i._valueHasChanged(this[t],e,n.hasChanged)?(this._changedProperties.has(t)||this._changedProperties.set(t,e),!0!==n.reflect||this._updateState&tt||(void 0===this._reflectingProperties&&(this._reflectingProperties=new Map),this._reflectingProperties.set(t,n))):s=!1}!this._hasRequestedUpdate&&s&&this._enqueueUpdate()}requestUpdate(t,e){return this._requestUpdate(t,e),this.updateComplete}async _enqueueUpdate(){let t,e;this._updateState=this._updateState|K;const s=this._updatePromise;this._updatePromise=new Promise((s,i)=>{t=s,e=i});try{await s}catch(t){}this._hasConnected||await new Promise(t=>this._hasConnectedResolver=t);try{const t=this.performUpdate();null!=t&&await t}catch(t){e(t)}t(!this._hasRequestedUpdate)}get _hasConnected(){return this._updateState&et}get _hasRequestedUpdate(){return this._updateState&K}get hasUpdated(){return this._updateState&X}performUpdate(){this._instanceProperties&&this._applyInstanceProperties();let t=!1;const e=this._changedProperties;try{t=this.shouldUpdate(e),t&&this.update(e)}catch(e){throw t=!1,e}finally{this._markUpdated()}t&&(this._updateState&X||(this._updateState=this._updateState|X,this.firstUpdated(e)),this.updated(e))}_markUpdated(){this._changedProperties=new Map,this._updateState=this._updateState&~K}get updateComplete(){return this._getUpdateComplete()}_getUpdateComplete(){return this._updatePromise}shouldUpdate(t){return!0}update(t){void 0!==this._reflectingProperties&&this._reflectingProperties.size>0&&(this._reflectingProperties.forEach((t,e)=>this._propertyToAttribute(e,this[e],t)),this._reflectingProperties=void 0)}updated(t){}firstUpdated(t){}}it[st]=!0;
 /**
 @license
 Copyright (c) 2019 The Polymer Project Authors. All rights reserved.
@@ -2213,59 +129,7 @@ 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
 */
-const supportsAdoptingStyleSheets = ('adoptedStyleSheets' in Document.prototype) &&
-    ('replace' in CSSStyleSheet.prototype);
-const constructionToken = Symbol();
-class CSSResult {
-    constructor(cssText, safeToken) {
-        if (safeToken !== constructionToken) {
-            throw new Error('CSSResult is not constructable. Use `unsafeCSS` or `css` instead.');
-        }
-        this.cssText = cssText;
-    }
-    // Note, this is a getter so that it's lazy. In practice, this means
-    // stylesheets are not created until the first element instance is made.
-    get styleSheet() {
-        if (this._styleSheet === undefined) {
-            // Note, if `adoptedStyleSheets` is supported then we assume CSSStyleSheet
-            // is constructable.
-            if (supportsAdoptingStyleSheets) {
-                this._styleSheet = new CSSStyleSheet();
-                this._styleSheet.replaceSync(this.cssText);
-            }
-            else {
-                this._styleSheet = null;
-            }
-        }
-        return this._styleSheet;
-    }
-    toString() {
-        return this.cssText;
-    }
-}
-const textFromCSSResult = (value) => {
-    if (value instanceof CSSResult) {
-        return value.cssText;
-    }
-    else if (typeof value === 'number') {
-        return value;
-    }
-    else {
-        throw new Error(`Value passed to 'css' function must be a 'css' function result: ${value}. Use 'unsafeCSS' to pass non-literal values, but
-            take care to ensure page security.`);
-    }
-};
-/**
- * Template tag which which can be used with LitElement's `style` property to
- * set element styles. For security reasons, only literal string values may be
- * used. To incorporate non-literal values `unsafeCSS` may be used inside a
- * template string part.
- */
-const css = (strings, ...values) => {
-    const cssText = values.reduce((acc, v, idx) => acc + textFromCSSResult(v) + strings[idx + 1], strings[0]);
-    return new CSSResult(cssText, constructionToken);
-};
-
+const nt="adoptedStyleSheets"in Document.prototype&&"replace"in CSSStyleSheet.prototype,ot=Symbol();class rt{constructor(t,e){if(e!==ot)throw new Error("CSSResult is not constructable. Use `unsafeCSS` or `css` instead.");this.cssText=t}get styleSheet(){return void 0===this._styleSheet&&(nt?(this._styleSheet=new CSSStyleSheet,this._styleSheet.replaceSync(this.cssText)):this._styleSheet=null),this._styleSheet}toString(){return this.cssText}}const at=(t,...e)=>{const s=e.reduce((e,s,i)=>e+(t=>{if(t instanceof rt)return t.cssText;if("number"==typeof t)return t;throw new Error(`Value passed to 'css' function must be a 'css' function result: ${t}. Use 'unsafeCSS' to pass non-literal values, but\n            take care to ensure page security.`)})(s)+t[i+1],t[0]);return new rt(s,ot)};
 /**
  * @license
  * Copyright (c) 2017 The Polymer Project Authors. All rights reserved.
@@ -2279,190 +143,7 @@ const css = (strings, ...values) => {
  * subject to an additional IP rights grant found at
  * http://polymer.github.io/PATENTS.txt
  */
-// IMPORTANT: do not change the property name or the assignment expression.
-// This line will be used in regexes to search for LitElement usage.
-// TODO(justinfagnani): inject version number at build time
-(window['litElementVersions'] || (window['litElementVersions'] = []))
-    .push('2.2.1');
-/**
- * Minimal implementation of Array.prototype.flat
- * @param arr the array to flatten
- * @param result the accumlated result
- */
-function arrayFlat(styles, result = []) {
-    for (let i = 0, length = styles.length; i < length; i++) {
-        const value = styles[i];
-        if (Array.isArray(value)) {
-            arrayFlat(value, result);
-        }
-        else {
-            result.push(value);
-        }
-    }
-    return result;
-}
-/** Deeply flattens styles array. Uses native flat if available. */
-const flattenStyles = (styles) => styles.flat ? styles.flat(Infinity) : arrayFlat(styles);
-class LitElement extends UpdatingElement {
-    /** @nocollapse */
-    static finalize() {
-        // The Closure JS Compiler does not always preserve the correct "this"
-        // when calling static super methods (b/137460243), so explicitly bind.
-        super.finalize.call(this);
-        // Prepare styling that is stamped at first render time. Styling
-        // is built from user provided `styles` or is inherited from the superclass.
-        this._styles =
-            this.hasOwnProperty(JSCompiler_renameProperty('styles', this)) ?
-                this._getUniqueStyles() :
-                this._styles || [];
-    }
-    /** @nocollapse */
-    static _getUniqueStyles() {
-        // Take care not to call `this.styles` multiple times since this generates
-        // new CSSResults each time.
-        // TODO(sorvell): Since we do not cache CSSResults by input, any
-        // shared styles will generate new stylesheet objects, which is wasteful.
-        // This should be addressed when a browser ships constructable
-        // stylesheets.
-        const userStyles = this.styles;
-        const styles = [];
-        if (Array.isArray(userStyles)) {
-            const flatStyles = flattenStyles(userStyles);
-            // As a performance optimization to avoid duplicated styling that can
-            // occur especially when composing via subclassing, de-duplicate styles
-            // preserving the last item in the list. The last item is kept to
-            // try to preserve cascade order with the assumption that it's most
-            // important that last added styles override previous styles.
-            const styleSet = flatStyles.reduceRight((set, s) => {
-                set.add(s);
-                // on IE set.add does not return the set.
-                return set;
-            }, new Set());
-            // Array.from does not work on Set in IE
-            styleSet.forEach((v) => styles.unshift(v));
-        }
-        else if (userStyles) {
-            styles.push(userStyles);
-        }
-        return styles;
-    }
-    /**
-     * Performs element initialization. By default this calls `createRenderRoot`
-     * to create the element `renderRoot` node and captures any pre-set values for
-     * registered properties.
-     */
-    initialize() {
-        super.initialize();
-        this.renderRoot =
-            this.createRenderRoot();
-        // Note, if renderRoot is not a shadowRoot, styles would/could apply to the
-        // element's getRootNode(). While this could be done, we're choosing not to
-        // support this now since it would require different logic around de-duping.
-        if (window.ShadowRoot && this.renderRoot instanceof window.ShadowRoot) {
-            this.adoptStyles();
-        }
-    }
-    /**
-     * Returns the node into which the element should render and by default
-     * creates and returns an open shadowRoot. Implement to customize where the
-     * element's DOM is rendered. For example, to render into the element's
-     * childNodes, return `this`.
-     * @returns {Element|DocumentFragment} Returns a node into which to render.
-     */
-    createRenderRoot() {
-        return this.attachShadow({ mode: 'open' });
-    }
-    /**
-     * Applies styling to the element shadowRoot using the `static get styles`
-     * property. Styling will apply using `shadowRoot.adoptedStyleSheets` where
-     * available and will fallback otherwise. When Shadow DOM is polyfilled,
-     * ShadyCSS scopes styles and adds them to the document. When Shadow DOM
-     * is available but `adoptedStyleSheets` is not, styles are appended to the
-     * end of the `shadowRoot` to [mimic spec
-     * behavior](https://wicg.github.io/construct-stylesheets/#using-constructed-stylesheets).
-     */
-    adoptStyles() {
-        const styles = this.constructor._styles;
-        if (styles.length === 0) {
-            return;
-        }
-        // There are three separate cases here based on Shadow DOM support.
-        // (1) shadowRoot polyfilled: use ShadyCSS
-        // (2) shadowRoot.adoptedStyleSheets available: use it.
-        // (3) shadowRoot.adoptedStyleSheets polyfilled: append styles after
-        // rendering
-        if (window.ShadyCSS !== undefined && !window.ShadyCSS.nativeShadow) {
-            window.ShadyCSS.ScopingShim.prepareAdoptedCssText(styles.map((s) => s.cssText), this.localName);
-        }
-        else if (supportsAdoptingStyleSheets) {
-            this.renderRoot.adoptedStyleSheets =
-                styles.map((s) => s.styleSheet);
-        }
-        else {
-            // This must be done after rendering so the actual style insertion is done
-            // in `update`.
-            this._needsShimAdoptedStyleSheets = true;
-        }
-    }
-    connectedCallback() {
-        super.connectedCallback();
-        // Note, first update/render handles styleElement so we only call this if
-        // connected after first update.
-        if (this.hasUpdated && window.ShadyCSS !== undefined) {
-            window.ShadyCSS.styleElement(this);
-        }
-    }
-    /**
-     * Updates the element. This method reflects property values to attributes
-     * and calls `render` to render DOM via lit-html. Setting properties inside
-     * this method will *not* trigger another update.
-     * * @param _changedProperties Map of changed properties with old values
-     */
-    update(changedProperties) {
-        super.update(changedProperties);
-        const templateResult = this.render();
-        if (templateResult instanceof TemplateResult) {
-            this.constructor
-                .render(templateResult, this.renderRoot, { scopeName: this.localName, eventContext: this });
-        }
-        // When native Shadow DOM is used but adoptedStyles are not supported,
-        // insert styling after rendering to ensure adoptedStyles have highest
-        // priority.
-        if (this._needsShimAdoptedStyleSheets) {
-            this._needsShimAdoptedStyleSheets = false;
-            this.constructor._styles.forEach((s) => {
-                const style = document.createElement('style');
-                style.textContent = s.cssText;
-                this.renderRoot.appendChild(style);
-            });
-        }
-    }
-    /**
-     * Invoked on each update to perform rendering tasks. This method must return
-     * a lit-html TemplateResult. Setting properties inside this method will *not*
-     * trigger the element to update.
-     */
-    render() {
-    }
-}
-/**
- * Ensure this class is marked as `finalized` as an optimization ensuring
- * it will not needlessly try to `finalize`.
- *
- * Note this property name is a string to prevent breaking Closure JS Compiler
- * optimizations. See updating-element.ts for more information.
- */
-LitElement['finalized'] = true;
-/**
- * Render method used to render the lit-html TemplateResult to the element's
- * DOM.
- * @param {TemplateResult} Template to render.
- * @param {Element|DocumentFragment} Node into which to render.
- * @param {String} Element name.
- * @nocollapse
- */
-LitElement.render = render$1;
-
+(window.litElementVersions||(window.litElementVersions=[])).push("2.2.1");const lt=t=>t.flat?t.flat(1/0):function t(e,s=[]){for(let i=0,n=e.length;i<n;i++){const n=e[i];Array.isArray(n)?t(n,s):s.push(n)}return s}(t);class ht extends it{static finalize(){super.finalize.call(this),this._styles=this.hasOwnProperty(JSCompiler_renameProperty("styles",this))?this._getUniqueStyles():this._styles||[]}static _getUniqueStyles(){const t=this.styles,e=[];if(Array.isArray(t)){lt(t).reduceRight((t,e)=>(t.add(e),t),new Set).forEach(t=>e.unshift(t))}else t&&e.push(t);return e}initialize(){super.initialize(),this.renderRoot=this.createRenderRoot(),window.ShadowRoot&&this.renderRoot instanceof window.ShadowRoot&&this.adoptStyles()}createRenderRoot(){return this.attachShadow({mode:"open"})}adoptStyles(){const t=this.constructor._styles;0!==t.length&&(void 0===window.ShadyCSS||window.ShadyCSS.nativeShadow?nt?this.renderRoot.adoptedStyleSheets=t.map(t=>t.styleSheet):this._needsShimAdoptedStyleSheets=!0:window.ShadyCSS.ScopingShim.prepareAdoptedCssText(t.map(t=>t.cssText),this.localName))}connectedCallback(){super.connectedCallback(),this.hasUpdated&&void 0!==window.ShadyCSS&&window.ShadyCSS.styleElement(this)}update(t){super.update(t);const e=this.render();e instanceof y&&this.constructor.render(e,this.renderRoot,{scopeName:this.localName,eventContext:this}),this._needsShimAdoptedStyleSheets&&(this._needsShimAdoptedStyleSheets=!1,this.constructor._styles.forEach(t=>{const e=document.createElement("style");e.textContent=t.cssText,this.renderRoot.appendChild(e)}))}render(){}}ht.finalized=!0,ht.render=(t,e,s)=>{if(!s||"object"!=typeof s||!s.scopeName)throw new Error("The `scopeName` option is required.");const i=s.scopeName,o=R.has(e),r=I&&11===e.nodeType&&!!e.host,a=r&&!B.has(i),l=a?document.createDocumentFragment():e;if(((t,e,s)=>{let i=R.get(e);void 0===i&&(n(e,e.firstChild),R.set(e,i=new C(Object.assign({templateFactory:A},s))),i.appendInto(e)),i.setValue(t),i.commit()})(t,l,Object.assign({templateFactory:z(i)},s)),a){const t=R.get(l);R.delete(l);const s=t.value instanceof f?t.value.template:void 0;j(i,l,s),n(e,e.firstChild),e.appendChild(l),R.set(e,t)}!o&&r&&window.ShadyCSS.styleElement(e.host)};
 /**
  * @license
  * Copyright (c) 2018 The Polymer Project Authors. All rights reserved.
@@ -2476,1399 +157,451 @@ LitElement.render = render$1;
  * subject to an additional IP rights grant found at
  * http://polymer.github.io/PATENTS.txt
  */
-/**
- * Stores the ClassInfo object applied to a given AttributePart.
- * Used to unset existing values when a new ClassInfo object is applied.
- */
-const classMapCache = new WeakMap();
-/**
- * A directive that applies CSS classes. This must be used in the `class`
- * attribute and must be the only part used in the attribute. It takes each
- * property in the `classInfo` argument and adds the property name to the
- * element's `classList` if the property value is truthy; if the property value
- * is falsey, the property name is removed from the element's `classList`. For
- * example
- * `{foo: bar}` applies the class `foo` if the value of `bar` is truthy.
- * @param classInfo {ClassInfo}
- */
-const classMap = directive((classInfo) => (part) => {
-    if (!(part instanceof AttributePart) || (part instanceof PropertyPart) ||
-        part.committer.name !== 'class' || part.committer.parts.length > 1) {
-        throw new Error('The `classMap` directive must be used in the `class` attribute ' +
-            'and must be the only part in the attribute.');
-    }
-    const { committer } = part;
-    const { element } = committer;
-    // handle static classes
-    if (!classMapCache.has(part)) {
-        element.className = committer.strings.join(' ');
-    }
-    const { classList } = element;
-    // remove old classes that no longer apply
-    const oldInfo = classMapCache.get(part);
-    for (const name in oldInfo) {
-        if (!(name in classInfo)) {
-            classList.remove(name);
-        }
-    }
-    // add new classes
-    for (const name in classInfo) {
-        const value = classInfo[name];
-        if (!oldInfo || value !== oldInfo[name]) {
-            // We explicitly want a loose truthy check here because
-            // it seems more convenient that '' and 0 are skipped.
-            const method = value ? 'add' : 'remove';
-            classList[method](name);
-        }
-    }
-    classMapCache.set(part, classInfo);
-});
-
-function hass() {
-  if(document.querySelector('hc-main'))
-    return document.querySelector('hc-main').hass;
-
-  if(document.querySelector('home-assistant'))
-    return document.querySelector('home-assistant').hass;
-
-  return undefined;
-}
-async function load_lovelace() {
-  if(customElements.get("hui-view")) return true;
-
-  await customElements.whenDefined("partial-panel-resolver");
-  const ppr = document.createElement("partial-panel-resolver");
-  ppr.hass = {panels: [{
-    url_path: "tmp",
-    "component_name": "lovelace",
-  }]};
-  ppr._updateRoutes();
-  await ppr.routerOptions.routes.tmp.load();
-  if(!customElements.get("ha-panel-lovelace")) return false;
-  const p = document.createElement("ha-panel-lovelace");
-  p.hass = hass();
-  if(p.hass === undefined) {
-    await new Promise(resolve => {
-      window.addEventListener('connection-status', (ev) => {
-        console.log(ev);
-        resolve();
-      }, {once: true});
-    });
-    p.hass = hass();
-  }
-  p.panel = {config: {mode: null}};
-  p._fetchConfig();
-  return true;
-}
-
-async function _selectTree(root, path, all=false) {
-  let el = root;
-  if(typeof(path) === "string") {
-    path = path.split(/(\$| )/);
-  }
-  for(const [i, p] of path.entries()) {
-    if(!p.trim().length) continue;
-    if(!el) return null;
-    if(el.localName && el.localName.includes("-"))
-      await customElements.whenDefined(el.localName);
-    if(el.updateComplete)
-      await el.updateComplete;
-    if(p === "$")
-      if(all && i == path.length-1)
-        el = [el.shadowRoot];
-      else
-        el = el.shadowRoot;
-    else
-      if(all && i == path.length-1)
-        el = el.querySelectorAll(p);
-      else
-        el = el.querySelector(p);
-  }
-  return el;
-}
-
-async function selectTree(root, path, all=false, timeout=10000) {
-  return Promise.race([
-    _selectTree(root, path, all),
-    new Promise((_, reject) => setTimeout(() => reject(new Error('timeout')), timeout))
-  ]).catch((err) => {
-    if(!err.message || err.message !== "timeout")
-      throw(err);
-    return null;
-  });
-}
-
-let helpers = window.cardHelpers;
-const helperPromise = new Promise(async (resolve, reject) => {
-  if(helpers) resolve();
-
-  const updateHelpers = async () => {
-    helpers = await window.loadCardHelpers();
-    window.cardHelpers = helpers;
-    resolve();
-  };
-
-  if(window.loadCardHelpers) {
-    updateHelpers();
-  } else {
-    // If loadCardHelpers didn't exist, force load lovelace and try once more.
-    window.addEventListener("load", async () => {
-      load_lovelace();
-      if(window.loadCardHelpers) {
-        updateHelpers();
-      }
-    });
-  }
-});
-
-async function closePopUp() {
-  const root = document.querySelector("home-assistant") || document.querySelector("hc-root");
-  const el = await selectTree(root, "$ card-tools-popup");
-
-  if(el)
-    el.closeDialog();
-}
-
-/**
- * Parse or format dates
- * @class fecha
- */
-var fecha = {};
-var token = /d{1,4}|M{1,4}|YY(?:YY)?|S{1,3}|Do|ZZ|([HhMsDm])\1?|[aA]|"[^"]*"|'[^']*'/g;
-var twoDigits = '\\d\\d?';
-var threeDigits = '\\d{3}';
-var fourDigits = '\\d{4}';
-var word = '[^\\s]+';
-var literal = /\[([^]*?)\]/gm;
-var noop = function () {
-};
-
-function regexEscape(str) {
-  return str.replace( /[|\\{()[^$+*?.-]/g, '\\$&');
-}
-
-function shorten(arr, sLen) {
-  var newArr = [];
-  for (var i = 0, len = arr.length; i < len; i++) {
-    newArr.push(arr[i].substr(0, sLen));
-  }
-  return newArr;
-}
-
-function monthUpdate(arrName) {
-  return function (d, v, i18n) {
-    var index = i18n[arrName].indexOf(v.charAt(0).toUpperCase() + v.substr(1).toLowerCase());
-    if (~index) {
-      d.month = index;
-    }
-  };
-}
-
-function pad(val, len) {
-  val = String(val);
-  len = len || 2;
-  while (val.length < len) {
-    val = '0' + val;
-  }
-  return val;
-}
-
-var dayNames = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'];
-var monthNames = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];
-var monthNamesShort = shorten(monthNames, 3);
-var dayNamesShort = shorten(dayNames, 3);
-fecha.i18n = {
-  dayNamesShort: dayNamesShort,
-  dayNames: dayNames,
-  monthNamesShort: monthNamesShort,
-  monthNames: monthNames,
-  amPm: ['am', 'pm'],
-  DoFn: function DoFn(D) {
-    return D + ['th', 'st', 'nd', 'rd'][D % 10 > 3 ? 0 : (D - D % 10 !== 10) * D % 10];
-  }
-};
-
-var formatFlags = {
-  D: function(dateObj) {
-    return dateObj.getDate();
-  },
-  DD: function(dateObj) {
-    return pad(dateObj.getDate());
-  },
-  Do: function(dateObj, i18n) {
-    return i18n.DoFn(dateObj.getDate());
-  },
-  d: function(dateObj) {
-    return dateObj.getDay();
-  },
-  dd: function(dateObj) {
-    return pad(dateObj.getDay());
-  },
-  ddd: function(dateObj, i18n) {
-    return i18n.dayNamesShort[dateObj.getDay()];
-  },
-  dddd: function(dateObj, i18n) {
-    return i18n.dayNames[dateObj.getDay()];
-  },
-  M: function(dateObj) {
-    return dateObj.getMonth() + 1;
-  },
-  MM: function(dateObj) {
-    return pad(dateObj.getMonth() + 1);
-  },
-  MMM: function(dateObj, i18n) {
-    return i18n.monthNamesShort[dateObj.getMonth()];
-  },
-  MMMM: function(dateObj, i18n) {
-    return i18n.monthNames[dateObj.getMonth()];
-  },
-  YY: function(dateObj) {
-    return pad(String(dateObj.getFullYear()), 4).substr(2);
-  },
-  YYYY: function(dateObj) {
-    return pad(dateObj.getFullYear(), 4);
-  },
-  h: function(dateObj) {
-    return dateObj.getHours() % 12 || 12;
-  },
-  hh: function(dateObj) {
-    return pad(dateObj.getHours() % 12 || 12);
-  },
-  H: function(dateObj) {
-    return dateObj.getHours();
-  },
-  HH: function(dateObj) {
-    return pad(dateObj.getHours());
-  },
-  m: function(dateObj) {
-    return dateObj.getMinutes();
-  },
-  mm: function(dateObj) {
-    return pad(dateObj.getMinutes());
-  },
-  s: function(dateObj) {
-    return dateObj.getSeconds();
-  },
-  ss: function(dateObj) {
-    return pad(dateObj.getSeconds());
-  },
-  S: function(dateObj) {
-    return Math.round(dateObj.getMilliseconds() / 100);
-  },
-  SS: function(dateObj) {
-    return pad(Math.round(dateObj.getMilliseconds() / 10), 2);
-  },
-  SSS: function(dateObj) {
-    return pad(dateObj.getMilliseconds(), 3);
-  },
-  a: function(dateObj, i18n) {
-    return dateObj.getHours() < 12 ? i18n.amPm[0] : i18n.amPm[1];
-  },
-  A: function(dateObj, i18n) {
-    return dateObj.getHours() < 12 ? i18n.amPm[0].toUpperCase() : i18n.amPm[1].toUpperCase();
-  },
-  ZZ: function(dateObj) {
-    var o = dateObj.getTimezoneOffset();
-    return (o > 0 ? '-' : '+') + pad(Math.floor(Math.abs(o) / 60) * 100 + Math.abs(o) % 60, 4);
-  }
-};
-
-var parseFlags = {
-  D: [twoDigits, function (d, v) {
-    d.day = v;
-  }],
-  Do: [twoDigits + word, function (d, v) {
-    d.day = parseInt(v, 10);
-  }],
-  M: [twoDigits, function (d, v) {
-    d.month = v - 1;
-  }],
-  YY: [twoDigits, function (d, v) {
-    var da = new Date(), cent = +('' + da.getFullYear()).substr(0, 2);
-    d.year = '' + (v > 68 ? cent - 1 : cent) + v;
-  }],
-  h: [twoDigits, function (d, v) {
-    d.hour = v;
-  }],
-  m: [twoDigits, function (d, v) {
-    d.minute = v;
-  }],
-  s: [twoDigits, function (d, v) {
-    d.second = v;
-  }],
-  YYYY: [fourDigits, function (d, v) {
-    d.year = v;
-  }],
-  S: ['\\d', function (d, v) {
-    d.millisecond = v * 100;
-  }],
-  SS: ['\\d{2}', function (d, v) {
-    d.millisecond = v * 10;
-  }],
-  SSS: [threeDigits, function (d, v) {
-    d.millisecond = v;
-  }],
-  d: [twoDigits, noop],
-  ddd: [word, noop],
-  MMM: [word, monthUpdate('monthNamesShort')],
-  MMMM: [word, monthUpdate('monthNames')],
-  a: [word, function (d, v, i18n) {
-    var val = v.toLowerCase();
-    if (val === i18n.amPm[0]) {
-      d.isPm = false;
-    } else if (val === i18n.amPm[1]) {
-      d.isPm = true;
-    }
-  }],
-  ZZ: ['[^\\s]*?[\\+\\-]\\d\\d:?\\d\\d|[^\\s]*?Z', function (d, v) {
-    var parts = (v + '').match(/([+-]|\d\d)/gi), minutes;
-
-    if (parts) {
-      minutes = +(parts[1] * 60) + parseInt(parts[2], 10);
-      d.timezoneOffset = parts[0] === '+' ? minutes : -minutes;
-    }
-  }]
-};
-parseFlags.dd = parseFlags.d;
-parseFlags.dddd = parseFlags.ddd;
-parseFlags.DD = parseFlags.D;
-parseFlags.mm = parseFlags.m;
-parseFlags.hh = parseFlags.H = parseFlags.HH = parseFlags.h;
-parseFlags.MM = parseFlags.M;
-parseFlags.ss = parseFlags.s;
-parseFlags.A = parseFlags.a;
-
-
-// Some common format strings
-fecha.masks = {
-  default: 'ddd MMM DD YYYY HH:mm:ss',
-  shortDate: 'M/D/YY',
-  mediumDate: 'MMM D, YYYY',
-  longDate: 'MMMM D, YYYY',
-  fullDate: 'dddd, MMMM D, YYYY',
-  shortTime: 'HH:mm',
-  mediumTime: 'HH:mm:ss',
-  longTime: 'HH:mm:ss.SSS'
-};
-
-/***
- * Format a date
- * @method format
- * @param {Date|number} dateObj
- * @param {string} mask Format of the date, i.e. 'mm-dd-yy' or 'shortDate'
- */
-fecha.format = function (dateObj, mask, i18nSettings) {
-  var i18n = i18nSettings || fecha.i18n;
-
-  if (typeof dateObj === 'number') {
-    dateObj = new Date(dateObj);
-  }
-
-  if (Object.prototype.toString.call(dateObj) !== '[object Date]' || isNaN(dateObj.getTime())) {
-    throw new Error('Invalid Date in fecha.format');
-  }
-
-  mask = fecha.masks[mask] || mask || fecha.masks['default'];
-
-  var literals = [];
-
-  // Make literals inactive by replacing them with ??
-  mask = mask.replace(literal, function($0, $1) {
-    literals.push($1);
-    return '@@@';
-  });
-  // Apply formatting rules
-  mask = mask.replace(token, function ($0) {
-    return $0 in formatFlags ? formatFlags[$0](dateObj, i18n) : $0.slice(1, $0.length - 1);
-  });
-  // Inline literal values back into the formatted value
-  return mask.replace(/@@@/g, function() {
-    return literals.shift();
-  });
-};
-
-/**
- * Parse a date string into an object, changes - into /
- * @method parse
- * @param {string} dateStr Date string
- * @param {string} format Date parse format
- * @returns {Date|boolean}
- */
-fecha.parse = function (dateStr, format, i18nSettings) {
-  var i18n = i18nSettings || fecha.i18n;
-
-  if (typeof format !== 'string') {
-    throw new Error('Invalid format in fecha.parse');
-  }
-
-  format = fecha.masks[format] || format;
-
-  // Avoid regular expression denial of service, fail early for really long strings
-  // https://www.owasp.org/index.php/Regular_expression_Denial_of_Service_-_ReDoS
-  if (dateStr.length > 1000) {
-    return null;
-  }
-
-  var dateInfo = {};
-  var parseInfo = [];
-  var literals = [];
-  format = format.replace(literal, function($0, $1) {
-    literals.push($1);
-    return '@@@';
-  });
-  var newFormat = regexEscape(format).replace(token, function ($0) {
-    if (parseFlags[$0]) {
-      var info = parseFlags[$0];
-      parseInfo.push(info[1]);
-      return '(' + info[0] + ')';
-    }
-
-    return $0;
-  });
-  newFormat = newFormat.replace(/@@@/g, function() {
-    return literals.shift();
-  });
-  var matches = dateStr.match(new RegExp(newFormat, 'i'));
-  if (!matches) {
-    return null;
-  }
-
-  for (var i = 1; i < matches.length; i++) {
-    parseInfo[i - 1](dateInfo, matches[i], i18n);
-  }
-
-  var today = new Date();
-  if (dateInfo.isPm === true && dateInfo.hour != null && +dateInfo.hour !== 12) {
-    dateInfo.hour = +dateInfo.hour + 12;
-  } else if (dateInfo.isPm === false && +dateInfo.hour === 12) {
-    dateInfo.hour = 0;
-  }
-
-  var date;
-  if (dateInfo.timezoneOffset != null) {
-    dateInfo.minute = +(dateInfo.minute || 0) - +dateInfo.timezoneOffset;
-    date = new Date(Date.UTC(dateInfo.year || today.getFullYear(), dateInfo.month || 0, dateInfo.day || 1,
-      dateInfo.hour || 0, dateInfo.minute || 0, dateInfo.second || 0, dateInfo.millisecond || 0));
-  } else {
-    date = new Date(dateInfo.year || today.getFullYear(), dateInfo.month || 0, dateInfo.day || 1,
-      dateInfo.hour || 0, dateInfo.minute || 0, dateInfo.second || 0, dateInfo.millisecond || 0);
-  }
-  return date;
-};
-
-var a=function(){try{(new Date).toLocaleDateString("i");}catch(e){return "RangeError"===e.name}return !1}()?function(e,t){return e.toLocaleDateString(t,{year:"numeric",month:"long",day:"numeric"})}:function(t){return fecha.format(t,"mediumDate")},n=function(){try{(new Date).toLocaleString("i");}catch(e){return "RangeError"===e.name}return !1}()?function(e,t){return e.toLocaleString(t,{year:"numeric",month:"long",day:"numeric",hour:"numeric",minute:"2-digit"})}:function(t){return fecha.format(t,"haDateTime")},r=function(){try{(new Date).toLocaleTimeString("i");}catch(e){return "RangeError"===e.name}return !1}()?function(e,t){return e.toLocaleTimeString(t,{hour:"numeric",minute:"2-digit"})}:function(t){return fecha.format(t,"shortTime")};var p=function(e){return e.substr(e.indexOf(".")+1)};var y=function(e){return void 0===e.attributes.friendly_name?p(e.entity_id).replace(/_/g," "):e.attributes.friendly_name||""};
-
-class ThermostatPopupCard extends LitElement {
-    constructor() {
-        super();
-        this.hvacModeOrdering = {
-            auto: 1,
-            heat_cool: 2,
-            heat: 3,
-            cool: 4,
-            dry: 5,
-            fan_only: 6,
-            off: 7,
-        };
-        this.modeIcons = {
-            auto: "hass:calendar-repeat",
-            heat_cool: "hass:autorenew",
-            heat: "hass:fire",
-            cool: "hass:snowflake",
-            off: "hass:power",
-            fan_only: "hass:fan",
-            dry: "hass:water-percent",
-        };
-        this.settings = false;
-        this.settingsCustomCard = false;
-        this.settingsPosition = "bottom";
-        this._compareClimateHvacModes = (mode1, mode2) => this.hvacModeOrdering[mode1] - this.hvacModeOrdering[mode2];
-    }
-    static get properties() {
-        return {
-            hass: {},
-            config: {},
-            active: {}
-        };
-    }
-    render() {
-        var entity = this.config.entity;
-        var stateObj = this.hass.states[entity];
-        var icon = this.config.icon ? this.config.icon : stateObj.attributes.icon ? stateObj.attributes.icon : 'mdi:lightbulb';
-        // REAL DATA
-        var name = this.config.name || y(this.hass.states[this.config.entity]);
-        var targetTemp = stateObj.attributes.temperature !== null && stateObj.attributes.temperature ? stateObj.attributes.temperature : stateObj.attributes.min_temp;
-        var currentTemp = stateObj.attributes.current_temperature;
-        var mode = stateObj.state in this.modeIcons ? stateObj.state : "unknown-mode";
-        var _handleSize = 15;
-        var _stepSize = this.config.stepSize ? this.config.stepSize : stateObj.attributes.target_temp_step ? stateObj.attributes.target_temp_step : 1;
-        var gradient = true;
-        var gradientPoints = [
-            { point: 0, color: '#4fdae4' },
-            { point: 10, color: '#2da9d8' },
-            { point: 25, color: '#56b557' },
-            { point: 50, color: '#f4c807' },
-            { point: 70, color: '#faaa00' },
-            { point: 100, color: '#f86618' },
-        ];
-        var fullscreen = "fullscreen" in this.config ? this.config.fullscreen : true;
-        this.settings = "settings" in this.config ? true : false;
-        this.settingsCustomCard = "settingsCard" in this.config ? true : false;
-        this.settingsPosition = "settingsPosition" in this.config ? this.config.settingsPosition : "bottom";
-        if (this.settingsCustomCard && this.config.settingsCard.cardOptions) {
-            if (this.config.settingsCard.cardOptions.entity && this.config.settingsCard.cardOptions.entity == 'this') {
-                this.config.settingsCard.cardOptions.entity = entity;
-            }
-            else if (this.config.settingsCard.cardOptions.entity_id && this.config.settingsCard.cardOptions.entity_id == 'this') {
-                this.config.settingsCard.cardOptions.entity_id = entity;
-            }
-            else if (this.config.settingsCard.cardOptions.entities) {
-                for (let key in this.config.settingsCard.cardOptions.entities) {
-                    if (this.config.settingsCard.cardOptions.entities[key] == 'this') {
-                        this.config.settingsCard.cardOptions.entities[key] = entity;
-                    }
-                }
-            }
-        }
-        return html `
-      <div class="${fullscreen === true ? 'popup-wrapper' : ''}">
-        <div class="${classMap({ [mode]: true })}" style="display:flex;width:100%;height:100%;">
-          <div id="popup" class="popup-inner" @click="${e => this._close(e)}">
-            <div class="info${fullscreen === true ? ' fullscreen' : ''}">
-              <div class="temp ${mode}">
-                ${currentTemp}&#176;
-              </div>
-              <div class="right">
-                <div class="name">${name}</div>
-                <div class="action">
-                ${stateObj.attributes.hvac_action
-            ? this.hass.localize(`state_attributes.climate.hvac_action.${stateObj.attributes.hvac_action}`)
-            : this.hass.localize(`state.climate.${stateObj.state}`)}
-                ${stateObj.attributes.preset_mode &&
-            stateObj.attributes.preset_mode !== "none"
-            ? html `
-                        -
-                        ${this.hass.localize(`state_attributes.climate.preset_mode.${stateObj.attributes.preset_mode}`) || stateObj.attributes.preset_mode}
-                      `
-            : ""}
-                ${targetTemp}&#176;</div>
-              </div>
-            </div>
-
-
-            <div id="controls">
-              <div id="slider">
-                <custom-round-slider
-                  .value=${targetTemp}
-                  .low=${stateObj.attributes.target_temp_low}
-                  .high=${stateObj.attributes.target_temp_high}
-                  .min=${stateObj.attributes.min_temp}
-                  .max=${stateObj.attributes.max_temp}
-                  .step=${_stepSize}
-                  .handleSize=${_handleSize}
-                  .gradient=${gradient}
-                  .gradientPoints=${gradientPoints}
-                  @value-changing=${this._dragEvent}
-                  @value-changed=${this._setTemperature}
-                ></custom-round-slider>
-
-                <div id="slider-center">
-                  <div class="values">
-                    <div class="action">
-                      ${stateObj.attributes.hvac_action
-            ? this.hass.localize(`state_attributes.climate.hvac_action.${stateObj.attributes.hvac_action}`)
-            : this.hass.localize(`state.climate.${stateObj.state}`)}
-                      ${stateObj.attributes.preset_mode &&
-            stateObj.attributes.preset_mode !== "none"
-            ? html `
-                              -
-                              ${this.hass.localize(`state_attributes.climate.preset_mode.${stateObj.attributes.preset_mode}`) || stateObj.attributes.preset_mode}
-                            `
-            : ""}
-                    </div>
-                    <div class="value">
-                      ${!this._setTemp
-            ? ""
-            : Array.isArray(this._setTemp)
-                ? _stepSize === 1
-                    ? svg `
-                                ${this._setTemp[0].toFixed()}&#176; -
-                                ${this._setTemp[1].toFixed()}&#176;
-                                `
-                    : svg `
-                                ${this._setTemp[0].toFixed(1)}&#176; -
-                                ${this._setTemp[1].toFixed(1)}&#176;
-                                `
-                : _stepSize === 1
-                    ? svg `
-                                ${this._setTemp.toFixed()}&#176;
-                                `
-                    : svg `
-                                ${this._setTemp.toFixed(1)}&#176;
-                                `}
-                    </div>
-                  </div>
-                </div>
-              </div>
-            </div>
-            <div id="modes">
-              ${(stateObj.attributes.hvac_modes || [])
-            .concat()
-            .sort(this._compareClimateHvacModes)
-            .map((modeItem) => this._renderIcon(modeItem, mode))}
-            </div>
-            ${this.settings ? html `<button class="settings-btn ${this.settingsPosition}${fullscreen === true ? ' fullscreen' : ''}" @click="${() => this._openSettings()}">${this.config.settings.openButton ? this.config.settings.openButton : 'Settings'}</button>` : html ``}
-          </div>
-          ${this.settings ? html `
-            <div id="settings" class="settings-inner" @click="${e => this._close(e)}">
-              ${this.settingsCustomCard ? html `
-                <card-maker nohass data-card="${this.config.settingsCard.type}" data-options="${JSON.stringify(this.config.settingsCard.cardOptions)}" data-style="${this.config.settingsCard.cardStyle ? this.config.settingsCard.cardStyle : ''}">
-                </card-maker>
-              ` : html `
-                  <more-info-controls
-                  .dialogElement=${null}
-                  .canConfigure=${false}
-                  .hass=${this.hass}
-                  .stateObj=${stateObj}
-                  style="--paper-slider-knob-color: white !important;
-                  --paper-slider-knob-start-color: white !important;
-                  --paper-slider-pin-color: white !important;
-                  --paper-slider-active-color: white !important;
-                  color: white !important;
-                  --primary-text-color: white !important;"
-                ></more-info-controls>
-              `}
-              <button class="settings-btn ${this.settingsPosition}${fullscreen === true ? ' fullscreen' : ''}" @click="${() => this._closeSettings()}">${this.config.settings.closeButton ? this.config.settings.closeButton : 'Close'}</button>
-            </div>
-          ` : html ``}
-        </div>
-      </div>
-    `;
-    }
-    firstUpdated() {
-        if (this.settings && !this.settingsCustomCard) {
-            const mic = this.shadowRoot.querySelector("more-info-controls").shadowRoot;
-            mic.removeChild(mic.querySelector("app-toolbar"));
-        }
-        else if (this.settings && this.settingsCustomCard) {
-            this.shadowRoot.querySelectorAll("card-maker").forEach(customCard => {
-                var card = {
-                    type: customCard.dataset.card
-                };
-                card = Object.assign({}, card, JSON.parse(customCard.dataset.options));
-                customCard.config = card;
-                let style = "";
-                if (customCard.dataset.style) {
-                    style = customCard.dataset.style;
-                }
-                if (style != "") {
-                    let itterations = 0;
-                    let interval = setInterval(function () {
-                        let el = customCard.children[0];
-                        if (el) {
-                            window.clearInterval(interval);
-                            var styleElement = document.createElement('style');
-                            styleElement.innerHTML = style;
-                            el.shadowRoot.appendChild(styleElement);
-                        }
-                        else if (++itterations === 10) {
-                            window.clearInterval(interval);
-                        }
-                    }, 100);
-                }
-            });
-        }
-    }
-    updated() {
-        this._setTemp = this._getSetTemp(this.hass.states[this.config.entity]);
-    }
-    _openSettings() {
-        this.shadowRoot.getElementById('popup').classList.add("off");
-        this.shadowRoot.getElementById('settings').classList.add("on");
-    }
-    _closeSettings() {
-        this.shadowRoot.getElementById('settings').classList.remove("on");
-        this.shadowRoot.getElementById('popup').classList.remove("off");
-    }
-    _renderIcon(mode, currentMode) {
-        if (!this.modeIcons[mode]) {
-            return html ``;
-        }
-        return html `
-      <ha-icon-button
-        class="${classMap({ "selected-icon": currentMode === mode })}"
-        .mode="${mode}"
-        .icon="${this.modeIcons[mode]}"
-        @click="${this._handleModeClick}"
-        tabindex="0"
-      ></ha-icon-button>
-    `;
-    }
-    _handleModeClick(e) {
-        this.hass.callService("climate", "set_hvac_mode", {
-            entity_id: this.config.entity,
-            hvac_mode: e.currentTarget.mode,
-        });
-    }
-    _getSetTemp(stateObj) {
-        if (stateObj.state === "unavailable") {
-            return this.hass.localize("state.default.unavailable");
-        }
-        if (stateObj.attributes.target_temp_low &&
-            stateObj.attributes.target_temp_high) {
-            return [
-                stateObj.attributes.target_temp_low,
-                stateObj.attributes.target_temp_high,
-            ];
-        }
-        return stateObj.attributes.temperature;
-    }
-    _close(event) {
-        if (event && (event.target.className.includes('popup-inner') || event.target.className.includes('settings-inner'))) {
-            closePopUp();
-        }
-    }
-    _dragEvent(e) {
-        const stateObj = this.hass.states[this.config.entity];
-        if (e.detail.low) {
-            this._setTemp = [e.detail.low, stateObj.attributes.target_temp_high];
-        }
-        else if (e.detail.high) {
-            this._setTemp = [stateObj.attributes.target_temp_low, e.detail.high];
-        }
-        else {
-            this._setTemp = e.detail.value;
-        }
-    }
-    _setTemperature(e) {
-        const stateObj = this.hass.states[this.config.entity];
-        if (e.detail.low) {
-            this.hass.callService("climate", "set_temperature", {
-                entity_id: this.config.entity,
-                target_temp_low: e.detail.low,
-                target_temp_high: stateObj.attributes.target_temp_high,
-            });
-        }
-        else if (e.detail.high) {
-            this.hass.callService("climate", "set_temperature", {
-                entity_id: this.config.entity,
-                target_temp_low: stateObj.attributes.target_temp_low,
-                target_temp_high: e.detail.high,
-            });
-        }
-        else {
-            this.hass.callService("climate", "set_temperature", {
-                entity_id: this.config.entity,
-                temperature: e.detail.value,
-            });
-        }
-    }
-    setConfig(config) {
-        if (!config.entity) {
-            throw new Error("You need to define an entity");
-        }
-        this.config = config;
-    }
-    getCardSize() {
-        return 1;
-    }
-    static get styles() {
-        return css `
-        :host {
-            --auto-color: #EE7600;
-            --eco-color: springgreen;
-            --cool-color: #2b9af9;
-            --heat-color: #EE7600;
-            --manual-color: #44739e;
-            --off-color: lightgrey;
-            --fan_only-color: #8a8a8a;
-            --dry-color: #efbd07;
-            --idle-color: #00CC66;
-            --unknown-color: #bac;
-        }
-        .popup-wrapper {
-          margin-top:64px;
-          position: absolute;
-          top: 0;
-          left: 0;
-          right: 0;
-          bottom: 0;
-        }
-        .popup-inner {
-          height: 100%;
-          width: 100%;
-          display: flex;
-          align-items: center;
-          justify-content: center;
-          flex-direction: column;
-        }
-        .popup-inner.off {
-          display:none;
-        }
-        #settings {
-          display:none;
-        }
-        .settings-inner {
-          height: 100%;
-          width: 100%;
-          display: flex;
-          align-items: center;
-          justify-content: center;
-          flex-direction: column;
-        }
-        #settings.on {
-          display:flex;
-        }
-        .settings-btn {
-          position:absolute;
-          right:30px;
-          background-color: #7f8082;
-          color: #FFF;
-          border: 0;
-          padding: 5px 20px;
-          border-radius: 10px;
-          font-weight: 500;
-          cursor: pointer;
-        }
-        .settings-btn.bottom {
-          bottom:15px;
-        }
-        .settings-btn.top {
-          top: 25px;
-        }
-        .settings-btn.bottom.fullscreen {
-          margin:0;
-        }
-        .fullscreen {
-          margin-top:-64px;
-        }
-        .info {
-          display:flex;
-          flex-direction:row;
-          margin-bottom: 40px;
-        }
-        .info .temp {
-          background-color: #67cd67;
-          height: 60px;
-          width: 60px;  
-          text-align:center;
-          line-height:60px;
-          border-radius:100%;
-          color:#FFF;
-          font-size:18px;
-        }
-
-        .info .temp.heat_cool {
-          background-color: var(--auto-color);
-        }
-        .info .temp.cool {
-          background-color: var(--cool-color);
-        }
-        .info .temp.heat {
-          background-color: var(--heat-color);
-        }
-        .info .temp.manual {
-          background-color: var(--manual-color);
-        }
-        .info .temp.off {
-          background-color: var(--off-color);
-        }
-        .info .temp.fan_only {
-          background-color: var(--fan_only-color);
-        }
-        .info .temp.eco {
-          background-color: var(--eco-color);
-        }
-        .info .temp.dry {
-          background-color: var(--dry-color);
-        }
-        .info .temp.idle {
-          background-color: var(--idle-color);
-        }
-        .info .temp.unknown-mode {
-          background-color: var(--unknown-color);
-        }
-
-
-        .info .right {
-          display:flex;
-          flex-direction:column;
-          margin-left:15px;
-          height:60px;
-          align-items:center;
-          justify-content:center;
-        }
-        .info .right .name {
-          color:#FFF;
-          font-size:24px;
-        }
-        .info .right .action {
-          color: #8b8a8f;
-          font-size:12px;
-        }
-        
-        /* CONTROLS */
-        
-        .heat_cool {
-          --mode-color: var(--auto-color);
-        }
-        .cool {
-          --mode-color: var(--cool-color);
-        }
-        .heat {
-          --mode-color: var(--heat-color);
-        }
-        .manual {
-          --mode-color: var(--manual-color);
-        }
-        .off {
-          --mode-color: var(--off-color);
-        }
-        .fan_only {
-          --mode-color: var(--fan_only-color);
-        }
-        .eco {
-          --mode-color: var(--eco-color);
-        }
-        .dry {
-          --mode-color: var(--dry-color);
-        }
-        .idle {
-          --mode-color: var(--idle-color);
-        }
-        .unknown-mode {
-          --mode-color: var(--unknown-color);
-        }
-        #controls {
-          display: flex;
-          justify-content: center;
-          padding: 16px;
-          position: relative;
-          width:500px;
-        }
-        #slider {
-          height: 100%;
-          width: 100%;
-          position: relative;
-          max-width: 300px;
-          min-width: 250px;
-        }
-        round-slider {
-          --round-slider-path-color: var(--disabled-text-color);
-          --round-slider-bar-color: var(--mode-color);
-          padding-bottom: 10%;
-        }
-        #slider-center {
-          position: absolute;
-          width: calc(100% - 120px);
-          height: calc(100% - 120px);
-          box-sizing: border-box;
-          border-radius: 100%;
-          left: 60px;
-          top: 60px;
-          text-align: center;
-          overflow-wrap: break-word;
-          pointer-events: none;
-        }
-        
-        .values {
-          display:flex;
-          flex-direction:column;
-          align-items:center;
-          justify-content:center;
-          height:100%;
-          width:100%;
-        }
-        .values .action {
-          color:#f4b941;
-          font-size:10px;
-          text-transform:uppercase;
-        }
-        .values .value {
-          color:#FFF;
-          font-size:60px;
-          line-height: 60px;
-        }
-        
-        #modes > * {
-          color: var(--disabled-text-color);
-          cursor: pointer;
-          display: inline-block;
-        }
-        #modes .selected-icon {
-          color: var(--mode-color);
-        }
-        text {
-          color: var(--primary-text-color);
-        }
-    `;
-    }
-}
-customElements.define('thermostat-popup-card', ThermostatPopupCard);
-class CustomRoundSlider extends LitElement {
-    constructor() {
-        super();
-        this.min = 0;
-        this.max = 100;
-        this.step = 1;
-        this.startAngle = 135;
-        this.arcLength = 270;
-        this.handleSize = 6;
-        this.handleZoom = 5;
-        this.disabled = false;
-        this.dragging = false;
-        this.rtl = false;
-        this._scale = 1;
-        this.gradient = false;
-        this.gradientPoints = [];
-    }
-    static get properties() {
-        return {
-            value: { type: Number },
-            high: { type: Number },
-            low: { type: Number },
-            min: { type: Number },
-            max: { type: Number },
-            step: { type: Number },
-            startAngle: { type: Number },
-            arcLength: { type: Number },
-            handleSize: { type: Number },
-            handleZoom: { type: Number },
-            disabled: { type: Boolean },
-            dragging: { type: Boolean, reflect: true },
-            rtl: { type: Boolean },
-            _scale: { type: Number },
-            gradient: { type: Boolean },
-            gradientPoints: { type: Array }
-        };
-    }
-    get _start() {
-        return this.startAngle * Math.PI / 180;
-    }
-    get _len() {
-        // Things get weird if length is more than a complete turn
-        return Math.min(this.arcLength * Math.PI / 180, 2 * Math.PI - 0.01);
-    }
-    get _end() {
-        return this._start + this._len;
-    }
-    get _enabled() {
-        // If handle is disabled
-        if (this.disabled)
-            return false;
-        if (this.value == null && (this.high == null || this.low == null))
-            return false;
-        if (this.value != null && (this.value > this.max || this.value < this.min))
-            return false;
-        if (this.high != null && (this.high > this.max || this.high < this.min))
-            return false;
-        if (this.low != null && (this.low > this.max || this.low < this.min))
-            return false;
-        return true;
-    }
-    _angleInside(angle) {
-        // Check if an angle is on the arc
-        let a = (this.startAngle + this.arcLength / 2 - angle + 180 + 360) % 360 - 180;
-        return (a < this.arcLength / 2 && a > -this.arcLength / 2);
-    }
-    _angle2xy(angle) {
-        if (this.rtl)
-            return { x: -Math.cos(angle), y: Math.sin(angle) };
-        return { x: Math.cos(angle), y: Math.sin(angle) };
-    }
-    _xy2angle(x, y) {
-        if (this.rtl)
-            x = -x;
-        return (Math.atan2(y, x) - this._start + 2 * Math.PI) % (2 * Math.PI);
-    }
-    _value2angle(value) {
-        const fraction = (value - this.min) / (this.max - this.min);
-        return this._start + fraction * this._len;
-    }
-    _angle2value(angle) {
-        return Math.round((angle / this._len * (this.max - this.min) + this.min) / this.step) * this.step;
-    }
-    get _boundaries() {
-        // Get the maximum extents of the bar arc
-        const start = this._angle2xy(this._start);
-        const end = this._angle2xy(this._end);
-        let up = 1;
-        if (!this._angleInside(270))
-            up = Math.max(-start.y, -end.y);
-        let down = 1;
-        if (!this._angleInside(90))
-            down = Math.max(start.y, end.y);
-        let left = 1;
-        if (!this._angleInside(180))
-            left = Math.max(-start.x, -end.x);
-        let right = 1;
-        if (!this._angleInside(0))
-            right = Math.max(start.x, end.x);
-        return {
-            up, down, left, right,
-            height: up + down,
-            width: left + right,
-        };
-    }
-    dragStart(ev) {
-        let handle = ev.target;
-        // Avoid double events mouseDown->focus
-        if (this._rotation && this._rotation.type !== "focus") {
-            return;
-        }
-        // If an invisible handle was clicked, switch to the visible counterpart
-        if (handle.classList.contains("overflow")) {
-            handle = handle.nextElementSibling;
-        }
-        if (!handle.classList.contains("handle"))
-            return;
-        handle.setAttribute('stroke-width', (this.handleSize * this._scale) + 5 + this.handleZoom);
-        const min = handle.id === "high" ? this.low : this.min;
-        const max = handle.id === "low" ? this.high : this.max;
-        this._rotation = { handle, min, max, start: this[handle.id], type: ev.type };
-        this.dragging = true;
-    }
-    dragEnd() {
-        if (!this._rotation)
-            return;
-        const handle = this._rotation.handle;
-        handle.setAttribute('stroke-width', (this.handleSize * this._scale) + 5);
-        this._rotation = false;
-        this.dragging = false;
-        handle.blur();
-        let event = new CustomEvent('value-changed', {
-            detail: {
-                [handle.id]: this[handle.id],
-            }
-        });
-        this.dispatchEvent(event);
-        // This makes the low handle render over the high handle if they both are
-        // close to the top end.  Otherwise if would be unclickable, and the high
-        // handle locked by the low.  Calcualtion is done in the dragEnd handler to
-        // avoid "z fighting" while dragging.
-        if (this.low && this.low >= 0.99 * this.max)
-            this._reverseOrder = true;
-        else
-            this._reverseOrder = false;
-    }
-    drag(ev) {
-        if (!this._rotation)
-            return;
-        if (this._rotation.type === "focus")
-            return;
-        ev.preventDefault();
-        const mouseX = (ev.type === "touchmove") ? ev.touches[0].clientX : ev.clientX;
-        const mouseY = (ev.type === "touchmove") ? ev.touches[0].clientY : ev.clientY;
-        const rect = this.shadowRoot.querySelector("svg").getBoundingClientRect();
-        const boundaries = this._boundaries;
-        const x = mouseX - (rect.left + boundaries.left * rect.width / boundaries.width);
-        const y = mouseY - (rect.top + boundaries.up * rect.height / boundaries.height);
-        const angle = this._xy2angle(x, y);
-        const pos = this._angle2value(angle);
-        this._dragpos(pos);
-    }
-    _dragpos(pos) {
-        if (pos < this._rotation.min || pos > this._rotation.max)
-            return;
-        const handle = this._rotation.handle;
-        this[handle.id] = pos;
-        let event = new CustomEvent('value-changing', {
-            detail: {
-                [handle.id]: pos,
-            }
-        });
-        this.dispatchEvent(event);
-    }
-    _keyStep(ev) {
-        if (!this._rotation)
-            return;
-        const handle = this._rotation.handle;
-        if (ev.key === "ArrowLeft")
-            if (this.rtl)
-                this._dragpos(this[handle.id] + this.step);
-            else
-                this._dragpos(this[handle.id] - this.step);
-        if (ev.key === "ArrowRight")
-            if (this.rtl)
-                this._dragpos(this[handle.id] - this.step);
-            else
-                this._dragpos(this[handle.id] + this.step);
-    }
-    firstUpdated() {
-        document.addEventListener('mouseup', this.dragEnd.bind(this));
-        document.addEventListener('touchend', this.dragEnd.bind(this), { passive: false });
-        document.addEventListener('mousemove', this.drag.bind(this));
-        document.addEventListener('touchmove', this.drag.bind(this), { passive: false });
-        document.addEventListener('keydown', this._keyStep.bind(this));
-    }
-    updated(changedProperties) {
-        // Workaround for vector-effect not working in IE and pre-Chromium Edge
-        // That's also why the _scale property exists
-        if (this.shadowRoot.querySelector("svg")
-            && this.shadowRoot.querySelector("svg").style.vectorEffect !== undefined)
-            return;
-        if (changedProperties.has("_scale") && this._scale != 1) {
-            this.shadowRoot.querySelector("svg").querySelectorAll("path").forEach((e) => {
-                if (e.getAttribute('stroke-width'))
-                    return;
-                const orig = parseFloat(getComputedStyle(e).getPropertyValue('stroke-width'));
-                e.style.strokeWidth = `${orig * this._scale}px`;
-            });
-        }
-        const rect = this.shadowRoot.querySelector("svg").getBoundingClientRect();
-        const scale = Math.max(rect.width, rect.height);
-        this._scale = 2 / scale;
-    }
-    _renderArc(start, end) {
-        const diff = end - start;
-        start = this._angle2xy(start);
-        end = this._angle2xy(end + 0.001); // Safari doesn't like arcs with no length
-        return `
-      M ${start.x} ${start.y}
-      A 1 1,
-        0,
-        ${(diff) > Math.PI ? "1" : "0"} ${this.rtl ? "0" : "1"},
-        ${end.x} ${end.y}
-    `;
-    }
-    _renderHandle(id) {
-        const theta = this._value2angle(this[id]);
-        const pos = this._angle2xy(theta);
-        // Two handles are drawn. One visible, and one invisible that's twice as
-        // big. Makes it easier to click.
-        return svg `
-      <g class="${id} handle">
-        <path
-          id=${id}
-          class="overflow"
-          d="
-          M ${pos.x} ${pos.y}
-          L ${pos.x + 0.001} ${pos.y + 0.001}
-          "
-          vector-effect="non-scaling-stroke"
-          stroke="rgba(0,0,0,0)"
-          stroke-linecap="round"
-          stroke-width="${4 * this.handleSize * this._scale}"
-          />
-        <path
-          id=${id}
-          class="handle"
-          d=${this._renderArc(this._value2angle(id != 'low' ? this[id] - 0.35 : this[id] + 0.35), this._value2angle(this[id]))}
-          vector-effect="non-scaling-stroke"
-          tabindex="0"
-          @focus=${this.dragStart}
-          @blur=${this.dragEnd}
-          />
-        </g>
-      `;
-    }
-    ;
-    render() {
-        const view = this._boundaries;
-        return html `
-      <svg
-        @mousedown=${this.dragStart}
-        @touchstart=${this.dragStart}
-        xmln="http://www.w3.org/2000/svg"
-        viewBox="${-view.left} ${-view.up} ${view.width} ${view.height}"
-        style="margin: 30px;"
-        focusable="false"
-      >
-        ${this.gradient ? html `
-        
-        ` : html ``}
-        <g class="slider">
-          <defs>
-            <linearGradient id="gradient" x1="0%" y1="0%" x2="100%" y2="0%">
-            ${this.gradientPoints.map(gradientPoint => svg `<stop offset="${gradientPoint.point}%" style="stop-color:${gradientPoint.color};" />`)}
-            </linearGradient>
-          </defs>
-          <path
-            class="path" style="${this.gradient ? 'stroke: url(#gradient);' : 'stroke: var(--round-slider-path-color, lightgray);'}" 
-            d=${this._renderArc(this._start, this._end)}
-            vector-effect="non-scaling-stroke"
-          />
-          ${this._enabled
-            ? svg `
-              <path
-                class="block"
-                vector-effect="non-scaling-stroke"
-                d=${this._renderArc(this._start, this._value2angle(this.low != null ? this.low : this.min))}
-              />
-              <path
-                class="block"
-                vector-effect="non-scaling-stroke"
-                d=${this._renderArc(this._value2angle(this.high != null ? this.high : this.value), this._end)}
-              />
-              <path
-                class="block-dash"
-                stroke-dasharray="2, 25"
-                vector-effect="non-scaling-stroke"
-                d=${this._renderArc(this._start, this._end)}
-              />
-              <path
-                class="bar"
-                vector-effect="non-scaling-stroke"
-                d=${this._renderArc(this._value2angle(this.low != null ? this.low : this.min), this._value2angle(this.high != null ? this.high : this.value))}
-              />
-              
-              `
-            : ``}
-        </g>
-        <g class="handles">
-        ${this._enabled
-            ? this.low != null
-                ? this._reverseOrder
-                    ? html `${this._renderHandle("high")} ${this._renderHandle("low")}`
-                    : html `${this._renderHandle("low")} ${this._renderHandle("high")}`
-                : html `${this._renderHandle("value")}`
-            : ``}
-        </g>
-        
-      </svg>
-    `;
-    }
-    static get styles() {
-        return css `
-      :host {
-        display: inline-block;
-        width: 100%;
-      }
-      svg {
-        overflow: visible;
-      }
-      .slider {
-        fill: none;
-        stroke-width: var(--round-slider-path-width, 30);
-        stroke-linecap: var(--round-slider-linecap, butt);
-      }
-      .path {
-      }
-      .bar {
-        stroke: var(--round-slider-bar-color, transparent);
-      }
-      .block {
-        stroke-width: var(--round-slider-block-path-width, 31);
-        stroke: #2c2c2e;
-      }
-      .block-dash {
-        stroke-width: var(--round-slider-dash-width, 20);
-        stroke: var(--round-slider-block-dash-color, rgba(255,255,255,0.1));
-      }
-      g.handles {
-        stroke: var(--round-slider-handle-color, var(--round-slider-bar-color, deepskyblue));
-        stroke-linecap: round;
-      }
-      g.handle {
-        stroke-width: var(--round-slider-dash-width, 20);
-        stroke: #FFF;
-        stroke-dasharray: 3, 8;
-        stroke-linecap: butt;
-      }
-      .handle:focus {
-        outline: unset;
-      }
-    `;
-    }
-}
-customElements.define('custom-round-slider', CustomRoundSlider);
+const ct=new WeakMap,dt=(ut=t=>e=>{if(!(e instanceof x)||e instanceof M||"class"!==e.committer.name||e.committer.parts.length>1)throw new Error("The `classMap` directive must be used in the `class` attribute and must be the only part in the attribute.");const{committer:s}=e,{element:i}=s;ct.has(e)||(i.className=s.strings.join(" "));const{classList:n}=i,o=ct.get(e);for(const e in o)e in t||n.remove(e);for(const e in t){const s=t[e];o&&s===o[e]||n[s?"add":"remove"](e)}ct.set(e,t)},(...e)=>{const s=ut(...e);return t.set(s,!0),s});var ut;function pt(){return document.querySelector("hc-main")?document.querySelector("hc-main").hass:document.querySelector("home-assistant")?document.querySelector("home-assistant").hass:void 0}async function mt(t,e,s=!1){let i=t;"string"==typeof e&&(e=e.split(/(\$| )/)),""===e[e.length-1]&&e.pop();for(const[t,n]of e.entries())if(n.trim().length){if(!i)return null;i.localName&&i.localName.includes("-")&&await customElements.whenDefined(i.localName),i.updateComplete&&await i.updateComplete,i="$"===n?s&&t==e.length-1?[i.shadowRoot]:i.shadowRoot:s&&t==e.length-1?i.querySelectorAll(n):i.querySelector(n)}return i}function gt(t,e,s=null){if((t=new Event(t,{bubbles:!0,cancelable:!1,composed:!0})).detail=e||{},s)s.dispatchEvent(t);else{var i=function(){var t=document.querySelector("hc-main");return t=t?(t=(t=(t=t&&t.shadowRoot)&&t.querySelector("hc-lovelace"))&&t.shadowRoot)&&t.querySelector("hui-view")||t.querySelector("hui-panel-view"):(t=(t=(t=(t=(t=(t=(t=(t=(t=(t=(t=(t=document.querySelector("home-assistant"))&&t.shadowRoot)&&t.querySelector("home-assistant-main"))&&t.shadowRoot)&&t.querySelector("app-drawer-layout partial-panel-resolver"))&&t.shadowRoot||t)&&t.querySelector("ha-panel-lovelace"))&&t.shadowRoot)&&t.querySelector("hui-root"))&&t.shadowRoot)&&t.querySelector("ha-app-layout"))&&t.querySelector("#view"))&&t.firstElementChild}();i&&i.dispatchEvent(t)}}let ft=window.cardHelpers;new Promise(async(t,e)=>{ft&&t();const s=async()=>{ft=await window.loadCardHelpers(),window.cardHelpers=ft,t()};window.loadCardHelpers?s():window.addEventListener("load",async()=>{!async function(){if(customElements.get("hui-view"))return!0;await customElements.whenDefined("partial-panel-resolver");const t=document.createElement("partial-panel-resolver");if(t.hass={panels:[{url_path:"tmp",component_name:"lovelace"}]},t._updateRoutes(),await t.routerOptions.routes.tmp.load(),!customElements.get("ha-panel-lovelace"))return!1;const e=document.createElement("ha-panel-lovelace");e.hass=pt(),void 0===e.hass&&(await new Promise(t=>{window.addEventListener("connection-status",e=>{console.log(e),t()},{once:!0})}),e.hass=pt()),e.panel={config:{mode:null}},e._fetchConfig()}(),window.loadCardHelpers&&s()})});async function _t(){const t=document.querySelector("home-assistant")||document.querySelector("hc-root");gt("hass-more-info",{entityId:"."},t);const e=await async function(t,e,s=!1,i=1e4){return Promise.race([mt(t,e,s),new Promise((t,e)=>setTimeout(()=>e(new Error("timeout")),i))]).catch(t=>{if(!t.message||"timeout"!==t.message)throw t;return null})}(t,"$ card-tools-popup");e&&e.closeDialog()}var yt={},vt=/d{1,4}|M{1,4}|YY(?:YY)?|S{1,3}|Do|ZZ|([HhMsDm])\1?|[aA]|"[^"]*"|'[^']*'/g,wt="[^\\s]+",bt=/\[([^]*?)\]/gm,St=function(){};function xt(t,e){for(var s=[],i=0,n=t.length;i<n;i++)s.push(t[i].substr(0,e));return s}function Ct(t){return function(e,s,i){var n=i[t].indexOf(s.charAt(0).toUpperCase()+s.substr(1).toLowerCase());~n&&(e.month=n)}}function $t(t,e){for(t=String(t),e=e||2;t.length<e;)t="0"+t;return t}var Pt=["Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday"],Mt=["January","February","March","April","May","June","July","August","September","October","November","December"],kt=xt(Mt,3),Nt=xt(Pt,3);yt.i18n={dayNamesShort:Nt,dayNames:Pt,monthNamesShort:kt,monthNames:Mt,amPm:["am","pm"],DoFn:function(t){return t+["th","st","nd","rd"][t%10>3?0:(t-t%10!=10)*t%10]}};var Et={D:function(t){return t.getDate()},DD:function(t){return $t(t.getDate())},Do:function(t,e){return e.DoFn(t.getDate())},d:function(t){return t.getDay()},dd:function(t){return $t(t.getDay())},ddd:function(t,e){return e.dayNamesShort[t.getDay()]},dddd:function(t,e){return e.dayNames[t.getDay()]},M:function(t){return t.getMonth()+1},MM:function(t){return $t(t.getMonth()+1)},MMM:function(t,e){return e.monthNamesShort[t.getMonth()]},MMMM:function(t,e){return e.monthNames[t.getMonth()]},YY:function(t){return $t(String(t.getFullYear()),4).substr(2)},YYYY:function(t){return $t(t.getFullYear(),4)},h:function(t){return t.getHours()%12||12},hh:function(t){return $t(t.getHours()%12||12)},H:function(t){return t.getHours()},HH:function(t){return $t(t.getHours())},m:function(t){return t.getMinutes()},mm:function(t){return $t(t.getMinutes())},s:function(t){return t.getSeconds()},ss:function(t){return $t(t.getSeconds())},S:function(t){return Math.round(t.getMilliseconds()/100)},SS:function(t){return $t(Math.round(t.getMilliseconds()/10),2)},SSS:function(t){return $t(t.getMilliseconds(),3)},a:function(t,e){return t.getHours()<12?e.amPm[0]:e.amPm[1]},A:function(t,e){return t.getHours()<12?e.amPm[0].toUpperCase():e.amPm[1].toUpperCase()},ZZ:function(t){var e=t.getTimezoneOffset();return(e>0?"-":"+")+$t(100*Math.floor(Math.abs(e)/60)+Math.abs(e)%60,4)}},Tt={D:["\\d\\d?",function(t,e){t.day=e}],Do:["\\d\\d?"+wt,function(t,e){t.day=parseInt(e,10)}],M:["\\d\\d?",function(t,e){t.month=e-1}],YY:["\\d\\d?",function(t,e){var s=+(""+(new Date).getFullYear()).substr(0,2);t.year=""+(e>68?s-1:s)+e}],h:["\\d\\d?",function(t,e){t.hour=e}],m:["\\d\\d?",function(t,e){t.minute=e}],s:["\\d\\d?",function(t,e){t.second=e}],YYYY:["\\d{4}",function(t,e){t.year=e}],S:["\\d",function(t,e){t.millisecond=100*e}],SS:["\\d{2}",function(t,e){t.millisecond=10*e}],SSS:["\\d{3}",function(t,e){t.millisecond=e}],d:["\\d\\d?",St],ddd:[wt,St],MMM:[wt,Ct("monthNamesShort")],MMMM:[wt,Ct("monthNames")],a:[wt,function(t,e,s){var i=e.toLowerCase();i===s.amPm[0]?t.isPm=!1:i===s.amPm[1]&&(t.isPm=!0)}],ZZ:["[^\\s]*?[\\+\\-]\\d\\d:?\\d\\d|[^\\s]*?Z",function(t,e){var s,i=(e+"").match(/([+-]|\d\d)/gi);i&&(s=60*i[1]+parseInt(i[2],10),t.timezoneOffset="+"===i[0]?s:-s)}]};Tt.dd=Tt.d,Tt.dddd=Tt.ddd,Tt.DD=Tt.D,Tt.mm=Tt.m,Tt.hh=Tt.H=Tt.HH=Tt.h,Tt.MM=Tt.M,Tt.ss=Tt.s,Tt.A=Tt.a,yt.masks={default:"ddd MMM DD YYYY HH:mm:ss",shortDate:"M/D/YY",mediumDate:"MMM D, YYYY",longDate:"MMMM D, YYYY",fullDate:"dddd, MMMM D, YYYY",shortTime:"HH:mm",mediumTime:"HH:mm:ss",longTime:"HH:mm:ss.SSS"},yt.format=function(t,e,s){var i=s||yt.i18n;if("number"==typeof t&&(t=new Date(t)),"[object Date]"!==Object.prototype.toString.call(t)||isNaN(t.getTime()))throw new Error("Invalid Date in fecha.format");e=yt.masks[e]||e||yt.masks.default;var n=[];return(e=(e=e.replace(bt,(function(t,e){return n.push(e),"@@@"}))).replace(vt,(function(e){return e in Et?Et[e](t,i):e.slice(1,e.length-1)}))).replace(/@@@/g,(function(){return n.shift()}))},yt.parse=function(t,e,s){var i=s||yt.i18n;if("string"!=typeof e)throw new Error("Invalid format in fecha.parse");if(e=yt.masks[e]||e,t.length>1e3)return null;var n={},o=[],r=[];e=e.replace(bt,(function(t,e){return r.push(e),"@@@"}));var a,l=(a=e,a.replace(/[|\\{()[^$+*?.-]/g,"\\$&")).replace(vt,(function(t){if(Tt[t]){var e=Tt[t];return o.push(e[1]),"("+e[0]+")"}return t}));l=l.replace(/@@@/g,(function(){return r.shift()}));var h=t.match(new RegExp(l,"i"));if(!h)return null;for(var c=1;c<h.length;c++)o[c-1](n,h[c],i);var d,u=new Date;return!0===n.isPm&&null!=n.hour&&12!=+n.hour?n.hour=+n.hour+12:!1===n.isPm&&12==+n.hour&&(n.hour=0),null!=n.timezoneOffset?(n.minute=+(n.minute||0)-+n.timezoneOffset,d=new Date(Date.UTC(n.year||u.getFullYear(),n.month||0,n.day||1,n.hour||0,n.minute||0,n.second||0,n.millisecond||0))):d=new Date(n.year||u.getFullYear(),n.month||0,n.day||1,n.hour||0,n.minute||0,n.second||0,n.millisecond||0),d};(function(){try{(new Date).toLocaleDateString("i")}catch(t){return"RangeError"===t.name}})(),function(){try{(new Date).toLocaleString("i")}catch(t){return"RangeError"===t.name}}(),function(){try{(new Date).toLocaleTimeString("i")}catch(t){return"RangeError"===t.name}}();var At=function(t){return void 0===t.attributes.friendly_name?function(t){return t.substr(t.indexOf(".")+1)}(t.entity_id).replace(/_/g," "):t.attributes.friendly_name||""};customElements.define("thermostat-popup-card",class extends ht{constructor(){super(),this.hvacModeOrdering={auto:1,heat_cool:2,heat:3,cool:4,dry:5,fan_only:6,off:7},this.modeIcons={auto:"hass:calendar-sync",heat_cool:"hass:autorenew",heat:"hass:fire",cool:"hass:snowflake",off:"hass:power",fan_only:"hass:fan",dry:"hass:water-percent"},this.settings=!1,this.settingsCustomCard=!1,this.settingsPosition="bottom",this._compareClimateHvacModes=(t,e)=>this.hvacModeOrdering[t]-this.hvacModeOrdering[e]}static get properties(){return{hass:{},config:{},active:{}}}render(){var t=this.config.entity,e=this.hass.states[t],s=(this.config.icon?this.config.icon:e.attributes.icon&&e.attributes.icon,this.config.name||At(this.hass.states[this.config.entity])),i=null!==e.attributes.temperature&&e.attributes.temperature?e.attributes.temperature:e.attributes.min_temp,n=e.attributes.current_temperature,o=e.state in this.modeIcons?e.state:"unknown-mode",r=this.config.stepSize?this.config.stepSize:e.attributes.target_temp_step?e.attributes.target_temp_step:1,a=!("fullscreen"in this.config)||this.config.fullscreen;if(this.settings="settings"in this.config,this.settingsCustomCard="settingsCard"in this.config,this.settingsPosition="settingsPosition"in this.config?this.config.settingsPosition:"bottom",this.settingsCustomCard&&this.config.settingsCard.cardOptions)if(this.config.settingsCard.cardOptions.entity&&"this"==this.config.settingsCard.cardOptions.entity)this.config.settingsCard.cardOptions.entity=t;else if(this.config.settingsCard.cardOptions.entity_id&&"this"==this.config.settingsCard.cardOptions.entity_id)this.config.settingsCard.cardOptions.entity_id=t;else if(this.config.settingsCard.cardOptions.entities)for(let e in this.config.settingsCard.cardOptions.entities)"this"==this.config.settingsCard.cardOptions.entities[e]&&(this.config.settingsCard.cardOptions.entities[e]=t);return D`
+      <div class="${!0===a?"popup-wrapper":""}">
+        <div class="${dt({[o]:!0})}" style="display:flex;width:100%;height:100%;">
+          <div id="popup" class="popup-inner" @click="${t=>this._close(t)}">
+            <div class="info${!0===a?" fullscreen":""}">
+              <div class="temp ${o}">
+                ${n}&#176;
+              </div>
+              <div class="right">
+                <div class="name">${s}</div>
+                <div class="action">
+                ${e.attributes.hvac_action?this.hass.localize(`state_attributes.climate.hvac_action.${e.attributes.hvac_action}`):this.hass.localize(`state.climate.${e.state}`)}
+                ${e.attributes.preset_mode&&"none"!==e.attributes.preset_mode?D`
+                        -
+                        ${this.hass.localize(`state_attributes.climate.preset_mode.${e.attributes.preset_mode}`)||e.attributes.preset_mode}
+                      `:""}
+                ${i}&#176;</div>
+              </div>
+            </div>
+
+
+            <div id="controls">
+              <div id="slider">
+                <custom-round-slider
+                  .value=${i}
+                  .low=${e.attributes.target_temp_low}
+                  .high=${e.attributes.target_temp_high}
+                  .min=${e.attributes.min_temp}
+                  .max=${e.attributes.max_temp}
+                  .step=${r}
+                  .handleSize=${15}
+                  .gradient=${!0}
+                  .gradientPoints=${[{point:0,color:"#4fdae4"},{point:10,color:"#2da9d8"},{point:25,color:"#56b557"},{point:50,color:"#f4c807"},{point:70,color:"#faaa00"},{point:100,color:"#f86618"}]}
+                  @value-changing=${this._dragEvent}
+                  @value-changed=${this._setTemperature}
+                ></custom-round-slider>
+
+                <div id="slider-center">
+                  <div class="values">
+                    <div class="action">
+                      ${e.attributes.hvac_action?this.hass.localize(`state_attributes.climate.hvac_action.${e.attributes.hvac_action}`):this.hass.localize(`state.climate.${e.state}`)}
+                      ${e.attributes.preset_mode&&"none"!==e.attributes.preset_mode?D`
+                              -
+                              ${this.hass.localize(`state_attributes.climate.preset_mode.${e.attributes.preset_mode}`)||e.attributes.preset_mode}
+                            `:""}
+                    </div>
+                    <div class="value">
+                      ${this._setTemp?Array.isArray(this._setTemp)?1===r?H`
+                                ${this._setTemp[0].toFixed()}&#176; -
+                                ${this._setTemp[1].toFixed()}&#176;
+                                `:H`
+                                ${this._setTemp[0].toFixed(1)}&#176; -
+                                ${this._setTemp[1].toFixed(1)}&#176;
+                                `:1===r?H`
+                                ${this._setTemp.toFixed()}&#176;
+                                `:H`
+                                ${this._setTemp.toFixed(1)}&#176;
+                                `:""}
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+            <div id="modes">
+              ${(e.attributes.hvac_modes||[]).concat().sort(this._compareClimateHvacModes).map(t=>this._renderIcon(t,o))}
+            </div>
+            ${this.settings?D`<button class="settings-btn ${this.settingsPosition}${!0===a?" fullscreen":""}" @click="${()=>this._openSettings()}">${this.config.settings.openButton?this.config.settings.openButton:"Settings"}</button>`:D``}
+          </div>
+          ${this.settings?D`
+            <div id="settings" class="settings-inner" @click="${t=>this._close(t)}">
+              ${this.settingsCustomCard?D`
+                <card-maker nohass data-card="${this.config.settingsCard.type}" data-options="${JSON.stringify(this.config.settingsCard.cardOptions)}" data-style="${this.config.settingsCard.cardStyle?this.config.settingsCard.cardStyle:""}">
+                </card-maker>
+              `:D`
+                  <more-info-controls
+                  .dialogElement=${null}
+                  .canConfigure=${!1}
+                  .hass=${this.hass}
+                  .stateObj=${e}
+                  style="--paper-slider-knob-color: white !important;
+                  --paper-slider-knob-start-color: white !important;
+                  --paper-slider-pin-color: white !important;
+                  --paper-slider-active-color: white !important;
+                  color: white !important;
+                  --primary-text-color: white !important;"
+                ></more-info-controls>
+              `}
+              <button class="settings-btn ${this.settingsPosition}${!0===a?" fullscreen":""}" @click="${()=>this._closeSettings()}">${this.config.settings.closeButton?this.config.settings.closeButton:"Close"}</button>
+            </div>
+          `:D``}
+        </div>
+      </div>
+    `}firstUpdated(){if(this.settings&&!this.settingsCustomCard){const t=this.shadowRoot.querySelector("more-info-controls").shadowRoot;t.removeChild(t.querySelector("app-toolbar"))}else this.settings&&this.settingsCustomCard&&this.shadowRoot.querySelectorAll("card-maker").forEach(t=>{var e={type:t.dataset.card};e=Object.assign({},e,JSON.parse(t.dataset.options)),t.config=e;let s="";if(t.dataset.style&&(s=t.dataset.style),""!=s){let e=0,i=setInterval((function(){let n=t.children[0];if(n){window.clearInterval(i);var o=document.createElement("style");o.innerHTML=s,n.shadowRoot.appendChild(o)}else 10==++e&&window.clearInterval(i)}),100)}})}updated(){this._setTemp=this._getSetTemp(this.hass.states[this.config.entity])}_openSettings(){this.shadowRoot.getElementById("popup").classList.add("off"),this.shadowRoot.getElementById("settings").classList.add("on")}_closeSettings(){this.shadowRoot.getElementById("settings").classList.remove("on"),this.shadowRoot.getElementById("popup").classList.remove("off")}_renderIcon(t,e){return this.modeIcons[t]?D`
+      <ha-icon-button
+        class="${dt({"selected-icon":e===t})}"
+        .mode="${t}"
+        .icon="${this.modeIcons[t]}"
+        @click="${this._handleModeClick}"
+        tabindex="0"
+      ></ha-icon-button>
+    `:D``}_handleModeClick(t){this.hass.callService("climate","set_hvac_mode",{entity_id:this.config.entity,hvac_mode:t.currentTarget.mode})}_getSetTemp(t){return"unavailable"===t.state?this.hass.localize("state.default.unavailable"):t.attributes.target_temp_low&&t.attributes.target_temp_high?[t.attributes.target_temp_low,t.attributes.target_temp_high]:t.attributes.temperature}_close(t){t&&(t.target.className.includes("popup-inner")||t.target.className.includes("settings-inner"))&&_t()}_dragEvent(t){const e=this.hass.states[this.config.entity];t.detail.low?this._setTemp=[t.detail.low,e.attributes.target_temp_high]:t.detail.high?this._setTemp=[e.attributes.target_temp_low,t.detail.high]:this._setTemp=t.detail.value}_setTemperature(t){const e=this.hass.states[this.config.entity];t.detail.low?this.hass.callService("climate","set_temperature",{entity_id:this.config.entity,target_temp_low:t.detail.low,target_temp_high:e.attributes.target_temp_high}):t.detail.high?this.hass.callService("climate","set_temperature",{entity_id:this.config.entity,target_temp_low:e.attributes.target_temp_low,target_temp_high:t.detail.high}):this.hass.callService("climate","set_temperature",{entity_id:this.config.entity,temperature:t.detail.value})}setConfig(t){if(!t.entity)throw new Error("You need to define an entity");this.config=t}getCardSize(){return 1}static get styles(){return at`
+        :host {
+            --auto-color: #97b957;
+            --eco-color: springgreen;
+            --cool-color: #2b9af9;
+            --heat-color: #EE7600;
+            --manual-color: #44739e;
+            --off-color: lightgrey;
+            --fan_only-color: #8a8a8a;
+            --dry-color: #efbd07;
+            --idle-color: #00CC66;
+            --unknown-color: #bac;
+        }
+        .popup-wrapper {
+          margin-top:64px;
+          position: absolute;
+          top: 0;
+          left: 0;
+          right: 0;
+          bottom: 0;
+        }
+        .popup-inner {
+          height: 100%;
+          width: 100%;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          flex-direction: column;
+        }
+        .popup-inner.off {
+          display:none;
+        }
+        #settings {
+          display:none;
+        }
+        .settings-inner {
+          height: 100%;
+          width: 100%;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          flex-direction: column;
+        }
+        #settings.on {
+          display:flex;
+        }
+        .settings-btn {
+          position:absolute;
+          right:30px;
+          background-color: #7f8082;
+          color: #FFF;
+          border: 0;
+          padding: 5px 20px;
+          border-radius: 10px;
+          font-weight: 500;
+          cursor: pointer;
+        }
+        .settings-btn.bottom {
+          bottom:15px;
+        }
+        .settings-btn.top {
+          top: 25px;
+        }
+        .settings-btn.bottom.fullscreen {
+          margin:0;
+        }
+        .fullscreen {
+          margin-top:-64px;
+        }
+        .info {
+          display:flex;
+          flex-direction:row;
+          margin-bottom: 40px;
+        }
+        .info .temp {
+          background-color: #67cd67;
+          height: 60px;
+          width: 60px;  
+          text-align:center;
+          line-height:60px;
+          border-radius:100%;
+          color:#FFF;
+          font-size:18px;
+        }
+
+        .info .temp.heat_cool {
+          background-color: var(--auto-color);
+        }
+        .info .temp.cool {
+          background-color: var(--cool-color);
+        }
+        .info .temp.heat {
+          background-color: var(--heat-color);
+        }
+        .info .temp.manual {
+          background-color: var(--manual-color);
+        }
+        .info .temp.off {
+          background-color: var(--off-color);
+        }
+        .info .temp.fan_only {
+          background-color: var(--fan_only-color);
+        }
+        .info .temp.eco {
+          background-color: var(--eco-color);
+        }
+        .info .temp.dry {
+          background-color: var(--dry-color);
+        }
+        .info .temp.idle {
+          background-color: var(--idle-color);
+        }
+        .info .temp.unknown-mode {
+          background-color: var(--unknown-color);
+        }
+
+
+        .info .right {
+          display:flex;
+          flex-direction:column;
+          margin-left:15px;
+          height:60px;
+          align-items:center;
+          justify-content:center;
+        }
+        .info .right .name {
+          color:#FFF;
+          font-size:24px;
+        }
+        .info .right .action {
+          color: #8b8a8f;
+          font-size:12px;
+        }
+        
+        /* CONTROLS */
+        
+        .auto{
+          --mode-color: var(--auto-color);
+        }
+        .heat_cool {
+          --mode-color: var(--auto-color);
+        }
+        .cool {
+          --mode-color: var(--cool-color);
+        }
+        .heat {
+          --mode-color: var(--heat-color);
+        }
+        .manual {
+          --mode-color: var(--manual-color);
+        }
+        .off {
+          --mode-color: var(--off-color);
+        }
+        .fan_only {
+          --mode-color: var(--fan_only-color);
+        }
+        .eco {
+          --mode-color: var(--eco-color);
+        }
+        .dry {
+          --mode-color: var(--dry-color);
+        }
+        .idle {
+          --mode-color: var(--idle-color);
+        }
+        .unknown-mode {
+          --mode-color: var(--unknown-color);
+        }
+        #controls {
+          display: flex;
+          justify-content: center;
+          padding: 16px;
+          position: relative;
+          width:500px;
+        }
+        #slider {
+          height: 100%;
+          width: 100%;
+          position: relative;
+          max-width: 300px;
+          min-width: 250px;
+        }
+        round-slider {
+          --round-slider-path-color: var(--disabled-text-color);
+          --round-slider-bar-color: var(--mode-color);
+          padding-bottom: 10%;
+        }
+        #slider-center {
+          position: absolute;
+          width: calc(100% - 120px);
+          height: calc(100% - 120px);
+          box-sizing: border-box;
+          border-radius: 100%;
+          left: 60px;
+          top: 60px;
+          text-align: center;
+          overflow-wrap: break-word;
+          pointer-events: none;
+        }
+        
+        .values {
+          display:flex;
+          flex-direction:column;
+          align-items:center;
+          justify-content:center;
+          height:100%;
+          width:100%;
+        }
+        .values .action {
+          color:#f4b941;
+          font-size:10px;
+          text-transform:uppercase;
+        }
+        .values .value {
+          color:#FFF;
+          font-size:60px;
+          line-height: 60px;
+        }
+        
+        #modes > * {
+          color: var(--disabled-text-color);
+          cursor: pointer;
+          display: inline-block;
+        }
+        #modes .selected-icon {
+          color: var(--mode-color);
+        }
+        text {
+          color: var(--primary-text-color);
+        }
+    `}});customElements.define("custom-round-slider",class extends ht{constructor(){super(),this.min=0,this.max=100,this.step=1,this.startAngle=135,this.arcLength=270,this.handleSize=6,this.handleZoom=5,this.disabled=!1,this.dragging=!1,this.rtl=!1,this._scale=1,this.gradient=!1,this.gradientPoints=[]}static get properties(){return{value:{type:Number},high:{type:Number},low:{type:Number},min:{type:Number},max:{type:Number},step:{type:Number},startAngle:{type:Number},arcLength:{type:Number},handleSize:{type:Number},handleZoom:{type:Number},disabled:{type:Boolean},dragging:{type:Boolean,reflect:!0},rtl:{type:Boolean},_scale:{type:Number},gradient:{type:Boolean},gradientPoints:{type:Array}}}get _start(){return this.startAngle*Math.PI/180}get _len(){return Math.min(this.arcLength*Math.PI/180,2*Math.PI-.01)}get _end(){return this._start+this._len}get _enabled(){return!this.disabled&&((null!=this.value||null!=this.high&&null!=this.low)&&((null==this.value||!(this.value>this.max||this.value<this.min))&&((null==this.high||!(this.high>this.max||this.high<this.min))&&(null==this.low||!(this.low>this.max||this.low<this.min)))))}_angleInside(t){let e=(this.startAngle+this.arcLength/2-t+180+360)%360-180;return e<this.arcLength/2&&e>-this.arcLength/2}_angle2xy(t){return this.rtl?{x:-Math.cos(t),y:Math.sin(t)}:{x:Math.cos(t),y:Math.sin(t)}}_xy2angle(t,e){return this.rtl&&(t=-t),(Math.atan2(e,t)-this._start+2*Math.PI)%(2*Math.PI)}_value2angle(t){const e=(t-this.min)/(this.max-this.min);return this._start+e*this._len}_angle2value(t){return Math.round((t/this._len*(this.max-this.min)+this.min)/this.step)*this.step}get _boundaries(){const t=this._angle2xy(this._start),e=this._angle2xy(this._end);let s=1;this._angleInside(270)||(s=Math.max(-t.y,-e.y));let i=1;this._angleInside(90)||(i=Math.max(t.y,e.y));let n=1;this._angleInside(180)||(n=Math.max(-t.x,-e.x));let o=1;return this._angleInside(0)||(o=Math.max(t.x,e.x)),{up:s,down:i,left:n,right:o,height:s+i,width:n+o}}dragStart(t){let e=t.target;if(this._rotation&&"focus"!==this._rotation.type)return;if(e.classList.contains("overflow")&&(e=e.nextElementSibling),!e.classList.contains("handle"))return;e.setAttribute("stroke-width",this.handleSize*this._scale+5+this.handleZoom);const s="high"===e.id?this.low:this.min,i="low"===e.id?this.high:this.max;this._rotation={handle:e,min:s,max:i,start:this[e.id],type:t.type},this.dragging=!0}dragEnd(){if(!this._rotation)return;const t=this._rotation.handle;t.setAttribute("stroke-width",this.handleSize*this._scale+5),this._rotation=!1,this.dragging=!1,t.blur();let e=new CustomEvent("value-changed",{detail:{[t.id]:this[t.id]}});this.dispatchEvent(e),this.low&&this.low>=.99*this.max?this._reverseOrder=!0:this._reverseOrder=!1}drag(t){if(!this._rotation)return;if("focus"===this._rotation.type)return;t.preventDefault();const e="touchmove"===t.type?t.touches[0].clientX:t.clientX,s="touchmove"===t.type?t.touches[0].clientY:t.clientY,i=this.shadowRoot.querySelector("svg").getBoundingClientRect(),n=this._boundaries,o=e-(i.left+n.left*i.width/n.width),r=s-(i.top+n.up*i.height/n.height),a=this._xy2angle(o,r),l=this._angle2value(a);this._dragpos(l)}_dragpos(t){if(t<this._rotation.min||t>this._rotation.max)return;const e=this._rotation.handle;this[e.id]=t;let s=new CustomEvent("value-changing",{detail:{[e.id]:t}});this.dispatchEvent(s)}_keyStep(t){if(!this._rotation)return;const e=this._rotation.handle;"ArrowLeft"===t.key&&(this.rtl?this._dragpos(this[e.id]+this.step):this._dragpos(this[e.id]-this.step)),"ArrowRight"===t.key&&(this.rtl?this._dragpos(this[e.id]-this.step):this._dragpos(this[e.id]+this.step))}firstUpdated(){document.addEventListener("mouseup",this.dragEnd.bind(this)),document.addEventListener("touchend",this.dragEnd.bind(this),{passive:!1}),document.addEventListener("mousemove",this.drag.bind(this)),document.addEventListener("touchmove",this.drag.bind(this),{passive:!1}),document.addEventListener("keydown",this._keyStep.bind(this))}updated(t){if(this.shadowRoot.querySelector("svg")&&void 0!==this.shadowRoot.querySelector("svg").style.vectorEffect)return;t.has("_scale")&&1!=this._scale&&this.shadowRoot.querySelector("svg").querySelectorAll("path").forEach(t=>{if(t.getAttribute("stroke-width"))return;const e=parseFloat(getComputedStyle(t).getPropertyValue("stroke-width"));t.style.strokeWidth=`${e*this._scale}px`});const e=this.shadowRoot.querySelector("svg").getBoundingClientRect(),s=Math.max(e.width,e.height);this._scale=2/s}_renderArc(t,e){const s=e-t;return t=this._angle2xy(t),e=this._angle2xy(e+.001),`\n      M ${t.x} ${t.y}\n      A 1 1,\n        0,\n        ${s>Math.PI?"1":"0"} ${this.rtl?"0":"1"},\n        ${e.x} ${e.y}\n    `}_renderHandle(t){const e=this._value2angle(this[t]),s=this._angle2xy(e);return H`
+      <g class="${t} handle">
+        <path
+          id=${t}
+          class="overflow"
+          d="
+          M ${s.x} ${s.y}
+          L ${s.x+.001} ${s.y+.001}
+          "
+          vector-effect="non-scaling-stroke"
+          stroke="rgba(0,0,0,0)"
+          stroke-linecap="round"
+          stroke-width="${4*this.handleSize*this._scale}"
+          />
+        <path
+          id=${t}
+          class="handle"
+          d=${this._renderArc(this._value2angle("low"!=t?this[t]-.35:this[t]+.35),this._value2angle(this[t]))}
+          vector-effect="non-scaling-stroke"
+          tabindex="0"
+          @focus=${this.dragStart}
+          @blur=${this.dragEnd}
+          />
+        </g>
+      `}render(){const t=this._boundaries;return D`
+      <svg
+        @mousedown=${this.dragStart}
+        @touchstart=${this.dragStart}
+        xmln="http://www.w3.org/2000/svg"
+        viewBox="${-t.left} ${-t.up} ${t.width} ${t.height}"
+        style="margin: 30px;"
+        focusable="false"
+      >
+        ${this.gradient?D`
+        
+        `:D``}
+        <g class="slider">
+          <defs>
+            <linearGradient id="gradient" x1="0%" y1="0%" x2="100%" y2="0%">
+            ${this.gradientPoints.map(t=>H`<stop offset="${t.point}%" style="stop-color:${t.color};" />`)}
+            </linearGradient>
+          </defs>
+          <path
+            class="path" style="${this.gradient?"stroke: url(#gradient);":"stroke: var(--round-slider-path-color, lightgray);"}" 
+            d=${this._renderArc(this._start,this._end)}
+            vector-effect="non-scaling-stroke"
+          />
+          ${this._enabled?H`
+              <path
+                class="block"
+                vector-effect="non-scaling-stroke"
+                d=${this._renderArc(this._start,this._value2angle(null!=this.low?this.low:this.min))}
+              />
+              <path
+                class="block"
+                vector-effect="non-scaling-stroke"
+                d=${this._renderArc(this._value2angle(null!=this.high?this.high:this.value),this._end)}
+              />
+              <path
+                class="block-dash"
+                stroke-dasharray="2, 25"
+                vector-effect="non-scaling-stroke"
+                d=${this._renderArc(this._start,this._end)}
+              />
+              <path
+                class="bar"
+                vector-effect="non-scaling-stroke"
+                d=${this._renderArc(this._value2angle(null!=this.low?this.low:this.min),this._value2angle(null!=this.high?this.high:this.value))}
+              />
+              
+              `:""}
+        </g>
+        <g class="handles">
+        ${this._enabled?null!=this.low?this._reverseOrder?D`${this._renderHandle("high")} ${this._renderHandle("low")}`:D`${this._renderHandle("low")} ${this._renderHandle("high")}`:D`${this._renderHandle("value")}`:""}
+        </g>
+        
+      </svg>
+    `}static get styles(){return at`
+      :host {
+        display: inline-block;
+        width: 100%;
+      }
+      svg {
+        overflow: visible;
+      }
+      .slider {
+        fill: none;
+        stroke-width: var(--round-slider-path-width, 30);
+        stroke-linecap: var(--round-slider-linecap, butt);
+      }
+      .path {
+      }
+      .bar {
+        stroke: var(--round-slider-bar-color, transparent);
+      }
+      .block {
+        stroke-width: var(--round-slider-block-path-width, 31);
+        stroke: #2c2c2e;
+      }
+      .block-dash {
+        stroke-width: var(--round-slider-dash-width, 20);
+        stroke: var(--round-slider-block-dash-color, rgba(255,255,255,0.1));
+      }
+      g.handles {
+        stroke: var(--round-slider-handle-color, var(--round-slider-bar-color, deepskyblue));
+        stroke-linecap: round;
+      }
+      g.handle {
+        stroke-width: var(--round-slider-dash-width, 20);
+        stroke: #FFF;
+        stroke-dasharray: 3, 8;
+        stroke-linecap: butt;
+      }
+      .handle:focus {
+        outline: unset;
+      }
+    `}});
diff --git a/src/thermostat-popup-card.ts b/src/thermostat-popup-card.ts
index 2418448..cba50e5 100644
--- a/src/thermostat-popup-card.ts
+++ b/src/thermostat-popup-card.ts
@@ -18,7 +18,7 @@ class ThermostatPopupCard extends LitElement {
     off: 7,
   };
   modeIcons = {
-    auto: "hass:calendar-repeat",
+    auto: "hass:calendar-sync",
     heat_cool: "hass:autorenew",
     heat: "hass:fire",
     cool: "hass:snowflake",
@@ -367,7 +367,7 @@ class ThermostatPopupCard extends LitElement {
   static get styles() {
     return css`
         :host {
-            --auto-color: #EE7600;
+            --auto-color: #97b957;
             --eco-color: springgreen;
             --cool-color: #2b9af9;
             --heat-color: #EE7600;
@@ -501,6 +501,9 @@ class ThermostatPopupCard extends LitElement {
         
         /* CONTROLS */
         
+        .auto{
+          --mode-color: var(--auto-color);
+        }
         .heat_cool {
           --mode-color: var(--auto-color);
         }