ngx-vector-components 6.41.0 → 6.43.0

package/CHANGELOG.md

@@ -1,5 +1,34 @@
 # Changelog
 
+## [6.43.0] (22/10/2026)
+
+### Feat
+
+- Added `width` input (`'full' | 'fit-content'`, default `'full'`); `fit-content` overrides the global `width: 100%` (`button.component.ts`)
+- Added `rounded` input for fully rounded borders: a pill with a label, a circle when icon-only (`button.component.ts`)
+- Added `cursor` input (default `'pointer'`), not applied to the disabled state (`button.component.ts`)
+- Exported type `ButtonCursorType` with the 14 accepted cursor values (`button.component.ts`)
+- Added variant `light-filled` to `ButtonType` (`button.component.ts`)
+- A button with an icon and no label now renders as 32x32 (`button.component.ts`, `button.component.scss`)
+- Added a one-line JSDoc to every `@Input` and `@Output` (`button.component.ts`)
+- Added CSS variables `--text-color-default` and `--border-light` (`_variables.scss`)
+
+### Breaking
+
+- Renamed the `noShadow` input to `shadow` (default `false`); the shadow is now opt-in. Remove `[noShadow]` from consumers and pass `[shadow]="true"` where the shadow is wanted (`button.component.ts`)
+- Removed the `round` input; an 8px border radius is now the default. Remove `[round]` from consumers and use `[rounded]="true"` for fully rounded borders (`button.component.ts`, `button.component.scss`)
+
+### Refactor
+
+- Moved the 11 `ButtonType` variant styles from the global theme into the component, under `:host ::ng-deep` (`button.component.scss`, `_primeng-custom-theme.scss`)
+- Kept the base `p-button` block global: `p-fileUpload`, `p-table`, `p-confirmDialog`, `p-carousel` and `p-datepicker` also render `<p-button>` internally (`_primeng-custom-theme.scss`)
+
+## [6.42.0] (21/10/2026)
+
+### Feat
+
+- Added permission 'ENABLED_SUSPEND_LOT_COFCO_CBSA' ('Enabled Suspend Lot Cofco Cbsa') in `ProfileModuleActionType` (`profile.model.ts`)
+
 ## [6.41.0] (19/10/2026)
 
 ### Feat

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

@@ -60,12 +60,6 @@ p-button {
     width: 100% !important;
   }
 
