keevo-components 2.0.44 → 2.0.46

package/fesm2022/keevo-components.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { EventEmitter, Component, Input, Output, ViewChild, Injectable, signal, Directive, Pipe, ViewChildren, ContentChildren, forwardRef, viewChild, input, model, output, effect, computed, HostListener, NgModule, inject, ViewContainerRef, ChangeDetectionStrategy, HostBinding, Injector } from '@angular/core';
+import { EventEmitter, Output, Input, Component, ViewChild, Injectable, signal, Directive, Pipe, ContentChildren, ViewChildren, forwardRef, viewChild, input, model, output, effect, computed, HostListener, NgModule, inject, ViewContainerRef, ChangeDetectionStrategy, HostBinding, Injector } from '@angular/core';
 import * as i1 from '@angular/common';
 import { CommonModule, NgClass } from '@angular/common';
 import * as i1$1 from 'primeng/button';
@@ -1327,7 +1327,7 @@ class BaseComponentInput extends BaseComponent {
     }
     ngOnInit() {
         this.formControl = this.componentService.getFormControl();
-        if (this.formControl?.errors)
+        if (this.formControl?.errors?.['required'])
             this.showAsterisk = true;
     }
     onInputBlur(event) {
@@ -9732,6 +9732,106 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.8", ngImpor
                 }]
         }] });
 
