@yoobic/yobi 8.7.10 → 8.7.12

package/dist/cjs/yoo-card-feed.cjs.entry.js

@@ -362,7 +362,7 @@ const YooCardFeedComponent = class {
       }
       return entry;
     });
-    return (index$1.h("div", { class: "feed-chart" }, ((_f = (_e = this.entry.chartConfig) === null || _e === void 0 ? void 0 : _e.series) === null || _f === void 0 ? void 0 : _f.length) > 0 && index$1.h("ng-chart-bar", { heading: this.entry.chartDefinition.title, data: data })));
+    return (index$1.h("div", { class: "feed-chart" }, ((_f = (_e = this.entry.chartConfig) === null || _e === void 0 ? void 0 : _e.series) === null || _f === void 0 ? void 0 : _f.length) > 0 && index$1.h("yoo-chart-bar", { key: index.getUUID(), heading: this.entry.chartDefinition.title, data: data })));
   }
   renderBottomActionText(item) {
     return (index$1.h("div", { class: 'action ' + (item.cssClass || '') }, item.icon && index$1.h("yoo-icon", { name: item.icon, color: item.iconColor, size: "medium" }), item.text));

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

@@ -0,0 +1,55 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-e5fa8107.js');
+require('./index-f0ff9db0.js');
+const commonHelpers = require('./common-helpers-a9bda4a5.js');
+const lodash = require('./lodash-036555ce.js');
+const index$1 = require('./index-47657672.js');
+require('./index-3d49ff1c.js');
+require('./_commonjsHelpers-94df2ea7.js');
+
+const chartBarCss = "svg:not(:root){overflow:hidden}:host{--bar-height:3rem;--padding:var(--spacing-16, 1rem);--font-size:var(--font-size-16, 1rem);--color:var(--app-color-20, rgba(90, 48, 244, 0.2));--color-secondary:var(--stable-light, #f1f1f1);display:block}:host .bars{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column}:host .bars .bar{position:relative;display:-ms-flexbox;display:flex;-ms-flex:1;flex:1;-ms-flex-align:center;align-items:center;min-height:var(--bar-height);margin-top:calc(var(--padding) / 2);font-size:var(--font-size)}:host .bars .bar.bordered{border-left:calc(var(--padding) / 4) solid var(--color-secondary)}:host .bars .bar .bar-title{z-index:1;display:-ms-flexbox;display:flex;-ms-flex:1;flex:1;-ms-flex-align:center;align-items:center;padding:0 var(--padding);overflow:hidden;color:var(--dark, #000000)}:host .bars .bar .bar-title .title{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}:host .bars .bar .bar-title yoo-icon{margin-left:calc(var(--padding) / 2)}:host .bars .bar .bar-value{z-index:1;padding-right:calc(var(--padding) / 2);color:var(--dark, #000000)}:host .bars .bar .bar-background{position:absolute;top:0;bottom:0;background:var(--color-secondary)}:host .bars .bar.maximum .bar-title{font-weight:bold}:host .bars .bar.maximum .bar-background{background:var(--color)}:host .total{margin-top:calc(var(--padding) / 2);color:var(--text-color, #807f83);font-size:var(--font-size)}:host([size=medium]){--bar-height:2rem;--padding:var(--spacing-08, 0.5rem);--font-size:var(--font-size-14, 0.875rem)}:host([size=small]){--bar-height:1.5rem;--padding:var(--spacing-04, 0.25rem);--font-size:var(--font-size-12, 0.75rem)}:host([color=accent]){--color:var(--accent-20, rgba(39, 110, 241, 0.2))}:host([color=app-color]){--color:var(--app-color-20, rgba(90, 48, 244, 0.2))}:host([color=energized]){--color:var(--energized-20, rgba(255, 192, 67, 0.2))}:host([color=info]){--color:var(--info-20, rgba(216, 76, 150, 0.2))}:host([color=success]){--color:var(--success-20, rgba(58, 167, 109, 0.2))}:host([color=warning]){--color:var(--warning-20, rgba(237, 110, 51, 0.2))}:host([color=wood]){--color:var(--wood-20, rgba(153, 100, 76, 0.2))}:host([color=anthracite]){--color:var(--anthracite-20, rgba(26, 26, 26, 0.2))}:host([color=danger]){--color:var(--danger-20, rgba(212, 67, 51, 0.2))}:host([color=stable]){--color:var(--stable-20, rgba(173, 173, 173, 0.2))}:host([color=dark]){--color:var(--dark-20, rgba(0, 0, 0, 0.2))}";
+
+const YooChartBarComponent = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.barClicked = index.createEvent(this, "barClicked", 7);
+    this.heading = undefined;
+    this.footerText = 'YOOBICSMARTVOTES';
+    this.isFullScreen = undefined;
+    this.data = undefined;
+    this.size = 'large';
+    this.color = 'app-color';
+  }
+  getTotal() {
+    return lodash.sum(this.data.map((e) => e.y || 0)) || 1;
+  }
+  getMax() {
+    return lodash.max(this.data.map((e) => e.y));
+  }
+  getTotalVotes() {
+    const users = lodash.uniq(lodash.compact(lodash.flatten(this.data.map((e) => e.users || []))));
+    return (users === null || users === void 0 ? void 0 : users.length) || 0;
+  }
+  renderBar(entry) {
+    var _a;
+    const percentage = Math.round((entry.y || 0) / this.getTotal() * 100);
+    const isMax = entry.y === this.getMax();
+    const isSelected = ((_a = entry.users) === null || _a === void 0 ? void 0 : _a.indexOf(index$1.getSession().userId)) >= 0;
+    return index.h("div", { class: { bar: true, selected: isSelected, bordered: percentage <= 0, maximum: isMax }, onClick: () => this.barClicked.emit(entry) }, percentage > 0 && index.h("div", { class: "bar-background", style: { width: percentage + '%' } }), index.h("div", { class: "bar-title" }, index.h("span", { class: "title" }, entry.name, " "), isSelected && index.h("yoo-icon", { color: this.color, name: "tick", size: this.size === 'large' ? 'medium' : this.size })), index.h("div", { class: "bar-value" }, percentage, "%"));
+  }
+  renderTotalVotes() {
+    const total = this.getTotalVotes();
+    return index.h("div", { class: "total" }, index$1.translate(this.footerText, { smart_count: total, count: total.toLocaleString() }));
+  }
+  render() {
+    var _a;
+    return index.h(index.Host, { class: commonHelpers.getAppContext(this.host), dir: document.dir, size: this.size }, index.h("div", { class: "container" }, index.h("div", { class: "header" }, index.h("div", { class: "title" }, this.heading)), index.h("div", { class: "bars" }, (_a = this.data) === null || _a === void 0 ? void 0 : _a.map((entry) => this.renderBar(entry))), this.renderTotalVotes()));
+  }
+  get host() { return index.getElement(this); }
+};
+YooChartBarComponent.style = chartBarCss;
+
+exports.yoo_chart_bar = YooChartBarComponent;

