@libs-ui/components-process-bar-steps 0.2.257

package/README.md

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

package/esm2022/index.mjs

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

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

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

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

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoicHJvY2Vzcy1iYXItc3RlcC5pbnRlcmZhY2UuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi8uLi9saWJzLXVpL2NvbXBvbmVudHMvcHJvY2Vzcy1iYXIvc3RlcHMvc3JjL3Byb2Nlc3MtYmFyLXN0ZXAuaW50ZXJmYWNlLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiIiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBXcml0YWJsZVNpZ25hbCB9IGZyb20gXCJAYW5ndWxhci9jb3JlXCI7XG5cbmV4cG9ydCBpbnRlcmZhY2UgSVByb2Nlc3NCYXJTdGVwQ29uZmlnSW50ZXJmYWNlIHtcbiAgcG9zaXRpb25MYWJlbD86ICd0b3AnIHwgJ2JvdHRvbScgfCAnaW5uZXInO1xuICBqdXN0aWZ5TGFiZWw/OiAnc3RhcnQnIHwgJ2NlbnRlcicgfCAnZW5kJztcbiAgd2lkdGhTdGVwPzogc3RyaW5nO1xuICBoZWlnaHRTdGVwPzogc3RyaW5nO1xuICBjbGFzc0luY2x1ZGU/OiBzdHJpbmc7XG4gIGJhY2tncm91bmRDb2xvclN0ZXA/OiBzdHJpbmc7XG4gIHJhZGl1c1N0ZXA/OiBudW1iZXI7XG4gIHRvdGFsVmFsdWU/OiBudW1iZXI7XG4gIHN0ZXBzOiBXcml0YWJsZVNpZ25hbDxBcnJheTxXcml0YWJsZVNpZ25hbDxJUHJvY2Vzc0JhclN0ZXBJbnRlcmZhY2U+Pj47XG59XG5cbmV4cG9ydCBpbnRlcmZhY2UgSVByb2Nlc3NCYXJTdGVwSW50ZXJmYWNlIHtcbiAgY2xhc3NJbmNsdWRlQ29udGFpbmVyPzogc3RyaW5nO1xuICBjbGFzc0luY2x1ZGVTdGVwPzogc3RyaW5nO1xuICBwcm9jZXNzQ29tcGxldGVkPzogYm9vbGVhbjtcbiAgcHJvY2Vzc0NvbXBsZXRlZENvbG9yPzogc3RyaW5nO1xuICBpc0N1cnJlbnRQcm9jZXNzPzogYm9vbGVhbjtcbiAgY3VycmVudFByb2Nlc3NDb2xvcj86IHN0cmluZztcbiAgbGFiZWw/OiBzdHJpbmc7XG4gIGNsYXNzTGFiZWw/OiBzdHJpbmc7XG4gIHZhbHVlPzogbnVtYmVyO1xufSJdfQ==

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

