@siemens/element-ng 47.2.0 → 47.3.0

package/fesm2022/siemens-element-ng-progressbar.mjs

@@ -0,0 +1,83 @@
+import * as i0 from '@angular/core';
+import { input, computed, ChangeDetectionStrategy, Component, NgModule } from '@angular/core';
+import * as i1 from '@siemens/element-translate-ng/translate';
+import { SiTranslateModule } from '@siemens/element-translate-ng/translate';
+
+/**
+ * Copyright Siemens 2016 - 2025.
+ * SPDX-License-Identifier: MIT
+ */
+class SiProgressbarComponent {
+    /**
+     * Needed for a11y
+     *
+     * @defaultValue
+     * ```
+     * $localize`:@@SI_PROGRESSBAR.LABEL:Progress`
+     * ```
+     */
+    ariaLabel = input($localize `:@@SI_PROGRESSBAR.LABEL:Progress`);
+    /**
+     * Max value for progressbar
+     *
+     * @defaultValue 100
+     */
+    max = input(100);
+    /**
+     * Current value
+     *
+     * @defaultValue 0
+     */
+    value = input(0);
+    /**
+     * Heading to display on top of progress bar.
+     */
+    heading = input();
+    /**
+     * Optional progress text to be shown on top right (in LTR).
+     * It can be percentage value or a progress status. E.g `50 %` or `Downloading 2/8`.
+     */
+    progress = input();
+    /**
+     * Height for progress bar.
+     *
+     * @defaultValue 'normal'
+     */
+    height = input('normal');
+    percent = computed(() => (100 * Number(this.value() ?? 0)) / Number(this.max() ?? 100));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: SiProgressbarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.6", type: SiProgressbarComponent, isStandalone: true, selector: "si-progressbar", inputs: { ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, heading: { classPropertyName: "heading", publicName: "heading", isSignal: true, isRequired: false, transformFunction: null }, progress: { classPropertyName: "progress", publicName: "progress", isSignal: true, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "@if (heading() || progress()) {\n  <div\n    class=\"d-flex align-items-baseline\"\n    [class.justify-content-end]=\"!heading()\"\n    [class.justify-content-between]=\"heading()\"\n  >\n    @if (heading()) {\n      <span class=\"si-title-2 mb-2\">{{ heading() | translate }}</span>\n    }\n    @if (progress()) {\n      <small class=\"text-nowrap\">{{ progress() }}</small>\n    }\n  </div>\n}\n<div class=\"progress\" [class.si-progress-small]=\"height() === 'small'\">\n  <div\n    class=\"progress-bar\"\n    role=\"progressbar\"\n    [attr.aria-valuemin]=\"0\"\n    [attr.aria-valuemax]=\"max()\"\n    [attr.aria-valuenow]=\"value()\"\n    [attr.aria-valuetext]=\"value() !== undefined ? percent().toFixed(0) + '%' : null\"\n    [attr.aria-label]=\"ariaLabel() | translate\"\n    [style.width.%]=\"percent()\"\n  >\n  </div>\n</div>\n", styles: [".si-progress-small{block-size:.125rem;border-radius:.0625rem}\n"], dependencies: [{ kind: "ngmodule", type: SiTranslateModule }, { kind: "pipe", type: i1.SiTranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: SiProgressbarComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'si-progressbar', changeDetection: ChangeDetectionStrategy.OnPush, imports: [SiTranslateModule], template: "@if (heading() || progress()) {\n  <div\n    class=\"d-flex align-items-baseline\"\n    [class.justify-content-end]=\"!heading()\"\n    [class.justify-content-between]=\"heading()\"\n  >\n    @if (heading()) {\n      <span class=\"si-title-2 mb-2\">{{ heading() | translate }}</span>\n    }\n    @if (progress()) {\n      <small class=\"text-nowrap\">{{ progress() }}</small>\n    }\n  </div>\n}\n<div class=\"progress\" [class.si-progress-small]=\"height() === 'small'\">\n  <div\n    class=\"progress-bar\"\n    role=\"progressbar\"\n    [attr.aria-valuemin]=\"0\"\n    [attr.aria-valuemax]=\"max()\"\n    [attr.aria-valuenow]=\"value()\"\n    [attr.aria-valuetext]=\"value() !== undefined ? percent().toFixed(0) + '%' : null\"\n    [attr.aria-label]=\"ariaLabel() | translate\"\n    [style.width.%]=\"percent()\"\n  >\n  </div>\n</div>\n", styles: [".si-progress-small{block-size:.125rem;border-radius:.0625rem}\n"] }]
+        }] });
+
+/**
+ * Copyright Siemens 2016 - 2025.
+ * SPDX-License-Identifier: MIT
+ */
+class SiProgressbarModule {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: SiProgressbarModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.0.6", ngImport: i0, type: SiProgressbarModule, imports: [SiProgressbarComponent], exports: [SiProgressbarComponent] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: SiProgressbarModule, imports: [SiProgressbarComponent] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: SiProgressbarModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [SiProgressbarComponent],
+                    exports: [SiProgressbarComponent]
+                }]
+        }] });
+
+/**
+ * Copyright Siemens 2016 - 2025.
+ * SPDX-License-Identifier: MIT
+ */
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { SiProgressbarComponent, SiProgressbarModule };
+//# sourceMappingURL=siemens-element-ng-progressbar.mjs.map

