From 2605514bc3dda2a80291b9c5bcd6798ddb5a9e2b Mon Sep 17 00:00:00 2001 From: yigitfindikli Date: Fri, 29 Apr 2022 12:40:04 +0300 Subject: [PATCH] InputMask for #11471 --- src/app/components/inputmask/inputmask.css | 10 +++++++ src/app/components/inputmask/inputmask.ts | 28 +++++++++++++++---- .../components/inputmask/inputmaskdemo.html | 11 ++++++++ .../components/themes/arya-blue/theme.css | 8 ++++++ .../components/themes/arya-green/theme.css | 8 ++++++ .../components/themes/arya-orange/theme.css | 8 ++++++ .../components/themes/arya-purple/theme.css | 8 ++++++ .../themes/bootstrap4-dark-blue/theme.css | 8 ++++++ .../themes/bootstrap4-dark-purple/theme.css | 8 ++++++ .../themes/bootstrap4-light-blue/theme.css | 8 ++++++ .../themes/bootstrap4-light-purple/theme.css | 8 ++++++ .../components/themes/fluent-light/theme.css | 8 ++++++ .../themes/lara-dark-blue/theme.css | 8 ++++++ .../themes/lara-dark-indigo/theme.css | 8 ++++++ .../themes/lara-dark-purple/theme.css | 8 ++++++ .../themes/lara-dark-teal/theme.css | 8 ++++++ .../themes/lara-light-blue/theme.css | 8 ++++++ .../themes/lara-light-indigo/theme.css | 8 ++++++ .../themes/lara-light-purple/theme.css | 8 ++++++ .../themes/lara-light-teal/theme.css | 8 ++++++ .../components/themes/luna-amber/theme.css | 8 ++++++ .../components/themes/luna-blue/theme.css | 8 ++++++ .../components/themes/luna-green/theme.css | 8 ++++++ .../components/themes/luna-pink/theme.css | 8 ++++++ .../themes/md-dark-deeppurple/theme.css | 8 ++++++ .../themes/md-dark-indigo/theme.css | 8 ++++++ .../themes/md-light-deeppurple/theme.css | 8 ++++++ .../themes/md-light-indigo/theme.css | 8 ++++++ .../themes/mdc-dark-deeppurple/theme.css | 8 ++++++ .../themes/mdc-dark-indigo/theme.css | 8 ++++++ .../themes/mdc-light-deeppurple/theme.css | 8 ++++++ .../themes/mdc-light-indigo/theme.css | 8 ++++++ .../components/themes/nova-accent/theme.css | 8 ++++++ .../components/themes/nova-alt/theme.css | 8 ++++++ src/assets/components/themes/nova/theme.css | 8 ++++++ src/assets/components/themes/rhea/theme.css | 8 ++++++ .../components/themes/saga-blue/theme.css | 8 ++++++ .../components/themes/saga-green/theme.css | 8 ++++++ .../components/themes/saga-orange/theme.css | 8 ++++++ .../components/themes/saga-purple/theme.css | 8 ++++++ .../themes/tailwind-light/theme.css | 8 ++++++ .../components/themes/vela-blue/theme.css | 8 ++++++ .../components/themes/vela-green/theme.css | 8 ++++++ .../components/themes/vela-orange/theme.css | 8 ++++++ .../components/themes/vela-purple/theme.css | 8 ++++++ 45 files changed, 379 insertions(+), 6 deletions(-) create mode 100644 src/app/components/inputmask/inputmask.css diff --git a/src/app/components/inputmask/inputmask.css b/src/app/components/inputmask/inputmask.css new file mode 100644 index 00000000000..37de031a312 --- /dev/null +++ b/src/app/components/inputmask/inputmask.css @@ -0,0 +1,10 @@ +.p-inputmask-clear-icon { + position: absolute; + top: 50%; + margin-top: -.5rem; + cursor: pointer; +} + +.p-inputmask-clearable { + position: relative; +} \ No newline at end of file diff --git a/src/app/components/inputmask/inputmask.ts b/src/app/components/inputmask/inputmask.ts index 6d3bdbdb260..c48d29c5a79 100755 --- a/src/app/components/inputmask/inputmask.ts +++ b/src/app/components/inputmask/inputmask.ts @@ -39,18 +39,23 @@ export const INPUTMASK_VALUE_ACCESSOR: any = { @Component({ selector: 'p-inputMask', - template: ``, + template: ` + + + `, host: { 'class': 'p-element', '[class.p-inputwrapper-filled]': 'filled', - '[class.p-inputwrapper-focus]': 'focused' + '[class.p-inputwrapper-focus]': 'focused', + '[class.p-inputmask-clearable]': 'showClear && !disabled' }, providers: [INPUTMASK_VALUE_ACCESSOR], changeDetection: ChangeDetectionStrategy.OnPush, - encapsulation: ViewEncapsulation.None + encapsulation: ViewEncapsulation.None, + styleUrls: ['./inputmask.css'] }) export class InputMask implements OnInit,ControlValueAccessor { @@ -60,6 +65,8 @@ export class InputMask implements OnInit,ControlValueAccessor { @Input() autoClear: boolean = true; + @Input() showClear: boolean = true; + @Input() style: any; @Input() inputId: string; @@ -108,6 +115,8 @@ export class InputMask implements OnInit,ControlValueAccessor { @Output() onKeydown: EventEmitter = new EventEmitter(); + @Output() onClear: EventEmitter = new EventEmitter(); + value: any; _mask: string; @@ -647,6 +656,13 @@ export class InputMask implements OnInit,ControlValueAccessor { focus() { this.inputViewChild.nativeElement.focus(); } + + clear() { + this.inputViewChild.nativeElement.value = ''; + this.value = null; + this.onModelChange(this.value); + this.onClear.emit(); + } } @NgModule({ diff --git a/src/app/showcase/components/inputmask/inputmaskdemo.html b/src/app/showcase/components/inputmask/inputmaskdemo.html index 27bb78c04a5..14cc069ea5e 100755 --- a/src/app/showcase/components/inputmask/inputmaskdemo.html +++ b/src/app/showcase/components/inputmask/inputmaskdemo.html @@ -207,6 +207,12 @@
Properties
false When present, the input gets a focus automatically on load. + + showClear + boolean + false + When enabled, a clear icon is displayed to clear the value. + autocomplete string @@ -266,6 +272,11 @@
Events
- Callback to invoke on when the input field value is altered. + + onClear + - + Callback to invoke when inputmask clears the value. + onKeydown event: KeyboardEvent diff --git a/src/assets/components/themes/arya-blue/theme.css b/src/assets/components/themes/arya-blue/theme.css index 631d04729e6..cdcb093d376 100644 --- a/src/assets/components/themes/arya-blue/theme.css +++ b/src/assets/components/themes/arya-blue/theme.css @@ -1033,6 +1033,14 @@ p-inputmask.ng-dirty.ng-invalid > .p-inputtext { border-color: #ef9a9a; } +p-inputmask.p-inputmask-clearable .p-inputtext { + padding-right: 2rem; +} +p-inputmask.p-inputmask-clearable .p-inputmask-clear-icon { + color: rgba(255, 255, 255, 0.6); + right: 0.5rem; +} + p-inputnumber.ng-dirty.ng-invalid > .p-inputnumber > .p-inputtext { border-color: #ef9a9a; } diff --git a/src/assets/components/themes/arya-green/theme.css b/src/assets/components/themes/arya-green/theme.css index da3471656c2..836980d24b8 100644 --- a/src/assets/components/themes/arya-green/theme.css +++ b/src/assets/components/themes/arya-green/theme.css @@ -1033,6 +1033,14 @@ p-inputmask.ng-dirty.ng-invalid > .p-inputtext { border-color: #ef9a9a; } +p-inputmask.p-inputmask-clearable .p-inputtext { + padding-right: 2rem; +} +p-inputmask.p-inputmask-clearable .p-inputmask-clear-icon { + color: rgba(255, 255, 255, 0.6); + right: 0.5rem; +} + p-inputnumber.ng-dirty.ng-invalid > .p-inputnumber > .p-inputtext { border-color: #ef9a9a; } diff --git a/src/assets/components/themes/arya-orange/theme.css b/src/assets/components/themes/arya-orange/theme.css index 4cdb5948db2..b409c267ff4 100644 --- a/src/assets/components/themes/arya-orange/theme.css +++ b/src/assets/components/themes/arya-orange/theme.css @@ -1033,6 +1033,14 @@ p-inputmask.ng-dirty.ng-invalid > .p-inputtext { border-color: #ef9a9a; } +p-inputmask.p-inputmask-clearable .p-inputtext { + padding-right: 2rem; +} +p-inputmask.p-inputmask-clearable .p-inputmask-clear-icon { + color: rgba(255, 255, 255, 0.6); + right: 0.5rem; +} + p-inputnumber.ng-dirty.ng-invalid > .p-inputnumber > .p-inputtext { border-color: #ef9a9a; } diff --git a/src/assets/components/themes/arya-purple/theme.css b/src/assets/components/themes/arya-purple/theme.css index 24188c16558..c1cdccb99e6 100644 --- a/src/assets/components/themes/arya-purple/theme.css +++ b/src/assets/components/themes/arya-purple/theme.css @@ -1033,6 +1033,14 @@ p-inputmask.ng-dirty.ng-invalid > .p-inputtext { border-color: #ef9a9a; } +p-inputmask.p-inputmask-clearable .p-inputtext { + padding-right: 2rem; +} +p-inputmask.p-inputmask-clearable .p-inputmask-clear-icon { + color: rgba(255, 255, 255, 0.6); + right: 0.5rem; +} + p-inputnumber.ng-dirty.ng-invalid > .p-inputnumber > .p-inputtext { border-color: #ef9a9a; } diff --git a/src/assets/components/themes/bootstrap4-dark-blue/theme.css b/src/assets/components/themes/bootstrap4-dark-blue/theme.css index 4aed5df58e8..2dbef701dc1 100644 --- a/src/assets/components/themes/bootstrap4-dark-blue/theme.css +++ b/src/assets/components/themes/bootstrap4-dark-blue/theme.css @@ -1037,6 +1037,14 @@ p-inputmask.ng-dirty.ng-invalid > .p-inputtext { border-color: #f19ea6; } +p-inputmask.p-inputmask-clearable .p-inputtext { + padding-right: 2.5rem; +} +p-inputmask.p-inputmask-clearable .p-inputmask-clear-icon { + color: rgba(255, 255, 255, 0.6); + right: 0.75rem; +} + p-inputnumber.ng-dirty.ng-invalid > .p-inputnumber > .p-inputtext { border-color: #f19ea6; } diff --git a/src/assets/components/themes/bootstrap4-dark-purple/theme.css b/src/assets/components/themes/bootstrap4-dark-purple/theme.css index 244c464611c..8d98a8d26a3 100644 --- a/src/assets/components/themes/bootstrap4-dark-purple/theme.css +++ b/src/assets/components/themes/bootstrap4-dark-purple/theme.css @@ -1037,6 +1037,14 @@ p-inputmask.ng-dirty.ng-invalid > .p-inputtext { border-color: #f19ea6; } +p-inputmask.p-inputmask-clearable .p-inputtext { + padding-right: 2.5rem; +} +p-inputmask.p-inputmask-clearable .p-inputmask-clear-icon { + color: rgba(255, 255, 255, 0.6); + right: 0.75rem; +} + p-inputnumber.ng-dirty.ng-invalid > .p-inputnumber > .p-inputtext { border-color: #f19ea6; } diff --git a/src/assets/components/themes/bootstrap4-light-blue/theme.css b/src/assets/components/themes/bootstrap4-light-blue/theme.css index 356e0508edc..cd1da36cc39 100644 --- a/src/assets/components/themes/bootstrap4-light-blue/theme.css +++ b/src/assets/components/themes/bootstrap4-light-blue/theme.css @@ -1037,6 +1037,14 @@ p-inputmask.ng-dirty.ng-invalid > .p-inputtext { border-color: #dc3545; } +p-inputmask.p-inputmask-clearable .p-inputtext { + padding-right: 2.5rem; +} +p-inputmask.p-inputmask-clearable .p-inputmask-clear-icon { + color: #495057; + right: 0.75rem; +} + p-inputnumber.ng-dirty.ng-invalid > .p-inputnumber > .p-inputtext { border-color: #dc3545; } diff --git a/src/assets/components/themes/bootstrap4-light-purple/theme.css b/src/assets/components/themes/bootstrap4-light-purple/theme.css index ecfb5624962..c4812b9cdb5 100644 --- a/src/assets/components/themes/bootstrap4-light-purple/theme.css +++ b/src/assets/components/themes/bootstrap4-light-purple/theme.css @@ -1037,6 +1037,14 @@ p-inputmask.ng-dirty.ng-invalid > .p-inputtext { border-color: #dc3545; } +p-inputmask.p-inputmask-clearable .p-inputtext { + padding-right: 2.5rem; +} +p-inputmask.p-inputmask-clearable .p-inputmask-clear-icon { + color: #495057; + right: 0.75rem; +} + p-inputnumber.ng-dirty.ng-invalid > .p-inputnumber > .p-inputtext { border-color: #dc3545; } diff --git a/src/assets/components/themes/fluent-light/theme.css b/src/assets/components/themes/fluent-light/theme.css index 2f6df88bdbc..6940d9628e0 100644 --- a/src/assets/components/themes/fluent-light/theme.css +++ b/src/assets/components/themes/fluent-light/theme.css @@ -1033,6 +1033,14 @@ p-inputmask.ng-dirty.ng-invalid > .p-inputtext { border-color: #a4252c; } +p-inputmask.p-inputmask-clearable .p-inputtext { + padding-right: 2rem; +} +p-inputmask.p-inputmask-clearable .p-inputmask-clear-icon { + color: #605e5c; + right: 0.5rem; +} + p-inputnumber.ng-dirty.ng-invalid > .p-inputnumber > .p-inputtext { border-color: #a4252c; } diff --git a/src/assets/components/themes/lara-dark-blue/theme.css b/src/assets/components/themes/lara-dark-blue/theme.css index 2b85631b061..b84ad082d28 100644 --- a/src/assets/components/themes/lara-dark-blue/theme.css +++ b/src/assets/components/themes/lara-dark-blue/theme.css @@ -1033,6 +1033,14 @@ p-inputmask.ng-dirty.ng-invalid > .p-inputtext { border-color: #FCA5A5; } +p-inputmask.p-inputmask-clearable .p-inputtext { + padding-right: 2.5rem; +} +p-inputmask.p-inputmask-clearable .p-inputmask-clear-icon { + color: rgba(255, 255, 255, 0.6); + right: 0.75rem; +} + p-inputnumber.ng-dirty.ng-invalid > .p-inputnumber > .p-inputtext { border-color: #FCA5A5; } diff --git a/src/assets/components/themes/lara-dark-indigo/theme.css b/src/assets/components/themes/lara-dark-indigo/theme.css index 24d6ffa980a..ef0a777d325 100644 --- a/src/assets/components/themes/lara-dark-indigo/theme.css +++ b/src/assets/components/themes/lara-dark-indigo/theme.css @@ -1033,6 +1033,14 @@ p-inputmask.ng-dirty.ng-invalid > .p-inputtext { border-color: #FCA5A5; } +p-inputmask.p-inputmask-clearable .p-inputtext { + padding-right: 2.5rem; +} +p-inputmask.p-inputmask-clearable .p-inputmask-clear-icon { + color: rgba(255, 255, 255, 0.6); + right: 0.75rem; +} + p-inputnumber.ng-dirty.ng-invalid > .p-inputnumber > .p-inputtext { border-color: #FCA5A5; } diff --git a/src/assets/components/themes/lara-dark-purple/theme.css b/src/assets/components/themes/lara-dark-purple/theme.css index ec26650987d..51517fb2237 100644 --- a/src/assets/components/themes/lara-dark-purple/theme.css +++ b/src/assets/components/themes/lara-dark-purple/theme.css @@ -1033,6 +1033,14 @@ p-inputmask.ng-dirty.ng-invalid > .p-inputtext { border-color: #FCA5A5; } +p-inputmask.p-inputmask-clearable .p-inputtext { + padding-right: 2.5rem; +} +p-inputmask.p-inputmask-clearable .p-inputmask-clear-icon { + color: rgba(255, 255, 255, 0.6); + right: 0.75rem; +} + p-inputnumber.ng-dirty.ng-invalid > .p-inputnumber > .p-inputtext { border-color: #FCA5A5; } diff --git a/src/assets/components/themes/lara-dark-teal/theme.css b/src/assets/components/themes/lara-dark-teal/theme.css index 82ca340e3c9..d7d8e55f0d3 100644 --- a/src/assets/components/themes/lara-dark-teal/theme.css +++ b/src/assets/components/themes/lara-dark-teal/theme.css @@ -1033,6 +1033,14 @@ p-inputmask.ng-dirty.ng-invalid > .p-inputtext { border-color: #FCA5A5; } +p-inputmask.p-inputmask-clearable .p-inputtext { + padding-right: 2.5rem; +} +p-inputmask.p-inputmask-clearable .p-inputmask-clear-icon { + color: rgba(255, 255, 255, 0.6); + right: 0.75rem; +} + p-inputnumber.ng-dirty.ng-invalid > .p-inputnumber > .p-inputtext { border-color: #FCA5A5; } diff --git a/src/assets/components/themes/lara-light-blue/theme.css b/src/assets/components/themes/lara-light-blue/theme.css index 2b08a6e6aab..daf18892094 100644 --- a/src/assets/components/themes/lara-light-blue/theme.css +++ b/src/assets/components/themes/lara-light-blue/theme.css @@ -1033,6 +1033,14 @@ p-inputmask.ng-dirty.ng-invalid > .p-inputtext { border-color: #e24c4c; } +p-inputmask.p-inputmask-clearable .p-inputtext { + padding-right: 2.5rem; +} +p-inputmask.p-inputmask-clearable .p-inputmask-clear-icon { + color: #6c757d; + right: 0.75rem; +} + p-inputnumber.ng-dirty.ng-invalid > .p-inputnumber > .p-inputtext { border-color: #e24c4c; } diff --git a/src/assets/components/themes/lara-light-indigo/theme.css b/src/assets/components/themes/lara-light-indigo/theme.css index 2f2e9450b4b..57cf69702fe 100644 --- a/src/assets/components/themes/lara-light-indigo/theme.css +++ b/src/assets/components/themes/lara-light-indigo/theme.css @@ -1033,6 +1033,14 @@ p-inputmask.ng-dirty.ng-invalid > .p-inputtext { border-color: #e24c4c; } +p-inputmask.p-inputmask-clearable .p-inputtext { + padding-right: 2.5rem; +} +p-inputmask.p-inputmask-clearable .p-inputmask-clear-icon { + color: #6c757d; + right: 0.75rem; +} + p-inputnumber.ng-dirty.ng-invalid > .p-inputnumber > .p-inputtext { border-color: #e24c4c; } diff --git a/src/assets/components/themes/lara-light-purple/theme.css b/src/assets/components/themes/lara-light-purple/theme.css index 0dfbfdf7f75..8500ad91a72 100644 --- a/src/assets/components/themes/lara-light-purple/theme.css +++ b/src/assets/components/themes/lara-light-purple/theme.css @@ -1033,6 +1033,14 @@ p-inputmask.ng-dirty.ng-invalid > .p-inputtext { border-color: #e24c4c; } +p-inputmask.p-inputmask-clearable .p-inputtext { + padding-right: 2.5rem; +} +p-inputmask.p-inputmask-clearable .p-inputmask-clear-icon { + color: #6c757d; + right: 0.75rem; +} + p-inputnumber.ng-dirty.ng-invalid > .p-inputnumber > .p-inputtext { border-color: #e24c4c; } diff --git a/src/assets/components/themes/lara-light-teal/theme.css b/src/assets/components/themes/lara-light-teal/theme.css index 452d7beee06..bbf1ee443af 100644 --- a/src/assets/components/themes/lara-light-teal/theme.css +++ b/src/assets/components/themes/lara-light-teal/theme.css @@ -1033,6 +1033,14 @@ p-inputmask.ng-dirty.ng-invalid > .p-inputtext { border-color: #e24c4c; } +p-inputmask.p-inputmask-clearable .p-inputtext { + padding-right: 2.5rem; +} +p-inputmask.p-inputmask-clearable .p-inputmask-clear-icon { + color: #6c757d; + right: 0.75rem; +} + p-inputnumber.ng-dirty.ng-invalid > .p-inputnumber > .p-inputtext { border-color: #e24c4c; } diff --git a/src/assets/components/themes/luna-amber/theme.css b/src/assets/components/themes/luna-amber/theme.css index 5492561fabc..962cba37cf0 100644 --- a/src/assets/components/themes/luna-amber/theme.css +++ b/src/assets/components/themes/luna-amber/theme.css @@ -1037,6 +1037,14 @@ p-inputmask.ng-dirty.ng-invalid > .p-inputtext { border-color: #e57373; } +p-inputmask.p-inputmask-clearable .p-inputtext { + padding-right: 1.858rem; +} +p-inputmask.p-inputmask-clearable .p-inputmask-clear-icon { + color: #888888; + right: 0.429rem; +} + p-inputnumber.ng-dirty.ng-invalid > .p-inputnumber > .p-inputtext { border-color: #e57373; } diff --git a/src/assets/components/themes/luna-blue/theme.css b/src/assets/components/themes/luna-blue/theme.css index d65bba866a0..a99bde91be2 100644 --- a/src/assets/components/themes/luna-blue/theme.css +++ b/src/assets/components/themes/luna-blue/theme.css @@ -1037,6 +1037,14 @@ p-inputmask.ng-dirty.ng-invalid > .p-inputtext { border-color: #e57373; } +p-inputmask.p-inputmask-clearable .p-inputtext { + padding-right: 1.858rem; +} +p-inputmask.p-inputmask-clearable .p-inputmask-clear-icon { + color: #888888; + right: 0.429rem; +} + p-inputnumber.ng-dirty.ng-invalid > .p-inputnumber > .p-inputtext { border-color: #e57373; } diff --git a/src/assets/components/themes/luna-green/theme.css b/src/assets/components/themes/luna-green/theme.css index 62b718d7ee0..a8deb1f2af1 100644 --- a/src/assets/components/themes/luna-green/theme.css +++ b/src/assets/components/themes/luna-green/theme.css @@ -1037,6 +1037,14 @@ p-inputmask.ng-dirty.ng-invalid > .p-inputtext { border-color: #e57373; } +p-inputmask.p-inputmask-clearable .p-inputtext { + padding-right: 1.858rem; +} +p-inputmask.p-inputmask-clearable .p-inputmask-clear-icon { + color: #888888; + right: 0.429rem; +} + p-inputnumber.ng-dirty.ng-invalid > .p-inputnumber > .p-inputtext { border-color: #e57373; } diff --git a/src/assets/components/themes/luna-pink/theme.css b/src/assets/components/themes/luna-pink/theme.css index 60ea5b470da..d6dbcb1a468 100644 --- a/src/assets/components/themes/luna-pink/theme.css +++ b/src/assets/components/themes/luna-pink/theme.css @@ -1037,6 +1037,14 @@ p-inputmask.ng-dirty.ng-invalid > .p-inputtext { border-color: #e57373; } +p-inputmask.p-inputmask-clearable .p-inputtext { + padding-right: 1.858rem; +} +p-inputmask.p-inputmask-clearable .p-inputmask-clear-icon { + color: #888888; + right: 0.429rem; +} + p-inputnumber.ng-dirty.ng-invalid > .p-inputnumber > .p-inputtext { border-color: #e57373; } diff --git a/src/assets/components/themes/md-dark-deeppurple/theme.css b/src/assets/components/themes/md-dark-deeppurple/theme.css index d625fb95239..0769ef1b164 100644 --- a/src/assets/components/themes/md-dark-deeppurple/theme.css +++ b/src/assets/components/themes/md-dark-deeppurple/theme.css @@ -1057,6 +1057,14 @@ p-inputmask.ng-dirty.ng-invalid > .p-inputtext { border-color: #f44435; } +p-inputmask.p-inputmask-clearable .p-inputtext { + padding-right: 3rem; +} +p-inputmask.p-inputmask-clearable .p-inputmask-clear-icon { + color: rgba(255, 255, 255, 0.6); + right: 1rem; +} + p-inputnumber.ng-dirty.ng-invalid > .p-inputnumber > .p-inputtext { border-color: #f44435; } diff --git a/src/assets/components/themes/md-dark-indigo/theme.css b/src/assets/components/themes/md-dark-indigo/theme.css index 4a6b1cdb416..91c9cc25db0 100644 --- a/src/assets/components/themes/md-dark-indigo/theme.css +++ b/src/assets/components/themes/md-dark-indigo/theme.css @@ -1057,6 +1057,14 @@ p-inputmask.ng-dirty.ng-invalid > .p-inputtext { border-color: #f44435; } +p-inputmask.p-inputmask-clearable .p-inputtext { + padding-right: 3rem; +} +p-inputmask.p-inputmask-clearable .p-inputmask-clear-icon { + color: rgba(255, 255, 255, 0.6); + right: 1rem; +} + p-inputnumber.ng-dirty.ng-invalid > .p-inputnumber > .p-inputtext { border-color: #f44435; } diff --git a/src/assets/components/themes/md-light-deeppurple/theme.css b/src/assets/components/themes/md-light-deeppurple/theme.css index 4f87f20bbc4..63cd2ecaa6a 100644 --- a/src/assets/components/themes/md-light-deeppurple/theme.css +++ b/src/assets/components/themes/md-light-deeppurple/theme.css @@ -1057,6 +1057,14 @@ p-inputmask.ng-dirty.ng-invalid > .p-inputtext { border-color: #B00020; } +p-inputmask.p-inputmask-clearable .p-inputtext { + padding-right: 3rem; +} +p-inputmask.p-inputmask-clearable .p-inputmask-clear-icon { + color: rgba(0, 0, 0, 0.6); + right: 1rem; +} + p-inputnumber.ng-dirty.ng-invalid > .p-inputnumber > .p-inputtext { border-color: #B00020; } diff --git a/src/assets/components/themes/md-light-indigo/theme.css b/src/assets/components/themes/md-light-indigo/theme.css index 0805b20f239..a3344436912 100644 --- a/src/assets/components/themes/md-light-indigo/theme.css +++ b/src/assets/components/themes/md-light-indigo/theme.css @@ -1057,6 +1057,14 @@ p-inputmask.ng-dirty.ng-invalid > .p-inputtext { border-color: #B00020; } +p-inputmask.p-inputmask-clearable .p-inputtext { + padding-right: 3rem; +} +p-inputmask.p-inputmask-clearable .p-inputmask-clear-icon { + color: rgba(0, 0, 0, 0.6); + right: 1rem; +} + p-inputnumber.ng-dirty.ng-invalid > .p-inputnumber > .p-inputtext { border-color: #B00020; } diff --git a/src/assets/components/themes/mdc-dark-deeppurple/theme.css b/src/assets/components/themes/mdc-dark-deeppurple/theme.css index 300bfdb41bc..13198c3d282 100644 --- a/src/assets/components/themes/mdc-dark-deeppurple/theme.css +++ b/src/assets/components/themes/mdc-dark-deeppurple/theme.css @@ -1057,6 +1057,14 @@ p-inputmask.ng-dirty.ng-invalid > .p-inputtext { border-color: #f44435; } +p-inputmask.p-inputmask-clearable .p-inputtext { + padding-right: 2.5rem; +} +p-inputmask.p-inputmask-clearable .p-inputmask-clear-icon { + color: rgba(255, 255, 255, 0.6); + right: 0.75rem; +} + p-inputnumber.ng-dirty.ng-invalid > .p-inputnumber > .p-inputtext { border-color: #f44435; } diff --git a/src/assets/components/themes/mdc-dark-indigo/theme.css b/src/assets/components/themes/mdc-dark-indigo/theme.css index 4fb76dab3ff..78b555cfe43 100644 --- a/src/assets/components/themes/mdc-dark-indigo/theme.css +++ b/src/assets/components/themes/mdc-dark-indigo/theme.css @@ -1057,6 +1057,14 @@ p-inputmask.ng-dirty.ng-invalid > .p-inputtext { border-color: #f44435; } +p-inputmask.p-inputmask-clearable .p-inputtext { + padding-right: 2.5rem; +} +p-inputmask.p-inputmask-clearable .p-inputmask-clear-icon { + color: rgba(255, 255, 255, 0.6); + right: 0.75rem; +} + p-inputnumber.ng-dirty.ng-invalid > .p-inputnumber > .p-inputtext { border-color: #f44435; } diff --git a/src/assets/components/themes/mdc-light-deeppurple/theme.css b/src/assets/components/themes/mdc-light-deeppurple/theme.css index d01a7bf68c0..6ab2f4191cf 100644 --- a/src/assets/components/themes/mdc-light-deeppurple/theme.css +++ b/src/assets/components/themes/mdc-light-deeppurple/theme.css @@ -1057,6 +1057,14 @@ p-inputmask.ng-dirty.ng-invalid > .p-inputtext { border-color: #B00020; } +p-inputmask.p-inputmask-clearable .p-inputtext { + padding-right: 2.5rem; +} +p-inputmask.p-inputmask-clearable .p-inputmask-clear-icon { + color: rgba(0, 0, 0, 0.6); + right: 0.75rem; +} + p-inputnumber.ng-dirty.ng-invalid > .p-inputnumber > .p-inputtext { border-color: #B00020; } diff --git a/src/assets/components/themes/mdc-light-indigo/theme.css b/src/assets/components/themes/mdc-light-indigo/theme.css index ff1d701c4c9..195d4947a48 100644 --- a/src/assets/components/themes/mdc-light-indigo/theme.css +++ b/src/assets/components/themes/mdc-light-indigo/theme.css @@ -1057,6 +1057,14 @@ p-inputmask.ng-dirty.ng-invalid > .p-inputtext { border-color: #B00020; } +p-inputmask.p-inputmask-clearable .p-inputtext { + padding-right: 2.5rem; +} +p-inputmask.p-inputmask-clearable .p-inputmask-clear-icon { + color: rgba(0, 0, 0, 0.6); + right: 0.75rem; +} + p-inputnumber.ng-dirty.ng-invalid > .p-inputnumber > .p-inputtext { border-color: #B00020; } diff --git a/src/assets/components/themes/nova-accent/theme.css b/src/assets/components/themes/nova-accent/theme.css index 95a8f6cb084..76e512efc17 100644 --- a/src/assets/components/themes/nova-accent/theme.css +++ b/src/assets/components/themes/nova-accent/theme.css @@ -1033,6 +1033,14 @@ p-inputmask.ng-dirty.ng-invalid > .p-inputtext { border-color: #a80000; } +p-inputmask.p-inputmask-clearable .p-inputtext { + padding-right: 1.858rem; +} +p-inputmask.p-inputmask-clearable .p-inputmask-clear-icon { + color: #848484; + right: 0.429rem; +} + p-inputnumber.ng-dirty.ng-invalid > .p-inputnumber > .p-inputtext { border-color: #a80000; } diff --git a/src/assets/components/themes/nova-alt/theme.css b/src/assets/components/themes/nova-alt/theme.css index eb5dba6abea..6d0aa6150b9 100644 --- a/src/assets/components/themes/nova-alt/theme.css +++ b/src/assets/components/themes/nova-alt/theme.css @@ -1037,6 +1037,14 @@ p-inputmask.ng-dirty.ng-invalid > .p-inputtext { border-color: #a80000; } +p-inputmask.p-inputmask-clearable .p-inputtext { + padding-right: 1.858rem; +} +p-inputmask.p-inputmask-clearable .p-inputmask-clear-icon { + color: #848484; + right: 0.429rem; +} + p-inputnumber.ng-dirty.ng-invalid > .p-inputnumber > .p-inputtext { border-color: #a80000; } diff --git a/src/assets/components/themes/nova/theme.css b/src/assets/components/themes/nova/theme.css index a069b0a82df..e3c58bac9db 100644 --- a/src/assets/components/themes/nova/theme.css +++ b/src/assets/components/themes/nova/theme.css @@ -1037,6 +1037,14 @@ p-inputmask.ng-dirty.ng-invalid > .p-inputtext { border-color: #a80000; } +p-inputmask.p-inputmask-clearable .p-inputtext { + padding-right: 1.858rem; +} +p-inputmask.p-inputmask-clearable .p-inputmask-clear-icon { + color: #848484; + right: 0.429rem; +} + p-inputnumber.ng-dirty.ng-invalid > .p-inputnumber > .p-inputtext { border-color: #a80000; } diff --git a/src/assets/components/themes/rhea/theme.css b/src/assets/components/themes/rhea/theme.css index 6e488459d4e..3a75a005340 100644 --- a/src/assets/components/themes/rhea/theme.css +++ b/src/assets/components/themes/rhea/theme.css @@ -1033,6 +1033,14 @@ p-inputmask.ng-dirty.ng-invalid > .p-inputtext { border-color: #e7a3a3; } +p-inputmask.p-inputmask-clearable .p-inputtext { + padding-right: 1.858rem; +} +p-inputmask.p-inputmask-clearable .p-inputmask-clear-icon { + color: #a6a6a6; + right: 0.429rem; +} + p-inputnumber.ng-dirty.ng-invalid > .p-inputnumber > .p-inputtext { border-color: #e7a3a3; } diff --git a/src/assets/components/themes/saga-blue/theme.css b/src/assets/components/themes/saga-blue/theme.css index eef06a71581..ee84fbaa99f 100644 --- a/src/assets/components/themes/saga-blue/theme.css +++ b/src/assets/components/themes/saga-blue/theme.css @@ -1033,6 +1033,14 @@ p-inputmask.ng-dirty.ng-invalid > .p-inputtext { border-color: #f44336; } +p-inputmask.p-inputmask-clearable .p-inputtext { + padding-right: 2rem; +} +p-inputmask.p-inputmask-clearable .p-inputmask-clear-icon { + color: #6c757d; + right: 0.5rem; +} + p-inputnumber.ng-dirty.ng-invalid > .p-inputnumber > .p-inputtext { border-color: #f44336; } diff --git a/src/assets/components/themes/saga-green/theme.css b/src/assets/components/themes/saga-green/theme.css index b77eba29f6b..dcc7d88e1b9 100644 --- a/src/assets/components/themes/saga-green/theme.css +++ b/src/assets/components/themes/saga-green/theme.css @@ -1033,6 +1033,14 @@ p-inputmask.ng-dirty.ng-invalid > .p-inputtext { border-color: #f44336; } +p-inputmask.p-inputmask-clearable .p-inputtext { + padding-right: 2rem; +} +p-inputmask.p-inputmask-clearable .p-inputmask-clear-icon { + color: #6c757d; + right: 0.5rem; +} + p-inputnumber.ng-dirty.ng-invalid > .p-inputnumber > .p-inputtext { border-color: #f44336; } diff --git a/src/assets/components/themes/saga-orange/theme.css b/src/assets/components/themes/saga-orange/theme.css index f67da30aa54..e63d65d36de 100644 --- a/src/assets/components/themes/saga-orange/theme.css +++ b/src/assets/components/themes/saga-orange/theme.css @@ -1033,6 +1033,14 @@ p-inputmask.ng-dirty.ng-invalid > .p-inputtext { border-color: #f44336; } +p-inputmask.p-inputmask-clearable .p-inputtext { + padding-right: 2rem; +} +p-inputmask.p-inputmask-clearable .p-inputmask-clear-icon { + color: #6c757d; + right: 0.5rem; +} + p-inputnumber.ng-dirty.ng-invalid > .p-inputnumber > .p-inputtext { border-color: #f44336; } diff --git a/src/assets/components/themes/saga-purple/theme.css b/src/assets/components/themes/saga-purple/theme.css index 3653527b5e3..1a12e90c19c 100644 --- a/src/assets/components/themes/saga-purple/theme.css +++ b/src/assets/components/themes/saga-purple/theme.css @@ -1033,6 +1033,14 @@ p-inputmask.ng-dirty.ng-invalid > .p-inputtext { border-color: #f44336; } +p-inputmask.p-inputmask-clearable .p-inputtext { + padding-right: 2rem; +} +p-inputmask.p-inputmask-clearable .p-inputmask-clear-icon { + color: #6c757d; + right: 0.5rem; +} + p-inputnumber.ng-dirty.ng-invalid > .p-inputnumber > .p-inputtext { border-color: #f44336; } diff --git a/src/assets/components/themes/tailwind-light/theme.css b/src/assets/components/themes/tailwind-light/theme.css index 6a7bcbc0274..ade05ad7609 100644 --- a/src/assets/components/themes/tailwind-light/theme.css +++ b/src/assets/components/themes/tailwind-light/theme.css @@ -1068,6 +1068,14 @@ p-inputmask.ng-dirty.ng-invalid > .p-inputtext { border-color: #f0a9a7; } +p-inputmask.p-inputmask-clearable .p-inputtext { + padding-right: 2.5rem; +} +p-inputmask.p-inputmask-clearable .p-inputmask-clear-icon { + color: #71717A; + right: 0.75rem; +} + p-inputnumber.ng-dirty.ng-invalid > .p-inputnumber > .p-inputtext { border-color: #f0a9a7; } diff --git a/src/assets/components/themes/vela-blue/theme.css b/src/assets/components/themes/vela-blue/theme.css index 018128227e7..6a39b03e95e 100644 --- a/src/assets/components/themes/vela-blue/theme.css +++ b/src/assets/components/themes/vela-blue/theme.css @@ -1033,6 +1033,14 @@ p-inputmask.ng-dirty.ng-invalid > .p-inputtext { border-color: #ef9a9a; } +p-inputmask.p-inputmask-clearable .p-inputtext { + padding-right: 2rem; +} +p-inputmask.p-inputmask-clearable .p-inputmask-clear-icon { + color: rgba(255, 255, 255, 0.6); + right: 0.5rem; +} + p-inputnumber.ng-dirty.ng-invalid > .p-inputnumber > .p-inputtext { border-color: #ef9a9a; } diff --git a/src/assets/components/themes/vela-green/theme.css b/src/assets/components/themes/vela-green/theme.css index 14af67d778b..96e3fa2af4a 100644 --- a/src/assets/components/themes/vela-green/theme.css +++ b/src/assets/components/themes/vela-green/theme.css @@ -1033,6 +1033,14 @@ p-inputmask.ng-dirty.ng-invalid > .p-inputtext { border-color: #ef9a9a; } +p-inputmask.p-inputmask-clearable .p-inputtext { + padding-right: 2rem; +} +p-inputmask.p-inputmask-clearable .p-inputmask-clear-icon { + color: rgba(255, 255, 255, 0.6); + right: 0.5rem; +} + p-inputnumber.ng-dirty.ng-invalid > .p-inputnumber > .p-inputtext { border-color: #ef9a9a; } diff --git a/src/assets/components/themes/vela-orange/theme.css b/src/assets/components/themes/vela-orange/theme.css index 5c21c967dbb..4de7ec2291f 100644 --- a/src/assets/components/themes/vela-orange/theme.css +++ b/src/assets/components/themes/vela-orange/theme.css @@ -1033,6 +1033,14 @@ p-inputmask.ng-dirty.ng-invalid > .p-inputtext { border-color: #ef9a9a; } +p-inputmask.p-inputmask-clearable .p-inputtext { + padding-right: 2rem; +} +p-inputmask.p-inputmask-clearable .p-inputmask-clear-icon { + color: rgba(255, 255, 255, 0.6); + right: 0.5rem; +} + p-inputnumber.ng-dirty.ng-invalid > .p-inputnumber > .p-inputtext { border-color: #ef9a9a; } diff --git a/src/assets/components/themes/vela-purple/theme.css b/src/assets/components/themes/vela-purple/theme.css index ce3c9721940..a20ca1c1d4f 100644 --- a/src/assets/components/themes/vela-purple/theme.css +++ b/src/assets/components/themes/vela-purple/theme.css @@ -1033,6 +1033,14 @@ p-inputmask.ng-dirty.ng-invalid > .p-inputtext { border-color: #ef9a9a; } +p-inputmask.p-inputmask-clearable .p-inputtext { + padding-right: 2rem; +} +p-inputmask.p-inputmask-clearable .p-inputmask-clear-icon { + color: rgba(255, 255, 255, 0.6); + right: 0.5rem; +} + p-inputnumber.ng-dirty.ng-invalid > .p-inputnumber > .p-inputtext { border-color: #ef9a9a; }