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

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,eyJ2ZXJzaW9uIjozLCJmaWxlIjoicHJvY2Vzcy1iYXItc3RlcC5pbnRlcmZhY2UuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi8uLi9saWJzLXVpL2NvbXBvbmVudHMvcHJvY2Vzcy1iYXIvc3RlcHMvc3JjL3Byb2Nlc3MtYmFyLXN0ZXAuaW50ZXJmYWNlLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiIiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBXcml0YWJsZVNpZ25hbCB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuXG5leHBvcnQgaW50ZXJmYWNlIElQcm9jZXNzQmFyU3RlcENvbmZpZ0ludGVyZmFjZSB7XG4gIHBvc2l0aW9uTGFiZWw/OiAndG9wJyB8ICdib3R0b20nIHwgJ2lubmVyJztcbiAganVzdGlmeUxhYmVsPzogJ3N0YXJ0JyB8ICdjZW50ZXInIHwgJ2VuZCc7XG4gIHdpZHRoU3RlcD86IHN0cmluZztcbiAgaGVpZ2h0U3RlcD86IHN0cmluZztcbiAgY2xhc3NJbmNsdWRlPzogc3RyaW5nO1xuICBiYWNrZ3JvdW5kQ29sb3JTdGVwPzogc3RyaW5nO1xuICByYWRpdXNTdGVwPzogbnVtYmVyO1xuICBzaW1wbGVDb25maWc/OiBXcml0YWJsZVNpZ25hbDxJUHJvY2Vzc0JhclN0ZXBTaW1wbGVDb25maWdJbnRlcmZhY2U+O1xuICBhZHZhbmNlZENvbmZpZz86IFdyaXRhYmxlU2lnbmFsPEFycmF5PFdyaXRhYmxlU2lnbmFsPElQcm9jZXNzQmFyU3RlcEFkdmFuY2VkQ29uZmlnSW50ZXJmYWNlPj4+O1xufVxuXG5leHBvcnQgaW50ZXJmYWNlIElQcm9jZXNzQmFyU3RlcEFkdmFuY2VkQ29uZmlnSW50ZXJmYWNlIHtcbiAgY2xhc3NJbmNsdWRlQ29udGFpbmVyPzogc3RyaW5nO1xuICBjbGFzc0luY2x1ZGVTdGVwPzogc3RyaW5nO1xuICBwcm9jZXNzQ29tcGxldGVkPzogYm9vbGVhbjtcbiAgcHJvY2Vzc0NvbXBsZXRlZENvbG9yPzogc3RyaW5nO1xuICBpc0N1cnJlbnRQcm9jZXNzPzogYm9vbGVhbjtcbiAgY3VycmVudFByb2Nlc3NDb2xvcj86IHN0cmluZztcbiAgbGFiZWw/OiBzdHJpbmc7XG4gIGNsYXNzTGFiZWw/OiBzdHJpbmc7XG59XG5cbmV4cG9ydCBpbnRlcmZhY2UgSVByb2Nlc3NCYXJTdGVwU2ltcGxlQ29uZmlnSW50ZXJmYWNlIHtcbiAgdG90YWxTdGVwOiBudW1iZXI7XG4gIGN1cnJlbnRTdGVwOiBudW1iZXI7XG4gIGNvbXBsZXRlZFN0ZXA/OiBudW1iZXI7XG4gIGN1cnJlbnRTdGVwQ29sb3I6IHN0cmluZztcbiAgc3RlcENvbXBsZXRlZENvbG9yOiBzdHJpbmc7XG59XG4iXX0=

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