package/fesm2022/siemens-element-ng-progressbar.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"siemens-element-ng-progressbar.mjs","sources":["../../../../projects/element-ng/progressbar/si-progressbar.component.ts","../../../../projects/element-ng/progressbar/si-progressbar.component.html","../../../../projects/element-ng/progressbar/si-progressbar.module.ts","../../../../projects/element-ng/progressbar/index.ts","../../../../projects/element-ng/progressbar/siemens-element-ng-progressbar.ts"],"sourcesContent":["/**\n * Copyright Siemens 2016 - 2025.\n * SPDX-License-Identifier: MIT\n */\nimport { ChangeDetectionStrategy, Component, computed, input } from '@angular/core';\nimport { SiTranslateModule } from '@siemens/element-translate-ng/translate';\n\n@Component({\n  selector: 'si-progressbar',\n  templateUrl: './si-progressbar.component.html',\n  styleUrl: './si-progressbar.component.scss',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  imports: [SiTranslateModule]\n})\nexport class SiProgressbarComponent {\n  /**\n   * Needed for a11y\n   *\n   * @defaultValue\n   * ```\n   * $localize`:@@SI_PROGRESSBAR.LABEL:Progress`\n   * ```\n   */\n  readonly ariaLabel = input($localize`:@@SI_PROGRESSBAR.LABEL:Progress`);\n\n  /**\n   * Max value for progressbar\n   *\n   * @defaultValue 100\n   */\n  readonly max = input(100);\n\n  /**\n   * Current value\n   *\n   * @defaultValue 0\n   */\n  readonly value = input<number | undefined>(0);\n\n  /**\n   * Heading to display on top of progress bar.\n   */\n  readonly heading = input<string>();\n\n  /**\n   * Optional progress text to be shown on top right (in LTR).\n   * It can be percentage value or a progress status. E.g `50 %` or `Downloading 2/8`.\n   */\n  readonly progress = input<string>();\n\n  /**\n   * Height for progress bar.\n   *\n   * @defaultValue 'normal'\n   */\n  readonly height = input<ProgressbarHeight>('normal');\n\n  protected readonly percent = computed(\n    () => (100 * Number(this.value() ?? 0)) / Number(this.max() ?? 100)\n  );\n}\n\nexport type ProgressbarHeight = 'small' | 'normal';\n","@if (heading() || progress()) {\n  <div\n    class=\"d-flex align-items-baseline\"\n    [class.justify-content-end]=\"!heading()\"\n    [class.justify-content-between]=\"heading()\"\n  >\n    @if (heading()) {\n      <span class=\"si-title-2 mb-2\">{{ heading() | translate }}</span>\n    }\n    @if (progress()) {\n      <small class=\"text-nowrap\">{{ progress() }}</small>\n    }\n  </div>\n}\n<div class=\"progress\" [class.si-progress-small]=\"height() === 'small'\">\n  <div\n    class=\"progress-bar\"\n    role=\"progressbar\"\n    [attr.aria-valuemin]=\"0\"\n    [attr.aria-valuemax]=\"max()\"\n    [attr.aria-valuenow]=\"value()\"\n    [attr.aria-valuetext]=\"value() !== undefined ? percent().toFixed(0) + '%' : null\"\n    [attr.aria-label]=\"ariaLabel() | translate\"\n    [style.width.%]=\"percent()\"\n  >\n  </div>\n</div>\n","/**\n * Copyright Siemens 2016 - 2025.\n * SPDX-License-Identifier: MIT\n */\nimport { NgModule } from '@angular/core';\n\nimport { SiProgressbarComponent } from './si-progressbar.component';\n\n@NgModule({\n  imports: [SiProgressbarComponent],\n  exports: [SiProgressbarComponent]\n})\nexport class SiProgressbarModule {}\n","/**\n * Copyright Siemens 2016 - 2025.\n * SPDX-License-Identifier: MIT\n */\nexport * from './si-progressbar.component';\nexport * from './si-progressbar.module';\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}