@rxdi/ui-kit/progress/progress.component.js

UI Components for building graphql-server website

"use strict";
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 __metadata = (this && this.__metadata) || function (k, v) {
    if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.ProgressComponent = void 0;
const lit_html_1 = require("@rxdi/lit-html");
const settings_1 = require("../settings");
const circle_css_1 = require("./circle.css");
/**
 * @customElement rx-progress
 */
let ProgressComponent = class ProgressComponent extends lit_html_1.LitElement {
    constructor() {
        super(...arguments);
        this.palette = 'default';
        this.height = 8;
        this._value = 0;
        this.rounded = false;
        this.label = false;
        this.type = 'bar';
    }
    get value() {
        return this._value;
    }
    set value(value) {
        const oldValue = this._value;
        this._value = value > 100 ? 100 : value;
        this.requestUpdate('value', oldValue);
    }
};
__decorate([
    (0, lit_html_1.property)({ type: String }),
    __metadata("design:type", String)
], ProgressComponent.prototype, "palette", void 0);
__decorate([
    (0, lit_html_1.property)({ type: Number }),
    __metadata("design:type", Object)
], ProgressComponent.prototype, "height", void 0);
__decorate([
    (0, lit_html_1.property)({ type: Number }),
    __metadata("design:type", Number),
    __metadata("design:paramtypes", [Number])
], ProgressComponent.prototype, "value", null);
__decorate([
    (0, lit_html_1.property)({ type: Boolean }),
    __metadata("design:type", Object)
], ProgressComponent.prototype, "rounded", void 0);
__decorate([
    (0, lit_html_1.property)({ type: Boolean }),
    __metadata("design:type", Object)
], ProgressComponent.prototype, "label", void 0);
__decorate([
    (0, lit_html_1.property)({ type: String }),
    __metadata("design:type", String)
], ProgressComponent.prototype, "type", void 0);
ProgressComponent = __decorate([
    (0, lit_html_1.Component)({
        selector: 'rx-progress',
        template() {
            return (0, lit_html_1.html) `
      <style>
        :host {
          display: ${this.type === 'bar' ? 'block' : 'inline-block'};
        }
        .container {
          display: flex;
          height: ${this.type === 'circle'
                ? this.height <= 12
                    ? this.height * 10 + 20
                    : 140
                : this.height}px;
          overflow: hidden;
          width: ${this.type === 'circle'
                ? this.height <= 12
                    ? this.height * 10 + 20 + 'px'
                    : '140px'
                : '100%'};

          justify-content: ${this.type === 'bar' ? 'start' : 'center'};
          align-items: ${this.type === 'bar' ? 'flex-start' : 'center'};
        }
        .bar {
          width: ${this.value}%;
          height: 100%;
          background-color: var(--${this.palette}-bg-color);
          transition: width 0.4s ease;
          border-radius: ${this.rounded ? this.height / 2 + 'px' : '0px'};
          display: flex;
          justify-content: center;
          align-items: center;
          overflow: hidden;
        }
        .label {
          font-size: 0.5em;
          font-weight: bold;
        }

        ${this.type === 'circle' ? circle_css_1.progressCss : ''} .uikit.dark {
          background-color: #777777;
        }
        .uikit.dark .bar,
        .uikit.dark .fill {
          border-color: var(--${this.palette}-bg-color) !important;
        }
        .uikit.dark > span {
          color: var(--${this.palette}-color);
        }
        .uikit.dark:after {
          background-color: #666666;
        }
        .uikit.dark:hover > span {
          color: var(--${this.palette}-color);
        }

        .uikit {
          font-size: ${this.height <= 12 ? this.height * 10 : 120}px;
        }
      </style>
      <div class="container">
        ${this.type === 'bar'
                ? (0, lit_html_1.html) `
              <div class="bar">
                ${this.label && this.value > 5
                    ? (0, lit_html_1.html) `
                      <span class="label">${this.label ? this.value + '%' : ''}</span>
                    `
                    : ''}
              </div>
            `
                : (0, lit_html_1.html) `
              <div class="uikit p${this.value} dark">
                <span>${this.value}%</span>
                <div class="slice">
                  <div class="bar"></div>
                  <div class="fill"></div>
                </div>
              </div>
            `}
      </div>
    `;
        }
    })
], ProgressComponent);
exports.ProgressComponent = ProgressComponent;
//# sourceMappingURL=progress.component.js.map