suis 1.1.0 → 1.2.1

package/esm2022/lib/components/suis-box/suis-box.component.mjs

@@ -8,11 +8,11 @@ export class SuisBoxComponent {
         this.spacing = false;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SuisBoxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: SuisBoxComponent, isStandalone: true, selector: "suis-box", inputs: { spacing: "spacing" }, ngImport: i0, template: "<div class=\"suis-box\" [class.suis-box--spacing]=\"spacing\">\n  <ng-content></ng-content>\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-box{background-color:#fff;border:.0625rem solid #dcdde1;border-radius:.25rem}.suis-box--spacing{padding:1rem}@media (min-width: 768px){.suis-box--spacing{padding:1.25rem}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: SuisBoxComponent, isStandalone: true, selector: "suis-box", inputs: { spacing: "spacing" }, ngImport: i0, template: "<div class=\"suis-box\" [class.suis-box--spacing]=\"spacing\">\n  <ng-content></ng-content>\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-box{background-color:#fff;border:.0625rem solid #dcdde1;border-radius:.25rem;height:100%}.suis-box--spacing{padding:1rem}@media (min-width: 768px){.suis-box--spacing{padding:1.25rem}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SuisBoxComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'suis-box', standalone: true, imports: [], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"suis-box\" [class.suis-box--spacing]=\"spacing\">\n  <ng-content></ng-content>\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-box{background-color:#fff;border:.0625rem solid #dcdde1;border-radius:.25rem}.suis-box--spacing{padding:1rem}@media (min-width: 768px){.suis-box--spacing{padding:1.25rem}}\n"] }]
+            args: [{ selector: 'suis-box', standalone: true, imports: [], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"suis-box\" [class.suis-box--spacing]=\"spacing\">\n  <ng-content></ng-content>\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-box{background-color:#fff;border:.0625rem solid #dcdde1;border-radius:.25rem;height:100%}.suis-box--spacing{padding:1rem}@media (min-width: 768px){.suis-box--spacing{padding:1.25rem}}\n"] }]
         }], propDecorators: { spacing: [{
                 type: Input
             }] } });

package/esm2022/lib/components/suis-navigation/suis-navigation.component.mjs