+class KvStepsComponent {
+    constructor() {
+        this.notificationService = inject(NotificationService);
+        this.steps = input([]);
+        this.currentStepIndex = signal(0);
+        this.emitData = output();
+    }
+    ngAfterViewInit() {
+        if (this.steps().length > 0) {
+            this.renderCurrentStep();
+        }
+    }
+    getCurrentStep() {
+        const stepsArray = this.steps();
+        const index = this.currentStepIndex();
+        if (index < 0 || index >= stepsArray.length) {
+            return null;
+        }
+        return stepsArray[index];
+    }
+    renderCurrentStep() {
+        const currentStep = this.getCurrentStep();
+        if (currentStep && this.stepContainer) {
+            this.renderStep(currentStep);
+        }
+    }
+    renderStep(step) {
+        if (!this.stepContainer)
+            return;
+        this.stepContainer.clear();
+        const compRef = this.stepContainer.createComponent(step.component);
+        step.instance = compRef.instance;
+    }
+    updateStepIndex(newIndex) {
+        const stepsArray = this.steps();
+        if (newIndex < 0 || newIndex >= stepsArray.length)
+            return;
+        this.currentStepIndex.set(newIndex);
+        this.renderCurrentStep();
+    }
+    async nextPage() {
+        const currentStep = this.getCurrentStep();
+        if (!currentStep)
+            return;
+        if (currentStep.instance?.isValid()) {
+            this.emitData.emit(currentStep?.instance?.getData());
+            //aguardar o salvamento do step atual
+            if (currentStep.instance?.isValid()) {
+                currentStep.instance?.save().subscribe({
+                    next: () => { },
+                    complete: () => {
+                        if (currentStep.instance?.isCompleted()) {
+                            currentStep.completed = true;
+                        }
+                        this.updateStepIndex(this.currentStepIndex() + 1);
+                    }
+                });
+            }
+        }
+        else {
+            // this.notificationService.toastError('Preencha todos os campos obrigatórios!');
+        }
+    }
+    jumpPage() {
+        const currentStep = this.getCurrentStep();
+        if (currentStep && !currentStep.required) {
+            this.updateStepIndex(this.currentStepIndex() + 1);
+        }
+    }
+    previousPage() {
+        if (this.currentStepIndex() > 0) {
+            this.updateStepIndex(this.currentStepIndex() - 1);
+        }
+    }
+    goToStep(index) {
+        const currentStep = this.getCurrentStep();
+        if (currentStep?.required) {
+            this.notificationService.toastError('Não é possível sair de um passo obrigatório!');
+            return;
+        }
+        else {
+            this.notificationService.question({
+                type: 'question',
+                message: 'Ao sair do passo atual, todas as informações preenchidas serão perdidas. Deseja continuar?',
+                accept: () => { this.updateStepIndex(index); },
+                reject: () => { return; }
+            });
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.8", ngImport: i0, type: KvStepsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.8", type: KvStepsComponent, isStandalone: true, selector: "kv-steps", inputs: { steps: { classPropertyName: "steps", publicName: "steps", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { emitData: "emitData" }, viewQueries: [{ propertyName: "stepContainer", first: true, predicate: ["stepContainer"], descendants: true, read: ViewContainerRef }], ngImport: i0, template: "<kv-page-form\r\n  [txtBtnSave]=\"steps()[currentStepIndex()]?.textNextButton || ''\"\r\n  (onSave)=\"nextPage()\"\r\n  iconBtnSave=\"\"\r\n  (onCancel)=\"jumpPage()\"\r\n  iconBtnCancel=\"\"\r\n  [txtBtnCancel]=\"steps()[currentStepIndex()]?.textSkipButton || ''\"\r\n  [showBtnCancel]=\"!steps()[currentStepIndex()]?.required || false\"\r\n  [txtBtnSecundary]=\"steps()[currentStepIndex()]?.textCancelButton || ''\"\r\n  (onClickSecundary)=\"previousPage()\"\r\n  [showBtnSecundary]=\"currentStepIndex() > 0\"\r\n  iconBtnSecundary=\"\"\r\n>\r\n  <div class=\"step-main\">\r\n    <div class=\"step-header\">\r\n      @for (item of steps(); track $index) {\r\n\r\n      <!-- \u00CDTEM DO HEADER -->\r\n      <div\r\n        class=\"step-header-item {{ currentStepIndex() == $index && 'active' }}\"\r\n        (click)=\"goToStep($index)\"\r\n      >\r\n        <div\r\n          class=\"step-header-icon {{\r\n            currentStepIndex() == $index && 'active'\r\n          }} {{ item.completed && 'completed' }}\"\r\n        >\r\n          <span class=\"material-symbols-rounded\">{{ item.icon }}</span>\r\n        </div>\r\n\r\n        <div class=\"step-header-info\">\r\n          <div class=\"step-header-step-number\">\r\n            Etapa {{ $index + 1 }}/{{ steps().length }}\r\n          </div>\r\n          <div class=\"step-header-title\">{{ item.title }}</div>\r\n        </div>\r\n      </div>\r\n\r\n      <!-- SEPARATOR -->\r\n      @if($index != steps().length - 1) {\r\n      <!-- <div class=\"step-header-separator-horizontal {{ currentStepIndex() > $index && 'fill'}}\"></div> -->\r\n      <div\r\n        class=\"step-header-separator-vertical {{\r\n          currentStepIndex() > $index && 'fill'\r\n        }}\"\r\n      ></div>\r\n      } }\r\n    </div>\r\n    <div class=\"step-content\">\r\n      <div class=\"step-container\" #stepContainer></div>\r\n    </div>\r\n  </div>\r\n</kv-page-form>\r\n", styles: [".step-main{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1rem;padding:1rem}.step-header-separator-horizontal{position:relative;background-color:#e0e0e0;height:.1rem;width:3rem;overflow:hidden}.step-header-separator-horizontal:before{content:\"\";position:absolute;left:0;top:0;height:100%;width:0%;background-color:#000;transition:width .3s ease-in-out}.step-header-separator-horizontal.fill:before{width:100%}.step-header-separator-vertical{position:relative;background-color:#e0e0e0;width:.1rem;height:2rem;overflow:hidden}.step-header{display:flex;align-items:center;padding:.5rem 1rem;border-radius:.5rem;transition:width 1s ease-in-out;width:auto;gap:.5rem}.step-header .step-header-item{cursor:pointer;display:flex;align-items:center;justify-content:center;gap:.5rem;padding:.2rem .5rem;border-radius:.5rem;transition:all .5s ease-in-out}.step-header .step-header-item .step-header-info{overflow:hidden;max-width:0;opacity:0;transition:max-width .5s ease-in-out,opacity .5s ease-in-out;white-space:nowrap}.step-header .step-header-item.active .step-header-info{max-width:200px;opacity:1}.step-header .step-header-item .step-header-step-number{font-size:.6rem;font-weight:500;color:rgba(var(--kv-color-text),.8)}.step-header .step-header-item .step-header-title{font-size:1.1rem;font-weight:600;color:rgba(var(--kv-color-system),1)}.step-header .step-header-icon{height:2rem;width:2rem;display:flex;align-items:center;justify-content:center;border-radius:50%;background-color:rgba(var(--kv-background-card),1);transition:all .5s ease-in-out}.step-header .step-header-icon.active{background-color:rgba(var(--kv-color-system),1);color:rgba(var(--kv-background-card),1)}.step-header .step-header-icon.completed{background-color:#dcfce7;color:#15803d}.step-header .step-header-icon span{font-size:1.25rem}.step-content{width:100%}\n"], dependencies: [{ kind: "ngmodule", type: KvPageFormModule }, { kind: "component", type: KvPageFormComponent, selector: "kv-page-form", inputs: ["formGroup", "TituloForm", "SubTituloForm", "isSaveLoading", "popup", "locationUseComponent", "iconBtnCancel", "showBtnCancel", "txtBtnCancel", "actionsCancelToogle", "iconBtnCancelToogle", "showBtnCancelToogle", "txtBtnCancelToogle", "iconBtnSave", "showBtnSave", "txtBtnSave", "disableBtnSave", "actionsSaveToogle", "iconBtnSaveToogle", "showBtnSaveToogle", "txtBtnSaveToogle", "iconBtnSecundary", "showBtnSecundary", "txtBtnSecundary", "colorBtnSecundary", "actionsToogle", "iconBtnToogle", "showBtnToogle", "txtBtnToogle", "classBtnToogle", "disableBtnSair", "showMessageCamposObrigatorios"], outputs: ["onSave", "onCancel", "onClickSecundary"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.8", ngImport: i0, type: KvStepsComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'kv-steps', standalone: true, imports: [KvPageFormModule], template: "<kv-page-form\r\n  [txtBtnSave]=\"steps()[currentStepIndex()]?.textNextButton || ''\"\r\n  (onSave)=\"nextPage()\"\r\n  iconBtnSave=\"\"\r\n  (onCancel)=\"jumpPage()\"\r\n  iconBtnCancel=\"\"\r\n  [txtBtnCancel]=\"steps()[currentStepIndex()]?.textSkipButton || ''\"\r\n  [showBtnCancel]=\"!steps()[currentStepIndex()]?.required || false\"\r\n  [txtBtnSecundary]=\"steps()[currentStepIndex()]?.textCancelButton || ''\"\r\n  (onClickSecundary)=\"previousPage()\"\r\n  [showBtnSecundary]=\"currentStepIndex() > 0\"\r\n  iconBtnSecundary=\"\"\r\n>\r\n  <div class=\"step-main\">\r\n    <div class=\"step-header\">\r\n      @for (item of steps(); track $index) {\r\n\r\n      <!-- \u00CDTEM DO HEADER -->\r\n      <div\r\n        class=\"step-header-item {{ currentStepIndex() == $index && 'active' }}\"\r\n        (click)=\"goToStep($index)\"\r\n      >\r\n        <div\r\n          class=\"step-header-icon {{\r\n            currentStepIndex() == $index && 'active'\r\n          }} {{ item.completed && 'completed' }}\"\r\n        >\r\n          <span class=\"material-symbols-rounded\">{{ item.icon }}</span>\r\n        </div>\r\n\r\n        <div class=\"step-header-info\">\r\n          <div class=\"step-header-step-number\">\r\n            Etapa {{ $index + 1 }}/{{ steps().length }}\r\n          </div>\r\n          <div class=\"step-header-title\">{{ item.title }}</div>\r\n        </div>\r\n      </div>\r\n\r\n      <!-- SEPARATOR -->\r\n      @if($index != steps().length - 1) {\r\n      <!-- <div class=\"step-header-separator-horizontal {{ currentStepIndex() > $index && 'fill'}}\"></div> -->\r\n      <div\r\n        class=\"step-header-separator-vertical {{\r\n          currentStepIndex() > $index && 'fill'\r\n        }}\"\r\n      ></div>\r\n      } }\r\n    </div>\r\n    <div class=\"step-content\">\r\n      <div class=\"step-container\" #stepContainer></div>\r\n    </div>\r\n  </div>\r\n</kv-page-form>\r\n", styles: [".step-main{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1rem;padding:1rem}.step-header-separator-horizontal{position:relative;background-color:#e0e0e0;height:.1rem;width:3rem;overflow:hidden}.step-header-separator-horizontal:before{content:\"\";position:absolute;left:0;top:0;height:100%;width:0%;background-color:#000;transition:width .3s ease-in-out}.step-header-separator-horizontal.fill:before{width:100%}.step-header-separator-vertical{position:relative;background-color:#e0e0e0;width:.1rem;height:2rem;overflow:hidden}.step-header{display:flex;align-items:center;padding:.5rem 1rem;border-radius:.5rem;transition:width 1s ease-in-out;width:auto;gap:.5rem}.step-header .step-header-item{cursor:pointer;display:flex;align-items:center;justify-content:center;gap:.5rem;padding:.2rem .5rem;border-radius:.5rem;transition:all .5s ease-in-out}.step-header .step-header-item .step-header-info{overflow:hidden;max-width:0;opacity:0;transition:max-width .5s ease-in-out,opacity .5s ease-in-out;white-space:nowrap}.step-header .step-header-item.active .step-header-info{max-width:200px;opacity:1}.step-header .step-header-item .step-header-step-number{font-size:.6rem;font-weight:500;color:rgba(var(--kv-color-text),.8)}.step-header .step-header-item .step-header-title{font-size:1.1rem;font-weight:600;color:rgba(var(--kv-color-system),1)}.step-header .step-header-icon{height:2rem;width:2rem;display:flex;align-items:center;justify-content:center;border-radius:50%;background-color:rgba(var(--kv-background-card),1);transition:all .5s ease-in-out}.step-header .step-header-icon.active{background-color:rgba(var(--kv-color-system),1);color:rgba(var(--kv-background-card),1)}.step-header .step-header-icon.completed{background-color:#dcfce7;color:#15803d}.step-header .step-header-icon span{font-size:1.25rem}.step-content{width:100%}\n"] }]
+        }], propDecorators: { stepContainer: [{
+                type: ViewChild,
+                args: ['stepContainer', { read: ViewContainerRef }]
+            }] } });
+
 class KvProgressBarAlternativeComponent {
     constructor() {
         /**
@@ -10318,5 +10418,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.8", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { BaseApiService, BaseChartComponent, BaseComponent, BaseComponentButton, BaseComponentCrud, BaseComponentCrudForm, BaseComponentCrudList, BaseComponentDropDown, BaseComponentDropDownExternal, BaseComponentInput, BaseComponentMultiSelect, BasecomponentTable, BreadcrumbsService, CapitalizePipe, ChatService, ComponentProviders, ComponentService, CpfCnpjPipe, DocsService, DragDirective, DynamicInputDirective, FormService, ImageCutterService, ImagensService, KeevoComponentsModule, KeevoValidators, KvAvatarComponent, KvAvatarModule, KvButtonComponent, KvButtonModule, KvButtonPersonalizeComponent, KvButtonPopupComponent, KvButtonSecondaryComponent, KvButtonSuccessComponent, KvButtonsModule, KvCardSelectionComponent, KvCardSelectionModule, KvCarouselComponent, KvCarouselModule, KvChartComponent, KvChartModule, KvCheckComponent, KvContentViewerComponent, KvContentViewerModule, KvDropdownComponent, KvEditorComponent, KvErrorComponent, KvFileUploadComponent, KvFileUploadModule, KvFileViewerComponent, KvFileViewerModule, KvFileViewerNovoComponent, KvFileViewerNovoModule, KvFilterCardComponent, KvFilterCardModule, KvFilterFieldsetComponent, KvFilterFieldsetModule, KvGIconComponent, KvGIconModule, KvHomeCardComponent, KvHomeCardModule, KvImageUploadComponent, KvImageUploadModule, KvInputCalendarComponent, KvInputMaskComponent, KvInputNumberAddonComponent, KvInputNumberComponent, KvInputPasswordComponent, KvInputTextAddonComponent, KvInputTextCheckboxComponent, KvInputTextComponent, KvInputTextareaComponent, KvInputTimeComponent, KvInputsModule, KvLayoutComponent, KvLayoutModule, KvLoaderComponent, KvLoaderModule, KvLoaderService, KvLoginComponent, KvLoginModule, KvModalComponent, KvModalModule, KvMultiSelectComponent, KvOrgchartComponent, KvOrgchartModule, KvPageFormComponent, KvPageFormModule, KvPageStepperComponent, KvPageStepperodule, KvPickListComponent, KvPickListModule, KvProgressBarAlternativeComponent, KvProgressBarAlternativeModule, KvProgressBarModule, KvRadioGroupComponent, KvReportComponent, KvReportModule, KvSelectButtonComponent, KvSelectButtonsComponent, KvStepperComponent, KvStepperModule, KvSwitchComponent, KvTableComponent, KvTableEditComponent, KvTableEditModule, KvTableExpandableComponent, KvTableExpandableModule, KvTableModule, KvTagComponent, KvTagModule, KvTreeMultiSelectComponent, KvTreeViewComponent, KvTreetableComponent, KvTreetableModule, KvWorkspaceModule, KvtreeViewModule, MaskPipe, NotificationService, ObjectService, OrgChartService, PeriodosChart, PipesModule, PrimeNgModule, ProgressBarComponent, TablePaginate, TelefonePipe, TemplateDirective, TranslatePrimeng, WorkspaceComponent, getOrExecute, kvErrorModule, loading, mapToMenuItem };
+export { BaseApiService, BaseChartComponent, BaseComponent, BaseComponentButton, BaseComponentCrud, BaseComponentCrudForm, BaseComponentCrudList, BaseComponentDropDown, BaseComponentDropDownExternal, BaseComponentInput, BaseComponentMultiSelect, BasecomponentTable, BreadcrumbsService, CapitalizePipe, ChatService, ComponentProviders, ComponentService, CpfCnpjPipe, DocsService, DragDirective, DynamicInputDirective, FormService, ImageCutterService, ImagensService, KeevoComponentsModule, KeevoValidators, KvAvatarComponent, KvAvatarModule, KvButtonComponent, KvButtonModule, KvButtonPersonalizeComponent, KvButtonPopupComponent, KvButtonSecondaryComponent, KvButtonSuccessComponent, KvButtonsModule, KvCardSelectionComponent, KvCardSelectionModule, KvCarouselComponent, KvCarouselModule, KvChartComponent, KvChartModule, KvCheckComponent, KvContentViewerComponent, KvContentViewerModule, KvDropdownComponent, KvEditorComponent, KvErrorComponent, KvFileUploadComponent, KvFileUploadModule, KvFileViewerComponent, KvFileViewerModule, KvFileViewerNovoComponent, KvFileViewerNovoModule, KvFilterCardComponent, KvFilterCardModule, KvFilterFieldsetComponent, KvFilterFieldsetModule, KvGIconComponent, KvGIconModule, KvHomeCardComponent, KvHomeCardModule, KvImageUploadComponent, KvImageUploadModule, KvInputCalendarComponent, KvInputMaskComponent, KvInputNumberAddonComponent, KvInputNumberComponent, KvInputPasswordComponent, KvInputTextAddonComponent, KvInputTextCheckboxComponent, KvInputTextComponent, KvInputTextareaComponent, KvInputTimeComponent, KvInputsModule, KvLayoutComponent, KvLayoutModule, KvLoaderComponent, KvLoaderModule, KvLoaderService, KvLoginComponent, KvLoginModule, KvModalComponent, KvModalModule, KvMultiSelectComponent, KvOrgchartComponent, KvOrgchartModule, KvPageFormComponent, KvPageFormModule, KvPageStepperComponent, KvPageStepperodule, KvPickListComponent, KvPickListModule, KvProgressBarAlternativeComponent, KvProgressBarAlternativeModule, KvProgressBarModule, KvRadioGroupComponent, KvReportComponent, KvReportModule, KvSelectButtonComponent, KvSelectButtonsComponent, KvStepperComponent, KvStepperModule, KvStepsComponent, KvSwitchComponent, KvTableComponent, KvTableEditComponent, KvTableEditModule, KvTableExpandableComponent, KvTableExpandableModule, KvTableModule, KvTagComponent, KvTagModule, KvTreeMultiSelectComponent, KvTreeViewComponent, KvTreetableComponent, KvTreetableModule, KvWorkspaceModule, KvtreeViewModule, MaskPipe, NotificationService, ObjectService, OrgChartService, PeriodosChart, PipesModule, PrimeNgModule, ProgressBarComponent, TablePaginate, TelefonePipe, TemplateDirective, TranslatePrimeng, WorkspaceComponent, getOrExecute, kvErrorModule, loading, mapToMenuItem };
 //# sourceMappingURL=keevo-components.mjs.map