suis 1.0.1 → 1.2.0

package/fesm2022/suis.mjs

@@ -1,7 +1,7 @@
 import * as i0 from '@angular/core';
 import { Pipe, Component, ChangeDetectionStrategy, Input, EventEmitter, Output, Directive, signal, Injectable, inject, ChangeDetectorRef, ElementRef, forwardRef, ViewChild, HostListener, TemplateRef, ContentChild, NgModule, DestroyRef, ContentChildren } from '@angular/core';
 import * as i1$1 from '@angular/common';
-import { NgClass, NgIf, NgFor, NgComponentOutlet, CommonModule, NgTemplateOutlet, NgSwitch, NgSwitchCase } from '@angular/common';
+import { NgClass, NgIf, NgFor, NgForOf, NgComponentOutlet, CommonModule, NgTemplateOutlet, NgSwitch, NgSwitchCase } from '@angular/common';
 import * as i1 from '@angular/router';
 import { RouterModule } from '@angular/router';
 import * as i1$2 from '@angular/forms';
@@ -338,6 +338,132 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
             args: [{ selector: 'suis-button-outlined', standalone: true, imports: [NgIf, NgClass, SuisNgClassPipe, SuisSpinnerComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<button\n  class=\"suis-button-outlined\"\n  [class.suis-button-outlined--full-width]=\"fullWidth\"\n  [ngClass]=\"'suis-button-outlined' | suisNgClass : color\"\n  [attr.disabled]=\"disabled || loading ? true : undefined\"\n  [attr.tabindex]=\"disabled || loading ? -1 : 0\"\n  [attr.type]=\"type\"\n  (click)=\"onClick()\"\n>\n  <span\n    class=\"suis-button-outlined__content\"\n    [class.suis-button-outlined__content--loading]=\"loading\"\n  >\n    <ng-content></ng-content>\n  </span>\n  <suis-spinner *ngIf=\"loading\" size=\"xs\" [color]=\"color\"></suis-spinner>\n</button>\n", styles: ["*{margin:0;padding:0;box-sizing:border-box}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}:host{display:block}.suis-button-outlined{width:-moz-fit-content;width:fit-content;display:flex;align-items:center;justify-content:center;padding:.375rem 1rem;border-radius:.25rem;text-align:center;text-decoration:none;transition:background-color .25s ease-in-out;font-size:.875rem;border-width:.125rem;border-style:solid;background-color:transparent}.suis-button-outlined--full-width{width:100%}.suis-button-outlined--disabled{opacity:.5}.suis-button-outlined__content{display:flex;align-items:center;justify-content:center}.suis-button-outlined__content--loading{visibility:hidden}.suis-button-outlined suis-spinner{position:absolute}.suis-button-outlined:disabled{opacity:.5}.suis-button-outlined:hover:not(:disabled){cursor:pointer}.suis-button-outlined:hover:disabled{cursor:not-allowed}.suis-button-outlined:focus,.suis-button-outlined:focus-within{outline:none}.suis-button-outlined--primary{border-color:#192a56;color:#192a56}.suis-button-outlined--primary:hover:not(:disabled){background-color:#192a56;color:#fff}.suis-button-outlined--primary:focus:not(:disabled){box-shadow:0 2px 5px #192a56bf}.suis-button-outlined--secondary{border-color:#273c75;color:#273c75}.suis-button-outlined--secondary:hover:not(:disabled){background-color:#273c75;color:#fff}.suis-button-outlined--secondary:focus:not(:disabled){box-shadow:0 2px 5px #273c75bf}.suis-button-outlined--tertiary{border-color:#dcdde1;color:#dcdde1}.suis-button-outlined--tertiary:hover:not(:disabled){background-color:#dcdde1;color:#2f3640}.suis-button-outlined--tertiary:focus:not(:disabled){box-shadow:0 2px 5px #dcdde1bf}.suis-button-outlined--complementary{border-color:#f5f6fa;color:#f5f6fa}.suis-button-outlined--complementary:hover:not(:disabled){background-color:#f5f6fa;color:#2f3640}.suis-button-outlined--complementary:focus:not(:disabled){box-shadow:0 2px 5px #f5f6fabf}.suis-button-outlined--success{border-color:#2ed573;color:#2ed573}.suis-button-outlined--success:hover:not(:disabled){background-color:#2ed573;color:#fff}.suis-button-outlined--success:focus:not(:disabled){box-shadow:0 2px 5px #2ed573bf}.suis-button-outlined--warning{border-color:#ffa502;color:#ffa502}.suis-button-outlined--warning:hover:not(:disabled){background-color:#ffa502;color:#fff}.suis-button-outlined--warning:focus:not(:disabled){box-shadow:0 2px 5px #ffa502bf}.suis-button-outlined--danger{border-color:#ff4757;color:#ff4757}.suis-button-outlined--danger:hover:not(:disabled){background-color:#ff4757;color:#fff}.suis-button-outlined--danger:focus:not(:disabled){box-shadow:0 2px 5px #ff4757bf}\n"] }]
         }] });
 