@@ -40,11 +40,11 @@ export class SuisNavigationComponent {
         return `${groupItem.label}-${index}`;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SuisNavigationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: SuisNavigationComponent, isStandalone: true, selector: "suis-navigation", inputs: { items: "items", expandedGroups: "expandedGroups", expandable: "expandable", collapsable: "collapsable", collapsed: "collapsed", collaspedChange: "collaspedChange" }, queries: [{ propertyName: "suisNavigationItem", first: true, predicate: SuisNavigationItemDirective, descendants: true }], ngImport: i0, template: "<div\n  class=\"suis-navigation\"\n  [class.suis-navigation--collapsed]=\"collapsable && collapsed\"\n>\n  <div class=\"suis-navigation__actions\">\n    <button *ngIf=\"collapsable\" type=\"button\" (click)=\"onToggle()\">\n      <suis-icon\n        [type]=\"collapsed ? 'arrow-right' : 'arrow-left'\"\n        color=\"white\"\n        size=\"lg\"\n      ></suis-icon>\n    </button>\n  </div>\n  <div class=\"suis-navigation__groups\">\n    <ng-container *ngIf=\"!collapsed\">\n      <suis-navigation-group\n        *ngFor=\"let groupItem of items; trackBy: groupItemTrackBy\"\n        [item]=\"groupItem\"\n        [templateRef]=\"suisNavigationItem?.templateRef\"\n        [expanded]=\"expandedGroups\"\n        [expandable]=\"expandable\"\n      ></suis-navigation-group>\n    </ng-container>\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-navigation{width:100%;min-width:16rem;max-width:16rem;background-color:#192a56;color:#fff;height:100%;min-height:100vh;padding:1rem;display:flex;flex-direction:column}.suis-navigation--collapsed{min-width:3.25rem;max-width:3.25rem}.suis-navigation__groups{overflow-y:auto}.suis-navigation__actions{display:flex;justify-content:flex-end}.suis-navigation__actions button{margin-bottom:1.5rem;background-color:transparent;border-radius:.25rem;border:0}.suis-navigation__actions button:hover{cursor:pointer}\n"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: SuisNavigationGroupComponent, selector: "suis-navigation-group", inputs: ["item", "templateRef", "expanded", "expandable"] }, { kind: "component", type: SuisIconComponent, selector: "suis-icon", inputs: ["size", "color", "type", "outlined", "filled", "pointer", "bold"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: SuisNavigationComponent, isStandalone: true, selector: "suis-navigation", inputs: { items: "items", expandedGroups: "expandedGroups", expandable: "expandable", collapsable: "collapsable", collapsed: "collapsed", collaspedChange: "collaspedChange" }, queries: [{ propertyName: "suisNavigationItem", first: true, predicate: SuisNavigationItemDirective, descendants: true }], ngImport: i0, template: "<div\n  class=\"suis-navigation\"\n  [class.suis-navigation--collapsed]=\"collapsable && collapsed\"\n>\n  <div class=\"suis-navigation__actions\">\n    <button *ngIf=\"collapsable\" type=\"button\" (click)=\"onToggle()\">\n      <suis-icon\n        [type]=\"collapsed ? 'arrow-right' : 'arrow-left'\"\n        color=\"white\"\n        size=\"xl\"\n      ></suis-icon>\n    </button>\n  </div>\n  <div class=\"suis-navigation__groups\">\n    <ng-container *ngIf=\"!collapsed\">\n      <suis-navigation-group\n        *ngFor=\"let groupItem of items; trackBy: groupItemTrackBy\"\n        [item]=\"groupItem\"\n        [templateRef]=\"suisNavigationItem?.templateRef\"\n        [expanded]=\"expandedGroups\"\n        [expandable]=\"expandable\"\n      ></suis-navigation-group>\n    </ng-container>\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-navigation{width:100%;min-width:16rem;max-width:16rem;background-color:#192a56;color:#fff;height:100%;min-height:100vh;padding:1rem;display:flex;flex-direction:column}.suis-navigation--collapsed{min-width:4rem;max-width:4rem}.suis-navigation__groups{overflow-y:auto}.suis-navigation__actions{display:flex;justify-content:flex-end}.suis-navigation__actions button{margin-bottom:.75rem;background-color:transparent;border-radius:.25rem;border:0}.suis-navigation__actions button:hover{cursor:pointer}\n"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: SuisNavigationGroupComponent, selector: "suis-navigation-group", inputs: ["item", "templateRef", "expanded", "expandable"] }, { kind: "component", type: SuisIconComponent, selector: "suis-icon", inputs: ["size", "color", "type", "outlined", "filled", "pointer", "bold"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SuisNavigationComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'suis-navigation', standalone: true, imports: [NgIf, NgFor, SuisNavigationGroupComponent, SuisIconComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n  class=\"suis-navigation\"\n  [class.suis-navigation--collapsed]=\"collapsable && collapsed\"\n>\n  <div class=\"suis-navigation__actions\">\n    <button *ngIf=\"collapsable\" type=\"button\" (click)=\"onToggle()\">\n      <suis-icon\n        [type]=\"collapsed ? 'arrow-right' : 'arrow-left'\"\n        color=\"white\"\n        size=\"lg\"\n      ></suis-icon>\n    </button>\n  </div>\n  <div class=\"suis-navigation__groups\">\n    <ng-container *ngIf=\"!collapsed\">\n      <suis-navigation-group\n        *ngFor=\"let groupItem of items; trackBy: groupItemTrackBy\"\n        [item]=\"groupItem\"\n        [templateRef]=\"suisNavigationItem?.templateRef\"\n        [expanded]=\"expandedGroups\"\n        [expandable]=\"expandable\"\n      ></suis-navigation-group>\n    </ng-container>\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-navigation{width:100%;min-width:16rem;max-width:16rem;background-color:#192a56;color:#fff;height:100%;min-height:100vh;padding:1rem;display:flex;flex-direction:column}.suis-navigation--collapsed{min-width:3.25rem;max-width:3.25rem}.suis-navigation__groups{overflow-y:auto}.suis-navigation__actions{display:flex;justify-content:flex-end}.suis-navigation__actions button{margin-bottom:1.5rem;background-color:transparent;border-radius:.25rem;border:0}.suis-navigation__actions button:hover{cursor:pointer}\n"] }]
+            args: [{ selector: 'suis-navigation', standalone: true, imports: [NgIf, NgFor, SuisNavigationGroupComponent, SuisIconComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n  class=\"suis-navigation\"\n  [class.suis-navigation--collapsed]=\"collapsable && collapsed\"\n>\n  <div class=\"suis-navigation__actions\">\n    <button *ngIf=\"collapsable\" type=\"button\" (click)=\"onToggle()\">\n      <suis-icon\n        [type]=\"collapsed ? 'arrow-right' : 'arrow-left'\"\n        color=\"white\"\n        size=\"xl\"\n      ></suis-icon>\n    </button>\n  </div>\n  <div class=\"suis-navigation__groups\">\n    <ng-container *ngIf=\"!collapsed\">\n      <suis-navigation-group\n        *ngFor=\"let groupItem of items; trackBy: groupItemTrackBy\"\n        [item]=\"groupItem\"\n        [templateRef]=\"suisNavigationItem?.templateRef\"\n        [expanded]=\"expandedGroups\"\n        [expandable]=\"expandable\"\n      ></suis-navigation-group>\n    </ng-container>\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-navigation{width:100%;min-width:16rem;max-width:16rem;background-color:#192a56;color:#fff;height:100%;min-height:100vh;padding:1rem;display:flex;flex-direction:column}.suis-navigation--collapsed{min-width:4rem;max-width:4rem}.suis-navigation__groups{overflow-y:auto}.suis-navigation__actions{display:flex;justify-content:flex-end}.suis-navigation__actions button{margin-bottom:.75rem;background-color:transparent;border-radius:.25rem;border:0}.suis-navigation__actions button:hover{cursor:pointer}\n"] }]
         }], propDecorators: { suisNavigationItem: [{
                 type: ContentChild,
                 args: [SuisNavigationItemDirective]
@@ -61,4 +61,4 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
             }], collaspedChange: [{
                 type: Input
             }] } });
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic3Vpcy1uYXZpZ2F0aW9uLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uLy4uL2xpYnMvc3Vpcy9zcmMvbGliL2NvbXBvbmVudHMvc3Vpcy1uYXZpZ2F0aW9uL3N1aXMtbmF2aWdhdGlvbi5jb21wb25lbnQudHMiLCIuLi8uLi8uLi8uLi8uLi8uLi8uLi9saWJzL3N1aXMvc3JjL2xpYi9jb21wb25lbnRzL3N1aXMtbmF2aWdhdGlvbi9zdWlzLW5hdmlnYXRpb24uY29tcG9uZW50Lmh0bWwiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUNMLHVCQUF1QixFQUN2QixTQUFTLEVBQ1QsWUFBWSxFQUNaLFlBQVksRUFDWixLQUFLLEdBQ04sTUFBTSxlQUFlLENBQUM7QUFDdkIsT0FBTyxFQUFFLEtBQUssRUFBRSxJQUFJLEVBQUUsTUFBTSxpQkFBaUIsQ0FBQztBQUU5QyxPQUFPLEVBQUUsMkJBQTJCLEVBQUUsTUFBTSx5QkFBeUIsQ0FBQztBQUN0RSxPQUFPLEVBQUUsNEJBQTRCLEVBQUUsTUFBTSwwQkFBMEIsQ0FBQztBQUN4RSxPQUFPLEVBQUUsaUJBQWlCLEVBQUUsTUFBTSxrQ0FBa0MsQ0FBQzs7QUFVckUsTUFBTSxPQUFPLHVCQUF1QjtJQVJwQztRQWFFOztXQUVHO1FBQ00sVUFBSyxHQUE4QixFQUFFLENBQUM7UUFFL0M7O1dBRUc7UUFDTSxtQkFBYyxHQUFZLElBQUksQ0FBQztRQUV4Qzs7V0FFRztRQUNNLGVBQVUsR0FBWSxLQUFLLENBQUM7UUFFckM7O1dBRUc7UUFDTSxnQkFBVyxHQUFZLEtBQUssQ0FBQztRQUV0Qzs7V0FFRztRQUNNLGNBQVMsR0FBWSxLQUFLLENBQUM7UUFFcEM7O1dBRUc7UUFDTSxvQkFBZSxHQUFHLElBQUksWUFBWSxFQUFXLENBQUM7S0FXeEQ7SUFUQyxRQUFRO1FBQ04sSUFBSSxDQUFDLFNBQVMsR0FBRyxDQUFDLElBQUksQ0FBQyxTQUFTLENBQUM7UUFDakMsSUFBSSxDQUFDLGVBQWUsQ0FBQyxJQUFJLENBQUMsSUFBSSxDQUFDLFNBQVMsQ0FBQyxDQUFDO0lBQzVDLENBQUM7SUFFRCxnQkFBZ0I7SUFDaEIsZ0JBQWdCLENBQUMsS0FBYSxFQUFFLFNBQWtDO1FBQ2hFLE9BQU8sR0FBRyxTQUFTLENBQUMsS0FBSyxJQUFJLEtBQUssRUFBRSxDQUFDO0lBQ3ZDLENBQUM7K0dBM0NVLHVCQUF1QjttR0FBdkIsdUJBQXVCLDJTQUVwQiwyQkFBMkIsZ0RDdkIzQyxrekJBeUJBLHdzQkRUWSxJQUFJLDZGQUFFLEtBQUssbUhBQUUsNEJBQTRCLDZIQUFFLGlCQUFpQjs7NEZBSzNELHVCQUF1QjtrQkFSbkMsU0FBUzsrQkFDRSxpQkFBaUIsY0FDZixJQUFJLFdBQ1AsQ0FBQyxJQUFJLEVBQUUsS0FBSyxFQUFFLDRCQUE0QixFQUFFLGlCQUFpQixDQUFDLG1CQUd0RCx1QkFBdUIsQ0FBQyxNQUFNOzhCQUsvQyxrQkFBa0I7c0JBRGpCLFlBQVk7dUJBQUMsMkJBQTJCO2dCQU1oQyxLQUFLO3NCQUFiLEtBQUs7Z0JBS0csY0FBYztzQkFBdEIsS0FBSztnQkFLRyxVQUFVO3NCQUFsQixLQUFLO2dCQUtHLFdBQVc7c0JBQW5CLEtBQUs7Z0JBS0csU0FBUztzQkFBakIsS0FBSztnQkFLRyxlQUFlO3NCQUF2QixLQUFLIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHtcbiAgQ2hhbmdlRGV0ZWN0aW9uU3RyYXRlZ3ksXG4gIENvbXBvbmVudCxcbiAgQ29udGVudENoaWxkLFxuICBFdmVudEVtaXR0ZXIsXG4gIElucHV0LFxufSBmcm9tICdAYW5ndWxhci9jb3JlJztcbmltcG9ydCB7IE5nRm9yLCBOZ0lmIH0gZnJvbSAnQGFuZ3VsYXIvY29tbW9uJztcbmltcG9ydCB7IFN1aXNOYXZpZ2F0aW9uR3JvdXBJdGVtIH0gZnJvbSAnLi4vc3Vpcy1uYXZpZ2F0aW9uLWl0ZW0vc3Vpcy1uYXZpZ2F0aW9uLWl0ZW0uaW50ZXJmYWNlcyc7XG5pbXBvcnQgeyBTdWlzTmF2aWdhdGlvbkl0ZW1EaXJlY3RpdmUgfSBmcm9tICcuLi9zdWlzLW5hdmlnYXRpb24taXRlbSc7XG5pbXBvcnQgeyBTdWlzTmF2aWdhdGlvbkdyb3VwQ29tcG9uZW50IH0gZnJvbSAnLi4vc3Vpcy1uYXZpZ2F0aW9uLWdyb3VwJztcbmltcG9ydCB7IFN1aXNJY29uQ29tcG9uZW50IH0gZnJvbSAnLi4vc3Vpcy1pY29uL3N1aXMtaWNvbi5jb21wb25lbnQnO1xuXG5AQ29tcG9uZW50KHtcbiAgc2VsZWN0b3I6ICdzdWlzLW5hdmlnYXRpb24nLFxuICBzdGFuZGFsb25lOiB0cnVlLFxuICBpbXBvcnRzOiBbTmdJZiwgTmdGb3IsIFN1aXNOYXZpZ2F0aW9uR3JvdXBDb21wb25lbnQsIFN1aXNJY29uQ29tcG9uZW50XSxcbiAgdGVtcGxhdGVVcmw6ICcuL3N1aXMtbmF2aWdhdGlvbi5jb21wb25lbnQuaHRtbCcsXG4gIHN0eWxlVXJsczogWycuL3N1aXMtbmF2aWdhdGlvbi5jb21wb25lbnQuc2NzcyddLFxuICBjaGFuZ2VEZXRlY3Rpb246IENoYW5nZURldGVjdGlvblN0cmF0ZWd5Lk9uUHVzaCxcbn0pXG5leHBvcnQgY2xhc3MgU3Vpc05hdmlnYXRpb25Db21wb25lbnQge1xuICAvKiogQGludGVybmFsICovXG4gIEBDb250ZW50Q2hpbGQoU3Vpc05hdmlnYXRpb25JdGVtRGlyZWN0aXZlKVxuICBzdWlzTmF2aWdhdGlvbkl0ZW0/OiBTdWlzTmF2aWdhdGlvbkl0ZW1EaXJlY3RpdmU7XG5cbiAgLyoqXG4gICAqIExpc3Qgb2YgbmF2aWdhdGlvbiBpdGVtcy4gVHlwZSBvZiBTdWlzTmF2aWdhdGlvbkdyb3VwSXRlbVtdLiBCeSBkZWZhdWx0IHNldCB0byBlbXB0eSBhcnJheS5cbiAgICovXG4gIEBJbnB1dCgpIGl0ZW1zOiBTdWlzTmF2aWdhdGlvbkdyb3VwSXRlbVtdID0gW107XG5cbiAgLyoqXG4gICAqIENvbmRpdGlvbiB0byBleHBhbmQgZ3JvdXBzIGF0IHZpZXcgaW5pdGlhbGl6YXRpb24uIEJ5IGRlZmF1bHQgc2V0IHRvIHRydWUuXG4gICAqL1xuICBASW5wdXQoKSBleHBhbmRlZEdyb3VwczogYm9vbGVhbiA9IHRydWU7XG5cbiAgLyoqXG4gICAqIEFkZHMgZXhwYW5kIC8gY29sbGFwc2UgbG9naWMgdG8gZ3JvdXAgaGVhZGVyIGl0ZW1zLiBCeSBkZWZhdWx0IHNldCB0byBmYWxzZS5cbiAgICovXG4gIEBJbnB1dCgpIGV4cGFuZGFibGU6IGJvb2xlYW4gPSBmYWxzZTtcblxuICAvKipcbiAgICogQWRkcyBjb2xsYXBzZSAvIGV4cGFuZCBsb2dpYyB0byBuYXZpZ2lhdG9uLiBCeSBkZWZhdWx0IHNldCB0byBmYWxzZS5cbiAgICovXG4gIEBJbnB1dCgpIGNvbGxhcHNhYmxlOiBib29sZWFuID0gZmFsc2U7XG5cbiAgLyoqXG4gICAqIENvbGxhcHNlcyB0aGUgbmF2aWdpYXRpb24sIHdoZW4gY29sbGFwc2FibGUgaXMgZW5hYmxlZC4gQnkgZGVmYXVsdCBzZXQgdG8gZmFsc2UuXG4gICAqL1xuICBASW5wdXQoKSBjb2xsYXBzZWQ6IGJvb2xlYW4gPSBmYWxzZTtcblxuICAvKipcbiAgICogRW1pdHMgb24gY29sbGFwc2VkIHZhbHVlIGNoYW5nZWQuXG4gICAqL1xuICBASW5wdXQoKSBjb2xsYXNwZWRDaGFuZ2UgPSBuZXcgRXZlbnRFbWl0dGVyPGJvb2xlYW4+KCk7XG5cbiAgb25Ub2dnbGUoKTogdm9pZCB7XG4gICAgdGhpcy5jb2xsYXBzZWQgPSAhdGhpcy5jb2xsYXBzZWQ7XG4gICAgdGhpcy5jb2xsYXNwZWRDaGFuZ2UuZW1pdCh0aGlzLmNvbGxhcHNlZCk7XG4gIH1cblxuICAvKiogQGludGVybmFsICovXG4gIGdyb3VwSXRlbVRyYWNrQnkoaW5kZXg6IG51bWJlciwgZ3JvdXBJdGVtOiBTdWlzTmF2aWdhdGlvbkdyb3VwSXRlbSk6IHN0cmluZyB7XG4gICAgcmV0dXJuIGAke2dyb3VwSXRlbS5sYWJlbH0tJHtpbmRleH1gO1xuICB9XG59XG4iLCI8ZGl2XG4gIGNsYXNzPVwic3Vpcy1uYXZpZ2F0aW9uXCJcbiAgW2NsYXNzLnN1aXMtbmF2aWdhdGlvbi0tY29sbGFwc2VkXT1cImNvbGxhcHNhYmxlICYmIGNvbGxhcHNlZFwiXG4+XG4gIDxkaXYgY2xhc3M9XCJzdWlzLW5hdmlnYXRpb25fX2FjdGlvbnNcIj5cbiAgICA8YnV0dG9uICpuZ0lmPVwiY29sbGFwc2FibGVcIiB0eXBlPVwiYnV0dG9uXCIgKGNsaWNrKT1cIm9uVG9nZ2xlKClcIj5cbiAgICAgIDxzdWlzLWljb25cbiAgICAgICAgW3R5cGVdPVwiY29sbGFwc2VkID8gJ2Fycm93LXJpZ2h0JyA6ICdhcnJvdy1sZWZ0J1wiXG4gICAgICAgIGNvbG9yPVwid2hpdGVcIlxuICAgICAgICBzaXplPVwibGdcIlxuICAgICAgPjwvc3Vpcy1pY29uPlxuICAgIDwvYnV0dG9uPlxuICA8L2Rpdj5cbiAgPGRpdiBjbGFzcz1cInN1aXMtbmF2aWdhdGlvbl9fZ3JvdXBzXCI+XG4gICAgPG5nLWNvbnRhaW5lciAqbmdJZj1cIiFjb2xsYXBzZWRcIj5cbiAgICAgIDxzdWlzLW5hdmlnYXRpb24tZ3JvdXBcbiAgICAgICAgKm5nRm9yPVwibGV0IGdyb3VwSXRlbSBvZiBpdGVtczsgdHJhY2tCeTogZ3JvdXBJdGVtVHJhY2tCeVwiXG4gICAgICAgIFtpdGVtXT1cImdyb3VwSXRlbVwiXG4gICAgICAgIFt0ZW1wbGF0ZVJlZl09XCJzdWlzTmF2aWdhdGlvbkl0ZW0/LnRlbXBsYXRlUmVmXCJcbiAgICAgICAgW2V4cGFuZGVkXT1cImV4cGFuZGVkR3JvdXBzXCJcbiAgICAgICAgW2V4cGFuZGFibGVdPVwiZXhwYW5kYWJsZVwiXG4gICAgICA+PC9zdWlzLW5hdmlnYXRpb24tZ3JvdXA+XG4gICAgPC9uZy1jb250YWluZXI+XG4gIDwvZGl2PlxuPC9kaXY+XG4iXX0=
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic3Vpcy1uYXZpZ2F0aW9uLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uLy4uL2xpYnMvc3Vpcy9zcmMvbGliL2NvbXBvbmVudHMvc3Vpcy1uYXZpZ2F0aW9uL3N1aXMtbmF2aWdhdGlvbi5jb21wb25lbnQudHMiLCIuLi8uLi8uLi8uLi8uLi8uLi8uLi9saWJzL3N1aXMvc3JjL2xpYi9jb21wb25lbnRzL3N1aXMtbmF2aWdhdGlvbi9zdWlzLW5hdmlnYXRpb24uY29tcG9uZW50Lmh0bWwiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUNMLHVCQUF1QixFQUN2QixTQUFTLEVBQ1QsWUFBWSxFQUNaLFlBQVksRUFDWixLQUFLLEdBQ04sTUFBTSxlQUFlLENBQUM7QUFDdkIsT0FBTyxFQUFFLEtBQUssRUFBRSxJQUFJLEVBQUUsTUFBTSxpQkFBaUIsQ0FBQztBQUU5QyxPQUFPLEVBQUUsMkJBQTJCLEVBQUUsTUFBTSx5QkFBeUIsQ0FBQztBQUN0RSxPQUFPLEVBQUUsNEJBQTRCLEVBQUUsTUFBTSwwQkFBMEIsQ0FBQztBQUN4RSxPQUFPLEVBQUUsaUJBQWlCLEVBQUUsTUFBTSxrQ0FBa0MsQ0FBQzs7QUFVckUsTUFBTSxPQUFPLHVCQUF1QjtJQVJwQztRQWFFOztXQUVHO1FBQ00sVUFBSyxHQUE4QixFQUFFLENBQUM7UUFFL0M7O1dBRUc7UUFDTSxtQkFBYyxHQUFZLElBQUksQ0FBQztRQUV4Qzs7V0FFRztRQUNNLGVBQVUsR0FBWSxLQUFLLENBQUM7UUFFckM7O1dBRUc7UUFDTSxnQkFBVyxHQUFZLEtBQUssQ0FBQztRQUV0Qzs7V0FFRztRQUNNLGNBQVMsR0FBWSxLQUFLLENBQUM7UUFFcEM7O1dBRUc7UUFDTSxvQkFBZSxHQUFHLElBQUksWUFBWSxFQUFXLENBQUM7S0FXeEQ7SUFUQyxRQUFRO1FBQ04sSUFBSSxDQUFDLFNBQVMsR0FBRyxDQUFDLElBQUksQ0FBQyxTQUFTLENBQUM7UUFDakMsSUFBSSxDQUFDLGVBQWUsQ0FBQyxJQUFJLENBQUMsSUFBSSxDQUFDLFNBQVMsQ0FBQyxDQUFDO0lBQzVDLENBQUM7SUFFRCxnQkFBZ0I7SUFDaEIsZ0JBQWdCLENBQUMsS0FBYSxFQUFFLFNBQWtDO1FBQ2hFLE9BQU8sR0FBRyxTQUFTLENBQUMsS0FBSyxJQUFJLEtBQUssRUFBRSxDQUFDO0lBQ3ZDLENBQUM7K0dBM0NVLHVCQUF1QjttR0FBdkIsdUJBQXVCLDJTQUVwQiwyQkFBMkIsZ0RDdkIzQyxrekJBeUJBLGtzQkRUWSxJQUFJLDZGQUFFLEtBQUssbUhBQUUsNEJBQTRCLDZIQUFFLGlCQUFpQjs7NEZBSzNELHVCQUF1QjtrQkFSbkMsU0FBUzsrQkFDRSxpQkFBaUIsY0FDZixJQUFJLFdBQ1AsQ0FBQyxJQUFJLEVBQUUsS0FBSyxFQUFFLDRCQUE0QixFQUFFLGlCQUFpQixDQUFDLG1CQUd0RCx1QkFBdUIsQ0FBQyxNQUFNOzhCQUsvQyxrQkFBa0I7c0JBRGpCLFlBQVk7dUJBQUMsMkJBQTJCO2dCQU1oQyxLQUFLO3NCQUFiLEtBQUs7Z0JBS0csY0FBYztzQkFBdEIsS0FBSztnQkFLRyxVQUFVO3NCQUFsQixLQUFLO2dCQUtHLFdBQVc7c0JBQW5CLEtBQUs7Z0JBS0csU0FBUztzQkFBakIsS0FBSztnQkFLRyxlQUFlO3NCQUF2QixLQUFLIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHtcbiAgQ2hhbmdlRGV0ZWN0aW9uU3RyYXRlZ3ksXG4gIENvbXBvbmVudCxcbiAgQ29udGVudENoaWxkLFxuICBFdmVudEVtaXR0ZXIsXG4gIElucHV0LFxufSBmcm9tICdAYW5ndWxhci9jb3JlJztcbmltcG9ydCB7IE5nRm9yLCBOZ0lmIH0gZnJvbSAnQGFuZ3VsYXIvY29tbW9uJztcbmltcG9ydCB7IFN1aXNOYXZpZ2F0aW9uR3JvdXBJdGVtIH0gZnJvbSAnLi4vc3Vpcy1uYXZpZ2F0aW9uLWl0ZW0vc3Vpcy1uYXZpZ2F0aW9uLWl0ZW0uaW50ZXJmYWNlcyc7XG5pbXBvcnQgeyBTdWlzTmF2aWdhdGlvbkl0ZW1EaXJlY3RpdmUgfSBmcm9tICcuLi9zdWlzLW5hdmlnYXRpb24taXRlbSc7XG5pbXBvcnQgeyBTdWlzTmF2aWdhdGlvbkdyb3VwQ29tcG9uZW50IH0gZnJvbSAnLi4vc3Vpcy1uYXZpZ2F0aW9uLWdyb3VwJztcbmltcG9ydCB7IFN1aXNJY29uQ29tcG9uZW50IH0gZnJvbSAnLi4vc3Vpcy1pY29uL3N1aXMtaWNvbi5jb21wb25lbnQnO1xuXG5AQ29tcG9uZW50KHtcbiAgc2VsZWN0b3I6ICdzdWlzLW5hdmlnYXRpb24nLFxuICBzdGFuZGFsb25lOiB0cnVlLFxuICBpbXBvcnRzOiBbTmdJZiwgTmdGb3IsIFN1aXNOYXZpZ2F0aW9uR3JvdXBDb21wb25lbnQsIFN1aXNJY29uQ29tcG9uZW50XSxcbiAgdGVtcGxhdGVVcmw6ICcuL3N1aXMtbmF2aWdhdGlvbi5jb21wb25lbnQuaHRtbCcsXG4gIHN0eWxlVXJsczogWycuL3N1aXMtbmF2aWdhdGlvbi5jb21wb25lbnQuc2NzcyddLFxuICBjaGFuZ2VEZXRlY3Rpb246IENoYW5nZURldGVjdGlvblN0cmF0ZWd5Lk9uUHVzaCxcbn0pXG5leHBvcnQgY2xhc3MgU3Vpc05hdmlnYXRpb25Db21wb25lbnQge1xuICAvKiogQGludGVybmFsICovXG4gIEBDb250ZW50Q2hpbGQoU3Vpc05hdmlnYXRpb25JdGVtRGlyZWN0aXZlKVxuICBzdWlzTmF2aWdhdGlvbkl0ZW0/OiBTdWlzTmF2aWdhdGlvbkl0ZW1EaXJlY3RpdmU7XG5cbiAgLyoqXG4gICAqIExpc3Qgb2YgbmF2aWdhdGlvbiBpdGVtcy4gVHlwZSBvZiBTdWlzTmF2aWdhdGlvbkdyb3VwSXRlbVtdLiBCeSBkZWZhdWx0IHNldCB0byBlbXB0eSBhcnJheS5cbiAgICovXG4gIEBJbnB1dCgpIGl0ZW1zOiBTdWlzTmF2aWdhdGlvbkdyb3VwSXRlbVtdID0gW107XG5cbiAgLyoqXG4gICAqIENvbmRpdGlvbiB0byBleHBhbmQgZ3JvdXBzIGF0IHZpZXcgaW5pdGlhbGl6YXRpb24uIEJ5IGRlZmF1bHQgc2V0IHRvIHRydWUuXG4gICAqL1xuICBASW5wdXQoKSBleHBhbmRlZEdyb3VwczogYm9vbGVhbiA9IHRydWU7XG5cbiAgLyoqXG4gICAqIEFkZHMgZXhwYW5kIC8gY29sbGFwc2UgbG9naWMgdG8gZ3JvdXAgaGVhZGVyIGl0ZW1zLiBCeSBkZWZhdWx0IHNldCB0byBmYWxzZS5cbiAgICovXG4gIEBJbnB1dCgpIGV4cGFuZGFibGU6IGJvb2xlYW4gPSBmYWxzZTtcblxuICAvKipcbiAgICogQWRkcyBjb2xsYXBzZSAvIGV4cGFuZCBsb2dpYyB0byBuYXZpZ2lhdG9uLiBCeSBkZWZhdWx0IHNldCB0byBmYWxzZS5cbiAgICovXG4gIEBJbnB1dCgpIGNvbGxhcHNhYmxlOiBib29sZWFuID0gZmFsc2U7XG5cbiAgLyoqXG4gICAqIENvbGxhcHNlcyB0aGUgbmF2aWdpYXRpb24sIHdoZW4gY29sbGFwc2FibGUgaXMgZW5hYmxlZC4gQnkgZGVmYXVsdCBzZXQgdG8gZmFsc2UuXG4gICAqL1xuICBASW5wdXQoKSBjb2xsYXBzZWQ6IGJvb2xlYW4gPSBmYWxzZTtcblxuICAvKipcbiAgICogRW1pdHMgb24gY29sbGFwc2VkIHZhbHVlIGNoYW5nZWQuXG4gICAqL1xuICBASW5wdXQoKSBjb2xsYXNwZWRDaGFuZ2UgPSBuZXcgRXZlbnRFbWl0dGVyPGJvb2xlYW4+KCk7XG5cbiAgb25Ub2dnbGUoKTogdm9pZCB7XG4gICAgdGhpcy5jb2xsYXBzZWQgPSAhdGhpcy5jb2xsYXBzZWQ7XG4gICAgdGhpcy5jb2xsYXNwZWRDaGFuZ2UuZW1pdCh0aGlzLmNvbGxhcHNlZCk7XG4gIH1cblxuICAvKiogQGludGVybmFsICovXG4gIGdyb3VwSXRlbVRyYWNrQnkoaW5kZXg6IG51bWJlciwgZ3JvdXBJdGVtOiBTdWlzTmF2aWdhdGlvbkdyb3VwSXRlbSk6IHN0cmluZyB7XG4gICAgcmV0dXJuIGAke2dyb3VwSXRlbS5sYWJlbH0tJHtpbmRleH1gO1xuICB9XG59XG4iLCI8ZGl2XG4gIGNsYXNzPVwic3Vpcy1uYXZpZ2F0aW9uXCJcbiAgW2NsYXNzLnN1aXMtbmF2aWdhdGlvbi0tY29sbGFwc2VkXT1cImNvbGxhcHNhYmxlICYmIGNvbGxhcHNlZFwiXG4+XG4gIDxkaXYgY2xhc3M9XCJzdWlzLW5hdmlnYXRpb25fX2FjdGlvbnNcIj5cbiAgICA8YnV0dG9uICpuZ0lmPVwiY29sbGFwc2FibGVcIiB0eXBlPVwiYnV0dG9uXCIgKGNsaWNrKT1cIm9uVG9nZ2xlKClcIj5cbiAgICAgIDxzdWlzLWljb25cbiAgICAgICAgW3R5cGVdPVwiY29sbGFwc2VkID8gJ2Fycm93LXJpZ2h0JyA6ICdhcnJvdy1sZWZ0J1wiXG4gICAgICAgIGNvbG9yPVwid2hpdGVcIlxuICAgICAgICBzaXplPVwieGxcIlxuICAgICAgPjwvc3Vpcy1pY29uPlxuICAgIDwvYnV0dG9uPlxuICA8L2Rpdj5cbiAgPGRpdiBjbGFzcz1cInN1aXMtbmF2aWdhdGlvbl9fZ3JvdXBzXCI+XG4gICAgPG5nLWNvbnRhaW5lciAqbmdJZj1cIiFjb2xsYXBzZWRcIj5cbiAgICAgIDxzdWlzLW5hdmlnYXRpb24tZ3JvdXBcbiAgICAgICAgKm5nRm9yPVwibGV0IGdyb3VwSXRlbSBvZiBpdGVtczsgdHJhY2tCeTogZ3JvdXBJdGVtVHJhY2tCeVwiXG4gICAgICAgIFtpdGVtXT1cImdyb3VwSXRlbVwiXG4gICAgICAgIFt0ZW1wbGF0ZVJlZl09XCJzdWlzTmF2aWdhdGlvbkl0ZW0/LnRlbXBsYXRlUmVmXCJcbiAgICAgICAgW2V4cGFuZGVkXT1cImV4cGFuZGVkR3JvdXBzXCJcbiAgICAgICAgW2V4cGFuZGFibGVdPVwiZXhwYW5kYWJsZVwiXG4gICAgICA+PC9zdWlzLW5hdmlnYXRpb24tZ3JvdXA+XG4gICAgPC9uZy1jb250YWluZXI+XG4gIDwvZGl2PlxuPC9kaXY+XG4iXX0=

