@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, ViewEncapsulation } 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}.stepper-group__wrapper wco-step{background-color:red!important}\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"] }], encapsulation: i0.ViewEncapsulation.None });
}
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], encapsulation: ViewEncapsulation.None, 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}.stepper-group__wrapper wco-step{background-color:red!important}\n"] }]
        }], ctorParameters: () => [], propDecorators: { isVertical: [{
                type: Input
            }], stepperArray: [{
                type: Input
            }], stepperSelected: [{
                type: Output
            }] } });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic3RlcHBlci5jb21wb25lbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9uZ3gtY29tcG9uZW50cy9zcmMvbGliL3N0ZXBwZXIvc3RlcHBlci5jb21wb25lbnQudHMiLCIuLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9uZ3gtY29tcG9uZW50cy9zcmMvbGliL3N0ZXBwZXIvc3RlcHBlci5jb21wb25lbnQuaHRtbCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQUUsWUFBWSxFQUFFLE1BQU0saUJBQWlCLENBQUM7QUFDL0MsT0FBTyxFQUFFLFNBQVMsRUFBRSxZQUFZLEVBQUUsS0FBSyxFQUFFLE1BQU0sRUFBRSxpQkFBaUIsRUFBRSxNQUFNLGVBQWUsQ0FBQzs7O0FBcUIxRixNQUFNLE9BQU8sZ0JBQWdCO0lBQzNCOztNQUVFO0lBQ08sVUFBVSxHQUFZLEtBQUssQ0FBQztJQUVyQzs7O01BR0U7SUFDTyxZQUFZLEdBQXdCLEVBQUUsQ0FBQztJQUVoRDs7TUFFRTtJQUNRLGVBQWUsR0FBRyxJQUFJLFlBQVksRUFBVSxDQUFBO0lBRXRELGdCQUFlLENBQUM7SUFFaEI7O1FBRUk7SUFDSixXQUFXLENBQUMsSUFBa0IsRUFBRSxLQUFhO1FBQzNDLElBQUcsQ0FBQyxJQUFJLENBQUMsT0FBTyxFQUFFLENBQUM7WUFDakIsT0FBTTtRQUNSLENBQUM7UUFDRCxJQUFJLENBQUMsZUFBZSxDQUFDLElBQUksQ0FBQyxLQUFLLENBQUMsQ0FBQTtJQUNsQyxDQUFDO3dHQTNCVSxnQkFBZ0I7NEZBQWhCLGdCQUFnQiw0TEN0QjdCLG81Q0F5Q0EsbzBHRHhCWSxZQUFZOzs0RkFLWCxnQkFBZ0I7a0JBUjVCLFNBQVM7K0JBQ0UsYUFBYSxjQUNYLElBQUksV0FDUCxDQUFDLFlBQVksQ0FBQyxpQkFHUixpQkFBaUIsQ0FBQyxJQUFJO3dEQU01QixVQUFVO3NCQUFsQixLQUFLO2dCQU1HLFlBQVk7c0JBQXBCLEtBQUs7Z0JBS0ksZUFBZTtzQkFBeEIsTUFBTSIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IENvbW1vbk1vZHVsZSB9IGZyb20gXCJAYW5ndWxhci9jb21tb25cIjtcbmltcG9ydCB7IENvbXBvbmVudCwgRXZlbnRFbWl0dGVyLCBJbnB1dCwgT3V0cHV0LCBWaWV3RW5jYXBzdWxhdGlvbiB9IGZyb20gXCJAYW5ndWxhci9jb3JlXCI7XG5cbmV4cG9ydCBpbnRlcmZhY2UgU3RlcHBlckNsYXNzIHtcbiAgbGFiZWw/OiBzdHJpbmc7XG4gIGNsYXNzTmFtZT86ICdmaW5hbGl6ZWQnIHwgICdjdXJyZW50JyB8ICd3YWl0aW5nJyB8ICdlcnJvcic7XG4gIHNob3dMaW5lU3RhcnQ6IGJvb2xlYW47XG4gIHNob3dMaW5lRW5kOiBib29sZWFuO1xuICB0eXBlPzogJ2ljb24nIHwgJ3RleHQnO1xuICB2YWx1ZUljb24/OiBzdHJpbmc7XG4gIHZhbHVlQnVsbGV0Pzogc3RyaW5nO1xuICBjbGlja2VkPzogYm9vbGVhbjtcbn1cblxuQENvbXBvbmVudCh7XG4gIHNlbGVjdG9yOiBcIndjby1zdGVwcGVyXCIsXG4gIHN0YW5kYWxvbmU6IHRydWUsXG4gIGltcG9ydHM6IFtDb21tb25Nb2R1bGVdLFxuICB0ZW1wbGF0ZVVybDogXCIuL3N0ZXBwZXIuY29tcG9uZW50Lmh0bWxcIixcbiAgc3R5bGVVcmxzOiBbXCIuL3N0ZXBwZXIuY29tcG9uZW50LnNjc3NcIl0sXG4gIGVuY2Fwc3VsYXRpb246IFZpZXdFbmNhcHN1bGF0aW9uLk5vbmUsXG59KVxuZXhwb3J0IGNsYXNzIFN0ZXBwZXJDb21wb25lbnQge1xuICAvKipcbiAgKiBTZW50aWRvIGRvIHN0ZXBwZXIgKGhvcml6b250YWwgb3UgdmVydGljYWwpXG4gICovXG4gIEBJbnB1dCgpIGlzVmVydGljYWw6IGJvb2xlYW4gPSBmYWxzZTtcblxuICAvKipcbiAgKiBBcnJheSBkZSBpdGVucyBkbyBzdGVwcGVyIFN0ZXBwZXJDbGFzc1xuICAqIEBwYXJhbSB7U3RlcHBlckNsYXNzfSBzdGVwcGVyXG4gICovXG4gIEBJbnB1dCgpIHN0ZXBwZXJBcnJheTogQXJyYXk8U3RlcHBlckNsYXNzPiA9IFtdO1xuXG4gIC8qKlxuICAqIEZ1bsOnw6NvIHF1ZSByZXRvcm5hIG8gdmFsb3IgZG8gw61jb25lIG91IGJ1bGxldFxuICAqL1xuICBAT3V0cHV0KCkgc3RlcHBlclNlbGVjdGVkID0gbmV3IEV2ZW50RW1pdHRlcjxudW1iZXI+KClcblxuICBjb25zdHJ1Y3RvcigpIHt9XG5cbiAgLyoqXG4gICogc2UgbyBpdGVtIGRvIHN0ZXBwZXIgZXN0aXZlIGNvbSBvIGV2ZW50byBkZSBjbGlja2VkIHRydWUsIGVsZSByZXRvcm5hIHF1YWwgZWxlbWVudG8gw6kgc2VsZWNpb25hZG8gcGFyYSBvIGNvbXBvbmVudGUgcGFpXG4gICogKi9cbiAgY2xpY2tlZEl0ZW0oaXRlbTogU3RlcHBlckNsYXNzLCBpbmRleDogbnVtYmVyKSB7XG4gICAgaWYoIWl0ZW0uY2xpY2tlZCkge1xuICAgICAgcmV0dXJuXG4gICAgfVxuICAgIHRoaXMuc3RlcHBlclNlbGVjdGVkLmVtaXQoaW5kZXgpXG4gIH1cbn1cbiIsIjxkaXZcbiAgY2xhc3M9XCJzdGVwcGVyLXZlcnRpY2FsXCJcbiAgW25nQ2xhc3NdPVwiaXNWZXJ0aWNhbCA9PT0gdHJ1ZSA/ICdzdGVwcGVyLXZlcnRpY2FsJyA6ICdzdGVwcGVyLWhvcml6b250YWwnXCJcbiAgKm5nSWY9XCJzdGVwcGVyQXJyYXlcIlxuPlxuICA8ZGl2IGNsYXNzPVwic3RlcHBlci1jb21wb25lbnRcIiAqbmdGb3I9XCJsZXQgaXRlbXMgb2Ygc3RlcHBlckFycmF5OyBsZXQgJGkgPSBpbmRleFwiPlxuICAgIDxkaXYgY2xhc3M9XCJzdGVwcGVyLWNvbXBvbmVudF9fbWFpblwiPlxuICAgICAgPGRpdiBjbGFzcz1cInN0ZXBwZXItaXRlbVwiIFtuZ0NsYXNzXT1cInsnc3RlcHBlci1pdGVtX19jbGlja2VkJzogaXRlbXMuY2xpY2tlZH1cIiAgKGNsaWNrKT1cImNsaWNrZWRJdGVtKGl0ZW1zLCRpKVwiPlxuICAgICAgICA8c3BhblxuICAgICAgICAgIFtuZ0NsYXNzXT1cIlxuICAgICAgICAgICAgaXRlbXMuc2hvd0xpbmVTdGFydCA9PT0gdHJ1ZVxuICAgICAgICAgICAgICA/ICdzdGVwcGVyLWl0ZW1fX2xpbmUnXG4gICAgICAgICAgICAgIDogJ3N0ZXBwZXItaXRlbV9fd2l0aG91dC1saW5lJ1xuICAgICAgICAgIFwiXG4gICAgICAgID48L3NwYW4+XG4gICAgICAgIDxzcGFuIGNsYXNzPVwic3RlcHBlci1pdGVtX19jaXJjbGVcIiBbbmdDbGFzc109XCJpdGVtcy5jbGFzc05hbWVcIlxuICAgICAgICAgID48c3BhbiAqbmdJZj1cIml0ZW1zLnR5cGUgPT09ICdpY29uJ1wiIGNsYXNzPVwiaWNvbiBtYXRlcmlhbC1pY29uc1wiPnt7XG4gICAgICAgICAgICBpdGVtcy52YWx1ZUljb25cbiAgICAgICAgICB9fTwvc3Bhbj5cbiAgICAgICAgICA8c3BhbiAqbmdJZj1cIml0ZW1zLnR5cGUgPT09ICd0ZXh0J1wiIGNsYXNzPVwiaWNvblwiPnt7XG4gICAgICAgICAgICBpdGVtcy52YWx1ZUJ1bGxldFxuICAgICAgICAgIH19PC9zcGFuPjwvc3BhblxuICAgICAgICA+XG4gICAgICAgIDxzcGFuXG4gICAgICAgICAgW25nQ2xhc3NdPVwiXG4gICAgICAgICAgICBpdGVtcy5zaG93TGluZUVuZCA9PT0gdHJ1ZVxuICAgICAgICAgICAgICA/ICdzdGVwcGVyLWl0ZW1fX2xpbmUnXG4gICAgICAgICAgICAgIDogJ3N0ZXBwZXItaXRlbV9fd2l0aG91dC1saW5lJ1xuICAgICAgICAgIFwiXG4gICAgICAgID48L3NwYW4+XG4gICAgICA8L2Rpdj5cbiAgICAgIDxkaXYgY2xhc3M9XCJzdGVwcGVyLWxhYmVsXCI+XG4gICAgICAgIDxzcGFuXG4gICAgICAgICAgY2xhc3M9XCJzdGVwcGVyLWxhYmVsX190ZXh0XCJcbiAgICAgICAgICBbbmdDbGFzc109XCJpdGVtcy5jbGFzc05hbWUgPT09ICdjdXJyZW50JyA/ICdkYXJrLXRleHQnIDogJ2xpZ2h0LXRleHQnXCJcbiAgICAgICAgICA+e3sgaXRlbXMubGFiZWwgfX08L3NwYW5cbiAgICAgICAgPlxuICAgICAgPC9kaXY+XG4gICAgPC9kaXY+XG4gIDwvZGl2PlxuPC9kaXY+XG4iXX0=