Skip to content

Commit 8eb337a

Browse files
wouter-willemswouter-willems
authored
Merge pull request #55 from klippa-app/feature/field-improvements
Adding suffix/prefix to fields and improving styling
2 parents 1722e14 + 0874b04 commit 8eb337a

21 files changed

Lines changed: 988 additions & 582 deletions

‎angular.json‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -101,7 +101,7 @@
101101
"builder": "@angular-devkit/build-angular:dev-server",
102102
"options": {
103103
"buildTarget": "demo:build"
104-
},
104+
},
105105
"configurations": {
106106
"production": {
107107
"buildTarget": "demo:build:production"
@@ -171,5 +171,8 @@
171171
"@schematics/angular:resolver": {
172172
"typeSeparator": "."
173173
}
174+
},
175+
"cli": {
176+
"analytics": false
174177
}
175178
}

‎projects/klippa/ngx-enhancy-forms/package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "@klippa/ngx-enhancy-forms",
3-
"version": "20.0.16",
3+
"version": "20.1.0",
44
"publishConfig": {
55
"access": "public"
66
},

‎projects/klippa/ngx-enhancy-forms/src/lib/elements/date-picker/date-picker.component.html‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -11,9 +11,10 @@
1111
[placeholder]="getTranslation('placeholder')"
1212
[clearable]="clearable"
1313
[showTimeInput]="false"
14+
[getTailTplFn]="getTailTpl"
1415
(onTouch)="touch()"
16+
[size]="size"
17+
[suffixTpl]="suffixTpl"
18+
[prefixTpl]="prefixTpl"
1519
></klp-form-date-time-picker>
16-
<div class="tail">
17-
<ng-container [ngTemplateOutlet]="getTailTpl()"></ng-container>
18-
</div>
1920
</div>

‎projects/klippa/ngx-enhancy-forms/src/lib/elements/date-picker/date-picker.component.ts‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import {Component, Host, Inject, InjectionToken, Input, Optional} from '@angular/core';
1+
import {Component, Host, Inject, InjectionToken, Input, Optional, TemplateRef} from '@angular/core';
22
import {ControlContainer, NG_VALUE_ACCESSOR} from '@angular/forms';
33
import {format as dateFormat, parse} from 'date-fns';
44
import {MultipleValueAccessorBase} from '../value-accessor-base/multiple-value-accessor-base.component';
@@ -22,6 +22,9 @@ export class DatePickerComponent extends MultipleValueAccessorBase<string | type
2222
@Input() public format = 'dd-MM-yyyy';
2323
@Input() public placeholder: string;
2424
@Input() public clearable = false;
25+
@Input() size: 'small' | 'medium' | 'large' = 'medium';
26+
@Input() suffixTpl: TemplateRef<any> | null = null;
27+
@Input() prefixTpl: TemplateRef<any> | null = null;
2528

2629
public dateValue: Date | Array<Date>;
2730

‎projects/klippa/ngx-enhancy-forms/src/lib/elements/date-time-picker/date-time-picker.component.html‎

Lines changed: 94 additions & 73 deletions
Original file line numberDiff line numberDiff line change
@@ -1,76 +1,97 @@
11
<div class="componentContainer" [ngClass]="{showErrors: isInErrorState()}" [ngClass]="{disabled: disabled}">
2-
<div class="dateContainer" [ngClass]="{disabled: disabled}">
3-
<mat-form-field floatLabel="never">
4-
@if (multiple) {
5-
<div class="daysSelectedCaption" (click)="picker.open()" [ngClass]="{disabled: disabled}">
6-
@if (selectedDates.length >= 2) {
7-
<span>{{getTranslation('daysSelected', selectedDates.length)}}</span>
8-
@if (getSelectedMonths() === 1) {
9-
<span>{{getTranslation('selectedInMonth', selectedDates[0])}}</span>
10-
}
11-
}
12-
@if (selectedDates.length === 1) {
13-
<span>{{getTranslation('selectedDate', selectedDates[0])}}</span>
14-
}
15-
@if (selectedDates.length === 0) {
16-
<span class="placeholderForMultipleSelection">{{getTranslation('selectDays')}}</span>
17-
}
18-
</div>
19-
}
2+
<div class="dateContainer" [ngClass]="{disabled: disabled, 'input-sm': size === 'small', 'input-lg': size === 'large'}" [style.--button-size]="size === 'small' ? '20px' : '24px'" >
3+
<div class="head">
4+
@if (prefixTpl) {
5+
<div class="prefix">
6+
<ng-container [ngTemplateOutlet]="prefixTpl"></ng-container>
7+
</div>
8+
}
9+
</div>
10+
<mat-form-field floatLabel="never">
11+
@if (multiple) {
12+
<div class="daysSelectedCaption" (click)="picker.open()" [ngClass]="{disabled: disabled}">
13+
@if (selectedDates.length >= 2) {
14+
<span>{{ getTranslation('daysSelected', selectedDates.length) }}</span>
15+
@if (getSelectedMonths() === 1) {
16+
<span>{{ getTranslation('selectedInMonth', selectedDates[0]) }}</span>
17+
}
18+
}
19+
@if (selectedDates.length === 1) {
20+
<span>{{ getTranslation('selectedDate', selectedDates[0]) }}</span>
21+
}
22+
@if (selectedDates.length === 0) {
23+
<span class="placeholderForMultipleSelection">{{ getTranslation('selectDays') }}</span>
24+
}
25+
</div>
26+
}
2027