package/esm2022/lib/components/suis-progress-bar/suis-progress-bar.component.mjs

@@ -5,8 +5,14 @@ import { SuisNgClassPipe } from '../../pipes';
 import * as i0 from "@angular/core";
 export 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'.
          */
@@ -20,32 +26,16 @@ export 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: [{
@@ -53,4 +43,4 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
             }], size: [{
                 type: Input
             }] } });
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic3Vpcy1wcm9ncmVzcy1iYXIuY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vLi4vLi4vbGlicy9zdWlzL3NyYy9saWIvY29tcG9uZW50cy9zdWlzLXByb2dyZXNzLWJhci9zdWlzLXByb2dyZXNzLWJhci5jb21wb25lbnQudHMiLCIuLi8uLi8uLi8uLi8uLi8uLi8uLi9saWJzL3N1aXMvc3JjL2xpYi9jb21wb25lbnRzL3N1aXMtcHJvZ3Jlc3MtYmFyL3N1aXMtcHJvZ3Jlc3MtYmFyLmNvbXBvbmVudC5odG1sIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBRSx1QkFBdUIsRUFBRSxTQUFTLEVBQUUsS0FBSyxFQUFFLE1BQU0sZUFBZSxDQUFDO0FBQzFFLE9BQU8sRUFBRSxPQUFPLEVBQUUsTUFBTSxpQkFBaUIsQ0FBQztBQUMxQyxPQUFPLEVBQUUsbUJBQW1CLEVBQUUsTUFBTSwwQkFBMEIsQ0FBQztBQUUvRCxPQUFPLEVBQUUsZUFBZSxFQUFFLE1BQU0sYUFBYSxDQUFDOztBQVU5QyxNQUFNLE9BQU8sd0JBQXdCO0lBUnJDO1FBU0UsZ0JBQWdCO1FBQ2hCLFdBQU0sR0FBVyxDQUFDLENBQUM7UUFvQm5COztXQUVHO1FBQ00sVUFBSyxHQUFjLFNBQVMsQ0FBQztRQUV0Qzs7V0FFRztRQUNNLG9CQUFlLEdBQWMsVUFBVSxDQUFDO1FBRWpEOztXQUVHO1FBQ00sU0FBSSxHQUFhLElBQUksQ0FBQztLQUNoQztJQWhDQyxnQkFBZ0I7SUFDaEIsSUFBSSxLQUFLO1FBQ1AsT0FBTyxJQUFJLENBQUMsTUFBTSxDQUFDO0lBQ3JCLENBQUM7SUFFRDs7T0FFRztJQUNILElBQWEsS0FBSyxDQUFDLEtBQWE7UUFDOUIsSUFBSSxLQUFLLElBQUksQ0FBQyxJQUFJLEtBQUssSUFBSSxHQUFHLEVBQUU7WUFDOUIsSUFBSSxDQUFDLE1BQU0sR0FBRyxLQUFLLENBQUM7U0FDckI7YUFBTSxJQUFJLEtBQUssR0FBRyxHQUFHLEVBQUU7WUFDdEIsSUFBSSxDQUFDLE1BQU0sR0FBRyxHQUFHLENBQUM7U0FDbkI7YUFBTTtZQUNMLElBQUksQ0FBQyxNQUFNLEdBQUcsQ0FBQyxDQUFDO1NBQ2pCO0lBQ0gsQ0FBQzsrR0FwQlUsd0JBQXdCO21HQUF4Qix3QkFBd0IsMktDZHJDLDhUQVVBLHFnREREWSxPQUFPLCtFQUFFLGVBQWUsK0NBQUUsbUJBQW1COzs0RkFLNUMsd0JBQXdCO2tCQVJwQyxTQUFTOytCQUNFLG1CQUFtQixjQUNqQixJQUFJLFdBQ1AsQ0FBQyxPQUFPLEVBQUUsZUFBZSxFQUFFLG1CQUFtQixDQUFDLG1CQUd2Qyx1QkFBdUIsQ0FBQyxNQUFNOzhCQWNsQyxLQUFLO3NCQUFqQixLQUFLO2dCQWFHLEtBQUs7c0JBQWIsS0FBSztnQkFLRyxlQUFlO3NCQUF2QixLQUFLO2dCQUtHLElBQUk7c0JBQVosS0FBSyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IENoYW5nZURldGVjdGlvblN0cmF0ZWd5LCBDb21wb25lbnQsIElucHV0IH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5pbXBvcnQgeyBOZ0NsYXNzIH0gZnJvbSAnQGFuZ3VsYXIvY29tbW9uJztcbmltcG9ydCB7IFN1aXNQcm9ncmVzc0JhclBpcGUgfSBmcm9tICcuL3N1aXMtcHJvZ3Jlc3MtYmFyLnBpcGUnO1xuaW1wb3J0IHsgU3Vpc0NvbG9yLCBTdWlzU2l6ZSB9IGZyb20gJy4uLy4uL3R5cGVzJztcbmltcG9ydCB7IFN1aXNOZ0NsYXNzUGlwZSB9IGZyb20gJy4uLy4uL3BpcGVzJztcblxuQENvbXBvbmVudCh7XG4gIHNlbGVjdG9yOiAnc3Vpcy1wcm9ncmVzcy1iYXInLFxuICBzdGFuZGFsb25lOiB0cnVlLFxuICBpbXBvcnRzOiBbTmdDbGFzcywgU3Vpc05nQ2xhc3NQaXBlLCBTdWlzUHJvZ3Jlc3NCYXJQaXBlXSxcbiAgdGVtcGxhdGVVcmw6ICcuL3N1aXMtcHJvZ3Jlc3MtYmFyLmNvbXBvbmVudC5odG1sJyxcbiAgc3R5bGVVcmxzOiBbJy4vc3Vpcy1wcm9ncmVzcy1iYXIuY29tcG9uZW50LnNjc3MnXSxcbiAgY2hhbmdlRGV0ZWN0aW9uOiBDaGFuZ2VEZXRlY3Rpb25TdHJhdGVneS5PblB1c2gsXG59KVxuZXhwb3J0IGNsYXNzIFN1aXNQcm9ncmVzc0JhckNvbXBvbmVudCB7XG4gIC8qKiBAaW50ZXJuYWwgKi9cbiAgX3ZhbHVlOiBudW1iZXIgPSAwO1xuXG4gIC8qKiBAaW50ZXJuYWwgKi9cbiAgZ2V0IHZhbHVlKCk6IG51bWJlciB7XG4gICAgcmV0dXJuIHRoaXMuX3ZhbHVlO1xuICB9XG5cbiAgLyoqXG4gICAqIFdpZHRoIG9mIHRoZSBwcm9ncmVzcyBiYXIgaW4gcGVyY2VudGFnZSAodmFsdWUgPj0gMCAmJiB2YWx1ZSA8PSAxMDApLiBCeSBkZWZhdWx0IHNldCB0byAwLlxuICAgKi9cbiAgQElucHV0KCkgc2V0IHZhbHVlKHZhbHVlOiBudW1iZXIpIHtcbiAgICBpZiAodmFsdWUgPj0gMCAmJiB2YWx1ZSA8PSAxMDApIHtcbiAgICAgIHRoaXMuX3ZhbHVlID0gdmFsdWU7XG4gICAgfSBlbHNlIGlmICh2YWx1ZSA+IDEwMCkge1xuICAgICAgdGhpcy5fdmFsdWUgPSAxMDA7XG4gICAgfSBlbHNlIHtcbiAgICAgIHRoaXMuX3ZhbHVlID0gMDtcbiAgICB9XG4gIH1cblxuICAvKipcbiAgICogU2V0cyB0aGUgY29sb3Igb2YgdGhlIHByb2dyZXNzIGJhci4gVHlwZSBvZiBTdWlzQ29sb3IuIEJ5IGRlZmF1bHQgc2V0IHRvICdwcmltYXJ5Jy5cbiAgICovXG4gIEBJbnB1dCgpIGNvbG9yOiBTdWlzQ29sb3IgPSAncHJpbWFyeSc7XG5cbiAgLyoqXG4gICAqIFNldHMgdGhlIGJhY2tncm91bmQgY29sb3Igb2YgdGhlIHByb2dyZXNzIGJhci4gVHlwZSBvZiBTdWlzQ29sb3IuIEJ5IGRlZmF1bHQgc2V0IHRvICd0ZXJ0aWFyeScuXG4gICAqL1xuICBASW5wdXQoKSBiYWNrZ3JvdW5kQ29sb3I6IFN1aXNDb2xvciA9ICd0ZXJ0aWFyeSc7XG5cbiAgLyoqXG4gICAqIFNldHMgdGhlIGhlaWdodCBvZiB0aGUgcHJvZ3Jlc3MgYmFyLiBUeXBlIG9mIFN1aXNTaXplLiBCeSBkZWZhdWx0IHNldCB0byAnbWQnLlxuICAgKi9cbiAgQElucHV0KCkgc2l6ZTogU3Vpc1NpemUgPSAnbWQnO1xufVxuIiwiPGRpdlxuICBjbGFzcz1cInN1aXMtcHJvZ3Jlc3MtYmFyXCJcbiAgW25nQ2xhc3NdPVwiJ3N1aXMtcHJvZ3Jlc3MtYmFyJyB8IHN1aXNOZ0NsYXNzIDogYmFja2dyb3VuZENvbG9yIDogc2l6ZVwiXG4+XG4gIDxkaXZcbiAgICBjbGFzcz1cInN1aXMtcHJvZ3Jlc3MtYmFyX19wcm9ncmVzc1wiXG4gICAgW3N0eWxlXT1cInsgd2lkdGg6IHZhbHVlIHwgc3Vpc1Byb2dyZXNzQmFyIH1cIlxuICAgIFtuZ0NsYXNzXT1cIidzdWlzLXByb2dyZXNzLWJhcl9fcHJvZ3Jlc3MnIHwgc3Vpc05nQ2xhc3MgOiBjb2xvciA6IHNpemVcIlxuICA+PC9kaXY+XG48L2Rpdj5cbiJdfQ==
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic3Vpcy1wcm9ncmVzcy1iYXIuY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vLi4vLi4vbGlicy9zdWlzL3NyYy9saWIvY29tcG9uZW50cy9zdWlzLXByb2dyZXNzLWJhci9zdWlzLXByb2dyZXNzLWJhci5jb21wb25lbnQudHMiLCIuLi8uLi8uLi8uLi8uLi8uLi8uLi9saWJzL3N1aXMvc3JjL2xpYi9jb21wb25lbnRzL3N1aXMtcHJvZ3Jlc3MtYmFyL3N1aXMtcHJvZ3Jlc3MtYmFyLmNvbXBvbmVudC5odG1sIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBRSx1QkFBdUIsRUFBRSxTQUFTLEVBQUUsS0FBSyxFQUFFLE1BQU0sZUFBZSxDQUFDO0FBQzFFLE9BQU8sRUFBRSxPQUFPLEVBQUUsTUFBTSxpQkFBaUIsQ0FBQztBQUMxQyxPQUFPLEVBQUUsbUJBQW1CLEVBQUUsTUFBTSwwQkFBMEIsQ0FBQztBQUUvRCxPQUFPLEVBQUUsZUFBZSxFQUFFLE1BQU0sYUFBYSxDQUFDOztBQVU5QyxNQUFNLE9BQU8sd0JBQXdCO0lBUnJDO1FBU0U7O1dBRUc7UUFDTSxVQUFLLEdBQVcsQ0FBQyxDQUFDO1FBRTNCOztXQUVHO1FBQ00sYUFBUSxHQUFXLEdBQUcsQ0FBQztRQUVoQzs7V0FFRztRQUNNLFVBQUssR0FBYyxTQUFTLENBQUM7UUFFdEM7O1dBRUc7UUFDTSxvQkFBZSxHQUFjLFVBQVUsQ0FBQztRQUVqRDs7V0FFRztRQUNNLFNBQUksR0FBYSxJQUFJLENBQUM7S0FDaEM7K0dBekJZLHdCQUF3QjttR0FBeEIsd0JBQXdCLGlNQ2RyQyx5VUFVQSxxZ0RERFksT0FBTywrRUFBRSxlQUFlLCtDQUFFLG1CQUFtQjs7NEZBSzVDLHdCQUF3QjtrQkFScEMsU0FBUzsrQkFDRSxtQkFBbUIsY0FDakIsSUFBSSxXQUNQLENBQUMsT0FBTyxFQUFFLGVBQWUsRUFBRSxtQkFBbUIsQ0FBQyxtQkFHdkMsdUJBQXVCLENBQUMsTUFBTTs4QkFNdEMsS0FBSztzQkFBYixLQUFLO2dCQUtHLFFBQVE7c0JBQWhCLEtBQUs7Z0JBS0csS0FBSztzQkFBYixLQUFLO2dCQUtHLGVBQWU7c0JBQXZCLEtBQUs7Z0JBS0csSUFBSTtzQkFBWixLQUFLIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgQ2hhbmdlRGV0ZWN0aW9uU3RyYXRlZ3ksIENvbXBvbmVudCwgSW5wdXQgfSBmcm9tICdAYW5ndWxhci9jb3JlJztcbmltcG9ydCB7IE5nQ2xhc3MgfSBmcm9tICdAYW5ndWxhci9jb21tb24nO1xuaW1wb3J0IHsgU3Vpc1Byb2dyZXNzQmFyUGlwZSB9IGZyb20gJy4vc3Vpcy1wcm9ncmVzcy1iYXIucGlwZSc7XG5pbXBvcnQgeyBTdWlzQ29sb3IsIFN1aXNTaXplIH0gZnJvbSAnLi4vLi4vdHlwZXMnO1xuaW1wb3J0IHsgU3Vpc05nQ2xhc3NQaXBlIH0gZnJvbSAnLi4vLi4vcGlwZXMnO1xuXG5AQ29tcG9uZW50KHtcbiAgc2VsZWN0b3I6ICdzdWlzLXByb2dyZXNzLWJhcicsXG4gIHN0YW5kYWxvbmU6IHRydWUsXG4gIGltcG9ydHM6IFtOZ0NsYXNzLCBTdWlzTmdDbGFzc1BpcGUsIFN1aXNQcm9ncmVzc0JhclBpcGVdLFxuICB0ZW1wbGF0ZVVybDogJy4vc3Vpcy1wcm9ncmVzcy1iYXIuY29tcG9uZW50Lmh0bWwnLFxuICBzdHlsZVVybHM6IFsnLi9zdWlzLXByb2dyZXNzLWJhci5jb21wb25lbnQuc2NzcyddLFxuICBjaGFuZ2VEZXRlY3Rpb246IENoYW5nZURldGVjdGlvblN0cmF0ZWd5Lk9uUHVzaCxcbn0pXG5leHBvcnQgY2xhc3MgU3Vpc1Byb2dyZXNzQmFyQ29tcG9uZW50IHtcbiAgLyoqXG4gICAqIFRoZSB2YWx1ZSBjb3JyZXNwb25kaW5nIHRvIHRoZSBwcm9ncmVzcyBiYXIuIEJ5IGRlZmF1bHQgc2V0IHRvIDAuXG4gICAqL1xuICBASW5wdXQoKSB2YWx1ZTogbnVtYmVyID0gMDtcblxuICAvKipcbiAgICogTWF4aW11bSB2YWx1ZSBvZiB0aGUgcHJvZ3Jlc3MgYmFyLiBCeSBkZWZhdWx0IHNldCB0byAxMDAuXG4gICAqL1xuICBASW5wdXQoKSBtYXhWYWx1ZTogbnVtYmVyID0gMTAwO1xuXG4gIC8qKlxuICAgKiBTZXRzIHRoZSBjb2xvciBvZiB0aGUgcHJvZ3Jlc3MgYmFyLiBUeXBlIG9mIFN1aXNDb2xvci4gQnkgZGVmYXVsdCBzZXQgdG8gJ3ByaW1hcnknLlxuICAgKi9cbiAgQElucHV0KCkgY29sb3I6IFN1aXNDb2xvciA9ICdwcmltYXJ5JztcblxuICAvKipcbiAgICogU2V0cyB0aGUgYmFja2dyb3VuZCBjb2xvciBvZiB0aGUgcHJvZ3Jlc3MgYmFyLiBUeXBlIG9mIFN1aXNDb2xvci4gQnkgZGVmYXVsdCBzZXQgdG8gJ3RlcnRpYXJ5Jy5cbiAgICovXG4gIEBJbnB1dCgpIGJhY2tncm91bmRDb2xvcjogU3Vpc0NvbG9yID0gJ3RlcnRpYXJ5JztcblxuICAvKipcbiAgICogU2V0cyB0aGUgaGVpZ2h0IG9mIHRoZSBwcm9ncmVzcyBiYXIuIFR5cGUgb2YgU3Vpc1NpemUuIEJ5IGRlZmF1bHQgc2V0IHRvICdtZCcuXG4gICAqL1xuICBASW5wdXQoKSBzaXplOiBTdWlzU2l6ZSA9ICdtZCc7XG59XG4iLCI8ZGl2XG4gIGNsYXNzPVwic3Vpcy1wcm9ncmVzcy1iYXJcIlxuICBbbmdDbGFzc109XCInc3Vpcy1wcm9ncmVzcy1iYXInIHwgc3Vpc05nQ2xhc3MgOiBiYWNrZ3JvdW5kQ29sb3IgOiBzaXplXCJcbj5cbiAgPGRpdlxuICAgIGNsYXNzPVwic3Vpcy1wcm9ncmVzcy1iYXJfX3Byb2dyZXNzXCJcbiAgICBbc3R5bGVdPVwieyB3aWR0aDogdmFsdWUgfCBzdWlzUHJvZ3Jlc3NCYXIgOiBtYXhWYWx1ZSB9XCJcbiAgICBbbmdDbGFzc109XCInc3Vpcy1wcm9ncmVzcy1iYXJfX3Byb2dyZXNzJyB8IHN1aXNOZ0NsYXNzIDogY29sb3IgOiBzaXplXCJcbiAgPjwvZGl2PlxuPC9kaXY+XG4iXX0=