@@ -0,0 +1,18 @@
+import { ChangeDetectionStrategy, Component, computed, inject, input } from '@angular/core';
+import { PROCESS_BAR_STEPS_CONFIG_DEFAULT_TOKEN_INJECT } from '@libs-ui/utils';
+import * as i0 from "@angular/core";
+export class LibsUiComponentsProcessBarStepsComponent {
+    width = computed(() => this.config().widthStep ?? this.processBarConfigDefault?.widthStep ?? '80px');
+    height = computed(() => this.config().heightStep ?? this.processBarConfigDefault?.heightStep ?? '12px');
+    backgroundColor = computed(() => this.config().backgroundColorStep ?? this.processBarConfigDefault?.backgroundColorStep ?? '#F8F9FA');
+    radius = computed(() => `${this.config().radiusStep ?? this.processBarConfigDefault?.radiusStep ?? 20}px`);
+    config = input.required();
+    processBarConfigDefault = inject(PROCESS_BAR_STEPS_CONFIG_DEFAULT_TOKEN_INJECT, { optional: true });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: LibsUiComponentsProcessBarStepsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: LibsUiComponentsProcessBarStepsComponent, isStandalone: true, selector: "libs_ui-components-process_bar-steps", inputs: { config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "@let constHtmlPositionLabel = config().positionLabel || 'top';\n@let constHtmlJustifyLabel = config().justifyLabel || 'center';\n<div [class]=\"(config().classInclude || '') + ' libs-ui-process-bar-steps'\">\n  @for (step of config().steps(); track step();) {\n  @let constHtmlActiveBackground = step().processCompleted ? (step().processCompletedColor || '#33DA8A'): backgroundColor();\n   @let constHtmlCurrentProcessBackground = step().isCurrentProcess ? (step().currentProcessColor || '#4E8CF7') : '';\n   <div [class]=\"(step().classIncludeContainer || '') + ' flex'\"\n   [class.flex-col]=\"constHtmlPositionLabel === 'top' || constHtmlPositionLabel === 'bottom'\"\n   [style.alignItems]=\"constHtmlJustifyLabel\">\n     @if (step().label && constHtmlPositionLabel === 'top') {\n    <div [class]=\"(step().classLabel || '') + ' libs-ui-font-h5r flex mb-[4px]'\">\n      {{ step().label }}\n    </div>\n  }\n  <div [class]=\"(step().classIncludeStep || '') + ' process-bar-step flex items-center libs-ui-border-general'\"\n    [class.mr-[4px]]=\"!$last\"\n    [style.width]=\"width()\"\n    [style.height]=\"height()\"\n    [style.backgroundColor]=\"constHtmlCurrentProcessBackground || constHtmlActiveBackground\"\n    [style.borderRadius]=\"radius()\"\n    [style.justifyContent]=\"constHtmlJustifyLabel\">\n    @if (step().label && constHtmlPositionLabel === 'inner') {\n      <div [class]=\"(step().classLabel || '') + ' libs-ui-font-h5r flex'\">\n        {{ step().label }}\n      </div>\n    }\n  </div>\n  @if (step().label && constHtmlPositionLabel === 'bottom') {\n    <div [class]=\"(step().classLabel || '') + ' libs-ui-font-h5r flex mt-[4px]'\">\n      {{ step().label }}\n    </div>\n  }\n  </div>\n}\n</div>\n", styles: [".libs-ui-process-bar-steps{display:flex;flex-shrink:0}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: LibsUiComponentsProcessBarStepsComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'libs_ui-components-process_bar-steps', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "@let constHtmlPositionLabel = config().positionLabel || 'top';\n@let constHtmlJustifyLabel = config().justifyLabel || 'center';\n<div [class]=\"(config().classInclude || '') + ' libs-ui-process-bar-steps'\">\n  @for (step of config().steps(); track step();) {\n  @let constHtmlActiveBackground = step().processCompleted ? (step().processCompletedColor || '#33DA8A'): backgroundColor();\n   @let constHtmlCurrentProcessBackground = step().isCurrentProcess ? (step().currentProcessColor || '#4E8CF7') : '';\n   <div [class]=\"(step().classIncludeContainer || '') + ' flex'\"\n   [class.flex-col]=\"constHtmlPositionLabel === 'top' || constHtmlPositionLabel === 'bottom'\"\n   [style.alignItems]=\"constHtmlJustifyLabel\">\n     @if (step().label && constHtmlPositionLabel === 'top') {\n    <div [class]=\"(step().classLabel || '') + ' libs-ui-font-h5r flex mb-[4px]'\">\n      {{ step().label }}\n    </div>\n  }\n  <div [class]=\"(step().classIncludeStep || '') + ' process-bar-step flex items-center libs-ui-border-general'\"\n    [class.mr-[4px]]=\"!$last\"\n    [style.width]=\"width()\"\n    [style.height]=\"height()\"\n    [style.backgroundColor]=\"constHtmlCurrentProcessBackground || constHtmlActiveBackground\"\n    [style.borderRadius]=\"radius()\"\n    [style.justifyContent]=\"constHtmlJustifyLabel\">\n    @if (step().label && constHtmlPositionLabel === 'inner') {\n      <div [class]=\"(step().classLabel || '') + ' libs-ui-font-h5r flex'\">\n        {{ step().label }}\n      </div>\n    }\n  </div>\n  @if (step().label && constHtmlPositionLabel === 'bottom') {\n    <div [class]=\"(step().classLabel || '') + ' libs-ui-font-h5r flex mt-[4px]'\">\n      {{ step().label }}\n    </div>\n  }\n  </div>\n}\n</div>\n", styles: [".libs-ui-process-bar-steps{display:flex;flex-shrink:0}\n"] }]
+        }] });
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoicHJvY2Vzcy1iYXItc3RlcHMuY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vLi4vbGlicy11aS9jb21wb25lbnRzL3Byb2Nlc3MtYmFyL3N0ZXBzL3NyYy9wcm9jZXNzLWJhci1zdGVwcy5jb21wb25lbnQudHMiLCIuLi8uLi8uLi8uLi8uLi8uLi9saWJzLXVpL2NvbXBvbmVudHMvcHJvY2Vzcy1iYXIvc3RlcHMvc3JjL3Byb2Nlc3MtYmFyLXN0ZXBzLmNvbXBvbmVudC5odG1sIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBRSx1QkFBdUIsRUFBRSxTQUFTLEVBQUUsUUFBUSxFQUFFLE1BQU0sRUFBRSxLQUFLLEVBQUUsTUFBTSxlQUFlLENBQUM7QUFFNUYsT0FBTyxFQUFFLDZDQUE2QyxFQUFFLE1BQU0sZ0JBQWdCLENBQUM7O0FBUy9FLE1BQU0sT0FBTyx3Q0FBd0M7SUFDekMsS0FBSyxHQUFHLFFBQVEsQ0FBQyxHQUFHLEVBQUUsQ0FBQyxJQUFJLENBQUMsTUFBTSxFQUFFLENBQUMsU0FBUyxJQUFJLElBQUksQ0FBQyx1QkFBdUIsRUFBRSxTQUFTLElBQUksTUFBTSxDQUFDLENBQUM7SUFDckcsTUFBTSxHQUFHLFFBQVEsQ0FBQyxHQUFHLEVBQUUsQ0FBQyxJQUFJLENBQUMsTUFBTSxFQUFFLENBQUMsVUFBVSxJQUFJLElBQUksQ0FBQyx1QkFBdUIsRUFBRSxVQUFVLElBQUksTUFBTSxDQUFDLENBQUM7SUFDeEcsZUFBZSxHQUFHLFFBQVEsQ0FBQyxHQUFHLEVBQUUsQ0FBQyxJQUFJLENBQUMsTUFBTSxFQUFFLENBQUMsbUJBQW1CLElBQUksSUFBSSxDQUFDLHVCQUF1QixFQUFFLG1CQUFtQixJQUFJLFNBQVMsQ0FBQyxDQUFDO0lBQ3RJLE1BQU0sR0FBRyxRQUFRLENBQUMsR0FBRyxFQUFFLENBQUMsR0FBRyxJQUFJLENBQUMsTUFBTSxFQUFFLENBQUMsVUFBVSxJQUFJLElBQUksQ0FBQyx1QkFBdUIsRUFBRSxVQUFVLElBQUksRUFBRSxJQUFJLENBQUMsQ0FBQztJQUU1RyxNQUFNLEdBQUcsS0FBSyxDQUFDLFFBQVEsRUFBa0MsQ0FBQztJQUVsRCx1QkFBdUIsR0FBRyxNQUFNLENBQWlDLDZDQUE2QyxFQUFFLEVBQUUsUUFBUSxFQUFFLElBQUksRUFBRSxDQUFDLENBQUM7d0dBUjFJLHdDQUF3Qzs0RkFBeEMsd0NBQXdDLHNPQ1hyRCxpc0RBbUNBOzs0RkR4QmEsd0NBQXdDO2tCQVJwRCxTQUFTOytCQUVFLHNDQUFzQyxjQUNwQyxJQUFJLG1CQUdDLHVCQUF1QixDQUFDLE1BQU0iLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBDaGFuZ2VEZXRlY3Rpb25TdHJhdGVneSwgQ29tcG9uZW50LCBjb21wdXRlZCwgaW5qZWN0LCBpbnB1dCB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuaW1wb3J0IHsgSVByb2Nlc3NCYXJTdGVwQ29uZmlnSW50ZXJmYWNlIH0gZnJvbSAnLi9wcm9jZXNzLWJhci1zdGVwLmludGVyZmFjZSc7XG5pbXBvcnQgeyBQUk9DRVNTX0JBUl9TVEVQU19DT05GSUdfREVGQVVMVF9UT0tFTl9JTkpFQ1QgfSBmcm9tICdAbGlicy11aS91dGlscyc7XG5AQ29tcG9uZW50KHtcbiAgLy8gZXNsaW50LWRpc2FibGUtbmV4dC1saW5lIEBhbmd1bGFyLWVzbGludC9jb21wb25lbnQtc2VsZWN0b3JcbiAgc2VsZWN0b3I6ICdsaWJzX3VpLWNvbXBvbmVudHMtcHJvY2Vzc19iYXItc3RlcHMnLFxuICBzdGFuZGFsb25lOiB0cnVlLFxuICB0ZW1wbGF0ZVVybDogJy4vcHJvY2Vzcy1iYXItc3RlcHMuY29tcG9uZW50Lmh0bWwnLFxuICBzdHlsZVVybDogJy4vcHJvY2Vzcy1iYXItc3RlcHMuY29tcG9uZW50LmNzcycsXG4gIGNoYW5nZURldGVjdGlvbjogQ2hhbmdlRGV0ZWN0aW9uU3RyYXRlZ3kuT25QdXNoXG59KVxuZXhwb3J0IGNsYXNzIExpYnNVaUNvbXBvbmVudHNQcm9jZXNzQmFyU3RlcHNDb21wb25lbnQge1xuICBwcm90ZWN0ZWQgd2lkdGggPSBjb21wdXRlZCgoKSA9PiB0aGlzLmNvbmZpZygpLndpZHRoU3RlcCA/PyB0aGlzLnByb2Nlc3NCYXJDb25maWdEZWZhdWx0Py53aWR0aFN0ZXAgPz8gJzgwcHgnKTtcbiAgcHJvdGVjdGVkIGhlaWdodCA9IGNvbXB1dGVkKCgpID0+IHRoaXMuY29uZmlnKCkuaGVpZ2h0U3RlcCA/PyB0aGlzLnByb2Nlc3NCYXJDb25maWdEZWZhdWx0Py5oZWlnaHRTdGVwID8/ICcxMnB4Jyk7XG4gIHByb3RlY3RlZCBiYWNrZ3JvdW5kQ29sb3IgPSBjb21wdXRlZCgoKSA9PiB0aGlzLmNvbmZpZygpLmJhY2tncm91bmRDb2xvclN0ZXAgPz8gdGhpcy5wcm9jZXNzQmFyQ29uZmlnRGVmYXVsdD8uYmFja2dyb3VuZENvbG9yU3RlcCA/PyAnI0Y4RjlGQScpO1xuICBwcm90ZWN0ZWQgcmFkaXVzID0gY29tcHV0ZWQoKCkgPT4gYCR7dGhpcy5jb25maWcoKS5yYWRpdXNTdGVwID8/IHRoaXMucHJvY2Vzc0JhckNvbmZpZ0RlZmF1bHQ/LnJhZGl1c1N0ZXAgPz8gMjB9cHhgKTtcblxuICByZWFkb25seSBjb25maWcgPSBpbnB1dC5yZXF1aXJlZDxJUHJvY2Vzc0JhclN0ZXBDb25maWdJbnRlcmZhY2U+KCk7XG5cbiAgcHJpdmF0ZSByZWFkb25seSBwcm9jZXNzQmFyQ29uZmlnRGVmYXVsdCA9IGluamVjdDxJUHJvY2Vzc0JhclN0ZXBDb25maWdJbnRlcmZhY2U+KFBST0NFU1NfQkFSX1NURVBTX0NPTkZJR19ERUZBVUxUX1RPS0VOX0lOSkVDVCwgeyBvcHRpb25hbDogdHJ1ZSB9KTtcbn1cbiIsIkBsZXQgY29uc3RIdG1sUG9zaXRpb25MYWJlbCA9IGNvbmZpZygpLnBvc2l0aW9uTGFiZWwgfHwgJ3RvcCc7XG5AbGV0IGNvbnN0SHRtbEp1c3RpZnlMYWJlbCA9IGNvbmZpZygpLmp1c3RpZnlMYWJlbCB8fCAnY2VudGVyJztcbjxkaXYgW2NsYXNzXT1cIihjb25maWcoKS5jbGFzc0luY2x1ZGUgfHwgJycpICsgJyBsaWJzLXVpLXByb2Nlc3MtYmFyLXN0ZXBzJ1wiPlxuICBAZm9yIChzdGVwIG9mIGNvbmZpZygpLnN0ZXBzKCk7IHRyYWNrIHN0ZXAoKTspIHtcbiAgQGxldCBjb25zdEh0bWxBY3RpdmVCYWNrZ3JvdW5kID0gc3RlcCgpLnByb2Nlc3NDb21wbGV0ZWQgPyAoc3RlcCgpLnByb2Nlc3NDb21wbGV0ZWRDb2xvciB8fCAnIzMzREE4QScpOiBiYWNrZ3JvdW5kQ29sb3IoKTtcbiAgIEBsZXQgY29uc3RIdG1sQ3VycmVudFByb2Nlc3NCYWNrZ3JvdW5kID0gc3RlcCgpLmlzQ3VycmVudFByb2Nlc3MgPyAoc3RlcCgpLmN1cnJlbnRQcm9jZXNzQ29sb3IgfHwgJyM0RThDRjcnKSA6ICcnO1xuICAgPGRpdiBbY2xhc3NdPVwiKHN0ZXAoKS5jbGFzc0luY2x1ZGVDb250YWluZXIgfHwgJycpICsgJyBmbGV4J1wiXG4gICBbY2xhc3MuZmxleC1jb2xdPVwiY29uc3RIdG1sUG9zaXRpb25MYWJlbCA9PT0gJ3RvcCcgfHwgY29uc3RIdG1sUG9zaXRpb25MYWJlbCA9PT0gJ2JvdHRvbSdcIlxuICAgW3N0eWxlLmFsaWduSXRlbXNdPVwiY29uc3RIdG1sSnVzdGlmeUxhYmVsXCI+XG4gICAgIEBpZiAoc3RlcCgpLmxhYmVsICYmIGNvbnN0SHRtbFBvc2l0aW9uTGFiZWwgPT09ICd0b3AnKSB7XG4gICAgPGRpdiBbY2xhc3NdPVwiKHN0ZXAoKS5jbGFzc0xhYmVsIHx8ICcnKSArICcgbGlicy11aS1mb250LWg1ciBmbGV4IG1iLVs0cHhdJ1wiPlxuICAgICAge3sgc3RlcCgpLmxhYmVsIH19XG4gICAgPC9kaXY+XG4gIH1cbiAgPGRpdiBbY2xhc3NdPVwiKHN0ZXAoKS5jbGFzc0luY2x1ZGVTdGVwIHx8ICcnKSArICcgcHJvY2Vzcy1iYXItc3RlcCBmbGV4IGl0ZW1zLWNlbnRlciBsaWJzLXVpLWJvcmRlci1nZW5lcmFsJ1wiXG4gICAgW2NsYXNzLm1yLVs0cHhdXT1cIiEkbGFzdFwiXG4gICAgW3N0eWxlLndpZHRoXT1cIndpZHRoKClcIlxuICAgIFtzdHlsZS5oZWlnaHRdPVwiaGVpZ2h0KClcIlxuICAgIFtzdHlsZS5iYWNrZ3JvdW5kQ29sb3JdPVwiY29uc3RIdG1sQ3VycmVudFByb2Nlc3NCYWNrZ3JvdW5kIHx8IGNvbnN0SHRtbEFjdGl2ZUJhY2tncm91bmRcIlxuICAgIFtzdHlsZS5ib3JkZXJSYWRpdXNdPVwicmFkaXVzKClcIlxuICAgIFtzdHlsZS5qdXN0aWZ5Q29udGVudF09XCJjb25zdEh0bWxKdXN0aWZ5TGFiZWxcIj5cbiAgICBAaWYgKHN0ZXAoKS5sYWJlbCAmJiBjb25zdEh0bWxQb3NpdGlvbkxhYmVsID09PSAnaW5uZXInKSB7XG4gICAgICA8ZGl2IFtjbGFzc109XCIoc3RlcCgpLmNsYXNzTGFiZWwgfHwgJycpICsgJyBsaWJzLXVpLWZvbnQtaDVyIGZsZXgnXCI+XG4gICAgICAgIHt7IHN0ZXAoKS5sYWJlbCB9fVxuICAgICAgPC9kaXY+XG4gICAgfVxuICA8L2Rpdj5cbiAgQGlmIChzdGVwKCkubGFiZWwgJiYgY29uc3RIdG1sUG9zaXRpb25MYWJlbCA9PT0gJ2JvdHRvbScpIHtcbiAgICA8ZGl2IFtjbGFzc109XCIoc3RlcCgpLmNsYXNzTGFiZWwgfHwgJycpICsgJyBsaWJzLXVpLWZvbnQtaDVyIGZsZXggbXQtWzRweF0nXCI+XG4gICAgICB7eyBzdGVwKCkubGFiZWwgfX1cbiAgICA8L2Rpdj5cbiAgfVxuICA8L2Rpdj5cbn1cbjwvZGl2PlxuIl19

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