package/dist/cjs/yoo-form-emailreport.cjs.entry.js

@@ -84,9 +84,6 @@ const YooFormEmailreportComponent = class {
   onAutoCompleteValidityChanged(ev) {
     ev.stopPropagation();
   }
-  renderInput() {
-    return (index.h("yoo-form-autocomplete", { ref: (el) => (this.formAutocomplete = el), size: index$1.isWeb(this.host) ? 'medium' : 'large', multiple: true, idOnly: true, idOnlyInitialSelection: this.extraData, isLocal: this.isLocal, value: this.value, values: this.isLocal ? this.fieldValues : null, entityType: "emails", displayType: "card-list", placeholder: this.isLocal ? 'ADDNEWEMAILS' : null, onFetchData: (ev) => this.onFetchData(ev), onInputChanged: (ev) => this.onInputChanged(ev), onInputBlurred: (ev) => this.onInputBlurred(ev), onInputFocused: (ev) => this.onInputFocused(ev), onValidityChanged: (ev) => this.onAutoCompleteValidityChanged(ev), tags: this.tags, clearable: true, allowCustomTag: true, tabindex: this.inputTabIndex }));
-  }
   renderReadonly() {
     const emails = lodash.compact([].concat(this.value));
     if (emails.length > 0) {

package/dist/cjs/yoo-form-input-container.cjs.entry.js

@@ -255,11 +255,11 @@ const YooFormInputContainerComponent = class {
   }
   async setContent() {
     if (index$1.isOffline() || index$1.isYoobicSecuredDocTenant()) {
-      const descriptionUrls = index$1.getURLs(this.field.description);
+      const descriptionUrls = index$1.getURLs(index$1.translateMulti(this.field.description));
       for (const url of descriptionUrls) {
         const cachedFile = await localForage.getFromLocalForage(index$1.getKeyToCache(url));
         if (cachedFile) {
-          this.field.description = this.field.description.replace(url, index$1.getMedia(cachedFile));
+          this.field.description = index$1.translateMulti(this.field.description).replace(url, index$1.getMedia(cachedFile));
         }
       }
       index.forceUpdate(this);

package/dist/cjs/yoo-form-input.cjs.entry.js

@@ -265,7 +265,7 @@ const YooFormInputComponent = class {
   disconnectedCallback() {
     if (index$1.isNativeMobile() && index$1.isIOS()) {
       this.isKeyboardResizeModeInactive && index$1.disableKeyboardResize();
-      if (this.disableKeyboardResizing) {
+      if (!this.disableKeyboardResizing) {
         index$1.removeKeyboardEventListeners();
       }
     }

package/dist/cjs/yoo-markdown.cjs.entry.js

@@ -39,11 +39,11 @@ const YooMarkdownComponent = class {
   async setContent() {
     var _a;
     if (index$1.isOffline() || index$1.isYoobicSecuredDocTenant()) {
-      const markdownUrls = index$1.getURLs(this.treatedContent);
+      const markdownUrls = index$1.getURLs(index$1.translateMulti(this.treatedContent));
       for (const url of markdownUrls) {
         const cachedFile = await localForage.getFromLocalForage(index$1.getKeyToCache(url));
         if (cachedFile) {
-          this.treatedContent = this.treatedContent.replace(url, (index$1.cleanupWKWebViewFilePath(cachedFile)));
+          this.treatedContent = index$1.translateMulti(this.treatedContent).replace(url, (index$1.cleanupWKWebViewFilePath(cachedFile)));
         }
       }
       this.treatedContent = index$1.setSecuredContent(this.treatedContent);

package/dist/collection/collection-manifest.json

@@ -278,6 +278,7 @@
     "./feature-communicate/document/card-video/card-video.js",
     "./feature-communicate/feed/card-feed/default/card-feed.js",
     "./feature-communicate/feed/card-feed/row/card-feed-row.js",
+    "./feature-communicate/feed/chart-bar/chart-bar.js",
     "./feature-communicate/feed/community-detail/community-detail.js",
     "./feature-communicate/feed/feed-detail/feed-detail.js",
     "./feature-communicate/feed/user-wizard/user-wizard.js",

package/dist/collection/components/1.atoms/markdown/markdown.js

@@ -1,4 +1,4 @@
-import { cleanupWKWebViewFilePath, getKeyToCache, getURLs, isOffline, isYoobicSecuredDocTenant, setSecuredContent, translate } from '@shared/utils';
+import { cleanupWKWebViewFilePath, getKeyToCache, getURLs, isOffline, isYoobicSecuredDocTenant, setSecuredContent, translate, translateMulti } from '@shared/utils';
 import { forceUpdate, h, Host } from '@stencil/core';
 import { getFromLocalForage } from '@yobi/utils/cache/local-forage';
 import { openImageDetailFromRTE } from '@yobi/utils/helpers/common-helpers';
@@ -27,11 +27,11 @@ export class YooMarkdownComponent {
   async setContent() {
     var _a;
     if (isOffline() || isYoobicSecuredDocTenant()) {
-      const markdownUrls = getURLs(this.treatedContent);
+      const markdownUrls = getURLs(translateMulti(this.treatedContent));
       for (const url of markdownUrls) {
         const cachedFile = await getFromLocalForage(getKeyToCache(url));
         if (cachedFile) {
-          this.treatedContent = this.treatedContent.replace(url, (cleanupWKWebViewFilePath(cachedFile)));
+          this.treatedContent = translateMulti(this.treatedContent).replace(url, (cleanupWKWebViewFilePath(cachedFile)));
         }
       }
       this.treatedContent = setSecuredContent(this.treatedContent);

package/dist/collection/components/form/form-emailreport/form-emailreport.js

@@ -67,9 +67,6 @@ export class YooFormEmailreportComponent {
   onAutoCompleteValidityChanged(ev) {
     ev.stopPropagation();
   }
-  renderInput() {
-    return (h("yoo-form-autocomplete", { ref: (el) => (this.formAutocomplete = el), size: isWeb(this.host) ? 'medium' : 'large', multiple: true, idOnly: true, idOnlyInitialSelection: this.extraData, isLocal: this.isLocal, value: this.value, values: this.isLocal ? this.fieldValues : null, entityType: "emails", displayType: "card-list", placeholder: this.isLocal ? 'ADDNEWEMAILS' : null, onFetchData: (ev) => this.onFetchData(ev), onInputChanged: (ev) => this.onInputChanged(ev), onInputBlurred: (ev) => this.onInputBlurred(ev), onInputFocused: (ev) => this.onInputFocused(ev), onValidityChanged: (ev) => this.onAutoCompleteValidityChanged(ev), tags: this.tags, clearable: true, allowCustomTag: true, tabindex: this.inputTabIndex }));
-  }
   renderReadonly() {
     const emails = compact([].concat(this.value));
     if (emails.length > 0) {

package/dist/collection/components/form/form-input/form-input.js

@@ -239,7 +239,7 @@ export class YooFormInputComponent {
   disconnectedCallback() {
     if (isNativeMobile() && isIOS()) {
       this.isKeyboardResizeModeInactive && disableKeyboardResize();
-      if (this.disableKeyboardResizing) {
+      if (!this.disableKeyboardResizing) {
         removeKeyboardEventListeners();
       }
     }

package/dist/collection/components/form/form-input-container/form-input-container.js

@@ -236,11 +236,11 @@ export class YooFormInputContainerComponent {
   }
   async setContent() {
     if (isOffline() || isYoobicSecuredDocTenant()) {
-      const descriptionUrls = getURLs(this.field.description);
+      const descriptionUrls = getURLs(translateMulti(this.field.description));
       for (const url of descriptionUrls) {
         const cachedFile = await getFromLocalForage(getKeyToCache(url));
         if (cachedFile) {
-          this.field.description = this.field.description.replace(url, getMedia(cachedFile));
+          this.field.description = translateMulti(this.field.description).replace(url, getMedia(cachedFile));
         }
       }
       forceUpdate(this);

package/dist/collection/feature-communicate/feed/card-feed/default/card-feed.js

@@ -1,4 +1,4 @@
-import { closeModal, dispatchCustomEvent, getSession, getUserDisplayName, hasAttachment, intersectionObserve, isCampaignFeed, isCampaignTodo, isFieldWithNoValue, isIntersectionObserverSupported, isMedia, isVideo, isWeb, parseMarkDown, removeTextStyle, replaceAllLinks, replaceAtTagToMentionTag, setSecuredContent, showActionSheet, translate, translateMulti } from '@shared/utils';
+import { closeModal, dispatchCustomEvent, getSession, getUserDisplayName, getUUID, hasAttachment, intersectionObserve, isCampaignFeed, isCampaignTodo, isFieldWithNoValue, isIntersectionObserverSupported, isMedia, isVideo, isWeb, parseMarkDown, removeTextStyle, replaceAllLinks, replaceAtTagToMentionTag, setSecuredContent, showActionSheet, translate, translateMulti } from '@shared/utils';
 import { h, Host } from '@stencil/core';
 import { getButton } from '@yobi/utils/button.factory';
 import { execHandlerAndStopEvent, getAppContext, openImageDetailFromRTE } from '@yobi/utils/helpers/common-helpers';
@@ -246,7 +246,7 @@ export class YooCardFeedComponent {
       }
       return entry;
     });
-    return (h("div", { class: "feed-chart" }, ((_f = (_e = this.entry.chartConfig) === null || _e === void 0 ? void 0 : _e.series) === null || _f === void 0 ? void 0 : _f.length) > 0 && h("ng-chart-bar", { heading: this.entry.chartDefinition.title, data: data })));
+    return (h("div", { class: "feed-chart" }, ((_f = (_e = this.entry.chartConfig) === null || _e === void 0 ? void 0 : _e.series) === null || _f === void 0 ? void 0 : _f.length) > 0 && h("yoo-chart-bar", { key: getUUID(), heading: this.entry.chartDefinition.title, data: data })));
   }
   renderBottomActionText(item) {
     return (h("div", { class: 'action ' + (item.cssClass || '') }, item.icon && h("yoo-icon", { name: item.icon, color: item.iconColor, size: "medium" }), item.text));

package/dist/collection/feature-communicate/feed/chart-bar/chart-bar.css

@@ -0,0 +1,324 @@
+/* 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 {
+  --bar-height: 3rem;
+  --padding: var(--spacing-16, 1rem);
+  --font-size: var(--font-size-16, 1rem);
+  --color: var(--app-color-20, rgba(90, 48, 244, 0.2));
+  --color-secondary: var(--stable-light, #f1f1f1);
+  display: block;
+}
+:host .bars {
+  display: flex;
+  flex-direction: column;
+}
+:host .bars .bar {
+  position: relative;
+  display: flex;
+  flex: 1;
+  align-items: center;
+  min-height: var(--bar-height);
+  margin-top: calc(var(--padding) / 2);
+  font-size: var(--font-size);
+}
+:host .bars .bar.bordered {
+  border-left: calc(var(--padding) / 4) solid var(--color-secondary);
+}
+:host .bars .bar .bar-title {
+  z-index: 1;
+  display: flex;
+  flex: 1;
+  align-items: center;
+  padding: 0 var(--padding);
+  overflow: hidden;
+  color: var(--dark, #000000);
+}
+:host .bars .bar .bar-title .title {
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+:host .bars .bar .bar-title yoo-icon {
+  margin-left: calc(var(--padding) / 2);
+}
+:host .bars .bar .bar-value {
+  z-index: 1;
+  padding-right: calc(var(--padding) / 2);
+  color: var(--dark, #000000);
+}
+:host .bars .bar .bar-background {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  background: var(--color-secondary);
+}
+:host .bars .bar.maximum .bar-title {
+  font-weight: bold;
+}
+:host .bars .bar.maximum .bar-background {
+  background: var(--color);
+}
+:host .total {
+  margin-top: calc(var(--padding) / 2);
+  color: var(--text-color, #807f83);
+  font-size: var(--font-size);
+}
+
+:host([size=medium]) {
+  --bar-height: 2rem;
+  --padding: var(--spacing-08, 0.5rem);
+  --font-size: var(--font-size-14, 0.875rem);
+}
+
+:host([size=small]) {
+  --bar-height: 1.5rem;
+  --padding: var(--spacing-04, 0.25rem);
+  --font-size: var(--font-size-12, 0.75rem);
+}
+
+:host([color=accent]) {
+  --color: var(--accent-20, rgba(39, 110, 241, 0.2));
+}
+
+:host([color=app-color]) {
+  --color: var(--app-color-20, rgba(90, 48, 244, 0.2));
+}
+
+:host([color=energized]) {
+  --color: var(--energized-20, rgba(255, 192, 67, 0.2));
+}
+
+:host([color=info]) {
+  --color: var(--info-20, rgba(216, 76, 150, 0.2));
+}
+
+:host([color=success]) {
+  --color: var(--success-20, rgba(58, 167, 109, 0.2));
+}
+
+:host([color=warning]) {
+  --color: var(--warning-20, rgba(237, 110, 51, 0.2));
+}
+
+:host([color=wood]) {
+  --color: var(--wood-20, rgba(153, 100, 76, 0.2));
+}
+
+:host([color=anthracite]) {
+  --color: var(--anthracite-20, rgba(26, 26, 26, 0.2));
+}
+
+:host([color=danger]) {
+  --color: var(--danger-20, rgba(212, 67, 51, 0.2));
+}
+
+:host([color=stable]) {
+  --color: var(--stable-20, rgba(173, 173, 173, 0.2));
+}
+
+:host([color=dark]) {
+  --color: var(--dark-20, rgba(0, 0, 0, 0.2));
+}