@wizco/fenixds-ngx/esm2022/lib/stepper/stepper.component.mjs

Componentes fenix design system para Angular.

import { CommonModule } from "@angular/common";
import { Component, EventEmitter, Input, Output } from "@angular/core";
import * as i0 from "@angular/core";
import * as i1 from "@angular/common";
export class StepperComponent {
    /**
    * Sentido do stepper (horizontal ou vertical)
    */
    isVertical = false;
    /**
    * Array de itens do stepper StepperClass
    * @param {StepperClass} stepper
    */
    stepperArray = [];
    /**
    * Função que retorna o valor do ícone ou bullet
    */
    stepperSelected = new EventEmitter();
    constructor() { }
    /**
    * se o item do stepper estive com o evento de clicked true, ele retorna qual elemento é selecionado para o componente pai
    * */
    clickedItem(item, index) {
        if (!item.clicked) {
            return;
        }
        this.stepperSelected.emit(index);
    }
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: StepperComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: StepperComponent, isStandalone: true, selector: "wco-stepper", inputs: { isVertical: "isVertical", stepperArray: "stepperArray" }, outputs: { stepperSelected: "stepperSelected" }, ngImport: i0, template: "<div\n  class=\"stepper-vertical\"\n  [ngClass]=\"isVertical === true ? 'stepper-vertical' : 'stepper-horizontal'\"\n  *ngIf=\"stepperArray\"\n>\n  <div class=\"stepper-component\" *ngFor=\"let items of stepperArray; let $i = index\">\n    <div class=\"stepper-component__main\">\n      <div class=\"stepper-item\" [ngClass]=\"{'stepper-item__clicked': items.clicked}\"  (click)=\"clickedItem(items,$i)\">\n        <span\n          [ngClass]=\"\n            items.showLineStart === true\n              ? 'stepper-item__line'\n              : 'stepper-item__without-line'\n          \"\n        ></span>\n        <span class=\"stepper-item__circle\" [ngClass]=\"items.className\"\n          ><span *ngIf=\"items.type === 'icon'\" class=\"icon material-icons\">{{\n            items.valueIcon\n          }}</span>\n          <span *ngIf=\"items.type === 'text'\" class=\"icon\">{{\n            items.valueBullet\n          }}</span></span\n        >\n        <span\n          [ngClass]=\"\n            items.showLineEnd === true\n              ? 'stepper-item__line'\n              : 'stepper-item__without-line'\n          \"\n        ></span>\n      </div>\n      <div class=\"stepper-label\">\n        <span\n          class=\"stepper-label__text\"\n          [ngClass]=\"items.className === 'current' ? 'dark-text' : 'light-text'\"\n          >{{ items.label }}</span\n        >\n      </div>\n    </div>\n  </div>\n</div>\n", styles: [".stepper-vertical{display:flex;align-items:flex-start;flex-direction:column}.stepper-vertical .stepper-component{display:flex;flex-direction:row;align-items:center}.stepper-vertical .stepper-component__main{display:flex;width:100%;flex-direction:row;justify-content:center;align-items:center}.stepper-vertical .stepper-item{display:flex;flex-direction:column;justify-content:center;align-items:center}.stepper-vertical .stepper-item__line{display:flex;background-color:#000;height:1rem;width:1px}.stepper-vertical .stepper-item___without-line{display:flex;padding-top:1rem}.stepper-vertical .stepper-item__without-line{display:flex;padding-bottom:1rem}.stepper-vertical .stepper-item__circle{display:flex;align-items:center;justify-content:center;border-radius:50%;height:2rem;width:2rem;font-size:.75rem;line-height:1;padding:1rem;overflow:hidden;transition:all .3s ease-in-out;transform-origin:center center}.stepper-vertical .stepper-item__circle .material-icons{display:flex;align-items:center;justify-content:center;font-size:1rem}.stepper-vertical .stepper-item__clicked{cursor:pointer}.stepper-vertical .stepper-item__clicked:hover .stepper-item__circle{transform:scale(1.2)}.stepper-vertical .stepper-item .finalized{background-color:#ffe1ca}.stepper-vertical .stepper-item .current{background-color:#f56c00;color:#fff}.stepper-vertical .stepper-item .waiting{background-color:#c1c3c5;color:gray}.stepper-vertical .stepper-item .error{background-color:#fc9393}.stepper-vertical .stepper-label{padding-left:.5rem;font-size:1rem}.stepper-vertical .stepper-label .dark-text{font-weight:700}.stepper-vertical .stepper-label .light-text{font-weight:400}.stepper-horizontal{display:flex;align-items:flex-start;flex-direction:row}.stepper-horizontal .stepper-component{display:flex;flex-direction:column;align-items:center;width:100%}.stepper-horizontal .stepper-component__main{display:flex;width:100%;flex-direction:column;justify-content:center;align-items:center}.stepper-horizontal .stepper-item{display:flex;flex-direction:row;justify-content:center;align-items:center;width:100%}.stepper-horizontal .stepper-item__line{display:flex;background-color:#000;height:1px;width:100%}.stepper-horizontal .stepper-item__without-line{background-color:transparent;height:1px;width:100%}.stepper-horizontal .stepper-item__circle{display:flex;align-items:center;justify-content:center;border-radius:50%;height:2rem;width:2rem;font-size:.75rem;line-height:1;padding:1rem;overflow:hidden}.stepper-horizontal .stepper-item__circle .material-icons{display:flex;align-items:center;justify-content:center;font-size:1rem}.stepper-horizontal .stepper-item .finalized{background-color:#ffe1ca}.stepper-horizontal .stepper-item .current{background-color:#f56c00;color:#fff}.stepper-horizontal .stepper-item .waiting{background-color:#c1c3c5;color:gray}.stepper-horizontal .stepper-item .error{background-color:#fc9393}.stepper-horizontal .stepper-label{padding-top:.5rem;padding-left:0rem;font-size:.875rem;display:flex;align-items:center;justify-content:center}.stepper-horizontal .stepper-label__text{display:flex;flex-wrap:wrap;max-width:50%;text-align:center}.stepper-horizontal .stepper-label .dark-text{font-weight:700}.stepper-horizontal .stepper-label .light-text{font-weight:400}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { 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: "18.2.13", ngImport: i0, type: StepperComponent, decorators: [{
            type: Component,
            args: [{ selector: "wco-stepper", standalone: true, imports: [CommonModule], template: "<div\n  class=\"stepper-vertical\"\n  [ngClass]=\"isVertical === true ? 'stepper-vertical' : 'stepper-horizontal'\"\n  *ngIf=\"stepperArray\"\n>\n  <div class=\"stepper-component\" *ngFor=\"let items of stepperArray; let $i = index\">\n    <div class=\"stepper-component__main\">\n      <div class=\"stepper-item\" [ngClass]=\"{'stepper-item__clicked': items.clicked}\"  (click)=\"clickedItem(items,$i)\">\n        <span\n          [ngClass]=\"\n            items.showLineStart === true\n              ? 'stepper-item__line'\n              : 'stepper-item__without-line'\n          \"\n        ></span>\n        <span class=\"stepper-item__circle\" [ngClass]=\"items.className\"\n          ><span *ngIf=\"items.type === 'icon'\" class=\"icon material-icons\">{{\n            items.valueIcon\n          }}</span>\n          <span *ngIf=\"items.type === 'text'\" class=\"icon\">{{\n            items.valueBullet\n          }}</span></span\n        >\n        <span\n          [ngClass]=\"\n            items.showLineEnd === true\n              ? 'stepper-item__line'\n              : 'stepper-item__without-line'\n          \"\n        ></span>\n      </div>\n      <div class=\"stepper-label\">\n        <span\n          class=\"stepper-label__text\"\n          [ngClass]=\"items.className === 'current' ? 'dark-text' : 'light-text'\"\n          >{{ items.label }}</span\n        >\n      </div>\n    </div>\n  </div>\n</div>\n", styles: [".stepper-vertical{display:flex;align-items:flex-start;flex-direction:column}.stepper-vertical .stepper-component{display:flex;flex-direction:row;align-items:center}.stepper-vertical .stepper-component__main{display:flex;width:100%;flex-direction:row;justify-content:center;align-items:center}.stepper-vertical .stepper-item{display:flex;flex-direction:column;justify-content:center;align-items:center}.stepper-vertical .stepper-item__line{display:flex;background-color:#000;height:1rem;width:1px}.stepper-vertical .stepper-item___without-line{display:flex;padding-top:1rem}.stepper-vertical .stepper-item__without-line{display:flex;padding-bottom:1rem}.stepper-vertical .stepper-item__circle{display:flex;align-items:center;justify-content:center;border-radius:50%;height:2rem;width:2rem;font-size:.75rem;line-height:1;padding:1rem;overflow:hidden;transition:all .3s ease-in-out;transform-origin:center center}.stepper-vertical .stepper-item__circle .material-icons{display:flex;align-items:center;justify-content:center;font-size:1rem}.stepper-vertical .stepper-item__clicked{cursor:pointer}.stepper-vertical .stepper-item__clicked:hover .stepper-item__circle{transform:scale(1.2)}.stepper-vertical .stepper-item .finalized{background-color:#ffe1ca}.stepper-vertical .stepper-item .current{background-color:#f56c00;color:#fff}.stepper-vertical .stepper-item .waiting{background-color:#c1c3c5;color:gray}.stepper-vertical .stepper-item .error{background-color:#fc9393}.stepper-vertical .stepper-label{padding-left:.5rem;font-size:1rem}.stepper-vertical .stepper-label .dark-text{font-weight:700}.stepper-vertical .stepper-label .light-text{font-weight:400}.stepper-horizontal{display:flex;align-items:flex-start;flex-direction:row}.stepper-horizontal .stepper-component{display:flex;flex-direction:column;align-items:center;width:100%}.stepper-horizontal .stepper-component__main{display:flex;width:100%;flex-direction:column;justify-content:center;align-items:center}.stepper-horizontal .stepper-item{display:flex;flex-direction:row;justify-content:center;align-items:center;width:100%}.stepper-horizontal .stepper-item__line{display:flex;background-color:#000;height:1px;width:100%}.stepper-horizontal .stepper-item__without-line{background-color:transparent;height:1px;width:100%}.stepper-horizontal .stepper-item__circle{display:flex;align-items:center;justify-content:center;border-radius:50%;height:2rem;width:2rem;font-size:.75rem;line-height:1;padding:1rem;overflow:hidden}.stepper-horizontal .stepper-item__circle .material-icons{display:flex;align-items:center;justify-content:center;font-size:1rem}.stepper-horizontal .stepper-item .finalized{background-color:#ffe1ca}.stepper-horizontal .stepper-item .current{background-color:#f56c00;color:#fff}.stepper-horizontal .stepper-item .waiting{background-color:#c1c3c5;color:gray}.stepper-horizontal .stepper-item .error{background-color:#fc9393}.stepper-horizontal .stepper-label{padding-top:.5rem;padding-left:0rem;font-size:.875rem;display:flex;align-items:center;justify-content:center}.stepper-horizontal .stepper-label__text{display:flex;flex-wrap:wrap;max-width:50%;text-align:center}.stepper-horizontal .stepper-label .dark-text{font-weight:700}.stepper-horizontal .stepper-label .light-text{font-weight:400}\n"] }]
        }], ctorParameters: () => [], propDecorators: { isVertical: [{
                type: Input
            }], stepperArray: [{
                type: Input
            }], stepperSelected: [{
                type: Output
            }] } });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic3RlcHBlci5jb21wb25lbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9uZ3gtY29tcG9uZW50cy9zcmMvbGliL3N0ZXBwZXIvc3RlcHBlci5jb21wb25lbnQudHMiLCIuLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9uZ3gtY29tcG9uZW50cy9zcmMvbGliL3N0ZXBwZXIvc3RlcHBlci5jb21wb25lbnQuaHRtbCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQUUsWUFBWSxFQUFFLE1BQU0saUJBQWlCLENBQUM7QUFDL0MsT0FBTyxFQUFFLFNBQVMsRUFBRSxZQUFZLEVBQUUsS0FBSyxFQUFFLE1BQU0sRUFBRSxNQUFNLGVBQWUsQ0FBQzs7O0FBb0J2RSxNQUFNLE9BQU8sZ0JBQWdCO0lBQzNCOztNQUVFO0lBQ08sVUFBVSxHQUFZLEtBQUssQ0FBQztJQUVyQzs7O01BR0U7SUFDTyxZQUFZLEdBQXdCLEVBQUUsQ0FBQztJQUVoRDs7TUFFRTtJQUNRLGVBQWUsR0FBRyxJQUFJLFlBQVksRUFBVSxDQUFBO0lBRXRELGdCQUFlLENBQUM7SUFFaEI7O1FBRUk7SUFDSixXQUFXLENBQUMsSUFBa0IsRUFBRSxLQUFhO1FBQzNDLElBQUcsQ0FBQyxJQUFJLENBQUMsT0FBTyxFQUFFLENBQUM7WUFDakIsT0FBTTtRQUNSLENBQUM7UUFDRCxJQUFJLENBQUMsZUFBZSxDQUFDLElBQUksQ0FBQyxLQUFLLENBQUMsQ0FBQTtJQUNsQyxDQUFDO3dHQTNCVSxnQkFBZ0I7NEZBQWhCLGdCQUFnQiw0TENyQjdCLG81Q0F5Q0Esb3dHRHhCWSxZQUFZOzs0RkFJWCxnQkFBZ0I7a0JBUDVCLFNBQVM7K0JBQ0UsYUFBYSxjQUNYLElBQUksV0FDUCxDQUFDLFlBQVksQ0FBQzt3REFRZCxVQUFVO3NCQUFsQixLQUFLO2dCQU1HLFlBQVk7c0JBQXBCLEtBQUs7Z0JBS0ksZUFBZTtzQkFBeEIsTUFBTSIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IENvbW1vbk1vZHVsZSB9IGZyb20gXCJAYW5ndWxhci9jb21tb25cIjtcbmltcG9ydCB7IENvbXBvbmVudCwgRXZlbnRFbWl0dGVyLCBJbnB1dCwgT3V0cHV0IH0gZnJvbSBcIkBhbmd1bGFyL2NvcmVcIjtcblxuZXhwb3J0IGludGVyZmFjZSBTdGVwcGVyQ2xhc3Mge1xuICBsYWJlbD86IHN0cmluZztcbiAgY2xhc3NOYW1lPzogJ2ZpbmFsaXplZCcgfCAgJ2N1cnJlbnQnIHwgJ3dhaXRpbmcnIHwgJ2Vycm9yJztcbiAgc2hvd0xpbmVTdGFydDogYm9vbGVhbjtcbiAgc2hvd0xpbmVFbmQ6IGJvb2xlYW47XG4gIHR5cGU/OiAnaWNvbicgfCAndGV4dCc7XG4gIHZhbHVlSWNvbj86IHN0cmluZztcbiAgdmFsdWVCdWxsZXQ/OiBzdHJpbmc7XG4gIGNsaWNrZWQ/OiBib29sZWFuO1xufVxuXG5AQ29tcG9uZW50KHtcbiAgc2VsZWN0b3I6IFwid2NvLXN0ZXBwZXJcIixcbiAgc3RhbmRhbG9uZTogdHJ1ZSxcbiAgaW1wb3J0czogW0NvbW1vbk1vZHVsZV0sXG4gIHRlbXBsYXRlVXJsOiBcIi4vc3RlcHBlci5jb21wb25lbnQuaHRtbFwiLFxuICBzdHlsZVVybHM6IFtcIi4vc3RlcHBlci5jb21wb25lbnQuc2Nzc1wiXSxcbn0pXG5leHBvcnQgY2xhc3MgU3RlcHBlckNvbXBvbmVudCB7XG4gIC8qKlxuICAqIFNlbnRpZG8gZG8gc3RlcHBlciAoaG9yaXpvbnRhbCBvdSB2ZXJ0aWNhbClcbiAgKi9cbiAgQElucHV0KCkgaXNWZXJ0aWNhbDogYm9vbGVhbiA9IGZhbHNlO1xuXG4gIC8qKlxuICAqIEFycmF5IGRlIGl0ZW5zIGRvIHN0ZXBwZXIgU3RlcHBlckNsYXNzXG4gICogQHBhcmFtIHtTdGVwcGVyQ2xhc3N9IHN0ZXBwZXJcbiAgKi9cbiAgQElucHV0KCkgc3RlcHBlckFycmF5OiBBcnJheTxTdGVwcGVyQ2xhc3M+ID0gW107XG5cbiAgLyoqXG4gICogRnVuw6fDo28gcXVlIHJldG9ybmEgbyB2YWxvciBkbyDDrWNvbmUgb3UgYnVsbGV0XG4gICovXG4gIEBPdXRwdXQoKSBzdGVwcGVyU2VsZWN0ZWQgPSBuZXcgRXZlbnRFbWl0dGVyPG51bWJlcj4oKVxuXG4gIGNvbnN0cnVjdG9yKCkge31cblxuICAvKipcbiAgKiBzZSBvIGl0ZW0gZG8gc3RlcHBlciBlc3RpdmUgY29tIG8gZXZlbnRvIGRlIGNsaWNrZWQgdHJ1ZSwgZWxlIHJldG9ybmEgcXVhbCBlbGVtZW50byDDqSBzZWxlY2lvbmFkbyBwYXJhIG8gY29tcG9uZW50ZSBwYWlcbiAgKiAqL1xuICBjbGlja2VkSXRlbShpdGVtOiBTdGVwcGVyQ2xhc3MsIGluZGV4OiBudW1iZXIpIHtcbiAgICBpZighaXRlbS5jbGlja2VkKSB7XG4gICAgICByZXR1cm5cbiAgICB9XG4gICAgdGhpcy5zdGVwcGVyU2VsZWN0ZWQuZW1pdChpbmRleClcbiAgfVxufVxuIiwiPGRpdlxuICBjbGFzcz1cInN0ZXBwZXItdmVydGljYWxcIlxuICBbbmdDbGFzc109XCJpc1ZlcnRpY2FsID09PSB0cnVlID8gJ3N0ZXBwZXItdmVydGljYWwnIDogJ3N0ZXBwZXItaG9yaXpvbnRhbCdcIlxuICAqbmdJZj1cInN0ZXBwZXJBcnJheVwiXG4+XG4gIDxkaXYgY2xhc3M9XCJzdGVwcGVyLWNvbXBvbmVudFwiICpuZ0Zvcj1cImxldCBpdGVtcyBvZiBzdGVwcGVyQXJyYXk7IGxldCAkaSA9IGluZGV4XCI+XG4gICAgPGRpdiBjbGFzcz1cInN0ZXBwZXItY29tcG9uZW50X19tYWluXCI+XG4gICAgICA8ZGl2IGNsYXNzPVwic3RlcHBlci1pdGVtXCIgW25nQ2xhc3NdPVwieydzdGVwcGVyLWl0ZW1fX2NsaWNrZWQnOiBpdGVtcy5jbGlja2VkfVwiICAoY2xpY2spPVwiY2xpY2tlZEl0ZW0oaXRlbXMsJGkpXCI+XG4gICAgICAgIDxzcGFuXG4gICAgICAgICAgW25nQ2xhc3NdPVwiXG4gICAgICAgICAgICBpdGVtcy5zaG93TGluZVN0YXJ0ID09PSB0cnVlXG4gICAgICAgICAgICAgID8gJ3N0ZXBwZXItaXRlbV9fbGluZSdcbiAgICAgICAgICAgICAgOiAnc3RlcHBlci1pdGVtX193aXRob3V0LWxpbmUnXG4gICAgICAgICAgXCJcbiAgICAgICAgPjwvc3Bhbj5cbiAgICAgICAgPHNwYW4gY2xhc3M9XCJzdGVwcGVyLWl0ZW1fX2NpcmNsZVwiIFtuZ0NsYXNzXT1cIml0ZW1zLmNsYXNzTmFtZVwiXG4gICAgICAgICAgPjxzcGFuICpuZ0lmPVwiaXRlbXMudHlwZSA9PT0gJ2ljb24nXCIgY2xhc3M9XCJpY29uIG1hdGVyaWFsLWljb25zXCI+e3tcbiAgICAgICAgICAgIGl0ZW1zLnZhbHVlSWNvblxuICAgICAgICAgIH19PC9zcGFuPlxuICAgICAgICAgIDxzcGFuICpuZ0lmPVwiaXRlbXMudHlwZSA9PT0gJ3RleHQnXCIgY2xhc3M9XCJpY29uXCI+e3tcbiAgICAgICAgICAgIGl0ZW1zLnZhbHVlQnVsbGV0XG4gICAgICAgICAgfX08L3NwYW4+PC9zcGFuXG4gICAgICAgID5cbiAgICAgICAgPHNwYW5cbiAgICAgICAgICBbbmdDbGFzc109XCJcbiAgICAgICAgICAgIGl0ZW1zLnNob3dMaW5lRW5kID09PSB0cnVlXG4gICAgICAgICAgICAgID8gJ3N0ZXBwZXItaXRlbV9fbGluZSdcbiAgICAgICAgICAgICAgOiAnc3RlcHBlci1pdGVtX193aXRob3V0LWxpbmUnXG4gICAgICAgICAgXCJcbiAgICAgICAgPjwvc3Bhbj5cbiAgICAgIDwvZGl2PlxuICAgICAgPGRpdiBjbGFzcz1cInN0ZXBwZXItbGFiZWxcIj5cbiAgICAgICAgPHNwYW5cbiAgICAgICAgICBjbGFzcz1cInN0ZXBwZXItbGFiZWxfX3RleHRcIlxuICAgICAgICAgIFtuZ0NsYXNzXT1cIml0ZW1zLmNsYXNzTmFtZSA9PT0gJ2N1cnJlbnQnID8gJ2RhcmstdGV4dCcgOiAnbGlnaHQtdGV4dCdcIlxuICAgICAgICAgID57eyBpdGVtcy5sYWJlbCB9fTwvc3BhblxuICAgICAgICA+XG4gICAgICA8L2Rpdj5cbiAgICA8L2Rpdj5cbiAgPC9kaXY+XG48L2Rpdj5cbiJdfQ==