oasys-lib 2.45.2 → 2.46.0

package/fesm2022/oasys-lib.mjs

@@ -3549,20 +3549,24 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImpo
         }] });
 
 class ProgressBarComponent {
-    percentage = 50;
-    shape = 'circular';
-    text = '0 / 3';
+    currentValue = 0;
+    maxValue = 100;
+    get percentage() {
+        if (this.maxValue <= 0) {
+            return 0;
+        }
+        const rawPercentage = (this.currentValue / this.maxValue) * 100;
+        return Math.min(100, Math.max(0, rawPercentage));
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: ProgressBarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.18", type: ProgressBarComponent, isStandalone: true, selector: "ui-progress-bar", inputs: { percentage: "percentage", shape: "shape", text: "text" }, ngImport: i0, template: "<!-- Circular Progress Bar -->\n@if (shape === 'circular') {\n  <ui-box\n    box_space=\"none\"\n    class=\"bw-cicle-progress-bar\"\n    [style.--bw-cicle-progress-bar-progress-size]=\"percentage\"\n    role=\"progressbar\"\n    aria-valuemin=\"0\"\n    aria-valuemax=\"100\"\n    [attr.aria-valuenow]=\"percentage\"\n    [attr.aria-label]=\"text\"\n  >\n    <svg>\n      <circle class=\"full-bar\" />\n      <circle class=\"progress-bar\" />\n    </svg>\n    <div class=\"bw-cicle-progress-bar__content text-body--micro\">\n      <span class=\"bw-cicle-progress-bar__content-text\">{{ text }}</span>\n    </div>\n  </ui-box>\n}\n\n<!-- Line Progress Bar -->\n@if (shape === 'line') {\n  <ui-box\n    box_space=\"none\"\n    box_fit_mode=\"fit\"\n    class=\"bw-line-progress-bar\"\n    [style.--bw-line-progress-bar-progress-size]=\"percentage\"\n    role=\"progressbar\"\n    aria-valuemin=\"0\"\n    aria-valuemax=\"100\"\n    [attr.aria-valuenow]=\"percentage\"\n    [attr.aria-label]=\"text\"\n  >\n    <svg>\n      <rect class=\"full-bar\" />\n      <rect class=\"progress-bar\" />\n    </svg>\n  </ui-box>\n}\n", styles: [".bw-cicle-progress-bar{--bw-cicle-progress-bar-progress-size: 0;--bw-cicle-progress-bar-size: 48px;display:block;position:relative;width:var(--bw-cicle-progress-bar-size);height:var(--bw-cicle-progress-bar-size)}.bw-cicle-progress-bar__content{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.bw-cicle-progress-bar svg{--size: 48px;--half-size: calc(var(--size) / 2);--stroke-width: 4px;--radius: calc((var(--size) - var(--stroke-width)) / 2);--circumference: calc(var(--radius) * pi * 2);--dash: calc((var(--bw-cicle-progress-bar-progress-size) * var(--circumference)) / 100);width:var(--bw-cicle-progress-bar-size);height:var(--bw-cicle-progress-bar-size)}.bw-cicle-progress-bar circle{cx:var(--half-size);cy:var(--half-size);r:var(--radius);stroke-width:var(--stroke-width);fill:none;stroke-linecap:round}.bw-cicle-progress-bar circle.full-bar{stroke:var(--oasys-color-interaction-background-disabled)}.bw-cicle-progress-bar circle.progress-bar{transform:rotate(-90deg);transform-origin:var(--half-size) var(--half-size);stroke-dasharray:var(--dash) calc(var(--circumference) - var(--dash));stroke:var(--oasys-color-brand-background-tertiary)}.bw-line-progress-bar{--bw-line-progress-bar-progress-size: 0;--bw-line-progress-bar-svg-height: 4px;--bw-line-progress-bar-width: 160px;display:block;width:var(--bw-line-progress-bar-width);height:auto}.bw-line-progress-bar svg{width:100%;height:var(--bw-line-progress-bar-svg-height)}.bw-line-progress-bar rect{height:100%;rx:calc(var(--bw-line-progress-bar-svg-height) / 2);ry:calc(var(--bw-line-progress-bar-svg-height) / 2)}.bw-line-progress-bar rect.full-bar{width:100%;fill:var(--oasys-color-interaction-background-disabled)}.bw-line-progress-bar rect.progress-bar{width:calc(var(--bw-line-progress-bar-progress-size) * 1%);fill:var(--oasys-color-brand-foreground-primary);transition:width .3s ease}\n"], dependencies: [{ kind: "component", type: LayoutBoxComponent, selector: "ui-box", inputs: ["box_space", "box_role", "box_space_top", "box_space_right", "box_space_bottom", "box_space_left", "box_align_x", "box_align_y", "box_fill_mode", "box_background", "box_text_on_dark", "box_content_fill_width", "box_border_color", "box_border_width", "box_border_style", "box_border_radius"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.18", type: ProgressBarComponent, isStandalone: true, selector: "ui-progress-bar", inputs: { currentValue: "currentValue", maxValue: "maxValue" }, ngImport: i0, template: "<div\n  class=\"progress-bar\"\n  role=\"progressbar\"\n  aria-valuemin=\"0\"\n  aria-valuemax=\"100\"\n  [attr.aria-valuenow]=\"percentage\"\n>\n  <div class=\"track\">\n    <div class=\"bar\" [style.width.%]=\"percentage\"></div>\n  </div>\n</div>\n", styles: [".progress-bar .track{width:100%;background-color:var(--oasys-component-progress-bar-color-track);border-radius:var(--oasys-radius-soften)}.progress-bar .bar{max-width:100%;height:8px;background-color:var(--oasys-component-progress-bar-color-bar);border-radius:var(--oasys-radius-soften);transition:width .8s cubic-bezier(.4,0,.2,1);animation:progress .8s cubic-bezier(.4,0,.2,1) forwards}@keyframes progress{0%{width:0%}}\n"] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: ProgressBarComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ui-progress-bar', standalone: true, imports: [LayoutBoxComponent], template: "<!-- Circular Progress Bar -->\n@if (shape === 'circular') {\n  <ui-box\n    box_space=\"none\"\n    class=\"bw-cicle-progress-bar\"\n    [style.--bw-cicle-progress-bar-progress-size]=\"percentage\"\n    role=\"progressbar\"\n    aria-valuemin=\"0\"\n    aria-valuemax=\"100\"\n    [attr.aria-valuenow]=\"percentage\"\n    [attr.aria-label]=\"text\"\n  >\n    <svg>\n      <circle class=\"full-bar\" />\n      <circle class=\"progress-bar\" />\n    </svg>\n    <div class=\"bw-cicle-progress-bar__content text-body--micro\">\n      <span class=\"bw-cicle-progress-bar__content-text\">{{ text }}</span>\n    </div>\n  </ui-box>\n}\n\n<!-- Line Progress Bar -->\n@if (shape === 'line') {\n  <ui-box\n    box_space=\"none\"\n    box_fit_mode=\"fit\"\n    class=\"bw-line-progress-bar\"\n    [style.--bw-line-progress-bar-progress-size]=\"percentage\"\n    role=\"progressbar\"\n    aria-valuemin=\"0\"\n    aria-valuemax=\"100\"\n    [attr.aria-valuenow]=\"percentage\"\n    [attr.aria-label]=\"text\"\n  >\n    <svg>\n      <rect class=\"full-bar\" />\n      <rect class=\"progress-bar\" />\n    </svg>\n  </ui-box>\n}\n", styles: [".bw-cicle-progress-bar{--bw-cicle-progress-bar-progress-size: 0;--bw-cicle-progress-bar-size: 48px;display:block;position:relative;width:var(--bw-cicle-progress-bar-size);height:var(--bw-cicle-progress-bar-size)}.bw-cicle-progress-bar__content{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.bw-cicle-progress-bar svg{--size: 48px;--half-size: calc(var(--size) / 2);--stroke-width: 4px;--radius: calc((var(--size) - var(--stroke-width)) / 2);--circumference: calc(var(--radius) * pi * 2);--dash: calc((var(--bw-cicle-progress-bar-progress-size) * var(--circumference)) / 100);width:var(--bw-cicle-progress-bar-size);height:var(--bw-cicle-progress-bar-size)}.bw-cicle-progress-bar circle{cx:var(--half-size);cy:var(--half-size);r:var(--radius);stroke-width:var(--stroke-width);fill:none;stroke-linecap:round}.bw-cicle-progress-bar circle.full-bar{stroke:var(--oasys-color-interaction-background-disabled)}.bw-cicle-progress-bar circle.progress-bar{transform:rotate(-90deg);transform-origin:var(--half-size) var(--half-size);stroke-dasharray:var(--dash) calc(var(--circumference) - var(--dash));stroke:var(--oasys-color-brand-background-tertiary)}.bw-line-progress-bar{--bw-line-progress-bar-progress-size: 0;--bw-line-progress-bar-svg-height: 4px;--bw-line-progress-bar-width: 160px;display:block;width:var(--bw-line-progress-bar-width);height:auto}.bw-line-progress-bar svg{width:100%;height:var(--bw-line-progress-bar-svg-height)}.bw-line-progress-bar rect{height:100%;rx:calc(var(--bw-line-progress-bar-svg-height) / 2);ry:calc(var(--bw-line-progress-bar-svg-height) / 2)}.bw-line-progress-bar rect.full-bar{width:100%;fill:var(--oasys-color-interaction-background-disabled)}.bw-line-progress-bar rect.progress-bar{width:calc(var(--bw-line-progress-bar-progress-size) * 1%);fill:var(--oasys-color-brand-foreground-primary);transition:width .3s ease}\n"] }]
-        }], propDecorators: { percentage: [{
-                type: Input
-            }], shape: [{
+            args: [{ selector: 'ui-progress-bar', standalone: true, imports: [LayoutBoxComponent], template: "<div\n  class=\"progress-bar\"\n  role=\"progressbar\"\n  aria-valuemin=\"0\"\n  aria-valuemax=\"100\"\n  [attr.aria-valuenow]=\"percentage\"\n>\n  <div class=\"track\">\n    <div class=\"bar\" [style.width.%]=\"percentage\"></div>\n  </div>\n</div>\n", styles: [".progress-bar .track{width:100%;background-color:var(--oasys-component-progress-bar-color-track);border-radius:var(--oasys-radius-soften)}.progress-bar .bar{max-width:100%;height:8px;background-color:var(--oasys-component-progress-bar-color-bar);border-radius:var(--oasys-radius-soften);transition:width .8s cubic-bezier(.4,0,.2,1);animation:progress .8s cubic-bezier(.4,0,.2,1) forwards}@keyframes progress{0%{width:0%}}\n"] }]
+        }], propDecorators: { currentValue: [{
                 type: Input
-            }], text: [{
+            }], maxValue: [{
                 type: Input
             }] } });