@yoobic/yobi 8.7.5 → 8.7.6

package/dist/cjs/yoo-salesai-formula.cjs.entry.js

@@ -1,43 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-const index = require('./index-e5fa8107.js');
-require('./index-1ff81c60.js');
-const lodash = require('./lodash-f79ab730.js');
-const index$1 = require('./index-dfe8ecf8.js');
-require('./index-67c9c120.js');
-require('./_commonjsHelpers-94df2ea7.js');
-
-const salesaiFormulaCss = "svg:not(:root){overflow:hidden}:host .container{margin-top:var(--spacing-08, 0.5rem);margin-bottom:var(--spacing-16, 1rem);padding:var(--spacing-16, 1rem);font-size:var(--font-size-14, 0.875rem);background:var(--light, #ffffff);-webkit-box-shadow:var(--tile-shadow, 0 1px 4px 0 rgba(0, 0, 0, 0.1));box-shadow:var(--tile-shadow, 0 1px 4px 0 rgba(0, 0, 0, 0.1))}:host .container ul{list-style-type:decimal}:host .container ul li{margin-bottom:var(--spacing-08, 0.5rem);padding-left:var(--spacing-08, 0.5rem)}:host .container .operator{padding:0 var(--spacing-08, 0.5rem)}";
-
-const YooSalesAIFormulaComponent = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-    this.item = undefined;
-  }
-  componentWillLoad() {
-    this.updatePatterns();
-  }
-  updatePatterns() {
-    this.patterns = lodash.filter(this.item.pattern_without_underperforming_stores_sales_quantities, (item) => {
-      if (item.sku === this.item.underperforming_sku) {
-        return false;
-      }
-      else {
-        return true;
-      }
-    });
-    this.patterns = lodash.orderBy(this.patterns, ['quantity'], ['desc']);
-    this.findPattern = lodash.find(this.item.pattern_without_underperforming_stores_sales_quantities, { sku: this.item.underperforming_sku });
-  }
-  render() {
-    var _a;
-    return (index.h("div", { class: "container" }, index.h("div", { class: "flex-shrink-0" }, index.h("div", { class: "subtitle" }, index$1.translate('AIINSTORESWHERE'), ":"), index.h("ul", null, (_a = this.patterns) === null || _a === void 0 ? void 0 : _a.map((pattern, index$2) => {
-      return (index.h("li", { value: index$2 + 1 }, index.h("yoo-tag", { color: "app-color-10", class: "inverse-color" }, pattern.sku), index.h("span", { class: "operator" }, index$1.translate('AIHAS')), index.h("yoo-tag", { color: index$1.salesAIGetColorFromPattern(pattern.quantity), class: "inverse-color" }, index$1.salesAIFormatDemand(pattern.quantity))));
-    })), index.h("div", { class: "subtitle" }, index$1.translate('THEN'), ":"), this.findPattern && (index.h("ul", null, index.h("li", { value: "1" }, index.h("yoo-tag", { color: "app-color-10", class: "inverse-color" }, this.findPattern.sku), index.h("span", { class: "operator" }, index$1.translate('AIHAS')), index.h("yoo-tag", { color: index$1.salesAIGetColorFromPattern(this.findPattern.quantity), class: "inverse-color" }, index$1.salesAIFormatDemand(this.findPattern.quantity))))))));
-  }
-};
-YooSalesAIFormulaComponent.style = salesaiFormulaCss;
-
-exports.yoo_salesai_formula = YooSalesAIFormulaComponent;

package/dist/cjs/yoo-widget-chart.cjs.entry.js

