@libs-ui/components-process-bar-standard 0.1.1-1

package/README.md

@@ -0,0 +1,3 @@
+# process-bar-standard
+
+This library was generated with [Nx](https://nx.dev).

package/esm2022/index.mjs

@@ -0,0 +1,2 @@
+export * from './process-bar-standard.component';
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaW5kZXguanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi8uLi9saWJzLXVpL2NvbXBvbmVudHMvcHJvY2Vzcy1iYXIvc3RhbmRhcmQvc3JjL2luZGV4LnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLGNBQWMsa0NBQWtDLENBQUMiLCJzb3VyY2VzQ29udGVudCI6WyJleHBvcnQgKiBmcm9tICcuL3Byb2Nlc3MtYmFyLXN0YW5kYXJkLmNvbXBvbmVudCc7XG4iXX0=

package/esm2022/libs-ui-components-process-bar-standard.mjs

@@ -0,0 +1,5 @@
+/**
+ * Generated bundle index. Do not edit.
+ */
+export * from './index';
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoibGlicy11aS1jb21wb25lbnRzLXByb2Nlc3MtYmFyLXN0YW5kYXJkLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vLi4vbGlicy11aS9jb21wb25lbnRzL3Byb2Nlc3MtYmFyL3N0YW5kYXJkL3NyYy9saWJzLXVpLWNvbXBvbmVudHMtcHJvY2Vzcy1iYXItc3RhbmRhcmQudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUE7O0dBRUc7QUFFSCxjQUFjLFNBQVMsQ0FBQyIsInNvdXJjZXNDb250ZW50IjpbIi8qKlxuICogR2VuZXJhdGVkIGJ1bmRsZSBpbmRleC4gRG8gbm90IGVkaXQuXG4gKi9cblxuZXhwb3J0ICogZnJvbSAnLi9pbmRleCc7XG4iXX0=

package/esm2022/process-bar-standard.component.mjs

@@ -0,0 +1,18 @@
+import { ChangeDetectionStrategy, Component, computed, inject, input } from '@angular/core';
+import { PROCESS_BAR_STANDARD_CONFIG_DEFAULT_TOKEN_INJECT } from '@libs-ui/utils';
+import * as i0 from "@angular/core";
+export class LibsUiComponentsProcessBarStandardComponent {
+    width = computed(() => this.config().width ?? this.processBarConfigDefault?.width ?? '100%');
+    height = computed(() => this.config().height ?? this.processBarConfigDefault?.height ?? '12px');
+    backgroundColor = computed(() => this.config().backgroundColor ?? this.processBarConfigDefault?.backgroundColor ?? '#F8F9FA');
+    radius = computed(() => `${this.config().radius ?? this.processBarConfigDefault?.radius ?? 20}px`);
+    config = input.required();
+    processBarConfigDefault = inject(PROCESS_BAR_STANDARD_CONFIG_DEFAULT_TOKEN_INJECT, { optional: true });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: LibsUiComponentsProcessBarStandardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: LibsUiComponentsProcessBarStandardComponent, isStandalone: true, selector: "libs_ui-components-process_bar-standard", inputs: { config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "@let constHtmlSteps = config().steps() || [];\n@let constHtmlMode = config().mode || 'stack';\n@let constHtmlTotalValue = config().totalValue;\n\n@if (constHtmlSteps.length > 0 && constHtmlTotalValue) {\n  @switch (constHtmlMode) {\n    @case ('stack') {\n      <div\n        [class]=\"(config().classInclude || '') + ' libs-ui-process-bar-standard'\"\n        [style.width]=\"width()\"\n        [style.height]=\"height()\"\n        [style.backgroundColor]=\"backgroundColor()\"\n        [style.borderRadius]=\"radius()\">\n        @for (step of constHtmlSteps; track step()) {\n          @let constHtmlStepPercent = (step().value / constHtmlTotalValue) * 100;\n          <div\n            class=\"flex h-full items-center\"\n            [style.backgroundColor]=\"step().color\"\n            [style.width]=\"constHtmlStepPercent + '%'\">\n            @if (step().label) {\n              <span [class]=\"(step().classLabel || '') + ' libs-ui-font-h5r ml-[12px]'\">{{ step().label }}</span>\n            }\n          </div>\n        }\n      </div>\n    }\n\n    @case ('separate') {\n      @for (step of constHtmlSteps; track step()) {\n        @let constHtmlStepPercent = (step().value / constHtmlTotalValue) * 100;\n        @let constHtmlShowPercent = step().showPercent ?? config().showPercent;\n        @let constHtmlPercentClass = (step().percentClass ?? config().percentClass) || '';\n\n        <div\n          [class]=\"(config().classInclude || '') + ' flex w-full shrink-0 items-center relative my-[8px]'\"\n          [style.width]=\"width()\"\n          [style.height]=\"height()\">\n          <div class=\"flex w-full h-full relative\">\n            <div class=\"flex absolute w-full h-full\">\n              <div\n                class=\"libs-ui-process-bar-standard\"\n                [style.backgroundColor]=\"backgroundColor()\"\n                [style.borderRadius]=\"radius()\">\n                <div\n                  class=\"flex h-full\"\n                  [style.backgroundColor]=\"step().color\"\n                  [style.width]=\"constHtmlStepPercent + '%'\"\n                  [style.borderRadius]=\"radius()\"\n                  [class]=\"step().classInclude\"></div>\n                @if (step().label) {\n                  <div class=\"absolute top-0 left-0 w-full h-full flex items-center\">\n                    <span [class]=\"(step().classLabel || '') + ' libs-ui-font-h5r ml-[12px]'\">{{ step().label }}</span>\n                  </div>\n                }\n              </div>\n            </div>\n          </div>\n          @if (constHtmlShowPercent) {\n            <div [class]=\"constHtmlPercentClass + 'libs-ui-font-h5r ml-[8px]'\">\n              {{ constHtmlStepPercent + '%' }}\n            </div>\n          }\n        </div>\n      }\n    }\n  }\n}\n", styles: [".libs-ui-process-bar-standard{display:flex;position:relative;flex-shrink:0;flex-grow:0;align-items:center;overflow:hidden;width:100%;height:100%}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: LibsUiComponentsProcessBarStandardComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'libs_ui-components-process_bar-standard', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "@let constHtmlSteps = config().steps() || [];\n@let constHtmlMode = config().mode || 'stack';\n@let constHtmlTotalValue = config().totalValue;\n\n@if (constHtmlSteps.length > 0 && constHtmlTotalValue) {\n  @switch (constHtmlMode) {\n    @case ('stack') {\n      <div\n        [class]=\"(config().classInclude || '') + ' libs-ui-process-bar-standard'\"\n        [style.width]=\"width()\"\n        [style.height]=\"height()\"\n        [style.backgroundColor]=\"backgroundColor()\"\n        [style.borderRadius]=\"radius()\">\n        @for (step of constHtmlSteps; track step()) {\n          @let constHtmlStepPercent = (step().value / constHtmlTotalValue) * 100;\n          <div\n            class=\"flex h-full items-center\"\n            [style.backgroundColor]=\"step().color\"\n            [style.width]=\"constHtmlStepPercent + '%'\">\n            @if (step().label) {\n              <span [class]=\"(step().classLabel || '') + ' libs-ui-font-h5r ml-[12px]'\">{{ step().label }}</span>\n            }\n          </div>\n        }\n      </div>\n    }\n\n    @case ('separate') {\n      @for (step of constHtmlSteps; track step()) {\n        @let constHtmlStepPercent = (step().value / constHtmlTotalValue) * 100;\n        @let constHtmlShowPercent = step().showPercent ?? config().showPercent;\n        @let constHtmlPercentClass = (step().percentClass ?? config().percentClass) || '';\n\n        <div\n          [class]=\"(config().classInclude || '') + ' flex w-full shrink-0 items-center relative my-[8px]'\"\n          [style.width]=\"width()\"\n          [style.height]=\"height()\">\n          <div class=\"flex w-full h-full relative\">\n            <div class=\"flex absolute w-full h-full\">\n              <div\n                class=\"libs-ui-process-bar-standard\"\n                [style.backgroundColor]=\"backgroundColor()\"\n                [style.borderRadius]=\"radius()\">\n                <div\n                  class=\"flex h-full\"\n                  [style.backgroundColor]=\"step().color\"\n                  [style.width]=\"constHtmlStepPercent + '%'\"\n                  [style.borderRadius]=\"radius()\"\n                  [class]=\"step().classInclude\"></div>\n                @if (step().label) {\n                  <div class=\"absolute top-0 left-0 w-full h-full flex items-center\">\n                    <span [class]=\"(step().classLabel || '') + ' libs-ui-font-h5r ml-[12px]'\">{{ step().label }}</span>\n                  </div>\n                }\n              </div>\n            </div>\n          </div>\n          @if (constHtmlShowPercent) {\n            <div [class]=\"constHtmlPercentClass + 'libs-ui-font-h5r ml-[8px]'\">\n              {{ constHtmlStepPercent + '%' }}\n            </div>\n          }\n        </div>\n      }\n    }\n  }\n}\n", styles: [".libs-ui-process-bar-standard{display:flex;position:relative;flex-shrink:0;flex-grow:0;align-items:center;overflow:hidden;width:100%;height:100%}\n"] }]
+        }] });
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoicHJvY2Vzcy1iYXItc3RhbmRhcmQuY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vLi4vbGlicy11aS9jb21wb25lbnRzL3Byb2Nlc3MtYmFyL3N0YW5kYXJkL3NyYy9wcm9jZXNzLWJhci1zdGFuZGFyZC5jb21wb25lbnQudHMiLCIuLi8uLi8uLi8uLi8uLi8uLi9saWJzLXVpL2NvbXBvbmVudHMvcHJvY2Vzcy1iYXIvc3RhbmRhcmQvc3JjL3Byb2Nlc3MtYmFyLXN0YW5kYXJkLmNvbXBvbmVudC5odG1sIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBRSx1QkFBdUIsRUFBRSxTQUFTLEVBQUUsUUFBUSxFQUFFLE1BQU0sRUFBRSxLQUFLLEVBQUUsTUFBTSxlQUFlLENBQUM7QUFDNUYsT0FBTyxFQUFFLGdEQUFnRCxFQUFFLE1BQU0sZ0JBQWdCLENBQUM7O0FBVWxGLE1BQU0sT0FBTywyQ0FBMkM7SUFDNUMsS0FBSyxHQUFHLFFBQVEsQ0FBQyxHQUFHLEVBQUUsQ0FBQyxJQUFJLENBQUMsTUFBTSxFQUFFLENBQUMsS0FBSyxJQUFJLElBQUksQ0FBQyx1QkFBdUIsRUFBRSxLQUFLLElBQUksTUFBTSxDQUFDLENBQUM7SUFDN0YsTUFBTSxHQUFHLFFBQVEsQ0FBQyxHQUFHLEVBQUUsQ0FBQyxJQUFJLENBQUMsTUFBTSxFQUFFLENBQUMsTUFBTSxJQUFJLElBQUksQ0FBQyx1QkFBdUIsRUFBRSxNQUFNLElBQUksTUFBTSxDQUFDLENBQUM7SUFDaEcsZUFBZSxHQUFHLFFBQVEsQ0FBQyxHQUFHLEVBQUUsQ0FBQyxJQUFJLENBQUMsTUFBTSxFQUFFLENBQUMsZUFBZSxJQUFJLElBQUksQ0FBQyx1QkFBdUIsRUFBRSxlQUFlLElBQUksU0FBUyxDQUFDLENBQUM7SUFDOUgsTUFBTSxHQUFHLFFBQVEsQ0FBQyxHQUFHLEVBQUUsQ0FBQyxHQUFHLElBQUksQ0FBQyxNQUFNLEVBQUUsQ0FBQyxNQUFNLElBQUksSUFBSSxDQUFDLHVCQUF1QixFQUFFLE1BQU0sSUFBSSxFQUFFLElBQUksQ0FBQyxDQUFDO0lBRXBHLE1BQU0sR0FBRyxLQUFLLENBQUMsUUFBUSxFQUFnQyxDQUFDO0lBRWhELHVCQUF1QixHQUFHLE1BQU0sQ0FBNEMsZ0RBQWdELEVBQUUsRUFBRSxRQUFRLEVBQUUsSUFBSSxFQUFFLENBQUMsQ0FBQzt3R0FSeEosMkNBQTJDOzRGQUEzQywyQ0FBMkMseU9DWHhELDJ1RkFtRUE7OzRGRHhEYSwyQ0FBMkM7a0JBUnZELFNBQVM7K0JBRUUseUNBQXlDLGNBQ3ZDLElBQUksbUJBR0MsdUJBQXVCLENBQUMsTUFBTSIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IENoYW5nZURldGVjdGlvblN0cmF0ZWd5LCBDb21wb25lbnQsIGNvbXB1dGVkLCBpbmplY3QsIGlucHV0IH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5pbXBvcnQgeyBQUk9DRVNTX0JBUl9TVEFOREFSRF9DT05GSUdfREVGQVVMVF9UT0tFTl9JTkpFQ1QgfSBmcm9tICdAbGlicy11aS91dGlscyc7XG5pbXBvcnQgeyBJUHJvY2Vzc0JhclN0YW5kYXJkQ29uZmlnRGVmYXVsdEludGVyZmFjZSwgSVByb2Nlc3NCYXJTdGFuZGFyZEludGVyZmFjZSB9IGZyb20gJy4vcHJvY2Vzcy1iYXItc3RhbmRhcmQuaW50ZXJmYWNlJztcbkBDb21wb25lbnQoe1xuICAvLyBlc2xpbnQtZGlzYWJsZS1uZXh0LWxpbmUgQGFuZ3VsYXItZXNsaW50L2NvbXBvbmVudC1zZWxlY3RvclxuICBzZWxlY3RvcjogJ2xpYnNfdWktY29tcG9uZW50cy1wcm9jZXNzX2Jhci1zdGFuZGFyZCcsXG4gIHN0YW5kYWxvbmU6IHRydWUsXG4gIHRlbXBsYXRlVXJsOiAnLi9wcm9jZXNzLWJhci1zdGFuZGFyZC5jb21wb25lbnQuaHRtbCcsXG4gIHN0eWxlVXJsOiAnLi9wcm9jZXNzLWJhci1zdGFuZGFyZC5jb21wb25lbnQuY3NzJyxcbiAgY2hhbmdlRGV0ZWN0aW9uOiBDaGFuZ2VEZXRlY3Rpb25TdHJhdGVneS5PblB1c2gsXG59KVxuZXhwb3J0IGNsYXNzIExpYnNVaUNvbXBvbmVudHNQcm9jZXNzQmFyU3RhbmRhcmRDb21wb25lbnQge1xuICBwcm90ZWN0ZWQgd2lkdGggPSBjb21wdXRlZCgoKSA9PiB0aGlzLmNvbmZpZygpLndpZHRoID8/IHRoaXMucHJvY2Vzc0JhckNvbmZpZ0RlZmF1bHQ/LndpZHRoID8/ICcxMDAlJyk7XG4gIHByb3RlY3RlZCBoZWlnaHQgPSBjb21wdXRlZCgoKSA9PiB0aGlzLmNvbmZpZygpLmhlaWdodCA/PyB0aGlzLnByb2Nlc3NCYXJDb25maWdEZWZhdWx0Py5oZWlnaHQgPz8gJzEycHgnKTtcbiAgcHJvdGVjdGVkIGJhY2tncm91bmRDb2xvciA9IGNvbXB1dGVkKCgpID0+IHRoaXMuY29uZmlnKCkuYmFja2dyb3VuZENvbG9yID8/IHRoaXMucHJvY2Vzc0JhckNvbmZpZ0RlZmF1bHQ/LmJhY2tncm91bmRDb2xvciA/PyAnI0Y4RjlGQScpO1xuICBwcm90ZWN0ZWQgcmFkaXVzID0gY29tcHV0ZWQoKCkgPT4gYCR7dGhpcy5jb25maWcoKS5yYWRpdXMgPz8gdGhpcy5wcm9jZXNzQmFyQ29uZmlnRGVmYXVsdD8ucmFkaXVzID8/IDIwfXB4YCk7XG5cbiAgcmVhZG9ubHkgY29uZmlnID0gaW5wdXQucmVxdWlyZWQ8SVByb2Nlc3NCYXJTdGFuZGFyZEludGVyZmFjZT4oKTtcblxuICBwcml2YXRlIHJlYWRvbmx5IHByb2Nlc3NCYXJDb25maWdEZWZhdWx0ID0gaW5qZWN0PElQcm9jZXNzQmFyU3RhbmRhcmRDb25maWdEZWZhdWx0SW50ZXJmYWNlPihQUk9DRVNTX0JBUl9TVEFOREFSRF9DT05GSUdfREVGQVVMVF9UT0tFTl9JTkpFQ1QsIHsgb3B0aW9uYWw6IHRydWUgfSk7XG59XG4iLCJAbGV0IGNvbnN0SHRtbFN0ZXBzID0gY29uZmlnKCkuc3RlcHMoKSB8fCBbXTtcbkBsZXQgY29uc3RIdG1sTW9kZSA9IGNvbmZpZygpLm1vZGUgfHwgJ3N0YWNrJztcbkBsZXQgY29uc3RIdG1sVG90YWxWYWx1ZSA9IGNvbmZpZygpLnRvdGFsVmFsdWU7XG5cbkBpZiAoY29uc3RIdG1sU3RlcHMubGVuZ3RoID4gMCAmJiBjb25zdEh0bWxUb3RhbFZhbHVlKSB7XG4gIEBzd2l0Y2ggKGNvbnN0SHRtbE1vZGUpIHtcbiAgICBAY2FzZSAoJ3N0YWNrJykge1xuICAgICAgPGRpdlxuICAgICAgICBbY2xhc3NdPVwiKGNvbmZpZygpLmNsYXNzSW5jbHVkZSB8fCAnJykgKyAnIGxpYnMtdWktcHJvY2Vzcy1iYXItc3RhbmRhcmQnXCJcbiAgICAgICAgW3N0eWxlLndpZHRoXT1cIndpZHRoKClcIlxuICAgICAgICBbc3R5bGUuaGVpZ2h0XT1cImhlaWdodCgpXCJcbiAgICAgICAgW3N0eWxlLmJhY2tncm91bmRDb2xvcl09XCJiYWNrZ3JvdW5kQ29sb3IoKVwiXG4gICAgICAgIFtzdHlsZS5ib3JkZXJSYWRpdXNdPVwicmFkaXVzKClcIj5cbiAgICAgICAgQGZvciAoc3RlcCBvZiBjb25zdEh0bWxTdGVwczsgdHJhY2sgc3RlcCgpKSB7XG4gICAgICAgICAgQGxldCBjb25zdEh0bWxTdGVwUGVyY2VudCA9IChzdGVwKCkudmFsdWUgLyBjb25zdEh0bWxUb3RhbFZhbHVlKSAqIDEwMDtcbiAgICAgICAgICA8ZGl2XG4gICAgICAgICAgICBjbGFzcz1cImZsZXggaC1mdWxsIGl0ZW1zLWNlbnRlclwiXG4gICAgICAgICAgICBbc3R5bGUuYmFja2dyb3VuZENvbG9yXT1cInN0ZXAoKS5jb2xvclwiXG4gICAgICAgICAgICBbc3R5bGUud2lkdGhdPVwiY29uc3RIdG1sU3RlcFBlcmNlbnQgKyAnJSdcIj5cbiAgICAgICAgICAgIEBpZiAoc3RlcCgpLmxhYmVsKSB7XG4gICAgICAgICAgICAgIDxzcGFuIFtjbGFzc109XCIoc3RlcCgpLmNsYXNzTGFiZWwgfHwgJycpICsgJyBsaWJzLXVpLWZvbnQtaDVyIG1sLVsxMnB4XSdcIj57eyBzdGVwKCkubGFiZWwgfX08L3NwYW4+XG4gICAgICAgICAgICB9XG4gICAgICAgICAgPC9kaXY+XG4gICAgICAgIH1cbiAgICAgIDwvZGl2PlxuICAgIH1cblxuICAgIEBjYXNlICgnc2VwYXJhdGUnKSB7XG4gICAgICBAZm9yIChzdGVwIG9mIGNvbnN0SHRtbFN0ZXBzOyB0cmFjayBzdGVwKCkpIHtcbiAgICAgICAgQGxldCBjb25zdEh0bWxTdGVwUGVyY2VudCA9IChzdGVwKCkudmFsdWUgLyBjb25zdEh0bWxUb3RhbFZhbHVlKSAqIDEwMDtcbiAgICAgICAgQGxldCBjb25zdEh0bWxTaG93UGVyY2VudCA9IHN0ZXAoKS5zaG93UGVyY2VudCA/PyBjb25maWcoKS5zaG93UGVyY2VudDtcbiAgICAgICAgQGxldCBjb25zdEh0bWxQZXJjZW50Q2xhc3MgPSAoc3RlcCgpLnBlcmNlbnRDbGFzcyA/PyBjb25maWcoKS5wZXJjZW50Q2xhc3MpIHx8ICcnO1xuXG4gICAgICAgIDxkaXZcbiAgICAgICAgICBbY2xhc3NdPVwiKGNvbmZpZygpLmNsYXNzSW5jbHVkZSB8fCAnJykgKyAnIGZsZXggdy1mdWxsIHNocmluay0wIGl0ZW1zLWNlbnRlciByZWxhdGl2ZSBteS1bOHB4XSdcIlxuICAgICAgICAgIFtzdHlsZS53aWR0aF09XCJ3aWR0aCgpXCJcbiAgICAgICAgICBbc3R5bGUuaGVpZ2h0XT1cImhlaWdodCgpXCI+XG4gICAgICAgICAgPGRpdiBjbGFzcz1cImZsZXggdy1mdWxsIGgtZnVsbCByZWxhdGl2ZVwiPlxuICAgICAgICAgICAgPGRpdiBjbGFzcz1cImZsZXggYWJzb2x1dGUgdy1mdWxsIGgtZnVsbFwiPlxuICAgICAgICAgICAgICA8ZGl2XG4gICAgICAgICAgICAgICAgY2xhc3M9XCJsaWJzLXVpLXByb2Nlc3MtYmFyLXN0YW5kYXJkXCJcbiAgICAgICAgICAgICAgICBbc3R5bGUuYmFja2dyb3VuZENvbG9yXT1cImJhY2tncm91bmRDb2xvcigpXCJcbiAgICAgICAgICAgICAgICBbc3R5bGUuYm9yZGVyUmFkaXVzXT1cInJhZGl1cygpXCI+XG4gICAgICAgICAgICAgICAgPGRpdlxuICAgICAgICAgICAgICAgICAgY2xhc3M9XCJmbGV4IGgtZnVsbFwiXG4gICAgICAgICAgICAgICAgICBbc3R5bGUuYmFja2dyb3VuZENvbG9yXT1cInN0ZXAoKS5jb2xvclwiXG4gICAgICAgICAgICAgICAgICBbc3R5bGUud2lkdGhdPVwiY29uc3RIdG1sU3RlcFBlcmNlbnQgKyAnJSdcIlxuICAgICAgICAgICAgICAgICAgW3N0eWxlLmJvcmRlclJhZGl1c109XCJyYWRpdXMoKVwiXG4gICAgICAgICAgICAgICAgICBbY2xhc3NdPVwic3RlcCgpLmNsYXNzSW5jbHVkZVwiPjwvZGl2PlxuICAgICAgICAgICAgICAgIEBpZiAoc3RlcCgpLmxhYmVsKSB7XG4gICAgICAgICAgICAgICAgICA8ZGl2IGNsYXNzPVwiYWJzb2x1dGUgdG9wLTAgbGVmdC0wIHctZnVsbCBoLWZ1bGwgZmxleCBpdGVtcy1jZW50ZXJcIj5cbiAgICAgICAgICAgICAgICAgICAgPHNwYW4gW2NsYXNzXT1cIihzdGVwKCkuY2xhc3NMYWJlbCB8fCAnJykgKyAnIGxpYnMtdWktZm9udC1oNXIgbWwtWzEycHhdJ1wiPnt7IHN0ZXAoKS5sYWJlbCB9fTwvc3Bhbj5cbiAgICAgICAgICAgICAgICAgIDwvZGl2PlxuICAgICAgICAgICAgICAgIH1cbiAgICAgICAgICAgICAgPC9kaXY+XG4gICAgICAgICAgICA8L2Rpdj5cbiAgICAgICAgICA8L2Rpdj5cbiAgICAgICAgICBAaWYgKGNvbnN0SHRtbFNob3dQZXJjZW50KSB7XG4gICAgICAgICAgICA8ZGl2IFtjbGFzc109XCJjb25zdEh0bWxQZXJjZW50Q2xhc3MgKyAnbGlicy11aS1mb250LWg1ciBtbC1bOHB4XSdcIj5cbiAgICAgICAgICAgICAge3sgY29uc3RIdG1sU3RlcFBlcmNlbnQgKyAnJScgfX1cbiAgICAgICAgICAgIDwvZGl2PlxuICAgICAgICAgIH1cbiAgICAgICAgPC9kaXY+XG4gICAgICB9XG4gICAgfVxuICB9XG59XG4iXX0=

package/esm2022/process-bar-standard.interface.mjs

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoicHJvY2Vzcy1iYXItc3RhbmRhcmQuaW50ZXJmYWNlLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vLi4vbGlicy11aS9jb21wb25lbnRzL3Byb2Nlc3MtYmFyL3N0YW5kYXJkL3NyYy9wcm9jZXNzLWJhci1zdGFuZGFyZC5pbnRlcmZhY2UudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IiIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IFdyaXRhYmxlU2lnbmFsIH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5cbmV4cG9ydCBpbnRlcmZhY2UgSVByb2Nlc3NCYXJTdGFuZGFyZENvbmZpZ0RlZmF1bHRJbnRlcmZhY2Uge1xuICB3aWR0aD86IHN0cmluZztcbiAgaGVpZ2h0Pzogc3RyaW5nO1xuICBiYWNrZ3JvdW5kQ29sb3I/OiBzdHJpbmc7XG4gIHJhZGl1cz86IG51bWJlcjtcbn1cblxuZXhwb3J0IGludGVyZmFjZSBJUHJvY2Vzc0JhclN0YW5kYXJkSW50ZXJmYWNlIHtcbiAgd2lkdGg/OiBzdHJpbmc7XG4gIGhlaWdodD86IHN0cmluZztcbiAgYmFja2dyb3VuZENvbG9yPzogc3RyaW5nO1xuICByYWRpdXM/OiBudW1iZXI7XG4gIHRvdGFsVmFsdWU6IG51bWJlcjtcbiAgbW9kZT86ICdzdGFjaycgfCAnc2VwYXJhdGUnIHwgJ3N0ZXBzJztcbiAgY2xhc3NJbmNsdWRlPzogc3RyaW5nO1xuICBzaG93UGVyY2VudD86IGJvb2xlYW47XG4gIHBlcmNlbnRDbGFzcz86IHN0cmluZztcbiAgc3RlcHM6IFdyaXRhYmxlU2lnbmFsPEFycmF5PFdyaXRhYmxlU2lnbmFsPElQcm9jZXNzQmFyU3RhbmRhcmRTdGVwSW50ZXJmYWNlPj4+O1xufVxuXG5leHBvcnQgaW50ZXJmYWNlIElQcm9jZXNzQmFyU3RhbmRhcmRTdGVwSW50ZXJmYWNlIHtcbiAgY2xhc3NJbmNsdWRlPzogc3RyaW5nO1xuICBsYWJlbD86IHN0cmluZztcbiAgY2xhc3NMYWJlbD86IHN0cmluZztcbiAgdmFsdWU6IG51bWJlcjtcbiAgY29sb3I6IHN0cmluZztcbiAgc2hvd1BlcmNlbnQ/OiBib29sZWFuO1xuICBwZXJjZW50Q2xhc3M/OiBzdHJpbmc7XG59XG4iXX0=

package/fesm2022/libs-ui-components-process-bar-standard.mjs

@@ -0,0 +1,25 @@
+import * as i0 from '@angular/core';
+import { computed, input, inject, ChangeDetectionStrategy, Component } from '@angular/core';
+import { PROCESS_BAR_STANDARD_CONFIG_DEFAULT_TOKEN_INJECT } from '@libs-ui/utils';
+
+class LibsUiComponentsProcessBarStandardComponent {
+    width = computed(() => this.config().width ?? this.processBarConfigDefault?.width ?? '100%');
+    height = computed(() => this.config().height ?? this.processBarConfigDefault?.height ?? '12px');
+    backgroundColor = computed(() => this.config().backgroundColor ?? this.processBarConfigDefault?.backgroundColor ?? '#F8F9FA');
+    radius = computed(() => `${this.config().radius ?? this.processBarConfigDefault?.radius ?? 20}px`);
+    config = input.required();
+    processBarConfigDefault = inject(PROCESS_BAR_STANDARD_CONFIG_DEFAULT_TOKEN_INJECT, { optional: true });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: LibsUiComponentsProcessBarStandardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: LibsUiComponentsProcessBarStandardComponent, isStandalone: true, selector: "libs_ui-components-process_bar-standard", inputs: { config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "@let constHtmlSteps = config().steps() || [];\n@let constHtmlMode = config().mode || 'stack';\n@let constHtmlTotalValue = config().totalValue;\n\n@if (constHtmlSteps.length > 0 && constHtmlTotalValue) {\n  @switch (constHtmlMode) {\n    @case ('stack') {\n      <div\n        [class]=\"(config().classInclude || '') + ' libs-ui-process-bar-standard'\"\n        [style.width]=\"width()\"\n        [style.height]=\"height()\"\n        [style.backgroundColor]=\"backgroundColor()\"\n        [style.borderRadius]=\"radius()\">\n        @for (step of constHtmlSteps; track step()) {\n          @let constHtmlStepPercent = (step().value / constHtmlTotalValue) * 100;\n          <div\n            class=\"flex h-full items-center\"\n            [style.backgroundColor]=\"step().color\"\n            [style.width]=\"constHtmlStepPercent + '%'\">\n            @if (step().label) {\n              <span [class]=\"(step().classLabel || '') + ' libs-ui-font-h5r ml-[12px]'\">{{ step().label }}</span>\n            }\n          </div>\n        }\n      </div>\n    }\n\n    @case ('separate') {\n      @for (step of constHtmlSteps; track step()) {\n        @let constHtmlStepPercent = (step().value / constHtmlTotalValue) * 100;\n        @let constHtmlShowPercent = step().showPercent ?? config().showPercent;\n        @let constHtmlPercentClass = (step().percentClass ?? config().percentClass) || '';\n\n        <div\n          [class]=\"(config().classInclude || '') + ' flex w-full shrink-0 items-center relative my-[8px]'\"\n          [style.width]=\"width()\"\n          [style.height]=\"height()\">\n          <div class=\"flex w-full h-full relative\">\n            <div class=\"flex absolute w-full h-full\">\n              <div\n                class=\"libs-ui-process-bar-standard\"\n                [style.backgroundColor]=\"backgroundColor()\"\n                [style.borderRadius]=\"radius()\">\n                <div\n                  class=\"flex h-full\"\n                  [style.backgroundColor]=\"step().color\"\n                  [style.width]=\"constHtmlStepPercent + '%'\"\n                  [style.borderRadius]=\"radius()\"\n                  [class]=\"step().classInclude\"></div>\n                @if (step().label) {\n                  <div class=\"absolute top-0 left-0 w-full h-full flex items-center\">\n                    <span [class]=\"(step().classLabel || '') + ' libs-ui-font-h5r ml-[12px]'\">{{ step().label }}</span>\n                  </div>\n                }\n              </div>\n            </div>\n          </div>\n          @if (constHtmlShowPercent) {\n            <div [class]=\"constHtmlPercentClass + 'libs-ui-font-h5r ml-[8px]'\">\n              {{ constHtmlStepPercent + '%' }}\n            </div>\n          }\n        </div>\n      }\n    }\n  }\n}\n", styles: [".libs-ui-process-bar-standard{display:flex;position:relative;flex-shrink:0;flex-grow:0;align-items:center;overflow:hidden;width:100%;height:100%}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: LibsUiComponentsProcessBarStandardComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'libs_ui-components-process_bar-standard', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "@let constHtmlSteps = config().steps() || [];\n@let constHtmlMode = config().mode || 'stack';\n@let constHtmlTotalValue = config().totalValue;\n\n@if (constHtmlSteps.length > 0 && constHtmlTotalValue) {\n  @switch (constHtmlMode) {\n    @case ('stack') {\n      <div\n        [class]=\"(config().classInclude || '') + ' libs-ui-process-bar-standard'\"\n        [style.width]=\"width()\"\n        [style.height]=\"height()\"\n        [style.backgroundColor]=\"backgroundColor()\"\n        [style.borderRadius]=\"radius()\">\n        @for (step of constHtmlSteps; track step()) {\n          @let constHtmlStepPercent = (step().value / constHtmlTotalValue) * 100;\n          <div\n            class=\"flex h-full items-center\"\n            [style.backgroundColor]=\"step().color\"\n            [style.width]=\"constHtmlStepPercent + '%'\">\n            @if (step().label) {\n              <span [class]=\"(step().classLabel || '') + ' libs-ui-font-h5r ml-[12px]'\">{{ step().label }}</span>\n            }\n          </div>\n        }\n      </div>\n    }\n\n    @case ('separate') {\n      @for (step of constHtmlSteps; track step()) {\n        @let constHtmlStepPercent = (step().value / constHtmlTotalValue) * 100;\n        @let constHtmlShowPercent = step().showPercent ?? config().showPercent;\n        @let constHtmlPercentClass = (step().percentClass ?? config().percentClass) || '';\n\n        <div\n          [class]=\"(config().classInclude || '') + ' flex w-full shrink-0 items-center relative my-[8px]'\"\n          [style.width]=\"width()\"\n          [style.height]=\"height()\">\n          <div class=\"flex w-full h-full relative\">\n            <div class=\"flex absolute w-full h-full\">\n              <div\n                class=\"libs-ui-process-bar-standard\"\n                [style.backgroundColor]=\"backgroundColor()\"\n                [style.borderRadius]=\"radius()\">\n                <div\n                  class=\"flex h-full\"\n                  [style.backgroundColor]=\"step().color\"\n                  [style.width]=\"constHtmlStepPercent + '%'\"\n                  [style.borderRadius]=\"radius()\"\n                  [class]=\"step().classInclude\"></div>\n                @if (step().label) {\n                  <div class=\"absolute top-0 left-0 w-full h-full flex items-center\">\n                    <span [class]=\"(step().classLabel || '') + ' libs-ui-font-h5r ml-[12px]'\">{{ step().label }}</span>\n                  </div>\n                }\n              </div>\n            </div>\n          </div>\n          @if (constHtmlShowPercent) {\n            <div [class]=\"constHtmlPercentClass + 'libs-ui-font-h5r ml-[8px]'\">\n              {{ constHtmlStepPercent + '%' }}\n            </div>\n          }\n        </div>\n      }\n    }\n  }\n}\n", styles: [".libs-ui-process-bar-standard{display:flex;position:relative;flex-shrink:0;flex-grow:0;align-items:center;overflow:hidden;width:100%;height:100%}\n"] }]
+        }] });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { LibsUiComponentsProcessBarStandardComponent };
+//# sourceMappingURL=libs-ui-components-process-bar-standard.mjs.map

package/fesm2022/libs-ui-components-process-bar-standard.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"libs-ui-components-process-bar-standard.mjs","sources":["../../../../../../libs-ui/components/process-bar/standard/src/process-bar-standard.component.ts","../../../../../../libs-ui/components/process-bar/standard/src/process-bar-standard.component.html","../../../../../../libs-ui/components/process-bar/standard/src/libs-ui-components-process-bar-standard.ts"],"sourcesContent":["import { ChangeDetectionStrategy, Component, computed, inject, input } from '@angular/core';\nimport { PROCESS_BAR_STANDARD_CONFIG_DEFAULT_TOKEN_INJECT } from '@libs-ui/utils';\nimport { IProcessBarStandardConfigDefaultInterface, IProcessBarStandardInterface } from './process-bar-standard.interface';\n@Component({\n  // eslint-disable-next-line @angular-eslint/component-selector\n  selector: 'libs_ui-components-process_bar-standard',\n  standalone: true,\n  templateUrl: './process-bar-standard.component.html',\n  styleUrl: './process-bar-standard.component.css',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class LibsUiComponentsProcessBarStandardComponent {\n  protected width = computed(() => this.config().width ?? this.processBarConfigDefault?.width ?? '100%');\n  protected height = computed(() => this.config().height ?? this.processBarConfigDefault?.height ?? '12px');\n  protected backgroundColor = computed(() => this.config().backgroundColor ?? this.processBarConfigDefault?.backgroundColor ?? '#F8F9FA');\n  protected radius = computed(() => `${this.config().radius ?? this.processBarConfigDefault?.radius ?? 20}px`);\n\n  readonly config = input.required<IProcessBarStandardInterface>();\n\n  private readonly processBarConfigDefault = inject<IProcessBarStandardConfigDefaultInterface>(PROCESS_BAR_STANDARD_CONFIG_DEFAULT_TOKEN_INJECT, { optional: true });\n}\n","@let constHtmlSteps = config().steps() || [];\n@let constHtmlMode = config().mode || 'stack';\n@let constHtmlTotalValue = config().totalValue;\n\n@if (constHtmlSteps.length > 0 && constHtmlTotalValue) {\n  @switch (constHtmlMode) {\n    @case ('stack') {\n      <div\n        [class]=\"(config().classInclude || '') + ' libs-ui-process-bar-standard'\"\n        [style.width]=\"width()\"\n        [style.height]=\"height()\"\n        [style.backgroundColor]=\"backgroundColor()\"\n        [style.borderRadius]=\"radius()\">\n        @for (step of constHtmlSteps; track step()) {\n          @let constHtmlStepPercent = (step().value / constHtmlTotalValue) * 100;\n          <div\n            class=\"flex h-full items-center\"\n            [style.backgroundColor]=\"step().color\"\n            [style.width]=\"constHtmlStepPercent + '%'\">\n            @if (step().label) {\n              <span [class]=\"(step().classLabel || '') + ' libs-ui-font-h5r ml-[12px]'\">{{ step().label }}</span>\n            }\n          </div>\n        }\n      </div>\n    }\n\n    @case ('separate') {\n      @for (step of constHtmlSteps; track step()) {\n        @let constHtmlStepPercent = (step().value / constHtmlTotalValue) * 100;\n        @let constHtmlShowPercent = step().showPercent ?? config().showPercent;\n        @let constHtmlPercentClass = (step().percentClass ?? config().percentClass) || '';\n\n        <div\n          [class]=\"(config().classInclude || '') + ' flex w-full shrink-0 items-center relative my-[8px]'\"\n          [style.width]=\"width()\"\n          [style.height]=\"height()\">\n          <div class=\"flex w-full h-full relative\">\n            <div class=\"flex absolute w-full h-full\">\n              <div\n                class=\"libs-ui-process-bar-standard\"\n                [style.backgroundColor]=\"backgroundColor()\"\n                [style.borderRadius]=\"radius()\">\n                <div\n                  class=\"flex h-full\"\n                  [style.backgroundColor]=\"step().color\"\n                  [style.width]=\"constHtmlStepPercent + '%'\"\n                  [style.borderRadius]=\"radius()\"\n                  [class]=\"step().classInclude\"></div>\n                @if (step().label) {\n                  <div class=\"absolute top-0 left-0 w-full h-full flex items-center\">\n                    <span [class]=\"(step().classLabel || '') + ' libs-ui-font-h5r ml-[12px]'\">{{ step().label }}</span>\n                  </div>\n                }\n              </div>\n            </div>\n          </div>\n          @if (constHtmlShowPercent) {\n            <div [class]=\"constHtmlPercentClass + 'libs-ui-font-h5r ml-[8px]'\">\n              {{ constHtmlStepPercent + '%' }}\n            </div>\n          }\n        </div>\n      }\n    }\n  }\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;MAWa,2CAA2C,CAAA;IAC5C,KAAK,GAAG,QAAQ,CAAC,MAAM,IAAI,CAAC,MAAM,EAAE,CAAC,KAAK,IAAI,IAAI,CAAC,uBAAuB,EAAE,KAAK,IAAI,MAAM,CAAC;IAC5F,MAAM,GAAG,QAAQ,CAAC,MAAM,IAAI,CAAC,MAAM,EAAE,CAAC,MAAM,IAAI,IAAI,CAAC,uBAAuB,EAAE,MAAM,IAAI,MAAM,CAAC;IAC/F,eAAe,GAAG,QAAQ,CAAC,MAAM,IAAI,CAAC,MAAM,EAAE,CAAC,eAAe,IAAI,IAAI,CAAC,uBAAuB,EAAE,eAAe,IAAI,SAAS,CAAC;IAC7H,MAAM,GAAG,QAAQ,CAAC,MAAM,CAAA,EAAG,IAAI,CAAC,MAAM,EAAE,CAAC,MAAM,IAAI,IAAI,CAAC,uBAAuB,EAAE,MAAM,IAAI,EAAE,CAAA,EAAA,CAAI,CAAC;AAEnG,IAAA,MAAM,GAAG,KAAK,CAAC,QAAQ,EAAgC;IAE/C,uBAAuB,GAAG,MAAM,CAA4C,gDAAgD,EAAE,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC;wGARvJ,2CAA2C,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;AAA3C,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,SAAA,EAAA,IAAA,EAAA,2CAA2C,yOCXxD,2uFAmEA,EAAA,MAAA,EAAA,CAAA,qJAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,CAAA;;4FDxDa,2CAA2C,EAAA,UAAA,EAAA,CAAA;kBARvD,SAAS;AAEE,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,yCAAyC,EAAA,UAAA,EACvC,IAAI,EAAA,eAAA,EAGC,uBAAuB,CAAC,MAAM,EAAA,QAAA,EAAA,2uFAAA,EAAA,MAAA,EAAA,CAAA,qJAAA,CAAA,EAAA;;;AETjD;;AAEG;;;;"}

package/index.d.ts

@@ -0,0 +1 @@
+export * from './process-bar-standard.component';

package/package.json

@@ -0,0 +1,25 @@
+{
+  "name": "@libs-ui/components-process-bar-standard",
+  "version": "0.1.1-1",
+  "peerDependencies": {
+    "@angular/common": ">=18.0.0",
+    "@angular/core": ">=18.0.0"
+  },
+  "sideEffects": false,
+  "module": "fesm2022/libs-ui-components-process-bar-standard.mjs",
+  "typings": "index.d.ts",
+  "exports": {
+    "./package.json": {
+      "default": "./package.json"
+    },
+    ".": {
+      "types": "./index.d.ts",
+      "esm2022": "./esm2022/libs-ui-components-process-bar-standard.mjs",
+      "esm": "./esm2022/libs-ui-components-process-bar-standard.mjs",
+      "default": "./fesm2022/libs-ui-components-process-bar-standard.mjs"
+    }
+  },
+  "dependencies": {
+    "tslib": "^2.3.0"
+  }
+}

package/process-bar-standard.component.d.ts

@@ -0,0 +1,12 @@
+import { IProcessBarStandardInterface } from './process-bar-standard.interface';
+import * as i0 from "@angular/core";
+export declare class LibsUiComponentsProcessBarStandardComponent {
+    protected width: import("@angular/core").Signal<string>;
+    protected height: import("@angular/core").Signal<string>;
+    protected backgroundColor: import("@angular/core").Signal<string>;
+    protected radius: import("@angular/core").Signal<string>;
+    readonly config: import("@angular/core").InputSignal<IProcessBarStandardInterface>;
+    private readonly processBarConfigDefault;
+    static ɵfac: i0.ɵɵFactoryDeclaration<LibsUiComponentsProcessBarStandardComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<LibsUiComponentsProcessBarStandardComponent, "libs_ui-components-process_bar-standard", never, { "config": { "alias": "config"; "required": true; "isSignal": true; }; }, {}, never, never, true, never>;
+}

package/process-bar-standard.interface.d.ts

@@ -0,0 +1,28 @@
+import { WritableSignal } from '@angular/core';
+export interface IProcessBarStandardConfigDefaultInterface {
+    width?: string;
+    height?: string;
+    backgroundColor?: string;
+    radius?: number;
+}
+export interface IProcessBarStandardInterface {
+    width?: string;
+    height?: string;
+    backgroundColor?: string;
+    radius?: number;
+    totalValue: number;
+    mode?: 'stack' | 'separate' | 'steps';
+    classInclude?: string;
+    showPercent?: boolean;
+    percentClass?: string;
+    steps: WritableSignal<Array<WritableSignal<IProcessBarStandardStepInterface>>>;
+}
+export interface IProcessBarStandardStepInterface {
+    classInclude?: string;
+    label?: string;
+    classLabel?: string;
+    value: number;
+    color: string;
+    showPercent?: boolean;
+    percentClass?: string;
+}