oasys-lib 2.42.2 → 2.42.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -3672,17 +3672,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.26", ngImpo
3672
3672
 
3673
3673
  class ProgressBarComponent {
3674
3674
  percentage = 50;
3675
- style = 'circular';
3675
+ shape = 'circular';
3676
3676
  text = '0 / 3';
3677
3677
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.26", ngImport: i0, type: ProgressBarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
3678
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.26", type: ProgressBarComponent, isStandalone: true, selector: "ui-progress-bar", inputs: { percentage: "percentage", style: "style", text: "text" }, ngImport: i0, template: "<!-- Circular Progress Bar -->\n<ui-box\n *ngIf=\"style === 'circular'\"\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<!-- Line Progress Bar -->\n<ui-box\n *ngIf=\"style === 'line'\"\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", 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: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { 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"] }] });
3678
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.26", type: ProgressBarComponent, isStandalone: true, selector: "ui-progress-bar", inputs: { percentage: "percentage", shape: "shape", text: "text" }, ngImport: i0, template: "<!-- Circular Progress Bar -->\n<ui-box\n *ngIf=\"shape === 'circular'\"\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<!-- Line Progress Bar -->\n<ui-box\n *ngIf=\"shape === 'line'\"\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", 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: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { 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"] }] });
3679
3679
  }
3680
3680
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.26", ngImport: i0, type: ProgressBarComponent, decorators: [{
3681
3681
  type: Component,
3682
- args: [{ selector: 'ui-progress-bar', standalone: true, imports: [CommonModule, LayoutBoxComponent], template: "<!-- Circular Progress Bar -->\n<ui-box\n *ngIf=\"style === 'circular'\"\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<!-- Line Progress Bar -->\n<ui-box\n *ngIf=\"style === 'line'\"\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", 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"] }]
3682
+ args: [{ selector: 'ui-progress-bar', standalone: true, imports: [CommonModule, LayoutBoxComponent], template: "<!-- Circular Progress Bar -->\n<ui-box\n *ngIf=\"shape === 'circular'\"\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<!-- Line Progress Bar -->\n<ui-box\n *ngIf=\"shape === 'line'\"\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", 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"] }]
3683
3683
  }], propDecorators: { percentage: [{
3684
3684
  type: Input
3685
- }], style: [{
3685
+ }], shape: [{
3686
3686
  type: Input
3687
3687
  }], text: [{
3688
3688
  type: Input