+class SuisChartHeightPipe {
+    transform(value, maxValue) {
+        if (value > maxValue)
+            return '100%';
+        return `${(value / maxValue) * 100}%`;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SuisChartHeightPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: SuisChartHeightPipe, isStandalone: true, name: "suisChartHeight" }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SuisChartHeightPipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    name: 'suisChartHeight',
+                    standalone: true,
+                }]
+        }] });
+
+class SuisChartDataPipe {
+    transform(data, compareData) {
+        if (!compareData.length)
+            return data;
+        const combinedData = [];
+        data.forEach((item, index) => {
+            combinedData.push(item);
+            if (compareData.length - 1 >= index) {
+                combinedData.push({
+                    ...compareData[index],
+                    compare: true,
+                });
+            }
+            else {
+                combinedData.push({
+                    value: 0,
+                    compare: true,
+                });
+            }
+        });
+        return combinedData;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SuisChartDataPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: SuisChartDataPipe, isStandalone: true, name: "suisChartData" }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SuisChartDataPipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    name: 'suisChartData',
+                    standalone: true,
+                }]
+        }] });
+
+class SuisChartComponent {
+    constructor() {
+        /** @internal */
+        this._maxValue = 100;
+        /**
+         * Array of the chart bars labels. By default set to empty array.
+         */
+        this.labels = [];
+        /**
+         * Array of data values and optionally colors. Type of SuisChartDataItem[]. By default set to empty array.
+         */
+        this.data = [];
+        /**
+         * Sets the default color of the chart bars. Type of SuisColor. By default set to 'primary'.
+         */
+        this.color = 'primary';
+        /**
+         * Adjusts the width of the chart bars. Type of SuisSize. By default set to 'md'.
+         */
+        this.size = 'md';
+        /**
+         * Sets the maximum value automatically based on data values. By default set to false.
+         */
+        this.autoMax = false;
+        /**
+         * Array of comparision data values and optionally colors. Type of SuisChartDataItem[]. By default set to empty array.
+         */
+        this.compareData = [];
+        /**
+         * Sets the default color of the comparision chart bars. Type of SuisColor. By default set to 'warning'.
+         */
+        this.compareColor = 'warning';
+    }
+    /** @internal */
+    get maxValue() {
+        if (!this.autoMax)
+            return this._maxValue;
+        return Math.max(...[...this.data, ...this.compareData].map((item) => item.value));
+    }
+    /**
+     * Set the maximum value of the chart bars. By default set to 100.
+     */
+    set maxValue(value) {
+        this._maxValue = value;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SuisChartComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: SuisChartComponent, isStandalone: true, selector: "suis-chart", inputs: { maxValue: "maxValue", labels: "labels", data: "data", color: "color", size: "size", autoMax: "autoMax", compareData: "compareData", compareColor: "compareColor" }, ngImport: i0, template: "<div class=\"suis-chart\">\n  <div\n    class=\"suis-chart__content\"\n    [ngClass]=\"'suis-chart__content' | suisNgClass : size\"\n  >\n    <div\n      *ngFor=\"let item of data | suisChartData : compareData\"\n      class=\"suis-chart__content__item\"\n      [ngClass]=\"\n        'suis-chart__content__item'\n          | suisNgClass\n            : (item.compare ? item.color || compareColor : item.color || color)\n            : (item.compare ? 'compare' : 'single')\n      \"\n      [style.height]=\"item.value | suisChartHeight : maxValue\"\n    >\n      <div class=\"suis-chart__content__item__value\">\n        {{ item.value }}\n      </div>\n    </div>\n  </div>\n  <div\n    class=\"suis-chart__labels\"\n    [ngClass]=\"'suis-chart__labels' | suisNgClass : size\"\n  >\n    <div\n      *ngFor=\"let label of labels\"\n      class=\"suis-chart__labels__item\"\n      [class.suis-chart__labels__item--double]=\"compareData.length\"\n    >\n      {{ label }}\n    </div>\n  </div>\n</div>\n", styles: ["*{margin:0;padding:0;box-sizing:border-box}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}:host{display:block;height:100%}.suis-chart{height:100%}.suis-chart__content,.suis-chart__labels{display:flex;align-items:flex-end;justify-content:center}.suis-chart__content--xs .suis-chart__content__item,.suis-chart__content--xs .suis-chart__labels__item,.suis-chart__labels--xs .suis-chart__content__item,.suis-chart__labels--xs .suis-chart__labels__item{width:1rem}.suis-chart__content--xs .suis-chart__content__item:not(:last-child),.suis-chart__content--xs .suis-chart__labels__item:not(:last-child),.suis-chart__labels--xs .suis-chart__content__item:not(:last-child),.suis-chart__labels--xs .suis-chart__labels__item:not(:last-child){margin-right:.5rem}.suis-chart__content--xs .suis-chart__content__item--compare,.suis-chart__content--xs .suis-chart__labels__item--compare,.suis-chart__labels--xs .suis-chart__content__item--compare,.suis-chart__labels--xs .suis-chart__labels__item--compare{margin-left:-.5rem}.suis-chart__content--xs .suis-chart__content__item--double,.suis-chart__content--xs .suis-chart__labels__item--double,.suis-chart__labels--xs .suis-chart__content__item--double,.suis-chart__labels--xs .suis-chart__labels__item--double{width:2rem}.suis-chart__content--sm .suis-chart__content__item,.suis-chart__content--sm .suis-chart__labels__item,.suis-chart__labels--sm .suis-chart__content__item,.suis-chart__labels--sm .suis-chart__labels__item{width:1.25rem}.suis-chart__content--sm .suis-chart__content__item:not(:last-child),.suis-chart__content--sm .suis-chart__labels__item:not(:last-child),.suis-chart__labels--sm .suis-chart__content__item:not(:last-child),.suis-chart__labels--sm .suis-chart__labels__item:not(:last-child){margin-right:.625rem}.suis-chart__content--sm .suis-chart__content__item--compare,.suis-chart__content--sm .suis-chart__labels__item--compare,.suis-chart__labels--sm .suis-chart__content__item--compare,.suis-chart__labels--sm .suis-chart__labels__item--compare{margin-left:-.625rem}.suis-chart__content--sm .suis-chart__content__item--double,.suis-chart__content--sm .suis-chart__labels__item--double,.suis-chart__labels--sm .suis-chart__content__item--double,.suis-chart__labels--sm .suis-chart__labels__item--double{width:2.5rem}.suis-chart__content--md .suis-chart__content__item,.suis-chart__content--md .suis-chart__labels__item,.suis-chart__labels--md .suis-chart__content__item,.suis-chart__labels--md .suis-chart__labels__item{width:1.5rem}.suis-chart__content--md .suis-chart__content__item:not(:last-child),.suis-chart__content--md .suis-chart__labels__item:not(:last-child),.suis-chart__labels--md .suis-chart__content__item:not(:last-child),.suis-chart__labels--md .suis-chart__labels__item:not(:last-child){margin-right:.75rem}.suis-chart__content--md .suis-chart__content__item--compare,.suis-chart__content--md .suis-chart__labels__item--compare,.suis-chart__labels--md .suis-chart__content__item--compare,.suis-chart__labels--md .suis-chart__labels__item--compare{margin-left:-.75rem}.suis-chart__content--md .suis-chart__content__item--double,.suis-chart__content--md .suis-chart__labels__item--double,.suis-chart__labels--md .suis-chart__content__item--double,.suis-chart__labels--md .suis-chart__labels__item--double{width:3rem}.suis-chart__content--lg .suis-chart__content__item,.suis-chart__content--lg .suis-chart__labels__item,.suis-chart__labels--lg .suis-chart__content__item,.suis-chart__labels--lg .suis-chart__labels__item{width:1.75rem}.suis-chart__content--lg .suis-chart__content__item:not(:last-child),.suis-chart__content--lg .suis-chart__labels__item:not(:last-child),.suis-chart__labels--lg .suis-chart__content__item:not(:last-child),.suis-chart__labels--lg .suis-chart__labels__item:not(:last-child){margin-right:.875rem}.suis-chart__content--lg .suis-chart__content__item--compare,.suis-chart__content--lg .suis-chart__labels__item--compare,.suis-chart__labels--lg .suis-chart__content__item--compare,.suis-chart__labels--lg .suis-chart__labels__item--compare{margin-left:-1rem}.suis-chart__content--lg .suis-chart__content__item--double,.suis-chart__content--lg .suis-chart__labels__item--double,.suis-chart__labels--lg .suis-chart__content__item--double,.suis-chart__labels--lg .suis-chart__labels__item--double{width:3.5rem}.suis-chart__content--xl .suis-chart__content__item,.suis-chart__content--xl .suis-chart__labels__item,.suis-chart__labels--xl .suis-chart__content__item,.suis-chart__labels--xl .suis-chart__labels__item{width:2rem}.suis-chart__content--xl .suis-chart__content__item:not(:last-child),.suis-chart__content--xl .suis-chart__labels__item:not(:last-child),.suis-chart__labels--xl .suis-chart__content__item:not(:last-child),.suis-chart__labels--xl .suis-chart__labels__item:not(:last-child){margin-right:1rem}.suis-chart__content--xl .suis-chart__content__item--compare,.suis-chart__content--xl .suis-chart__labels__item--compare,.suis-chart__labels--xl .suis-chart__content__item--compare,.suis-chart__labels--xl .suis-chart__labels__item--compare{margin-left:-1rem}.suis-chart__content--xl .suis-chart__content__item--double,.suis-chart__content--xl .suis-chart__labels__item--double,.suis-chart__labels--xl .suis-chart__content__item--double,.suis-chart__labels--xl .suis-chart__labels__item--double{width:4rem}.suis-chart__content{height:100%}.suis-chart__content__item{background-color:#192a56;min-height:.0625rem;position:relative}.suis-chart__content__item--primary{background-color:#192a56}.suis-chart__content__item--secondary{background-color:#273c75}.suis-chart__content__item--tertiary{background-color:#dcdde1}.suis-chart__content__item--complementary{background-color:#f5f6fa}.suis-chart__content__item--success{background-color:#2ed573}.suis-chart__content__item--warning{background-color:#ffa502}.suis-chart__content__item--danger{background-color:#ff4757}.suis-chart__content__item--white{background-color:#fff}.suis-chart__content__item--gray{background-color:#bcbcbc}.suis-chart__content__item--dark{background-color:#000}.suis-chart__content__item__value{position:absolute;top:-1rem;text-align:center;width:100%;font-size:.75rem;color:#a4a7b0}.suis-chart__labels__item{margin-top:.25rem;font-size:.75rem;color:#a4a7b0;text-align:center}\n"], dependencies: [{ kind: "directive", type: NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: SuisChartHeightPipe, name: "suisChartHeight" }, { kind: "pipe", type: SuisChartDataPipe, name: "suisChartData" }, { kind: "pipe", type: SuisNgClassPipe, name: "suisNgClass" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SuisChartComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'suis-chart', standalone: true, imports: [
+                        NgForOf,
+                        NgIf,
+                        NgClass,
+                        SuisChartHeightPipe,
+                        SuisChartDataPipe,
+                        SuisNgClassPipe,
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"suis-chart\">\n  <div\n    class=\"suis-chart__content\"\n    [ngClass]=\"'suis-chart__content' | suisNgClass : size\"\n  >\n    <div\n      *ngFor=\"let item of data | suisChartData : compareData\"\n      class=\"suis-chart__content__item\"\n      [ngClass]=\"\n        'suis-chart__content__item'\n          | suisNgClass\n            : (item.compare ? item.color || compareColor : item.color || color)\n            : (item.compare ? 'compare' : 'single')\n      \"\n      [style.height]=\"item.value | suisChartHeight : maxValue\"\n    >\n      <div class=\"suis-chart__content__item__value\">\n        {{ item.value }}\n      </div>\n    </div>\n  </div>\n  <div\n    class=\"suis-chart__labels\"\n    [ngClass]=\"'suis-chart__labels' | suisNgClass : size\"\n  >\n    <div\n      *ngFor=\"let label of labels\"\n      class=\"suis-chart__labels__item\"\n      [class.suis-chart__labels__item--double]=\"compareData.length\"\n    >\n      {{ label }}\n    </div>\n  </div>\n</div>\n", styles: ["*{margin:0;padding:0;box-sizing:border-box}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}:host{display:block;height:100%}.suis-chart{height:100%}.suis-chart__content,.suis-chart__labels{display:flex;align-items:flex-end;justify-content:center}.suis-chart__content--xs .suis-chart__content__item,.suis-chart__content--xs .suis-chart__labels__item,.suis-chart__labels--xs .suis-chart__content__item,.suis-chart__labels--xs .suis-chart__labels__item{width:1rem}.suis-chart__content--xs .suis-chart__content__item:not(:last-child),.suis-chart__content--xs .suis-chart__labels__item:not(:last-child),.suis-chart__labels--xs .suis-chart__content__item:not(:last-child),.suis-chart__labels--xs .suis-chart__labels__item:not(:last-child){margin-right:.5rem}.suis-chart__content--xs .suis-chart__content__item--compare,.suis-chart__content--xs .suis-chart__labels__item--compare,.suis-chart__labels--xs .suis-chart__content__item--compare,.suis-chart__labels--xs .suis-chart__labels__item--compare{margin-left:-.5rem}.suis-chart__content--xs .suis-chart__content__item--double,.suis-chart__content--xs .suis-chart__labels__item--double,.suis-chart__labels--xs .suis-chart__content__item--double,.suis-chart__labels--xs .suis-chart__labels__item--double{width:2rem}.suis-chart__content--sm .suis-chart__content__item,.suis-chart__content--sm .suis-chart__labels__item,.suis-chart__labels--sm .suis-chart__content__item,.suis-chart__labels--sm .suis-chart__labels__item{width:1.25rem}.suis-chart__content--sm .suis-chart__content__item:not(:last-child),.suis-chart__content--sm .suis-chart__labels__item:not(:last-child),.suis-chart__labels--sm .suis-chart__content__item:not(:last-child),.suis-chart__labels--sm .suis-chart__labels__item:not(:last-child){margin-right:.625rem}.suis-chart__content--sm .suis-chart__content__item--compare,.suis-chart__content--sm .suis-chart__labels__item--compare,.suis-chart__labels--sm .suis-chart__content__item--compare,.suis-chart__labels--sm .suis-chart__labels__item--compare{margin-left:-.625rem}.suis-chart__content--sm .suis-chart__content__item--double,.suis-chart__content--sm .suis-chart__labels__item--double,.suis-chart__labels--sm .suis-chart__content__item--double,.suis-chart__labels--sm .suis-chart__labels__item--double{width:2.5rem}.suis-chart__content--md .suis-chart__content__item,.suis-chart__content--md .suis-chart__labels__item,.suis-chart__labels--md .suis-chart__content__item,.suis-chart__labels--md .suis-chart__labels__item{width:1.5rem}.suis-chart__content--md .suis-chart__content__item:not(:last-child),.suis-chart__content--md .suis-chart__labels__item:not(:last-child),.suis-chart__labels--md .suis-chart__content__item:not(:last-child),.suis-chart__labels--md .suis-chart__labels__item:not(:last-child){margin-right:.75rem}.suis-chart__content--md .suis-chart__content__item--compare,.suis-chart__content--md .suis-chart__labels__item--compare,.suis-chart__labels--md .suis-chart__content__item--compare,.suis-chart__labels--md .suis-chart__labels__item--compare{margin-left:-.75rem}.suis-chart__content--md .suis-chart__content__item--double,.suis-chart__content--md .suis-chart__labels__item--double,.suis-chart__labels--md .suis-chart__content__item--double,.suis-chart__labels--md .suis-chart__labels__item--double{width:3rem}.suis-chart__content--lg .suis-chart__content__item,.suis-chart__content--lg .suis-chart__labels__item,.suis-chart__labels--lg .suis-chart__content__item,.suis-chart__labels--lg .suis-chart__labels__item{width:1.75rem}.suis-chart__content--lg .suis-chart__content__item:not(:last-child),.suis-chart__content--lg .suis-chart__labels__item:not(:last-child),.suis-chart__labels--lg .suis-chart__content__item:not(:last-child),.suis-chart__labels--lg .suis-chart__labels__item:not(:last-child){margin-right:.875rem}.suis-chart__content--lg .suis-chart__content__item--compare,.suis-chart__content--lg .suis-chart__labels__item--compare,.suis-chart__labels--lg .suis-chart__content__item--compare,.suis-chart__labels--lg .suis-chart__labels__item--compare{margin-left:-1rem}.suis-chart__content--lg .suis-chart__content__item--double,.suis-chart__content--lg .suis-chart__labels__item--double,.suis-chart__labels--lg .suis-chart__content__item--double,.suis-chart__labels--lg .suis-chart__labels__item--double{width:3.5rem}.suis-chart__content--xl .suis-chart__content__item,.suis-chart__content--xl .suis-chart__labels__item,.suis-chart__labels--xl .suis-chart__content__item,.suis-chart__labels--xl .suis-chart__labels__item{width:2rem}.suis-chart__content--xl .suis-chart__content__item:not(:last-child),.suis-chart__content--xl .suis-chart__labels__item:not(:last-child),.suis-chart__labels--xl .suis-chart__content__item:not(:last-child),.suis-chart__labels--xl .suis-chart__labels__item:not(:last-child){margin-right:1rem}.suis-chart__content--xl .suis-chart__content__item--compare,.suis-chart__content--xl .suis-chart__labels__item--compare,.suis-chart__labels--xl .suis-chart__content__item--compare,.suis-chart__labels--xl .suis-chart__labels__item--compare{margin-left:-1rem}.suis-chart__content--xl .suis-chart__content__item--double,.suis-chart__content--xl .suis-chart__labels__item--double,.suis-chart__labels--xl .suis-chart__content__item--double,.suis-chart__labels--xl .suis-chart__labels__item--double{width:4rem}.suis-chart__content{height:100%}.suis-chart__content__item{background-color:#192a56;min-height:.0625rem;position:relative}.suis-chart__content__item--primary{background-color:#192a56}.suis-chart__content__item--secondary{background-color:#273c75}.suis-chart__content__item--tertiary{background-color:#dcdde1}.suis-chart__content__item--complementary{background-color:#f5f6fa}.suis-chart__content__item--success{background-color:#2ed573}.suis-chart__content__item--warning{background-color:#ffa502}.suis-chart__content__item--danger{background-color:#ff4757}.suis-chart__content__item--white{background-color:#fff}.suis-chart__content__item--gray{background-color:#bcbcbc}.suis-chart__content__item--dark{background-color:#000}.suis-chart__content__item__value{position:absolute;top:-1rem;text-align:center;width:100%;font-size:.75rem;color:#a4a7b0}.suis-chart__labels__item{margin-top:.25rem;font-size:.75rem;color:#a4a7b0;text-align:center}\n"] }]
+        }], propDecorators: { maxValue: [{
+                type: Input
+            }], labels: [{
+                type: Input
+            }], data: [{
+                type: Input
+            }], color: [{
+                type: Input
+            }], size: [{
+                type: Input
+            }], autoMax: [{
+                type: Input
+            }], compareData: [{
+                type: Input
+            }], compareColor: [{
+                type: Input
+            }] } });
+
 class SuisChipComponent {
     constructor() {
         /**
@@ -1877,8 +2003,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
             }] } });
 
 class SuisProgressBarPipe {
-    transform(value) {
-        return `${(value / 100) * 100}%`;
+    transform(value, maxValue) {
+        if (value > maxValue)
+            return '100%';
+        return `${(value / maxValue) * 100}%`;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SuisProgressBarPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
     static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: SuisProgressBarPipe, isStandalone: true, name: "suisProgressBar" }); }
@@ -1893,8 +2021,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
 
 class SuisProgressBarComponent {
     constructor() {
-        /** @internal */
-        this._value = 0;
+        /**
+         * The value corresponding to the progress bar. By default set to 0.
+         */
+        this.value = 0;
+        /**
+         * Maximum value of the progress bar. By default set to 100.
+         */
+        this.maxValue = 100;
         /**
          * Sets the color of the progress bar. Type of SuisColor. By default set to 'primary'.
          */
@@ -1908,32 +2042,16 @@ class SuisProgressBarComponent {
          */
         this.size = 'md';
     }
-    /** @internal */
-    get value() {
-        return this._value;
-    }
-    /**
-     * Width of the progress bar in percentage (value >= 0 && value <= 100). By default set to 0.
-     */
-    set value(value) {
-        if (value >= 0 && value <= 100) {
-            this._value = value;
-        }
-        else if (value > 100) {
-            this._value = 100;
-        }
-        else {
-            this._value = 0;
-        }
-    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SuisProgressBarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: SuisProgressBarComponent, isStandalone: true, selector: "suis-progress-bar", inputs: { value: "value", color: "color", backgroundColor: "backgroundColor", size: "size" }, ngImport: i0, template: "<div\n  class=\"suis-progress-bar\"\n  [ngClass]=\"'suis-progress-bar' | suisNgClass : backgroundColor : size\"\n>\n  <div\n    class=\"suis-progress-bar__progress\"\n    [style]=\"{ width: value | suisProgressBar }\"\n    [ngClass]=\"'suis-progress-bar__progress' | suisNgClass : color : size\"\n  ></div>\n</div>\n", styles: ["*{margin:0;padding:0;box-sizing:border-box}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}:host{display:block}.suis-progress-bar{width:100%}.suis-progress-bar,.suis-progress-bar__progress{border-radius:1rem}.suis-progress-bar--primary,.suis-progress-bar__progress--primary{background-color:#192a56}.suis-progress-bar--secondary,.suis-progress-bar__progress--secondary{background-color:#273c75}.suis-progress-bar--tertiary,.suis-progress-bar__progress--tertiary{background-color:#dcdde1}.suis-progress-bar--complementary,.suis-progress-bar__progress--complementary{background-color:#f5f6fa}.suis-progress-bar--success,.suis-progress-bar__progress--success{background-color:#2ed573}.suis-progress-bar--warning,.suis-progress-bar__progress--warning{background-color:#ffa502}.suis-progress-bar--danger,.suis-progress-bar__progress--danger{background-color:#ff4757}.suis-progress-bar--white,.suis-progress-bar__progress--white{background-color:#fff}.suis-progress-bar--gray,.suis-progress-bar__progress--gray{background-color:#bcbcbc}.suis-progress-bar--dark,.suis-progress-bar__progress--dark{background-color:#000}.suis-progress-bar--xs,.suis-progress-bar__progress--xs{height:.375rem}.suis-progress-bar--sm,.suis-progress-bar__progress--sm{height:.5rem}.suis-progress-bar--md,.suis-progress-bar__progress--md{height:.625rem}.suis-progress-bar--lg,.suis-progress-bar__progress--lg{height:.75rem}.suis-progress-bar--xl,.suis-progress-bar__progress--xl{height:1rem}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: SuisNgClassPipe, name: "suisNgClass" }, { kind: "pipe", type: SuisProgressBarPipe, name: "suisProgressBar" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: SuisProgressBarComponent, isStandalone: true, selector: "suis-progress-bar", inputs: { value: "value", maxValue: "maxValue", color: "color", backgroundColor: "backgroundColor", size: "size" }, ngImport: i0, template: "<div\n  class=\"suis-progress-bar\"\n  [ngClass]=\"'suis-progress-bar' | suisNgClass : backgroundColor : size\"\n>\n  <div\n    class=\"suis-progress-bar__progress\"\n    [style]=\"{ width: value | suisProgressBar : maxValue }\"\n    [ngClass]=\"'suis-progress-bar__progress' | suisNgClass : color : size\"\n  ></div>\n</div>\n", styles: ["*{margin:0;padding:0;box-sizing:border-box}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}:host{display:block}.suis-progress-bar{width:100%}.suis-progress-bar,.suis-progress-bar__progress{border-radius:1rem}.suis-progress-bar--primary,.suis-progress-bar__progress--primary{background-color:#192a56}.suis-progress-bar--secondary,.suis-progress-bar__progress--secondary{background-color:#273c75}.suis-progress-bar--tertiary,.suis-progress-bar__progress--tertiary{background-color:#dcdde1}.suis-progress-bar--complementary,.suis-progress-bar__progress--complementary{background-color:#f5f6fa}.suis-progress-bar--success,.suis-progress-bar__progress--success{background-color:#2ed573}.suis-progress-bar--warning,.suis-progress-bar__progress--warning{background-color:#ffa502}.suis-progress-bar--danger,.suis-progress-bar__progress--danger{background-color:#ff4757}.suis-progress-bar--white,.suis-progress-bar__progress--white{background-color:#fff}.suis-progress-bar--gray,.suis-progress-bar__progress--gray{background-color:#bcbcbc}.suis-progress-bar--dark,.suis-progress-bar__progress--dark{background-color:#000}.suis-progress-bar--xs,.suis-progress-bar__progress--xs{height:.375rem}.suis-progress-bar--sm,.suis-progress-bar__progress--sm{height:.5rem}.suis-progress-bar--md,.suis-progress-bar__progress--md{height:.625rem}.suis-progress-bar--lg,.suis-progress-bar__progress--lg{height:.75rem}.suis-progress-bar--xl,.suis-progress-bar__progress--xl{height:1rem}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: SuisNgClassPipe, name: "suisNgClass" }, { kind: "pipe", type: SuisProgressBarPipe, name: "suisProgressBar" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SuisProgressBarComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'suis-progress-bar', standalone: true, imports: [NgClass, SuisNgClassPipe, SuisProgressBarPipe], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n  class=\"suis-progress-bar\"\n  [ngClass]=\"'suis-progress-bar' | suisNgClass : backgroundColor : size\"\n>\n  <div\n    class=\"suis-progress-bar__progress\"\n    [style]=\"{ width: value | suisProgressBar }\"\n    [ngClass]=\"'suis-progress-bar__progress' | suisNgClass : color : size\"\n  ></div>\n</div>\n", styles: ["*{margin:0;padding:0;box-sizing:border-box}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}:host{display:block}.suis-progress-bar{width:100%}.suis-progress-bar,.suis-progress-bar__progress{border-radius:1rem}.suis-progress-bar--primary,.suis-progress-bar__progress--primary{background-color:#192a56}.suis-progress-bar--secondary,.suis-progress-bar__progress--secondary{background-color:#273c75}.suis-progress-bar--tertiary,.suis-progress-bar__progress--tertiary{background-color:#dcdde1}.suis-progress-bar--complementary,.suis-progress-bar__progress--complementary{background-color:#f5f6fa}.suis-progress-bar--success,.suis-progress-bar__progress--success{background-color:#2ed573}.suis-progress-bar--warning,.suis-progress-bar__progress--warning{background-color:#ffa502}.suis-progress-bar--danger,.suis-progress-bar__progress--danger{background-color:#ff4757}.suis-progress-bar--white,.suis-progress-bar__progress--white{background-color:#fff}.suis-progress-bar--gray,.suis-progress-bar__progress--gray{background-color:#bcbcbc}.suis-progress-bar--dark,.suis-progress-bar__progress--dark{background-color:#000}.suis-progress-bar--xs,.suis-progress-bar__progress--xs{height:.375rem}.suis-progress-bar--sm,.suis-progress-bar__progress--sm{height:.5rem}.suis-progress-bar--md,.suis-progress-bar__progress--md{height:.625rem}.suis-progress-bar--lg,.suis-progress-bar__progress--lg{height:.75rem}.suis-progress-bar--xl,.suis-progress-bar__progress--xl{height:1rem}\n"] }]
+            args: [{ selector: 'suis-progress-bar', standalone: true, imports: [NgClass, SuisNgClassPipe, SuisProgressBarPipe], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n  class=\"suis-progress-bar\"\n  [ngClass]=\"'suis-progress-bar' | suisNgClass : backgroundColor : size\"\n>\n  <div\n    class=\"suis-progress-bar__progress\"\n    [style]=\"{ width: value | suisProgressBar : maxValue }\"\n    [ngClass]=\"'suis-progress-bar__progress' | suisNgClass : color : size\"\n  ></div>\n</div>\n", styles: ["*{margin:0;padding:0;box-sizing:border-box}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}:host{display:block}.suis-progress-bar{width:100%}.suis-progress-bar,.suis-progress-bar__progress{border-radius:1rem}.suis-progress-bar--primary,.suis-progress-bar__progress--primary{background-color:#192a56}.suis-progress-bar--secondary,.suis-progress-bar__progress--secondary{background-color:#273c75}.suis-progress-bar--tertiary,.suis-progress-bar__progress--tertiary{background-color:#dcdde1}.suis-progress-bar--complementary,.suis-progress-bar__progress--complementary{background-color:#f5f6fa}.suis-progress-bar--success,.suis-progress-bar__progress--success{background-color:#2ed573}.suis-progress-bar--warning,.suis-progress-bar__progress--warning{background-color:#ffa502}.suis-progress-bar--danger,.suis-progress-bar__progress--danger{background-color:#ff4757}.suis-progress-bar--white,.suis-progress-bar__progress--white{background-color:#fff}.suis-progress-bar--gray,.suis-progress-bar__progress--gray{background-color:#bcbcbc}.suis-progress-bar--dark,.suis-progress-bar__progress--dark{background-color:#000}.suis-progress-bar--xs,.suis-progress-bar__progress--xs{height:.375rem}.suis-progress-bar--sm,.suis-progress-bar__progress--sm{height:.5rem}.suis-progress-bar--md,.suis-progress-bar__progress--md{height:.625rem}.suis-progress-bar--lg,.suis-progress-bar__progress--lg{height:.75rem}.suis-progress-bar--xl,.suis-progress-bar__progress--xl{height:1rem}\n"] }]
         }], propDecorators: { value: [{
                 type: Input
+            }], maxValue: [{
+                type: Input
             }], color: [{
                 type: Input
             }], backgroundColor: [{
@@ -2349,5 +2467,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { SuisAccordionComponent, SuisAlertComponent, SuisBoxComponent, SuisBreadcrumbsComponent, SuisButtonComponent, SuisButtonLinkComponent, SuisButtonOutlinedComponent, SuisChipComponent, SuisContainerComponent, SuisDialogComponent, SuisDialogContainerComponent, SuisDialogService, SuisDividerComponent, SuisFormFieldComponent, SuisIconComponent, SuisInputCheckboxComponent, SuisInputChipsComponent, SuisInputComponent, SuisInputImageComponent, SuisInputNumberComponent, SuisInputRadioComponent, SuisItemComponent, SuisLabelComponent, SuisNavigationComponent, SuisNavigationGroupComponent, SuisNavigationGroupItemComponent, SuisNavigationItemComponent, SuisNavigationItemDirective, SuisNavigationModule, SuisNgClassPipe, SuisNotificationComponent, SuisNotificationService, SuisNotificationsComponent, SuisPaginationComponent, SuisProgressBarComponent, SuisSelectComponent, SuisSelectModule, SuisSelectMultiComponent, SuisSelectOptionComponent, SuisSelectOptionDirective, SuisSpinnerComponent, SuisSpinnerContainerComponent, SuisTabDirective, SuisTableCellDirective, SuisTableColumnDirective, SuisTableComponent, SuisTableModule, SuisTabsComponent, SuisTabsModule, SuisTextAreaComponent, SuisTitle, SuisTitleComponent, SuisToggleComponent, SuisToolbarComponent };
+export { SuisAccordionComponent, SuisAlertComponent, SuisBoxComponent, SuisBreadcrumbsComponent, SuisButtonComponent, SuisButtonLinkComponent, SuisButtonOutlinedComponent, SuisChartComponent, SuisChipComponent, SuisContainerComponent, SuisDialogComponent, SuisDialogContainerComponent, SuisDialogService, SuisDividerComponent, SuisFormFieldComponent, SuisIconComponent, SuisInputCheckboxComponent, SuisInputChipsComponent, SuisInputComponent, SuisInputImageComponent, SuisInputNumberComponent, SuisInputRadioComponent, SuisItemComponent, SuisLabelComponent, SuisNavigationComponent, SuisNavigationGroupComponent, SuisNavigationGroupItemComponent, SuisNavigationItemComponent, SuisNavigationItemDirective, SuisNavigationModule, SuisNgClassPipe, SuisNotificationComponent, SuisNotificationService, SuisNotificationsComponent, SuisPaginationComponent, SuisProgressBarComponent, SuisSelectComponent, SuisSelectModule, SuisSelectMultiComponent, SuisSelectOptionComponent, SuisSelectOptionDirective, SuisSpinnerComponent, SuisSpinnerContainerComponent, SuisTabDirective, SuisTableCellDirective, SuisTableColumnDirective, SuisTableComponent, SuisTableModule, SuisTabsComponent, SuisTabsModule, SuisTextAreaComponent, SuisTitle, SuisTitleComponent, SuisToggleComponent, SuisToolbarComponent };
 //# sourceMappingURL=suis.mjs.map