package/esm2022/lib/components/suis-progress-bar/suis-progress-bar.pipe.mjs

@@ -1,8 +1,10 @@
 import { Pipe } from '@angular/core';
 import * as i0 from "@angular/core";
 export 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" }); }
@@ -14,4 +16,4 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                     name: 'suisProgressBar',
                 }]
         }] });
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic3Vpcy1wcm9ncmVzcy1iYXIucGlwZS5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uLy4uL2xpYnMvc3Vpcy9zcmMvbGliL2NvbXBvbmVudHMvc3Vpcy1wcm9ncmVzcy1iYXIvc3Vpcy1wcm9ncmVzcy1iYXIucGlwZS50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQUUsSUFBSSxFQUFpQixNQUFNLGVBQWUsQ0FBQzs7QUFNcEQsTUFBTSxPQUFPLG1CQUFtQjtJQUM5QixTQUFTLENBQUMsS0FBYTtRQUNyQixPQUFPLEdBQUcsQ0FBQyxLQUFLLEdBQUcsR0FBRyxDQUFDLEdBQUcsR0FBRyxHQUFHLENBQUM7SUFDbkMsQ0FBQzsrR0FIVSxtQkFBbUI7NkdBQW5CLG1CQUFtQjs7NEZBQW5CLG1CQUFtQjtrQkFKL0IsSUFBSTttQkFBQztvQkFDSixVQUFVLEVBQUUsSUFBSTtvQkFDaEIsSUFBSSxFQUFFLGlCQUFpQjtpQkFDeEIiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBQaXBlLCBQaXBlVHJhbnNmb3JtIH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5cbkBQaXBlKHtcbiAgc3RhbmRhbG9uZTogdHJ1ZSxcbiAgbmFtZTogJ3N1aXNQcm9ncmVzc0JhcicsXG59KVxuZXhwb3J0IGNsYXNzIFN1aXNQcm9ncmVzc0JhclBpcGUgaW1wbGVtZW50cyBQaXBlVHJhbnNmb3JtIHtcbiAgdHJhbnNmb3JtKHZhbHVlOiBudW1iZXIpOiBzdHJpbmcge1xuICAgIHJldHVybiBgJHsodmFsdWUgLyAxMDApICogMTAwfSVgO1xuICB9XG59XG4iXX0=
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic3Vpcy1wcm9ncmVzcy1iYXIucGlwZS5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uLy4uL2xpYnMvc3Vpcy9zcmMvbGliL2NvbXBvbmVudHMvc3Vpcy1wcm9ncmVzcy1iYXIvc3Vpcy1wcm9ncmVzcy1iYXIucGlwZS50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQUUsSUFBSSxFQUFpQixNQUFNLGVBQWUsQ0FBQzs7QUFNcEQsTUFBTSxPQUFPLG1CQUFtQjtJQUM5QixTQUFTLENBQUMsS0FBYSxFQUFFLFFBQWdCO1FBQ3ZDLElBQUksS0FBSyxHQUFHLFFBQVE7WUFBRSxPQUFPLE1BQU0sQ0FBQztRQUNwQyxPQUFPLEdBQUcsQ0FBQyxLQUFLLEdBQUcsUUFBUSxDQUFDLEdBQUcsR0FBRyxHQUFHLENBQUM7SUFDeEMsQ0FBQzsrR0FKVSxtQkFBbUI7NkdBQW5CLG1CQUFtQjs7NEZBQW5CLG1CQUFtQjtrQkFKL0IsSUFBSTttQkFBQztvQkFDSixVQUFVLEVBQUUsSUFBSTtvQkFDaEIsSUFBSSxFQUFFLGlCQUFpQjtpQkFDeEIiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBQaXBlLCBQaXBlVHJhbnNmb3JtIH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5cbkBQaXBlKHtcbiAgc3RhbmRhbG9uZTogdHJ1ZSxcbiAgbmFtZTogJ3N1aXNQcm9ncmVzc0JhcicsXG59KVxuZXhwb3J0IGNsYXNzIFN1aXNQcm9ncmVzc0JhclBpcGUgaW1wbGVtZW50cyBQaXBlVHJhbnNmb3JtIHtcbiAgdHJhbnNmb3JtKHZhbHVlOiBudW1iZXIsIG1heFZhbHVlOiBudW1iZXIpOiBzdHJpbmcge1xuICAgIGlmICh2YWx1ZSA+IG1heFZhbHVlKSByZXR1cm4gJzEwMCUnO1xuICAgIHJldHVybiBgJHsodmFsdWUgLyBtYXhWYWx1ZSkgKiAxMDB9JWA7XG4gIH1cbn1cbiJdfQ==