@@ -0,0 +1,25 @@
+import * as i0 from '@angular/core';
+import { computed, input, inject, ChangeDetectionStrategy, Component } from '@angular/core';
+import { PROCESS_BAR_STEPS_CONFIG_DEFAULT_TOKEN_INJECT } from '@libs-ui/utils';
+
+class LibsUiComponentsProcessBarStepsComponent {
+    width = computed(() => this.config().widthStep ?? this.processBarConfigDefault?.widthStep ?? '80px');
+    height = computed(() => this.config().heightStep ?? this.processBarConfigDefault?.heightStep ?? '12px');
+    backgroundColor = computed(() => this.config().backgroundColorStep ?? this.processBarConfigDefault?.backgroundColorStep ?? '#F8F9FA');
+    radius = computed(() => `${this.config().radiusStep ?? this.processBarConfigDefault?.radiusStep ?? 20}px`);
+    config = input.required();
+    processBarConfigDefault = inject(PROCESS_BAR_STEPS_CONFIG_DEFAULT_TOKEN_INJECT, { optional: true });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: LibsUiComponentsProcessBarStepsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: LibsUiComponentsProcessBarStepsComponent, isStandalone: true, selector: "libs_ui-components-process_bar-steps", inputs: { config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "@let constHtmlPositionLabel = config().positionLabel || 'top';\n@let constHtmlJustifyLabel = config().justifyLabel || 'center';\n<div [class]=\"(config().classInclude || '') + ' libs-ui-process-bar-steps'\">\n  @for (step of config().steps(); track step();) {\n  @let constHtmlActiveBackground = step().processCompleted ? (step().processCompletedColor || '#33DA8A'): backgroundColor();\n   @let constHtmlCurrentProcessBackground = step().isCurrentProcess ? (step().currentProcessColor || '#4E8CF7') : '';\n   <div [class]=\"(step().classIncludeContainer || '') + ' flex'\"\n   [class.flex-col]=\"constHtmlPositionLabel === 'top' || constHtmlPositionLabel === 'bottom'\"\n   [style.alignItems]=\"constHtmlJustifyLabel\">\n     @if (step().label && constHtmlPositionLabel === 'top') {\n    <div [class]=\"(step().classLabel || '') + ' libs-ui-font-h5r flex mb-[4px]'\">\n      {{ step().label }}\n    </div>\n  }\n  <div [class]=\"(step().classIncludeStep || '') + ' process-bar-step flex items-center libs-ui-border-general'\"\n    [class.mr-[4px]]=\"!$last\"\n    [style.width]=\"width()\"\n    [style.height]=\"height()\"\n    [style.backgroundColor]=\"constHtmlCurrentProcessBackground || constHtmlActiveBackground\"\n    [style.borderRadius]=\"radius()\"\n    [style.justifyContent]=\"constHtmlJustifyLabel\">\n    @if (step().label && constHtmlPositionLabel === 'inner') {\n      <div [class]=\"(step().classLabel || '') + ' libs-ui-font-h5r flex'\">\n        {{ step().label }}\n      </div>\n    }\n  </div>\n  @if (step().label && constHtmlPositionLabel === 'bottom') {\n    <div [class]=\"(step().classLabel || '') + ' libs-ui-font-h5r flex mt-[4px]'\">\n      {{ step().label }}\n    </div>\n  }\n  </div>\n}\n</div>\n", styles: [".libs-ui-process-bar-steps{display:flex;flex-shrink:0}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: LibsUiComponentsProcessBarStepsComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'libs_ui-components-process_bar-steps', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "@let constHtmlPositionLabel = config().positionLabel || 'top';\n@let constHtmlJustifyLabel = config().justifyLabel || 'center';\n<div [class]=\"(config().classInclude || '') + ' libs-ui-process-bar-steps'\">\n  @for (step of config().steps(); track step();) {\n  @let constHtmlActiveBackground = step().processCompleted ? (step().processCompletedColor || '#33DA8A'): backgroundColor();\n   @let constHtmlCurrentProcessBackground = step().isCurrentProcess ? (step().currentProcessColor || '#4E8CF7') : '';\n   <div [class]=\"(step().classIncludeContainer || '') + ' flex'\"\n   [class.flex-col]=\"constHtmlPositionLabel === 'top' || constHtmlPositionLabel === 'bottom'\"\n   [style.alignItems]=\"constHtmlJustifyLabel\">\n     @if (step().label && constHtmlPositionLabel === 'top') {\n    <div [class]=\"(step().classLabel || '') + ' libs-ui-font-h5r flex mb-[4px]'\">\n      {{ step().label }}\n    </div>\n  }\n  <div [class]=\"(step().classIncludeStep || '') + ' process-bar-step flex items-center libs-ui-border-general'\"\n    [class.mr-[4px]]=\"!$last\"\n    [style.width]=\"width()\"\n    [style.height]=\"height()\"\n    [style.backgroundColor]=\"constHtmlCurrentProcessBackground || constHtmlActiveBackground\"\n    [style.borderRadius]=\"radius()\"\n    [style.justifyContent]=\"constHtmlJustifyLabel\">\n    @if (step().label && constHtmlPositionLabel === 'inner') {\n      <div [class]=\"(step().classLabel || '') + ' libs-ui-font-h5r flex'\">\n        {{ step().label }}\n      </div>\n    }\n  </div>\n  @if (step().label && constHtmlPositionLabel === 'bottom') {\n    <div [class]=\"(step().classLabel || '') + ' libs-ui-font-h5r flex mt-[4px]'\">\n      {{ step().label }}\n    </div>\n  }\n  </div>\n}\n</div>\n", styles: [".libs-ui-process-bar-steps{display:flex;flex-shrink:0}\n"] }]
+        }] });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { LibsUiComponentsProcessBarStepsComponent };
+//# sourceMappingURL=libs-ui-components-process-bar-steps.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"libs-ui-components-process-bar-steps.mjs","sources":["../../../../../../libs-ui/components/process-bar/steps/src/process-bar-steps.component.ts","../../../../../../libs-ui/components/process-bar/steps/src/process-bar-steps.component.html","../../../../../../libs-ui/components/process-bar/steps/src/libs-ui-components-process-bar-steps.ts"],"sourcesContent":["import { ChangeDetectionStrategy, Component, computed, inject, input } from '@angular/core';\nimport { IProcessBarStepConfigInterface } from './process-bar-step.interface';\nimport { PROCESS_BAR_STEPS_CONFIG_DEFAULT_TOKEN_INJECT } from '@libs-ui/utils';\n@Component({\n  // eslint-disable-next-line @angular-eslint/component-selector\n  selector: 'libs_ui-components-process_bar-steps',\n  standalone: true,\n  templateUrl: './process-bar-steps.component.html',\n  styleUrl: './process-bar-steps.component.css',\n  changeDetection: ChangeDetectionStrategy.OnPush\n})\nexport class LibsUiComponentsProcessBarStepsComponent {\n  protected width = computed(() => this.config().widthStep ?? this.processBarConfigDefault?.widthStep ?? '80px');\n  protected height = computed(() => this.config().heightStep ?? this.processBarConfigDefault?.heightStep ?? '12px');\n  protected backgroundColor = computed(() => this.config().backgroundColorStep ?? this.processBarConfigDefault?.backgroundColorStep ?? '#F8F9FA');\n  protected radius = computed(() => `${this.config().radiusStep ?? this.processBarConfigDefault?.radiusStep ?? 20}px`);\n\n  readonly config = input.required<IProcessBarStepConfigInterface>();\n\n  private readonly processBarConfigDefault = inject<IProcessBarStepConfigInterface>(PROCESS_BAR_STEPS_CONFIG_DEFAULT_TOKEN_INJECT, { optional: true });\n}\n","@let constHtmlPositionLabel = config().positionLabel || 'top';\n@let constHtmlJustifyLabel = config().justifyLabel || 'center';\n<div [class]=\"(config().classInclude || '') + ' libs-ui-process-bar-steps'\">\n  @for (step of config().steps(); track step();) {\n  @let constHtmlActiveBackground = step().processCompleted ? (step().processCompletedColor || '#33DA8A'): backgroundColor();\n   @let constHtmlCurrentProcessBackground = step().isCurrentProcess ? (step().currentProcessColor || '#4E8CF7') : '';\n   <div [class]=\"(step().classIncludeContainer || '') + ' flex'\"\n   [class.flex-col]=\"constHtmlPositionLabel === 'top' || constHtmlPositionLabel === 'bottom'\"\n   [style.alignItems]=\"constHtmlJustifyLabel\">\n     @if (step().label && constHtmlPositionLabel === 'top') {\n    <div [class]=\"(step().classLabel || '') + ' libs-ui-font-h5r flex mb-[4px]'\">\n      {{ step().label }}\n    </div>\n  }\n  <div [class]=\"(step().classIncludeStep || '') + ' process-bar-step flex items-center libs-ui-border-general'\"\n    [class.mr-[4px]]=\"!$last\"\n    [style.width]=\"width()\"\n    [style.height]=\"height()\"\n    [style.backgroundColor]=\"constHtmlCurrentProcessBackground || constHtmlActiveBackground\"\n    [style.borderRadius]=\"radius()\"\n    [style.justifyContent]=\"constHtmlJustifyLabel\">\n    @if (step().label && constHtmlPositionLabel === 'inner') {\n      <div [class]=\"(step().classLabel || '') + ' libs-ui-font-h5r flex'\">\n        {{ step().label }}\n      </div>\n    }\n  </div>\n  @if (step().label && constHtmlPositionLabel === 'bottom') {\n    <div [class]=\"(step().classLabel || '') + ' libs-ui-font-h5r flex mt-[4px]'\">\n      {{ step().label }}\n    </div>\n  }\n  </div>\n}\n</div>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;MAWa,wCAAwC,CAAA;IACzC,KAAK,GAAG,QAAQ,CAAC,MAAM,IAAI,CAAC,MAAM,EAAE,CAAC,SAAS,IAAI,IAAI,CAAC,uBAAuB,EAAE,SAAS,IAAI,MAAM,CAAC;IACpG,MAAM,GAAG,QAAQ,CAAC,MAAM,IAAI,CAAC,MAAM,EAAE,CAAC,UAAU,IAAI,IAAI,CAAC,uBAAuB,EAAE,UAAU,IAAI,MAAM,CAAC;IACvG,eAAe,GAAG,QAAQ,CAAC,MAAM,IAAI,CAAC,MAAM,EAAE,CAAC,mBAAmB,IAAI,IAAI,CAAC,uBAAuB,EAAE,mBAAmB,IAAI,SAAS,CAAC;IACrI,MAAM,GAAG,QAAQ,CAAC,MAAM,CAAA,EAAG,IAAI,CAAC,MAAM,EAAE,CAAC,UAAU,IAAI,IAAI,CAAC,uBAAuB,EAAE,UAAU,IAAI,EAAE,CAAI,EAAA,CAAA,CAAC;AAE3G,IAAA,MAAM,GAAG,KAAK,CAAC,QAAQ,EAAkC;IAEjD,uBAAuB,GAAG,MAAM,CAAiC,6CAA6C,EAAE,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC;wGARzI,wCAAwC,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;AAAxC,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,SAAA,EAAA,IAAA,EAAA,wCAAwC,sOCXrD,isDAmCA,EAAA,MAAA,EAAA,CAAA,0DAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,CAAA;;4FDxBa,wCAAwC,EAAA,UAAA,EAAA,CAAA;kBARpD,SAAS;AAEE,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,sCAAsC,EACpC,UAAA,EAAA,IAAI,EAGC,eAAA,EAAA,uBAAuB,CAAC,MAAM,EAAA,QAAA,EAAA,isDAAA,EAAA,MAAA,EAAA,CAAA,0DAAA,CAAA,EAAA;;;AETjD;;AAEG;;;;"}

