primeng 16.7.1 → 16.8.0

package/picklist/picklist.d.ts

@@ -1,8 +1,8 @@
-import { ElementRef, AfterContentInit, AfterViewChecked, QueryList, TemplateRef, EventEmitter, ChangeDetectorRef, Renderer2 } from '@angular/core';
-import { PrimeTemplate, FilterService } from 'primeng/api';
 import { CdkDragDrop } from '@angular/cdk/drag-drop';
+import { AfterContentInit, AfterViewChecked, ChangeDetectorRef, ElementRef, EventEmitter, QueryList, Renderer2, TemplateRef } from '@angular/core';
+import { FilterService, PrimeTemplate } from 'primeng/api';
 import { Nullable, VoidListener } from 'primeng/ts-helpers';
-import { PickListMoveAllToSourceEvent, PickListMoveAllToTargetEvent, PickListMoveToSourceEvent, PickListMoveToTargetEvent, PickListSourceFilterEvent, PickListSourceReorderEvent, PickListSourceSelectEvent, PickListTargetFilterEvent, PickListTargetReorderEvent, PickListTargetSelectEvent, PickListFilterOptions } from './picklist.interface';
+import { PickListFilterOptions, PickListMoveAllToSourceEvent, PickListMoveAllToTargetEvent, PickListMoveToSourceEvent, PickListMoveToTargetEvent, PickListSourceFilterEvent, PickListSourceReorderEvent, PickListSourceSelectEvent, PickListTargetFilterEvent, PickListTargetReorderEvent, PickListTargetSelectEvent } from './picklist.interface';
 import * as i0 from "@angular/core";
 import * as i1 from "@angular/common";
 import * as i2 from "primeng/button";
