primeng 17.14.1 → 17.16.0

package/paginator/paginator.d.ts

@@ -1,5 +1,5 @@
 import { AfterContentInit, ChangeDetectorRef, ElementRef, EventEmitter, OnChanges, OnInit, QueryList, SimpleChanges, TemplateRef } from '@angular/core';
-import { PrimeNGConfig, SelectItem } from 'primeng/api';
+import { Aria, PrimeNGConfig, SelectItem } from 'primeng/api';
 import { DropdownChangeEvent } from 'primeng/dropdown';
 import { Nullable } from 'primeng/ts-helpers';
 import { PaginatorState } from './paginator.interface';
@@ -162,8 +162,8 @@ export declare class Paginator implements OnInit, AfterContentInit, OnChanges {
     _page: number;
     constructor(cd: ChangeDetectorRef, config: PrimeNGConfig);
     ngOnInit(): void;
-    getAriaLabel(labelType: any): any;
-    getPageAriaLabel(value: any): string;
+    getAriaLabel(labelType: keyof Aria): string | undefined;
+    getPageAriaLabel(value: number): string | undefined;
     getLocalization(digit: number): string;
     ngAfterContentInit(): void;
     ngOnChanges(simpleChange: SimpleChanges): void;
@@ -171,7 +171,7 @@ export declare class Paginator implements OnInit, AfterContentInit, OnChanges {
     isFirstPage(): boolean;
     isLastPage(): boolean;
     getPageCount(): number;
-    calculatePageLinkBoundaries(): number[];
+    calculatePageLinkBoundaries(): [number, number];
     updatePageLinks(): void;
     changePage(p: number): void;
     updateFirst(): void;

package/panelmenu/panelmenu.d.ts

@@ -171,6 +171,7 @@ export declare class PanelMenu implements AfterContentInit {
     templates: QueryList<PrimeTemplate> | undefined;
     containerViewChild: ElementRef | undefined;
     submenuIconTemplate: TemplateRef<any> | undefined;
+    headerContentTemplate: TemplateRef<any> | undefined;
     itemTemplate: TemplateRef<any> | undefined;
     animating: boolean | undefined;
     activeItem: import("@angular/core").WritableSignal<any>;

package/panelmenu/panelmenu.interface.d.ts

@@ -1,9 +1,21 @@
 import { TemplateRef } from '@angular/core';
+import { MenuItem } from 'primeng/api';
 /**
  * Defines valid templates in PanelMenu.
  * @group Templates
  */
 export interface PanelMenuTemplates {
+    /**
+     * Custom item template.
+     */
+    item(context: {
+        /**
+         * Item instance.
+         */
+        $implicit: MenuItem;
+    }): TemplateRef<{
+        $implicit: MenuItem;
+    }>;
     /**
      * Custom template of submenuicon.
      */

package/password/password.d.ts

@@ -56,6 +56,11 @@ export declare class PasswordDirective implements OnDestroy, DoCheck {
      * @group Props
      */
     set showPassword(show: boolean);
+    /**
+     * Specifies the input variant of the component.
+     * @group Props
+     */
+    variant: 'filled' | 'outlined';
     panel: Nullable<HTMLDivElement>;
     meter: Nullable<Meter>;
     info: Nullable<HTMLDivElement>;
@@ -82,7 +87,7 @@ export declare class PasswordDirective implements OnDestroy, DoCheck {
     onWindowResize(): void;
     ngOnDestroy(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<PasswordDirective, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<PasswordDirective, "[pPassword]", never, { "promptLabel": { "alias": "promptLabel"; "required": false; }; "weakLabel": { "alias": "weakLabel"; "required": false; }; "mediumLabel": { "alias": "mediumLabel"; "required": false; }; "strongLabel": { "alias": "strongLabel"; "required": false; }; "feedback": { "alias": "feedback"; "required": false; }; "showPassword": { "alias": "showPassword"; "required": false; }; }, {}, never, never, false, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<PasswordDirective, "[pPassword]", never, { "promptLabel": { "alias": "promptLabel"; "required": false; }; "weakLabel": { "alias": "weakLabel"; "required": false; }; "mediumLabel": { "alias": "mediumLabel"; "required": false; }; "strongLabel": { "alias": "strongLabel"; "required": false; }; "feedback": { "alias": "feedback"; "required": false; }; "showPassword": { "alias": "showPassword"; "required": false; }; "variant": { "alias": "variant"; "required": false; }; }, {}, never, never, false, never>;
     static ngAcceptInputType_feedback: unknown;
 }
 type Mapper<T, G> = (item: T, ...args: any[]) => G;
@@ -233,6 +238,11 @@ export declare class Password implements AfterContentInit, OnInit {
      * @group Props
      */
     autofocus: boolean | undefined;
+    /**
+     * Specifies the input variant of the component.
+     * @group Props
+     */
+    variant: 'filled' | 'outlined';
     /**
      * Callback to invoke when the component receives focus.
      * @param {Event} event - Browser event.
@@ -315,7 +325,7 @@ export declare class Password implements AfterContentInit, OnInit {
     clear(): void;
     ngOnDestroy(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<Password, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<Password, "p-password", never, { "ariaLabel": { "alias": "ariaLabel"; "required": false; }; "ariaLabelledBy": { "alias": "ariaLabelledBy"; "required": false; }; "label": { "alias": "label"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "promptLabel": { "alias": "promptLabel"; "required": false; }; "mediumRegex": { "alias": "mediumRegex"; "required": false; }; "strongRegex": { "alias": "strongRegex"; "required": false; }; "weakLabel": { "alias": "weakLabel"; "required": false; }; "mediumLabel": { "alias": "mediumLabel"; "required": false; }; "maxLength": { "alias": "maxLength"; "required": false; }; "strongLabel": { "alias": "strongLabel"; "required": false; }; "inputId": { "alias": "inputId"; "required": false; }; "feedback": { "alias": "feedback"; "required": false; }; "appendTo": { "alias": "appendTo"; "required": false; }; "toggleMask": { "alias": "toggleMask"; "required": false; }; "inputStyleClass": { "alias": "inputStyleClass"; "required": false; }; "styleClass": { "alias": "styleClass"; "required": false; }; "style": { "alias": "style"; "required": false; }; "inputStyle": { "alias": "inputStyle"; "required": false; }; "showTransitionOptions": { "alias": "showTransitionOptions"; "required": false; }; "hideTransitionOptions": { "alias": "hideTransitionOptions"; "required": false; }; "autocomplete": { "alias": "autocomplete"; "required": false; }; "placeholder": { "alias": "placeholder"; "required": false; }; "showClear": { "alias": "showClear"; "required": false; }; "autofocus": { "alias": "autofocus"; "required": false; }; }, { "onFocus": "onFocus"; "onBlur": "onBlur"; "onClear": "onClear"; }, ["templates"], never, false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<Password, "p-password", never, { "ariaLabel": { "alias": "ariaLabel"; "required": false; }; "ariaLabelledBy": { "alias": "ariaLabelledBy"; "required": false; }; "label": { "alias": "label"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "promptLabel": { "alias": "promptLabel"; "required": false; }; "mediumRegex": { "alias": "mediumRegex"; "required": false; }; "strongRegex": { "alias": "strongRegex"; "required": false; }; "weakLabel": { "alias": "weakLabel"; "required": false; }; "mediumLabel": { "alias": "mediumLabel"; "required": false; }; "maxLength": { "alias": "maxLength"; "required": false; }; "strongLabel": { "alias": "strongLabel"; "required": false; }; "inputId": { "alias": "inputId"; "required": false; }; "feedback": { "alias": "feedback"; "required": false; }; "appendTo": { "alias": "appendTo"; "required": false; }; "toggleMask": { "alias": "toggleMask"; "required": false; }; "inputStyleClass": { "alias": "inputStyleClass"; "required": false; }; "styleClass": { "alias": "styleClass"; "required": false; }; "style": { "alias": "style"; "required": false; }; "inputStyle": { "alias": "inputStyle"; "required": false; }; "showTransitionOptions": { "alias": "showTransitionOptions"; "required": false; }; "hideTransitionOptions": { "alias": "hideTransitionOptions"; "required": false; }; "autocomplete": { "alias": "autocomplete"; "required": false; }; "placeholder": { "alias": "placeholder"; "required": false; }; "showClear": { "alias": "showClear"; "required": false; }; "autofocus": { "alias": "autofocus"; "required": false; }; "variant": { "alias": "variant"; "required": false; }; }, { "onFocus": "onFocus"; "onBlur": "onBlur"; "onClear": "onClear"; }, ["templates"], never, false, never>;
     static ngAcceptInputType_disabled: unknown;
     static ngAcceptInputType_maxLength: unknown;
     static ngAcceptInputType_feedback: unknown;

package/radiobutton/radiobutton.d.ts

@@ -2,6 +2,7 @@ import { ChangeDetectorRef, ElementRef, EventEmitter, Injector, OnDestroy, OnIni
 import { ControlValueAccessor, NgControl } from '@angular/forms';
 import { Nullable } from 'primeng/ts-helpers';
 import { RadioButtonClickEvent } from './radiobutton.interface';
+import { PrimeNGConfig } from 'primeng/api';
 import * as i0 from "@angular/core";
 import * as i1 from "@angular/common";
 import * as i2 from "primeng/autofocus";
@@ -23,6 +24,7 @@ export declare class RadioButton implements ControlValueAccessor, OnInit, OnDest
     cd: ChangeDetectorRef;
     private injector;
     private registry;
+    config: PrimeNGConfig;
     /**
      * Value of the radiobutton.
      * @group Props
@@ -48,6 +50,11 @@ export declare class RadioButton implements ControlValueAccessor, OnInit, OnDest
      * @group Props
      */
     label: string | undefined;
+    /**
+     * Specifies the input variant of the component.
+     * @group Props
+     */
+    variant: 'filled' | 'outlined';
     /**
      * Index of the element in tabbing order.
      * @group Props
@@ -114,7 +121,7 @@ export declare class RadioButton implements ControlValueAccessor, OnInit, OnDest
     checked: Nullable<boolean>;
     focused: Nullable<boolean>;
     control: Nullable<NgControl>;
-    constructor(cd: ChangeDetectorRef, injector: Injector, registry: RadioControlRegistry);
+    constructor(cd: ChangeDetectorRef, injector: Injector, registry: RadioControlRegistry, config: PrimeNGConfig);
     ngOnInit(): void;
     handleClick(event: Event, radioButton: HTMLElement, focus: boolean): void;
     select(event: Event): void;
@@ -133,7 +140,7 @@ export declare class RadioButton implements ControlValueAccessor, OnInit, OnDest
     private checkName;
     private throwNameError;
     static ɵfac: i0.ɵɵFactoryDeclaration<RadioButton, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<RadioButton, "p-radioButton", never, { "value": { "alias": "value"; "required": false; }; "formControlName": { "alias": "formControlName"; "required": false; }; "name": { "alias": "name"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "label": { "alias": "label"; "required": false; }; "tabindex": { "alias": "tabindex"; "required": false; }; "inputId": { "alias": "inputId"; "required": false; }; "ariaLabelledBy": { "alias": "ariaLabelledBy"; "required": false; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; }; "style": { "alias": "style"; "required": false; }; "styleClass": { "alias": "styleClass"; "required": false; }; "labelStyleClass": { "alias": "labelStyleClass"; "required": false; }; "autofocus": { "alias": "autofocus"; "required": false; }; }, { "onClick": "onClick"; "onFocus": "onFocus"; "onBlur": "onBlur"; }, never, never, false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<RadioButton, "p-radioButton", never, { "value": { "alias": "value"; "required": false; }; "formControlName": { "alias": "formControlName"; "required": false; }; "name": { "alias": "name"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "label": { "alias": "label"; "required": false; }; "variant": { "alias": "variant"; "required": false; }; "tabindex": { "alias": "tabindex"; "required": false; }; "inputId": { "alias": "inputId"; "required": false; }; "ariaLabelledBy": { "alias": "ariaLabelledBy"; "required": false; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; }; "style": { "alias": "style"; "required": false; }; "styleClass": { "alias": "styleClass"; "required": false; }; "labelStyleClass": { "alias": "labelStyleClass"; "required": false; }; "autofocus": { "alias": "autofocus"; "required": false; }; }, { "onClick": "onClick"; "onFocus": "onFocus"; "onBlur": "onBlur"; }, never, never, false, never>;
     static ngAcceptInputType_disabled: unknown;
     static ngAcceptInputType_tabindex: unknown;
     static ngAcceptInputType_autofocus: unknown;

package/resources/components/divider/divider.css

@@ -80,7 +80,7 @@
         border-top-style: dotted;
     }
 
-    .p-divider-dotted.p-divider-horizontal:before {
+    .p-divider-dotted.p-divider-vertical:before {
         border-left-style: dotted;
     }
 }

package/resources/components/speeddial/speeddial.css

@@ -5,6 +5,14 @@
         z-index: 1;
     }
 
+    .p-speeddial:not(.p-speeddial-opened) {
+        pointer-events: none;
+    }
+
+    .p-speeddial:not(.p-speeddial-opened) .p-speeddial-button {
+        pointer-events: auto;
+    }
+
     .p-speeddial-list {
         margin: 0;
         padding: 0;

package/resources/components/timeline/timeline.css

@@ -58,11 +58,13 @@
     .p-timeline-event-opposite {
         flex: 1;
         padding: 0 1rem;
+        min-width: 100px;
     }
 
     .p-timeline-event-content {
         flex: 1;
         padding: 0 1rem;
+        min-width: 100px;
     }
 
     .p-timeline-event-separator {

package/resources/themes/arya-blue/theme.css

@@ -735,6 +735,15 @@
   .p-cascadeselect.p-invalid.p-component {
     border-color: #ef9a9a;
   }
+  .p-cascadeselect.p-variant-filled {
+    background-color: #383838;
+  }
+  .p-cascadeselect.p-variant-filled:enabled:hover {
+    background-color: #383838;
+  }
+  .p-cascadeselect.p-variant-filled:enabled:focus {
+    background-color: #383838;
+  }
 
   .p-cascadeselect-panel {
     background: #1e1e1e;
@@ -851,6 +860,18 @@
     background: #2396f2;
     color: #212529;
   }
+  .p-checkbox.p-variant-filled .p-checkbox-box {
+    background-color: #383838;
+  }
+  .p-checkbox.p-variant-filled .p-checkbox-box.p-highlight {
+    background: #64B5F6;
+  }
+  .p-checkbox.p-variant-filled:not(.p-checkbox-disabled) .p-checkbox-box:hover {
+    background-color: #383838;
+  }
+  .p-checkbox.p-variant-filled:not(.p-checkbox-disabled) .p-checkbox-box.p-highlight:hover {
+    background: #2396f2;
+  }
 
   p-checkbox.ng-dirty.ng-invalid > .p-checkbox > .p-checkbox-box {
     border-color: #ef9a9a;
@@ -990,6 +1011,15 @@
   .p-dropdown.p-invalid.p-component {
     border-color: #ef9a9a;
   }
+  .p-dropdown.p-variant-filled {
+    background-color: #383838;
+  }
+  .p-dropdown.p-variant-filled:enabled:hover {
+    background-color: #383838;
+  }
+  .p-dropdown.p-variant-filled:enabled:focus {
+    background-color: #383838;
+  }
 
   .p-dropdown-panel {
     background: #1e1e1e;
@@ -1173,6 +1203,16 @@
     right: 0.5rem;
   }
 
+  .p-inputmask.p-variant-filled {
+    background-color: #383838;
+  }
+  .p-inputmask.p-variant-filled:enabled:hover {
+    background-color: #383838;
+  }
+  .p-inputmask.p-variant-filled:enabled:focus {
+    background-color: #383838;
+  }
+
   p-inputnumber.ng-dirty.ng-invalid > .p-inputnumber > .p-inputtext {
     border-color: #ef9a9a;
   }
@@ -1192,6 +1232,16 @@
     right: 2.857rem;
   }
 
+  p-inputnumber.p-inputnumber.p-variant-filled > .p-inputnumber-input {
+    background-color: #383838;
+  }
+  p-inputnumber.p-inputnumber.p-variant-filled > .p-inputnumber-input:enabled:hover {
+    background-color: #383838;
+  }
+  p-inputnumber.p-inputnumber.p-variant-filled > .p-inputnumber-input:enabled:focus {
+    background-color: #383838;
+  }
+
   .p-inputotp {
     display: flex;
     align-items: center;
@@ -1270,6 +1320,15 @@
   .p-inputtext.ng-dirty.ng-invalid {
     border-color: #ef9a9a;
   }
+  .p-inputtext.p-variant-filled {
+    background-color: #383838;
+  }
+  .p-inputtext.p-variant-filled:enabled:hover {
+    background-color: #383838;
+  }
+  .p-inputtext.p-variant-filled:enabled:focus {
+    background-color: #383838;
+  }
   .p-inputtext.p-inputtext-sm {
     font-size: 0.875rem;
     padding: 0.4375rem 0.4375rem;
@@ -1486,8 +1545,17 @@
     border-top-right-radius: 3px;
     border-bottom-right-radius: 3px;
   }
+  .p-multiselect.p-variant-filled {
+    background: #383838;
+  }
+  .p-multiselect.p-variant-filled:not(.p-disabled):hover {
+    background-color: #383838;
+  }
+  .p-multiselect.p-variant-filled:not(.p-disabled).p-focus {
+    background-color: #383838;
+  }
 
-  .p-inputwrapper-filled.p-multiselect.p-multiselect-chip .p-multiselect-label {
+  .p-inputwrapper-filled .p-multiselect.p-multiselect-chip .p-multiselect-label {
     padding: 0.25rem 0.5rem;
   }
 
@@ -1685,6 +1753,18 @@
     background: #2396f2;
     color: #212529;
   }
+  .p-radiobutton.p-variant-filled .p-radiobutton-box {
+    background-color: #383838;
+  }
+  .p-radiobutton.p-variant-filled .p-radiobutton-box:not(.p-disabled):hover {
+    background-color: #383838;
+  }
+  .p-radiobutton.p-variant-filled .p-radiobutton-box.p-highlight {
+    background: #64B5F6;
+  }
+  .p-radiobutton.p-variant-filled .p-radiobutton-box.p-highlight:not(.p-disabled):hover {
+    background: #2396f2;
+  }
 
   p-radiobutton.ng-dirty.ng-invalid > .p-radiobutton > .p-radiobutton-box {
     border-color: #ef9a9a;
@@ -1799,9 +1879,12 @@
     margin-left: -0.5715rem;
   }
   .p-slider.p-slider-vertical {
+    height: 100%;
     width: 0.286rem;
   }
   .p-slider.p-slider-vertical .p-slider-handle {
+    height: 1.143rem;
+    width: 1.143rem;
     margin-left: -0.5715rem;
     margin-bottom: -0.5715rem;
   }
@@ -1916,6 +1999,15 @@
     border-top-right-radius: 3px;
     border-bottom-right-radius: 3px;
   }
+  .p-treeselect.p-variant-filled {
+    background-color: #383838;
+  }
+  .p-treeselect.p-variant-filled:enabled:hover {
+    background-color: #383838;
+  }
+  .p-treeselect.p-variant-filled:enabled:focus {
+    background-color: #383838;
+  }
 
   p-treeselect.ng-invalid.ng-dirty > .p-treeselect {
     border-color: #ef9a9a;
@@ -3419,6 +3511,18 @@
   .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox .p-indeterminate .p-checkbox-icon {
     color: rgba(255, 255, 255, 0.87);
   }
+  .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox.p-variant-filled .p-checkbox-box {
+    background-color: #383838;
+  }
+  .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox.p-variant-filled .p-checkbox-box.p-highlight {
+    background: #64B5F6;
+  }
+  .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox.p-variant-filled:not(.p-disabled) .p-checkbox-box:hover {
+    background-color: #383838;
+  }
+  .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox.p-variant-filled:not(.p-disabled) .p-checkbox-box.p-highlight:hover {
+    background: #2396f2;
+  }
   .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight {
     background: rgba(100, 181, 246, 0.16);
     color: rgba(255, 255, 255, 0.87);
@@ -3616,6 +3720,18 @@
   .p-treetable .p-treetable-tbody > tr > td p-treetablecheckbox .p-checkbox .p-indeterminate .p-checkbox-icon {
     color: rgba(255, 255, 255, 0.87);
   }
+  .p-treetable .p-treetable-tbody > tr > td p-treetablecheckbox .p-checkbox.p-variant-filled .p-checkbox-box {
+    background-color: #383838;
+  }
+  .p-treetable .p-treetable-tbody > tr > td p-treetablecheckbox .p-checkbox.p-variant-filled .p-checkbox-box.p-highlight {
+    background: #64B5F6;
+  }
+  .p-treetable .p-treetable-tbody > tr > td p-treetablecheckbox .p-checkbox.p-variant-filled:not(.p-disabled) .p-checkbox-box:hover {
+    background-color: #383838;
+  }
+  .p-treetable .p-treetable-tbody > tr > td p-treetablecheckbox .p-checkbox.p-variant-filled:not(.p-disabled) .p-checkbox-box.p-highlight:hover {
+    background: #2396f2;
+  }
   .p-treetable .p-treetable-tbody > tr:focus-visible {
     outline: 0.15rem solid #93cbf9;
     outline-offset: -0.15rem;

package/resources/themes/arya-green/theme.css

@@ -735,6 +735,15 @@
   .p-cascadeselect.p-invalid.p-component {
     border-color: #ef9a9a;
   }
+  .p-cascadeselect.p-variant-filled {
+    background-color: #383838;
+  }
+  .p-cascadeselect.p-variant-filled:enabled:hover {
+    background-color: #383838;
+  }
+  .p-cascadeselect.p-variant-filled:enabled:focus {
+    background-color: #383838;
+  }
 
   .p-cascadeselect-panel {
     background: #1e1e1e;
@@ -851,6 +860,18 @@
     background: #54b358;
     color: #212529;
   }
+  .p-checkbox.p-variant-filled .p-checkbox-box {
+    background-color: #383838;
+  }
+  .p-checkbox.p-variant-filled .p-checkbox-box.p-highlight {
+    background: #81C784;
+  }
+  .p-checkbox.p-variant-filled:not(.p-checkbox-disabled) .p-checkbox-box:hover {
+    background-color: #383838;
+  }
+  .p-checkbox.p-variant-filled:not(.p-checkbox-disabled) .p-checkbox-box.p-highlight:hover {
+    background: #54b358;
+  }
 
   p-checkbox.ng-dirty.ng-invalid > .p-checkbox > .p-checkbox-box {
     border-color: #ef9a9a;
@@ -990,6 +1011,15 @@
   .p-dropdown.p-invalid.p-component {
     border-color: #ef9a9a;
   }
+  .p-dropdown.p-variant-filled {
+    background-color: #383838;
+  }
+  .p-dropdown.p-variant-filled:enabled:hover {
+    background-color: #383838;
+  }
+  .p-dropdown.p-variant-filled:enabled:focus {
+    background-color: #383838;
+  }
 
   .p-dropdown-panel {
     background: #1e1e1e;
@@ -1173,6 +1203,16 @@
     right: 0.5rem;
   }
 
+  .p-inputmask.p-variant-filled {
+    background-color: #383838;
+  }
+  .p-inputmask.p-variant-filled:enabled:hover {
+    background-color: #383838;
+  }
+  .p-inputmask.p-variant-filled:enabled:focus {
+    background-color: #383838;
+  }
+
   p-inputnumber.ng-dirty.ng-invalid > .p-inputnumber > .p-inputtext {
     border-color: #ef9a9a;
   }
@@ -1192,6 +1232,16 @@
     right: 2.857rem;
   }
 
+  p-inputnumber.p-inputnumber.p-variant-filled > .p-inputnumber-input {
+    background-color: #383838;
+  }
+  p-inputnumber.p-inputnumber.p-variant-filled > .p-inputnumber-input:enabled:hover {
+    background-color: #383838;
+  }
+  p-inputnumber.p-inputnumber.p-variant-filled > .p-inputnumber-input:enabled:focus {
+    background-color: #383838;
+  }
+
   .p-inputotp {
     display: flex;
     align-items: center;
@@ -1270,6 +1320,15 @@
   .p-inputtext.ng-dirty.ng-invalid {
     border-color: #ef9a9a;
   }
+  .p-inputtext.p-variant-filled {
+    background-color: #383838;
+  }
+  .p-inputtext.p-variant-filled:enabled:hover {
+    background-color: #383838;
+  }
+  .p-inputtext.p-variant-filled:enabled:focus {
+    background-color: #383838;
+  }
   .p-inputtext.p-inputtext-sm {
     font-size: 0.875rem;
     padding: 0.4375rem 0.4375rem;
@@ -1486,8 +1545,17 @@
     border-top-right-radius: 3px;
     border-bottom-right-radius: 3px;
   }
+  .p-multiselect.p-variant-filled {
+    background: #383838;
+  }
+  .p-multiselect.p-variant-filled:not(.p-disabled):hover {
+    background-color: #383838;
+  }
+  .p-multiselect.p-variant-filled:not(.p-disabled).p-focus {
+    background-color: #383838;
+  }
 
-  .p-inputwrapper-filled.p-multiselect.p-multiselect-chip .p-multiselect-label {
+  .p-inputwrapper-filled .p-multiselect.p-multiselect-chip .p-multiselect-label {
     padding: 0.25rem 0.5rem;
   }
 
@@ -1685,6 +1753,18 @@
     background: #54b358;
     color: #212529;
   }
+  .p-radiobutton.p-variant-filled .p-radiobutton-box {
+    background-color: #383838;
+  }
+  .p-radiobutton.p-variant-filled .p-radiobutton-box:not(.p-disabled):hover {
+    background-color: #383838;
+  }
+  .p-radiobutton.p-variant-filled .p-radiobutton-box.p-highlight {
+    background: #81C784;
+  }
+  .p-radiobutton.p-variant-filled .p-radiobutton-box.p-highlight:not(.p-disabled):hover {
+    background: #54b358;
+  }
 
   p-radiobutton.ng-dirty.ng-invalid > .p-radiobutton > .p-radiobutton-box {
     border-color: #ef9a9a;
@@ -1799,9 +1879,12 @@
     margin-left: -0.5715rem;
   }
   .p-slider.p-slider-vertical {
+    height: 100%;
     width: 0.286rem;
   }
   .p-slider.p-slider-vertical .p-slider-handle {
+    height: 1.143rem;
+    width: 1.143rem;
     margin-left: -0.5715rem;
     margin-bottom: -0.5715rem;
   }
@@ -1916,6 +1999,15 @@
     border-top-right-radius: 3px;
     border-bottom-right-radius: 3px;
   }
+  .p-treeselect.p-variant-filled {
+    background-color: #383838;
+  }
+  .p-treeselect.p-variant-filled:enabled:hover {
+    background-color: #383838;
+  }
+  .p-treeselect.p-variant-filled:enabled:focus {
+    background-color: #383838;
+  }
 
   p-treeselect.ng-invalid.ng-dirty > .p-treeselect {
     border-color: #ef9a9a;
@@ -3419,6 +3511,18 @@
   .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox .p-indeterminate .p-checkbox-icon {
     color: rgba(255, 255, 255, 0.87);
   }
+  .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox.p-variant-filled .p-checkbox-box {
+    background-color: #383838;
+  }
+  .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox.p-variant-filled .p-checkbox-box.p-highlight {
+    background: #81C784;
+  }
+  .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox.p-variant-filled:not(.p-disabled) .p-checkbox-box:hover {
+    background-color: #383838;
+  }
+  .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox.p-variant-filled:not(.p-disabled) .p-checkbox-box.p-highlight:hover {
+    background: #54b358;
+  }
   .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight {
     background: rgba(129, 199, 132, 0.16);
     color: rgba(255, 255, 255, 0.87);
@@ -3616,6 +3720,18 @@
   .p-treetable .p-treetable-tbody > tr > td p-treetablecheckbox .p-checkbox .p-indeterminate .p-checkbox-icon {
     color: rgba(255, 255, 255, 0.87);
   }
+  .p-treetable .p-treetable-tbody > tr > td p-treetablecheckbox .p-checkbox.p-variant-filled .p-checkbox-box {
+    background-color: #383838;
+  }
+  .p-treetable .p-treetable-tbody > tr > td p-treetablecheckbox .p-checkbox.p-variant-filled .p-checkbox-box.p-highlight {
+    background: #81C784;
+  }
+  .p-treetable .p-treetable-tbody > tr > td p-treetablecheckbox .p-checkbox.p-variant-filled:not(.p-disabled) .p-checkbox-box:hover {
+    background-color: #383838;
+  }
+  .p-treetable .p-treetable-tbody > tr > td p-treetablecheckbox .p-checkbox.p-variant-filled:not(.p-disabled) .p-checkbox-box.p-highlight:hover {
+    background: #54b358;
+  }
   .p-treetable .p-treetable-tbody > tr:focus-visible {
     outline: 0.15rem solid #a7d8a9;
     outline-offset: -0.15rem;