@wizco/fenixds-ngx 17.8.5 → 17.9.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/esm2022/lib/step/step.component.mjs +3 -3
- package/esm2022/lib/stepper/stepper.component.mjs +4 -4
- package/esm2022/lib/stepper-group/stepper-group.component.mjs +283 -0
- package/esm2022/public-api.mjs +2 -1
- package/fesm2022/wizco-fenixds-ngx.mjs +284 -6
- package/fesm2022/wizco-fenixds-ngx.mjs.map +1 -1
- package/lib/stepper/stepper.component.d.ts.map +1 -1
- package/lib/stepper-group/stepper-group.component.d.ts +54 -0
- package/lib/stepper-group/stepper-group.component.d.ts.map +1 -0
- package/package.json +1 -1
- package/public-api.d.ts +1 -0
- package/public-api.d.ts.map +1 -1
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import * as i1 from '@angular/common';
|
|
2
2
|
import { CommonModule } from '@angular/common';
|
|
3
3
|
import * as i0 from '@angular/core';
|
|
4
|
-
import { EventEmitter, Component, ViewEncapsulation, Input, Output,
|
|
4
|
+
import { EventEmitter, Component, ViewEncapsulation, Input, Output, ContentChildren, ViewChild, HostListener, SkipSelf, ChangeDetectionStrategy, forwardRef, signal } from '@angular/core';
|
|
5
5
|
import * as i1$1 from '@angular/common/http';
|
|
6
6
|
import { HttpEventType, HttpClientModule } from '@angular/common/http';
|
|
7
7
|
import * as i1$2 from '@angular/router';
|
|
@@ -75,11 +75,11 @@ class StepComponent {
|
|
|
75
75
|
this.clicked.emit();
|
|
76
76
|
}
|
|
77
77
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: StepComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
78
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: StepComponent, isStandalone: true, selector: "wco-step", inputs: { active: "active", label: "label", iconName: "iconName", bulletValue: "bulletValue", isVertical: "isVertical", lineStart: "lineStart", lineEnd: "lineEnd", status: "status", size: "size", hasClick: "hasClick" }, outputs: { clicked: "clicked" }, ngImport: i0, template: "<div class=\"step\"\n [class]=\"'step-status--' + status + ' step-size--' + size\"\n [ngClass]=\"{\n 'step--vertical': isVertical,\n 'step--horizontal': !isVertical,\n 'step--disabled-linestart': !lineStart,\n 'step--disabled-lineend': !lineEnd,\n 'step--clicked': hasClick,\n 'step--active': active\n }\"\n\n>\n <div class=\"step__line step__line--start\"></div>\n <div class=\"step__bullet\" (click)=\"clickedItem()\">\n <div>\n <span *ngIf=\"iconName && !bulletValue\" class=\"material-icons\">{{iconName}}</span>\n <span *ngIf=\"!iconName && bulletValue\">{{bulletValue}}</span>\n <ng-content select=\"[step-bullet-content]\"></ng-content>\n </div>\n </div>\n <div class=\"step__line step__line--end\"></div>\n <div class=\"step__content\">\n <div class=\"step__title\" (click)=\"clickedItem()\">\n <span *ngIf=\"label\">{{label}}</span>\n <ng-content select=\"[step-title]\"></ng-content>\n </div>\n </div>\n</div>\n", styles: ["wco-step{
|
|
78
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: StepComponent, isStandalone: true, selector: "wco-step", inputs: { active: "active", label: "label", iconName: "iconName", bulletValue: "bulletValue", isVertical: "isVertical", lineStart: "lineStart", lineEnd: "lineEnd", status: "status", size: "size", hasClick: "hasClick" }, outputs: { clicked: "clicked" }, ngImport: i0, template: "<div class=\"step\"\n [class]=\"'step-status--' + status + ' step-size--' + size\"\n [ngClass]=\"{\n 'step--vertical': isVertical,\n 'step--horizontal': !isVertical,\n 'step--disabled-linestart': !lineStart,\n 'step--disabled-lineend': !lineEnd,\n 'step--clicked': hasClick,\n 'step--active': active\n }\"\n\n>\n <div class=\"step__line step__line--start\"></div>\n <div class=\"step__bullet\" (click)=\"clickedItem()\">\n <div>\n <span *ngIf=\"iconName && !bulletValue\" class=\"material-icons\">{{iconName}}</span>\n <span *ngIf=\"!iconName && bulletValue\">{{bulletValue}}</span>\n <ng-content select=\"[step-bullet-content]\"></ng-content>\n </div>\n </div>\n <div class=\"step__line step__line--end\"></div>\n <div class=\"step__content\">\n <div class=\"step__title\" (click)=\"clickedItem()\">\n <span *ngIf=\"label\" class=\"display-text\">{{label}}</span>\n <ng-content select=\"[step-title]\"></ng-content>\n </div>\n </div>\n</div>\n", styles: ["@layer wco.layer{wco-step{--wco-step-bullet-size: var(--wco-spacing-xs, 24px);--wco-step-icon-size: var(--wco-font-size-xs, 16px);--wco-step-line-color: var(--wco-color-neutral-500, #8D9399);--wco-step-min-width: 180px;--wco-step-max-width: 1350px;--wco-step-text-size: var(--wco-font-size-xs, 16px);display:inherit;align-items:baseline;width:100%}@media (max-width: 768px){wco-step{--wco-step-min-width: 90px;--wco-step-max-width: 100%}}}wco-step .step{position:relative;display:inline-grid;z-index:0;width:100%}wco-step .step.step--active .step__title span{font-weight:var(--wco-font-weight-bold, 700);color:var(--wco-color-neutral-900, #080809)}wco-step .step .step__line{width:2px;height:100%;background-color:var(--wco-step-line-color)}wco-step .step .step__line--start{grid-area:linestart}wco-step .step .step__content{grid-area:content}wco-step .step .step__line--end{grid-area:lineend}wco-step .step--vertical{grid-template-columns:24px 1fr!important;grid:\"linestart .\" \"bullet content\" \"lineend .\"}wco-step .step--vertical .step__bullet{position:relative}wco-step .step--vertical .step__bullet:before{content:\"\";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:2px;height:100%;background-color:var(--wco-color-neutral-700, #000);z-index:-1}wco-step .step--vertical .step__line{height:calc(var(--step-size) / 2);margin:0 auto;min-height:calc(var(--step-size) / 3)}wco-step .step--vertical .step__content{display:flex;align-items:center}wco-step .step--vertical .step__content .step__title{text-align:left}wco-step .step--horizontal{min-width:var(--wco-step-min-width);max-width:var(--wco-step-max-width);grid-template-areas:\"linestart bullet lineend\" \"content content content\";grid-template-columns:1fr auto 1fr;align-items:center}wco-step .step--horizontal .step__bullet{position:relative;display:flex;justify-content:center}wco-step .step--horizontal .step__bullet:before{content:\"\";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:101%;height:2px;background-color:var(--wco-step-line-color);z-index:-1}wco-step .step--horizontal .step__line{height:2px;width:100%;min-width:calc(var(--step-size) / 3)}wco-step .step--horizontal .step__content{margin-top:var(--wco-spacing-nano, 8px)}wco-step .step--horizontal .step__content span.display-text{text-wrap:balance}wco-step .step__bullet{grid-area:bullet;position:relative}wco-step .step__bullet>div{height:var(--wco-step-bullet-size);width:var(--wco-step-bullet-size);display:flex;align-items:center;justify-content:center;border-radius:50%;background-color:var(--step-background-color);color:var(--step-color);position:relative}wco-step .step__bullet span{font-size:var(--wco-step-icon-size, 12px);font-weight:var(--wco-font-weight-bold, 700)}wco-step .step-status--current{--step-color: var(--wco-color-primary-text, var(--wco-color-neutral-50));--step-background-color: var(--wco-color-primary-600, #fff);--step-text-font-weight: var(--wco-font-weight-bold, 700)}wco-step .step-status--finalized{--step-color: var(--wco-color-neutral-50, #080809);--step-background-color: var(--wco-color-success-500, #116600);--step-text-font-weight: var(--wco-font-weight-regular, 700)}wco-step .step-status--waiting{--step-color: var(--wco-color-neutral-600, #080809);--step-background-color: var(--wco-color-neutral-300, #696969);--step-text-font-weight: var(--wco-font-weight-regular, 700)}wco-step .step-status--error{--step-color: var(--wco-color-danger-700, #FFF);--step-background-color: var(--wco-color-danger-100,#ffa0a0);--step-text-font-weight: var(--wco-font-weight-regular, 700)}wco-step .step .step__content{padding-left:var(--wco-spacing-nano, 8px);padding-right:var(--wco-spacing-nano, 8px);text-align:center}wco-step .step .step__content .step__title span{font-weight:var(--step-text-font-weight)}wco-step .step.step--disabled-linestart .step__line--start{opacity:0}wco-step .step.step--disabled-lineend .step__line--end{opacity:0}wco-step .step.step-size--small{--step-size: var(--wco-spacing-sm, 12px)}wco-step .step.step-size--medium{--step-size: var(--wco-spacing-md, 18px)}wco-step .step.step-size--large{--step-size: var(--wco-spacing-lg, 24px)}wco-step .step.step--clicked .step__bullet{cursor:pointer;transition:all .3s ease}wco-step .step.step--clicked .step__bullet::hover{box-shadow:var(--wco-shadow-level-1)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], encapsulation: i0.ViewEncapsulation.None });
|
|
79
79
|
}
|
|
80
80
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: StepComponent, decorators: [{
|
|
81
81
|
type: Component,
|
|
82
|
-
args: [{ selector: 'wco-step', standalone: true, imports: [CommonModule], encapsulation: ViewEncapsulation.None, template: "<div class=\"step\"\n [class]=\"'step-status--' + status + ' step-size--' + size\"\n [ngClass]=\"{\n 'step--vertical': isVertical,\n 'step--horizontal': !isVertical,\n 'step--disabled-linestart': !lineStart,\n 'step--disabled-lineend': !lineEnd,\n 'step--clicked': hasClick,\n 'step--active': active\n }\"\n\n>\n <div class=\"step__line step__line--start\"></div>\n <div class=\"step__bullet\" (click)=\"clickedItem()\">\n <div>\n <span *ngIf=\"iconName && !bulletValue\" class=\"material-icons\">{{iconName}}</span>\n <span *ngIf=\"!iconName && bulletValue\">{{bulletValue}}</span>\n <ng-content select=\"[step-bullet-content]\"></ng-content>\n </div>\n </div>\n <div class=\"step__line step__line--end\"></div>\n <div class=\"step__content\">\n <div class=\"step__title\" (click)=\"clickedItem()\">\n <span *ngIf=\"label\">{{label}}</span>\n <ng-content select=\"[step-title]\"></ng-content>\n </div>\n </div>\n</div>\n", styles: ["wco-step{
|
|
82
|
+
args: [{ selector: 'wco-step', standalone: true, imports: [CommonModule], encapsulation: ViewEncapsulation.None, template: "<div class=\"step\"\n [class]=\"'step-status--' + status + ' step-size--' + size\"\n [ngClass]=\"{\n 'step--vertical': isVertical,\n 'step--horizontal': !isVertical,\n 'step--disabled-linestart': !lineStart,\n 'step--disabled-lineend': !lineEnd,\n 'step--clicked': hasClick,\n 'step--active': active\n }\"\n\n>\n <div class=\"step__line step__line--start\"></div>\n <div class=\"step__bullet\" (click)=\"clickedItem()\">\n <div>\n <span *ngIf=\"iconName && !bulletValue\" class=\"material-icons\">{{iconName}}</span>\n <span *ngIf=\"!iconName && bulletValue\">{{bulletValue}}</span>\n <ng-content select=\"[step-bullet-content]\"></ng-content>\n </div>\n </div>\n <div class=\"step__line step__line--end\"></div>\n <div class=\"step__content\">\n <div class=\"step__title\" (click)=\"clickedItem()\">\n <span *ngIf=\"label\" class=\"display-text\">{{label}}</span>\n <ng-content select=\"[step-title]\"></ng-content>\n </div>\n </div>\n</div>\n", styles: ["@layer wco.layer{wco-step{--wco-step-bullet-size: var(--wco-spacing-xs, 24px);--wco-step-icon-size: var(--wco-font-size-xs, 16px);--wco-step-line-color: var(--wco-color-neutral-500, #8D9399);--wco-step-min-width: 180px;--wco-step-max-width: 1350px;--wco-step-text-size: var(--wco-font-size-xs, 16px);display:inherit;align-items:baseline;width:100%}@media (max-width: 768px){wco-step{--wco-step-min-width: 90px;--wco-step-max-width: 100%}}}wco-step .step{position:relative;display:inline-grid;z-index:0;width:100%}wco-step .step.step--active .step__title span{font-weight:var(--wco-font-weight-bold, 700);color:var(--wco-color-neutral-900, #080809)}wco-step .step .step__line{width:2px;height:100%;background-color:var(--wco-step-line-color)}wco-step .step .step__line--start{grid-area:linestart}wco-step .step .step__content{grid-area:content}wco-step .step .step__line--end{grid-area:lineend}wco-step .step--vertical{grid-template-columns:24px 1fr!important;grid:\"linestart .\" \"bullet content\" \"lineend .\"}wco-step .step--vertical .step__bullet{position:relative}wco-step .step--vertical .step__bullet:before{content:\"\";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:2px;height:100%;background-color:var(--wco-color-neutral-700, #000);z-index:-1}wco-step .step--vertical .step__line{height:calc(var(--step-size) / 2);margin:0 auto;min-height:calc(var(--step-size) / 3)}wco-step .step--vertical .step__content{display:flex;align-items:center}wco-step .step--vertical .step__content .step__title{text-align:left}wco-step .step--horizontal{min-width:var(--wco-step-min-width);max-width:var(--wco-step-max-width);grid-template-areas:\"linestart bullet lineend\" \"content content content\";grid-template-columns:1fr auto 1fr;align-items:center}wco-step .step--horizontal .step__bullet{position:relative;display:flex;justify-content:center}wco-step .step--horizontal .step__bullet:before{content:\"\";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:101%;height:2px;background-color:var(--wco-step-line-color);z-index:-1}wco-step .step--horizontal .step__line{height:2px;width:100%;min-width:calc(var(--step-size) / 3)}wco-step .step--horizontal .step__content{margin-top:var(--wco-spacing-nano, 8px)}wco-step .step--horizontal .step__content span.display-text{text-wrap:balance}wco-step .step__bullet{grid-area:bullet;position:relative}wco-step .step__bullet>div{height:var(--wco-step-bullet-size);width:var(--wco-step-bullet-size);display:flex;align-items:center;justify-content:center;border-radius:50%;background-color:var(--step-background-color);color:var(--step-color);position:relative}wco-step .step__bullet span{font-size:var(--wco-step-icon-size, 12px);font-weight:var(--wco-font-weight-bold, 700)}wco-step .step-status--current{--step-color: var(--wco-color-primary-text, var(--wco-color-neutral-50));--step-background-color: var(--wco-color-primary-600, #fff);--step-text-font-weight: var(--wco-font-weight-bold, 700)}wco-step .step-status--finalized{--step-color: var(--wco-color-neutral-50, #080809);--step-background-color: var(--wco-color-success-500, #116600);--step-text-font-weight: var(--wco-font-weight-regular, 700)}wco-step .step-status--waiting{--step-color: var(--wco-color-neutral-600, #080809);--step-background-color: var(--wco-color-neutral-300, #696969);--step-text-font-weight: var(--wco-font-weight-regular, 700)}wco-step .step-status--error{--step-color: var(--wco-color-danger-700, #FFF);--step-background-color: var(--wco-color-danger-100,#ffa0a0);--step-text-font-weight: var(--wco-font-weight-regular, 700)}wco-step .step .step__content{padding-left:var(--wco-spacing-nano, 8px);padding-right:var(--wco-spacing-nano, 8px);text-align:center}wco-step .step .step__content .step__title span{font-weight:var(--step-text-font-weight)}wco-step .step.step--disabled-linestart .step__line--start{opacity:0}wco-step .step.step--disabled-lineend .step__line--end{opacity:0}wco-step .step.step-size--small{--step-size: var(--wco-spacing-sm, 12px)}wco-step .step.step-size--medium{--step-size: var(--wco-spacing-md, 18px)}wco-step .step.step-size--large{--step-size: var(--wco-spacing-lg, 24px)}wco-step .step.step--clicked .step__bullet{cursor:pointer;transition:all .3s ease}wco-step .step.step--clicked .step__bullet::hover{box-shadow:var(--wco-shadow-level-1)}\n"] }]
|
|
83
83
|
}], ctorParameters: () => [], propDecorators: { active: [{
|
|
84
84
|
type: Input
|
|
85
85
|
}], label: [{
|
|
@@ -129,11 +129,11 @@ class StepperComponent {
|
|
|
129
129
|
this.stepperSelected.emit(index);
|
|
130
130
|
}
|
|
131
131
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: StepperComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
132
|
-
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"] }] });
|
|
132
|
+
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 });
|
|
133
133
|
}
|
|
134
134
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: StepperComponent, decorators: [{
|
|
135
135
|
type: Component,
|
|
136
|
-
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"] }]
|
|
136
|
+
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"] }]
|
|
137
137
|
}], ctorParameters: () => [], propDecorators: { isVertical: [{
|
|
138
138
|
type: Input
|
|
139
139
|
}], stepperArray: [{
|
|
@@ -142,6 +142,284 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
|
|
|
142
142
|
type: Output
|
|
143
143
|
}] } });
|
|
144
144
|
|
|
145
|
+
class StepperGroupComponent {
|
|
146
|
+
steps;
|
|
147
|
+
scrollContainer;
|
|
148
|
+
stepsWrapper;
|
|
149
|
+
/**
|
|
150
|
+
* Tamanho do stepper group
|
|
151
|
+
* 'fit' - ajusta ao conteúdo
|
|
152
|
+
* 'full' - ocupa toda a largura disponível
|
|
153
|
+
*/
|
|
154
|
+
size = 'full';
|
|
155
|
+
/**
|
|
156
|
+
* Modo de exibição
|
|
157
|
+
* 'default' - modo padrão
|
|
158
|
+
* 'mini' - modo compacto (mobile)
|
|
159
|
+
*/
|
|
160
|
+
mode = 'mini';
|
|
161
|
+
/**
|
|
162
|
+
* Orientação dos steps
|
|
163
|
+
* 'horizontal' - orientação horizontal (padrão)
|
|
164
|
+
* 'vertical' - orientação vertical
|
|
165
|
+
*/
|
|
166
|
+
orientation = 'horizontal';
|
|
167
|
+
/**
|
|
168
|
+
* Número do step atual (começa em 1, não 0)
|
|
169
|
+
*/
|
|
170
|
+
current = 1;
|
|
171
|
+
hasHorizontalScroll = false;
|
|
172
|
+
canScrollLeft = false;
|
|
173
|
+
canScrollRight = false;
|
|
174
|
+
isHorizontal = false;
|
|
175
|
+
isMiniResponsive = false;
|
|
176
|
+
get totalSteps() {
|
|
177
|
+
return this.steps?.length || 0;
|
|
178
|
+
}
|
|
179
|
+
isCurrentStep(index) {
|
|
180
|
+
return index === (this.current - 1);
|
|
181
|
+
}
|
|
182
|
+
ngOnChanges(changes) {
|
|
183
|
+
if (changes['current'] && !changes['current'].firstChange) {
|
|
184
|
+
setTimeout(() => {
|
|
185
|
+
this.scrollToCurrent();
|
|
186
|
+
}, 0);
|
|
187
|
+
}
|
|
188
|
+
if (changes['orientation'] && !changes['orientation'].firstChange) {
|
|
189
|
+
setTimeout(() => {
|
|
190
|
+
this.updateSteps();
|
|
191
|
+
}, 0);
|
|
192
|
+
}
|
|
193
|
+
if (changes['mode'] || changes['current']) {
|
|
194
|
+
this.checkMiniResponsive();
|
|
195
|
+
if (this.isMiniResponsive) {
|
|
196
|
+
setTimeout(() => {
|
|
197
|
+
this.updateStepsVisibility();
|
|
198
|
+
}, 0);
|
|
199
|
+
}
|
|
200
|
+
}
|
|
201
|
+
}
|
|
202
|
+
ngAfterContentInit() {
|
|
203
|
+
if (this.steps) {
|
|
204
|
+
this.steps.changes.subscribe(() => {
|
|
205
|
+
this.updateSteps();
|
|
206
|
+
});
|
|
207
|
+
this.updateSteps();
|
|
208
|
+
}
|
|
209
|
+
}
|
|
210
|
+
ngAfterViewInit() {
|
|
211
|
+
this.checkMiniResponsive();
|
|
212
|
+
this.updateStepsVisibility();
|
|
213
|
+
setTimeout(() => {
|
|
214
|
+
this.checkScroll();
|
|
215
|
+
if (this.current > 0) {
|
|
216
|
+
this.scrollToCurrent();
|
|
217
|
+
}
|
|
218
|
+
}, 0);
|
|
219
|
+
}
|
|
220
|
+
updateStepsVisibility() {
|
|
221
|
+
if (!this.steps || this.steps.length === 0)
|
|
222
|
+
return;
|
|
223
|
+
if (this.isMiniResponsive) {
|
|
224
|
+
setTimeout(() => {
|
|
225
|
+
const stepElements = this.stepsWrapper?.nativeElement?.querySelectorAll('wco-step');
|
|
226
|
+
if (stepElements) {
|
|
227
|
+
Array.from(stepElements).forEach((stepEl, index) => {
|
|
228
|
+
const htmlElement = stepEl;
|
|
229
|
+
const isCurrent = index === (this.current - 1);
|
|
230
|
+
if (isCurrent) {
|
|
231
|
+
htmlElement.style.display = '';
|
|
232
|
+
htmlElement.classList.add('stepper-group__step--current');
|
|
233
|
+
}
|
|
234
|
+
else {
|
|
235
|
+
htmlElement.style.display = 'none';
|
|
236
|
+
}
|
|
237
|
+
});
|
|
238
|
+
}
|
|
239
|
+
}, 0);
|
|
240
|
+
}
|
|
241
|
+
else {
|
|
242
|
+
setTimeout(() => {
|
|
243
|
+
const stepElements = this.stepsWrapper?.nativeElement?.querySelectorAll('wco-step');
|
|
244
|
+
if (stepElements) {
|
|
245
|
+
Array.from(stepElements).forEach((stepEl) => {
|
|
246
|
+
const htmlElement = stepEl;
|
|
247
|
+
htmlElement.style.display = '';
|
|
248
|
+
htmlElement.classList.remove('stepper-group__step--current');
|
|
249
|
+
});
|
|
250
|
+
}
|
|
251
|
+
}, 0);
|
|
252
|
+
}
|
|
253
|
+
}
|
|
254
|
+
ngOnDestroy() {
|
|
255
|
+
}
|
|
256
|
+
onResize() {
|
|
257
|
+
this.checkMiniResponsive();
|
|
258
|
+
}
|
|
259
|
+
checkMiniResponsive() {
|
|
260
|
+
if (typeof window !== 'undefined') {
|
|
261
|
+
const wasMiniResponsive = this.isMiniResponsive;
|
|
262
|
+
this.isMiniResponsive = this.mode === 'mini' && window.innerWidth < 600;
|
|
263
|
+
if (wasMiniResponsive !== this.isMiniResponsive) {
|
|
264
|
+
this.updateSteps();
|
|
265
|
+
this.updateStepsVisibility();
|
|
266
|
+
}
|
|
267
|
+
}
|
|
268
|
+
}
|
|
269
|
+
updateSteps() {
|
|
270
|
+
if (!this.steps || this.steps.length === 0)
|
|
271
|
+
return;
|
|
272
|
+
this.steps.forEach((step, index) => {
|
|
273
|
+
const isFirst = index === 0;
|
|
274
|
+
const isLast = index === this.steps.length - 1;
|
|
275
|
+
const isCurrent = index === (this.current - 1);
|
|
276
|
+
if (this.orientation === 'vertical') {
|
|
277
|
+
step.isVertical = true;
|
|
278
|
+
step.lineStart = true;
|
|
279
|
+
step.lineEnd = true;
|
|
280
|
+
}
|
|
281
|
+
else {
|
|
282
|
+
step.isVertical = false;
|
|
283
|
+
step.lineStart = !isFirst;
|
|
284
|
+
step.lineEnd = !isLast;
|
|
285
|
+
}
|
|
286
|
+
if (this.mode === 'mini') {
|
|
287
|
+
step.size = 'small';
|
|
288
|
+
}
|
|
289
|
+
// Em modo mini responsivo, configurar steps para mostrar apenas o atual
|
|
290
|
+
if (this.isMiniResponsive) {
|
|
291
|
+
step.lineStart = false;
|
|
292
|
+
step.lineEnd = false;
|
|
293
|
+
}
|
|
294
|
+
});
|
|
295
|
+
this.isHorizontal = this.orientation === 'horizontal';
|
|
296
|
+
if (this.isHorizontal && !this.isMiniResponsive) {
|
|
297
|
+
setTimeout(() => {
|
|
298
|
+
this.checkScroll();
|
|
299
|
+
if (this.current > 0) {
|
|
300
|
+
this.scrollToCurrent();
|
|
301
|
+
}
|
|
302
|
+
}, 0);
|
|
303
|
+
}
|
|
304
|
+
}
|
|
305
|
+
scrollHandler = () => this.updateArrowVisibility();
|
|
306
|
+
checkScroll() {
|
|
307
|
+
if (!this.scrollContainer?.nativeElement || !this.stepsWrapper?.nativeElement) {
|
|
308
|
+
return;
|
|
309
|
+
}
|
|
310
|
+
const container = this.scrollContainer.nativeElement;
|
|
311
|
+
const wrapper = this.stepsWrapper.nativeElement;
|
|
312
|
+
const gapMargin = 8; // Respiro para não adicionar scroll sem necessidade;
|
|
313
|
+
this.hasHorizontalScroll =
|
|
314
|
+
(wrapper.scrollWidth - gapMargin) > container.clientWidth;
|
|
315
|
+
if (this.hasHorizontalScroll) {
|
|
316
|
+
this.updateArrowVisibility();
|
|
317
|
+
container.removeEventListener('scroll', this.scrollHandler);
|
|
318
|
+
container.addEventListener('scroll', this.scrollHandler);
|
|
319
|
+
}
|
|
320
|
+
else {
|
|
321
|
+
this.canScrollLeft = false;
|
|
322
|
+
this.canScrollRight = false;
|
|
323
|
+
container.removeEventListener('scroll', this.scrollHandler);
|
|
324
|
+
}
|
|
325
|
+
}
|
|
326
|
+
updateArrowVisibility() {
|
|
327
|
+
if (!this.scrollContainer?.nativeElement)
|
|
328
|
+
return;
|
|
329
|
+
const container = this.scrollContainer.nativeElement;
|
|
330
|
+
const scrollLeft = container.scrollLeft;
|
|
331
|
+
const scrollWidth = container.scrollWidth;
|
|
332
|
+
const clientWidth = container.clientWidth;
|
|
333
|
+
this.canScrollLeft = scrollLeft > 0;
|
|
334
|
+
this.canScrollRight = scrollLeft < scrollWidth - clientWidth - 1;
|
|
335
|
+
}
|
|
336
|
+
scrollToCurrent() {
|
|
337
|
+
if (!this.scrollContainer?.nativeElement || !this.steps || this.current < 1) {
|
|
338
|
+
return;
|
|
339
|
+
}
|
|
340
|
+
const stepIndex = this.current - 1;
|
|
341
|
+
if (stepIndex < 0 || stepIndex >= this.steps.length)
|
|
342
|
+
return;
|
|
343
|
+
setTimeout(() => {
|
|
344
|
+
if (!this.scrollContainer?.nativeElement || !this.stepsWrapper?.nativeElement)
|
|
345
|
+
return;
|
|
346
|
+
const container = this.scrollContainer.nativeElement;
|
|
347
|
+
const wrapper = this.stepsWrapper.nativeElement;
|
|
348
|
+
const stepElements = wrapper.querySelectorAll('wco-step');
|
|
349
|
+
if (stepIndex >= stepElements.length)
|
|
350
|
+
return;
|
|
351
|
+
const stepElement = stepElements[stepIndex];
|
|
352
|
+
if (!stepElement)
|
|
353
|
+
return;
|
|
354
|
+
const stepRect = stepElement.getBoundingClientRect();
|
|
355
|
+
const wrapperRect = wrapper.getBoundingClientRect();
|
|
356
|
+
if (stepRect.width === 0 || stepRect.height === 0) {
|
|
357
|
+
setTimeout(() => this.scrollToCurrent(), 50);
|
|
358
|
+
return;
|
|
359
|
+
}
|
|
360
|
+
const stepLeftRelativeToWrapper = stepRect.left - wrapperRect.left + container.scrollLeft;
|
|
361
|
+
const stepCenter = stepLeftRelativeToWrapper + (stepRect.width / 2);
|
|
362
|
+
const containerCenter = container.clientWidth / 2;
|
|
363
|
+
const targetScrollLeft = stepCenter - containerCenter;
|
|
364
|
+
const maxScrollLeft = container.scrollWidth - container.clientWidth;
|
|
365
|
+
const finalScrollLeft = Math.max(0, Math.min(targetScrollLeft, maxScrollLeft));
|
|
366
|
+
container.scrollTo({
|
|
367
|
+
left: finalScrollLeft,
|
|
368
|
+
behavior: 'smooth',
|
|
369
|
+
});
|
|
370
|
+
setTimeout(() => {
|
|
371
|
+
this.updateArrowVisibility();
|
|
372
|
+
}, 300);
|
|
373
|
+
}, 150);
|
|
374
|
+
}
|
|
375
|
+
scrollLeft() {
|
|
376
|
+
if (!this.scrollContainer?.nativeElement || !this.canScrollLeft)
|
|
377
|
+
return;
|
|
378
|
+
const container = this.scrollContainer.nativeElement;
|
|
379
|
+
const scrollAmount = container.clientWidth * 0.8;
|
|
380
|
+
container.scrollBy({
|
|
381
|
+
left: -scrollAmount,
|
|
382
|
+
behavior: 'smooth',
|
|
383
|
+
});
|
|
384
|
+
}
|
|
385
|
+
scrollRight() {
|
|
386
|
+
if (!this.scrollContainer?.nativeElement || !this.canScrollRight)
|
|
387
|
+
return;
|
|
388
|
+
const container = this.scrollContainer.nativeElement;
|
|
389
|
+
const scrollAmount = container.clientWidth * 0.8;
|
|
390
|
+
container.scrollBy({
|
|
391
|
+
left: scrollAmount,
|
|
392
|
+
behavior: 'smooth',
|
|
393
|
+
});
|
|
394
|
+
}
|
|
395
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: StepperGroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
396
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: StepperGroupComponent, isStandalone: true, selector: "wco-stepper-group", inputs: { size: "size", mode: "mode", orientation: "orientation", current: "current" }, host: { listeners: { "window:resize": "onResize($event)" } }, queries: [{ propertyName: "steps", predicate: StepComponent }], viewQueries: [{ propertyName: "scrollContainer", first: true, predicate: ["scrollContainer"], descendants: true }, { propertyName: "stepsWrapper", first: true, predicate: ["stepsWrapper"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div\n class=\"stepper-group\"\n [ngClass]=\"{\n 'stepper-group--fit': size === 'fit',\n 'stepper-group--full': size === 'full',\n 'stepper-group--mini': mode === 'mini',\n 'stepper-group--default': mode === 'default',\n 'stepper-group--horizontal': orientation === 'horizontal',\n 'stepper-group--vertical': orientation === 'vertical',\n 'stepper-group--mini-responsive': isMiniResponsive\n }\"\n>\n <div *ngIf=\"isMiniResponsive\" class=\"stepper-group__mini-header\">\n <span class=\"stepper-group__mini-text\">Passo {{ current }} de {{ totalSteps }}</span>\n </div>\n\n <button \n *ngIf=\"hasHorizontalScroll && orientation === 'horizontal' && !isMiniResponsive\"\n class=\"stepper-group__arrow stepper-group__arrow--left wco-btn btn-primary btn-basic btn-icon btn-sm\"\n (click)=\"scrollLeft()\"\n [disabled]=\"!canScrollLeft\"\n [class.stepper-group__arrow--disabled]=\"!canScrollLeft\"\n aria-label=\"Voltar\"\n >\n <span class=\"material-icons\">chevron_left</span>\n </button>\n\n <div #scrollContainer class=\"stepper-group__container\">\n <div #stepsWrapper class=\"stepper-group__wrapper\">\n <ng-content></ng-content>\n </div>\n </div>\n\n <button \n *ngIf=\"hasHorizontalScroll && orientation === 'horizontal' && !isMiniResponsive\"\n class=\"stepper-group__arrow stepper-group__arrow--right wco-btn btn-primary btn-basic btn-icon btn-sm\"\n (click)=\"scrollRight()\"\n [disabled]=\"!canScrollRight\"\n [class.stepper-group__arrow--disabled]=\"!canScrollRight\"\n aria-label=\"Avan\u00E7ar\"\n >\n <span class=\"material-icons\">chevron_right</span>\n </button>\n</div>\n", styles: [".stepper-group{position:relative;display:flex;align-items:center;width:100%}.stepper-group--fit{width:fit-content}.stepper-group--full{width:100%}.stepper-group--full .stepper-group__wrapper{width:100%;justify-content:center}.stepper-group__container{flex:1;overflow-x:auto;overflow-y:hidden;scroll-behavior:smooth;-webkit-overflow-scrolling:touch;scrollbar-width:none;-ms-overflow-style:none}.stepper-group__container::-webkit-scrollbar{display:none}.stepper-group__wrapper{display:flex;align-items:baseline;white-space:nowrap;min-width:min-content}.stepper-group--vertical{flex-direction:column;align-items:flex-start}.stepper-group--vertical .stepper-group__container{overflow-x:visible;overflow-y:visible}.stepper-group--vertical .stepper-group__wrapper{flex-direction:column;align-items:flex-start;white-space:normal;width:100%}.stepper-group--vertical wco-step:first-child .step__line--start{opacity:0}.stepper-group--vertical wco-step:last-child .step__line--end{opacity:0}.stepper-group__arrow:hover:not(:disabled){opacity:1;background-color:var(--wco-color-neutral-100, #f5f5f5)}.stepper-group__arrow:active:not(:disabled){opacity:.6}.stepper-group__arrow:focus:not(:disabled){outline:2px solid var(--wco-color-primary-500, #f56c00);outline-offset:2px}.stepper-group__arrow:disabled,.stepper-group__arrow--disabled{opacity:.2;cursor:not-allowed}.stepper-group__arrow--left{margin-right:var(--wco-spacing-xs, 8px)}.stepper-group__arrow--right{margin-left:var(--wco-spacing-xs, 8px)}@media (max-width: 600px){.stepper-group--mini .stepper-group__wrapper{gap:var(--wco-spacing-xs, 8px)}.stepper-group--mini .stepper-group__arrow{display:none}.stepper-group--mini.stepper-group--horizontal .stepper-group__container{overflow-x:auto;-webkit-overflow-scrolling:touch}}.stepper-group--mini-responsive{flex-direction:column;align-items:flex-start}.stepper-group--mini-responsive .stepper-group__mini-header{width:100%}.stepper-group--mini-responsive .stepper-group__mini-text{font-size:var(--wco-font-size-xxs, 14px);color:var(--wco-color-neutral-700, #4B5563);font-weight:var(--wco-font-weight-500, 500);letter-spacing:.35px}.stepper-group--mini-responsive .stepper-group__container{width:100%;overflow:visible}.stepper-group--mini-responsive .stepper-group__wrapper{width:100%;flex-direction:column;align-items:flex-start}.stepper-group--mini-responsive wco-step:not(.stepper-group__step--current){display:none!important}.stepper-group--mini-responsive wco-step.stepper-group__step--current{width:100%}.stepper-group--mini-responsive wco-step .step--horizontal{grid-template-columns:min-content min-content;grid-template-areas:\"content bullet\" \"linestart lineend\"}.stepper-group--mini-responsive wco-step .step--horizontal .step__content{padding-left:0;margin-top:var(--wco-spacing-quark, 4px)}.stepper-group--mini-responsive wco-step .step--horizontal .step__content .step__title{text-align:left}.stepper-group--mini-responsive wco-step .step--horizontal .step__content .step__title span{font-size:var(--wco-font-size-xs, 16px);font-weight:var(--wco-font-weight-bold, 700)}.stepper-group--default .stepper-group__wrapper{gap:0}.stepper-group--horizontal.stepper-group--full .stepper-group__wrapper:has(wco-step:nth-child(3)){--wco-step-group-max-width: 350px;--wco-step-groud-width: max-content}.stepper-group--horizontal.stepper-group--full .stepper-group__wrapper:not(:has(wco-step:nth-child(3))){--wco-step-group-max-width: 100%;--wco-step-groud-width: 100%}.stepper-group--horizontal.stepper-group--full .stepper-group__wrapper wco-step{max-width:var(--wco-step-group-max-width);width:var(--wco-step-groud-width)}.stepper-group--horizontal.stepper-group--full .stepper-group__wrapper wco-step:first-child .step.step--horizontal{grid-template-columns:80px auto 1fr}.stepper-group--horizontal.stepper-group--full .stepper-group__wrapper wco-step:first-child .step.step--horizontal .step__bullet:before{left:99%}.stepper-group--horizontal.stepper-group--full .stepper-group__wrapper wco-step:first-child .step.step--horizontal .step__content{grid-column:2/3}.stepper-group--horizontal.stepper-group--full .stepper-group__wrapper wco-step:last-child .step.step--horizontal{grid-template-columns:1fr auto 80px}.stepper-group--horizontal.stepper-group--full .stepper-group__wrapper wco-step:last-child .step.step--horizontal .step__bullet:before{left:initial}.stepper-group--horizontal.stepper-group--full .stepper-group__wrapper wco-step:last-child .step.step--horizontal .step__content{grid-column:2/3}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], encapsulation: i0.ViewEncapsulation.None });
|
|
397
|
+
}
|
|
398
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: StepperGroupComponent, decorators: [{
|
|
399
|
+
type: Component,
|
|
400
|
+
args: [{ selector: 'wco-stepper-group', standalone: true, imports: [CommonModule], encapsulation: ViewEncapsulation.None, template: "<div\n class=\"stepper-group\"\n [ngClass]=\"{\n 'stepper-group--fit': size === 'fit',\n 'stepper-group--full': size === 'full',\n 'stepper-group--mini': mode === 'mini',\n 'stepper-group--default': mode === 'default',\n 'stepper-group--horizontal': orientation === 'horizontal',\n 'stepper-group--vertical': orientation === 'vertical',\n 'stepper-group--mini-responsive': isMiniResponsive\n }\"\n>\n <div *ngIf=\"isMiniResponsive\" class=\"stepper-group__mini-header\">\n <span class=\"stepper-group__mini-text\">Passo {{ current }} de {{ totalSteps }}</span>\n </div>\n\n <button \n *ngIf=\"hasHorizontalScroll && orientation === 'horizontal' && !isMiniResponsive\"\n class=\"stepper-group__arrow stepper-group__arrow--left wco-btn btn-primary btn-basic btn-icon btn-sm\"\n (click)=\"scrollLeft()\"\n [disabled]=\"!canScrollLeft\"\n [class.stepper-group__arrow--disabled]=\"!canScrollLeft\"\n aria-label=\"Voltar\"\n >\n <span class=\"material-icons\">chevron_left</span>\n </button>\n\n <div #scrollContainer class=\"stepper-group__container\">\n <div #stepsWrapper class=\"stepper-group__wrapper\">\n <ng-content></ng-content>\n </div>\n </div>\n\n <button \n *ngIf=\"hasHorizontalScroll && orientation === 'horizontal' && !isMiniResponsive\"\n class=\"stepper-group__arrow stepper-group__arrow--right wco-btn btn-primary btn-basic btn-icon btn-sm\"\n (click)=\"scrollRight()\"\n [disabled]=\"!canScrollRight\"\n [class.stepper-group__arrow--disabled]=\"!canScrollRight\"\n aria-label=\"Avan\u00E7ar\"\n >\n <span class=\"material-icons\">chevron_right</span>\n </button>\n</div>\n", styles: [".stepper-group{position:relative;display:flex;align-items:center;width:100%}.stepper-group--fit{width:fit-content}.stepper-group--full{width:100%}.stepper-group--full .stepper-group__wrapper{width:100%;justify-content:center}.stepper-group__container{flex:1;overflow-x:auto;overflow-y:hidden;scroll-behavior:smooth;-webkit-overflow-scrolling:touch;scrollbar-width:none;-ms-overflow-style:none}.stepper-group__container::-webkit-scrollbar{display:none}.stepper-group__wrapper{display:flex;align-items:baseline;white-space:nowrap;min-width:min-content}.stepper-group--vertical{flex-direction:column;align-items:flex-start}.stepper-group--vertical .stepper-group__container{overflow-x:visible;overflow-y:visible}.stepper-group--vertical .stepper-group__wrapper{flex-direction:column;align-items:flex-start;white-space:normal;width:100%}.stepper-group--vertical wco-step:first-child .step__line--start{opacity:0}.stepper-group--vertical wco-step:last-child .step__line--end{opacity:0}.stepper-group__arrow:hover:not(:disabled){opacity:1;background-color:var(--wco-color-neutral-100, #f5f5f5)}.stepper-group__arrow:active:not(:disabled){opacity:.6}.stepper-group__arrow:focus:not(:disabled){outline:2px solid var(--wco-color-primary-500, #f56c00);outline-offset:2px}.stepper-group__arrow:disabled,.stepper-group__arrow--disabled{opacity:.2;cursor:not-allowed}.stepper-group__arrow--left{margin-right:var(--wco-spacing-xs, 8px)}.stepper-group__arrow--right{margin-left:var(--wco-spacing-xs, 8px)}@media (max-width: 600px){.stepper-group--mini .stepper-group__wrapper{gap:var(--wco-spacing-xs, 8px)}.stepper-group--mini .stepper-group__arrow{display:none}.stepper-group--mini.stepper-group--horizontal .stepper-group__container{overflow-x:auto;-webkit-overflow-scrolling:touch}}.stepper-group--mini-responsive{flex-direction:column;align-items:flex-start}.stepper-group--mini-responsive .stepper-group__mini-header{width:100%}.stepper-group--mini-responsive .stepper-group__mini-text{font-size:var(--wco-font-size-xxs, 14px);color:var(--wco-color-neutral-700, #4B5563);font-weight:var(--wco-font-weight-500, 500);letter-spacing:.35px}.stepper-group--mini-responsive .stepper-group__container{width:100%;overflow:visible}.stepper-group--mini-responsive .stepper-group__wrapper{width:100%;flex-direction:column;align-items:flex-start}.stepper-group--mini-responsive wco-step:not(.stepper-group__step--current){display:none!important}.stepper-group--mini-responsive wco-step.stepper-group__step--current{width:100%}.stepper-group--mini-responsive wco-step .step--horizontal{grid-template-columns:min-content min-content;grid-template-areas:\"content bullet\" \"linestart lineend\"}.stepper-group--mini-responsive wco-step .step--horizontal .step__content{padding-left:0;margin-top:var(--wco-spacing-quark, 4px)}.stepper-group--mini-responsive wco-step .step--horizontal .step__content .step__title{text-align:left}.stepper-group--mini-responsive wco-step .step--horizontal .step__content .step__title span{font-size:var(--wco-font-size-xs, 16px);font-weight:var(--wco-font-weight-bold, 700)}.stepper-group--default .stepper-group__wrapper{gap:0}.stepper-group--horizontal.stepper-group--full .stepper-group__wrapper:has(wco-step:nth-child(3)){--wco-step-group-max-width: 350px;--wco-step-groud-width: max-content}.stepper-group--horizontal.stepper-group--full .stepper-group__wrapper:not(:has(wco-step:nth-child(3))){--wco-step-group-max-width: 100%;--wco-step-groud-width: 100%}.stepper-group--horizontal.stepper-group--full .stepper-group__wrapper wco-step{max-width:var(--wco-step-group-max-width);width:var(--wco-step-groud-width)}.stepper-group--horizontal.stepper-group--full .stepper-group__wrapper wco-step:first-child .step.step--horizontal{grid-template-columns:80px auto 1fr}.stepper-group--horizontal.stepper-group--full .stepper-group__wrapper wco-step:first-child .step.step--horizontal .step__bullet:before{left:99%}.stepper-group--horizontal.stepper-group--full .stepper-group__wrapper wco-step:first-child .step.step--horizontal .step__content{grid-column:2/3}.stepper-group--horizontal.stepper-group--full .stepper-group__wrapper wco-step:last-child .step.step--horizontal{grid-template-columns:1fr auto 80px}.stepper-group--horizontal.stepper-group--full .stepper-group__wrapper wco-step:last-child .step.step--horizontal .step__bullet:before{left:initial}.stepper-group--horizontal.stepper-group--full .stepper-group__wrapper wco-step:last-child .step.step--horizontal .step__content{grid-column:2/3}\n"] }]
|
|
401
|
+
}], propDecorators: { steps: [{
|
|
402
|
+
type: ContentChildren,
|
|
403
|
+
args: [StepComponent]
|
|
404
|
+
}], scrollContainer: [{
|
|
405
|
+
type: ViewChild,
|
|
406
|
+
args: ['scrollContainer', { static: false }]
|
|
407
|
+
}], stepsWrapper: [{
|
|
408
|
+
type: ViewChild,
|
|
409
|
+
args: ['stepsWrapper', { static: false }]
|
|
410
|
+
}], size: [{
|
|
411
|
+
type: Input
|
|
412
|
+
}], mode: [{
|
|
413
|
+
type: Input
|
|
414
|
+
}], orientation: [{
|
|
415
|
+
type: Input
|
|
416
|
+
}], current: [{
|
|
417
|
+
type: Input
|
|
418
|
+
}], onResize: [{
|
|
419
|
+
type: HostListener,
|
|
420
|
+
args: ['window:resize', ['$event']]
|
|
421
|
+
}] } });
|
|
422
|
+
|
|
145
423
|
class UploadComponent {
|
|
146
424
|
http;
|
|
147
425
|
/* Texto de descrição do arquivo */
|
|
@@ -1917,5 +2195,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
|
|
|
1917
2195
|
* Generated bundle index. Do not edit.
|
|
1918
2196
|
*/
|
|
1919
2197
|
|
|
1920
|
-
export { MsgBoxFeedbackComponent, PaginationComponent, PreviewFileComponent, SmartSelectComponent, SmartSelectOptionComponent, StepComponent, StepperComponent, TableComponent, TabsComponent, TimelineComponent, UploadComponent, UserAvatarComponent, WcoModalAlertComponent };
|
|
2198
|
+
export { MsgBoxFeedbackComponent, PaginationComponent, PreviewFileComponent, SmartSelectComponent, SmartSelectOptionComponent, StepComponent, StepperComponent, StepperGroupComponent, TableComponent, TabsComponent, TimelineComponent, UploadComponent, UserAvatarComponent, WcoModalAlertComponent };
|
|
1921
2199
|
//# sourceMappingURL=wizco-fenixds-ngx.mjs.map
|