@muxima-ui/stepper 1.0.0

package/README.md

@@ -0,0 +1,98 @@
+# Stepper
+
+## Como instalar
+
+```bash
+npm install @agt-ui/stepper --registry http://massinga.minfin.gov.ao:4873/
+```
+
+### Imports
+
+```diff
+import { NgModule } from '@angular/core';
+import { BrowserModule } from '@angular/platform-browser';
+import { AppComponent } from './app.component';
+
++ import { StepsComponent } from '@agt-ui/steps'
+
+@NgModule({
+  declarations: [AppComponent],
+  + imports: [BrowserModule, StepsComponent],
+  + exports: [StepsComponent],
+})
+export class AppModule {}
+```
+
+### Como funciona
+
+O exemplo abaixo mostra a lógica para implementação padrão do componente
+
+```
++ import { StepsComponent } from '@agt-ui/steps'
+
+@Component({
+  selector: 'app-root',
+  templateUrl: './app.component.html',
+  styleUrls: ['./app.component.css'],
+})
+export class AppComponent {
+  currentStep = 1
+
+  @ViewChild(StepperComponent) stepper!: StepperComponent;
+
+  handleNextStep() {
+    this.stepper.next()
+  }
+
+  handlePrevStep() {
+    this.stepper.prev()
+  }
+
+ steps: Array<string> = [
+     'Detalhes do agente econômico',
+     'Detalhes do proprietário',
+     'Situação fiscal',
+     'Informações da visita',
+     'Resumo'
+   ];
+}
+
+```
+
+#### Explicação
+- **steps**: Um array de strings responsável por fornecer os passos para o step
+
+- **currentPage**: recebe o numero do passo atual [começa com 1]
+
+- **handleNextStep**: função para avançar para o próximo passo
+
+- **handlePrevStep**: função para voltar para o passo anterior
+
+
+#### A seguir a utilização do componente no arquivo .html
+
+```
+<agt-stepper [steps]="steps" [(currentStep)]="currentStep" />
+
+
+<div *ngIf="currentPage === 1">
+  <p>Detalhes de agente economico</p>
+</div>
+
+<div *ngIf="currentPage === 2">
+  <p>Detalhes do proprietário</p>
+</div>
+
+<div *ngIf="currentPage === 3">
+  <p>Situação fiscal</p>
+</div>
+```
+
+
+## Storybook
+
+Consulte o Storybook para visualizar o componente
+
+- [@Storybook](http://camuine06.minfin.gov.ao:86/)
+
+

package/esm2020/index.mjs

@@ -0,0 +1,2 @@
+export * from './lib/stepper/stepper.component';
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaW5kZXguanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi9uYXZpZ2F0aW9uL3N0ZXBwZXIvc3JjL2luZGV4LnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLGNBQWMsaUNBQWlDLENBQUMiLCJzb3VyY2VzQ29udGVudCI6WyJleHBvcnQgKiBmcm9tICcuL2xpYi9zdGVwcGVyL3N0ZXBwZXIuY29tcG9uZW50JztcclxuIl19

package/esm2020/lib/stepper/stepper.component.mjs

@@ -0,0 +1,72 @@
+import { Component, EventEmitter, Input, Output } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import * as i0 from "@angular/core";
+import * as i1 from "@angular/common";
+export class StepperComponent {
+    constructor() {
+        this.steps = [];
+        this.currentStep = 0;
+        this.orientation = 'horizontal';
+        this.clickable = true;
+        this.stepChange = new EventEmitter();
+    }
+    isActive(index) {
+        return this.currentStep === index;
+    }
+    isCompleted(index) {
+        return index < this.currentStep || this.steps[index]?.completed === true;
+    }
+    isDisabled(index) {
+        return this.steps[index]?.disabled === true;
+    }
+    goToStep(index) {
+        if (!this.clickable || this.isDisabled(index)) {
+            return;
+        }
+        this.currentStep = index;
+        this.stepChange.emit(index);
+    }
+    nextStep() {
+        if (this.currentStep < this.steps.length - 1) {
+            const nextIndex = this.currentStep + 1;
+            if (!this.isDisabled(nextIndex)) {
+                this.currentStep = nextIndex;
+                this.stepChange.emit(nextIndex);
+            }
+        }
+    }
+    previousStep() {
+        if (this.currentStep > 0) {
+            const prevIndex = this.currentStep - 1;
+            if (!this.isDisabled(prevIndex)) {
+                this.currentStep = prevIndex;
+                this.stepChange.emit(prevIndex);
+            }
+        }
+    }
+    canGoNext() {
+        return this.currentStep < this.steps.length - 1 &&
+            !this.isDisabled(this.currentStep + 1);
+    }
+    canGoPrevious() {
+        return this.currentStep > 0 &&
+            !this.isDisabled(this.currentStep - 1);
+    }
+}
+StepperComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: StepperComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+StepperComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: StepperComponent, isStandalone: true, selector: "muxima-stepper", inputs: { steps: "steps", currentStep: "currentStep", orientation: "orientation", clickable: "clickable" }, outputs: { stepChange: "stepChange" }, ngImport: i0, template: "<div class=\"muxima-stepper\" [class.vertical]=\"orientation === 'vertical'\" [class.horizontal]=\"orientation === 'horizontal'\">\n  <div class=\"stepper-container\">\n    <div *ngFor=\"let step of steps; let i = index\" \n         class=\"step-wrapper\"\n         [class.active]=\"isActive(i)\"\n         [class.completed]=\"isCompleted(i)\"\n         [class.disabled]=\"isDisabled(i)\"\n         [class.clickable]=\"clickable && !isDisabled(i)\"\n         (click)=\"goToStep(i)\">\n      \n      <!-- Step Indicator -->\n      <div class=\"step-indicator\">\n        <div class=\"step-circle\">\n          <!-- Completed Icon -->\n          <svg *ngIf=\"isCompleted(i)\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" class=\"check-icon\">\n            <path d=\"M16.6668 5L7.50016 14.1667L3.3335 10\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n          </svg>\n          \n          <!-- Step Number or Icon -->\n          <span *ngIf=\"!isCompleted(i)\" class=\"step-number\">\n            <span *ngIf=\"!step.icon\">{{ i + 1 }}</span>\n            <span *ngIf=\"step.icon\" class=\"step-icon\">{{ step.icon }}</span>\n          </span>\n        </div>\n        \n        <!-- Connector Line -->\n        <div *ngIf=\"i < steps.length - 1\" class=\"step-connector\"></div>\n      </div>\n      \n      <!-- Step Content -->\n      <div class=\"step-content\">\n        <div class=\"step-label\">{{ step.label }}</div>\n        <div *ngIf=\"step.description\" class=\"step-description\">{{ step.description }}</div>\n      </div>\n    </div>\n  </div>\n</div>\r\n", styles: [".muxima-stepper{width:100%}.stepper-container{display:flex;gap:0}.horizontal .stepper-container{flex-direction:row;align-items:flex-start}.horizontal .step-wrapper{flex:1;display:flex;flex-direction:column;align-items:center;position:relative}.horizontal .step-wrapper.clickable{cursor:pointer}.horizontal .step-wrapper:hover:not(.disabled) .step-circle{transform:scale(1.1)}.horizontal .step-indicator{display:flex;align-items:center;width:100%;margin-bottom:1rem}.horizontal .step-circle{margin:0 auto}.horizontal .step-connector{flex:1;height:3px;background:#e5e7eb;margin:0 1rem;transition:all .3s ease}.horizontal .step-wrapper.completed .step-connector,.horizontal .step-wrapper.active .step-connector{background:linear-gradient(90deg,#667eea 0%,#764ba2 100%)}.horizontal .step-content{text-align:center;width:100%}.vertical .stepper-container{flex-direction:column;align-items:stretch}.vertical .step-wrapper{display:flex;flex-direction:row;align-items:flex-start;gap:1.5rem;padding:1.5rem 0}.vertical .step-wrapper.clickable{cursor:pointer}.vertical .step-wrapper:hover:not(.disabled) .step-circle{transform:scale(1.1)}.vertical .step-indicator{display:flex;flex-direction:column;align-items:center;position:relative}.vertical .step-connector{width:3px;height:100%;min-height:40px;background:#e5e7eb;margin:.5rem 0;transition:all .3s ease}.vertical .step-wrapper.completed .step-connector,.vertical .step-wrapper.active .step-connector{background:linear-gradient(180deg,#667eea 0%,#764ba2 100%)}.vertical .step-content{flex:1;padding-top:.25rem}.step-circle{width:48px;height:48px;border-radius:50%;background:white;border:3px solid #e5e7eb;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:1.125rem;color:#9ca3af;transition:all .3s ease;flex-shrink:0;position:relative;z-index:1}.step-wrapper.active .step-circle{border-color:#667eea;background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);color:#fff;box-shadow:0 8px 24px #667eea66;animation:pulse 1.5s ease-in-out infinite}.step-wrapper.completed .step-circle{border-color:#10b981;background:#10b981;color:#fff}.step-wrapper.disabled .step-circle{opacity:.4;cursor:not-allowed}.check-icon{animation:checkmark .3s ease-out}.step-number{display:flex;align-items:center;justify-content:center}.step-icon{font-size:1.5rem}.step-label{font-size:.95rem;font-weight:600;color:#4b5563;margin-bottom:.25rem;transition:color .3s ease}.step-wrapper.active .step-label{color:#667eea;font-weight:700}.step-wrapper.completed .step-label{color:#10b981}.step-wrapper.disabled .step-label{color:#d1d5db}.step-description{font-size:.875rem;color:#6b7280;line-height:1.4;transition:color .3s ease}.step-wrapper.disabled .step-description{color:#d1d5db}@keyframes pulse{0%,to{box-shadow:0 8px 24px #667eea66}50%{box-shadow:0 8px 32px #667eea99}}@keyframes checkmark{0%{transform:scale(0) rotate(-45deg)}50%{transform:scale(1.2) rotate(0)}to{transform:scale(1) rotate(0)}}@media (max-width: 768px){.horizontal .stepper-container{flex-direction:column}.horizontal .step-wrapper{flex-direction:row;align-items:flex-start;gap:1rem;padding:1rem 0}.horizontal .step-indicator{flex-direction:column}.horizontal .step-connector{width:3px!important;height:100%!important;min-height:30px;margin:.5rem 0!important}.horizontal .step-content{text-align:left!important;padding-top:.25rem}.horizontal .step-circle{margin:0!important}.step-circle{width:40px;height:40px;font-size:1rem}.step-icon{font-size:1.25rem}.step-label{font-size:.875rem}.step-description{font-size:.8125rem}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: StepperComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'muxima-stepper', standalone: true, imports: [CommonModule], template: "<div class=\"muxima-stepper\" [class.vertical]=\"orientation === 'vertical'\" [class.horizontal]=\"orientation === 'horizontal'\">\n  <div class=\"stepper-container\">\n    <div *ngFor=\"let step of steps; let i = index\" \n         class=\"step-wrapper\"\n         [class.active]=\"isActive(i)\"\n         [class.completed]=\"isCompleted(i)\"\n         [class.disabled]=\"isDisabled(i)\"\n         [class.clickable]=\"clickable && !isDisabled(i)\"\n         (click)=\"goToStep(i)\">\n      \n      <!-- Step Indicator -->\n      <div class=\"step-indicator\">\n        <div class=\"step-circle\">\n          <!-- Completed Icon -->\n          <svg *ngIf=\"isCompleted(i)\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" class=\"check-icon\">\n            <path d=\"M16.6668 5L7.50016 14.1667L3.3335 10\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n          </svg>\n          \n          <!-- Step Number or Icon -->\n          <span *ngIf=\"!isCompleted(i)\" class=\"step-number\">\n            <span *ngIf=\"!step.icon\">{{ i + 1 }}</span>\n            <span *ngIf=\"step.icon\" class=\"step-icon\">{{ step.icon }}</span>\n          </span>\n        </div>\n        \n        <!-- Connector Line -->\n        <div *ngIf=\"i < steps.length - 1\" class=\"step-connector\"></div>\n      </div>\n      \n      <!-- Step Content -->\n      <div class=\"step-content\">\n        <div class=\"step-label\">{{ step.label }}</div>\n        <div *ngIf=\"step.description\" class=\"step-description\">{{ step.description }}</div>\n      </div>\n    </div>\n  </div>\n</div>\r\n", styles: [".muxima-stepper{width:100%}.stepper-container{display:flex;gap:0}.horizontal .stepper-container{flex-direction:row;align-items:flex-start}.horizontal .step-wrapper{flex:1;display:flex;flex-direction:column;align-items:center;position:relative}.horizontal .step-wrapper.clickable{cursor:pointer}.horizontal .step-wrapper:hover:not(.disabled) .step-circle{transform:scale(1.1)}.horizontal .step-indicator{display:flex;align-items:center;width:100%;margin-bottom:1rem}.horizontal .step-circle{margin:0 auto}.horizontal .step-connector{flex:1;height:3px;background:#e5e7eb;margin:0 1rem;transition:all .3s ease}.horizontal .step-wrapper.completed .step-connector,.horizontal .step-wrapper.active .step-connector{background:linear-gradient(90deg,#667eea 0%,#764ba2 100%)}.horizontal .step-content{text-align:center;width:100%}.vertical .stepper-container{flex-direction:column;align-items:stretch}.vertical .step-wrapper{display:flex;flex-direction:row;align-items:flex-start;gap:1.5rem;padding:1.5rem 0}.vertical .step-wrapper.clickable{cursor:pointer}.vertical .step-wrapper:hover:not(.disabled) .step-circle{transform:scale(1.1)}.vertical .step-indicator{display:flex;flex-direction:column;align-items:center;position:relative}.vertical .step-connector{width:3px;height:100%;min-height:40px;background:#e5e7eb;margin:.5rem 0;transition:all .3s ease}.vertical .step-wrapper.completed .step-connector,.vertical .step-wrapper.active .step-connector{background:linear-gradient(180deg,#667eea 0%,#764ba2 100%)}.vertical .step-content{flex:1;padding-top:.25rem}.step-circle{width:48px;height:48px;border-radius:50%;background:white;border:3px solid #e5e7eb;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:1.125rem;color:#9ca3af;transition:all .3s ease;flex-shrink:0;position:relative;z-index:1}.step-wrapper.active .step-circle{border-color:#667eea;background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);color:#fff;box-shadow:0 8px 24px #667eea66;animation:pulse 1.5s ease-in-out infinite}.step-wrapper.completed .step-circle{border-color:#10b981;background:#10b981;color:#fff}.step-wrapper.disabled .step-circle{opacity:.4;cursor:not-allowed}.check-icon{animation:checkmark .3s ease-out}.step-number{display:flex;align-items:center;justify-content:center}.step-icon{font-size:1.5rem}.step-label{font-size:.95rem;font-weight:600;color:#4b5563;margin-bottom:.25rem;transition:color .3s ease}.step-wrapper.active .step-label{color:#667eea;font-weight:700}.step-wrapper.completed .step-label{color:#10b981}.step-wrapper.disabled .step-label{color:#d1d5db}.step-description{font-size:.875rem;color:#6b7280;line-height:1.4;transition:color .3s ease}.step-wrapper.disabled .step-description{color:#d1d5db}@keyframes pulse{0%,to{box-shadow:0 8px 24px #667eea66}50%{box-shadow:0 8px 32px #667eea99}}@keyframes checkmark{0%{transform:scale(0) rotate(-45deg)}50%{transform:scale(1.2) rotate(0)}to{transform:scale(1) rotate(0)}}@media (max-width: 768px){.horizontal .stepper-container{flex-direction:column}.horizontal .step-wrapper{flex-direction:row;align-items:flex-start;gap:1rem;padding:1rem 0}.horizontal .step-indicator{flex-direction:column}.horizontal .step-connector{width:3px!important;height:100%!important;min-height:30px;margin:.5rem 0!important}.horizontal .step-content{text-align:left!important;padding-top:.25rem}.horizontal .step-circle{margin:0!important}.step-circle{width:40px;height:40px;font-size:1rem}.step-icon{font-size:1.25rem}.step-label{font-size:.875rem}.step-description{font-size:.8125rem}}\n"] }]
+        }], propDecorators: { steps: [{
+                type: Input
+            }], currentStep: [{
+                type: Input
+            }], orientation: [{
+                type: Input
+            }], clickable: [{
+                type: Input
+            }], stepChange: [{
+                type: Output
+            }] } });
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic3RlcHBlci5jb21wb25lbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi8uLi9uYXZpZ2F0aW9uL3N0ZXBwZXIvc3JjL2xpYi9zdGVwcGVyL3N0ZXBwZXIuY29tcG9uZW50LnRzIiwiLi4vLi4vLi4vLi4vLi4vLi4vbmF2aWdhdGlvbi9zdGVwcGVyL3NyYy9saWIvc3RlcHBlci9zdGVwcGVyLmNvbXBvbmVudC5odG1sIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBRSxTQUFTLEVBQUUsWUFBWSxFQUFFLEtBQUssRUFBRSxNQUFNLEVBQUUsTUFBTSxlQUFlLENBQUM7QUFDdkUsT0FBTyxFQUFFLFlBQVksRUFBRSxNQUFNLGlCQUFpQixDQUFDOzs7QUFpQi9DLE1BQU0sT0FBTyxnQkFBZ0I7SUFQN0I7UUFRVyxVQUFLLEdBQVcsRUFBRSxDQUFDO1FBQ25CLGdCQUFXLEdBQUcsQ0FBQyxDQUFDO1FBQ2hCLGdCQUFXLEdBQThCLFlBQVksQ0FBQztRQUN0RCxjQUFTLEdBQUcsSUFBSSxDQUFDO1FBRWhCLGVBQVUsR0FBRyxJQUFJLFlBQVksRUFBVSxDQUFDO0tBbURuRDtJQWpEQyxRQUFRLENBQUMsS0FBYTtRQUNwQixPQUFPLElBQUksQ0FBQyxXQUFXLEtBQUssS0FBSyxDQUFDO0lBQ3BDLENBQUM7SUFFRCxXQUFXLENBQUMsS0FBYTtRQUN2QixPQUFPLEtBQUssR0FBRyxJQUFJLENBQUMsV0FBVyxJQUFJLElBQUksQ0FBQyxLQUFLLENBQUMsS0FBSyxDQUFDLEVBQUUsU0FBUyxLQUFLLElBQUksQ0FBQztJQUMzRSxDQUFDO0lBRUQsVUFBVSxDQUFDLEtBQWE7UUFDdEIsT0FBTyxJQUFJLENBQUMsS0FBSyxDQUFDLEtBQUssQ0FBQyxFQUFFLFFBQVEsS0FBSyxJQUFJLENBQUM7SUFDOUMsQ0FBQztJQUVELFFBQVEsQ0FBQyxLQUFhO1FBQ3BCLElBQUksQ0FBQyxJQUFJLENBQUMsU0FBUyxJQUFJLElBQUksQ0FBQyxVQUFVLENBQUMsS0FBSyxDQUFDLEVBQUU7WUFDN0MsT0FBTztTQUNSO1FBQ0QsSUFBSSxDQUFDLFdBQVcsR0FBRyxLQUFLLENBQUM7UUFDekIsSUFBSSxDQUFDLFVBQVUsQ0FBQyxJQUFJLENBQUMsS0FBSyxDQUFDLENBQUM7SUFDOUIsQ0FBQztJQUVELFFBQVE7UUFDTixJQUFJLElBQUksQ0FBQyxXQUFXLEdBQUcsSUFBSSxDQUFDLEtBQUssQ0FBQyxNQUFNLEdBQUcsQ0FBQyxFQUFFO1lBQzVDLE1BQU0sU0FBUyxHQUFHLElBQUksQ0FBQyxXQUFXLEdBQUcsQ0FBQyxDQUFDO1lBQ3ZDLElBQUksQ0FBQyxJQUFJLENBQUMsVUFBVSxDQUFDLFNBQVMsQ0FBQyxFQUFFO2dCQUMvQixJQUFJLENBQUMsV0FBVyxHQUFHLFNBQVMsQ0FBQztnQkFDN0IsSUFBSSxDQUFDLFVBQVUsQ0FBQyxJQUFJLENBQUMsU0FBUyxDQUFDLENBQUM7YUFDakM7U0FDRjtJQUNILENBQUM7SUFFRCxZQUFZO1FBQ1YsSUFBSSxJQUFJLENBQUMsV0FBVyxHQUFHLENBQUMsRUFBRTtZQUN4QixNQUFNLFNBQVMsR0FBRyxJQUFJLENBQUMsV0FBVyxHQUFHLENBQUMsQ0FBQztZQUN2QyxJQUFJLENBQUMsSUFBSSxDQUFDLFVBQVUsQ0FBQyxTQUFTLENBQUMsRUFBRTtnQkFDL0IsSUFBSSxDQUFDLFdBQVcsR0FBRyxTQUFTLENBQUM7Z0JBQzdCLElBQUksQ0FBQyxVQUFVLENBQUMsSUFBSSxDQUFDLFNBQVMsQ0FBQyxDQUFDO2FBQ2pDO1NBQ0Y7SUFDSCxDQUFDO0lBRUQsU0FBUztRQUNQLE9BQU8sSUFBSSxDQUFDLFdBQVcsR0FBRyxJQUFJLENBQUMsS0FBSyxDQUFDLE1BQU0sR0FBRyxDQUFDO1lBQ3hDLENBQUMsSUFBSSxDQUFDLFVBQVUsQ0FBQyxJQUFJLENBQUMsV0FBVyxHQUFHLENBQUMsQ0FBQyxDQUFDO0lBQ2hELENBQUM7SUFFRCxhQUFhO1FBQ1gsT0FBTyxJQUFJLENBQUMsV0FBVyxHQUFHLENBQUM7WUFDcEIsQ0FBQyxJQUFJLENBQUMsVUFBVSxDQUFDLElBQUksQ0FBQyxXQUFXLEdBQUcsQ0FBQyxDQUFDLENBQUM7SUFDaEQsQ0FBQzs7OEdBeERVLGdCQUFnQjtrR0FBaEIsZ0JBQWdCLDZOQ2xCN0Isd21EQXFDQSxnaEhEdkJZLFlBQVk7NEZBSVgsZ0JBQWdCO2tCQVA1QixTQUFTOytCQUNFLGdCQUFnQixjQUNkLElBQUksV0FDUCxDQUFDLFlBQVksQ0FBQzs4QkFLZCxLQUFLO3NCQUFiLEtBQUs7Z0JBQ0csV0FBVztzQkFBbkIsS0FBSztnQkFDRyxXQUFXO3NCQUFuQixLQUFLO2dCQUNHLFNBQVM7c0JBQWpCLEtBQUs7Z0JBRUksVUFBVTtzQkFBbkIsTUFBTSIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IENvbXBvbmVudCwgRXZlbnRFbWl0dGVyLCBJbnB1dCwgT3V0cHV0IH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XHJcbmltcG9ydCB7IENvbW1vbk1vZHVsZSB9IGZyb20gJ0Bhbmd1bGFyL2NvbW1vbic7XHJcblxyXG5leHBvcnQgaW50ZXJmYWNlIFN0ZXAge1xyXG4gIGxhYmVsOiBzdHJpbmc7XHJcbiAgZGVzY3JpcHRpb24/OiBzdHJpbmc7XHJcbiAgaWNvbj86IHN0cmluZztcclxuICBjb21wbGV0ZWQ/OiBib29sZWFuO1xyXG4gIGRpc2FibGVkPzogYm9vbGVhbjtcclxufVxyXG5cclxuQENvbXBvbmVudCh7XHJcbiAgc2VsZWN0b3I6ICdtdXhpbWEtc3RlcHBlcicsXHJcbiAgc3RhbmRhbG9uZTogdHJ1ZSxcclxuICBpbXBvcnRzOiBbQ29tbW9uTW9kdWxlXSxcclxuICB0ZW1wbGF0ZVVybDogJy4vc3RlcHBlci5jb21wb25lbnQuaHRtbCcsXHJcbiAgc3R5bGVVcmxzOiBbJy4vc3RlcHBlci5jb21wb25lbnQuc2NzcyddLFxyXG59KVxyXG5leHBvcnQgY2xhc3MgU3RlcHBlckNvbXBvbmVudCB7XHJcbiAgQElucHV0KCkgc3RlcHM6IFN0ZXBbXSA9IFtdO1xyXG4gIEBJbnB1dCgpIGN1cnJlbnRTdGVwID0gMDtcclxuICBASW5wdXQoKSBvcmllbnRhdGlvbjogJ2hvcml6b250YWwnIHwgJ3ZlcnRpY2FsJyA9ICdob3Jpem9udGFsJztcclxuICBASW5wdXQoKSBjbGlja2FibGUgPSB0cnVlO1xyXG5cclxuICBAT3V0cHV0KCkgc3RlcENoYW5nZSA9IG5ldyBFdmVudEVtaXR0ZXI8bnVtYmVyPigpO1xyXG5cclxuICBpc0FjdGl2ZShpbmRleDogbnVtYmVyKTogYm9vbGVhbiB7XHJcbiAgICByZXR1cm4gdGhpcy5jdXJyZW50U3RlcCA9PT0gaW5kZXg7XHJcbiAgfVxyXG5cclxuICBpc0NvbXBsZXRlZChpbmRleDogbnVtYmVyKTogYm9vbGVhbiB7XHJcbiAgICByZXR1cm4gaW5kZXggPCB0aGlzLmN1cnJlbnRTdGVwIHx8IHRoaXMuc3RlcHNbaW5kZXhdPy5jb21wbGV0ZWQgPT09IHRydWU7XHJcbiAgfVxyXG5cclxuICBpc0Rpc2FibGVkKGluZGV4OiBudW1iZXIpOiBib29sZWFuIHtcclxuICAgIHJldHVybiB0aGlzLnN0ZXBzW2luZGV4XT8uZGlzYWJsZWQgPT09IHRydWU7XHJcbiAgfVxyXG5cclxuICBnb1RvU3RlcChpbmRleDogbnVtYmVyKTogdm9pZCB7XHJcbiAgICBpZiAoIXRoaXMuY2xpY2thYmxlIHx8IHRoaXMuaXNEaXNhYmxlZChpbmRleCkpIHtcclxuICAgICAgcmV0dXJuO1xyXG4gICAgfVxyXG4gICAgdGhpcy5jdXJyZW50U3RlcCA9IGluZGV4O1xyXG4gICAgdGhpcy5zdGVwQ2hhbmdlLmVtaXQoaW5kZXgpO1xyXG4gIH1cclxuXHJcbiAgbmV4dFN0ZXAoKTogdm9pZCB7XHJcbiAgICBpZiAodGhpcy5jdXJyZW50U3RlcCA8IHRoaXMuc3RlcHMubGVuZ3RoIC0gMSkge1xyXG4gICAgICBjb25zdCBuZXh0SW5kZXggPSB0aGlzLmN1cnJlbnRTdGVwICsgMTtcclxuICAgICAgaWYgKCF0aGlzLmlzRGlzYWJsZWQobmV4dEluZGV4KSkge1xyXG4gICAgICAgIHRoaXMuY3VycmVudFN0ZXAgPSBuZXh0SW5kZXg7XHJcbiAgICAgICAgdGhpcy5zdGVwQ2hhbmdlLmVtaXQobmV4dEluZGV4KTtcclxuICAgICAgfVxyXG4gICAgfVxyXG4gIH1cclxuXHJcbiAgcHJldmlvdXNTdGVwKCk6IHZvaWQge1xyXG4gICAgaWYgKHRoaXMuY3VycmVudFN0ZXAgPiAwKSB7XHJcbiAgICAgIGNvbnN0IHByZXZJbmRleCA9IHRoaXMuY3VycmVudFN0ZXAgLSAxO1xyXG4gICAgICBpZiAoIXRoaXMuaXNEaXNhYmxlZChwcmV2SW5kZXgpKSB7XHJcbiAgICAgICAgdGhpcy5jdXJyZW50U3RlcCA9IHByZXZJbmRleDtcclxuICAgICAgICB0aGlzLnN0ZXBDaGFuZ2UuZW1pdChwcmV2SW5kZXgpO1xyXG4gICAgICB9XHJcbiAgICB9XHJcbiAgfVxyXG5cclxuICBjYW5Hb05leHQoKTogYm9vbGVhbiB7XHJcbiAgICByZXR1cm4gdGhpcy5jdXJyZW50U3RlcCA8IHRoaXMuc3RlcHMubGVuZ3RoIC0gMSAmJiBcclxuICAgICAgICAgICAhdGhpcy5pc0Rpc2FibGVkKHRoaXMuY3VycmVudFN0ZXAgKyAxKTtcclxuICB9XHJcblxyXG4gIGNhbkdvUHJldmlvdXMoKTogYm9vbGVhbiB7XHJcbiAgICByZXR1cm4gdGhpcy5jdXJyZW50U3RlcCA+IDAgJiYgXHJcbiAgICAgICAgICAgIXRoaXMuaXNEaXNhYmxlZCh0aGlzLmN1cnJlbnRTdGVwIC0gMSk7XHJcbiAgfVxyXG59XHJcblxyXG4iLCI8ZGl2IGNsYXNzPVwibXV4aW1hLXN0ZXBwZXJcIiBbY2xhc3MudmVydGljYWxdPVwib3JpZW50YXRpb24gPT09ICd2ZXJ0aWNhbCdcIiBbY2xhc3MuaG9yaXpvbnRhbF09XCJvcmllbnRhdGlvbiA9PT0gJ2hvcml6b250YWwnXCI+XG4gIDxkaXYgY2xhc3M9XCJzdGVwcGVyLWNvbnRhaW5lclwiPlxuICAgIDxkaXYgKm5nRm9yPVwibGV0IHN0ZXAgb2Ygc3RlcHM7IGxldCBpID0gaW5kZXhcIiBcbiAgICAgICAgIGNsYXNzPVwic3RlcC13cmFwcGVyXCJcbiAgICAgICAgIFtjbGFzcy5hY3RpdmVdPVwiaXNBY3RpdmUoaSlcIlxuICAgICAgICAgW2NsYXNzLmNvbXBsZXRlZF09XCJpc0NvbXBsZXRlZChpKVwiXG4gICAgICAgICBbY2xhc3MuZGlzYWJsZWRdPVwiaXNEaXNhYmxlZChpKVwiXG4gICAgICAgICBbY2xhc3MuY2xpY2thYmxlXT1cImNsaWNrYWJsZSAmJiAhaXNEaXNhYmxlZChpKVwiXG4gICAgICAgICAoY2xpY2spPVwiZ29Ub1N0ZXAoaSlcIj5cbiAgICAgIFxuICAgICAgPCEtLSBTdGVwIEluZGljYXRvciAtLT5cbiAgICAgIDxkaXYgY2xhc3M9XCJzdGVwLWluZGljYXRvclwiPlxuICAgICAgICA8ZGl2IGNsYXNzPVwic3RlcC1jaXJjbGVcIj5cbiAgICAgICAgICA8IS0tIENvbXBsZXRlZCBJY29uIC0tPlxuICAgICAgICAgIDxzdmcgKm5nSWY9XCJpc0NvbXBsZXRlZChpKVwiIHdpZHRoPVwiMjBcIiBoZWlnaHQ9XCIyMFwiIHZpZXdCb3g9XCIwIDAgMjAgMjBcIiBmaWxsPVwibm9uZVwiIGNsYXNzPVwiY2hlY2staWNvblwiPlxuICAgICAgICAgICAgPHBhdGggZD1cIk0xNi42NjY4IDVMNy41MDAxNiAxNC4xNjY3TDMuMzMzNSAxMFwiIHN0cm9rZT1cImN1cnJlbnRDb2xvclwiIHN0cm9rZS13aWR0aD1cIjJcIiBzdHJva2UtbGluZWNhcD1cInJvdW5kXCIgc3Ryb2tlLWxpbmVqb2luPVwicm91bmRcIi8+XG4gICAgICAgICAgPC9zdmc+XG4gICAgICAgICAgXG4gICAgICAgICAgPCEtLSBTdGVwIE51bWJlciBvciBJY29uIC0tPlxuICAgICAgICAgIDxzcGFuICpuZ0lmPVwiIWlzQ29tcGxldGVkKGkpXCIgY2xhc3M9XCJzdGVwLW51bWJlclwiPlxuICAgICAgICAgICAgPHNwYW4gKm5nSWY9XCIhc3RlcC5pY29uXCI+e3sgaSArIDEgfX08L3NwYW4+XG4gICAgICAgICAgICA8c3BhbiAqbmdJZj1cInN0ZXAuaWNvblwiIGNsYXNzPVwic3RlcC1pY29uXCI+e3sgc3RlcC5pY29uIH19PC9zcGFuPlxuICAgICAgICAgIDwvc3Bhbj5cbiAgICAgICAgPC9kaXY+XG4gICAgICAgIFxuICAgICAgICA8IS0tIENvbm5lY3RvciBMaW5lIC0tPlxuICAgICAgICA8ZGl2ICpuZ0lmPVwiaSA8IHN0ZXBzLmxlbmd0aCAtIDFcIiBjbGFzcz1cInN0ZXAtY29ubmVjdG9yXCI+PC9kaXY+XG4gICAgICA8L2Rpdj5cbiAgICAgIFxuICAgICAgPCEtLSBTdGVwIENvbnRlbnQgLS0+XG4gICAgICA8ZGl2IGNsYXNzPVwic3RlcC1jb250ZW50XCI+XG4gICAgICAgIDxkaXYgY2xhc3M9XCJzdGVwLWxhYmVsXCI+e3sgc3RlcC5sYWJlbCB9fTwvZGl2PlxuICAgICAgICA8ZGl2ICpuZ0lmPVwic3RlcC5kZXNjcmlwdGlvblwiIGNsYXNzPVwic3RlcC1kZXNjcmlwdGlvblwiPnt7IHN0ZXAuZGVzY3JpcHRpb24gfX08L2Rpdj5cbiAgICAgIDwvZGl2PlxuICAgIDwvZGl2PlxuICA8L2Rpdj5cbjwvZGl2PlxyXG4iXX0=

