ngx-vector-components 6.12.0 → 6.13.1

package/CHANGELOG.md

@@ -1,5 +1,18 @@
 # Changelog
 
+## [6.13.1] (11/08/2026)
+
+### Fix
+
+- Fix `stepper.component` broken layout after PrimeNG 19 update: migrated the `p-steps` custom styles on `_primeng-custom-theme.scss` to the renamed classes (`p-highlight` -> `p-steps-item-active`, `p-menu-item-link` -> `p-steps-item-link`, `p-steps-number` -> `p-steps-item-number`, `p-steps-title` -> `p-steps-item-label`);
+- Fix "checked" icon and disabled step state on `stepper.component`, which queried the removed `p-steps-number` class;
+
+## [6.13.0] (10/08/2026)
+
+### Feat
+
+- Added "notexecuted" color (`badge-notexecuted`) for `Status.NOT_EXECUTEDCOUNT` on `badge.component`;
+
 ## [6.12.0] (04/08/2026)
 
 ### Fix

package/assets/styles/_primeng-custom-theme.scss

@@ -774,12 +774,13 @@ p-radiobutton.ng-touched.ng-invalid .p-radiobutton-box {
   }
 }
 
-.p-steps .p-steps-item.p-highlight {
+.p-steps .p-steps-item.p-steps-item-active {
   background-color: transparent !important;
 
-  .p-menu-item-link .p-steps-number {
+  .p-steps-item-link .p-steps-item-number {
     color: #fff !important;
     background-color: var(--theme-medium) !important;
+    border-color: var(--theme-medium) !important;
   }
 }
 
@@ -791,17 +792,17 @@ p-radiobutton.ng-touched.ng-invalid .p-radiobutton-box {
   padding: 0.75rem 1rem !important;
 }
 
-.p-steps .p-steps-item:not(.p-highlight) {
-  .p-steps-title {
+.p-steps .p-steps-item:not(.p-steps-item-active) {
+  .p-steps-item-label {
     opacity: 0.4 !important;
   }
 
-  .p-menu-item-link .p-steps-number {
+  .p-steps-item-link .p-steps-item-number {
     color: var(--theme-medium) !important;
   }
 }
 
-.p-steps .p-steps-item .p-steps-title {
+.p-steps .p-steps-item .p-steps-item-label {
   color: var(--theme-medium) !important;
 }
 
@@ -809,12 +810,14 @@ p-radiobutton.ng-touched.ng-invalid .p-radiobutton-box {
   opacity: 1 !important;
 }
 
-.p-steps .p-steps-item .p-menu-item-link {
+.p-steps .p-steps-item .p-steps-item-link {
   background: transparent !important;
+  padding: 0.75rem 1rem !important;
 
-  .p-steps-number {
+  .p-steps-item-number {
     min-width: 2.6rem !important;
     height: 2.6rem !important;
+    line-height: 2.6rem !important;
     font-size: 1rem !important;
     border: 2px solid var(--theme-medium) !important;
   }
@@ -825,29 +828,30 @@ p-radiobutton.ng-touched.ng-invalid .p-radiobutton-box {
 }
 
 .p-steps ul > li:not(:only-child)::before {
-  border: 1px dashed var(--theme-medium) !important;
+  border-top: 1px dashed var(--theme-medium) !important;
 }
 
 .p-steps .p-steps-item:first-child:before {
   width: 50% !important;
   left: 50% !important;
+  transform: none !important;
 }
 
 .p-steps .p-steps-item:last-child:before {
   width: 50% !important;
 }
 
-.p-steps .p-steps-item.checked .p-steps-title {
+.p-steps .p-steps-item.checked .p-steps-item-label {
   color: var(--success-color-dark) !important;
 }
 
-.p-steps .p-steps-item.checked .p-menu-item-link .p-steps-number {
+.p-steps .p-steps-item.checked .p-steps-item-link .p-steps-item-number {
   background-color: var(--success-color-dark) !important;
   color: #fff !important;
   border: 2px solid var(--success-color-dark) !important;
 }
 
-.p-steps .p-steps-item .p-menu-item-link .p-steps-number.disabled {
+.p-steps .p-steps-item .p-steps-item-link .p-steps-item-number.disabled {
   color: var(--gray-dark) !important;
   border: 2px solid var(--gray-dark) !important;
 }

package/fesm2022/ngx-vector-components.mjs

@@ -899,15 +899,17 @@ class BadgeComponent {
                 return 'badge-error';
             case Status.INFO:
                 return 'badge-info';
+            case Status.NOT_EXECUTEDCOUNT:
+                return 'badge-notexecuted';
         }
         return '';
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: BadgeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.25", type: BadgeComponent, isStandalone: false, selector: "vector-badge", inputs: { type: "type", label: "label", customColor: "customColor", customBackgroundColor: "customBackgroundColor", tooltip: "tooltip" }, ngImport: i0, template: "<div\n  class=\"badge\"\n  [class]=\"getStatusColor()\"\n  [ngStyle]=\"{ 'background-color': customBackgroundColor, color: customColor }\"\n  [pTooltip]=\"tooltip || ''\"\n  tooltipPosition=\"top\"\n>\n  {{ label }}\n</div>\n", styles: [".badge{padding:4px 12px;border-radius:8px;color:#fff}.badge-success{background-color:var(--success-color)}.badge-error{background-color:var(--error-color)}.badge-warning{background-color:var(--warning-color)}.badge-info{background-color:var(--theme-light)}\n"], dependencies: [{ kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i2.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "appendTo", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.25", type: BadgeComponent, isStandalone: false, selector: "vector-badge", inputs: { type: "type", label: "label", customColor: "customColor", customBackgroundColor: "customBackgroundColor", tooltip: "tooltip" }, ngImport: i0, template: "<div\n  class=\"badge\"\n  [class]=\"getStatusColor()\"\n  [ngStyle]=\"{ 'background-color': customBackgroundColor, color: customColor }\"\n  [pTooltip]=\"tooltip || ''\"\n  tooltipPosition=\"top\"\n>\n  {{ label }}\n</div>\n", styles: [".badge{padding:4px 12px;border-radius:8px;color:#fff}.badge-success{background-color:var(--success-color)}.badge-error{background-color:var(--error-color)}.badge-warning{background-color:var(--warning-color)}.badge-info{background-color:var(--theme-light)}.badge-notexecuted{background-color:var(--gray-dark)}\n"], dependencies: [{ kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i2.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "appendTo", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: BadgeComponent, decorators: [{
             type: Component,
-            args: [{ standalone: false, selector: 'vector-badge', template: "<div\n  class=\"badge\"\n  [class]=\"getStatusColor()\"\n  [ngStyle]=\"{ 'background-color': customBackgroundColor, color: customColor }\"\n  [pTooltip]=\"tooltip || ''\"\n  tooltipPosition=\"top\"\n>\n  {{ label }}\n</div>\n", styles: [".badge{padding:4px 12px;border-radius:8px;color:#fff}.badge-success{background-color:var(--success-color)}.badge-error{background-color:var(--error-color)}.badge-warning{background-color:var(--warning-color)}.badge-info{background-color:var(--theme-light)}\n"] }]
+            args: [{ standalone: false, selector: 'vector-badge', template: "<div\n  class=\"badge\"\n  [class]=\"getStatusColor()\"\n  [ngStyle]=\"{ 'background-color': customBackgroundColor, color: customColor }\"\n  [pTooltip]=\"tooltip || ''\"\n  tooltipPosition=\"top\"\n>\n  {{ label }}\n</div>\n", styles: [".badge{padding:4px 12px;border-radius:8px;color:#fff}.badge-success{background-color:var(--success-color)}.badge-error{background-color:var(--error-color)}.badge-warning{background-color:var(--warning-color)}.badge-info{background-color:var(--theme-light)}.badge-notexecuted{background-color:var(--gray-dark)}\n"] }]
         }], ctorParameters: () => [], propDecorators: { type: [{
                 type: Input
             }], label: [{
@@ -6156,7 +6158,7 @@ class StepperComponent {
         this.activeIndexChange = new EventEmitter();
     }
     ngAfterViewInit() {
-        const stepsNumbers = this.elementRef.nativeElement.getElementsByClassName('p-steps-number');
+        const stepsNumbers = this.elementRef.nativeElement.getElementsByClassName('p-steps-item-number');
         let index = 0;
         for (let element of stepsNumbers) {
             const step = this.steps[index];