Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

WIP: Data entry mask #151

Open
wants to merge 8 commits into
base: devel
Choose a base branch
from
Open

WIP: Data entry mask #151

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
a410c77
Add regexp service
JavierCenteno Sep 30, 2021
6465e8d
Merge branch 'devel' into i122-data-entry-mask
JavierCenteno Oct 7, 2021
f21b8d8
Enable full suggestions for regex
JavierCenteno Oct 7, 2021
f87a1ca
Mask suggestion working
JavierCenteno Oct 11, 2021
551cafc
Fix mask style
JavierCenteno Oct 11, 2021
2e4faaa
Assume simplest option if no options match
JavierCenteno Oct 13, 2021
cbfa3cc
Remove useless divs
JavierCenteno Oct 15, 2021
d355f93
Make regexp non-injectable
JavierCenteno Oct 15, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
24 changes: 20 additions & 4 deletions projects/lux/src/lib/input/input.component.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,9 +2,9 @@
<span>$</span>
</div>
<input
#input
*ngIf="type !== 'textarea'"
class="infix"
#input
class="infix masked patterned"
placement="top"
[id]="inputId"
[type]="domain"
Expand All @@ -23,10 +23,17 @@
(keypress)="onKeyPress($event)"
(blur)="onLostFocus()"
/>
<input
*ngIf="type !== 'textarea'"
#inputMask
class="infix mask patterned"
[id]="inputId + '$mask'"
readonly="true"
/>
<textarea
#textarea
*ngIf="type === 'textarea'"
class="infix"
#textarea
class="infix masked patterned"
placement="top"
[id]="inputId"
[attr.value]="value"
Expand All @@ -42,6 +49,15 @@
(keypress)="onKeyPress($event)"
(blur)="onLostFocus()"
></textarea>
<textarea
*ngIf="type === 'textarea'"
#textareaMask
class="infix mask patterned"
[id]="inputId + '$mask'"
readonly="true"
[attr.cols]="cols?.toString() || undefined"
[attr.rows]="rows?.toString() || undefined"
></textarea>
<div *ngIf="currency && currency === 'EUR'" class="postfix symbol">
<span>€</span>
</div>
Expand Down
25 changes: 25 additions & 0 deletions projects/lux/src/lib/input/input.component.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,31 @@
align-items: stretch;
}

.patterned {
font-family: monospace;
}

.masked {
position: relative;
padding-top: 0.2rem;
padding-bottom: 0.2rem;
bottom: 0px;
left: 0px;
background-color: transparent;
z-index: 0;
}

.mask {
position: absolute;
padding-top: 0.2rem;
padding-bottom: 0.2rem;
bottom: 0px;
left: 0px;
border-color: transparent;
color: gray;
z-index: -1;
}

.readonly {
border: none;

Expand Down
20 changes: 20 additions & 0 deletions projects/lux/src/lib/input/input.component.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -46,7 +46,9 @@ export class InputComponent implements OnInit, ControlValueAccessor, Validator {
static idCounter = 0;

@ViewChild('input', { static: false }) input: ElementRef;
@ViewChild('inputMask', { static: false }) inputMask: ElementRef;
@ViewChild('textarea', { static: false }) textarea: ElementRef;
@ViewChild('textareaMask', { static: false }) textareaMask: ElementRef;

touched = false;
dirty = false;
Expand Down Expand Up @@ -171,6 +173,15 @@ export class InputComponent implements OnInit, ControlValueAccessor, Validator {
}

this._value = v;
if (this._regexp) {
let suggestion;
if (hasValue(v)) {
suggestion = this.regexpService.suggestion(v, this._pattern);
} else {
suggestion = this.regexpService.suggestion('', this._pattern);
}
this.setValueInMaskControl(' '.repeat(v.length) + suggestion);
}
this.onChange(v);
if (!initialAndEmpty) {
this.valueChange.emit(v);
Expand Down Expand Up @@ -231,6 +242,15 @@ export class InputComponent implements OnInit, ControlValueAccessor, Validator {
}
}

private setValueInMaskControl(v: any): void {
if (this.inputMask) {
this.inputMask.nativeElement.value = v;
}
if (this.textareaMask) {
this.textareaMask.nativeElement.value = v;
}
}

// Validator interface
registerOnValidatorChange(): void {}

Expand Down
Loading