@@ -0,0 +1,36 @@
+import { ChangeDetectionStrategy, Component, computed, inject, input, signal } from '@angular/core';
+import { isNil, 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`);
+    simpleSteps = computed(() => {
+        const simpleConfig = this.config().simpleConfig?.();
+        if (!simpleConfig) {
+            return [];
+        }
+        return Array.from({ length: simpleConfig.totalStep }, (_, index) => {
+            index += 1;
+            if (isNil(simpleConfig.completedStep)) {
+                simpleConfig.completedStep = simpleConfig.currentStep;
+            }
+            return signal({
+                isCurrentProcess: index === simpleConfig.currentStep,
+                processCompleted: index <= simpleConfig.completedStep,
+                currentProcessColor: simpleConfig.currentStepColor,
+                processCompletedColor: simpleConfig.stepCompletedColor,
+            });
+        });
+    });
+    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.14", ngImport: i0, type: LibsUiComponentsProcessBarStepsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", 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@let constHtmlSteps = config().advancedConfig?.() || simpleSteps();\n<div [class]=\"(config().classInclude || '') + ' libs-ui-process-bar-steps'\">\n  @if (constHtmlSteps) {\n    @for (step of constHtmlSteps; track step()) {\n      @let constHtmlActiveBackground = step().processCompleted ? step().processCompletedColor || '#33DA8A' : '';\n      @let constHtmlCurrentProcessBackground = step().isCurrentProcess ? step().currentProcessColor || '#4E8CF7' : backgroundColor();\n      <div\n        [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\n          [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]=\"constHtmlActiveBackground || constHtmlCurrentProcessBackground\"\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  }\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.14", 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@let constHtmlSteps = config().advancedConfig?.() || simpleSteps();\n<div [class]=\"(config().classInclude || '') + ' libs-ui-process-bar-steps'\">\n  @if (constHtmlSteps) {\n    @for (step of constHtmlSteps; track step()) {\n      @let constHtmlActiveBackground = step().processCompleted ? step().processCompletedColor || '#33DA8A' : '';\n      @let constHtmlCurrentProcessBackground = step().isCurrentProcess ? step().currentProcessColor || '#4E8CF7' : backgroundColor();\n      <div\n        [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\n          [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]=\"constHtmlActiveBackground || constHtmlCurrentProcessBackground\"\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  }\n</div>\n", styles: [".libs-ui-process-bar-steps{display:flex;flex-shrink:0}\n"] }]
+        }] });
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoicHJvY2Vzcy1iYXItc3RlcHMuY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vLi4vbGlicy11aS9jb21wb25lbnRzL3Byb2Nlc3MtYmFyL3N0ZXBzL3NyYy9wcm9jZXNzLWJhci1zdGVwcy5jb21wb25lbnQudHMiLCIuLi8uLi8uLi8uLi8uLi8uLi9saWJzLXVpL2NvbXBvbmVudHMvcHJvY2Vzcy1iYXIvc3RlcHMvc3JjL3Byb2Nlc3MtYmFyLXN0ZXBzLmNvbXBvbmVudC5odG1sIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBRSx1QkFBdUIsRUFBRSxTQUFTLEVBQUUsUUFBUSxFQUFFLE1BQU0sRUFBRSxLQUFLLEVBQUUsTUFBTSxFQUFrQixNQUFNLGVBQWUsQ0FBQztBQUVwSCxPQUFPLEVBQUUsS0FBSyxFQUFFLDZDQUE2QyxFQUFFLE1BQU0sZ0JBQWdCLENBQUM7O0FBU3RGLE1BQU0sT0FBTyx3Q0FBd0M7SUFDekMsS0FBSyxHQUFHLFFBQVEsQ0FBQyxHQUFHLEVBQUUsQ0FBQyxJQUFJLENBQUMsTUFBTSxFQUFFLENBQUMsU0FBUyxJQUFJLElBQUksQ0FBQyx1QkFBdUIsRUFBRSxTQUFTLElBQUksTUFBTSxDQUFDLENBQUM7SUFDckcsTUFBTSxHQUFHLFFBQVEsQ0FBQyxHQUFHLEVBQUUsQ0FBQyxJQUFJLENBQUMsTUFBTSxFQUFFLENBQUMsVUFBVSxJQUFJLElBQUksQ0FBQyx1QkFBdUIsRUFBRSxVQUFVLElBQUksTUFBTSxDQUFDLENBQUM7SUFDeEcsZUFBZSxHQUFHLFFBQVEsQ0FBQyxHQUFHLEVBQUUsQ0FBQyxJQUFJLENBQUMsTUFBTSxFQUFFLENBQUMsbUJBQW1CLElBQUksSUFBSSxDQUFDLHVCQUF1QixFQUFFLG1CQUFtQixJQUFJLFNBQVMsQ0FBQyxDQUFDO0lBQ3RJLE1BQU0sR0FBRyxRQUFRLENBQUMsR0FBRyxFQUFFLENBQUMsR0FBRyxJQUFJLENBQUMsTUFBTSxFQUFFLENBQUMsVUFBVSxJQUFJLElBQUksQ0FBQyx1QkFBdUIsRUFBRSxVQUFVLElBQUksRUFBRSxJQUFJLENBQUMsQ0FBQztJQUMzRyxXQUFXLEdBQUcsUUFBUSxDQUFnRSxHQUFHLEVBQUU7UUFDbkcsTUFBTSxZQUFZLEdBQUcsSUFBSSxDQUFDLE1BQU0sRUFBRSxDQUFDLFlBQVksRUFBRSxFQUFFLENBQUM7UUFDcEQsSUFBSSxDQUFDLFlBQVksRUFBRSxDQUFDO1lBQ2xCLE9BQU8sRUFBRSxDQUFDO1FBQ1osQ0FBQztRQUNELE9BQU8sS0FBSyxDQUFDLElBQUksQ0FBQyxFQUFFLE1BQU0sRUFBRSxZQUFZLENBQUMsU0FBUyxFQUFFLEVBQUUsQ0FBQyxDQUFDLEVBQUUsS0FBSyxFQUFFLEVBQUU7WUFDakUsS0FBSyxJQUFJLENBQUMsQ0FBQztZQUNYLElBQUksS0FBSyxDQUFDLFlBQVksQ0FBQyxhQUFhLENBQUMsRUFBRSxDQUFDO2dCQUN0QyxZQUFZLENBQUMsYUFBYSxHQUFHLFlBQVksQ0FBQyxXQUFXLENBQUM7WUFDeEQsQ0FBQztZQUNELE9BQU8sTUFBTSxDQUFDO2dCQUNaLGdCQUFnQixFQUFFLEtBQUssS0FBSyxZQUFZLENBQUMsV0FBVztnQkFDcEQsZ0JBQWdCLEVBQUUsS0FBSyxJQUFJLFlBQVksQ0FBQyxhQUFhO2dCQUNyRCxtQkFBbUIsRUFBRSxZQUFZLENBQUMsZ0JBQWdCO2dCQUNsRCxxQkFBcUIsRUFBRSxZQUFZLENBQUMsa0JBQWtCO2FBQ3ZELENBQUMsQ0FBQztRQUNMLENBQUMsQ0FBQyxDQUFDO0lBQ0wsQ0FBQyxDQUFDLENBQUM7SUFFTSxNQUFNLEdBQUcsS0FBSyxDQUFDLFFBQVEsRUFBa0MsQ0FBQztJQUVsRCx1QkFBdUIsR0FBRyxNQUFNLENBQWlDLDZDQUE2QyxFQUFFLEVBQUUsUUFBUSxFQUFFLElBQUksRUFBRSxDQUFDLENBQUM7d0dBMUIxSSx3Q0FBd0M7NEZBQXhDLHdDQUF3QyxzT0NYckQsdzlEQXdDQTs7NEZEN0JhLHdDQUF3QztrQkFScEQsU0FBUzsrQkFFRSxzQ0FBc0MsY0FDcEMsSUFBSSxtQkFHQyx1QkFBdUIsQ0FBQyxNQUFNIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgQ2hhbmdlRGV0ZWN0aW9uU3RyYXRlZ3ksIENvbXBvbmVudCwgY29tcHV0ZWQsIGluamVjdCwgaW5wdXQsIHNpZ25hbCwgV3JpdGFibGVTaWduYWwgfSBmcm9tICdAYW5ndWxhci9jb3JlJztcbmltcG9ydCB7IElQcm9jZXNzQmFyU3RlcEFkdmFuY2VkQ29uZmlnSW50ZXJmYWNlLCBJUHJvY2Vzc0JhclN0ZXBDb25maWdJbnRlcmZhY2UgfSBmcm9tICcuL3Byb2Nlc3MtYmFyLXN0ZXAuaW50ZXJmYWNlJztcbmltcG9ydCB7IGlzTmlsLCBQUk9DRVNTX0JBUl9TVEVQU19DT05GSUdfREVGQVVMVF9UT0tFTl9JTkpFQ1QgfSBmcm9tICdAbGlicy11aS91dGlscyc7XG5AQ29tcG9uZW50KHtcbiAgLy8gZXNsaW50LWRpc2FibGUtbmV4dC1saW5lIEBhbmd1bGFyLWVzbGludC9jb21wb25lbnQtc2VsZWN0b3JcbiAgc2VsZWN0b3I6ICdsaWJzX3VpLWNvbXBvbmVudHMtcHJvY2Vzc19iYXItc3RlcHMnLFxuICBzdGFuZGFsb25lOiB0cnVlLFxuICB0ZW1wbGF0ZVVybDogJy4vcHJvY2Vzcy1iYXItc3RlcHMuY29tcG9uZW50Lmh0bWwnLFxuICBzdHlsZVVybDogJy4vcHJvY2Vzcy1iYXItc3RlcHMuY29tcG9uZW50LmNzcycsXG4gIGNoYW5nZURldGVjdGlvbjogQ2hhbmdlRGV0ZWN0aW9uU3RyYXRlZ3kuT25QdXNoLFxufSlcbmV4cG9ydCBjbGFzcyBMaWJzVWlDb21wb25lbnRzUHJvY2Vzc0JhclN0ZXBzQ29tcG9uZW50IHtcbiAgcHJvdGVjdGVkIHdpZHRoID0gY29tcHV0ZWQoKCkgPT4gdGhpcy5jb25maWcoKS53aWR0aFN0ZXAgPz8gdGhpcy5wcm9jZXNzQmFyQ29uZmlnRGVmYXVsdD8ud2lkdGhTdGVwID8/ICc4MHB4Jyk7XG4gIHByb3RlY3RlZCBoZWlnaHQgPSBjb21wdXRlZCgoKSA9PiB0aGlzLmNvbmZpZygpLmhlaWdodFN0ZXAgPz8gdGhpcy5wcm9jZXNzQmFyQ29uZmlnRGVmYXVsdD8uaGVpZ2h0U3RlcCA/PyAnMTJweCcpO1xuICBwcm90ZWN0ZWQgYmFja2dyb3VuZENvbG9yID0gY29tcHV0ZWQoKCkgPT4gdGhpcy5jb25maWcoKS5iYWNrZ3JvdW5kQ29sb3JTdGVwID8/IHRoaXMucHJvY2Vzc0JhckNvbmZpZ0RlZmF1bHQ/LmJhY2tncm91bmRDb2xvclN0ZXAgPz8gJyNGOEY5RkEnKTtcbiAgcHJvdGVjdGVkIHJhZGl1cyA9IGNvbXB1dGVkKCgpID0+IGAke3RoaXMuY29uZmlnKCkucmFkaXVzU3RlcCA/PyB0aGlzLnByb2Nlc3NCYXJDb25maWdEZWZhdWx0Py5yYWRpdXNTdGVwID8/IDIwfXB4YCk7XG4gIHByb3RlY3RlZCBzaW1wbGVTdGVwcyA9IGNvbXB1dGVkPEFycmF5PFdyaXRhYmxlU2lnbmFsPElQcm9jZXNzQmFyU3RlcEFkdmFuY2VkQ29uZmlnSW50ZXJmYWNlPj4+KCgpID0+IHtcbiAgICBjb25zdCBzaW1wbGVDb25maWcgPSB0aGlzLmNvbmZpZygpLnNpbXBsZUNvbmZpZz8uKCk7XG4gICAgaWYgKCFzaW1wbGVDb25maWcpIHtcbiAgICAgIHJldHVybiBbXTtcbiAgICB9XG4gICAgcmV0dXJuIEFycmF5LmZyb20oeyBsZW5ndGg6IHNpbXBsZUNvbmZpZy50b3RhbFN0ZXAgfSwgKF8sIGluZGV4KSA9PiB7XG4gICAgICBpbmRleCArPSAxO1xuICAgICAgaWYgKGlzTmlsKHNpbXBsZUNvbmZpZy5jb21wbGV0ZWRTdGVwKSkge1xuICAgICAgICBzaW1wbGVDb25maWcuY29tcGxldGVkU3RlcCA9IHNpbXBsZUNvbmZpZy5jdXJyZW50U3RlcDtcbiAgICAgIH1cbiAgICAgIHJldHVybiBzaWduYWwoe1xuICAgICAgICBpc0N1cnJlbnRQcm9jZXNzOiBpbmRleCA9PT0gc2ltcGxlQ29uZmlnLmN1cnJlbnRTdGVwLFxuICAgICAgICBwcm9jZXNzQ29tcGxldGVkOiBpbmRleCA8PSBzaW1wbGVDb25maWcuY29tcGxldGVkU3RlcCxcbiAgICAgICAgY3VycmVudFByb2Nlc3NDb2xvcjogc2ltcGxlQ29uZmlnLmN1cnJlbnRTdGVwQ29sb3IsXG4gICAgICAgIHByb2Nlc3NDb21wbGV0ZWRDb2xvcjogc2ltcGxlQ29uZmlnLnN0ZXBDb21wbGV0ZWRDb2xvcixcbiAgICAgIH0pO1xuICAgIH0pO1xuICB9KTtcblxuICByZWFkb25seSBjb25maWcgPSBpbnB1dC5yZXF1aXJlZDxJUHJvY2Vzc0JhclN0ZXBDb25maWdJbnRlcmZhY2U+KCk7XG5cbiAgcHJpdmF0ZSByZWFkb25seSBwcm9jZXNzQmFyQ29uZmlnRGVmYXVsdCA9IGluamVjdDxJUHJvY2Vzc0JhclN0ZXBDb25maWdJbnRlcmZhY2U+KFBST0NFU1NfQkFSX1NURVBTX0NPTkZJR19ERUZBVUxUX1RPS0VOX0lOSkVDVCwgeyBvcHRpb25hbDogdHJ1ZSB9KTtcbn1cbiIsIkBsZXQgY29uc3RIdG1sUG9zaXRpb25MYWJlbCA9IGNvbmZpZygpLnBvc2l0aW9uTGFiZWwgfHwgJ3RvcCc7XG5AbGV0IGNvbnN0SHRtbEp1c3RpZnlMYWJlbCA9IGNvbmZpZygpLmp1c3RpZnlMYWJlbCB8fCAnY2VudGVyJztcbkBsZXQgY29uc3RIdG1sU3RlcHMgPSBjb25maWcoKS5hZHZhbmNlZENvbmZpZz8uKCkgfHwgc2ltcGxlU3RlcHMoKTtcbjxkaXYgW2NsYXNzXT1cIihjb25maWcoKS5jbGFzc0luY2x1ZGUgfHwgJycpICsgJyBsaWJzLXVpLXByb2Nlc3MtYmFyLXN0ZXBzJ1wiPlxuICBAaWYgKGNvbnN0SHRtbFN0ZXBzKSB7XG4gICAgQGZvciAoc3RlcCBvZiBjb25zdEh0bWxTdGVwczsgdHJhY2sgc3RlcCgpKSB7XG4gICAgICBAbGV0IGNvbnN0SHRtbEFjdGl2ZUJhY2tncm91bmQgPSBzdGVwKCkucHJvY2Vzc0NvbXBsZXRlZCA/IHN0ZXAoKS5wcm9jZXNzQ29tcGxldGVkQ29sb3IgfHwgJyMzM0RBOEEnIDogJyc7XG4gICAgICBAbGV0IGNvbnN0SHRtbEN1cnJlbnRQcm9jZXNzQmFja2dyb3VuZCA9IHN0ZXAoKS5pc0N1cnJlbnRQcm9jZXNzID8gc3RlcCgpLmN1cnJlbnRQcm9jZXNzQ29sb3IgfHwgJyM0RThDRjcnIDogYmFja2dyb3VuZENvbG9yKCk7XG4gICAgICA8ZGl2XG4gICAgICAgIFtjbGFzc109XCIoc3RlcCgpLmNsYXNzSW5jbHVkZUNvbnRhaW5lciB8fCAnJykgKyAnIGZsZXgnXCJcbiAgICAgICAgW2NsYXNzLmZsZXgtY29sXT1cImNvbnN0SHRtbFBvc2l0aW9uTGFiZWwgPT09ICd0b3AnIHx8IGNvbnN0SHRtbFBvc2l0aW9uTGFiZWwgPT09ICdib3R0b20nXCJcbiAgICAgICAgW3N0eWxlLmFsaWduSXRlbXNdPVwiY29uc3RIdG1sSnVzdGlmeUxhYmVsXCI+XG4gICAgICAgIEBpZiAoc3RlcCgpLmxhYmVsICYmIGNvbnN0SHRtbFBvc2l0aW9uTGFiZWwgPT09ICd0b3AnKSB7XG4gICAgICAgICAgPGRpdiBbY2xhc3NdPVwiKHN0ZXAoKS5jbGFzc0xhYmVsIHx8ICcnKSArICcgbGlicy11aS1mb250LWg1ciBmbGV4IG1iLVs0cHhdJ1wiPlxuICAgICAgICAgICAge3sgc3RlcCgpLmxhYmVsIH19XG4gICAgICAgICAgPC9kaXY+XG4gICAgICAgIH1cbiAgICAgICAgPGRpdlxuICAgICAgICAgIFtjbGFzc109XCIoc3RlcCgpLmNsYXNzSW5jbHVkZVN0ZXAgfHwgJycpICsgJyBwcm9jZXNzLWJhci1zdGVwIGZsZXggaXRlbXMtY2VudGVyIGxpYnMtdWktYm9yZGVyLWdlbmVyYWwnXCJcbiAgICAgICAgICBbY2xhc3MubXItWzRweF1dPVwiISRsYXN0XCJcbiAgICAgICAgICBbc3R5bGUud2lkdGhdPVwid2lkdGgoKVwiXG4gICAgICAgICAgW3N0eWxlLmhlaWdodF09XCJoZWlnaHQoKVwiXG4gICAgICAgICAgW3N0eWxlLmJhY2tncm91bmRDb2xvcl09XCJjb25zdEh0bWxBY3RpdmVCYWNrZ3JvdW5kIHx8IGNvbnN0SHRtbEN1cnJlbnRQcm9jZXNzQmFja2dyb3VuZFwiXG4gICAgICAgICAgW3N0eWxlLmJvcmRlclJhZGl1c109XCJyYWRpdXMoKVwiXG4gICAgICAgICAgW3N0eWxlLmp1c3RpZnlDb250ZW50XT1cImNvbnN0SHRtbEp1c3RpZnlMYWJlbFwiPlxuICAgICAgICAgIEBpZiAoc3RlcCgpLmxhYmVsICYmIGNvbnN0SHRtbFBvc2l0aW9uTGFiZWwgPT09ICdpbm5lcicpIHtcbiAgICAgICAgICAgIDxkaXYgW2NsYXNzXT1cIihzdGVwKCkuY2xhc3NMYWJlbCB8fCAnJykgKyAnIGxpYnMtdWktZm9udC1oNXIgZmxleCdcIj5cbiAgICAgICAgICAgICAge3sgc3RlcCgpLmxhYmVsIH19XG4gICAgICAgICAgICA8L2Rpdj5cbiAgICAgICAgICB9XG4gICAgICAgIDwvZGl2PlxuICAgICAgICBAaWYgKHN0ZXAoKS5sYWJlbCAmJiBjb25zdEh0bWxQb3NpdGlvbkxhYmVsID09PSAnYm90dG9tJykge1xuICAgICAgICAgIDxkaXYgW2NsYXNzXT1cIihzdGVwKCkuY2xhc3NMYWJlbCB8fCAnJykgKyAnIGxpYnMtdWktZm9udC1oNXIgZmxleCBtdC1bNHB4XSdcIj5cbiAgICAgICAgICAgIHt7IHN0ZXAoKS5sYWJlbCB9fVxuICAgICAgICAgIDwvZGl2PlxuICAgICAgICB9XG4gICAgICA8L2Rpdj5cbiAgICB9XG4gIH1cbjwvZGl2PlxuIl19

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

@@ -0,0 +1,43 @@
+import * as i0 from '@angular/core';
+import { computed, signal, input, inject, ChangeDetectionStrategy, Component } from '@angular/core';
+import { isNil, 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`);
+    simpleSteps = computed(() => {
+        const simpleConfig = this.config().simpleConfig?.();
+        if (!simpleConfig) {
+            return [];
+        }
+        return Array.from({ length: simpleConfig.totalStep }, (_, index) => {
+            index += 1;
+            if (isNil(simpleConfig.completedStep)) {
+                simpleConfig.completedStep = simpleConfig.currentStep;
+            }
+            return signal({
+                isCurrentProcess: index === simpleConfig.currentStep,
+                processCompleted: index <= simpleConfig.completedStep,
+                currentProcessColor: simpleConfig.currentStepColor,
+                processCompletedColor: simpleConfig.stepCompletedColor,
+            });
+        });
+    });
+    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.14", ngImport: i0, type: LibsUiComponentsProcessBarStepsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", 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@let constHtmlSteps = config().advancedConfig?.() || simpleSteps();\n<div [class]=\"(config().classInclude || '') + ' libs-ui-process-bar-steps'\">\n  @if (constHtmlSteps) {\n    @for (step of constHtmlSteps; track step()) {\n      @let constHtmlActiveBackground = step().processCompleted ? step().processCompletedColor || '#33DA8A' : '';\n      @let constHtmlCurrentProcessBackground = step().isCurrentProcess ? step().currentProcessColor || '#4E8CF7' : backgroundColor();\n      <div\n        [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\n          [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]=\"constHtmlActiveBackground || constHtmlCurrentProcessBackground\"\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  }\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.14", 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@let constHtmlSteps = config().advancedConfig?.() || simpleSteps();\n<div [class]=\"(config().classInclude || '') + ' libs-ui-process-bar-steps'\">\n  @if (constHtmlSteps) {\n    @for (step of constHtmlSteps; track step()) {\n      @let constHtmlActiveBackground = step().processCompleted ? step().processCompletedColor || '#33DA8A' : '';\n      @let constHtmlCurrentProcessBackground = step().isCurrentProcess ? step().currentProcessColor || '#4E8CF7' : backgroundColor();\n      <div\n        [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\n          [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]=\"constHtmlActiveBackground || constHtmlCurrentProcessBackground\"\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  }\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, signal, WritableSignal } from '@angular/core';\nimport { IProcessBarStepAdvancedConfigInterface, IProcessBarStepConfigInterface } from './process-bar-step.interface';\nimport { isNil, 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  protected simpleSteps = computed<Array<WritableSignal<IProcessBarStepAdvancedConfigInterface>>>(() => {\n    const simpleConfig = this.config().simpleConfig?.();\n    if (!simpleConfig) {\n      return [];\n    }\n    return Array.from({ length: simpleConfig.totalStep }, (_, index) => {\n      index += 1;\n      if (isNil(simpleConfig.completedStep)) {\n        simpleConfig.completedStep = simpleConfig.currentStep;\n      }\n      return signal({\n        isCurrentProcess: index === simpleConfig.currentStep,\n        processCompleted: index <= simpleConfig.completedStep,\n        currentProcessColor: simpleConfig.currentStepColor,\n        processCompletedColor: simpleConfig.stepCompletedColor,\n      });\n    });\n  });\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@let constHtmlSteps = config().advancedConfig?.() || simpleSteps();\n<div [class]=\"(config().classInclude || '') + ' libs-ui-process-bar-steps'\">\n  @if (constHtmlSteps) {\n    @for (step of constHtmlSteps; track step()) {\n      @let constHtmlActiveBackground = step().processCompleted ? step().processCompletedColor || '#33DA8A' : '';\n      @let constHtmlCurrentProcessBackground = step().isCurrentProcess ? step().currentProcessColor || '#4E8CF7' : backgroundColor();\n      <div\n        [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\n          [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]=\"constHtmlActiveBackground || constHtmlCurrentProcessBackground\"\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  }\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,CAAA,EAAA,CAAI,CAAC;AAC1G,IAAA,WAAW,GAAG,QAAQ,CAAgE,MAAK;QACnG,MAAM,YAAY,GAAG,IAAI,CAAC,MAAM,EAAE,CAAC,YAAY,IAAI;QACnD,IAAI,CAAC,YAAY,EAAE;AACjB,YAAA,OAAO,EAAE;QACX;AACA,QAAA,OAAO,KAAK,CAAC,IAAI,CAAC,EAAE,MAAM,EAAE,YAAY,CAAC,SAAS,EAAE,EAAE,CAAC,CAAC,EAAE,KAAK,KAAI;YACjE,KAAK,IAAI,CAAC;AACV,YAAA,IAAI,KAAK,CAAC,YAAY,CAAC,aAAa,CAAC,EAAE;AACrC,gBAAA,YAAY,CAAC,aAAa,GAAG,YAAY,CAAC,WAAW;YACvD;AACA,YAAA,OAAO,MAAM,CAAC;AACZ,gBAAA,gBAAgB,EAAE,KAAK,KAAK,YAAY,CAAC,WAAW;AACpD,gBAAA,gBAAgB,EAAE,KAAK,IAAI,YAAY,CAAC,aAAa;gBACrD,mBAAmB,EAAE,YAAY,CAAC,gBAAgB;gBAClD,qBAAqB,EAAE,YAAY,CAAC,kBAAkB;AACvD,aAAA,CAAC;AACJ,QAAA,CAAC,CAAC;AACJ,IAAA,CAAC,CAAC;AAEO,IAAA,MAAM,GAAG,KAAK,CAAC,QAAQ,EAAkC;IAEjD,uBAAuB,GAAG,MAAM,CAAiC,6CAA6C,EAAE,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC;wGA1BzI,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,w9DAwCA,EAAA,MAAA,EAAA,CAAA,0DAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,CAAA;;4FD7Ba,wCAAwC,EAAA,UAAA,EAAA,CAAA;kBARpD,SAAS;AAEE,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,sCAAsC,EAAA,UAAA,EACpC,IAAI,EAAA,eAAA,EAGC,uBAAuB,CAAC,MAAM,EAAA,QAAA,EAAA,w9DAAA,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.1.1-1",
+  "peerDependencies": {
+    "@angular/common": ">=18.0.0",
+    "@angular/core": ">=18.0.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,29 @@
+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;
+    simpleConfig?: WritableSignal<IProcessBarStepSimpleConfigInterface>;
+    advancedConfig?: WritableSignal<Array<WritableSignal<IProcessBarStepAdvancedConfigInterface>>>;
+}
+export interface IProcessBarStepAdvancedConfigInterface {
+    classIncludeContainer?: string;
+    classIncludeStep?: string;
+    processCompleted?: boolean;
+    processCompletedColor?: string;
+    isCurrentProcess?: boolean;
+    currentProcessColor?: string;
+    label?: string;
+    classLabel?: string;
+}
+export interface IProcessBarStepSimpleConfigInterface {
+    totalStep: number;
+    currentStep: number;
+    completedStep?: number;
+    currentStepColor: string;
+    stepCompletedColor: string;
+}

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

@@ -0,0 +1,14 @@
+import { WritableSignal } from '@angular/core';
+import { IProcessBarStepAdvancedConfigInterface, 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>;
+    protected simpleSteps: import("@angular/core").Signal<WritableSignal<IProcessBarStepAdvancedConfigInterface>[]>;
+    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>;
+}