@@ -45,6 +45,11 @@ export declare class PickList implements AfterViewChecked, AfterContentInit {
      * @group Props
      */
     sourceHeader: string | undefined;
+    /**
+     * Index of the element in tabbing order.
+     * @group Props
+     */
+    tabindex: number | undefined;
     /**
      * Defines a string that labels the move to right button for accessibility.
      * @group Props
@@ -376,7 +381,7 @@ export declare class PickList implements AfterViewChecked, AfterContentInit {
     destroyStyle(): void;
     ngOnDestroy(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<PickList, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<PickList, "p-pickList", never, { "source": { "alias": "source"; "required": false; }; "target": { "alias": "target"; "required": false; }; "sourceHeader": { "alias": "sourceHeader"; "required": false; }; "rightButtonAriaLabel": { "alias": "rightButtonAriaLabel"; "required": false; }; "leftButtonAriaLabel": { "alias": "leftButtonAriaLabel"; "required": false; }; "allRightButtonAriaLabel": { "alias": "allRightButtonAriaLabel"; "required": false; }; "allLeftButtonAriaLabel": { "alias": "allLeftButtonAriaLabel"; "required": false; }; "upButtonAriaLabel": { "alias": "upButtonAriaLabel"; "required": false; }; "downButtonAriaLabel": { "alias": "downButtonAriaLabel"; "required": false; }; "topButtonAriaLabel": { "alias": "topButtonAriaLabel"; "required": false; }; "bottomButtonAriaLabel": { "alias": "bottomButtonAriaLabel"; "required": false; }; "targetHeader": { "alias": "targetHeader"; "required": false; }; "responsive": { "alias": "responsive"; "required": false; }; "filterBy": { "alias": "filterBy"; "required": false; }; "filterLocale": { "alias": "filterLocale"; "required": false; }; "trackBy": { "alias": "trackBy"; "required": false; }; "sourceTrackBy": { "alias": "sourceTrackBy"; "required": false; }; "targetTrackBy": { "alias": "targetTrackBy"; "required": false; }; "showSourceFilter": { "alias": "showSourceFilter"; "required": false; }; "showTargetFilter": { "alias": "showTargetFilter"; "required": false; }; "metaKeySelection": { "alias": "metaKeySelection"; "required": false; }; "dragdrop": { "alias": "dragdrop"; "required": false; }; "style": { "alias": "style"; "required": false; }; "styleClass": { "alias": "styleClass"; "required": false; }; "sourceStyle": { "alias": "sourceStyle"; "required": false; }; "targetStyle": { "alias": "targetStyle"; "required": false; }; "showSourceControls": { "alias": "showSourceControls"; "required": false; }; "showTargetControls": { "alias": "showTargetControls"; "required": false; }; "sourceFilterPlaceholder": { "alias": "sourceFilterPlaceholder"; "required": false; }; "targetFilterPlaceholder": { "alias": "targetFilterPlaceholder"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "ariaSourceFilterLabel": { "alias": "ariaSourceFilterLabel"; "required": false; }; "ariaTargetFilterLabel": { "alias": "ariaTargetFilterLabel"; "required": false; }; "filterMatchMode": { "alias": "filterMatchMode"; "required": false; }; "stripedRows": { "alias": "stripedRows"; "required": false; }; "keepSelection": { "alias": "keepSelection"; "required": false; }; "breakpoint": { "alias": "breakpoint"; "required": false; }; }, { "onMoveToSource": "onMoveToSource"; "onMoveAllToSource": "onMoveAllToSource"; "onMoveAllToTarget": "onMoveAllToTarget"; "onMoveToTarget": "onMoveToTarget"; "onSourceReorder": "onSourceReorder"; "onTargetReorder": "onTargetReorder"; "onSourceSelect": "onSourceSelect"; "onTargetSelect": "onTargetSelect"; "onSourceFilter": "onSourceFilter"; "onTargetFilter": "onTargetFilter"; }, ["templates"], never, false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<PickList, "p-pickList", never, { "source": { "alias": "source"; "required": false; }; "target": { "alias": "target"; "required": false; }; "sourceHeader": { "alias": "sourceHeader"; "required": false; }; "tabindex": { "alias": "tabindex"; "required": false; }; "rightButtonAriaLabel": { "alias": "rightButtonAriaLabel"; "required": false; }; "leftButtonAriaLabel": { "alias": "leftButtonAriaLabel"; "required": false; }; "allRightButtonAriaLabel": { "alias": "allRightButtonAriaLabel"; "required": false; }; "allLeftButtonAriaLabel": { "alias": "allLeftButtonAriaLabel"; "required": false; }; "upButtonAriaLabel": { "alias": "upButtonAriaLabel"; "required": false; }; "downButtonAriaLabel": { "alias": "downButtonAriaLabel"; "required": false; }; "topButtonAriaLabel": { "alias": "topButtonAriaLabel"; "required": false; }; "bottomButtonAriaLabel": { "alias": "bottomButtonAriaLabel"; "required": false; }; "targetHeader": { "alias": "targetHeader"; "required": false; }; "responsive": { "alias": "responsive"; "required": false; }; "filterBy": { "alias": "filterBy"; "required": false; }; "filterLocale": { "alias": "filterLocale"; "required": false; }; "trackBy": { "alias": "trackBy"; "required": false; }; "sourceTrackBy": { "alias": "sourceTrackBy"; "required": false; }; "targetTrackBy": { "alias": "targetTrackBy"; "required": false; }; "showSourceFilter": { "alias": "showSourceFilter"; "required": false; }; "showTargetFilter": { "alias": "showTargetFilter"; "required": false; }; "metaKeySelection": { "alias": "metaKeySelection"; "required": false; }; "dragdrop": { "alias": "dragdrop"; "required": false; }; "style": { "alias": "style"; "required": false; }; "styleClass": { "alias": "styleClass"; "required": false; }; "sourceStyle": { "alias": "sourceStyle"; "required": false; }; "targetStyle": { "alias": "targetStyle"; "required": false; }; "showSourceControls": { "alias": "showSourceControls"; "required": false; }; "showTargetControls": { "alias": "showTargetControls"; "required": false; }; "sourceFilterPlaceholder": { "alias": "sourceFilterPlaceholder"; "required": false; }; "targetFilterPlaceholder": { "alias": "targetFilterPlaceholder"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "ariaSourceFilterLabel": { "alias": "ariaSourceFilterLabel"; "required": false; }; "ariaTargetFilterLabel": { "alias": "ariaTargetFilterLabel"; "required": false; }; "filterMatchMode": { "alias": "filterMatchMode"; "required": false; }; "stripedRows": { "alias": "stripedRows"; "required": false; }; "keepSelection": { "alias": "keepSelection"; "required": false; }; "breakpoint": { "alias": "breakpoint"; "required": false; }; }, { "onMoveToSource": "onMoveToSource"; "onMoveAllToSource": "onMoveAllToSource"; "onMoveAllToTarget": "onMoveAllToTarget"; "onMoveToTarget": "onMoveToTarget"; "onSourceReorder": "onSourceReorder"; "onTargetReorder": "onTargetReorder"; "onSourceSelect": "onSourceSelect"; "onTargetSelect": "onTargetSelect"; "onSourceFilter": "onSourceFilter"; "onTargetFilter": "onTargetFilter"; }, ["templates"], never, false, never>;
 }
 export declare class PickListModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<PickListModule, never>;

package/resources/components/messages/messages.css

@@ -8,6 +8,7 @@
         display: flex;
         align-items: center;
         justify-content: center;
+        flex: none;
     }
 
     .p-message-close.p-link {

package/resources/components/toast/toast.css

@@ -62,6 +62,7 @@
         justify-content: center;
         overflow: hidden;
         position: relative;
+        flex: none;
     }
 
     .p-toast-icon-close.p-link {

package/resources/components/tristatecheckbox/tristatecheckbox.css

@@ -0,0 +1,5 @@
+@layer primeng {
+    .p-tristatecheckbox-label {
+        cursor: pointer;
+    }
+}

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

@@ -455,6 +455,13 @@
     border-color: #ef9a9a;
   }
 
+  .p-calendar:not(.p-calendar-disabled).p-focus > .p-inputtext {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #93cbf9;
+    border-color: #64B5F6;
+  }
+
   .p-datepicker {
     padding: 0.5rem;
     background: #1e1e1e;
@@ -3219,6 +3226,7 @@
     padding: 0.5rem 0;
     border-bottom-right-radius: 3px;
     border-bottom-left-radius: 3px;
+    outline: 0 none;
   }
   .p-orderlist .p-orderlist-list .p-orderlist-item {
     padding: 0.5rem 1rem;
@@ -3226,17 +3234,23 @@
     border: 0 none;
     color: rgba(255, 255, 255, 0.87);
     background: transparent;
-    transition: box-shadow 0.2s;
+    transition: transform 0.2s, box-shadow 0.2s;
   }
-  .p-orderlist .p-orderlist-list .p-orderlist-item:focus {
-    outline: 0 none;
-    outline-offset: 0;
-    box-shadow: inset 0 0 0 0.15rem #93cbf9;
+  .p-orderlist .p-orderlist-list .p-orderlist-item:not(.p-highlight):hover {
+    background: rgba(255, 255, 255, 0.03);
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-orderlist .p-orderlist-list .p-orderlist-item.p-focus {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(255, 255, 255, 0.09);
   }
   .p-orderlist .p-orderlist-list .p-orderlist-item.p-highlight {
     color: rgba(255, 255, 255, 0.87);
     background: rgba(100, 181, 246, 0.16);
   }
+  .p-orderlist .p-orderlist-list .p-orderlist-item.p-highlight.p-focus {
+    background: rgba(100, 181, 246, 0.24);
+  }
   .p-orderlist .p-orderlist-list .p-orderlist-empty-message {
     padding: 0.5rem 1rem;
     color: rgba(255, 255, 255, 0.87);
@@ -3420,6 +3434,7 @@
     padding: 0.5rem 0;
     border-bottom-right-radius: 3px;
     border-bottom-left-radius: 3px;
+    outline: 0 none;
   }
   .p-picklist .p-picklist-list .p-picklist-item {
     padding: 0.5rem 1rem;
@@ -3427,17 +3442,23 @@
     border: 0 none;
     color: rgba(255, 255, 255, 0.87);
     background: transparent;
-    transition: box-shadow 0.2s;
+    transition: transform 0.2s, box-shadow 0.2s;
   }
-  .p-picklist .p-picklist-list .p-picklist-item:focus {
-    outline: 0 none;
-    outline-offset: 0;
-    box-shadow: inset 0 0 0 0.15rem #93cbf9;
+  .p-picklist .p-picklist-list .p-picklist-item:not(.p-highlight):hover {
+    background: rgba(255, 255, 255, 0.03);
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-picklist .p-picklist-list .p-picklist-item.p-focus {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(255, 255, 255, 0.09);
   }
   .p-picklist .p-picklist-list .p-picklist-item.p-highlight {
     color: rgba(255, 255, 255, 0.87);
     background: rgba(100, 181, 246, 0.16);
   }
+  .p-picklist .p-picklist-list .p-picklist-item.p-highlight.p-focus {
+    background: rgba(100, 181, 246, 0.24);
+  }
   .p-picklist .p-picklist-list .p-picklist-empty-message {
     padding: 0.5rem 1rem;
     color: rgba(255, 255, 255, 0.87);
@@ -3496,6 +3517,12 @@
   }
   .p-tree .p-tree-container .p-treenode {
     padding: 0.143rem;
+    outline: 0 none;
+  }
+  .p-tree .p-tree-container .p-treenode:focus > .p-treenode-content {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: inset 0 0 0 0.15rem #93cbf9;
   }
   .p-tree .p-tree-container .p-treenode .p-treenode-content {
     border-radius: 3px;
@@ -3532,11 +3559,6 @@
   .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:focus {
-    outline: 0 none;
-    outline-offset: 0;
-    box-shadow: inset 0 0 0 0.15rem #93cbf9;
-  }
   .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);

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

@@ -455,6 +455,13 @@
     border-color: #ef9a9a;
   }
 
+  .p-calendar:not(.p-calendar-disabled).p-focus > .p-inputtext {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #a7d8a9;
+    border-color: #81C784;
+  }
+
   .p-datepicker {
     padding: 0.5rem;
     background: #1e1e1e;
@@ -3219,6 +3226,7 @@
     padding: 0.5rem 0;
     border-bottom-right-radius: 3px;
     border-bottom-left-radius: 3px;
+    outline: 0 none;
   }
   .p-orderlist .p-orderlist-list .p-orderlist-item {
     padding: 0.5rem 1rem;
@@ -3226,17 +3234,23 @@
     border: 0 none;
     color: rgba(255, 255, 255, 0.87);
     background: transparent;
-    transition: box-shadow 0.2s;
+    transition: transform 0.2s, box-shadow 0.2s;
   }
-  .p-orderlist .p-orderlist-list .p-orderlist-item:focus {
-    outline: 0 none;
-    outline-offset: 0;
-    box-shadow: inset 0 0 0 0.15rem #a7d8a9;
+  .p-orderlist .p-orderlist-list .p-orderlist-item:not(.p-highlight):hover {
+    background: rgba(255, 255, 255, 0.03);
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-orderlist .p-orderlist-list .p-orderlist-item.p-focus {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(255, 255, 255, 0.09);
   }
   .p-orderlist .p-orderlist-list .p-orderlist-item.p-highlight {
     color: rgba(255, 255, 255, 0.87);
     background: rgba(129, 199, 132, 0.16);
   }
+  .p-orderlist .p-orderlist-list .p-orderlist-item.p-highlight.p-focus {
+    background: rgba(129, 199, 132, 0.24);
+  }
   .p-orderlist .p-orderlist-list .p-orderlist-empty-message {
     padding: 0.5rem 1rem;
     color: rgba(255, 255, 255, 0.87);
@@ -3420,6 +3434,7 @@
     padding: 0.5rem 0;
     border-bottom-right-radius: 3px;
     border-bottom-left-radius: 3px;
+    outline: 0 none;
   }
   .p-picklist .p-picklist-list .p-picklist-item {
     padding: 0.5rem 1rem;
@@ -3427,17 +3442,23 @@
     border: 0 none;
     color: rgba(255, 255, 255, 0.87);
     background: transparent;
-    transition: box-shadow 0.2s;
+    transition: transform 0.2s, box-shadow 0.2s;
   }
-  .p-picklist .p-picklist-list .p-picklist-item:focus {
-    outline: 0 none;
-    outline-offset: 0;
-    box-shadow: inset 0 0 0 0.15rem #a7d8a9;
+  .p-picklist .p-picklist-list .p-picklist-item:not(.p-highlight):hover {
+    background: rgba(255, 255, 255, 0.03);
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-picklist .p-picklist-list .p-picklist-item.p-focus {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(255, 255, 255, 0.09);
   }
   .p-picklist .p-picklist-list .p-picklist-item.p-highlight {
     color: rgba(255, 255, 255, 0.87);
     background: rgba(129, 199, 132, 0.16);
   }
+  .p-picklist .p-picklist-list .p-picklist-item.p-highlight.p-focus {
+    background: rgba(129, 199, 132, 0.24);
+  }
   .p-picklist .p-picklist-list .p-picklist-empty-message {
     padding: 0.5rem 1rem;
     color: rgba(255, 255, 255, 0.87);
@@ -3496,6 +3517,12 @@
   }
   .p-tree .p-tree-container .p-treenode {
     padding: 0.143rem;
+    outline: 0 none;
+  }
+  .p-tree .p-tree-container .p-treenode:focus > .p-treenode-content {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: inset 0 0 0 0.15rem #a7d8a9;
   }
   .p-tree .p-tree-container .p-treenode .p-treenode-content {
     border-radius: 3px;
@@ -3532,11 +3559,6 @@
   .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:focus {
-    outline: 0 none;
-    outline-offset: 0;
-    box-shadow: inset 0 0 0 0.15rem #a7d8a9;
-  }
   .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);

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

@@ -455,6 +455,13 @@
     border-color: #ef9a9a;
   }
 
+  .p-calendar:not(.p-calendar-disabled).p-focus > .p-inputtext {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #ffe284;
+    border-color: #FFD54F;
+  }
+
   .p-datepicker {
     padding: 0.5rem;
     background: #1e1e1e;
@@ -3219,6 +3226,7 @@
     padding: 0.5rem 0;
     border-bottom-right-radius: 3px;
     border-bottom-left-radius: 3px;
+    outline: 0 none;
   }
   .p-orderlist .p-orderlist-list .p-orderlist-item {
     padding: 0.5rem 1rem;
@@ -3226,17 +3234,23 @@
     border: 0 none;
     color: rgba(255, 255, 255, 0.87);
     background: transparent;
-    transition: box-shadow 0.2s;
+    transition: transform 0.2s, box-shadow 0.2s;
   }
-  .p-orderlist .p-orderlist-list .p-orderlist-item:focus {
-    outline: 0 none;
-    outline-offset: 0;
-    box-shadow: inset 0 0 0 0.15rem #ffe284;
+  .p-orderlist .p-orderlist-list .p-orderlist-item:not(.p-highlight):hover {
+    background: rgba(255, 255, 255, 0.03);
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-orderlist .p-orderlist-list .p-orderlist-item.p-focus {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(255, 255, 255, 0.09);
   }
   .p-orderlist .p-orderlist-list .p-orderlist-item.p-highlight {
     color: rgba(255, 255, 255, 0.87);
     background: rgba(255, 213, 79, 0.16);
   }
+  .p-orderlist .p-orderlist-list .p-orderlist-item.p-highlight.p-focus {
+    background: rgba(255, 213, 79, 0.24);
+  }
   .p-orderlist .p-orderlist-list .p-orderlist-empty-message {
     padding: 0.5rem 1rem;
     color: rgba(255, 255, 255, 0.87);
@@ -3420,6 +3434,7 @@
     padding: 0.5rem 0;
     border-bottom-right-radius: 3px;
     border-bottom-left-radius: 3px;
+    outline: 0 none;
   }
   .p-picklist .p-picklist-list .p-picklist-item {
     padding: 0.5rem 1rem;
@@ -3427,17 +3442,23 @@
     border: 0 none;
     color: rgba(255, 255, 255, 0.87);
     background: transparent;
-    transition: box-shadow 0.2s;
+    transition: transform 0.2s, box-shadow 0.2s;
   }
-  .p-picklist .p-picklist-list .p-picklist-item:focus {
-    outline: 0 none;
-    outline-offset: 0;
-    box-shadow: inset 0 0 0 0.15rem #ffe284;
+  .p-picklist .p-picklist-list .p-picklist-item:not(.p-highlight):hover {
+    background: rgba(255, 255, 255, 0.03);
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-picklist .p-picklist-list .p-picklist-item.p-focus {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(255, 255, 255, 0.09);
   }
   .p-picklist .p-picklist-list .p-picklist-item.p-highlight {
     color: rgba(255, 255, 255, 0.87);
     background: rgba(255, 213, 79, 0.16);
   }
+  .p-picklist .p-picklist-list .p-picklist-item.p-highlight.p-focus {
+    background: rgba(255, 213, 79, 0.24);
+  }
   .p-picklist .p-picklist-list .p-picklist-empty-message {
     padding: 0.5rem 1rem;
     color: rgba(255, 255, 255, 0.87);
@@ -3496,6 +3517,12 @@
   }
   .p-tree .p-tree-container .p-treenode {
     padding: 0.143rem;
+    outline: 0 none;
+  }
+  .p-tree .p-tree-container .p-treenode:focus > .p-treenode-content {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: inset 0 0 0 0.15rem #ffe284;
   }
   .p-tree .p-tree-container .p-treenode .p-treenode-content {
     border-radius: 3px;
@@ -3532,11 +3559,6 @@
   .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:focus {
-    outline: 0 none;
-    outline-offset: 0;
-    box-shadow: inset 0 0 0 0.15rem #ffe284;
-  }
   .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight {
     background: rgba(255, 213, 79, 0.16);
     color: rgba(255, 255, 255, 0.87);

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

@@ -455,6 +455,13 @@
     border-color: #ef9a9a;
   }
 
+  .p-calendar:not(.p-calendar-disabled).p-focus > .p-inputtext {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #cf95d9;
+    border-color: #BA68C8;
+  }
+
   .p-datepicker {
     padding: 0.5rem;
     background: #1e1e1e;
@@ -3219,6 +3226,7 @@
     padding: 0.5rem 0;
     border-bottom-right-radius: 3px;
     border-bottom-left-radius: 3px;
+    outline: 0 none;
   }
   .p-orderlist .p-orderlist-list .p-orderlist-item {
     padding: 0.5rem 1rem;
@@ -3226,17 +3234,23 @@
     border: 0 none;
     color: rgba(255, 255, 255, 0.87);
     background: transparent;
-    transition: box-shadow 0.2s;
+    transition: transform 0.2s, box-shadow 0.2s;
   }
-  .p-orderlist .p-orderlist-list .p-orderlist-item:focus {
-    outline: 0 none;
-    outline-offset: 0;
-    box-shadow: inset 0 0 0 0.15rem #cf95d9;
+  .p-orderlist .p-orderlist-list .p-orderlist-item:not(.p-highlight):hover {
+    background: rgba(255, 255, 255, 0.03);
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-orderlist .p-orderlist-list .p-orderlist-item.p-focus {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(255, 255, 255, 0.09);
   }
   .p-orderlist .p-orderlist-list .p-orderlist-item.p-highlight {
     color: rgba(255, 255, 255, 0.87);
     background: rgba(186, 104, 200, 0.16);
   }
+  .p-orderlist .p-orderlist-list .p-orderlist-item.p-highlight.p-focus {
+    background: rgba(186, 104, 200, 0.24);
+  }
   .p-orderlist .p-orderlist-list .p-orderlist-empty-message {
     padding: 0.5rem 1rem;
     color: rgba(255, 255, 255, 0.87);
@@ -3420,6 +3434,7 @@
     padding: 0.5rem 0;
     border-bottom-right-radius: 3px;
     border-bottom-left-radius: 3px;
+    outline: 0 none;
   }
   .p-picklist .p-picklist-list .p-picklist-item {
     padding: 0.5rem 1rem;
@@ -3427,17 +3442,23 @@
     border: 0 none;
     color: rgba(255, 255, 255, 0.87);
     background: transparent;
-    transition: box-shadow 0.2s;
+    transition: transform 0.2s, box-shadow 0.2s;
   }
-  .p-picklist .p-picklist-list .p-picklist-item:focus {
-    outline: 0 none;
-    outline-offset: 0;
-    box-shadow: inset 0 0 0 0.15rem #cf95d9;
+  .p-picklist .p-picklist-list .p-picklist-item:not(.p-highlight):hover {
+    background: rgba(255, 255, 255, 0.03);
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-picklist .p-picklist-list .p-picklist-item.p-focus {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(255, 255, 255, 0.09);
   }
   .p-picklist .p-picklist-list .p-picklist-item.p-highlight {
     color: rgba(255, 255, 255, 0.87);
     background: rgba(186, 104, 200, 0.16);
   }
+  .p-picklist .p-picklist-list .p-picklist-item.p-highlight.p-focus {
+    background: rgba(186, 104, 200, 0.24);
+  }
   .p-picklist .p-picklist-list .p-picklist-empty-message {
     padding: 0.5rem 1rem;
     color: rgba(255, 255, 255, 0.87);
@@ -3496,6 +3517,12 @@
   }
   .p-tree .p-tree-container .p-treenode {
     padding: 0.143rem;
+    outline: 0 none;
+  }
+  .p-tree .p-tree-container .p-treenode:focus > .p-treenode-content {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: inset 0 0 0 0.15rem #cf95d9;
   }
   .p-tree .p-tree-container .p-treenode .p-treenode-content {
     border-radius: 3px;
@@ -3532,11 +3559,6 @@
   .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:focus {
-    outline: 0 none;
-    outline-offset: 0;
-    box-shadow: inset 0 0 0 0.15rem #cf95d9;
-  }
   .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight {
     background: rgba(186, 104, 200, 0.16);
     color: rgba(255, 255, 255, 0.87);

package/resources/themes/bootstrap4-dark-blue/theme.css

@@ -455,6 +455,13 @@
     border-color: #f19ea6;
   }
 
+  .p-calendar:not(.p-calendar-disabled).p-focus > .p-inputtext {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #e3f3fe;
+    border-color: #8dd0ff;
+  }
+
   .p-datepicker {
     padding: 0;
     background: #2a323d;
@@ -3231,6 +3238,7 @@
     padding: 0.5rem 0;
     border-bottom-right-radius: 4px;
     border-bottom-left-radius: 4px;
+    outline: 0 none;
   }
   .p-orderlist .p-orderlist-list .p-orderlist-item {
     padding: 0.5rem 1.5rem;
@@ -3238,17 +3246,23 @@
     border: 0 none;
     color: rgba(255, 255, 255, 0.87);
     background: transparent;
-    transition: box-shadow 0.15s;
+    transition: transform 0.15s, box-shadow 0.15s;
   }
-  .p-orderlist .p-orderlist-list .p-orderlist-item:focus {
-    outline: 0 none;
-    outline-offset: 0;
-    box-shadow: inset 0 0 0 0.15rem #e3f3fe;
+  .p-orderlist .p-orderlist-list .p-orderlist-item:not(.p-highlight):hover {
+    background: rgba(255, 255, 255, 0.04);
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-orderlist .p-orderlist-list .p-orderlist-item.p-focus {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(255, 255, 255, 0.09);
   }
   .p-orderlist .p-orderlist-list .p-orderlist-item.p-highlight {
     color: #151515;
     background: #8dd0ff;
   }
+  .p-orderlist .p-orderlist-list .p-orderlist-item.p-highlight.p-focus {
+    background: #64bfff;
+  }
   .p-orderlist .p-orderlist-list .p-orderlist-empty-message {
     padding: 0.5rem 1.5rem;
     color: rgba(255, 255, 255, 0.87);
@@ -3432,6 +3446,7 @@
     padding: 0.5rem 0;
     border-bottom-right-radius: 4px;
     border-bottom-left-radius: 4px;
+    outline: 0 none;
   }
   .p-picklist .p-picklist-list .p-picklist-item {
     padding: 0.5rem 1.5rem;
@@ -3439,17 +3454,23 @@
     border: 0 none;
     color: rgba(255, 255, 255, 0.87);
     background: transparent;
-    transition: box-shadow 0.15s;
+    transition: transform 0.15s, box-shadow 0.15s;
   }
-  .p-picklist .p-picklist-list .p-picklist-item:focus {
-    outline: 0 none;
-    outline-offset: 0;
-    box-shadow: inset 0 0 0 0.15rem #e3f3fe;
+  .p-picklist .p-picklist-list .p-picklist-item:not(.p-highlight):hover {
+    background: rgba(255, 255, 255, 0.04);
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-picklist .p-picklist-list .p-picklist-item.p-focus {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(255, 255, 255, 0.09);
   }
   .p-picklist .p-picklist-list .p-picklist-item.p-highlight {
     color: #151515;
     background: #8dd0ff;
   }
+  .p-picklist .p-picklist-list .p-picklist-item.p-highlight.p-focus {
+    background: #64bfff;
+  }
   .p-picklist .p-picklist-list .p-picklist-empty-message {
     padding: 0.5rem 1.5rem;
     color: rgba(255, 255, 255, 0.87);
@@ -3508,6 +3529,12 @@
   }
   .p-tree .p-tree-container .p-treenode {
     padding: 0.143rem;
+    outline: 0 none;
+  }
+  .p-tree .p-tree-container .p-treenode:focus > .p-treenode-content {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: inset 0 0 0 0.15rem #e3f3fe;
   }
   .p-tree .p-tree-container .p-treenode .p-treenode-content {
     border-radius: 4px;
@@ -3544,11 +3571,6 @@
   .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:focus {
-    outline: 0 none;
-    outline-offset: 0;
-    box-shadow: inset 0 0 0 0.15rem #e3f3fe;
-  }
   .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight {
     background: #8dd0ff;
     color: #151515;