@openremote/or-components 1.8.0-snapshot.20250725120001 → 1.8.0-snapshot.20250725123024

package/lib/or-file-uploader.js

@@ -1,187 +1,77 @@
-var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
-    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
-    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
-    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
-    return c > 3 && r && Object.defineProperty(target, key, r), r;
-};
-var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
-    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
-    return new (P || (P = Promise))(function (resolve, reject) {
-        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
-        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
-        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
-        step((generator = generator.apply(thisArg, _arguments || [])).next());
-    });
-};
-/*
- * Copyright 2022, OpenRemote Inc.
- *
- * See the CONTRIBUTORS.txt file in the distribution for a
- * full listing of individual contributors.
- *
- * This program is free software: you can redistribute it and/or modify
- * it under the terms of the GNU Affero General Public License as
- * published by the Free Software Foundation, either version 3 of the
- * License, or (at your option) any later version.
- *
- * This program is distributed in the hope that it will be useful,
- * but WITHOUT ANY WARRANTY; without even the implied warranty of
- * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
- * GNU Affero General Public License for more details.
- *
- * You should have received a copy of the GNU Affero General Public License
- * along with this program. If not, see <http://www.gnu.org/licenses/>.
- */
-import { css, html, LitElement } from "lit";
-import { customElement, property } from "lit/decorators.js";
-import { i18next } from "@openremote/or-translate";
-import "./or-loading-indicator";
-let OrFileUploader = class OrFileUploader extends LitElement {
-    constructor() {
-        super(...arguments);
-        // Contains the content that will be shown towards the user.
-        this.src = "";
-        this.managerUrl = "";
-        this.title = "";
-        this.accept = "image/png,image/jpeg,image/vnd.microsoft.icon,image/svg+xml";
-        this.loading = false;
-        this.files = [];
-    }
-    get Files() {
-        return this.files;
-    }
-    static get styles() {
-        return css `
-            #imageContainer {
-                position: relative;
-                max-width: 150px;
-                background-color: whitesmoke;
-                border: 1px solid var(--or-app-color5, #CCC);;
-                cursor: pointer;
-                border-radius: 4px;
-                padding: 4px;
-            }
-
-            #imageContainer img {
-                max-width: 100%;
-                max-height: 100%;
-                border-radius: 2px;
-                margin: unset;
-            }
-
-            input {
-                display: none;
-            }
-
-            .placeholder-container {
-                text-align: center;
-                width: 100%;
-            }
-
-            .placeholder-container or-icon {
-                font-size: 24px;
-                margin: 16px 0;
-                max-height: 24px;
-                width: 100%;
-                text-align: center;
-            }
-
-            #imageContainer:hover .pencil-container{
-                display: flex;
-            }
-
-            #imageContainer .pencil-container {
-                position: absolute;
-                top: 0;
-                bottom: 0;
-                left: 0;
-                right: 0;
-                background: rgba(0,0,0,.4);
-                color: var(--or-app-color4);
-                display: none;
-                justify-content: center;
-                align-items: center;
-            }
-
-            .container {
-                position: relative;
-            }
-        `;
-    }
-    firstUpdated(_changedProperties) {
-        var _a, _b;
-        super.firstUpdated(_changedProperties);
-        const fileInput = (_a = this.shadowRoot) === null || _a === void 0 ? void 0 : _a.getElementById('fileInput');
-        const imageContainer = (_b = this.shadowRoot) === null || _b === void 0 ? void 0 : _b.getElementById('imageContainer');
-        fileInput === null || fileInput === void 0 ? void 0 : fileInput.addEventListener("input", (e) => {
-            this._onChange(e);
-        });
-        imageContainer === null || imageContainer === void 0 ? void 0 : imageContainer.addEventListener("click", (e) => {
-            fileInput === null || fileInput === void 0 ? void 0 : fileInput.click();
-        });
-    }
-    _onChange(e) {
-        return __awaiter(this, void 0, void 0, function* () {
-            var _a;
-            this.files = (_a = e === null || e === void 0 ? void 0 : e.target) === null || _a === void 0 ? void 0 : _a.files;
-            this.loading = true;
-            this.requestUpdate();
-            this.dispatchEvent(new CustomEvent("change", {
-                detail: { value: this.files },
-            }));
-            this.loading = false;
-            this.requestUpdate();
-        });
-    }
-    render() {
-        const file = () => {
-            if (this.src) {
-                if (this.src.includes("data:image")) {
-                    return this.src;
-                }
-                else {
-                    return this.managerUrl + this.src;
-                }
+var __decorate=this&&this.__decorate||function(e,t,i,r){var o,n=arguments.length,a=n<3?t:null===r?r=Object.getOwnPropertyDescriptor(t,i):r;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)a=Reflect.decorate(e,t,i,r);else for(var l=e.length-1;l>=0;l--)(o=e[l])&&(a=(n<3?o(a):n>3?o(t,i,a):o(t,i))||a);return n>3&&a&&Object.defineProperty(t,i,a),a},__awaiter=this&&this.__awaiter||function(e,t,i,r){return new(i||(i=Promise))(function(o,n){function a(e){try{c(r.next(e))}catch(e){n(e)}}function l(e){try{c(r.throw(e))}catch(e){n(e)}}function c(e){var t;e.done?o(e.value):((t=e.value)instanceof i?t:new i(function(e){e(t)})).then(a,l)}c((r=r.apply(e,t||[])).next())})};import{css as e,html as t,LitElement as i}from"lit";import{customElement as r,property as o}from"lit/decorators.js";import{i18next as n}from"@openremote/or-translate";import"./or-loading-indicator";let OrFileUploader=class extends i{constructor(){super(...arguments),this.src="",this.managerUrl="",this.title="",this.accept="image/png,image/jpeg,image/vnd.microsoft.icon,image/svg+xml",this.loading=!1,this.files=[]}get Files(){return this.files}static get styles(){return e`
+            #imageContainer {
+                position: relative;
+                max-width: 150px;
+                background-color: whitesmoke;
+                border: 1px solid var(--or-app-color5, #CCC);;
+                cursor: pointer;
+                border-radius: 4px;
+                padding: 4px;
             }
-        };
-        return html `
-            <div class="container">
-                ${this.loading ? html `
-                    <or-loading-indicator .overlay="${true}"></or-loading-indicator>` : ""}
-                <div class="title">${this.title}</div>
-                <div id="imageContainer">
-
-                    ${this.src ? html `
-                          <img src="${file()}" alt="OR-File-Uploader">
-                          <div class="pencil-container">
-                              <or-icon icon="pencil-circle"></or-icon>
-                          </div>
-                      ` : html `
-                          <div class="placeholder-container">
-                              <or-icon icon="upload"></or-icon>
-                              ${i18next.t('uploadFile')}
-                          </div>
-                      `}
-                </div>
-                <input type="file" id="fileInput" accept="${this.accept}">
-            </div>
-        `;
-    }
-};
-__decorate([
-    property({ attribute: false })
-], OrFileUploader.prototype, "src", void 0);
-__decorate([
-    property({ attribute: false })
-], OrFileUploader.prototype, "managerUrl", void 0);
-__decorate([
-    property()
-], OrFileUploader.prototype, "title", void 0);
-__decorate([
-    property({ attribute: false })
-], OrFileUploader.prototype, "accept", void 0);
-OrFileUploader = __decorate([
-    customElement("or-file-uploader")
-], OrFileUploader);
-export { OrFileUploader };
-//# sourceMappingURL=or-file-uploader.js.map
+
+            #imageContainer img {
+                max-width: 100%;
+                max-height: 100%;
+                border-radius: 2px;
+                margin: unset;
+            }
+
+            input {
+                display: none;
+            }
+
+            .placeholder-container {
+                text-align: center;
+                width: 100%;
+            }
+
+            .placeholder-container or-icon {
+                font-size: 24px;
+                margin: 16px 0;
+                max-height: 24px;
+                width: 100%;
+                text-align: center;
+            }
+
+            #imageContainer:hover .pencil-container{
+                display: flex;
+            }
+
+            #imageContainer .pencil-container {
+                position: absolute;
+                top: 0;
+                bottom: 0;
+                left: 0;
+                right: 0;
+                background: rgba(0,0,0,.4);
+                color: var(--or-app-color4);
+                display: none;
+                justify-content: center;
+                align-items: center;
+            }
+
+            .container {
+                position: relative;
+            }
+        `}firstUpdated(e){var t,i;super.firstUpdated(e);let r=null==(t=this.shadowRoot)?void 0:t.getElementById("fileInput"),o=null==(i=this.shadowRoot)?void 0:i.getElementById("imageContainer");null==r||r.addEventListener("input",e=>{this._onChange(e)}),null==o||o.addEventListener("click",e=>{null==r||r.click()})}_onChange(e){return __awaiter(this,void 0,void 0,function*(){var t;this.files=null==(t=null==e?void 0:e.target)?void 0:t.files,this.loading=!0,this.requestUpdate(),this.dispatchEvent(new CustomEvent("change",{detail:{value:this.files}})),this.loading=!1,this.requestUpdate()})}render(){return t`
+            <div class="container">
+                ${this.loading?t`
+                    <or-loading-indicator .overlay="${!0}"></or-loading-indicator>`:""}
+                <div class="title">${this.title}</div>
+                <div id="imageContainer">
+
+                    ${this.src?t`
+                          <img src="${(()=>{if(this.src)if(this.src.includes("data:image"))return this.src;else return this.managerUrl+this.src})()}" alt="OR-File-Uploader">
+                          <div class="pencil-container">
+                              <or-icon icon="pencil-circle"></or-icon>
+                          </div>
+                      `:t`
+                          <div class="placeholder-container">
+                              <or-icon icon="upload"></or-icon>
+                              ${n.t("uploadFile")}
+                          </div>
+                      `}
+                </div>
+                <input type="file" id="fileInput" accept="${this.accept}">
+            </div>
+        `}};__decorate([o({attribute:!1})],OrFileUploader.prototype,"src",void 0),__decorate([o({attribute:!1})],OrFileUploader.prototype,"managerUrl",void 0),__decorate([o()],OrFileUploader.prototype,"title",void 0),__decorate([o({attribute:!1})],OrFileUploader.prototype,"accept",void 0),OrFileUploader=__decorate([r("or-file-uploader")],OrFileUploader);export{OrFileUploader};

package/lib/or-form.js

@@ -1,77 +1,12 @@
-var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
-    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
-    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
-    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
-    return c > 3 && r && Object.defineProperty(target, key, r), r;
-};
-import { css, html, LitElement } from "lit";
-import { customElement, queryAssignedElements } from "lit/decorators.js";
-import { OrMwcInput } from "@openremote/or-mwc-components/or-mwc-input";
-// language=CSS
-const style = css `
-    
-    :host {
-        display: block;
-    }
-
-    :host([hidden]) {
-        display: none;
-    }
-`;
-/**
- * This is a form element that supports any element that has a value property
- */
-// TODO: Support any form element
-let OrForm = class OrForm extends LitElement {
-    firstUpdated(_changedProperties) {
-        super.firstUpdated(_changedProperties);
-        // if (this._panel) {
-        //     new SimpleBar(this._panel, {
-        //         autoHide: this.autoHide,
-        //         // @ts-ignore
-        //         forceVisible: this.forceVisible
-        //     });
-        // }
-    }
-    render() {
-        return html `
-            <slot></slot>
-        `;
-    }
-    checkValidity() {
-        let valid = false;
-        this.formNodes.filter(node => node instanceof OrMwcInput && node.name).map(node => node).forEach(orMwcInput => {
-            const inputValid = orMwcInput.checkValidity();
-            valid = valid && inputValid;
-        });
-        return valid;
-    }
-    reportValidity() {
-        let valid = true;
-        this.formNodes.filter(node => node instanceof OrMwcInput && node.name).map(node => node).forEach(orMwcInput => {
-            const inputValid = orMwcInput.reportValidity();
-            valid = valid && inputValid;
-        });
-        return valid;
-    }
-    submit() {
-        const data = {};
-        this.formNodes.filter(node => node instanceof OrMwcInput && node.name).map(node => node).forEach(orMwcInput => {
-            data[orMwcInput.name] = orMwcInput.value;
-        });
-        return data;
-    }
-    reset() {
-        this.formNodes.filter(node => node instanceof OrMwcInput && node.name).map(node => node).forEach(orMwcInput => {
-            orMwcInput.value = undefined;
-        });
-    }
-};
-__decorate([
-    queryAssignedElements()
-], OrForm.prototype, "formNodes", void 0);
-OrForm = __decorate([
-    customElement("or-form")
-], OrForm);
-export { OrForm };
-//# sourceMappingURL=or-form.js.map
+var __decorate=this&&this.__decorate||function(e,t,r,o){var i,a=arguments.length,n=a<3?t:null===o?o=Object.getOwnPropertyDescriptor(t,r):o;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)n=Reflect.decorate(e,t,r,o);else for(var s=e.length-1;s>=0;s--)(i=e[s])&&(n=(a<3?i(n):a>3?i(t,r,n):i(t,r))||n);return a>3&&n&&Object.defineProperty(t,r,n),n};import{css as e,html as t,LitElement as r}from"lit";import{customElement as o,queryAssignedElements as i}from"lit/decorators.js";import{OrMwcInput as a}from"@openremote/or-mwc-components/or-mwc-input";let style=e`
+    
+    :host {
+        display: block;
+    }
+
+    :host([hidden]) {
+        display: none;
+    }
+`,OrForm=class extends r{firstUpdated(e){super.firstUpdated(e)}render(){return t`
+            <slot></slot>
+        `}checkValidity(){let e=!1;return this.formNodes.filter(e=>e instanceof a&&e.name).map(e=>e).forEach(t=>{let r=t.checkValidity();e=e&&r}),e}reportValidity(){let e=!0;return this.formNodes.filter(e=>e instanceof a&&e.name).map(e=>e).forEach(t=>{let r=t.reportValidity();e=e&&r}),e}submit(){let e={};return this.formNodes.filter(e=>e instanceof a&&e.name).map(e=>e).forEach(t=>{e[t.name]=t.value}),e}reset(){this.formNodes.filter(e=>e instanceof a&&e.name).map(e=>e).forEach(e=>{e.value=void 0})}};__decorate([i()],OrForm.prototype,"formNodes",void 0),OrForm=__decorate([o("or-form")],OrForm);export{OrForm};

package/lib/or-loading-indicator.js

@@ -1,123 +1,73 @@
-var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
-    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
-    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
-    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
-    return c > 3 && r && Object.defineProperty(target, key, r), r;
-};
-/*
- * Copyright 2022, OpenRemote Inc.
- *
- * See the CONTRIBUTORS.txt file in the distribution for a
- * full listing of individual contributors.
- *
- * This program is free software: you can redistribute it and/or modify
- * it under the terms of the GNU Affero General Public License as
- * published by the Free Software Foundation, either version 3 of the
- * License, or (at your option) any later version.
- *
- * This program is distributed in the hope that it will be useful,
- * but WITHOUT ANY WARRANTY; without even the implied warranty of
- * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
- * GNU Affero General Public License for more details.
- *
- * You should have received a copy of the GNU Affero General Public License
- * along with this program. If not, see <http://www.gnu.org/licenses/>.
- */
-import { css, html, LitElement } from "lit";
-import { customElement, property } from "lit/decorators.js";
-let OrLoadingIndicator = class OrLoadingIndicator extends LitElement {
-    constructor() {
-        super(...arguments);
-        this.overlay = false;
-    }
-    static get styles() {
-        return css `
-      .loader-container {
-        position: absolute;
-        top: 0;
-        left: 0;
-        right: 0;
-        bottom: 0;
-        background-color: rgba(0, 0, 0, .2);
-        z-index: 1000;
-      }
-
-      .loader {
-        position: absolute;
-        left: 50%;
-        transform: translate(-50%, -50%);
-        top: 50%;
-        z-index: 1010;
-      }
-
-      .loader svg {
-        height: 60px;
-        width: 60px;
-      }
-
-      @-webkit-keyframes rotate-right {
-        from {
-          -webkit-transform: rotate(0deg);
-        }
-        to {
-          -webkit-transform: rotate(360deg);
-        }
-      }
-      @-webkit-keyframes rotate-left {
-        from {
-          -webkit-transform: rotate(0deg);
-        }
-        to {
-          -webkit-transform: rotate(-360deg);
-        }
-      }
-
-      .loader #circle1 {
-        -webkit-transform: translate3d(0, 0, 0);
-        -webkit-transform-origin: 54.1px 53.6px;
-        -webkit-animation: rotate-right 7s linear 0s infinite;
-      }
-
-      .loader #circle2 {
-        -webkit-transform: translate3d(0, 0, 0);
-        -webkit-transform-origin: 54.1px 53.6px;
-        -webkit-animation: rotate-left 6s linear 0s infinite;
-      }
-
-      .loader #circle3 {
-        -webkit-transform: translate3d(0, 0, 0);
-        -webkit-transform-origin: 54.1px 53.6px;
-        -webkit-animation: rotate-right 5s linear 0s infinite;
-      }
-    `;
-    }
-    render() {
-        const loader = html `
-      <div class="loader">
-        <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 110 110"
-             xml:space="preserve">
-                    <path fill="#d2d2d2" id="circle1"
-                          d="M53.648,107.296C24.068,107.296,0,83.236,0,53.646h11.234c0,23.391,19.025,42.42,42.414,42.42   c23.385,0,42.416-19.029,42.416-42.42c0-23.382-19.031-42.408-42.416-42.408V0c29.582,0,53.65,24.068,53.65,53.646   C107.299,83.236,83.23,107.296,53.648,107.296L53.648,107.296z" />
-          <path fill="#a5a5a5" id="circle2"
-                d="M45.525,92.57c-10.395-2.166-19.324-8.262-25.145-17.137c-5.814-8.884-7.826-19.511-5.654-29.906   c2.174-10.399,8.258-19.325,17.141-25.145c8.889-5.815,19.506-7.825,29.906-5.655c21.463,4.479,35.281,25.582,30.803,47.041   L81.58,59.478c3.207-15.397-6.703-30.539-22.105-33.751c-7.461-1.56-15.078-0.119-21.455,4.06   c-6.369,4.169-10.736,10.58-12.299,18.039c-1.555,7.458-0.113,15.075,4.064,21.453c4.17,6.37,10.576,10.744,18.041,12.297   L45.525,92.57L45.525,92.57z" />
-          <path fill="#878787" id="circle3"
-                d="M53.682,79.428c-0.432,0-0.871-0.012-1.309-0.032c-6.869-0.342-13.205-3.344-17.83-8.439   c-4.621-5.108-6.982-11.705-6.639-18.582l11.215,0.553c-0.188,3.879,1.141,7.609,3.75,10.488c2.604,2.879,6.186,4.568,10.059,4.761   c3.869,0.179,7.607-1.142,10.48-3.748c2.887-2.603,4.576-6.179,4.773-10.057c0.391-8.012-5.803-14.854-13.816-15.248l0.559-11.222   c14.201,0.71,25.178,12.823,24.475,27.021c-0.344,6.883-3.336,13.212-8.441,17.831C66.174,77.086,60.084,79.428,53.682,79.428   L53.682,79.428z" />
-                  </svg>
-      </div>`;
-        if (this.overlay) {
-            return html `
-        <div class="loader-container">
-          ${loader}
-        </div>`;
+var __decorate=this&&this.__decorate||function(t,e,r,i){var o,a=arguments.length,n=a<3?e:null===i?i=Object.getOwnPropertyDescriptor(e,r):i;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)n=Reflect.decorate(t,e,r,i);else for(var c=t.length-1;c>=0;c--)(o=t[c])&&(n=(a<3?o(n):a>3?o(e,r,n):o(e,r))||n);return a>3&&n&&Object.defineProperty(e,r,n),n};import{css as t,html as e,LitElement as r}from"lit";import{customElement as i,property as o}from"lit/decorators.js";let OrLoadingIndicator=class extends r{constructor(){super(...arguments),this.overlay=!1}static get styles(){return t`
+      .loader-container {
+        position: absolute;
+        top: 0;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        background-color: rgba(0, 0, 0, .2);
+        z-index: 1000;
+      }
+
+      .loader {
+        position: absolute;
+        left: 50%;
+        transform: translate(-50%, -50%);
+        top: 50%;
+        z-index: 1010;
+      }
+
+      .loader svg {
+        height: 60px;
+        width: 60px;
+      }
+
+      @-webkit-keyframes rotate-right {
+        from {
+          -webkit-transform: rotate(0deg);
         }
-        return loader;
-    }
-};
-__decorate([
-    property({ attribute: true })
-], OrLoadingIndicator.prototype, "overlay", void 0);
-OrLoadingIndicator = __decorate([
-    customElement("or-loading-indicator")
-], OrLoadingIndicator);
-export { OrLoadingIndicator };
-//# sourceMappingURL=or-loading-indicator.js.map
+        to {
+          -webkit-transform: rotate(360deg);
+        }
+      }
+      @-webkit-keyframes rotate-left {
+        from {
+          -webkit-transform: rotate(0deg);
+        }
+        to {
+          -webkit-transform: rotate(-360deg);
+        }
+      }
+
+      .loader #circle1 {
+        -webkit-transform: translate3d(0, 0, 0);
+        -webkit-transform-origin: 54.1px 53.6px;
+        -webkit-animation: rotate-right 7s linear 0s infinite;
+      }
+
+      .loader #circle2 {
+        -webkit-transform: translate3d(0, 0, 0);
+        -webkit-transform-origin: 54.1px 53.6px;
+        -webkit-animation: rotate-left 6s linear 0s infinite;
+      }
+
+      .loader #circle3 {
+        -webkit-transform: translate3d(0, 0, 0);
+        -webkit-transform-origin: 54.1px 53.6px;
+        -webkit-animation: rotate-right 5s linear 0s infinite;
+      }
+    `}render(){let t=e`
+      <div class="loader">
+        <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 110 110"
+             xml:space="preserve">
+                    <path fill="#d2d2d2" id="circle1"
+                          d="M53.648,107.296C24.068,107.296,0,83.236,0,53.646h11.234c0,23.391,19.025,42.42,42.414,42.42   c23.385,0,42.416-19.029,42.416-42.42c0-23.382-19.031-42.408-42.416-42.408V0c29.582,0,53.65,24.068,53.65,53.646   C107.299,83.236,83.23,107.296,53.648,107.296L53.648,107.296z" />
+          <path fill="#a5a5a5" id="circle2"
+                d="M45.525,92.57c-10.395-2.166-19.324-8.262-25.145-17.137c-5.814-8.884-7.826-19.511-5.654-29.906   c2.174-10.399,8.258-19.325,17.141-25.145c8.889-5.815,19.506-7.825,29.906-5.655c21.463,4.479,35.281,25.582,30.803,47.041   L81.58,59.478c3.207-15.397-6.703-30.539-22.105-33.751c-7.461-1.56-15.078-0.119-21.455,4.06   c-6.369,4.169-10.736,10.58-12.299,18.039c-1.555,7.458-0.113,15.075,4.064,21.453c4.17,6.37,10.576,10.744,18.041,12.297   L45.525,92.57L45.525,92.57z" />
+          <path fill="#878787" id="circle3"
+                d="M53.682,79.428c-0.432,0-0.871-0.012-1.309-0.032c-6.869-0.342-13.205-3.344-17.83-8.439   c-4.621-5.108-6.982-11.705-6.639-18.582l11.215,0.553c-0.188,3.879,1.141,7.609,3.75,10.488c2.604,2.879,6.186,4.568,10.059,4.761   c3.869,0.179,7.607-1.142,10.48-3.748c2.887-2.603,4.576-6.179,4.773-10.057c0.391-8.012-5.803-14.854-13.816-15.248l0.559-11.222   c14.201,0.71,25.178,12.823,24.475,27.021c-0.344,6.883-3.336,13.212-8.441,17.831C66.174,77.086,60.084,79.428,53.682,79.428   L53.682,79.428z" />
+                  </svg>
+      </div>`;return this.overlay?e`
+        <div class="loader-container">
+          ${t}
+        </div>`:t}};__decorate([o({attribute:!0})],OrLoadingIndicator.prototype,"overlay",void 0),OrLoadingIndicator=__decorate([i("or-loading-indicator")],OrLoadingIndicator);export{OrLoadingIndicator};