flexacore-ui-dev/dist/core/angular/fc-stepper.component.js

Universal UI Framework for CDN, React, Angular, Vue, Svelte with TypeScript support

"use strict";
var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
    return c > 3 && r && Object.defineProperty(target, key, r), r;
};
var __metadata = (this && this.__metadata) || function (k, v) {
    if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.FCStepperComponent = exports.FCStepComponent = void 0;
const core_1 = require("@angular/core");
let FCStepComponent = class FCStepComponent {
    constructor() {
        this.title = '';
        this.description = '';
        this.active = false;
        this.completed = false;
        this.index = 0;
    }
};
exports.FCStepComponent = FCStepComponent;
__decorate([
    (0, core_1.Input)(),
    __metadata("design:type", String)
], FCStepComponent.prototype, "title", void 0);
__decorate([
    (0, core_1.Input)(),
    __metadata("design:type", String)
], FCStepComponent.prototype, "description", void 0);
__decorate([
    (0, core_1.Input)(),
    __metadata("design:type", Boolean)
], FCStepComponent.prototype, "active", void 0);
__decorate([
    (0, core_1.Input)(),
    __metadata("design:type", Boolean)
], FCStepComponent.prototype, "completed", void 0);
__decorate([
    (0, core_1.Input)(),
    __metadata("design:type", Number)
], FCStepComponent.prototype, "index", void 0);
exports.FCStepComponent = FCStepComponent = __decorate([
    (0, core_1.Component)({
        selector: 'fc-step',
        template: `
    <div [ngClass]="['fc-step', active ? 'fc-step-active' : '', completed ? 'fc-step-completed' : '']">
      <div class="fc-step-icon">
        <span *ngIf="!completed">{{ index + 1 }}</span>
        <span *ngIf="completed">✓</span>
      </div>
      <div class="fc-step-content">
        <div class="fc-step-title">{{ title }}</div>
        <div class="fc-step-description" *ngIf="description">{{ description }}</div>
      </div>
    </div>
  `
    })
], FCStepComponent);
let FCStepperComponent = class FCStepperComponent {
    constructor() {
        this.currentStep = 0;
        this.showNavigation = true;
        this.currentStepChange = new core_1.EventEmitter();
    }
    ngAfterContentInit() {
        this.updateSteps();
    }
    updateSteps() {
        this.steps.forEach((step, index) => {
            step.index = index;
            step.active = index === this.currentStep;
            step.completed = index < this.currentStep;
        });
    }
    next() {
        if (this.currentStep < this.steps.length - 1) {
            this.currentStep++;
            this.updateSteps();
            this.currentStepChange.emit(this.currentStep);
        }
    }
    previous() {
        if (this.currentStep > 0) {
            this.currentStep--;
            this.updateSteps();
            this.currentStepChange.emit(this.currentStep);
        }
    }
};
exports.FCStepperComponent = FCStepperComponent;
__decorate([
    (0, core_1.ContentChildren)(FCStepComponent),
    __metadata("design:type", core_1.QueryList)
], FCStepperComponent.prototype, "steps", void 0);
__decorate([
    (0, core_1.Input)(),
    __metadata("design:type", Number)
], FCStepperComponent.prototype, "currentStep", void 0);
__decorate([
    (0, core_1.Input)(),
    __metadata("design:type", Boolean)
], FCStepperComponent.prototype, "showNavigation", void 0);
__decorate([
    (0, core_1.Output)(),
    __metadata("design:type", Object)
], FCStepperComponent.prototype, "currentStepChange", void 0);
exports.FCStepperComponent = FCStepperComponent = __decorate([
    (0, core_1.Component)({
        selector: 'fc-stepper',
        template: `
    <div class="fc-stepper">
      <div class="fc-stepper-header">
        <ng-content></ng-content>
      </div>
      <div class="fc-stepper-content">
        <div 
          *ngFor="let step of steps; let i = index"
          [ngClass]="['fc-step-pane', step.active ? 'fc-step-pane-active' : '']"
          [style.display]="step.active ? 'block' : 'none'"
        >
          <ng-content select="[fc-step-content]"></ng-content>
        </div>
      </div>
      <div class="fc-stepper-footer" *ngIf="showNavigation">
        <button 
          class="fc-btn fc-btn-secondary" 
          (click)="previous()"
          [disabled]="currentStep === 0"
        >
          Trước
        </button>
        <button 
          class="fc-btn fc-btn-primary" 
          (click)="next()"
          [disabled]="currentStep === steps.length - 1"
        >
          Tiếp
        </button>
      </div>
    </div>
  `
    })
], FCStepperComponent);