-  &.round {
-    button {
-      border-radius: 8px;
-    }
-  }
-
   &:hover:not(:disabled) {
     background-color: #003049;
     border-color: #003049;
@@ -78,226 +72,9 @@ p-button {
   &:disabled {
     cursor: not-allowed;
   }
-  .no-shadow {
-    box-shadow: none;
-  }
-
   .p-button {
     border-width: 2px !important;
   }
-
-  .default {
-    background-color: #ffffff;
-    border-color: var(--theme-dark);
-
-    .p-button-label {
-      color: var(--theme-dark);
-    }
-
-    .p-button-icon {
-      color: var(--theme-dark);
-    }
-
-    &:hover:not(:disabled) {
-      background-color: var(--theme-dark);
-      border-color: var(--theme-dark);
-      .p-button-label {
-        color: #ffffff;
-      }
-    }
-  }
-
-  .default-filled {
-    background-color: var(--theme-primary);
-    border-color: var(--theme-primary);
-    .p-button-label {
-      color: #ffffff;
-    }
-    .p-button-icon {
-      color: #ffffff;
-    }
-
-    &:hover:not(:disabled) {
-      background-color: var(--theme-dark);
-      border-color: var(--theme-dark);
-    }
-  }
-
-  .cancel {
-    background-color: #ffffff;
-    border-color: var(--error-color);
-    .p-button-label {
-      color: var(--error-color);
-    }
-    .p-button-icon {
-      color: var(--error-color);
-    }
-
-    &:hover:not(:disabled) {
-      background-color: var(--error-color-dark);
-      border-color: var(--error-color-dark);
-      .p-button-label {
-        color: #ffffff;
-      }
-    }
-  }
-
-  .cancel-filled {
-    background-color: var(--error-color);
-    border-color: var(--error-color);
-    .p-button-label {
-      color: #ffffff;
-    }
-
-    .p-button-icon {
-      color: #ffffff;
-    }
-
-    &:hover:not(:disabled) {
-      background-color: var(--error-color-dark);
-      border-color: var(--error-color-dark);
-    }
-  }
-
-  .success {
-    background-color: var(--success-color);
-    border-color: var(--success-color);
-    .p-button-label {
-      color: #fff;
-    }
-    .p-button-icon {
-      color: #fff;
-    }
-
-    &:hover:not(:disabled) {
-      background-color: var(--success-color-dark);
-      border-color: var(--success-color-dark);
-    }
-  }
-
-  .light-outline {
-    background-color: var(--background);
-    border-color: var(--gray-medium);
-    .p-button-label {
-      color: var(--success-color);
-    }
-    .p-button-icon {
-      color: var(--success-color);
-    }
-
-    &:hover:not(:disabled) {
-      background-color: var(--success-color-dark);
-      border-color: var(--success-color-dark);
-      .p-button-label {
-        color: #fff;
-      }
-    }
-  }
-
-  .success-outlined {
-    background-color: #ffffff;
-    border-color: var(--success-color);
-
-    .p-button-label {
-      color: var(--success-color);
-    }
-    .p-button-icon {
-      color: var(--success-color);
-    }
-
-    &:hover:not(:disabled) {
-      background-color: var(--success-color-dark);
-      border-color: var(--success-color-dark);
-
-      .p-button-label {
-        color: #fff;
-      }
-    }
-  }
-
-  .default-outlined {
-    background-color: #ffffff;
-    border-color: var(--theme-light);
-
-    .p-button-label {
-      color: var(--theme-light);
-    }
-    .p-button-icon {
-      color: var(--theme-light);
-    }
-
-    &:hover:not(:disabled) {
-      background-color: var(--theme-primary);
-      border-color: var(--theme-primary);
-
-      .p-button-label {
-        color: #fff;
-      }
-    }
-  }
-  .default-outlined-gray {
-    background-color: #ffffff;
-    border-color: var(--gray-medium);
-
-    .p-button-label {
-      color: var(--theme-light);
-    }
-    .p-button-icon {
-      color: var(--theme-light);
-    }
-
-    &:hover:not(:disabled) {
-      background-color: var(--theme-primary);
-      border-color: var(--theme-primary);
-
-      .p-button-label {
-        color: #fff;
-      }
-    }
-  }
-  .default-outlined-gray-icon-red {
-    background-color: #ffffff;
-    border-color: var(--gray-medium);
-
-    .p-button-label {
-      color: var(--theme-light);
-    }
-    .p-button-icon {
-      color: var(--cancel-color);
-    }
-
-    &:hover:not(:disabled) {
-      background-color: var(--cancel-color);
-      border-color: var(--cancel-color);
-
-      .p-button-label {
-        color: #fff;
-      }
-    }
-  }
-  .default-outlined-gray-icon-gray {
-    background-color: #ffffff;
-    border-color: var(--gray-medium);
-
-    .p-button-label {
-      color: var(--form-labels-color);
-    }
-    .p-button-icon {
-      color: var(--form-labels-color);
-    }
-
-    &:hover:not(:disabled) {
-      background-color: var(--gray-medium);
-      border-color: var(--gray-medium);
-
-      .p-button-label {
-        color: var(--form-labels-color);
-      }
-      .p-button-icon {
-        color: var(--form-labels-color);
-      }
-    }
-  }
 }
 
 .p-inputgroup {

package/assets/styles/_variables.scss

@@ -29,6 +29,9 @@
   /* Design System — brand */
   --brand-light: #e7ecfd; /* fundo do Segment Control */
   --brand-blue: #1545de; /* azul-claro do design system (texto/borda ativos) */
+
+  --text-color-default: #434560; /* texto neutro — menu, botoes, input-file */
+  --border-light: #e0e1e8; /* borda sutil sobre superficie clara */
 }
 
 :root {