package/fesm2022/suis.mjs

@@ -188,11 +188,11 @@ class SuisBoxComponent {
         this.spacing = false;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SuisBoxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: SuisBoxComponent, isStandalone: true, selector: "suis-box", inputs: { spacing: "spacing" }, ngImport: i0, template: "<div class=\"suis-box\" [class.suis-box--spacing]=\"spacing\">\n  <ng-content></ng-content>\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-box{background-color:#fff;border:.0625rem solid #dcdde1;border-radius:.25rem}.suis-box--spacing{padding:1rem}@media (min-width: 768px){.suis-box--spacing{padding:1.25rem}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: SuisBoxComponent, isStandalone: true, selector: "suis-box", inputs: { spacing: "spacing" }, ngImport: i0, template: "<div class=\"suis-box\" [class.suis-box--spacing]=\"spacing\">\n  <ng-content></ng-content>\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-box{background-color:#fff;border:.0625rem solid #dcdde1;border-radius:.25rem;height:100%}.suis-box--spacing{padding:1rem}@media (min-width: 768px){.suis-box--spacing{padding:1.25rem}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SuisBoxComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'suis-box', standalone: true, imports: [], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"suis-box\" [class.suis-box--spacing]=\"spacing\">\n  <ng-content></ng-content>\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-box{background-color:#fff;border:.0625rem solid #dcdde1;border-radius:.25rem}.suis-box--spacing{padding:1rem}@media (min-width: 768px){.suis-box--spacing{padding:1.25rem}}\n"] }]
