@seniorsistemas/components-ai 2.3.0 → 2.4.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/components/steps/steps.component.mjs +225 -0
- package/esm2022/public-api.mjs +3 -1
- package/fesm2022/seniorsistemas-components-ai.mjs +220 -1
- package/fesm2022/seniorsistemas-components-ai.mjs.map +1 -1
- package/lib/components/steps/steps.component.d.ts +63 -0
- package/package.json +1 -1
- package/public-api.d.ts +1 -0
|
@@ -3495,6 +3495,225 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
|
|
|
3495
3495
|
args: ['scrollContainer', { static: false }]
|
|
3496
3496
|
}] } });
|
|
3497
3497
|
|
|
3498
|
+
class StepsComponent {
|
|
3499
|
+
cdr;
|
|
3500
|
+
/** Lista de steps a serem exibidos */
|
|
3501
|
+
steps = [];
|
|
3502
|
+
/** Índice do step ativo */
|
|
3503
|
+
activeIndex = 0;
|
|
3504
|
+
/** Se permite clicar nos steps para navegar */
|
|
3505
|
+
readonly = false;
|
|
3506
|
+
/** Quantidade máxima de steps visíveis. 'auto' calcula com base no container */
|
|
3507
|
+
maxVisible = 'auto';
|
|
3508
|
+
/** Largura mínima de cada step em pixels (usado no cálculo automático) */
|
|
3509
|
+
stepMinWidth = 140;
|
|
3510
|
+
/** Se mostra animação de transição ao navegar */
|
|
3511
|
+
animated = true;
|
|
3512
|
+
/** Modo de navegação das setas: 'step' altera o activeIndex, 'scroll' apenas desloca a janela visível */
|
|
3513
|
+
navigationMode = 'step';
|
|
3514
|
+
/** Esquema de cores aplicado aos steps. Altera as cores do ativo e completados */
|
|
3515
|
+
colorScheme = 'default';
|
|
3516
|
+
/** Classe CSS customizada para o wrapper */
|
|
3517
|
+
styleClass = '';
|
|
3518
|
+
/** Emite quando o activeIndex muda por clique */
|
|
3519
|
+
activeIndexChange = new EventEmitter();
|
|
3520
|
+
/** Emite o StepItem clicado */
|
|
3521
|
+
stepClick = new EventEmitter();
|
|
3522
|
+
stepsContainer;
|
|
3523
|
+
visibleSteps = [];
|
|
3524
|
+
visibleStartIndex = 0;
|
|
3525
|
+
visibleEndIndex = 0;
|
|
3526
|
+
hasOverflowLeft = false;
|
|
3527
|
+
hasOverflowRight = false;
|
|
3528
|
+
calculatedMaxVisible = 5;
|
|
3529
|
+
resizeObserver = null;
|
|
3530
|
+
constructor(cdr) {
|
|
3531
|
+
this.cdr = cdr;
|
|
3532
|
+
}
|
|
3533
|
+
ngOnChanges(changes) {
|
|
3534
|
+
if (changes['steps'] || changes['activeIndex'] || changes['maxVisible']) {
|
|
3535
|
+
this.recalculate();
|
|
3536
|
+
}
|
|
3537
|
+
}
|
|
3538
|
+
ngAfterViewInit() {
|
|
3539
|
+
this.setupResizeObserver();
|
|
3540
|
+
// Delay para garantir que o container já tem dimensões
|
|
3541
|
+
setTimeout(() => this.recalculate(), 0);
|
|
3542
|
+
}
|
|
3543
|
+
ngOnDestroy() {
|
|
3544
|
+
this.resizeObserver?.disconnect();
|
|
3545
|
+
}
|
|
3546
|
+
onStepClick(step, visibleIndex) {
|
|
3547
|
+
if (this.readonly || step.disabled)
|
|
3548
|
+
return;
|
|
3549
|
+
const realIndex = this.visibleStartIndex + visibleIndex;
|
|
3550
|
+
this.activeIndex = realIndex;
|
|
3551
|
+
this.activeIndexChange.emit(realIndex);
|
|
3552
|
+
this.stepClick.emit(step);
|
|
3553
|
+
this.recalculate();
|
|
3554
|
+
}
|
|
3555
|
+
navigateLeft() {
|
|
3556
|
+
if (this.visibleStartIndex <= 0)
|
|
3557
|
+
return;
|
|
3558
|
+
if (this.navigationMode === 'scroll') {
|
|
3559
|
+
// Apenas desloca a janela sem alterar o activeIndex
|
|
3560
|
+
this.scrollWindow(this.visibleStartIndex - 1);
|
|
3561
|
+
}
|
|
3562
|
+
else {
|
|
3563
|
+
const newActive = Math.max(0, this.activeIndex - 1);
|
|
3564
|
+
this.activeIndex = newActive;
|
|
3565
|
+
this.activeIndexChange.emit(newActive);
|
|
3566
|
+
this.recalculate();
|
|
3567
|
+
}
|
|
3568
|
+
}
|
|
3569
|
+
navigateRight() {
|
|
3570
|
+
if (this.visibleEndIndex >= this.steps.length - 1)
|
|
3571
|
+
return;
|
|
3572
|
+
if (this.navigationMode === 'scroll') {
|
|
3573
|
+
// Apenas desloca a janela sem alterar o activeIndex
|
|
3574
|
+
this.scrollWindow(this.visibleStartIndex + 1);
|
|
3575
|
+
}
|
|
3576
|
+
else {
|
|
3577
|
+
const newActive = Math.min(this.steps.length - 1, this.activeIndex + 1);
|
|
3578
|
+
this.activeIndex = newActive;
|
|
3579
|
+
this.activeIndexChange.emit(newActive);
|
|
3580
|
+
this.recalculate();
|
|
3581
|
+
}
|
|
3582
|
+
}
|
|
3583
|
+
/** Desloca a janela visível para um novo startIndex sem alterar o activeIndex */
|
|
3584
|
+
scrollWindow(newStart) {
|
|
3585
|
+
const total = this.steps.length;
|
|
3586
|
+
const max = this.calculatedMaxVisible;
|
|
3587
|
+
let start = Math.max(0, Math.min(newStart, total - max));
|
|
3588
|
+
let end = start + max - 1;
|
|
3589
|
+
if (end >= total) {
|
|
3590
|
+
end = total - 1;
|
|
3591
|
+
start = end - max + 1;
|
|
3592
|
+
}
|
|
3593
|
+
this.visibleStartIndex = start;
|
|
3594
|
+
this.visibleEndIndex = end;
|
|
3595
|
+
this.hasOverflowLeft = start > 0;
|
|
3596
|
+
this.hasOverflowRight = end < total - 1;
|
|
3597
|
+
this.visibleSteps = this.steps.slice(start, end + 1);
|
|
3598
|
+
this.cdr.markForCheck();
|
|
3599
|
+
}
|
|
3600
|
+
getStepState(visibleIndex) {
|
|
3601
|
+
const realIndex = this.visibleStartIndex + visibleIndex;
|
|
3602
|
+
if (realIndex < this.activeIndex)
|
|
3603
|
+
return 'completed';
|
|
3604
|
+
if (realIndex === this.activeIndex)
|
|
3605
|
+
return 'active';
|
|
3606
|
+
return 'pending';
|
|
3607
|
+
}
|
|
3608
|
+
getRealIndex(visibleIndex) {
|
|
3609
|
+
return this.visibleStartIndex + visibleIndex;
|
|
3610
|
+
}
|
|
3611
|
+
get hiddenLeftCount() {
|
|
3612
|
+
return this.visibleStartIndex;
|
|
3613
|
+
}
|
|
3614
|
+
get hiddenRightCount() {
|
|
3615
|
+
return Math.max(0, this.steps.length - 1 - this.visibleEndIndex);
|
|
3616
|
+
}
|
|
3617
|
+
trackByIndex(index) {
|
|
3618
|
+
return index;
|
|
3619
|
+
}
|
|
3620
|
+
setupResizeObserver() {
|
|
3621
|
+
if (!this.stepsContainer?.nativeElement)
|
|
3622
|
+
return;
|
|
3623
|
+
this.resizeObserver = new ResizeObserver(() => {
|
|
3624
|
+
this.recalculate();
|
|
3625
|
+
});
|
|
3626
|
+
this.resizeObserver.observe(this.stepsContainer.nativeElement);
|
|
3627
|
+
}
|
|
3628
|
+
recalculate() {
|
|
3629
|
+
if (!this.steps.length) {
|
|
3630
|
+
this.visibleSteps = [];
|
|
3631
|
+
this.hasOverflowLeft = false;
|
|
3632
|
+
this.hasOverflowRight = false;
|
|
3633
|
+
this.cdr.markForCheck();
|
|
3634
|
+
return;
|
|
3635
|
+
}
|
|
3636
|
+
this.calculatedMaxVisible = this.getMaxVisible();
|
|
3637
|
+
this.calculateVisibleWindow();
|
|
3638
|
+
this.cdr.markForCheck();
|
|
3639
|
+
}
|
|
3640
|
+
getMaxVisible() {
|
|
3641
|
+
if (this.maxVisible !== 'auto') {
|
|
3642
|
+
return Math.max(1, this.maxVisible);
|
|
3643
|
+
}
|
|
3644
|
+
if (!this.stepsContainer?.nativeElement) {
|
|
3645
|
+
return Math.min(5, this.steps.length);
|
|
3646
|
+
}
|
|
3647
|
+
const containerWidth = this.stepsContainer.nativeElement.offsetWidth;
|
|
3648
|
+
// Reservar espaço para os botões de navegação (40px cada lado)
|
|
3649
|
+
const availableWidth = containerWidth - 80;
|
|
3650
|
+
const maxFit = Math.max(1, Math.floor(availableWidth / this.stepMinWidth));
|
|
3651
|
+
return Math.min(maxFit, this.steps.length);
|
|
3652
|
+
}
|
|
3653
|
+
calculateVisibleWindow() {
|
|
3654
|
+
const total = this.steps.length;
|
|
3655
|
+
const max = this.calculatedMaxVisible;
|
|
3656
|
+
if (total <= max) {
|
|
3657
|
+
// Todos cabem na tela
|
|
3658
|
+
this.visibleStartIndex = 0;
|
|
3659
|
+
this.visibleEndIndex = total - 1;
|
|
3660
|
+
this.hasOverflowLeft = false;
|
|
3661
|
+
this.hasOverflowRight = false;
|
|
3662
|
+
}
|
|
3663
|
+
else {
|
|
3664
|
+
// Centralizar no activeIndex
|
|
3665
|
+
const half = Math.floor(max / 2);
|
|
3666
|
+
let start = this.activeIndex - half;
|
|
3667
|
+
let end = start + max - 1;
|
|
3668
|
+
// Ajustar limites
|
|
3669
|
+
if (start < 0) {
|
|
3670
|
+
start = 0;
|
|
3671
|
+
end = max - 1;
|
|
3672
|
+
}
|
|
3673
|
+
else if (end >= total) {
|
|
3674
|
+
end = total - 1;
|
|
3675
|
+
start = end - max + 1;
|
|
3676
|
+
}
|
|
3677
|
+
this.visibleStartIndex = start;
|
|
3678
|
+
this.visibleEndIndex = end;
|
|
3679
|
+
this.hasOverflowLeft = start > 0;
|
|
3680
|
+
this.hasOverflowRight = end < total - 1;
|
|
3681
|
+
}
|
|
3682
|
+
this.visibleSteps = this.steps.slice(this.visibleStartIndex, this.visibleEndIndex + 1);
|
|
3683
|
+
}
|
|
3684
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: StepsComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
3685
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: StepsComponent, isStandalone: true, selector: "sia-steps", inputs: { steps: "steps", activeIndex: "activeIndex", readonly: "readonly", maxVisible: "maxVisible", stepMinWidth: "stepMinWidth", animated: "animated", navigationMode: "navigationMode", colorScheme: "colorScheme", styleClass: "styleClass" }, outputs: { activeIndexChange: "activeIndexChange", stepClick: "stepClick" }, viewQueries: [{ propertyName: "stepsContainer", first: true, predicate: ["stepsContainer"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"sia-steps-wrapper\" [class]=\"styleClass\" [class.animated]=\"animated\"\n [class.theme-success]=\"colorScheme === 'success'\"\n [class.theme-danger]=\"colorScheme === 'danger'\"\n [class.theme-warning]=\"colorScheme === 'warning'\"\n [class.theme-info]=\"colorScheme === 'info'\"\n #stepsContainer>\n <!-- Bot\u00E3o de navega\u00E7\u00E3o esquerda -->\n <button\n *ngIf=\"hasOverflowLeft\"\n class=\"sia-steps-nav sia-steps-nav-left\"\n (click)=\"navigateLeft()\"\n [attr.aria-label]=\"'Anterior (' + hiddenLeftCount + ' ocultos)'\"\n type=\"button\">\n <span class=\"nav-badge\">{{ hiddenLeftCount }}</span>\n <i class=\"pi pi-chevron-left\"></i>\n </button>\n\n <!-- Steps vis\u00EDveis -->\n <div class=\"sia-steps-content\" [class.has-overflow-left]=\"hasOverflowLeft\" [class.has-overflow-right]=\"hasOverflowRight\">\n <div class=\"sia-steps-list\">\n <ng-container *ngFor=\"let step of visibleSteps; let i = index; let first = first; let last = last; trackBy: trackByIndex\">\n <!-- Conector (n\u00E3o aparece antes do primeiro) -->\n <div *ngIf=\"!first\" class=\"sia-step-connector\" [class.completed]=\"getStepState(i) === 'completed' || getStepState(i - 1) === 'completed'\">\n <div class=\"connector-line\"></div>\n </div>\n\n <!-- Step item -->\n <div\n class=\"sia-step-item\"\n [class.active]=\"getStepState(i) === 'active'\"\n [class.completed]=\"getStepState(i) === 'completed'\"\n [class.pending]=\"getStepState(i) === 'pending'\"\n [class.disabled]=\"step.disabled\"\n [class.clickable]=\"!readonly && !step.disabled\"\n [class]=\"step.styleClass || ''\"\n [pTooltip]=\"step.label\"\n tooltipPosition=\"top\"\n (click)=\"onStepClick(step, i)\"\n [attr.role]=\"readonly ? 'listitem' : 'button'\"\n [attr.aria-current]=\"getStepState(i) === 'active' ? 'step' : null\"\n [attr.aria-disabled]=\"step.disabled || readonly\">\n \n <!-- \u00CDcone/n\u00FAmero do step -->\n <div class=\"sia-step-marker\">\n <i *ngIf=\"getStepState(i) === 'completed' && !step.icon\" class=\"pi pi-check\"></i>\n <i *ngIf=\"step.icon && getStepState(i) !== 'completed'\" [class]=\"'pi ' + step.icon\"></i>\n <span *ngIf=\"!step.icon && getStepState(i) !== 'completed'\">{{ getRealIndex(i) + 1 }}</span>\n </div>\n\n <!-- Label do step -->\n <div class=\"sia-step-label\">\n <span class=\"label-text\">{{ step.label }}</span>\n </div>\n </div>\n </ng-container>\n </div>\n </div>\n\n <!-- Bot\u00E3o de navega\u00E7\u00E3o direita -->\n <button\n *ngIf=\"hasOverflowRight\"\n class=\"sia-steps-nav sia-steps-nav-right\"\n (click)=\"navigateRight()\"\n [attr.aria-label]=\"'Pr\u00F3ximo (' + hiddenRightCount + ' ocultos)'\"\n type=\"button\">\n <i class=\"pi pi-chevron-right\"></i>\n <span class=\"nav-badge\">{{ hiddenRightCount }}</span>\n </button>\n</div>\n", styles: [":host{display:block;width:100%}.sia-steps-wrapper{display:flex;align-items:center;width:100%;gap:4px;position:relative}.sia-steps-nav{display:flex;align-items:center;gap:4px;background:var(--p-surface-100, #f1f5f9);border:1px solid var(--p-surface-200, #e2e8f0);border-radius:8px;padding:6px 10px;cursor:pointer;color:var(--p-text-secondary-color, #64748b);font-size:12px;font-weight:500;transition:all .2s ease;flex-shrink:0;min-width:36px;justify-content:center}.sia-steps-nav:hover{background:var(--p-primary-50, #eff6ff);border-color:var(--p-primary-200, #bfdbfe);color:var(--p-primary-600, #2563eb)}.sia-steps-nav:active{transform:scale(.95)}.sia-steps-nav .nav-badge{background:var(--p-primary-100, #dbeafe);color:var(--p-primary-700, #1d4ed8);border-radius:10px;padding:1px 6px;font-size:11px;font-weight:600;line-height:1.4}.sia-steps-nav i{font-size:12px}.sia-steps-content{flex:1;overflow:hidden;min-width:0}.sia-steps-content.has-overflow-left{mask-image:linear-gradient(to right,transparent 0%,black 5%)}.sia-steps-content.has-overflow-right{mask-image:linear-gradient(to left,transparent 0%,black 5%)}.sia-steps-content.has-overflow-left.has-overflow-right{mask-image:linear-gradient(to right,transparent 0%,black 5%,black 95%,transparent 100%)}.sia-steps-list{display:flex;align-items:center;justify-content:center;padding:8px 4px}.sia-step-connector{flex:0 0 auto;width:32px;display:flex;align-items:center;justify-content:center}.sia-step-connector .connector-line{width:100%;height:2px;background:var(--p-surface-300, #cbd5e1);border-radius:1px;transition:background .3s ease}.sia-step-connector.completed .connector-line{background:var(--p-primary-400, #60a5fa)}.sia-step-item{display:flex;flex-direction:column;align-items:center;gap:6px;padding:8px 12px;border-radius:10px;transition:all .25s ease;min-width:80px;max-width:160px;position:relative}.sia-step-item.clickable{cursor:pointer}.sia-step-item.clickable:hover{background:var(--p-surface-50, #f8fafc);transform:translateY(-1px)}.sia-step-item.disabled{opacity:.45;cursor:not-allowed;pointer-events:none}.sia-step-item.pending .sia-step-marker{background:var(--p-surface-100, #f1f5f9);border-color:var(--p-surface-300, #cbd5e1);color:var(--p-text-secondary-color, #64748b)}.sia-step-item.pending .sia-step-label .label-text{color:var(--p-text-secondary-color, #64748b)}.sia-step-item.active .sia-step-marker{background:var(--p-primary-500, #3b82f6);border-color:var(--p-primary-500, #3b82f6);color:#fff;box-shadow:0 0 0 4px var(--p-primary-100, #dbeafe);transform:scale(1.1)}.sia-step-item.active .sia-step-label .label-text{color:var(--p-primary-700, #1d4ed8);font-weight:600}.sia-step-item.completed .sia-step-marker{background:var(--p-primary-100, #dbeafe);border-color:var(--p-primary-300, #93c5fd);color:var(--p-primary-600, #2563eb)}.sia-step-item.completed .sia-step-label .label-text{color:var(--p-text-color, #1e293b)}.sia-step-marker{width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;border:2px solid;font-size:13px;font-weight:600;transition:all .3s ease;flex-shrink:0}.sia-step-marker i{font-size:14px}.sia-step-label{text-align:center;max-width:100%;overflow:hidden}.sia-step-label .label-text{display:block;font-size:12px;font-weight:500;line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--p-text-secondary-color, #64748b);transition:color .2s ease,font-weight .2s ease}.sia-steps-wrapper.animated .sia-steps-list{transition:transform .3s ease}.sia-steps-wrapper.animated .sia-step-item{animation:stepFadeIn .25s ease forwards}@keyframes stepFadeIn{0%{opacity:.6;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}.sia-steps-wrapper.theme-success .sia-step-connector.completed .connector-line{background:var(--p-green-400, #4ade80)}.sia-steps-wrapper.theme-success .sia-step-item.active .sia-step-marker{background:var(--p-green-500, #22c55e);border-color:var(--p-green-500, #22c55e);box-shadow:0 0 0 4px var(--p-green-100, #dcfce7)}.sia-steps-wrapper.theme-success .sia-step-item.active .sia-step-label .label-text{color:var(--p-green-700, #15803d)}.sia-steps-wrapper.theme-success .sia-step-item.completed .sia-step-marker{background:var(--p-green-100, #dcfce7);border-color:var(--p-green-300, #86efac);color:var(--p-green-600, #16a34a)}.sia-steps-wrapper.theme-danger .sia-step-connector.completed .connector-line{background:var(--p-red-400, #f87171)}.sia-steps-wrapper.theme-danger .sia-step-item.active .sia-step-marker{background:var(--p-red-500, #ef4444);border-color:var(--p-red-500, #ef4444);box-shadow:0 0 0 4px var(--p-red-100, #fee2e2)}.sia-steps-wrapper.theme-danger .sia-step-item.active .sia-step-label .label-text{color:var(--p-red-700, #b91c1c)}.sia-steps-wrapper.theme-danger .sia-step-item.completed .sia-step-marker{background:var(--p-red-100, #fee2e2);border-color:var(--p-red-300, #fca5a5);color:var(--p-red-600, #dc2626)}.sia-steps-wrapper.theme-warning .sia-step-connector.completed .connector-line{background:var(--p-orange-400, #fb923c)}.sia-steps-wrapper.theme-warning .sia-step-item.active .sia-step-marker{background:var(--p-orange-500, #f97316);border-color:var(--p-orange-500, #f97316);box-shadow:0 0 0 4px var(--p-orange-100, #ffedd5)}.sia-steps-wrapper.theme-warning .sia-step-item.active .sia-step-label .label-text{color:var(--p-orange-700, #c2410c)}.sia-steps-wrapper.theme-warning .sia-step-item.completed .sia-step-marker{background:var(--p-orange-100, #ffedd5);border-color:var(--p-orange-300, #fdba74);color:var(--p-orange-600, #ea580c)}.sia-steps-wrapper.theme-info .sia-step-connector.completed .connector-line{background:var(--p-cyan-400, #22d3ee)}.sia-steps-wrapper.theme-info .sia-step-item.active .sia-step-marker{background:var(--p-cyan-500, #06b6d4);border-color:var(--p-cyan-500, #06b6d4);box-shadow:0 0 0 4px var(--p-cyan-100, #cffafe)}.sia-steps-wrapper.theme-info .sia-step-item.active .sia-step-label .label-text{color:var(--p-cyan-700, #0e7490)}.sia-steps-wrapper.theme-info .sia-step-item.completed .sia-step-marker{background:var(--p-cyan-100, #cffafe);border-color:var(--p-cyan-300, #67e8f9);color:var(--p-cyan-600, #0891b2)}@media (max-width: 576px){.sia-step-item{min-width:60px;max-width:100px;padding:6px 8px}.sia-step-marker{width:30px;height:30px;font-size:11px}.sia-step-marker i{font-size:12px}.sia-step-label .label-text{font-size:11px}.sia-step-connector{width:20px}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i7$1.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "appendTo", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
3686
|
+
}
|
|
3687
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: StepsComponent, decorators: [{
|
|
3688
|
+
type: Component,
|
|
3689
|
+
args: [{ selector: 'sia-steps', standalone: true, imports: [CommonModule, TooltipModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"sia-steps-wrapper\" [class]=\"styleClass\" [class.animated]=\"animated\"\n [class.theme-success]=\"colorScheme === 'success'\"\n [class.theme-danger]=\"colorScheme === 'danger'\"\n [class.theme-warning]=\"colorScheme === 'warning'\"\n [class.theme-info]=\"colorScheme === 'info'\"\n #stepsContainer>\n <!-- Bot\u00E3o de navega\u00E7\u00E3o esquerda -->\n <button\n *ngIf=\"hasOverflowLeft\"\n class=\"sia-steps-nav sia-steps-nav-left\"\n (click)=\"navigateLeft()\"\n [attr.aria-label]=\"'Anterior (' + hiddenLeftCount + ' ocultos)'\"\n type=\"button\">\n <span class=\"nav-badge\">{{ hiddenLeftCount }}</span>\n <i class=\"pi pi-chevron-left\"></i>\n </button>\n\n <!-- Steps vis\u00EDveis -->\n <div class=\"sia-steps-content\" [class.has-overflow-left]=\"hasOverflowLeft\" [class.has-overflow-right]=\"hasOverflowRight\">\n <div class=\"sia-steps-list\">\n <ng-container *ngFor=\"let step of visibleSteps; let i = index; let first = first; let last = last; trackBy: trackByIndex\">\n <!-- Conector (n\u00E3o aparece antes do primeiro) -->\n <div *ngIf=\"!first\" class=\"sia-step-connector\" [class.completed]=\"getStepState(i) === 'completed' || getStepState(i - 1) === 'completed'\">\n <div class=\"connector-line\"></div>\n </div>\n\n <!-- Step item -->\n <div\n class=\"sia-step-item\"\n [class.active]=\"getStepState(i) === 'active'\"\n [class.completed]=\"getStepState(i) === 'completed'\"\n [class.pending]=\"getStepState(i) === 'pending'\"\n [class.disabled]=\"step.disabled\"\n [class.clickable]=\"!readonly && !step.disabled\"\n [class]=\"step.styleClass || ''\"\n [pTooltip]=\"step.label\"\n tooltipPosition=\"top\"\n (click)=\"onStepClick(step, i)\"\n [attr.role]=\"readonly ? 'listitem' : 'button'\"\n [attr.aria-current]=\"getStepState(i) === 'active' ? 'step' : null\"\n [attr.aria-disabled]=\"step.disabled || readonly\">\n \n <!-- \u00CDcone/n\u00FAmero do step -->\n <div class=\"sia-step-marker\">\n <i *ngIf=\"getStepState(i) === 'completed' && !step.icon\" class=\"pi pi-check\"></i>\n <i *ngIf=\"step.icon && getStepState(i) !== 'completed'\" [class]=\"'pi ' + step.icon\"></i>\n <span *ngIf=\"!step.icon && getStepState(i) !== 'completed'\">{{ getRealIndex(i) + 1 }}</span>\n </div>\n\n <!-- Label do step -->\n <div class=\"sia-step-label\">\n <span class=\"label-text\">{{ step.label }}</span>\n </div>\n </div>\n </ng-container>\n </div>\n </div>\n\n <!-- Bot\u00E3o de navega\u00E7\u00E3o direita -->\n <button\n *ngIf=\"hasOverflowRight\"\n class=\"sia-steps-nav sia-steps-nav-right\"\n (click)=\"navigateRight()\"\n [attr.aria-label]=\"'Pr\u00F3ximo (' + hiddenRightCount + ' ocultos)'\"\n type=\"button\">\n <i class=\"pi pi-chevron-right\"></i>\n <span class=\"nav-badge\">{{ hiddenRightCount }}</span>\n </button>\n</div>\n", styles: [":host{display:block;width:100%}.sia-steps-wrapper{display:flex;align-items:center;width:100%;gap:4px;position:relative}.sia-steps-nav{display:flex;align-items:center;gap:4px;background:var(--p-surface-100, #f1f5f9);border:1px solid var(--p-surface-200, #e2e8f0);border-radius:8px;padding:6px 10px;cursor:pointer;color:var(--p-text-secondary-color, #64748b);font-size:12px;font-weight:500;transition:all .2s ease;flex-shrink:0;min-width:36px;justify-content:center}.sia-steps-nav:hover{background:var(--p-primary-50, #eff6ff);border-color:var(--p-primary-200, #bfdbfe);color:var(--p-primary-600, #2563eb)}.sia-steps-nav:active{transform:scale(.95)}.sia-steps-nav .nav-badge{background:var(--p-primary-100, #dbeafe);color:var(--p-primary-700, #1d4ed8);border-radius:10px;padding:1px 6px;font-size:11px;font-weight:600;line-height:1.4}.sia-steps-nav i{font-size:12px}.sia-steps-content{flex:1;overflow:hidden;min-width:0}.sia-steps-content.has-overflow-left{mask-image:linear-gradient(to right,transparent 0%,black 5%)}.sia-steps-content.has-overflow-right{mask-image:linear-gradient(to left,transparent 0%,black 5%)}.sia-steps-content.has-overflow-left.has-overflow-right{mask-image:linear-gradient(to right,transparent 0%,black 5%,black 95%,transparent 100%)}.sia-steps-list{display:flex;align-items:center;justify-content:center;padding:8px 4px}.sia-step-connector{flex:0 0 auto;width:32px;display:flex;align-items:center;justify-content:center}.sia-step-connector .connector-line{width:100%;height:2px;background:var(--p-surface-300, #cbd5e1);border-radius:1px;transition:background .3s ease}.sia-step-connector.completed .connector-line{background:var(--p-primary-400, #60a5fa)}.sia-step-item{display:flex;flex-direction:column;align-items:center;gap:6px;padding:8px 12px;border-radius:10px;transition:all .25s ease;min-width:80px;max-width:160px;position:relative}.sia-step-item.clickable{cursor:pointer}.sia-step-item.clickable:hover{background:var(--p-surface-50, #f8fafc);transform:translateY(-1px)}.sia-step-item.disabled{opacity:.45;cursor:not-allowed;pointer-events:none}.sia-step-item.pending .sia-step-marker{background:var(--p-surface-100, #f1f5f9);border-color:var(--p-surface-300, #cbd5e1);color:var(--p-text-secondary-color, #64748b)}.sia-step-item.pending .sia-step-label .label-text{color:var(--p-text-secondary-color, #64748b)}.sia-step-item.active .sia-step-marker{background:var(--p-primary-500, #3b82f6);border-color:var(--p-primary-500, #3b82f6);color:#fff;box-shadow:0 0 0 4px var(--p-primary-100, #dbeafe);transform:scale(1.1)}.sia-step-item.active .sia-step-label .label-text{color:var(--p-primary-700, #1d4ed8);font-weight:600}.sia-step-item.completed .sia-step-marker{background:var(--p-primary-100, #dbeafe);border-color:var(--p-primary-300, #93c5fd);color:var(--p-primary-600, #2563eb)}.sia-step-item.completed .sia-step-label .label-text{color:var(--p-text-color, #1e293b)}.sia-step-marker{width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;border:2px solid;font-size:13px;font-weight:600;transition:all .3s ease;flex-shrink:0}.sia-step-marker i{font-size:14px}.sia-step-label{text-align:center;max-width:100%;overflow:hidden}.sia-step-label .label-text{display:block;font-size:12px;font-weight:500;line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--p-text-secondary-color, #64748b);transition:color .2s ease,font-weight .2s ease}.sia-steps-wrapper.animated .sia-steps-list{transition:transform .3s ease}.sia-steps-wrapper.animated .sia-step-item{animation:stepFadeIn .25s ease forwards}@keyframes stepFadeIn{0%{opacity:.6;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}.sia-steps-wrapper.theme-success .sia-step-connector.completed .connector-line{background:var(--p-green-400, #4ade80)}.sia-steps-wrapper.theme-success .sia-step-item.active .sia-step-marker{background:var(--p-green-500, #22c55e);border-color:var(--p-green-500, #22c55e);box-shadow:0 0 0 4px var(--p-green-100, #dcfce7)}.sia-steps-wrapper.theme-success .sia-step-item.active .sia-step-label .label-text{color:var(--p-green-700, #15803d)}.sia-steps-wrapper.theme-success .sia-step-item.completed .sia-step-marker{background:var(--p-green-100, #dcfce7);border-color:var(--p-green-300, #86efac);color:var(--p-green-600, #16a34a)}.sia-steps-wrapper.theme-danger .sia-step-connector.completed .connector-line{background:var(--p-red-400, #f87171)}.sia-steps-wrapper.theme-danger .sia-step-item.active .sia-step-marker{background:var(--p-red-500, #ef4444);border-color:var(--p-red-500, #ef4444);box-shadow:0 0 0 4px var(--p-red-100, #fee2e2)}.sia-steps-wrapper.theme-danger .sia-step-item.active .sia-step-label .label-text{color:var(--p-red-700, #b91c1c)}.sia-steps-wrapper.theme-danger .sia-step-item.completed .sia-step-marker{background:var(--p-red-100, #fee2e2);border-color:var(--p-red-300, #fca5a5);color:var(--p-red-600, #dc2626)}.sia-steps-wrapper.theme-warning .sia-step-connector.completed .connector-line{background:var(--p-orange-400, #fb923c)}.sia-steps-wrapper.theme-warning .sia-step-item.active .sia-step-marker{background:var(--p-orange-500, #f97316);border-color:var(--p-orange-500, #f97316);box-shadow:0 0 0 4px var(--p-orange-100, #ffedd5)}.sia-steps-wrapper.theme-warning .sia-step-item.active .sia-step-label .label-text{color:var(--p-orange-700, #c2410c)}.sia-steps-wrapper.theme-warning .sia-step-item.completed .sia-step-marker{background:var(--p-orange-100, #ffedd5);border-color:var(--p-orange-300, #fdba74);color:var(--p-orange-600, #ea580c)}.sia-steps-wrapper.theme-info .sia-step-connector.completed .connector-line{background:var(--p-cyan-400, #22d3ee)}.sia-steps-wrapper.theme-info .sia-step-item.active .sia-step-marker{background:var(--p-cyan-500, #06b6d4);border-color:var(--p-cyan-500, #06b6d4);box-shadow:0 0 0 4px var(--p-cyan-100, #cffafe)}.sia-steps-wrapper.theme-info .sia-step-item.active .sia-step-label .label-text{color:var(--p-cyan-700, #0e7490)}.sia-steps-wrapper.theme-info .sia-step-item.completed .sia-step-marker{background:var(--p-cyan-100, #cffafe);border-color:var(--p-cyan-300, #67e8f9);color:var(--p-cyan-600, #0891b2)}@media (max-width: 576px){.sia-step-item{min-width:60px;max-width:100px;padding:6px 8px}.sia-step-marker{width:30px;height:30px;font-size:11px}.sia-step-marker i{font-size:12px}.sia-step-label .label-text{font-size:11px}.sia-step-connector{width:20px}}\n"] }]
|
|
3690
|
+
}], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { steps: [{
|
|
3691
|
+
type: Input
|
|
3692
|
+
}], activeIndex: [{
|
|
3693
|
+
type: Input
|
|
3694
|
+
}], readonly: [{
|
|
3695
|
+
type: Input
|
|
3696
|
+
}], maxVisible: [{
|
|
3697
|
+
type: Input
|
|
3698
|
+
}], stepMinWidth: [{
|
|
3699
|
+
type: Input
|
|
3700
|
+
}], animated: [{
|
|
3701
|
+
type: Input
|
|
3702
|
+
}], navigationMode: [{
|
|
3703
|
+
type: Input
|
|
3704
|
+
}], colorScheme: [{
|
|
3705
|
+
type: Input
|
|
3706
|
+
}], styleClass: [{
|
|
3707
|
+
type: Input
|
|
3708
|
+
}], activeIndexChange: [{
|
|
3709
|
+
type: Output
|
|
3710
|
+
}], stepClick: [{
|
|
3711
|
+
type: Output
|
|
3712
|
+
}], stepsContainer: [{
|
|
3713
|
+
type: ViewChild,
|
|
3714
|
+
args: ['stepsContainer']
|
|
3715
|
+
}] } });
|
|
3716
|
+
|
|
3498
3717
|
/**
|
|
3499
3718
|
* Directive para máscara de código postal
|
|
3500
3719
|
* Usa o locale do cookie por padrão, ou aceita locale por parâmetro
|
|
@@ -7553,5 +7772,5 @@ const throttle = (func, limit) => {
|
|
|
7553
7772
|
* Generated bundle index. Do not edit.
|
|
7554
7773
|
*/
|
|
7555
7774
|
|
|
7556
|
-
export { AngularComponentsModule, AuthService, BreadcrumbComponent, BulkDeleteDialogComponent, CnpjPipe, CookieService, CpfPipe, DEFAULT_LANGUAGE, DateFormatPipe, DocumentMaskDirective, DocumentPipe, DynamicFieldCheckboxComponent, DynamicFieldDateComponent, DynamicFieldDropdownComponent, DynamicFieldImageComponent, DynamicFieldLookupComponent, DynamicFieldMultiselectComponent, DynamicFieldNumberComponent, DynamicFieldTextComponent, DynamicFieldTextareaComponent, DynamicFieldTimeComponent, DynamicFieldWrapperComponent, DynamicFormComponent, EntityListBaseComponent, EntityService, ExportDialogComponent, FieldType, IassistIconComponent, KanbanBoardComponent, LoadingComponent, LocaleService, MaskService, MoneyMaskDirective, MoneyPipe, PermissionService, PhoneMaskDirective, PhonePipe, PostalCodeMaskDirective, PostalCodePipe, SUPPORTED_LANGUAGES, SeniorPreset, SeniorTokenService, TRANSLATION_CONFIG, TableLoadingDirective, ThemeService, TranslatePipe, TranslationHelper, TranslationService, WebSocketService, apiInterceptor, createFilterString, createFilterTokens, debounce, deepClone, deepEqual, escapeFilterValue, getEnumQuery, getLabelValueRequest, getLanguageInfo, getProp, getSuggestionValue, getTypeInformation, isValidFilter, mapTokenLocaleToLanguage, mergeUnique, provideSeniorPrimeNG, resolveRefs, setProp, throttle };
|
|
7775
|
+
export { AngularComponentsModule, AuthService, BreadcrumbComponent, BulkDeleteDialogComponent, CnpjPipe, CookieService, CpfPipe, DEFAULT_LANGUAGE, DateFormatPipe, DocumentMaskDirective, DocumentPipe, DynamicFieldCheckboxComponent, DynamicFieldDateComponent, DynamicFieldDropdownComponent, DynamicFieldImageComponent, DynamicFieldLookupComponent, DynamicFieldMultiselectComponent, DynamicFieldNumberComponent, DynamicFieldTextComponent, DynamicFieldTextareaComponent, DynamicFieldTimeComponent, DynamicFieldWrapperComponent, DynamicFormComponent, EntityListBaseComponent, EntityService, ExportDialogComponent, FieldType, IassistIconComponent, KanbanBoardComponent, LoadingComponent, LocaleService, MaskService, MoneyMaskDirective, MoneyPipe, PermissionService, PhoneMaskDirective, PhonePipe, PostalCodeMaskDirective, PostalCodePipe, SUPPORTED_LANGUAGES, SeniorPreset, SeniorTokenService, StepsComponent, TRANSLATION_CONFIG, TableLoadingDirective, ThemeService, TranslatePipe, TranslationHelper, TranslationService, WebSocketService, apiInterceptor, createFilterString, createFilterTokens, debounce, deepClone, deepEqual, escapeFilterValue, getEnumQuery, getLabelValueRequest, getLanguageInfo, getProp, getSuggestionValue, getTypeInformation, isValidFilter, mapTokenLocaleToLanguage, mergeUnique, provideSeniorPrimeNG, resolveRefs, setProp, throttle };
|
|
7557
7776
|
//# sourceMappingURL=seniorsistemas-components-ai.mjs.map
|