@@ -1,103 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-const index = require('./index-e5fa8107.js');
-require('./index-1ff81c60.js');
-const lodash = require('./lodash-f79ab730.js');
-const index$1 = require('./index-dfe8ecf8.js');
-require('./index-67c9c120.js');
-require('./_commonjsHelpers-94df2ea7.js');
-
-const widgetChartCss = "svg:not(:root){overflow:hidden}:host([dir=ltr]) .outer-container .right-column yoo-form-autocomplete{right:0}:host([dir=rtl]) .outer-container .right-column yoo-form-autocomplete{left:0}:host{--value-font-size:var(--font-size-54, 3.375rem);--grid-template-columns:1fr 2fr;display:block;height:100%}:host .outer-container{position:relative;display:-ms-flexbox;display:flex;-webkit-box-sizing:border-box;box-sizing:border-box;height:100%;min-height:22rem;max-height:25rem;padding:var(--spacing-16, 1rem);background:var(--light, #ffffff);border-radius:var(--border-radius-08, 0.5rem)}:host .outer-container .loader-background{position:absolute;top:0;right:0;bottom:0;left:0;z-index:43;background:var(--light, #ffffff)}:host .outer-container .loader{position:absolute;top:0;right:0;bottom:0;left:0;z-index:44;background:var(--gradient-placeholder, linear-gradient(to right, #f1f1f1, rgba(241, 241, 241, 0.8)));border-radius:var(--border-radius-08, 0.5rem);-webkit-animation-name:pulseHolderShimmerGray;animation-name:pulseHolderShimmerGray;-webkit-animation-duration:1s;animation-duration:1s;-webkit-animation-timing-function:linear;animation-timing-function:linear;-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite;-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards}@-webkit-keyframes pulseHolderShimmerGray{0%{background:var(--stable-20, rgba(173, 173, 173, 0.2))}50%{background:var(--stable-40, rgba(173, 173, 173, 0.4))}100%{background:var(--stable-20, rgba(173, 173, 173, 0.2))}}@keyframes pulseHolderShimmerGray{0%{background:var(--stable-20, rgba(173, 173, 173, 0.2))}50%{background:var(--stable-40, rgba(173, 173, 173, 0.4))}100%{background:var(--stable-20, rgba(173, 173, 173, 0.2))}}:host .outer-container .left-column{width:20rem;-webkit-border-end:var(--border-width-01, 0.0625rem) solid var(--stable-light, #f1f1f1);border-inline-end:var(--border-width-01, 0.0625rem) solid var(--stable-light, #f1f1f1)}:host .outer-container .left-column .items-container{padding-top:var(--spacing-24, 1.5rem)}:host .outer-container .left-column .items-container .item{margin-bottom:var(--spacing-16, 1rem)}:host .outer-container .left-column .items-container .item yoo-tag{-webkit-margin-end:var(--spacing-08, 0.5rem);margin-inline-end:var(--spacing-08, 0.5rem)}:host .outer-container .right-column{position:relative;display:-ms-flexbox;display:flex;-ms-flex:1;flex:1;-ms-flex-direction:column;flex-direction:column;-webkit-padding-start:var(--spacing-24, 1.5rem);padding-inline-start:var(--spacing-24, 1.5rem)}:host .outer-container .right-column yoo-form-autocomplete{position:absolute;top:0;z-index:10;display:block;width:100px;background:var(--light, #ffffff)}:host .outer-container .right-column .chart{position:relative;display:-ms-flexbox;display:flex;-ms-flex:1;flex:1}:host .outer-container .right-column .chart yoo-chart{position:absolute;top:0;right:0;bottom:0;left:0}:host .outer-container .right-column .error{display:-ms-flexbox;display:flex;-ms-flex:1;flex:1;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;padding:var(--spacing-16, 1rem);color:var(--danger, #d44333);text-align:center}:host .outer-container .title{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:justify;justify-content:space-between}:host .outer-container .title .header{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;font-weight:var(--font-weight-900, 900);font-size:var(--font-size-16, 1rem)}:host .outer-container .title .header.isWidget{overflow:hidden;white-space:nowrap;cursor:pointer}:host .outer-container .title .header.isWidget .text{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}:host .outer-container .title .widget-opts{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center}:host .outer-container .title .widget-opts>*{cursor:pointer}:host .outer-container .title .widget-opts span{color:var(--app-color, #5a30f4);white-space:nowrap;text-transform:none}:host .outer-container .title yoo-icon{-webkit-margin-start:var(--spacing-08, 0.5rem);margin-inline-start:var(--spacing-08, 0.5rem)}:host .outer-container .value-container{display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;-ms-flex-align:center;align-items:center;-webkit-margin-end:var(--spacing-24, 1.5rem);margin-inline-end:var(--spacing-24, 1.5rem);padding-bottom:var(--spacing-08, 0.5rem);border-bottom:var(--border-width-01, 0.0625rem) solid var(--stable-light, #f1f1f1)}:host .outer-container .value-container .value{-webkit-margin-end:var(--spacing-24, 1.5rem);margin-inline-end:var(--spacing-24, 1.5rem);font-weight:bold;font-size:var(--value-font-size)}:host .outer-container .value-container .progress-container .progress{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;color:var(--success, #3aa76d);font-size:var(--font-size-14, 0.875rem);white-space:nowrap}:host .outer-container .value-container .progress-container .progress yoo-icon{-webkit-margin-end:var(--spacing-04, 0.25rem);margin-inline-end:var(--spacing-04, 0.25rem)}:host .outer-container .value-container .progress-container .progress.negative{color:var(--danger, #d44333)}:host .outer-container .value-container .progress-container .description{overflow:hidden;font-size:var(--font-size-12, 0.75rem);white-space:nowrap;text-overflow:ellipsis;word-break:break-all}:host .quickactions{padding-top:var(--spacing-08, 0.5rem);padding-bottom:var(--spacing-16, 1rem)}:host(:not([is-widget])) .outer-container{-webkit-box-shadow:var(--web-kpi-shadow, 0 0.0625rem 0.25rem 0 rgba(0, 0, 0, 0.1));box-shadow:var(--web-kpi-shadow, 0 0.0625rem 0.25rem 0 rgba(0, 0, 0, 0.1))}:host(.small) .left-column,:host(.medium) .left-column{width:unset;border:none}:host(.small) .outer-container,:host(.medium) .outer-container{-ms-flex-pack:justify;justify-content:space-between;min-height:unset;max-height:unset}:host(.small) .progress-container,:host(.medium) .progress-container{display:-ms-flexbox;display:flex;-ms-flex-direction:row-reverse;flex-direction:row-reverse;-ms-flex-align:center;align-items:center;-ms-flex-pack:justify;justify-content:space-between;width:100%}:host(.small) .progress-container .description,:host(.medium) .progress-container .description{max-width:2.5rem}:host(.small) .value,:host(.medium) .value{margin:0 !important}:host(.small) .value-container,:host(.medium) .value-container{-ms-flex-direction:column;flex-direction:column;-ms-flex-align:start;align-items:start;margin:0 !important;padding:0 !important;border:none}:host(.small) .outer-container{-ms-flex-direction:column;flex-direction:column}:host(.medium) .outer-container{display:grid;grid-template-columns:var(--grid-template-columns)}:host(.medium) .title{grid-column:1/-1}:host(.medium) .value{-ms-flex-item-align:center;align-self:center}:host(.large) .outer-container{height:100%;min-height:initial;max-height:initial;padding:var(--spacing-16, 1rem) 0 0}:host(.large) .outer-container .right-column{-webkit-padding-start:0;padding-inline-start:0;overflow:hidden}:host(.large) .outer-container .right-column .title{padding:0 var(--spacing-16, 1rem) var(--spacing-08, 0.5rem)}:host(.large) .outer-container .right-column .title .header{-webkit-padding-end:var(--spacing-16, 1rem);padding-inline-end:var(--spacing-16, 1rem);overflow:hidden;white-space:nowrap}:host(.large) .outer-container .right-column .title .header .text{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}:host(.large) .outer-container .right-column .value-container{-webkit-margin-end:0;margin-inline-end:0;margin-bottom:0;padding:0 var(--spacing-16, 1rem);background:var(--light, #ffffff);border-bottom:none}:host(.large) .outer-container .right-column .chart{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;overflow:hidden}:host(.large) .outer-container .right-column .chart yoo-chart{position:initial;-ms-flex:1;flex:1}";
-
-const YooWidgetChartComponent = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-    this.sorted = index.createEvent(this, "sorted", 7);
-    this.widgetEdited = index.createEvent(this, "widgetEdited", 7);
-    this.seeAllClicked = index.createEvent(this, "seeAllClicked", 7);
-    this.size = 'extra-large';
-    this.header = undefined;
-    this.help = undefined;
-    this.dataPeriodText = undefined;
-    this.data = undefined;
-    this.sort = undefined;
-    this.chartConfig = undefined;
-    this.isWidget = undefined;
-    this.isHome = undefined;
-    this.hasError = undefined;
-    this.hasErrorTooMuchData = undefined;
-  }
-  get chartOptions() {
-    const options = { ...(this.chartConfig || {}) };
-    if (this.isMedium) {
-      const { chart, legend, xAxis, yAxis } = options;
-      if (chart) {
-        options.chart = { ...chart, margin: [0, 2, 0, 2] };
-      }
-      if (legend) {
-        options.legend = { ...legend, enabled: false };
-      }
-      if (xAxis) {
-        options.xAxis = { ...xAxis, visible: false };
-      }
-      if (yAxis) {
-        options.yAxis = { ...yAxis, visible: false };
-      }
-    }
-    return options;
-  }
-  get isSmall() {
-    return this.size === 'small';
-  }
-  get isMedium() {
-    return this.size === 'medium';
-  }
-  get isLarge() {
-    return this.size === 'large';
-  }
-  get isExtraLarge() {
-    return this.size === 'extra-large';
-  }
-  onSortChange(ev) {
-    this.sorted.emit(ev.detail);
-  }
-  onSeeAllClicked(ev) {
-    ev.stopPropagation();
-    if (this.isWidget) {
-      this.seeAllClicked.emit(ev);
-    }
-  }
-  onWidgetEdit(ev) {
-    ev.stopPropagation();
-    this.widgetEdited.emit(ev);
-  }
-  renderTitle() {
-    return (index.h("div", { class: "title" }, index.h("div", { class: { header: true, isWidget: this.isWidget } }, index.h("span", { class: "text", onClick: (ev) => this.onSeeAllClicked(ev) }, index$1.translate(this.header)), !this.isWidget && this.help && (index.h("yoo-tooltip", { hoverable: true, content: index$1.translate(this.help), placement: "bottom" }, index.h("yoo-icon", { size: index$1.isWeb(this.host) ? 'small' : 'medium', name: "help", color: "stable" })))), this.isWidget && (index.h("div", { class: "widget-opts" }, !this.isSmall && index.h("span", { onClick: (ev) => this.onSeeAllClicked(ev) }, index$1.translate('YOOBICSEEALL')), this.isHome && index.h("yoo-icon", { name: "more", size: index$1.isWeb(this.host) ? 'small' : 'medium', color: "stable", onClick: (ev) => this.onWidgetEdit(ev) })))));
-  }
-  renderValueContainer() {
-    var _a, _b, _c, _d, _e, _f, _g;
-    const totalDiffPercent = (_a = this.data) === null || _a === void 0 ? void 0 : _a.totalDiffPercent;
-    const totalDiffIconName = totalDiffPercent < 0 ? 'down-circle' : 'up-circle';
-    const totalDiffIconColor = totalDiffPercent < 0 ? 'danger' : 'success';
-    return (index.h("div", { class: "value-container" }, index.h("div", { class: "value" }, ((_c = (_b = this.data) === null || _b === void 0 ? void 0 : _b.totalCurrentPeriod) === null || _c === void 0 ? void 0 : _c.toLocaleString()) || '0'), index.h("div", { class: "progress-container" }, lodash.isNumber(totalDiffPercent) && (index.h("div", { class: { progress: true, negative: totalDiffPercent < 0 } }, index.h("yoo-icon", { size: "small", name: totalDiffIconName, color: totalDiffIconColor }), index.h("span", null, Math.round(totalDiffPercent) + ' %'))), this.dataPeriodText && (index.h("div", { class: "description" }, index$1.translate(this.dataPeriodText, {
-      value: (_e = (_d = this.data) === null || _d === void 0 ? void 0 : _d.totalDiffPreviousPeriod) === null || _e === void 0 ? void 0 : _e.toLocaleString(),
-      period: index$1.translate((_g = (_f = this.data) === null || _f === void 0 ? void 0 : _f.sort) === null || _g === void 0 ? void 0 : _g.toUpperCase())
-    }))))));
-  }
-  renderData() {
-    var _a, _b;
-    return (_b = (_a = this.data) === null || _a === void 0 ? void 0 : _a.dataCurrentPeriod) === null || _b === void 0 ? void 0 : _b.map((d) => {
-      var _a;
-      return (index.h("div", { class: "item" }, index.h("yoo-tag", { class: "inverse-color", icon: d.icon, color: d.iconColor }), index.h("span", { class: "item-value" }, index$1.translate(((_a = d === null || d === void 0 ? void 0 : d.count) === null || _a === void 0 ? void 0 : _a.toLocaleString()) || '0'), " ", index$1.translate(d._id.toUpperCase()))));
-    });
-  }
-  render() {
-    return (index.h(index.Host, { dir: document.dir, class: { [this.size || '']: true } }, index.h("div", { class: { 'outer-container': true, web: index$1.isWeb(this.host) } }, (this.isSmall || this.isMedium) && this.renderTitle(), !this.isLarge && (index.h("div", { class: "left-column" }, this.isExtraLarge && this.renderTitle(), this.renderValueContainer(), this.isExtraLarge && index.h("div", { class: "items-container" }, this.renderData()))), !this.isSmall && (index.h("div", { class: "right-column" }, this.isExtraLarge && (index.h("yoo-form-autocomplete", { class: "inline", size: "medium", value: this.sort, values: ['30days', '6months', '1year'], displayType: "card-list", placeholder: index$1.translate('YOOBICSORT'), useTranslate: true, onInputChanged: (ev) => this.onSortChange(ev) })), this.isLarge && this.renderTitle(), this.isLarge && this.renderValueContainer(), index.h("div", { class: "chart" }, !this.hasError && !this.hasErrorTooMuchData && index.h("yoo-chart", { disableAnimation: true, config: this.chartOptions, animatedIllustrationHeight: "6rem" }), (this.hasError || this.hasErrorTooMuchData) && index.h("div", { class: "error" }, index$1.translate(this.hasErrorTooMuchData ? 'CHARTLOADINGERROR' : 'CHARTLOADINGERRORGENERIC'))))), !this.isSmall && !this.chartConfig && index.h("div", { class: "loader-background" }), !this.isSmall && !this.chartConfig && index.h("div", { class: "loader" }))));
-  }
-  get host() { return index.getElement(this); }
-};
-YooWidgetChartComponent.style = widgetChartCss;
-
-exports.yoo_widget_chart = YooWidgetChartComponent;