+            args: [{ selector: 'suis-box', standalone: true, imports: [], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"suis-box\" [class.suis-box--spacing]=\"spacing\">\n  <ng-content></ng-content>\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-box{background-color:#fff;border:.0625rem solid #dcdde1;border-radius:.25rem;height:100%}.suis-box--spacing{padding:1rem}@media (min-width: 768px){.suis-box--spacing{padding:1.25rem}}\n"] }]
         }], propDecorators: { spacing: [{
                 type: Input
             }] } });
@@ -1438,11 +1438,11 @@ class SuisNavigationComponent {
         return `${groupItem.label}-${index}`;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SuisNavigationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: SuisNavigationComponent, isStandalone: true, selector: "suis-navigation", inputs: { items: "items", expandedGroups: "expandedGroups", expandable: "expandable", collapsable: "collapsable", collapsed: "collapsed", collaspedChange: "collaspedChange" }, queries: [{ propertyName: "suisNavigationItem", first: true, predicate: SuisNavigationItemDirective, descendants: true }], ngImport: i0, template: "<div\n  class=\"suis-navigation\"\n  [class.suis-navigation--collapsed]=\"collapsable && collapsed\"\n>\n  <div class=\"suis-navigation__actions\">\n    <button *ngIf=\"collapsable\" type=\"button\" (click)=\"onToggle()\">\n      <suis-icon\n        [type]=\"collapsed ? 'arrow-right' : 'arrow-left'\"\n        color=\"white\"\n        size=\"lg\"\n      ></suis-icon>\n    </button>\n  </div>\n  <div class=\"suis-navigation__groups\">\n    <ng-container *ngIf=\"!collapsed\">\n      <suis-navigation-group\n        *ngFor=\"let groupItem of items; trackBy: groupItemTrackBy\"\n        [item]=\"groupItem\"\n        [templateRef]=\"suisNavigationItem?.templateRef\"\n        [expanded]=\"expandedGroups\"\n        [expandable]=\"expandable\"\n      ></suis-navigation-group>\n    </ng-container>\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-navigation{width:100%;min-width:16rem;max-width:16rem;background-color:#192a56;color:#fff;height:100%;min-height:100vh;padding:1rem;display:flex;flex-direction:column}.suis-navigation--collapsed{min-width:3.25rem;max-width:3.25rem}.suis-navigation__groups{overflow-y:auto}.suis-navigation__actions{display:flex;justify-content:flex-end}.suis-navigation__actions button{margin-bottom:1.5rem;background-color:transparent;border-radius:.25rem;border:0}.suis-navigation__actions button:hover{cursor:pointer}\n"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: SuisNavigationGroupComponent, selector: "suis-navigation-group", inputs: ["item", "templateRef", "expanded", "expandable"] }, { kind: "component", type: SuisIconComponent, selector: "suis-icon", inputs: ["size", "color", "type", "outlined", "filled", "pointer", "bold"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: SuisNavigationComponent, isStandalone: true, selector: "suis-navigation", inputs: { items: "items", expandedGroups: "expandedGroups", expandable: "expandable", collapsable: "collapsable", collapsed: "collapsed", collaspedChange: "collaspedChange" }, queries: [{ propertyName: "suisNavigationItem", first: true, predicate: SuisNavigationItemDirective, descendants: true }], ngImport: i0, template: "<div\n  class=\"suis-navigation\"\n  [class.suis-navigation--collapsed]=\"collapsable && collapsed\"\n>\n  <div class=\"suis-navigation__actions\">\n    <button *ngIf=\"collapsable\" type=\"button\" (click)=\"onToggle()\">\n      <suis-icon\n        [type]=\"collapsed ? 'arrow-right' : 'arrow-left'\"\n        color=\"white\"\n        size=\"xl\"\n      ></suis-icon>\n    </button>\n  </div>\n  <div class=\"suis-navigation__groups\">\n    <ng-container *ngIf=\"!collapsed\">\n      <suis-navigation-group\n        *ngFor=\"let groupItem of items; trackBy: groupItemTrackBy\"\n        [item]=\"groupItem\"\n        [templateRef]=\"suisNavigationItem?.templateRef\"\n        [expanded]=\"expandedGroups\"\n        [expandable]=\"expandable\"\n      ></suis-navigation-group>\n    </ng-container>\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-navigation{width:100%;min-width:16rem;max-width:16rem;background-color:#192a56;color:#fff;height:100%;min-height:100vh;padding:1rem;display:flex;flex-direction:column}.suis-navigation--collapsed{min-width:4rem;max-width:4rem}.suis-navigation__groups{overflow-y:auto}.suis-navigation__actions{display:flex;justify-content:flex-end}.suis-navigation__actions button{margin-bottom:.75rem;background-color:transparent;border-radius:.25rem;border:0}.suis-navigation__actions button:hover{cursor:pointer}\n"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: SuisNavigationGroupComponent, selector: "suis-navigation-group", inputs: ["item", "templateRef", "expanded", "expandable"] }, { kind: "component", type: SuisIconComponent, selector: "suis-icon", inputs: ["size", "color", "type", "outlined", "filled", "pointer", "bold"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SuisNavigationComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'suis-navigation', standalone: true, imports: [NgIf, NgFor, SuisNavigationGroupComponent, SuisIconComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n  class=\"suis-navigation\"\n  [class.suis-navigation--collapsed]=\"collapsable && collapsed\"\n>\n  <div class=\"suis-navigation__actions\">\n    <button *ngIf=\"collapsable\" type=\"button\" (click)=\"onToggle()\">\n      <suis-icon\n        [type]=\"collapsed ? 'arrow-right' : 'arrow-left'\"\n        color=\"white\"\n        size=\"lg\"\n      ></suis-icon>\n    </button>\n  </div>\n  <div class=\"suis-navigation__groups\">\n    <ng-container *ngIf=\"!collapsed\">\n      <suis-navigation-group\n        *ngFor=\"let groupItem of items; trackBy: groupItemTrackBy\"\n        [item]=\"groupItem\"\n        [templateRef]=\"suisNavigationItem?.templateRef\"\n        [expanded]=\"expandedGroups\"\n        [expandable]=\"expandable\"\n      ></suis-navigation-group>\n    </ng-container>\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-navigation{width:100%;min-width:16rem;max-width:16rem;background-color:#192a56;color:#fff;height:100%;min-height:100vh;padding:1rem;display:flex;flex-direction:column}.suis-navigation--collapsed{min-width:3.25rem;max-width:3.25rem}.suis-navigation__groups{overflow-y:auto}.suis-navigation__actions{display:flex;justify-content:flex-end}.suis-navigation__actions button{margin-bottom:1.5rem;background-color:transparent;border-radius:.25rem;border:0}.suis-navigation__actions button:hover{cursor:pointer}\n"] }]
+            args: [{ selector: 'suis-navigation', standalone: true, imports: [NgIf, NgFor, SuisNavigationGroupComponent, SuisIconComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n  class=\"suis-navigation\"\n  [class.suis-navigation--collapsed]=\"collapsable && collapsed\"\n>\n  <div class=\"suis-navigation__actions\">\n    <button *ngIf=\"collapsable\" type=\"button\" (click)=\"onToggle()\">\n      <suis-icon\n        [type]=\"collapsed ? 'arrow-right' : 'arrow-left'\"\n        color=\"white\"\n        size=\"xl\"\n      ></suis-icon>\n    </button>\n  </div>\n  <div class=\"suis-navigation__groups\">\n    <ng-container *ngIf=\"!collapsed\">\n      <suis-navigation-group\n        *ngFor=\"let groupItem of items; trackBy: groupItemTrackBy\"\n        [item]=\"groupItem\"\n        [templateRef]=\"suisNavigationItem?.templateRef\"\n        [expanded]=\"expandedGroups\"\n        [expandable]=\"expandable\"\n      ></suis-navigation-group>\n    </ng-container>\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-navigation{width:100%;min-width:16rem;max-width:16rem;background-color:#192a56;color:#fff;height:100%;min-height:100vh;padding:1rem;display:flex;flex-direction:column}.suis-navigation--collapsed{min-width:4rem;max-width:4rem}.suis-navigation__groups{overflow-y:auto}.suis-navigation__actions{display:flex;justify-content:flex-end}.suis-navigation__actions button{margin-bottom:.75rem;background-color:transparent;border-radius:.25rem;border:0}.suis-navigation__actions button:hover{cursor:pointer}\n"] }]
         }], propDecorators: { suisNavigationItem: [{
                 type: ContentChild,
                 args: [SuisNavigationItemDirective]
@@ -2003,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" }); }
@@ -2019,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'.
          */
@@ -2034,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: [{