/**
 * @license Copyright © HatioLab Inc. All rights reserved.
 */
import { __decorate, __metadata } from "tslib";
import { LitElement, css, html } from 'lit';
import { customElement, property, query } from 'lit/decorators.js';
import { ScrollbarStyles } from '@operato/styles';
/**
A lightweight progress-circle WebComponent

Example:
  <ox-progress-circle
    .value=${70}
    suffix="%"
    fontSize="29px"
    fontColor="#4E5055"
    borderStyle="none"
    innerCircleSize="28%"
    circleColor="#0595E5"
    shadow="#00000026 4px 4px 4px"
    background="#eaf5fd"
  ></ox-progress-circle>
*/
let ProgressCircle = class ProgressCircle extends LitElement {
    constructor() {
        super(...arguments);
        this.value = 0;
        this.suffix = '';
        this.fontSize = '10px';
        this.fontColor = '';
        this.borderStyle = '';
        this.innerCircleSize = '10%';
        this.shadow = '';
        this.circleColor = 'yellowgreen';
        this.background = '';
    }
    static { this.styles = [
        ScrollbarStyles,
        css `
      :host {
        display: flex;

        div[circle] {
          width: 100%;
          font-size: 29px;
          font-weight: bold;
          aspect-ratio: 1;
          display: flex;
          border-radius: 50%;
          border: 1px solid #353b48;
          position: relative;
          background: conic-gradient(yellowgreen 0deg, #131929 0deg);
          box-shadow: #00000026 5px 5px 5px;
        }
        div[inner-circle] {
          width: 90%;
          aspect-ratio: 1;
          border-radius: inherit;
          background-color: var(--primary-color) !important;
          margin: auto;
          display: flex;
          flex-direction: column;
          align-items: center;
          color: white;
          justify-content: center;
          box-shadow: inset #00000026 -2px 2px 8px;
        }

        div[inner-circle] span {
          display: flex;
          align-items: center;
        }

        span[progress-title] {
          font-size: 0.65em;
          margin-bottom: -5%;
        }
        span.unit{
          opacity:.7;
          font-size:.7em;
          font-weight:400;
        }  
      }
    `
    ]; }
    firstUpdated() {
        if (this.fontSize) {
            this.circle.style.fontSize = this.fontSize;
        }
        if (this.fontColor) {
            this.innerCircle.style.color = this.fontColor;
        }
        if (this.borderStyle) {
            this.circle.style.border = this.borderStyle;
        }
        if (this.innerCircleSize) {
            this.innerCircle.style.width = `calc(100% - ${this.innerCircleSize})`;
        }
        if (this.shadow) {
            this.circle.style.boxShadow = this.shadow;
        }
        if (this.background) {
            this.innerCircle.style.background = this.background;
        }
        if (this.progressTitle && this.circleColor) {
            this.progressTitle.style.color = this.circleColor;
        }
    }
    updated(changes) {
        if (changes.has('value')) {
            this.updateCircleBackground();
        }
    }
    updateCircleBackground() {
        const position = this.value * 3.6; // 360 = 100%
        this.circle.style.background = `conic-gradient(${this.circleColor} ${position}deg, ${this.background} 0deg)`;
    }
    render() {
        return html `
      <div circle>
        <div inner-circle>
          <span class="value">${this.value}</span>
          <span class="unit">${this.suffix}</span>
        </div>
      </div>
    `;
    }
};
__decorate([
    property({ type: Number }),
    __metadata("design:type", Number)
], ProgressCircle.prototype, "value", void 0);
__decorate([
    property({ type: String }),
    __metadata("design:type", String)
], ProgressCircle.prototype, "suffix", void 0);
__decorate([
    property({ type: String }),
    __metadata("design:type", String)
], ProgressCircle.prototype, "fontSize", void 0);
__decorate([
    property({ type: String }),
    __metadata("design:type", String)
], ProgressCircle.prototype, "fontColor", void 0);
__decorate([
    property({ type: String }),
    __metadata("design:type", String)
], ProgressCircle.prototype, "borderStyle", void 0);
__decorate([
    property({ type: String }),
    __metadata("design:type", String)
], ProgressCircle.prototype, "innerCircleSize", void 0);
__decorate([
    property({ type: String }),
    __metadata("design:type", String)
], ProgressCircle.prototype, "shadow", void 0);
__decorate([
    property({ type: String }),
    __metadata("design:type", String)
], ProgressCircle.prototype, "circleColor", void 0);
__decorate([
    property({ type: String }),
    __metadata("design:type", String)
], ProgressCircle.prototype, "background", void 0);
__decorate([
    query('div[circle]'),
    __metadata("design:type", HTMLDivElement)
], ProgressCircle.prototype, "circle", void 0);
__decorate([
    query('div[inner-circle]'),
    __metadata("design:type", HTMLDivElement)
], ProgressCircle.prototype, "innerCircle", void 0);
__decorate([
    query('span[progress-title]'),
    __metadata("design:type", HTMLSpanElement)
], ProgressCircle.prototype, "progressTitle", void 0);
ProgressCircle = __decorate([
    customElement('progress-circle')
], ProgressCircle);
export { ProgressCircle };
//# sourceMappingURL=progress-circle.js.map