@railzai/railz-visualizations/dist/esm/railz-progress-bar.entry.js

Railz.ai Visualizations

/*!
 * Accounting Data as a Service™ is the solution that makes sense of your business customers' financial data.
 * Built with Stencil
 * Copyright (c) FIS.
 */
import { r as registerInstance, h } from './index-673cf901.js';
import { N as getBarOptionsStyle, i as isNil, u as formatNumber } from './chart.utils-bd7d9716.js';
import { T as Translations } from './en-42d8e23c.js';
import { e as RVReportTypes } from './financial-ratios-8fecc95f.js';
import './_commonjsHelpers-bac520b0.js';
import './isEmpty-c9bbdb38.js';
import './colors-0a66ae87.js';
import './fonts-0519869d.js';
import './endpoints-cd54c46c.js';

const progressBarCss = "@font-face{font-family:Inter;src:url(\"../assets/fonts/Inter-italic-var.woff2\");font-family:Inter;src:url(\"../assets/fonts/Inter-upright-var.woff2\")}body,div[class^=railz-],div[class*=\" railz-\"]{font-family:Inter, Roboto, -apple-system, BlinkMacSystemFont, \"Segoe UI\", \"Helvetica Neue\", Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\"}@keyframes progress{0%{transform:rotate(0deg)}12.5%{transform:rotate(180deg);animation-timing-function:linear}25%{transform:rotate(630deg)}37.5%{transform:rotate(810deg);animation-timing-function:linear}50%{transform:rotate(1260deg)}62.5%{transform:rotate(1440deg);animation-timing-function:linear}75%{transform:rotate(1890deg)}87.5%{transform:rotate(2070deg);animation-timing-function:linear}100%{transform:rotate(2520deg)}}@keyframes progress-pseudo{0%{transform:rotate(-30deg)}29.4%{border-left-color:transparent}29.41%{border-left-color:currentcolor}64.7%{border-bottom-color:transparent}64.71%{border-bottom-color:currentcolor}100%{border-left-color:currentcolor;border-bottom-color:currentcolor;transform:rotate(225deg)}}:host{text-align:left;flex:1;display:flex}p{margin:0}.rv-progress-bar-div{flex:1;justify-content:space-around;display:flex;flex-direction:column}.rv-progress-bar-div .rv-progress-bar-total-unpaid{color:#4f4f4f;font-size:14px;font-weight:500}.rv-progress-bar-div .rv-progress-bar-total-unpaid span{font-weight:600}.rv-progress-bar-div .rv-progress-bar-total-unpaid-value{font-weight:600}.rv-progress-bar-div .rv-progress-bar-values-div{display:flex;justify-content:space-between;margin-bottom:16px}.rv-progress-bar-div .rv-progress-bar-values-div .rv-progress-bar-overdue{text-align:right}.rv-progress-bar-div .rv-progress-bar-label{color:#4f4f4f;font-size:12px;font-weight:500}.rv-progress-bar-div .rv-progress-bar-value{font-weight:600;font-size:14px;color:#000}.rv-progress-bar{height:16px;background:#f5f5f5;border-radius:3px}.rv-progress-bar>span{display:block;height:100%;background:#ffed8c;border-radius:3px 0 0 3px}";

const ProgressBar = class {
  constructor(hostRef) {
    registerInstance(this, hostRef);
    this.normalize = (value, max) => (value * 100) / max;
    this.titleMapping = {
      [RVReportTypes.INVOICES]: Translations.RV_INVOICES,
      [RVReportTypes.BILLS]: Translations.RV_BILLS,
    };
  }
  componentWillLoad() {
    this._options = getBarOptionsStyle(this.options);
  }
  render() {
    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
    if (isNil(this.paidAmount) || isNil(this.unpaidAmount)) {
      return h("span", null);
    }
    return (h("div", { class: "rv-progress-bar-div", style: (_a = this.options) === null || _a === void 0 ? void 0 : _a.divStyle }, ((_b = this._options) === null || _b === void 0 ? void 0 : _b.hideLabels) ? null : (h("p", { class: "rv-progress-bar-total-unpaid", style: (_c = this._options) === null || _c === void 0 ? void 0 : _c.titleStyle, "aria-label": `${Translations.RV_TOTAL_UNPAID} ${formatNumber(this.unpaidAmount)}` }, Translations.RV_TOTAL_UNPAID, " ", this.titleMapping[this.reportType] || '', ' ', h("span", { class: "rv-progress-bar-total-unpaid-value", style: (_d = this._options) === null || _d === void 0 ? void 0 : _d.titleValueStyle, "aria-hidden": true }, "$", formatNumber(this.unpaidAmount)))), h("div", { class: "rv-progress-bar-values" }, ((_e = this._options) === null || _e === void 0 ? void 0 : _e.hideLabels) ? null : (h("div", { class: "rv-progress-bar-values-div" }, h("div", null, h("p", { class: "rv-progress-bar-label", style: (_f = this._options) === null || _f === void 0 ? void 0 : _f.subTitle1Style, "aria-label": `${Translations.RV_PAID} ${formatNumber(this.paidAmount)}` }, Translations.RV_PAID), h("p", { class: "rv-progress-bar-value", style: (_g = this._options) === null || _g === void 0 ? void 0 : _g.subTitleValue1Style, "aria-hidden": true }, "$", formatNumber(this.paidAmount))), h("div", null, h("p", { class: "rv-progress-bar-label rv-progress-bar-overdue", style: (_h = this._options) === null || _h === void 0 ? void 0 : _h.subTitle2Style, "aria-label": `${Translations.RV_OVERDUE} ${formatNumber(this.overdueAmount) || 0}` }, Translations.RV_OVERDUE), h("p", { class: "rv-progress-bar-value rv-progress-bar-overdue", style: (_j = this._options) === null || _j === void 0 ? void 0 : _j.subTitleValue2Style, "aria-hidden": true }, "$", formatNumber(this.overdueAmount) || 0)))), h("div", { class: "rv-progress-bar", style: (_k = this._options) === null || _k === void 0 ? void 0 : _k.barStyle }, h("span", { style: Object.assign({ width: `${this.normalize(this.paidAmount, this.unpaidAmount + this.paidAmount)}%` }, (_l = this._options) === null || _l === void 0 ? void 0 : _l.progressStyle) })))));
  }
};
ProgressBar.style = progressBarCss;

export { ProgressBar as railz_progress_bar };

//# sourceMappingURL=railz-progress-bar.entry.js.map