package/dist/collection/feature-platform/app/widget-chart/widget-chart.css

@@ -1,482 +0,0 @@
-/* app direction */
-/* border-radius */
-/* border-width */
-/* font family */
-/* font-size */
-/* font weights */
-/* icon size */
-/* used for logos */
-/* spacing for padding, margin, etc... */
-/* shadow */
-/* Z-Index (Ionic)
---------------------------------------------------
-Grouped by elements which would be siblings */
-/* Hairlines width */
-/* Default Colors
----------------------------------- */
-/* Private color variables */
-/* #3880ff; */
-/* #3880ff; */
-/* #3880ff; */
-/* #3880ff; */
-/* #3880ff;*/
-/* #3880ff; */
-/* #3880ff; */
-/* #3880ff; */
-/* #3880ff; */
-/* Color map should provide
-- base: main color to be used.
-- contrast: Color that will provide readable text against the base color
-- shade: 12% darker version of the base color (mix with black)
-- tint: 10% lighter version of the base color (mix with white) */
-/* Themed Colors
-
- Default Foreground and Background Colors values
- Allows users to override an foreground / background colors
- $background-color-value:            $light !default;
- $background-color-rgb:              255, 255, 255 !default; */
-/* Default Foreground and Background Colors
--------------------------------------------------- */
-/* Default General Colors
--------------------------------------------------- */
-/* Default List & List Items
--------------------------------------------------- */
-/* Item Divider */
-/* iOS List & List Items
--------------------------------------------------- */
-/* Default Toolbar
---------------------------------------------------*/
-/* iOS Toolbar
---------------------------------------------------*/
-/* Default Tabs & Tab bar
---------------------------------------------------*/
-/* iOS Tabs & Tab bar
---------------------------------------------------*/
-/* Function related variables
---------------------------------------------------*/
-/* Gets the active color's css variable from a variation. Alpha is optional.
---------------------------------------------------------------------------------------------
-Example usage:
-current-color(base) => var(--ion-color-base)
-current-color(contrast, 0.1) => rgba(var(--ion-color-contrast-rgb), 0.1)
---------------------------------------------------------------------------------------------*/
-/* Gets the specific color's css variable from the name and variation. Alpha/rgb are optional.
---------------------------------------------------------------------------------------------
-Example usage:
-ion-color(primary, base) => var(--ion-color-primary, #3880ff)
-ion-color(secondary, contrast) => var(--ion-color-secondary-contrast)
-ion-color(primary, base, 0.5) => rgba(var(--ion-color-primary-rgb, 56, 128, 255), 0.5)
---------------------------------------------------------------------------------------------*/
-/* Mixes a color with black to create its shade.
---------------------------------------------------------------------------------------------*/
-/*Mixes a color with white to create its tint.
---------------------------------------------------------------------------------------------*/
-/* Converts a color to a comma separated rgb.
---------------------------------------------------------------------------------------------*/
-/* Str functions.
-___________________________________________________________________________________________*/
-/* Creates a pulse animation.
-  @param {color} $begin-color [stable-20] - starting color for pulse.
-  @param {color} $end-color [stable-20] - ending color for pulse.
-  @author Ben Morgan
-  @author Damien Arondel 
-*/
-/* Execute a content if the hover state is supported.
-
- @content the content to execute if relevant
- @author Ben Morgan
- @author Damien Arondel
-*/
-/* Properly hide overflow on rounded corner elements for Webkit based browsers.
- This mixin must be used at the same level as `overflow: hidden` and `border-radius: ...`.
-
- @link https://gist.github.com/ayamflow/b602ab436ac9f05660d9c15190f4fd7
- @author Ben Morgan
- @author Damien Arondel
-*/
-/* Truncate every overflown elements with an ellipsis.
- This mixin does not work with flex box on the same level.
-
- @author Ben Morgan
- @author Damien Arondel
-*/
-/* Truncate text at a specific number of lines.
- */
-/* app direction */
-/* border-radius */
-/* border-width */
-/* font family */
-/* font-size */
-/* font weights */
-/* icon size */
-/* used for logos */
-/* spacing for padding, margin, etc... */
-/* shadow */
-/* Text Direction - ltr / rtl
-$app-direction: multi | rtl | ltr | null (default)
-multi: Both [dir=ltr] and [dir=rtl] are applied to css selectors.
-rtl: Always assumes rtl and only includes rtl css. No [dir] selectors.
-ltr: Always assumes ltr and only includes ltr css. No [dir] selectors.
-null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override ltr defaults.
----------------------------------------------------------- */
-/* Add property horizontal
- @param {string} $start
- @param {string} $end
-----------------------------------------------------------*/
-/* Add property for all directions
-  @param {string} $prop
-  @param {string} $top
-  @param {string} $end
-  @param {string} $bottom
-  @param {string} $start
-  @param {boolean} $content include content or use default
-----------------------------------------------------------*/
-/* Add margin for all directions
-  @param {string} $top
-  @param {string} $end
-  @param {string} $bottom
-  @param {string} $start
-----------------------------------------------------------*/
-/* Add padding for all directions
-  @param {string} $top
-  @param {string} $end
-  @param {string} $bottom
-  @param {string} $start
-----------------------------------------------------------*/
-/*Font smoothing
---------------------------------------------------*/
-/* SVG Background Image Mixin
-  @param {string} $svg
-----------------------------------------------------------*/
-/* Add padding horizontal
-  @param {string} $start
-  @param {string} $end
-----------------------------------------------------------*/
-/* Add margin horizontal
- @param {string} $start
- @param {string} $end
-----------------------------------------------------------*/
-/* Add safe area padding horizontal
-  @param {string} $start
-  @param {string} $end
-----------------------------------------------------------*/
-/* Add border radius for all directions
-  @param {string} $top-start
-  @param {string} $top-end
-  @param {string} $bottom-end
-  @param {string} $bottom-start
-----------------------------------------------------------*/
-/* Sets correct text align with support for old browsers
-  @param {string} $direction - text direction
-  @param {string} $decorator - !important
-----------------------------------------------------------*/
-/* Add position for all directions
-  @param {string} $top
-  @param {string} $end
-  @param {string} $bottom
-  @param {string} $start
-----------------------------------------------------------*/
-/* Add position horizontal
-  @param {string} $start - amount to position start
-  @param {string} $end - amount to left: 0; end
-----------------------------------------------------------*/
-/**
- * NOTE DO NOT USE FOR NEW COMPONENTS
- * LEGACY CODE -- Styles maintained only to prevent breaking changes
- * For all Font Sizes please use the appropreate font-size-XX Variables.
- */
-/**
-* Global style mixin for being able to change the background / font-color and border-color
-* programmatically using global classes
-*/
-/* app direction */
-/* border-radius */
-/* border-width */
-/* font family */
-/* font-size */
-/* font weights */
-/* icon size */
-/* used for logos */
-/* spacing for padding, margin, etc... */
-/* shadow */
-svg:not(:root) {
-  overflow: hidden;
-}
-
-:host([dir=ltr]) .outer-container .right-column yoo-form-autocomplete {
-  right: 0;
-}
-
-:host([dir=rtl]) .outer-container .right-column yoo-form-autocomplete {
-  left: 0;
-}
-
-:host {
-  --value-font-size: var(--font-size-54, 3.375rem);
-  --grid-template-columns: 1fr 2fr;
-  display: block;
-  height: 100%;
-}
-:host .outer-container {
-  position: relative;
-  display: flex;
-  box-sizing: border-box;
-  height: 100%;
-  min-height: 22rem;
-  max-height: 25rem;
-  padding: var(--spacing-16, 1rem);
-  background: var(--light, #ffffff);
-  border-radius: var(--border-radius-08, 0.5rem);
-}
-:host .outer-container .loader-background {
-  position: absolute;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
-  z-index: 43;
-  background: var(--light, #ffffff);
-}
-:host .outer-container .loader {
-  position: absolute;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
-  z-index: 44;
-  background: var(--gradient-placeholder, linear-gradient(to right, #f1f1f1, rgba(241, 241, 241, 0.8)));
-  border-radius: var(--border-radius-08, 0.5rem);
-  animation-name: pulseHolderShimmerGray;
-  animation-duration: 1s;
-  animation-timing-function: linear;
-  animation-iteration-count: infinite;
-  animation-fill-mode: forwards;
-}
-@keyframes pulseHolderShimmerGray {
-  0% {
-    background: var(--stable-20, rgba(173, 173, 173, 0.2));
-  }
-  50% {
-    background: var(--stable-40, rgba(173, 173, 173, 0.4));
-  }
-  100% {
-    background: var(--stable-20, rgba(173, 173, 173, 0.2));
-  }
-}
-:host .outer-container .left-column {
-  width: 20rem;
-  border-inline-end: var(--border-width-01, 0.0625rem) solid var(--stable-light, #f1f1f1);
-}
-:host .outer-container .left-column .items-container {
-  padding-top: var(--spacing-24, 1.5rem);
-}
-:host .outer-container .left-column .items-container .item {
-  margin-bottom: var(--spacing-16, 1rem);
-}
-:host .outer-container .left-column .items-container .item yoo-tag {
-  margin-inline-end: var(--spacing-08, 0.5rem);
-}
-:host .outer-container .right-column {
-  position: relative;
-  display: flex;
-  flex: 1;
-  flex-direction: column;
-  padding-inline-start: var(--spacing-24, 1.5rem);
-}
-:host .outer-container .right-column yoo-form-autocomplete {
-  position: absolute;
-  top: 0;
-  z-index: 10;
-  display: block;
-  width: 100px;
-  background: var(--light, #ffffff);
-}
-:host .outer-container .right-column .chart {
-  position: relative;
-  display: flex;
-  flex: 1;
-}
-:host .outer-container .right-column .chart yoo-chart {
-  position: absolute;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
-}
-:host .outer-container .right-column .error {
-  display: flex;
-  flex: 1;
-  align-items: center;
-  justify-content: center;
-  padding: var(--spacing-16, 1rem);
-  color: var(--danger, #d44333);
-  text-align: center;
-}
-:host .outer-container .title {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-}
-:host .outer-container .title .header {
-  display: flex;
-  align-items: center;
-  font-weight: var(--font-weight-900, 900);
-  font-size: var(--font-size-16, 1rem);
-}
-:host .outer-container .title .header.isWidget {
-  overflow: hidden;
-  white-space: nowrap;
-  cursor: pointer;
-}
-:host .outer-container .title .header.isWidget .text {
-  overflow: hidden;
-  white-space: nowrap;
-  text-overflow: ellipsis;
-}
-:host .outer-container .title .widget-opts {
-  display: flex;
-  align-items: center;
-}
-:host .outer-container .title .widget-opts > * {
-  cursor: pointer;
-}
-:host .outer-container .title .widget-opts span {
-  color: var(--app-color, #5a30f4);
-  white-space: nowrap;
-  text-transform: none;
-}
-:host .outer-container .title yoo-icon {
-  margin-inline-start: var(--spacing-08, 0.5rem);
-}
-:host .outer-container .value-container {
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  margin-inline-end: var(--spacing-24, 1.5rem);
-  padding-bottom: var(--spacing-08, 0.5rem);
-  border-bottom: var(--border-width-01, 0.0625rem) solid var(--stable-light, #f1f1f1);
-}
-:host .outer-container .value-container .value {
-  margin-inline-end: var(--spacing-24, 1.5rem);
-  font-weight: bold;
-  font-size: var(--value-font-size);
-}
-:host .outer-container .value-container .progress-container .progress {
-  display: flex;
-  align-items: center;
-  color: var(--success, #3aa76d);
-  font-size: var(--font-size-14, 0.875rem);
-  white-space: nowrap;
-}
-:host .outer-container .value-container .progress-container .progress yoo-icon {
-  margin-inline-end: var(--spacing-04, 0.25rem);
-}
-:host .outer-container .value-container .progress-container .progress.negative {
-  color: var(--danger, #d44333);
-}
-:host .outer-container .value-container .progress-container .description {
-  overflow: hidden;
-  font-size: var(--font-size-12, 0.75rem);
-  white-space: nowrap;
-  text-overflow: ellipsis;
-  word-break: break-all;
-}
-:host .quickactions {
-  padding-top: var(--spacing-08, 0.5rem);
-  padding-bottom: var(--spacing-16, 1rem);
-}
-
-:host(:not([is-widget])) .outer-container {
-  box-shadow: var(--web-kpi-shadow, 0 0.0625rem 0.25rem 0 rgba(0, 0, 0, 0.1));
-}
-
-:host(.small) .left-column,
-:host(.medium) .left-column {
-  width: unset;
-  border: none;
-}
-:host(.small) .outer-container,
-:host(.medium) .outer-container {
-  justify-content: space-between;
-  min-height: unset;
-  max-height: unset;
-}
-:host(.small) .progress-container,
-:host(.medium) .progress-container {
-  display: flex;
-  flex-direction: row-reverse;
-  align-items: center;
-  justify-content: space-between;
-  width: 100%;
-}
-:host(.small) .progress-container .description,
-:host(.medium) .progress-container .description {
-  max-width: 2.5rem;
-}
-:host(.small) .value,
-:host(.medium) .value {
-  margin: 0 !important;
-}
-:host(.small) .value-container,
-:host(.medium) .value-container {
-  flex-direction: column;
-  align-items: start;
-  margin: 0 !important;
-  padding: 0 !important;
-  border: none;
-}
-
-:host(.small) .outer-container {
-  flex-direction: column;
-}
-
-:host(.medium) .outer-container {
-  display: grid;
-  grid-template-columns: var(--grid-template-columns);
-}
-:host(.medium) .title {
-  grid-column: 1/-1;
-}
-:host(.medium) .value {
-  align-self: center;
-}
-
-:host(.large) .outer-container {
-  height: 100%;
-  min-height: initial;
-  max-height: initial;
-  padding: var(--spacing-16, 1rem) 0 0;
-}
-:host(.large) .outer-container .right-column {
-  padding-inline-start: 0;
-  overflow: hidden;
-}
-:host(.large) .outer-container .right-column .title {
-  padding: 0 var(--spacing-16, 1rem) var(--spacing-08, 0.5rem);
-}
-:host(.large) .outer-container .right-column .title .header {
-  padding-inline-end: var(--spacing-16, 1rem);
-  overflow: hidden;
-  white-space: nowrap;
-}
-:host(.large) .outer-container .right-column .title .header .text {
-  overflow: hidden;
-  white-space: nowrap;
-  text-overflow: ellipsis;
-}
-:host(.large) .outer-container .right-column .value-container {
-  margin-inline-end: 0;
-  margin-bottom: 0;
-  padding: 0 var(--spacing-16, 1rem);
-  background: var(--light, #ffffff);
-  border-bottom: none;
-}
-:host(.large) .outer-container .right-column .chart {
-  display: flex;
-  flex-direction: column;
-  overflow: hidden;
-}
-:host(.large) .outer-container .right-column .chart yoo-chart {
-  position: initial;
-  flex: 1;
-}