primeng 12.2.0-rc.1 → 12.2.3

package/inputtext/inputtext.d.ts

@@ -1,16 +1,18 @@
-import { ElementRef, DoCheck } from '@angular/core';
+import { ElementRef, DoCheck, ChangeDetectorRef, AfterViewInit } from '@angular/core';
 import { NgModel } from '@angular/forms';
 import * as i0 from "@angular/core";
 import * as i1 from "@angular/common";
-export declare class InputText implements DoCheck {
+export declare class InputText implements DoCheck, AfterViewInit {
     el: ElementRef;
     ngModel: NgModel;
+    private cd;
     filled: boolean;
-    constructor(el: ElementRef, ngModel: NgModel);
+    constructor(el: ElementRef, ngModel: NgModel, cd: ChangeDetectorRef);
+    ngAfterViewInit(): void;
     ngDoCheck(): void;
     onInput(e: any): void;
     updateFilledState(): void;
-    static ɵfac: i0.ɵɵFactoryDeclaration<InputText, [null, { optional: true; }]>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<InputText, [null, { optional: true; }, null]>;
     static ɵdir: i0.ɵɵDirectiveDeclaration<InputText, "[pInputText]", never, {}, {}, never>;
 }
 export declare class InputTextModule {

package/menu/menu.d.ts

@@ -10,6 +10,9 @@ export declare class MenuItemContent {
     item: MenuItem;
     menu: Menu;
     constructor(menu: any);
+    onItemKeyDown(event: any): void;
+    findNextItem(item: any): any;
+    findPrevItem(item: any): any;
     static ɵfac: i0.ɵɵFactoryDeclaration<MenuItemContent, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<MenuItemContent, "[pMenuItemContent]", never, { "item": "pMenuItemContent"; }, {}, never, never>;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "primeng",
-  "version": "12.2.0-rc.1",
+  "version": "12.2.3",
   "repository": {
     "type": "git",
     "url": "https://github.com/primefaces/primeng"
@@ -18,7 +18,7 @@
     "@angular/core": "^7.0.0 || ^8.0.0 || ^9.0.0 || ^10.0.0 || ^11.0.0 || ^12.0.0",
     "@angular/common": "^7.0.0 || ^8.0.0 || ^9.0.0 || ^10.0.0 || ^11.0.0 || ^12.0.0",
     "@angular/forms": "^7.0.0 || ^8.0.0 || ^9.0.0 || ^10.0.0 || ^11.0.0 || ^12.0.0",
-    "rxjs": "^6.0.0",
+    "rxjs": "^6.0.0 || ^7.0.0",
     "zone.js": "^0.10.2 || ^0.11.0"
   },
   "main": "bundles/primeng.umd.js",

package/panelmenu/panelmenu.d.ts

@@ -12,11 +12,13 @@ export declare class BasePanelMenuItem {
 export declare class PanelMenuSub extends BasePanelMenuItem {
     item: MenuItem;
     expanded: boolean;
+    parentExpanded: boolean;
     transitionOptions: string;
     root: boolean;
     constructor(ref: ChangeDetectorRef);
+    onItemKeyDown(event: any): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<PanelMenuSub, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<PanelMenuSub, "p-panelMenuSub", never, { "item": "item"; "expanded": "expanded"; "transitionOptions": "transitionOptions"; "root": "root"; }, {}, never, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<PanelMenuSub, "p-panelMenuSub", never, { "item": "item"; "expanded": "expanded"; "parentExpanded": "parentExpanded"; "transitionOptions": "transitionOptions"; "root": "root"; }, {}, never, never>;
 }
 export declare class PanelMenu extends BasePanelMenuItem {
     model: MenuItem[];
@@ -29,6 +31,7 @@ export declare class PanelMenu extends BasePanelMenuItem {
     collapseAll(): void;
     handleClick(event: any, item: any): void;
     onToggleDone(): void;
+    onItemKeyDown(event: any): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<PanelMenu, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<PanelMenu, "p-panelMenu", never, { "model": "model"; "style": "style"; "styleClass": "styleClass"; "multiple": "multiple"; "transitionOptions": "transitionOptions"; }, {}, never, never>;
 }

package/password/password.d.ts

@@ -1,4 +1,4 @@
-import { ElementRef, OnDestroy, DoCheck, NgZone, OnInit, QueryList, TemplateRef, AfterContentInit, ChangeDetectorRef } from '@angular/core';
+import { ElementRef, OnDestroy, DoCheck, NgZone, OnInit, QueryList, TemplateRef, AfterContentInit, ChangeDetectorRef, EventEmitter } from '@angular/core';
 import { OverlayService, PrimeNGConfig } from 'primeng/api';
 import { Subscription } from 'rxjs';
 import * as i0 from "@angular/core";
@@ -67,6 +67,8 @@ export declare class Password implements AfterContentInit, OnInit {
     hideTransitionOptions: string;
     placeholder: string;
     input: ElementRef;
+    onFocus: EventEmitter<any>;
+    onBlur: EventEmitter<any>;
     contentTemplate: TemplateRef<any>;
     footerTemplate: TemplateRef<any>;
     headerTemplate: TemplateRef<any>;
@@ -94,8 +96,8 @@ export declare class Password implements AfterContentInit, OnInit {
     appendContainer(): void;
     alignOverlay(): void;
     onInput(event: any): void;
-    onFocus(): void;
-    onBlur(): void;
+    onInputFocus(event: Event): void;
+    onInputBlur(event: Event): void;
     onKeyUp(event: any): void;
     updateUI(value: any): void;
     onMaskToggle(): void;
@@ -130,7 +132,7 @@ export declare class Password implements AfterContentInit, OnInit {
     getTranslation(option: string): any;
     ngOnDestroy(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<Password, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<Password, "p-password", never, { "disabled": "disabled"; "promptLabel": "promptLabel"; "mediumRegex": "mediumRegex"; "strongRegex": "strongRegex"; "weakLabel": "weakLabel"; "mediumLabel": "mediumLabel"; "strongLabel": "strongLabel"; "inputId": "inputId"; "feedback": "feedback"; "appendTo": "appendTo"; "toggleMask": "toggleMask"; "inputStyleClass": "inputStyleClass"; "styleClass": "styleClass"; "style": "style"; "inputStyle": "inputStyle"; "showTransitionOptions": "showTransitionOptions"; "hideTransitionOptions": "hideTransitionOptions"; "placeholder": "placeholder"; }, {}, ["templates"], never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<Password, "p-password", never, { "disabled": "disabled"; "promptLabel": "promptLabel"; "mediumRegex": "mediumRegex"; "strongRegex": "strongRegex"; "weakLabel": "weakLabel"; "mediumLabel": "mediumLabel"; "strongLabel": "strongLabel"; "inputId": "inputId"; "feedback": "feedback"; "appendTo": "appendTo"; "toggleMask": "toggleMask"; "inputStyleClass": "inputStyleClass"; "styleClass": "styleClass"; "style": "style"; "inputStyle": "inputStyle"; "showTransitionOptions": "showTransitionOptions"; "hideTransitionOptions": "hideTransitionOptions"; "placeholder": "placeholder"; }, { "onFocus": "onFocus"; "onBlur": "onBlur"; }, ["templates"], never>;
 }
 export declare class PasswordModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<PasswordModule, never>;

package/resources/components/breadcrumb/breadcrumb.css

@@ -18,3 +18,7 @@
 .p-breadcrumb .p-menuitem-link {
     text-decoration: none;
 }
+
+.p-breadcrumb::-webkit-scrollbar {
+    display: none;
+}

package/resources/components/radiobutton/radiobutton.css

@@ -3,6 +3,7 @@
     cursor: pointer;
     user-select: none;
     vertical-align: bottom;
+    position: relative;
 }
 
 .p-radiobutton-box {
@@ -32,4 +33,4 @@ p-radiobutton {
 
 .p-radiobutton-label {
     line-height: 1;
-}
+}

package/resources/components/tabmenu/tabmenu.css

@@ -33,3 +33,7 @@
     display: none;
     z-index: 1;
 }
+
+.p-tabmenu::-webkit-scrollbar {
+    display: none;
+}

package/resources/primeng.css

@@ -399,6 +399,7 @@ p-checkbox {
     cursor: pointer;
     user-select: none;
     vertical-align: bottom;
+    position: relative;
 }
 
 .p-radiobutton-box {
@@ -429,6 +430,7 @@ p-radiobutton {
 .p-radiobutton-label {
     line-height: 1;
 }
+
 .p-ripple {
     overflow: hidden;
     position: relative;

package/resources/primeng.min.css

@@ -1 +1 @@
-.p-component,.p-component *{box-sizing:border-box}.p-hidden{display:none}.p-hidden-space{visibility:hidden}.p-hidden-accessible{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}.p-hidden-accessible input,.p-hidden-accessible select{transform:scale(0)}.p-reset{margin:0;padding:0;border:0;outline:0;text-decoration:none;font-size:100%;list-style:none}.p-disabled,.p-disabled *{cursor:default !important;pointer-events:none}.p-component-overlay{position:fixed;top:0;left:0;width:100%;height:100%}.p-overflow-hidden{overflow:hidden}.p-unselectable-text{user-select:none}.p-scrollbar-measure{width:100px;height:100px;overflow:scroll;position:absolute;top:-9999px}@-webkit-keyframes p-fadein{0%{opacity:0}100%{opacity:1}}@keyframes p-fadein{0%{opacity:0}100%{opacity:1}}input[type="button"],input[type="submit"],input[type="reset"],input[type="file"]::-webkit-file-upload-button,button{border-radius:0}.p-link{text-align:left;background-color:transparent;margin:0;padding:0;border:0;cursor:pointer;user-select:none}.p-sr-only{border:0;clip:rect(1px,1px,1px,1px);clip-path:inset(50%);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;word-wrap:normal !important}.p-connected-overlay{opacity:0;transform:scaleY(0.8);transition:transform .12s cubic-bezier(0,0,0.2,1),opacity .12s cubic-bezier(0,0,0.2,1)}.p-connected-overlay-visible{opacity:1;transform:scaleY(1)}.p-connected-overlay-hidden{opacity:0;transform:scaleY(1);transition:opacity .1s linear}.p-toggleable-content.ng-animating{overflow:hidden}.p-badge{display:inline-block;border-radius:10px;text-align:center;padding:0 .5rem}.p-overlay-badge{position:relative}.p-overlay-badge .p-badge{position:absolute;top:0;right:0;transform:translate(50%,-50%);transform-origin:100% 0;margin:0}.p-badge-dot{width:.5rem;min-width:.5rem;height:.5rem;border-radius:50%;padding:0}.p-badge-no-gutter{padding:0;border-radius:50%}.p-button{margin:0;display:inline-flex;cursor:pointer;user-select:none;align-items:center;vertical-align:bottom;text-align:center;overflow:hidden;position:relative}.p-button-label{flex:1 1 auto}.p-button-icon-right{order:1}.p-button:disabled{cursor:default}.p-button-icon-only{justify-content:center}.p-button-icon-only .p-button-label{visibility:hidden;width:0;flex:0 0 auto}.p-button-vertical{flex-direction:column}.p-button-icon-bottom{order:2}.p-buttonset .p-button{margin:0}.p-buttonset .p-button:not(:last-child){border-right:0 none}.p-buttonset .p-button:not(:first-of-type):not(:last-of-type){border-radius:0}.p-buttonset .p-button:first-of-type{border-top-right-radius:0;border-bottom-right-radius:0}.p-buttonset .p-button:last-of-type{border-top-left-radius:0;border-bottom-left-radius:0}.p-buttonset .p-button:focus{position:relative;z-index:1}.p-button-label{transition:all .2s}.p-checkbox{display:inline-flex;cursor:pointer;user-select:none;vertical-align:bottom;position:relative}.p-checkbox-disabled{cursor:default !important;pointer-events:none}.p-checkbox-box{display:flex;justify-content:center;align-items:center}p-checkbox{display:inline-flex;vertical-align:bottom;align-items:center}.p-checkbox-label{line-height:1}.p-colorpicker-panel .p-colorpicker-color{background:transparent url("./images/color.png") no-repeat left top}.p-colorpicker-panel .p-colorpicker-hue{background:transparent url("./images/hue.png") no-repeat left top}.p-inputtext{margin:0}.p-fluid .p-inputtext{width:100%}.p-inputgroup{display:flex;align-items:stretch;width:100%}.p-inputgroup-addon{display:flex;align-items:center;justify-content:center}.p-inputgroup .p-float-label{display:flex;align-items:stretch;width:100%}.p-inputgroup .p-inputtext,.p-fluid .p-inputgroup .p-inputtext,.p-inputgroup .p-inputwrapper,.p-inputgroup .p-inputwrapper>.p-component{flex:1 1 auto;width:1%}.p-float-label{display:block;position:relative}.p-float-label label{position:absolute;pointer-events:none;top:50%;margin-top:-.5rem;transition-property:all;transition-timing-function:ease;line-height:1}.p-float-label textarea ~ label{top:1rem}.p-float-label input:focus ~ label,.p-float-label input.p-filled ~ label,.p-float-label textarea:focus ~ label,.p-float-label textarea.p-filled ~ label,.p-float-label .p-inputwrapper-focus ~ label,.p-float-label .p-inputwrapper-filled ~ label{top:-.75rem;font-size:12px}.p-float-label .input:-webkit-autofill ~ label{top:-20px;font-size:12px}.p-input-icon-left,.p-input-icon-right{position:relative;display:inline-block}.p-input-icon-left>i,.p-input-icon-right>i{position:absolute;top:50%;margin-top:-.5rem}.p-fluid .p-input-icon-left,.p-fluid .p-input-icon-right{display:block;width:100%}.p-inputtextarea-resizable{overflow:hidden;resize:none}.p-fluid .p-inputtextarea{width:100%}.p-password{position:relative;display:inline-flex}.p-password-panel{position:absolute;top:0;left:0}.p-password .p-password-panel{min-width:100%}.p-password-meter{height:10px}.p-password-strength{height:100%;width:0;transition:width 1s ease-in-out}.p-fluid .p-password{display:flex}.p-radiobutton{display:inline-flex;cursor:pointer;user-select:none;vertical-align:bottom}.p-radiobutton-box{display:flex;justify-content:center;align-items:center}.p-radiobutton-icon{-webkit-backface-visibility:hidden;backface-visibility:hidden;transform:translateZ(0) scale(.1);border-radius:50%;visibility:hidden}.p-radiobutton-box.p-highlight .p-radiobutton-icon{transform:translateZ(0) scale(1.0,1.0);visibility:visible}p-radiobutton{display:inline-flex;vertical-align:bottom;align-items:center}.p-radiobutton-label{line-height:1}.p-ripple{overflow:hidden;position:relative}.p-ink{display:block;position:absolute;background:rgba(255,255,255,0.5);border-radius:100%;transform:scale(0)}.p-ink-active{animation:ripple .4s linear}.p-ripple-disabled .p-ink{display:none !important}@keyframes ripple{100%{opacity:0;transform:scale(2.5)}}.p-tooltip{position:absolute;display:none;padding:.25em .5rem;max-width:12.5rem}.p-tooltip.p-tooltip-right,.p-tooltip.p-tooltip-left{padding:0 .25rem}.p-tooltip.p-tooltip-top,.p-tooltip.p-tooltip-bottom{padding:.25em 0}.p-tooltip .p-tooltip-text{white-space:pre-line;word-break:break-word}.p-tooltip-arrow{position:absolute;width:0;height:0;border-color:transparent;border-style:solid}.p-tooltip-right .p-tooltip-arrow{top:50%;left:0;margin-top:-.25rem;border-width:.25em .25em .25em 0}.p-tooltip-left .p-tooltip-arrow{top:50%;right:0;margin-top:-.25rem;border-width:.25em 0 .25em .25rem}.p-tooltip.p-tooltip-top{padding:.25em 0}.p-tooltip-top .p-tooltip-arrow{bottom:0;left:50%;margin-left:-.25rem;border-width:.25em .25em 0}.p-tooltip-bottom .p-tooltip-arrow{top:0;left:50%;margin-left:-.25rem;border-width:0 .25em .25rem}
+.p-component,.p-component *{box-sizing:border-box}.p-hidden{display:none}.p-hidden-space{visibility:hidden}.p-hidden-accessible{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}.p-hidden-accessible input,.p-hidden-accessible select{transform:scale(0)}.p-reset{margin:0;padding:0;border:0;outline:0;text-decoration:none;font-size:100%;list-style:none}.p-disabled,.p-disabled *{cursor:default !important;pointer-events:none}.p-component-overlay{position:fixed;top:0;left:0;width:100%;height:100%}.p-overflow-hidden{overflow:hidden}.p-unselectable-text{user-select:none}.p-scrollbar-measure{width:100px;height:100px;overflow:scroll;position:absolute;top:-9999px}@-webkit-keyframes p-fadein{0%{opacity:0}100%{opacity:1}}@keyframes p-fadein{0%{opacity:0}100%{opacity:1}}input[type="button"],input[type="submit"],input[type="reset"],input[type="file"]::-webkit-file-upload-button,button{border-radius:0}.p-link{text-align:left;background-color:transparent;margin:0;padding:0;border:0;cursor:pointer;user-select:none}.p-sr-only{border:0;clip:rect(1px,1px,1px,1px);clip-path:inset(50%);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;word-wrap:normal !important}.p-connected-overlay{opacity:0;transform:scaleY(0.8);transition:transform .12s cubic-bezier(0,0,0.2,1),opacity .12s cubic-bezier(0,0,0.2,1)}.p-connected-overlay-visible{opacity:1;transform:scaleY(1)}.p-connected-overlay-hidden{opacity:0;transform:scaleY(1);transition:opacity .1s linear}.p-toggleable-content.ng-animating{overflow:hidden}.p-badge{display:inline-block;border-radius:10px;text-align:center;padding:0 .5rem}.p-overlay-badge{position:relative}.p-overlay-badge .p-badge{position:absolute;top:0;right:0;transform:translate(50%,-50%);transform-origin:100% 0;margin:0}.p-badge-dot{width:.5rem;min-width:.5rem;height:.5rem;border-radius:50%;padding:0}.p-badge-no-gutter{padding:0;border-radius:50%}.p-button{margin:0;display:inline-flex;cursor:pointer;user-select:none;align-items:center;vertical-align:bottom;text-align:center;overflow:hidden;position:relative}.p-button-label{flex:1 1 auto}.p-button-icon-right{order:1}.p-button:disabled{cursor:default}.p-button-icon-only{justify-content:center}.p-button-icon-only .p-button-label{visibility:hidden;width:0;flex:0 0 auto}.p-button-vertical{flex-direction:column}.p-button-icon-bottom{order:2}.p-buttonset .p-button{margin:0}.p-buttonset .p-button:not(:last-child){border-right:0 none}.p-buttonset .p-button:not(:first-of-type):not(:last-of-type){border-radius:0}.p-buttonset .p-button:first-of-type{border-top-right-radius:0;border-bottom-right-radius:0}.p-buttonset .p-button:last-of-type{border-top-left-radius:0;border-bottom-left-radius:0}.p-buttonset .p-button:focus{position:relative;z-index:1}.p-button-label{transition:all .2s}.p-checkbox{display:inline-flex;cursor:pointer;user-select:none;vertical-align:bottom;position:relative}.p-checkbox-disabled{cursor:default !important;pointer-events:none}.p-checkbox-box{display:flex;justify-content:center;align-items:center}p-checkbox{display:inline-flex;vertical-align:bottom;align-items:center}.p-checkbox-label{line-height:1}.p-colorpicker-panel .p-colorpicker-color{background:transparent url("./images/color.png") no-repeat left top}.p-colorpicker-panel .p-colorpicker-hue{background:transparent url("./images/hue.png") no-repeat left top}.p-inputtext{margin:0}.p-fluid .p-inputtext{width:100%}.p-inputgroup{display:flex;align-items:stretch;width:100%}.p-inputgroup-addon{display:flex;align-items:center;justify-content:center}.p-inputgroup .p-float-label{display:flex;align-items:stretch;width:100%}.p-inputgroup .p-inputtext,.p-fluid .p-inputgroup .p-inputtext,.p-inputgroup .p-inputwrapper,.p-inputgroup .p-inputwrapper>.p-component{flex:1 1 auto;width:1%}.p-float-label{display:block;position:relative}.p-float-label label{position:absolute;pointer-events:none;top:50%;margin-top:-.5rem;transition-property:all;transition-timing-function:ease;line-height:1}.p-float-label textarea ~ label{top:1rem}.p-float-label input:focus ~ label,.p-float-label input.p-filled ~ label,.p-float-label textarea:focus ~ label,.p-float-label textarea.p-filled ~ label,.p-float-label .p-inputwrapper-focus ~ label,.p-float-label .p-inputwrapper-filled ~ label{top:-.75rem;font-size:12px}.p-float-label .input:-webkit-autofill ~ label{top:-20px;font-size:12px}.p-input-icon-left,.p-input-icon-right{position:relative;display:inline-block}.p-input-icon-left>i,.p-input-icon-right>i{position:absolute;top:50%;margin-top:-.5rem}.p-fluid .p-input-icon-left,.p-fluid .p-input-icon-right{display:block;width:100%}.p-inputtextarea-resizable{overflow:hidden;resize:none}.p-fluid .p-inputtextarea{width:100%}.p-password{position:relative;display:inline-flex}.p-password-panel{position:absolute;top:0;left:0}.p-password .p-password-panel{min-width:100%}.p-password-meter{height:10px}.p-password-strength{height:100%;width:0;transition:width 1s ease-in-out}.p-fluid .p-password{display:flex}.p-radiobutton{display:inline-flex;cursor:pointer;user-select:none;vertical-align:bottom;position:relative}.p-radiobutton-box{display:flex;justify-content:center;align-items:center}.p-radiobutton-icon{-webkit-backface-visibility:hidden;backface-visibility:hidden;transform:translateZ(0) scale(.1);border-radius:50%;visibility:hidden}.p-radiobutton-box.p-highlight .p-radiobutton-icon{transform:translateZ(0) scale(1.0,1.0);visibility:visible}p-radiobutton{display:inline-flex;vertical-align:bottom;align-items:center}.p-radiobutton-label{line-height:1}.p-ripple{overflow:hidden;position:relative}.p-ink{display:block;position:absolute;background:rgba(255,255,255,0.5);border-radius:100%;transform:scale(0)}.p-ink-active{animation:ripple .4s linear}.p-ripple-disabled .p-ink{display:none !important}@keyframes ripple{100%{opacity:0;transform:scale(2.5)}}.p-tooltip{position:absolute;display:none;padding:.25em .5rem;max-width:12.5rem}.p-tooltip.p-tooltip-right,.p-tooltip.p-tooltip-left{padding:0 .25rem}.p-tooltip.p-tooltip-top,.p-tooltip.p-tooltip-bottom{padding:.25em 0}.p-tooltip .p-tooltip-text{white-space:pre-line;word-break:break-word}.p-tooltip-arrow{position:absolute;width:0;height:0;border-color:transparent;border-style:solid}.p-tooltip-right .p-tooltip-arrow{top:50%;left:0;margin-top:-.25rem;border-width:.25em .25em .25em 0}.p-tooltip-left .p-tooltip-arrow{top:50%;right:0;margin-top:-.25rem;border-width:.25em 0 .25em .25rem}.p-tooltip.p-tooltip-top{padding:.25em 0}.p-tooltip-top .p-tooltip-arrow{bottom:0;left:50%;margin-left:-.25rem;border-width:.25em .25em 0}.p-tooltip-bottom .p-tooltip-arrow{top:0;left:50%;margin-left:-.25rem;border-width:0 .25em .25rem}

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

@@ -41,6 +41,7 @@
   --surface-border:#383838;
   --surface-hover:rgba(255,255,255,.03);
   --maskbg: rgba(0, 0, 0, 0.4);
+  --focus-ring: 0 0 0 1px #93cbf9;
 }
 
 * {
@@ -1351,7 +1352,7 @@ p-multiselect.ng-dirty.ng-invalid > .p-multiselect {
   background-color: #383838;
 }
 
-.p-password.p-invalid.p-component > .p-inputtext {
+p-password.ng-invalid.ng-dirty > .p-password > .p-inputtext {
   border-color: #ef9a9a;
 }
 
@@ -1635,7 +1636,8 @@ p-togglebutton.ng-dirty.ng-invalid > .p-togglebutton.p-button {
   border-top-right-radius: 3px;
   border-bottom-right-radius: 3px;
 }
-.p-treeselect.p-invalid.p-component {
+
+p-treeselect.ng-invalid.ng-dirty > .p-treeselect {
   border-color: #ef9a9a;
 }
 

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

@@ -41,6 +41,7 @@
   --surface-border:#383838;
   --surface-hover:rgba(255,255,255,.03);
   --maskbg: rgba(0, 0, 0, 0.4);
+  --focus-ring: 0 0 0 1px #a7d8a9;
 }
 
 * {
@@ -1351,7 +1352,7 @@ p-multiselect.ng-dirty.ng-invalid > .p-multiselect {
   background-color: #383838;
 }
 
-.p-password.p-invalid.p-component > .p-inputtext {
+p-password.ng-invalid.ng-dirty > .p-password > .p-inputtext {
   border-color: #ef9a9a;
 }
 
@@ -1635,7 +1636,8 @@ p-togglebutton.ng-dirty.ng-invalid > .p-togglebutton.p-button {
   border-top-right-radius: 3px;
   border-bottom-right-radius: 3px;
 }
-.p-treeselect.p-invalid.p-component {
+
+p-treeselect.ng-invalid.ng-dirty > .p-treeselect {
   border-color: #ef9a9a;
 }
 

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

@@ -41,6 +41,7 @@
   --surface-border:#383838;
   --surface-hover:rgba(255,255,255,.03);
   --maskbg: rgba(0, 0, 0, 0.4);
+  --focus-ring: 0 0 0 1px #ffe284;
 }
 
 * {
@@ -1351,7 +1352,7 @@ p-multiselect.ng-dirty.ng-invalid > .p-multiselect {
   background-color: #383838;
 }
 
-.p-password.p-invalid.p-component > .p-inputtext {
+p-password.ng-invalid.ng-dirty > .p-password > .p-inputtext {
   border-color: #ef9a9a;
 }
 
@@ -1635,7 +1636,8 @@ p-togglebutton.ng-dirty.ng-invalid > .p-togglebutton.p-button {
   border-top-right-radius: 3px;
   border-bottom-right-radius: 3px;
 }
-.p-treeselect.p-invalid.p-component {
+
+p-treeselect.ng-invalid.ng-dirty > .p-treeselect {
   border-color: #ef9a9a;
 }
 

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

@@ -41,6 +41,7 @@
   --surface-border:#383838;
   --surface-hover:rgba(255,255,255,.03);
   --maskbg: rgba(0, 0, 0, 0.4);
+  --focus-ring: 0 0 0 1px #cf95d9;
 }
 
 * {
@@ -1351,7 +1352,7 @@ p-multiselect.ng-dirty.ng-invalid > .p-multiselect {
   background-color: #383838;
 }
 
-.p-password.p-invalid.p-component > .p-inputtext {
+p-password.ng-invalid.ng-dirty > .p-password > .p-inputtext {
   border-color: #ef9a9a;
 }
 
@@ -1635,7 +1636,8 @@ p-togglebutton.ng-dirty.ng-invalid > .p-togglebutton.p-button {
   border-top-right-radius: 3px;
   border-bottom-right-radius: 3px;
 }
-.p-treeselect.p-invalid.p-component {
+
+p-treeselect.ng-invalid.ng-dirty > .p-treeselect {
   border-color: #ef9a9a;
 }
 

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

@@ -41,6 +41,7 @@
   --surface-border:#3f4b5b;
   --surface-hover:rgba(255,255,255,.04);
   --maskbg: rgba(0, 0, 0, 0.4);
+  --focus-ring: 0 0 0 1px #e3f3fe;
 }
 
 * {
@@ -1355,7 +1356,7 @@ p-multiselect.ng-dirty.ng-invalid > .p-multiselect {
   background-color: #3f4b5b;
 }
 
-.p-password.p-invalid.p-component > .p-inputtext {
+p-password.ng-invalid.ng-dirty > .p-password > .p-inputtext {
   border-color: #f19ea6;
 }
 
@@ -1647,7 +1648,8 @@ p-togglebutton.ng-dirty.ng-invalid > .p-togglebutton.p-button {
   border-top-right-radius: 4px;
   border-bottom-right-radius: 4px;
 }
-.p-treeselect.p-invalid.p-component {
+
+p-treeselect.ng-invalid.ng-dirty > .p-treeselect {
   border-color: #f19ea6;
 }
 

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

@@ -41,6 +41,7 @@
   --surface-border:#3f4b5b;
   --surface-hover:rgba(255,255,255,.04);
   --maskbg: rgba(0, 0, 0, 0.4);
+  --focus-ring: 0 0 0 1px #f0e6f5;
 }
 
 * {
@@ -1355,7 +1356,7 @@ p-multiselect.ng-dirty.ng-invalid > .p-multiselect {
   background-color: #3f4b5b;
 }
 
-.p-password.p-invalid.p-component > .p-inputtext {
+p-password.ng-invalid.ng-dirty > .p-password > .p-inputtext {
   border-color: #f19ea6;
 }
 
@@ -1647,7 +1648,8 @@ p-togglebutton.ng-dirty.ng-invalid > .p-togglebutton.p-button {
   border-top-right-radius: 4px;
   border-bottom-right-radius: 4px;
 }
-.p-treeselect.p-invalid.p-component {
+
+p-treeselect.ng-invalid.ng-dirty > .p-treeselect {
   border-color: #f19ea6;
 }
 

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

@@ -41,6 +41,7 @@
   --surface-border:#dee2e6;
   --surface-hover:#e9ecef;
   --maskbg: rgba(0, 0, 0, 0.4);
+  --focus-ring: 0 0 0 0.2rem rgba(38, 143, 255, 0.5);
 }
 
 * {
@@ -1355,7 +1356,7 @@ p-multiselect.ng-dirty.ng-invalid > .p-multiselect {
   background-color: #efefef;
 }
 
-.p-password.p-invalid.p-component > .p-inputtext {
+p-password.ng-invalid.ng-dirty > .p-password > .p-inputtext {
   border-color: #dc3545;
 }
 
@@ -1647,7 +1648,8 @@ p-togglebutton.ng-dirty.ng-invalid > .p-togglebutton.p-button {
   border-top-right-radius: 4px;
   border-bottom-right-radius: 4px;
 }
-.p-treeselect.p-invalid.p-component {
+
+p-treeselect.ng-invalid.ng-dirty > .p-treeselect {
   border-color: #dc3545;
 }
 

package/resources/themes/bootstrap4-light-purple/theme.css

@@ -41,6 +41,7 @@
   --surface-border:#dee2e6;
   --surface-hover:#e9ecef;
   --maskbg: rgba(0, 0, 0, 0.4);
+  --focus-ring: 0 0 0 0.2rem rgba(136, 60, 174, 0.5);
 }
 
 * {
@@ -1355,7 +1356,7 @@ p-multiselect.ng-dirty.ng-invalid > .p-multiselect {
   background-color: #efefef;
 }
 
-.p-password.p-invalid.p-component > .p-inputtext {
+p-password.ng-invalid.ng-dirty > .p-password > .p-inputtext {
   border-color: #dc3545;
 }
 
@@ -1647,7 +1648,8 @@ p-togglebutton.ng-dirty.ng-invalid > .p-togglebutton.p-button {
   border-top-right-radius: 4px;
   border-bottom-right-radius: 4px;
 }
-.p-treeselect.p-invalid.p-component {
+
+p-treeselect.ng-invalid.ng-dirty > .p-treeselect {
   border-color: #dc3545;
 }
 

package/resources/themes/fluent-light/theme.css

@@ -41,6 +41,7 @@
   --surface-border:#edebe9;
   --surface-hover:#f3f2f1;
   --maskbg: rgba(0, 0, 0, 0.4);
+  --focus-ring: inset 0 0 0 1px #605e5c;
 }
 
 * {
@@ -1351,7 +1352,7 @@ p-multiselect.ng-dirty.ng-invalid > .p-multiselect {
   background-color: #faf9f8;
 }
 
-.p-password.p-invalid.p-component > .p-inputtext {
+p-password.ng-invalid.ng-dirty > .p-password > .p-inputtext {
   border-color: #a4252c;
 }
 
@@ -1635,7 +1636,8 @@ p-togglebutton.ng-dirty.ng-invalid > .p-togglebutton.p-button {
   border-top-right-radius: 2px;
   border-bottom-right-radius: 2px;
 }
-.p-treeselect.p-invalid.p-component {
+
+p-treeselect.ng-invalid.ng-dirty > .p-treeselect {
   border-color: #a4252c;
 }
 

package/resources/themes/luna-amber/theme.css

@@ -41,6 +41,7 @@
   --surface-border:#4b4b4b;
   --surface-hover:#4c4c4c;
   --maskbg: rgba(0, 0, 0, 0.4);
+  --focus-ring: 0 0 0 0.1rem white;
 }
 
 * {
@@ -1355,7 +1356,7 @@ p-multiselect.ng-dirty.ng-invalid > .p-multiselect {
   background-color: #4b4b4b;
 }
 
-.p-password.p-invalid.p-component > .p-inputtext {
+p-password.ng-invalid.ng-dirty > .p-password > .p-inputtext {
   border-color: #e57373;
 }
 
@@ -1647,7 +1648,8 @@ p-togglebutton.ng-dirty.ng-invalid > .p-togglebutton.p-button {
   border-top-right-radius: 3px;
   border-bottom-right-radius: 3px;
 }
-.p-treeselect.p-invalid.p-component {
+
+p-treeselect.ng-invalid.ng-dirty > .p-treeselect {
   border-color: #e57373;
 }
 

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

@@ -41,6 +41,7 @@
   --surface-border:#4b4b4b;
   --surface-hover:#4c4c4c;
   --maskbg: rgba(0, 0, 0, 0.4);
+  --focus-ring: 0 0 0 0.1rem white;
 }
 
 * {
@@ -1355,7 +1356,7 @@ p-multiselect.ng-dirty.ng-invalid > .p-multiselect {
   background-color: #4b4b4b;
 }
 
-.p-password.p-invalid.p-component > .p-inputtext {
+p-password.ng-invalid.ng-dirty > .p-password > .p-inputtext {
   border-color: #e57373;
 }
 
@@ -1647,7 +1648,8 @@ p-togglebutton.ng-dirty.ng-invalid > .p-togglebutton.p-button {
   border-top-right-radius: 3px;
   border-bottom-right-radius: 3px;
 }
-.p-treeselect.p-invalid.p-component {
+
+p-treeselect.ng-invalid.ng-dirty > .p-treeselect {
   border-color: #e57373;
 }
 

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

@@ -41,6 +41,7 @@
   --surface-border:#4b4b4b;
   --surface-hover:#4c4c4c;
   --maskbg: rgba(0, 0, 0, 0.4);
+  --focus-ring: 0 0 0 0.1rem white;
 }
 
 * {
@@ -1355,7 +1356,7 @@ p-multiselect.ng-dirty.ng-invalid > .p-multiselect {
   background-color: #4b4b4b;
 }
 
-.p-password.p-invalid.p-component > .p-inputtext {
+p-password.ng-invalid.ng-dirty > .p-password > .p-inputtext {
   border-color: #e57373;
 }
 
@@ -1647,7 +1648,8 @@ p-togglebutton.ng-dirty.ng-invalid > .p-togglebutton.p-button {
   border-top-right-radius: 3px;
   border-bottom-right-radius: 3px;
 }
-.p-treeselect.p-invalid.p-component {
+
+p-treeselect.ng-invalid.ng-dirty > .p-treeselect {
   border-color: #e57373;
 }
 

package/resources/themes/luna-pink/theme.css

@@ -41,6 +41,7 @@
   --surface-border:#4b4b4b;
   --surface-hover:#4c4c4c;
   --maskbg: rgba(0, 0, 0, 0.4);
+  --focus-ring: 0 0 0 0.1rem white;
 }
 
 * {
@@ -1355,7 +1356,7 @@ p-multiselect.ng-dirty.ng-invalid > .p-multiselect {
   background-color: #4b4b4b;
 }
 
-.p-password.p-invalid.p-component > .p-inputtext {
+p-password.ng-invalid.ng-dirty > .p-password > .p-inputtext {
   border-color: #e57373;
 }
 
@@ -1647,7 +1648,8 @@ p-togglebutton.ng-dirty.ng-invalid > .p-togglebutton.p-button {
   border-top-right-radius: 3px;
   border-bottom-right-radius: 3px;
 }
-.p-treeselect.p-invalid.p-component {
+
+p-treeselect.ng-invalid.ng-dirty > .p-treeselect {
   border-color: #e57373;
 }