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 6 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
98 changes: 59 additions & 39 deletions projects/lux/src/lib/input/input.component.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,47 +1,67 @@
<div *ngIf="currency && currency === 'USD'" class="prefix symbol">
<span>$</span>
</div>
<input
#input
<div
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

¿para que hace falta un DIV? ¿para el ngIf? si es solo para eso, no es necerio, pon el if en el input y el text-area
un ng-content tambien hace lo mismo, sin añadir un elemento al DOM innecesario.

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

añadir o quitar elementos de DOM a controles ya publicados tiene el efecto colateral de que puede romper selectores css

*ngIf="type !== 'textarea'"
class="infix"
placement="top"
[id]="inputId"
[type]="domain"
[attr.value]="value"
[attr.aria-label]="ariaLabel"
[attr.disabled]="disabled === true ? 'true' : undefined"
[attr.readonly]="readonly === true ? 'true' : undefined"
[attr.min]="min?.toString() || undefined"
[attr.max]="max?.toString() || undefined"
[attr.step]="step?.toString() || undefined"
[attr.pattern]="pattern || undefined"
[placeholder]="placeholder"
[ngClass]="className"
(keyup)="onKeyUp(input.value)"
(change)="onChangeValue(input.value)"
(keypress)="onKeyPress($event)"
(blur)="onLostFocus()"
/>
<textarea
#textarea
>
<input
#input
class="infix masked patterned"
placement="top"
[id]="inputId"
[type]="domain"
[attr.value]="value"
[attr.aria-label]="ariaLabel"
[attr.disabled]="disabled === true ? 'true' : undefined"
[attr.readonly]="readonly === true ? 'true' : undefined"
[attr.min]="min?.toString() || undefined"
[attr.max]="max?.toString() || undefined"
[attr.step]="step?.toString() || undefined"
[attr.pattern]="pattern || undefined"
[placeholder]="placeholder"
[ngClass]="className"
(keyup)="onKeyUp(input.value)"
(change)="onChangeValue(input.value)"
(keypress)="onKeyPress($event)"
(blur)="onLostFocus()"
/>
<input
#inputMask
class="infix mask patterned"
[id]="inputId + '$mask'"
readonly="true"
/>
</div>
<div
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

idem

*ngIf="type === 'textarea'"
class="infix"
placement="top"
[id]="inputId"
[attr.value]="value"
[attr.aria-label]="ariaLabel"
[attr.disabled]="disabled === true ? 'true' : undefined"
[attr.readonly]="readonly === true ? 'true' : undefined"
[attr.cols]="cols?.toString() || undefined"
[attr.rows]="rows?.toString() || undefined"
[placeholder]="placeholder"
[ngClass]="className"
(keyup)="onKeyUp(textarea.value)"
(change)="onChangeValue(textarea.value)"
(keypress)="onKeyPress($event)"
(blur)="onLostFocus()"
></textarea>
>
<textarea
#textarea
class="infix masked patterned"
placement="top"
[id]="inputId"
[attr.value]="value"
[attr.aria-label]="ariaLabel"
[attr.disabled]="disabled === true ? 'true' : undefined"
[attr.readonly]="readonly === true ? 'true' : undefined"
[attr.cols]="cols?.toString() || undefined"
[attr.rows]="rows?.toString() || undefined"
[placeholder]="placeholder"
[ngClass]="className"
(keyup)="onKeyUp(textarea.value)"
(change)="onChangeValue(textarea.value)"
(keypress)="onKeyPress($event)"
(blur)="onLostFocus()"
></textarea>
<textarea
#textareaMask
class="infix mask patterned"
[id]="inputId + '$mask'"
readonly="true"
[attr.cols]="cols?.toString() || undefined"
[attr.rows]="rows?.toString() || undefined"
></textarea>
</div>
<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