package/index.d.ts

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

package/package.json

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

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

@@ -0,0 +1,23 @@
+import { WritableSignal } from "@angular/core";
+export interface IProcessBarStepConfigInterface {
+    positionLabel?: 'top' | 'bottom' | 'inner';
+    justifyLabel?: 'start' | 'center' | 'end';
+    widthStep?: string;
+    heightStep?: string;
+    classInclude?: string;
+    backgroundColorStep?: string;
+    radiusStep?: number;
+    totalValue?: number;
+    steps: WritableSignal<Array<WritableSignal<IProcessBarStepInterface>>>;
+}
+export interface IProcessBarStepInterface {
+    classIncludeContainer?: string;
+    classIncludeStep?: string;
+    processCompleted?: boolean;
+    processCompletedColor?: string;
+    isCurrentProcess?: boolean;
+    currentProcessColor?: string;
+    label?: string;
+    classLabel?: string;
+    value?: number;
+}

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

@@ -0,0 +1,12 @@
+import { IProcessBarStepConfigInterface } from './process-bar-step.interface';
+import * as i0 from "@angular/core";
+export declare class LibsUiComponentsProcessBarStepsComponent {
+    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<IProcessBarStepConfigInterface>;
+    private readonly processBarConfigDefault;
+    static ɵfac: i0.ɵɵFactoryDeclaration<LibsUiComponentsProcessBarStepsComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<LibsUiComponentsProcessBarStepsComponent, "libs_ui-components-process_bar-steps", never, { "config": { "alias": "config"; "required": true; "isSignal": true; }; }, {}, never, never, true, never>;
+}