package/esm2020/muxima-ui-stepper.mjs

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

package/fesm2015/muxima-ui-stepper.mjs

@@ -0,0 +1,81 @@
+import * as i0 from '@angular/core';
+import { EventEmitter, Component, Input, Output } from '@angular/core';
+import * as i1 from '@angular/common';
+import { CommonModule } from '@angular/common';
+
+class StepperComponent {
+    constructor() {
+        this.steps = [];
+        this.currentStep = 0;
+        this.orientation = 'horizontal';
+        this.clickable = true;
+        this.stepChange = new EventEmitter();
+    }
+    isActive(index) {
+        return this.currentStep === index;
+    }
+    isCompleted(index) {
+        var _a;
+        return index < this.currentStep || ((_a = this.steps[index]) === null || _a === void 0 ? void 0 : _a.completed) === true;
+    }
+    isDisabled(index) {
+        var _a;
+        return ((_a = this.steps[index]) === null || _a === void 0 ? void 0 : _a.disabled) === true;
+    }
+    goToStep(index) {
+        if (!this.clickable || this.isDisabled(index)) {
+            return;
+        }
+        this.currentStep = index;
+        this.stepChange.emit(index);
+    }
+    nextStep() {
+        if (this.currentStep < this.steps.length - 1) {
+            const nextIndex = this.currentStep + 1;
+            if (!this.isDisabled(nextIndex)) {
+                this.currentStep = nextIndex;
+                this.stepChange.emit(nextIndex);
+            }
+        }
+    }
+    previousStep() {
+        if (this.currentStep > 0) {
+            const prevIndex = this.currentStep - 1;
+            if (!this.isDisabled(prevIndex)) {
+                this.currentStep = prevIndex;
+                this.stepChange.emit(prevIndex);
+            }
+        }
+    }
+    canGoNext() {
+        return this.currentStep < this.steps.length - 1 &&
+            !this.isDisabled(this.currentStep + 1);
+    }
+    canGoPrevious() {
+        return this.currentStep > 0 &&
+            !this.isDisabled(this.currentStep - 1);
+    }
+}
+StepperComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: StepperComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+StepperComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: StepperComponent, isStandalone: true, selector: "muxima-stepper", inputs: { steps: "steps", currentStep: "currentStep", orientation: "orientation", clickable: "clickable" }, outputs: { stepChange: "stepChange" }, ngImport: i0, template: "<div class=\"muxima-stepper\" [class.vertical]=\"orientation === 'vertical'\" [class.horizontal]=\"orientation === 'horizontal'\">\n  <div class=\"stepper-container\">\n    <div *ngFor=\"let step of steps; let i = index\" \n         class=\"step-wrapper\"\n         [class.active]=\"isActive(i)\"\n         [class.completed]=\"isCompleted(i)\"\n         [class.disabled]=\"isDisabled(i)\"\n         [class.clickable]=\"clickable && !isDisabled(i)\"\n         (click)=\"goToStep(i)\">\n      \n      <!-- Step Indicator -->\n      <div class=\"step-indicator\">\n        <div class=\"step-circle\">\n          <!-- Completed Icon -->\n          <svg *ngIf=\"isCompleted(i)\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" class=\"check-icon\">\n            <path d=\"M16.6668 5L7.50016 14.1667L3.3335 10\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n          </svg>\n          \n          <!-- Step Number or Icon -->\n          <span *ngIf=\"!isCompleted(i)\" class=\"step-number\">\n            <span *ngIf=\"!step.icon\">{{ i + 1 }}</span>\n            <span *ngIf=\"step.icon\" class=\"step-icon\">{{ step.icon }}</span>\n          </span>\n        </div>\n        \n        <!-- Connector Line -->\n        <div *ngIf=\"i < steps.length - 1\" class=\"step-connector\"></div>\n      </div>\n      \n      <!-- Step Content -->\n      <div class=\"step-content\">\n        <div class=\"step-label\">{{ step.label }}</div>\n        <div *ngIf=\"step.description\" class=\"step-description\">{{ step.description }}</div>\n      </div>\n    </div>\n  </div>\n</div>\r\n", styles: [".muxima-stepper{width:100%}.stepper-container{display:flex;gap:0}.horizontal .stepper-container{flex-direction:row;align-items:flex-start}.horizontal .step-wrapper{flex:1;display:flex;flex-direction:column;align-items:center;position:relative}.horizontal .step-wrapper.clickable{cursor:pointer}.horizontal .step-wrapper:hover:not(.disabled) .step-circle{transform:scale(1.1)}.horizontal .step-indicator{display:flex;align-items:center;width:100%;margin-bottom:1rem}.horizontal .step-circle{margin:0 auto}.horizontal .step-connector{flex:1;height:3px;background:#e5e7eb;margin:0 1rem;transition:all .3s ease}.horizontal .step-wrapper.completed .step-connector,.horizontal .step-wrapper.active .step-connector{background:linear-gradient(90deg,#667eea 0%,#764ba2 100%)}.horizontal .step-content{text-align:center;width:100%}.vertical .stepper-container{flex-direction:column;align-items:stretch}.vertical .step-wrapper{display:flex;flex-direction:row;align-items:flex-start;gap:1.5rem;padding:1.5rem 0}.vertical .step-wrapper.clickable{cursor:pointer}.vertical .step-wrapper:hover:not(.disabled) .step-circle{transform:scale(1.1)}.vertical .step-indicator{display:flex;flex-direction:column;align-items:center;position:relative}.vertical .step-connector{width:3px;height:100%;min-height:40px;background:#e5e7eb;margin:.5rem 0;transition:all .3s ease}.vertical .step-wrapper.completed .step-connector,.vertical .step-wrapper.active .step-connector{background:linear-gradient(180deg,#667eea 0%,#764ba2 100%)}.vertical .step-content{flex:1;padding-top:.25rem}.step-circle{width:48px;height:48px;border-radius:50%;background:white;border:3px solid #e5e7eb;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:1.125rem;color:#9ca3af;transition:all .3s ease;flex-shrink:0;position:relative;z-index:1}.step-wrapper.active .step-circle{border-color:#667eea;background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);color:#fff;box-shadow:0 8px 24px #667eea66;animation:pulse 1.5s ease-in-out infinite}.step-wrapper.completed .step-circle{border-color:#10b981;background:#10b981;color:#fff}.step-wrapper.disabled .step-circle{opacity:.4;cursor:not-allowed}.check-icon{animation:checkmark .3s ease-out}.step-number{display:flex;align-items:center;justify-content:center}.step-icon{font-size:1.5rem}.step-label{font-size:.95rem;font-weight:600;color:#4b5563;margin-bottom:.25rem;transition:color .3s ease}.step-wrapper.active .step-label{color:#667eea;font-weight:700}.step-wrapper.completed .step-label{color:#10b981}.step-wrapper.disabled .step-label{color:#d1d5db}.step-description{font-size:.875rem;color:#6b7280;line-height:1.4;transition:color .3s ease}.step-wrapper.disabled .step-description{color:#d1d5db}@keyframes pulse{0%,to{box-shadow:0 8px 24px #667eea66}50%{box-shadow:0 8px 32px #667eea99}}@keyframes checkmark{0%{transform:scale(0) rotate(-45deg)}50%{transform:scale(1.2) rotate(0)}to{transform:scale(1) rotate(0)}}@media (max-width: 768px){.horizontal .stepper-container{flex-direction:column}.horizontal .step-wrapper{flex-direction:row;align-items:flex-start;gap:1rem;padding:1rem 0}.horizontal .step-indicator{flex-direction:column}.horizontal .step-connector{width:3px!important;height:100%!important;min-height:30px;margin:.5rem 0!important}.horizontal .step-content{text-align:left!important;padding-top:.25rem}.horizontal .step-circle{margin:0!important}.step-circle{width:40px;height:40px;font-size:1rem}.step-icon{font-size:1.25rem}.step-label{font-size:.875rem}.step-description{font-size:.8125rem}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: StepperComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'muxima-stepper', standalone: true, imports: [CommonModule], template: "<div class=\"muxima-stepper\" [class.vertical]=\"orientation === 'vertical'\" [class.horizontal]=\"orientation === 'horizontal'\">\n  <div class=\"stepper-container\">\n    <div *ngFor=\"let step of steps; let i = index\" \n         class=\"step-wrapper\"\n         [class.active]=\"isActive(i)\"\n         [class.completed]=\"isCompleted(i)\"\n         [class.disabled]=\"isDisabled(i)\"\n         [class.clickable]=\"clickable && !isDisabled(i)\"\n         (click)=\"goToStep(i)\">\n      \n      <!-- Step Indicator -->\n      <div class=\"step-indicator\">\n        <div class=\"step-circle\">\n          <!-- Completed Icon -->\n          <svg *ngIf=\"isCompleted(i)\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" class=\"check-icon\">\n            <path d=\"M16.6668 5L7.50016 14.1667L3.3335 10\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n          </svg>\n          \n          <!-- Step Number or Icon -->\n          <span *ngIf=\"!isCompleted(i)\" class=\"step-number\">\n            <span *ngIf=\"!step.icon\">{{ i + 1 }}</span>\n            <span *ngIf=\"step.icon\" class=\"step-icon\">{{ step.icon }}</span>\n          </span>\n        </div>\n        \n        <!-- Connector Line -->\n        <div *ngIf=\"i < steps.length - 1\" class=\"step-connector\"></div>\n      </div>\n      \n      <!-- Step Content -->\n      <div class=\"step-content\">\n        <div class=\"step-label\">{{ step.label }}</div>\n        <div *ngIf=\"step.description\" class=\"step-description\">{{ step.description }}</div>\n      </div>\n    </div>\n  </div>\n</div>\r\n", styles: [".muxima-stepper{width:100%}.stepper-container{display:flex;gap:0}.horizontal .stepper-container{flex-direction:row;align-items:flex-start}.horizontal .step-wrapper{flex:1;display:flex;flex-direction:column;align-items:center;position:relative}.horizontal .step-wrapper.clickable{cursor:pointer}.horizontal .step-wrapper:hover:not(.disabled) .step-circle{transform:scale(1.1)}.horizontal .step-indicator{display:flex;align-items:center;width:100%;margin-bottom:1rem}.horizontal .step-circle{margin:0 auto}.horizontal .step-connector{flex:1;height:3px;background:#e5e7eb;margin:0 1rem;transition:all .3s ease}.horizontal .step-wrapper.completed .step-connector,.horizontal .step-wrapper.active .step-connector{background:linear-gradient(90deg,#667eea 0%,#764ba2 100%)}.horizontal .step-content{text-align:center;width:100%}.vertical .stepper-container{flex-direction:column;align-items:stretch}.vertical .step-wrapper{display:flex;flex-direction:row;align-items:flex-start;gap:1.5rem;padding:1.5rem 0}.vertical .step-wrapper.clickable{cursor:pointer}.vertical .step-wrapper:hover:not(.disabled) .step-circle{transform:scale(1.1)}.vertical .step-indicator{display:flex;flex-direction:column;align-items:center;position:relative}.vertical .step-connector{width:3px;height:100%;min-height:40px;background:#e5e7eb;margin:.5rem 0;transition:all .3s ease}.vertical .step-wrapper.completed .step-connector,.vertical .step-wrapper.active .step-connector{background:linear-gradient(180deg,#667eea 0%,#764ba2 100%)}.vertical .step-content{flex:1;padding-top:.25rem}.step-circle{width:48px;height:48px;border-radius:50%;background:white;border:3px solid #e5e7eb;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:1.125rem;color:#9ca3af;transition:all .3s ease;flex-shrink:0;position:relative;z-index:1}.step-wrapper.active .step-circle{border-color:#667eea;background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);color:#fff;box-shadow:0 8px 24px #667eea66;animation:pulse 1.5s ease-in-out infinite}.step-wrapper.completed .step-circle{border-color:#10b981;background:#10b981;color:#fff}.step-wrapper.disabled .step-circle{opacity:.4;cursor:not-allowed}.check-icon{animation:checkmark .3s ease-out}.step-number{display:flex;align-items:center;justify-content:center}.step-icon{font-size:1.5rem}.step-label{font-size:.95rem;font-weight:600;color:#4b5563;margin-bottom:.25rem;transition:color .3s ease}.step-wrapper.active .step-label{color:#667eea;font-weight:700}.step-wrapper.completed .step-label{color:#10b981}.step-wrapper.disabled .step-label{color:#d1d5db}.step-description{font-size:.875rem;color:#6b7280;line-height:1.4;transition:color .3s ease}.step-wrapper.disabled .step-description{color:#d1d5db}@keyframes pulse{0%,to{box-shadow:0 8px 24px #667eea66}50%{box-shadow:0 8px 32px #667eea99}}@keyframes checkmark{0%{transform:scale(0) rotate(-45deg)}50%{transform:scale(1.2) rotate(0)}to{transform:scale(1) rotate(0)}}@media (max-width: 768px){.horizontal .stepper-container{flex-direction:column}.horizontal .step-wrapper{flex-direction:row;align-items:flex-start;gap:1rem;padding:1rem 0}.horizontal .step-indicator{flex-direction:column}.horizontal .step-connector{width:3px!important;height:100%!important;min-height:30px;margin:.5rem 0!important}.horizontal .step-content{text-align:left!important;padding-top:.25rem}.horizontal .step-circle{margin:0!important}.step-circle{width:40px;height:40px;font-size:1rem}.step-icon{font-size:1.25rem}.step-label{font-size:.875rem}.step-description{font-size:.8125rem}}\n"] }]
+        }], propDecorators: { steps: [{
+                type: Input
+            }], currentStep: [{
+                type: Input
+            }], orientation: [{
+                type: Input
+            }], clickable: [{
+                type: Input
+            }], stepChange: [{
+                type: Output
+            }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { StepperComponent };
+//# sourceMappingURL=muxima-ui-stepper.mjs.map

package/fesm2015/muxima-ui-stepper.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"muxima-ui-stepper.mjs","sources":["../../../../navigation/stepper/src/lib/stepper/stepper.component.ts","../../../../navigation/stepper/src/lib/stepper/stepper.component.html","../../../../navigation/stepper/src/muxima-ui-stepper.ts"],"sourcesContent":["import { Component, EventEmitter, Input, Output } from '@angular/core';\r\nimport { CommonModule } from '@angular/common';\r\n\r\nexport interface Step {\r\n  label: string;\r\n  description?: string;\r\n  icon?: string;\r\n  completed?: boolean;\r\n  disabled?: boolean;\r\n}\r\n\r\n@Component({\r\n  selector: 'muxima-stepper',\r\n  standalone: true,\r\n  imports: [CommonModule],\r\n  templateUrl: './stepper.component.html',\r\n  styleUrls: ['./stepper.component.scss'],\r\n})\r\nexport class StepperComponent {\r\n  @Input() steps: Step[] = [];\r\n  @Input() currentStep = 0;\r\n  @Input() orientation: 'horizontal' | 'vertical' = 'horizontal';\r\n  @Input() clickable = true;\r\n\r\n  @Output() stepChange = new EventEmitter<number>();\r\n\r\n  isActive(index: number): boolean {\r\n    return this.currentStep === index;\r\n  }\r\n\r\n  isCompleted(index: number): boolean {\r\n    return index < this.currentStep || this.steps[index]?.completed === true;\r\n  }\r\n\r\n  isDisabled(index: number): boolean {\r\n    return this.steps[index]?.disabled === true;\r\n  }\r\n\r\n  goToStep(index: number): void {\r\n    if (!this.clickable || this.isDisabled(index)) {\r\n      return;\r\n    }\r\n    this.currentStep = index;\r\n    this.stepChange.emit(index);\r\n  }\r\n\r\n  nextStep(): void {\r\n    if (this.currentStep < this.steps.length - 1) {\r\n      const nextIndex = this.currentStep + 1;\r\n      if (!this.isDisabled(nextIndex)) {\r\n        this.currentStep = nextIndex;\r\n        this.stepChange.emit(nextIndex);\r\n      }\r\n    }\r\n  }\r\n\r\n  previousStep(): void {\r\n    if (this.currentStep > 0) {\r\n      const prevIndex = this.currentStep - 1;\r\n      if (!this.isDisabled(prevIndex)) {\r\n        this.currentStep = prevIndex;\r\n        this.stepChange.emit(prevIndex);\r\n      }\r\n    }\r\n  }\r\n\r\n  canGoNext(): boolean {\r\n    return this.currentStep < this.steps.length - 1 && \r\n           !this.isDisabled(this.currentStep + 1);\r\n  }\r\n\r\n  canGoPrevious(): boolean {\r\n    return this.currentStep > 0 && \r\n           !this.isDisabled(this.currentStep - 1);\r\n  }\r\n}\r\n\r\n","<div class=\"muxima-stepper\" [class.vertical]=\"orientation === 'vertical'\" [class.horizontal]=\"orientation === 'horizontal'\">\n  <div class=\"stepper-container\">\n    <div *ngFor=\"let step of steps; let i = index\" \n         class=\"step-wrapper\"\n         [class.active]=\"isActive(i)\"\n         [class.completed]=\"isCompleted(i)\"\n         [class.disabled]=\"isDisabled(i)\"\n         [class.clickable]=\"clickable && !isDisabled(i)\"\n         (click)=\"goToStep(i)\">\n      \n      <!-- Step Indicator -->\n      <div class=\"step-indicator\">\n        <div class=\"step-circle\">\n          <!-- Completed Icon -->\n          <svg *ngIf=\"isCompleted(i)\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" class=\"check-icon\">\n            <path d=\"M16.6668 5L7.50016 14.1667L3.3335 10\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n          </svg>\n          \n          <!-- Step Number or Icon -->\n          <span *ngIf=\"!isCompleted(i)\" class=\"step-number\">\n            <span *ngIf=\"!step.icon\">{{ i + 1 }}</span>\n            <span *ngIf=\"step.icon\" class=\"step-icon\">{{ step.icon }}</span>\n          </span>\n        </div>\n        \n        <!-- Connector Line -->\n        <div *ngIf=\"i < steps.length - 1\" class=\"step-connector\"></div>\n      </div>\n      \n      <!-- Step Content -->\n      <div class=\"step-content\">\n        <div class=\"step-label\">{{ step.label }}</div>\n        <div *ngIf=\"step.description\" class=\"step-description\">{{ step.description }}</div>\n      </div>\n    </div>\n  </div>\n</div>\r\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}

package/fesm2020/muxima-ui-stepper.mjs

@@ -0,0 +1,79 @@
+import * as i0 from '@angular/core';
+import { EventEmitter, Component, Input, Output } from '@angular/core';
+import * as i1 from '@angular/common';
+import { CommonModule } from '@angular/common';
+
+class StepperComponent {
+    constructor() {
+        this.steps = [];
+        this.currentStep = 0;
+        this.orientation = 'horizontal';
+        this.clickable = true;
+        this.stepChange = new EventEmitter();
+    }
+    isActive(index) {
+        return this.currentStep === index;
+    }
+    isCompleted(index) {
+        return index < this.currentStep || this.steps[index]?.completed === true;
+    }
+    isDisabled(index) {
+        return this.steps[index]?.disabled === true;
+    }
+    goToStep(index) {
+        if (!this.clickable || this.isDisabled(index)) {
+            return;
+        }
+        this.currentStep = index;
+        this.stepChange.emit(index);
+    }
+    nextStep() {
+        if (this.currentStep < this.steps.length - 1) {
+            const nextIndex = this.currentStep + 1;
+            if (!this.isDisabled(nextIndex)) {
+                this.currentStep = nextIndex;
+                this.stepChange.emit(nextIndex);
+            }
+        }
+    }
+    previousStep() {
+        if (this.currentStep > 0) {
+            const prevIndex = this.currentStep - 1;
+            if (!this.isDisabled(prevIndex)) {
+                this.currentStep = prevIndex;
+                this.stepChange.emit(prevIndex);
+            }
+        }
+    }
+    canGoNext() {
+        return this.currentStep < this.steps.length - 1 &&
+            !this.isDisabled(this.currentStep + 1);
+    }
+    canGoPrevious() {
+        return this.currentStep > 0 &&
+            !this.isDisabled(this.currentStep - 1);
+    }
+}
+StepperComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: StepperComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+StepperComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: StepperComponent, isStandalone: true, selector: "muxima-stepper", inputs: { steps: "steps", currentStep: "currentStep", orientation: "orientation", clickable: "clickable" }, outputs: { stepChange: "stepChange" }, ngImport: i0, template: "<div class=\"muxima-stepper\" [class.vertical]=\"orientation === 'vertical'\" [class.horizontal]=\"orientation === 'horizontal'\">\n  <div class=\"stepper-container\">\n    <div *ngFor=\"let step of steps; let i = index\" \n         class=\"step-wrapper\"\n         [class.active]=\"isActive(i)\"\n         [class.completed]=\"isCompleted(i)\"\n         [class.disabled]=\"isDisabled(i)\"\n         [class.clickable]=\"clickable && !isDisabled(i)\"\n         (click)=\"goToStep(i)\">\n      \n      <!-- Step Indicator -->\n      <div class=\"step-indicator\">\n        <div class=\"step-circle\">\n          <!-- Completed Icon -->\n          <svg *ngIf=\"isCompleted(i)\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" class=\"check-icon\">\n            <path d=\"M16.6668 5L7.50016 14.1667L3.3335 10\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n          </svg>\n          \n          <!-- Step Number or Icon -->\n          <span *ngIf=\"!isCompleted(i)\" class=\"step-number\">\n            <span *ngIf=\"!step.icon\">{{ i + 1 }}</span>\n            <span *ngIf=\"step.icon\" class=\"step-icon\">{{ step.icon }}</span>\n          </span>\n        </div>\n        \n        <!-- Connector Line -->\n        <div *ngIf=\"i < steps.length - 1\" class=\"step-connector\"></div>\n      </div>\n      \n      <!-- Step Content -->\n      <div class=\"step-content\">\n        <div class=\"step-label\">{{ step.label }}</div>\n        <div *ngIf=\"step.description\" class=\"step-description\">{{ step.description }}</div>\n      </div>\n    </div>\n  </div>\n</div>\r\n", styles: [".muxima-stepper{width:100%}.stepper-container{display:flex;gap:0}.horizontal .stepper-container{flex-direction:row;align-items:flex-start}.horizontal .step-wrapper{flex:1;display:flex;flex-direction:column;align-items:center;position:relative}.horizontal .step-wrapper.clickable{cursor:pointer}.horizontal .step-wrapper:hover:not(.disabled) .step-circle{transform:scale(1.1)}.horizontal .step-indicator{display:flex;align-items:center;width:100%;margin-bottom:1rem}.horizontal .step-circle{margin:0 auto}.horizontal .step-connector{flex:1;height:3px;background:#e5e7eb;margin:0 1rem;transition:all .3s ease}.horizontal .step-wrapper.completed .step-connector,.horizontal .step-wrapper.active .step-connector{background:linear-gradient(90deg,#667eea 0%,#764ba2 100%)}.horizontal .step-content{text-align:center;width:100%}.vertical .stepper-container{flex-direction:column;align-items:stretch}.vertical .step-wrapper{display:flex;flex-direction:row;align-items:flex-start;gap:1.5rem;padding:1.5rem 0}.vertical .step-wrapper.clickable{cursor:pointer}.vertical .step-wrapper:hover:not(.disabled) .step-circle{transform:scale(1.1)}.vertical .step-indicator{display:flex;flex-direction:column;align-items:center;position:relative}.vertical .step-connector{width:3px;height:100%;min-height:40px;background:#e5e7eb;margin:.5rem 0;transition:all .3s ease}.vertical .step-wrapper.completed .step-connector,.vertical .step-wrapper.active .step-connector{background:linear-gradient(180deg,#667eea 0%,#764ba2 100%)}.vertical .step-content{flex:1;padding-top:.25rem}.step-circle{width:48px;height:48px;border-radius:50%;background:white;border:3px solid #e5e7eb;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:1.125rem;color:#9ca3af;transition:all .3s ease;flex-shrink:0;position:relative;z-index:1}.step-wrapper.active .step-circle{border-color:#667eea;background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);color:#fff;box-shadow:0 8px 24px #667eea66;animation:pulse 1.5s ease-in-out infinite}.step-wrapper.completed .step-circle{border-color:#10b981;background:#10b981;color:#fff}.step-wrapper.disabled .step-circle{opacity:.4;cursor:not-allowed}.check-icon{animation:checkmark .3s ease-out}.step-number{display:flex;align-items:center;justify-content:center}.step-icon{font-size:1.5rem}.step-label{font-size:.95rem;font-weight:600;color:#4b5563;margin-bottom:.25rem;transition:color .3s ease}.step-wrapper.active .step-label{color:#667eea;font-weight:700}.step-wrapper.completed .step-label{color:#10b981}.step-wrapper.disabled .step-label{color:#d1d5db}.step-description{font-size:.875rem;color:#6b7280;line-height:1.4;transition:color .3s ease}.step-wrapper.disabled .step-description{color:#d1d5db}@keyframes pulse{0%,to{box-shadow:0 8px 24px #667eea66}50%{box-shadow:0 8px 32px #667eea99}}@keyframes checkmark{0%{transform:scale(0) rotate(-45deg)}50%{transform:scale(1.2) rotate(0)}to{transform:scale(1) rotate(0)}}@media (max-width: 768px){.horizontal .stepper-container{flex-direction:column}.horizontal .step-wrapper{flex-direction:row;align-items:flex-start;gap:1rem;padding:1rem 0}.horizontal .step-indicator{flex-direction:column}.horizontal .step-connector{width:3px!important;height:100%!important;min-height:30px;margin:.5rem 0!important}.horizontal .step-content{text-align:left!important;padding-top:.25rem}.horizontal .step-circle{margin:0!important}.step-circle{width:40px;height:40px;font-size:1rem}.step-icon{font-size:1.25rem}.step-label{font-size:.875rem}.step-description{font-size:.8125rem}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: StepperComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'muxima-stepper', standalone: true, imports: [CommonModule], template: "<div class=\"muxima-stepper\" [class.vertical]=\"orientation === 'vertical'\" [class.horizontal]=\"orientation === 'horizontal'\">\n  <div class=\"stepper-container\">\n    <div *ngFor=\"let step of steps; let i = index\" \n         class=\"step-wrapper\"\n         [class.active]=\"isActive(i)\"\n         [class.completed]=\"isCompleted(i)\"\n         [class.disabled]=\"isDisabled(i)\"\n         [class.clickable]=\"clickable && !isDisabled(i)\"\n         (click)=\"goToStep(i)\">\n      \n      <!-- Step Indicator -->\n      <div class=\"step-indicator\">\n        <div class=\"step-circle\">\n          <!-- Completed Icon -->\n          <svg *ngIf=\"isCompleted(i)\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" class=\"check-icon\">\n            <path d=\"M16.6668 5L7.50016 14.1667L3.3335 10\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n          </svg>\n          \n          <!-- Step Number or Icon -->\n          <span *ngIf=\"!isCompleted(i)\" class=\"step-number\">\n            <span *ngIf=\"!step.icon\">{{ i + 1 }}</span>\n            <span *ngIf=\"step.icon\" class=\"step-icon\">{{ step.icon }}</span>\n          </span>\n        </div>\n        \n        <!-- Connector Line -->\n        <div *ngIf=\"i < steps.length - 1\" class=\"step-connector\"></div>\n      </div>\n      \n      <!-- Step Content -->\n      <div class=\"step-content\">\n        <div class=\"step-label\">{{ step.label }}</div>\n        <div *ngIf=\"step.description\" class=\"step-description\">{{ step.description }}</div>\n      </div>\n    </div>\n  </div>\n</div>\r\n", styles: [".muxima-stepper{width:100%}.stepper-container{display:flex;gap:0}.horizontal .stepper-container{flex-direction:row;align-items:flex-start}.horizontal .step-wrapper{flex:1;display:flex;flex-direction:column;align-items:center;position:relative}.horizontal .step-wrapper.clickable{cursor:pointer}.horizontal .step-wrapper:hover:not(.disabled) .step-circle{transform:scale(1.1)}.horizontal .step-indicator{display:flex;align-items:center;width:100%;margin-bottom:1rem}.horizontal .step-circle{margin:0 auto}.horizontal .step-connector{flex:1;height:3px;background:#e5e7eb;margin:0 1rem;transition:all .3s ease}.horizontal .step-wrapper.completed .step-connector,.horizontal .step-wrapper.active .step-connector{background:linear-gradient(90deg,#667eea 0%,#764ba2 100%)}.horizontal .step-content{text-align:center;width:100%}.vertical .stepper-container{flex-direction:column;align-items:stretch}.vertical .step-wrapper{display:flex;flex-direction:row;align-items:flex-start;gap:1.5rem;padding:1.5rem 0}.vertical .step-wrapper.clickable{cursor:pointer}.vertical .step-wrapper:hover:not(.disabled) .step-circle{transform:scale(1.1)}.vertical .step-indicator{display:flex;flex-direction:column;align-items:center;position:relative}.vertical .step-connector{width:3px;height:100%;min-height:40px;background:#e5e7eb;margin:.5rem 0;transition:all .3s ease}.vertical .step-wrapper.completed .step-connector,.vertical .step-wrapper.active .step-connector{background:linear-gradient(180deg,#667eea 0%,#764ba2 100%)}.vertical .step-content{flex:1;padding-top:.25rem}.step-circle{width:48px;height:48px;border-radius:50%;background:white;border:3px solid #e5e7eb;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:1.125rem;color:#9ca3af;transition:all .3s ease;flex-shrink:0;position:relative;z-index:1}.step-wrapper.active .step-circle{border-color:#667eea;background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);color:#fff;box-shadow:0 8px 24px #667eea66;animation:pulse 1.5s ease-in-out infinite}.step-wrapper.completed .step-circle{border-color:#10b981;background:#10b981;color:#fff}.step-wrapper.disabled .step-circle{opacity:.4;cursor:not-allowed}.check-icon{animation:checkmark .3s ease-out}.step-number{display:flex;align-items:center;justify-content:center}.step-icon{font-size:1.5rem}.step-label{font-size:.95rem;font-weight:600;color:#4b5563;margin-bottom:.25rem;transition:color .3s ease}.step-wrapper.active .step-label{color:#667eea;font-weight:700}.step-wrapper.completed .step-label{color:#10b981}.step-wrapper.disabled .step-label{color:#d1d5db}.step-description{font-size:.875rem;color:#6b7280;line-height:1.4;transition:color .3s ease}.step-wrapper.disabled .step-description{color:#d1d5db}@keyframes pulse{0%,to{box-shadow:0 8px 24px #667eea66}50%{box-shadow:0 8px 32px #667eea99}}@keyframes checkmark{0%{transform:scale(0) rotate(-45deg)}50%{transform:scale(1.2) rotate(0)}to{transform:scale(1) rotate(0)}}@media (max-width: 768px){.horizontal .stepper-container{flex-direction:column}.horizontal .step-wrapper{flex-direction:row;align-items:flex-start;gap:1rem;padding:1rem 0}.horizontal .step-indicator{flex-direction:column}.horizontal .step-connector{width:3px!important;height:100%!important;min-height:30px;margin:.5rem 0!important}.horizontal .step-content{text-align:left!important;padding-top:.25rem}.horizontal .step-circle{margin:0!important}.step-circle{width:40px;height:40px;font-size:1rem}.step-icon{font-size:1.25rem}.step-label{font-size:.875rem}.step-description{font-size:.8125rem}}\n"] }]
+        }], propDecorators: { steps: [{
+                type: Input
+            }], currentStep: [{
+                type: Input
+            }], orientation: [{
+                type: Input
+            }], clickable: [{
+                type: Input
+            }], stepChange: [{
+                type: Output
+            }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { StepperComponent };
+//# sourceMappingURL=muxima-ui-stepper.mjs.map

package/fesm2020/muxima-ui-stepper.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"muxima-ui-stepper.mjs","sources":["../../../../navigation/stepper/src/lib/stepper/stepper.component.ts","../../../../navigation/stepper/src/lib/stepper/stepper.component.html","../../../../navigation/stepper/src/muxima-ui-stepper.ts"],"sourcesContent":["import { Component, EventEmitter, Input, Output } from '@angular/core';\r\nimport { CommonModule } from '@angular/common';\r\n\r\nexport interface Step {\r\n  label: string;\r\n  description?: string;\r\n  icon?: string;\r\n  completed?: boolean;\r\n  disabled?: boolean;\r\n}\r\n\r\n@Component({\r\n  selector: 'muxima-stepper',\r\n  standalone: true,\r\n  imports: [CommonModule],\r\n  templateUrl: './stepper.component.html',\r\n  styleUrls: ['./stepper.component.scss'],\r\n})\r\nexport class StepperComponent {\r\n  @Input() steps: Step[] = [];\r\n  @Input() currentStep = 0;\r\n  @Input() orientation: 'horizontal' | 'vertical' = 'horizontal';\r\n  @Input() clickable = true;\r\n\r\n  @Output() stepChange = new EventEmitter<number>();\r\n\r\n  isActive(index: number): boolean {\r\n    return this.currentStep === index;\r\n  }\r\n\r\n  isCompleted(index: number): boolean {\r\n    return index < this.currentStep || this.steps[index]?.completed === true;\r\n  }\r\n\r\n  isDisabled(index: number): boolean {\r\n    return this.steps[index]?.disabled === true;\r\n  }\r\n\r\n  goToStep(index: number): void {\r\n    if (!this.clickable || this.isDisabled(index)) {\r\n      return;\r\n    }\r\n    this.currentStep = index;\r\n    this.stepChange.emit(index);\r\n  }\r\n\r\n  nextStep(): void {\r\n    if (this.currentStep < this.steps.length - 1) {\r\n      const nextIndex = this.currentStep + 1;\r\n      if (!this.isDisabled(nextIndex)) {\r\n        this.currentStep = nextIndex;\r\n        this.stepChange.emit(nextIndex);\r\n      }\r\n    }\r\n  }\r\n\r\n  previousStep(): void {\r\n    if (this.currentStep > 0) {\r\n      const prevIndex = this.currentStep - 1;\r\n      if (!this.isDisabled(prevIndex)) {\r\n        this.currentStep = prevIndex;\r\n        this.stepChange.emit(prevIndex);\r\n      }\r\n    }\r\n  }\r\n\r\n  canGoNext(): boolean {\r\n    return this.currentStep < this.steps.length - 1 && \r\n           !this.isDisabled(this.currentStep + 1);\r\n  }\r\n\r\n  canGoPrevious(): boolean {\r\n    return this.currentStep > 0 && \r\n           !this.isDisabled(this.currentStep - 1);\r\n  }\r\n}\r\n\r\n","<div class=\"muxima-stepper\" [class.vertical]=\"orientation === 'vertical'\" [class.horizontal]=\"orientation === 'horizontal'\">\n  <div class=\"stepper-container\">\n    <div *ngFor=\"let step of steps; let i = index\" \n         class=\"step-wrapper\"\n         [class.active]=\"isActive(i)\"\n         [class.completed]=\"isCompleted(i)\"\n         [class.disabled]=\"isDisabled(i)\"\n         [class.clickable]=\"clickable && !isDisabled(i)\"\n         (click)=\"goToStep(i)\">\n      \n      <!-- Step Indicator -->\n      <div class=\"step-indicator\">\n        <div class=\"step-circle\">\n          <!-- Completed Icon -->\n          <svg *ngIf=\"isCompleted(i)\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" class=\"check-icon\">\n            <path d=\"M16.6668 5L7.50016 14.1667L3.3335 10\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n          </svg>\n          \n          <!-- Step Number or Icon -->\n          <span *ngIf=\"!isCompleted(i)\" class=\"step-number\">\n            <span *ngIf=\"!step.icon\">{{ i + 1 }}</span>\n            <span *ngIf=\"step.icon\" class=\"step-icon\">{{ step.icon }}</span>\n          </span>\n        </div>\n        \n        <!-- Connector Line -->\n        <div *ngIf=\"i < steps.length - 1\" class=\"step-connector\"></div>\n      </div>\n      \n      <!-- Step Content -->\n      <div class=\"step-content\">\n        <div class=\"step-label\">{{ step.label }}</div>\n        <div *ngIf=\"step.description\" class=\"step-description\">{{ step.description }}</div>\n      </div>\n    </div>\n  </div>\n</div>\r\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}

package/index.d.ts

@@ -0,0 +1 @@
+export * from './lib/stepper/stepper.component';

package/lib/stepper/stepper.component.d.ts

@@ -0,0 +1,26 @@
+import { EventEmitter } from '@angular/core';
+import * as i0 from "@angular/core";
+export interface Step {
+    label: string;
+    description?: string;
+    icon?: string;
+    completed?: boolean;
+    disabled?: boolean;
+}
+export declare class StepperComponent {
+    steps: Step[];
+    currentStep: number;
+    orientation: 'horizontal' | 'vertical';
+    clickable: boolean;
+    stepChange: EventEmitter<number>;
+    isActive(index: number): boolean;
+    isCompleted(index: number): boolean;
+    isDisabled(index: number): boolean;
+    goToStep(index: number): void;
+    nextStep(): void;
+    previousStep(): void;
+    canGoNext(): boolean;
+    canGoPrevious(): boolean;
+    static ɵfac: i0.ɵɵFactoryDeclaration<StepperComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<StepperComponent, "muxima-stepper", never, { "steps": "steps"; "currentStep": "currentStep"; "orientation": "orientation"; "clickable": "clickable"; }, { "stepChange": "stepChange"; }, never, never, true, never>;
+}

package/package.json

@@ -0,0 +1,55 @@
+{
+  "name": "@muxima-ui/stepper",
+  "version": "1.0.0",
+  "description": "Stepper/wizard component for Angular 18+ - Muxima UI",
+  "keywords": [
+    "angular",
+    "stepper",
+    "wizard",
+    "steps",
+    "navigation",
+    "muxima-ui"
+  ],
+  "author": "Muxima UI Team (jokerscript)",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/Aldemiro20/muxima-ui.git",
+    "directory": "packages/navigation/stepper"
+  },
+  "homepage": "https://muxima-ui.vercel.app/components/stepper",
+  "bugs": {
+    "url": "https://github.com/Aldemiro20/muxima-ui/issues"
+  },
+  "documentation": "https://muxima-ui.vercel.app",
+  "publishConfig": {
+    "access": "public"
+  },
+  "peerDependencies": {
+    "@angular/common": "^18.0.0",
+    "@angular/core": "^18.0.0"
+  },
+  "dependencies": {
+    "tslib": "^2.3.0"
+  },
+  "sideEffects": false,
+  "module": "fesm2015/muxima-ui-stepper.mjs",
+  "es2020": "fesm2020/muxima-ui-stepper.mjs",
+  "esm2020": "esm2020/muxima-ui-stepper.mjs",
+  "fesm2020": "fesm2020/muxima-ui-stepper.mjs",
+  "fesm2015": "fesm2015/muxima-ui-stepper.mjs",
+  "typings": "index.d.ts",
+  "exports": {
+    "./package.json": {
+      "default": "./package.json"
+    },
+    ".": {
+      "types": "./index.d.ts",
+      "esm2020": "./esm2020/muxima-ui-stepper.mjs",
+      "es2020": "./fesm2020/muxima-ui-stepper.mjs",
+      "es2015": "./fesm2015/muxima-ui-stepper.mjs",
+      "node": "./fesm2015/muxima-ui-stepper.mjs",
+      "default": "./fesm2020/muxima-ui-stepper.mjs"
+    }
+  }
+}