@railzai/railz-visualizations/dist/cjs/railz-progress-bar.cjs.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.
 */
'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

const index = require('./index-7829b74b.js');
const chart_utils = require('./chart.utils-652dfce2.js');
const en = require('./en-4ea7a4ad.js');
const financialRatios = require('./financial-ratios-8bba8608.js');
require('./_commonjsHelpers-7cfde13a.js');
require('./isEmpty-a87fbcad.js');
require('./colors-c18d54d3.js');
require('./fonts-877d8e4b.js');
require('./endpoints-d1a2add3.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) {
    index.registerInstance(this, hostRef);
    this.normalize = (value, max) => (value * 100) / max;
    this.titleMapping = {
      [financialRatios.RVReportTypes.INVOICES]: en.Translations.RV_INVOICES,
      [financialRatios.RVReportTypes.BILLS]: en.Translations.RV_BILLS,
    };
  }
  componentWillLoad() {
    this._options = chart_utils.getBarOptionsStyle(this.options);
  }
  render() {
    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
    if (chart_utils.isNil(this.paidAmount) || chart_utils.isNil(this.unpaidAmount)) {
      return index.h("span", null);
    }
    return (index.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 : (index.h("p", { class: "rv-progress-bar-total-unpaid", style: (_c = this._options) === null || _c === void 0 ? void 0 : _c.titleStyle, "aria-label": `${en.Translations.RV_TOTAL_UNPAID} ${chart_utils.formatNumber(this.unpaidAmount)}` }, en.Translations.RV_TOTAL_UNPAID, " ", this.titleMapping[this.reportType] || '', ' ', index.h("span", { class: "rv-progress-bar-total-unpaid-value", style: (_d = this._options) === null || _d === void 0 ? void 0 : _d.titleValueStyle, "aria-hidden": true }, "$", chart_utils.formatNumber(this.unpaidAmount)))), index.h("div", { class: "rv-progress-bar-values" }, ((_e = this._options) === null || _e === void 0 ? void 0 : _e.hideLabels) ? null : (index.h("div", { class: "rv-progress-bar-values-div" }, index.h("div", null, index.h("p", { class: "rv-progress-bar-label", style: (_f = this._options) === null || _f === void 0 ? void 0 : _f.subTitle1Style, "aria-label": `${en.Translations.RV_PAID} ${chart_utils.formatNumber(this.paidAmount)}` }, en.Translations.RV_PAID), index.h("p", { class: "rv-progress-bar-value", style: (_g = this._options) === null || _g === void 0 ? void 0 : _g.subTitleValue1Style, "aria-hidden": true }, "$", chart_utils.formatNumber(this.paidAmount))), index.h("div", null, index.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": `${en.Translations.RV_OVERDUE} ${chart_utils.formatNumber(this.overdueAmount) || 0}` }, en.Translations.RV_OVERDUE), index.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 }, "$", chart_utils.formatNumber(this.overdueAmount) || 0)))), index.h("div", { class: "rv-progress-bar", style: (_k = this._options) === null || _k === void 0 ? void 0 : _k.barStyle }, index.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;

exports.railz_progress_bar = ProgressBar;

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