21-
@if (disabled) {
22-
<div class="disabledClickArea" (click)="picker.open()"></div>
23-
}
24-
<input
25-
#nativeInput
26-
matInput
27-
[matDatepicker]="picker"
28-
[matDatepickerFilter]="filterDates"
29-
[(ngModel)]="valueForMaterialDatePicker"
30-
(dateInput)="dateChanged($event)"
31-
(input)="nativeValueChanged()"
32-
(click)="picker.open()"
33-
[min]="minDateStartOfDay"
34-
[max]="maxDateEndOfDay"
35-
[placeholder]="getTranslation('placeholder')"
36-
(blur)="touchDate()"
37-
[ngClass]="{inputForMultipleDays: multiple, disabled: disabled}"
38-
>
39-
<mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
40-
<mat-datepicker
41-
#picker
42-
[dateClass]="isSelected"
43-
[startAt]="openPickerOnDate"
44-
></mat-datepicker>
45-
</mat-form-field>
46-
<div class="tail">
47-
<ng-container [ngTemplateOutlet]="getTailTpl()"></ng-container>
48-
</div>
49-
</div>
50-
@if (showTimeInput) {
51-
<div class="timeContainer" [ngClass]="{disabled: disabled}">
52-
<div class="timeContainerInner">
53-
<svg class="clockIcon" width="18" height="18" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" (click)="hourInput.focus()">
54-
<path d="M12 6V12L16 14M22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12Z" stroke="#888da8" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
55-
</svg>
56-
<input #hourInput maxlength="2" placeholder="__" [disabled]="disabled" [(ngModel)]="hours" (ngModelChange)="notifyNewDate()" (focus)="dropdownVisible = true" (blur)="blurredHours();">
57-
<div class="divider">:</div>
58-
<input maxlength="2" placeholder="__" [disabled]="disabled" [(ngModel)]="minutes" (ngModelChange)="notifyNewDate()" (focus)="dropdownVisible = true" (blur)="blurredMinutes();">
59-
</div>
60-
@if (dropdownVisible) {
61-
<div class="timeDoubleDropdown" #timeDoubleDropdown [onRenderFn]="timeDropdownRendered">
62-
<div class="hourOfDay">
63-
@for (hour of counter(24); track hour) {
64-
<div class="entry" (mousedown)="setHour(hour)" [ngClass]="{isActive: isActive(hour, hours)}">{{hour > 9 ? hour : '0' + hour }}</div>
65-
}
66-
</div>
67-
<div class="minuteOfHour">
68-
@for (minute of minutesOfHour; track minute) {
69-
<div class="entry" (mousedown)="setMinute(minute)" [ngClass]="{isActive: isActive(minute, minutes)}">{{minute > 9 ? minute : '0' + minute}}</div>
70-
}
71-
</div>
72-
</div>
73-
}
74-
</div>
75-
}
28+
@if (disabled) {
29+
<div class="disabledClickArea" (click)="picker.open()"></div>
30+
}
31+
<input
32+
#nativeInput
33+
matInput
34+
[matDatepicker]="picker"
35+
[matDatepickerFilter]="filterDates"
36+
[(ngModel)]="valueForMaterialDatePicker"
37+
(dateInput)="dateChanged($event)"
38+
(input)="nativeValueChanged()"
39+
(click)="picker.open()"
40+
[min]="minDateStartOfDay"
41+
[max]="maxDateEndOfDay"
42+
[placeholder]="getTranslation('placeholder')"
43+
(blur)="touchDate()"
44+
[ngClass]="{inputForMultipleDays: multiple, disabled: disabled}"
45+
>
46+
<mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
47+
<mat-datepicker
48+
#picker
49+
[dateClass]="isSelected"
50+
[startAt]="openPickerOnDate"
51+
></mat-datepicker>
52+
</mat-form-field>
53+
<div class="tail">
54+
<ng-container [ngTemplateOutlet]="getTailTpl()"></ng-container>
55+
@if (suffixTpl) {
56+
<div class="suffix">
57+
<ng-container [ngTemplateOutlet]="suffixTpl"></ng-container>
58+
</div>
59+
}
60+
</div>
61+
</div>
62+
@if (showTimeInput) {
63+
<div class="timeContainer" [ngClass]="{disabled: disabled}">
64+
<div class="timeContainerInner">
65+
<svg class="clockIcon" width="18" height="18" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"
66+
(click)="hourInput.focus()">
67+
<path
68+
d="M12 6V12L16 14M22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12Z"
69+
stroke="#888da8" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
70+
</svg>
71+
<input #hourInput maxlength="2" placeholder="__" [disabled]="disabled" [(ngModel)]="hours"
72+
(ngModelChange)="notifyNewDate()" (focus)="dropdownVisible = true" (blur)="blurredHours();">
73+
<div class="divider">:</div>
74+
<input maxlength="2" placeholder="__" [disabled]="disabled" [(ngModel)]="minutes"
75+
(ngModelChange)="notifyNewDate()" (focus)="dropdownVisible = true" (blur)="blurredMinutes();">
76+
</div>
77+
@if (dropdownVisible) {
78+
<div class="timeDoubleDropdown" #timeDoubleDropdown [onRenderFn]="timeDropdownRendered">
79+
<div class="hourOfDay">
80+
@for (hour of counter(24); track hour) {
81+
<div class="entry" (mousedown)="setHour(hour)"
82+
[ngClass]="{isActive: isActive(hour, hours)}">{{ hour > 9 ? hour : '0' + hour }}
83+
</div>
84+
}
85+
</div>
86+
<div class="minuteOfHour">
87+
@for (minute of minutesOfHour; track minute) {
88+
<div class="entry" (mousedown)="setMinute(minute)"
89+
[ngClass]="{isActive: isActive(minute, minutes)}">{{ minute > 9 ? minute : '0' + minute }}
90+
</div>
91+
}
92+
</div>
93+
</div>
94+
}
95+
</div>
96+
}
7697
</div>

0 commit comments

Comments
 (0)