@klippa/ngx-enhancy-forms 1.0.0 → 2.1.0

package/src/lib/elements/datepicker/datepicker.component.ts

@@ -1,142 +0,0 @@
-import { Component, ElementRef, Input, SimpleChanges, ViewChild } from '@angular/core';
-import { NG_VALUE_ACCESSOR } from '@angular/forms';
-import { ValueAccessorBase } from '../value-accessor-base/value-accessor-base.component';
-import { _ } from '~/app/util/i18n';
-import { DateAdapter, MAT_DATE_FORMATS, MAT_DATE_LOCALE } from '@angular/material/core';
-import { NgxDateFnsDateAdapter } from 'ngx-mat-datefns-date-adapter';
-import { isMatch } from 'date-fns';
-import { getSupportedFormatsAsDateFns } from '~/app/shared/ui/forms/composed/date-format-picker/date-format-picker.component';
-import { isNullOrUndefined, stringIsSetAndNotEmpty } from '~/app/util/values';
-import { invalidDateKey } from '~/app/shared/ui/forms/validators/dateValidator';
-import { MatDatepicker } from '@angular/material/datepicker';
-
-class MultiParseDateFnsDateAdapter extends NgxDateFnsDateAdapter {
-	// override the parse function to take arrays of parseFormats and try each in turn.
-	parse(value: any, parseFormat: any) {
-		if (typeof value === 'string') {
-			if (value.length === 0) {
-				return null;
-			}
-			// replace all '/' and '.' with '-' for locales that use '/' or '.' seperated dates.
-			value = value.replace(/[\/.]/g, '-');
-		}
-		if (Array.isArray(parseFormat)) {
-			for (const format of parseFormat) {
-				if (isMatch(value, format)) {
-					return super.parse(value, format);
-				}
-			}
-		}
-		return null;
-	}
-}
-
-@Component({
-	selector: 'klp-datepicker',
-	templateUrl: './datepicker.component.html',
-	styleUrls: ['./datepicker.component.scss'],
-	providers: [
-		{ provide: NG_VALUE_ACCESSOR, useExisting: DatepickerComponent, multi: true },
-		{ provide: DateAdapter, useClass: MultiParseDateFnsDateAdapter, deps: [MAT_DATE_LOCALE] },
-		{
-			provide: MAT_DATE_FORMATS,
-			useFactory: (component) => {
-				return {
-					parse: {
-						// if the selected format fails to parse try all supported and all long locale formats.
-						dateInput: [component.format, ...getSupportedFormatsAsDateFns(), 'PP', 'PPP', 'PPPP'],
-					},
-					display: {
-						dateInput: component.format, // Display as selected format.
-						monthLabel: 'MMM',
-						monthYearLabel: 'MMM yyyy',
-						dateA11yLabel: 'MMM dd, yyyy',
-						monthYearA11yLabel: 'MMMM yyyy',
-					},
-				};
-			},
-			deps: [DatepickerComponent],
-		},
-	],
-})
-export class DatepickerComponent extends ValueAccessorBase<Date | typeof invalidDateKey> {
-	@Input() public minDate: Date = undefined;
-	@Input() public maxDate: Date = undefined;
-	@Input() public format = 'dd-MM-yyyy';
-	@Input() public placeholder = _('Select date');
-
-	@ViewChild('nativeInput') nativeInputRef: ElementRef;
-	@ViewChild('picker') datePickerRef: MatDatepicker<Date>;
-
-	minDateStartOfDay: Date = undefined;
-	maxDateEndOfDay: Date = undefined;
-
-	// this is passed as ngmodel and is used to set the inital date. But we also
-	// use input and nativeInput callbacks to extend the validation logic so we
-	// can destinguish between empty and invalid dates.
-	valueForMaterialDatePicker: Date;
-
-	ngOnChanges(changes: SimpleChanges) {
-		if (changes.minDate) {
-			this.setMinDate(changes.minDate.currentValue);
-		}
-		if (changes.maxDate) {
-			this.setMaxDate(changes.maxDate.currentValue);
-		}
-	}
-
-	setMinDate(minDate: Date) {
-		if (minDate) {
-			this.minDateStartOfDay = new Date(minDate);
-			this.minDateStartOfDay.setHours(0, 0, 0, 0);
-		} else {
-			this.minDateStartOfDay = undefined;
-		}
-	}
-
-	setMaxDate(maxDate: Date) {
-		if (maxDate) {
-			this.maxDateEndOfDay = new Date(maxDate);
-			this.maxDateEndOfDay.setHours(23, 59, 59, 999);
-		} else {
-			this.maxDateEndOfDay = undefined;
-		}
-	}
-
-	// dateChanged is called when the output of the datepicker is changed and
-	// parsed correctly. If the date is invalid, it will be called the first time
-	// with null but never again until a valid input is provided.
-	dateChanged(event: any) {
-		const nativeInputValue = this.nativeInputRef.nativeElement.value;
-		const date = event.value;
-		if (isNullOrUndefined(date) && stringIsSetAndNotEmpty(nativeInputValue)) {
-			this.setInnerValueAndNotify(invalidDateKey);
-		} else {
-			this.setInnerValueAndNotify(date);
-		}
-	}
-
-	writeValue(value: Date | typeof invalidDateKey) {
-		super.writeValue(value);
-		this.valueForMaterialDatePicker = value === invalidDateKey ? null : value;
-	}
-
-	// nativeValueChanged is called when the internal text value changes, but not
-	// when the date is changed via the date picker. We need this so that we can
-	// determine if the datepicker is empty or invalid.
-	nativeValueChanged(event: any) {
-		const nativeInputValue = event.target.value;
-		const date = this.valueForMaterialDatePicker;
-
-		if (this.datePickerRef.opened) {
-			// if the user is typing instead of using the picker, close it.
-			this.datePickerRef.close();
-		}
-
-		if (isNullOrUndefined(date) && stringIsSetAndNotEmpty(nativeInputValue)) {
-			this.setInnerValueAndNotify(invalidDateKey);
-		} else {
-			this.setInnerValueAndNotify(date);
-		}
-	}
-}

package/src/lib/elements/email/email-input.component.html

@@ -1,8 +0,0 @@
-<input
-	type="email"
-	class="form-control"
-	[(ngModel)]="innerValue"
-	(input)="setInnerValueAndNotify($event.target.value)"
-	[placeholder]="placeholder ? placeholder : ''"
-	(blur)="touch()"
-/>

package/src/lib/elements/email/email-input.component.scss

@@ -1,15 +0,0 @@
-@import '../../../style/themes/default/variables';
-@import '../../../style/mixins';
-
-:host {
-	display: block;
-}
-
-input {
-  outline: none;
-  @include formControl();
-}
-
-.showErrors {
-  border-color: $default-warning;
-}

package/src/lib/elements/email/email-input.component.ts

@@ -1,13 +0,0 @@
-import { Component, Input } from '@angular/core';
-import { NG_VALUE_ACCESSOR } from '@angular/forms';
-import {ValueAccessorBase} from "../value-accessor-base/value-accessor-base.component";
-
-@Component({
-	selector: 'klp-form-email-input',
-	templateUrl: './email-input.component.html',
-	styleUrls: ['./email-input.component.scss'],
-	providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: EmailInputComponent, multi: true }],
-})
-export class EmailInputComponent extends ValueAccessorBase<string> {
-	@Input() placeholder: string;
-}

package/src/lib/elements/loading-indicator/loading-indicator.component.html

@@ -1,40 +0,0 @@
-<div class="threeDots" [class]="size" *ngIf="variant === '3dots'">
-	<div></div>
-	<div></div>
-	<div></div>
-	<div></div>
-</div>
-
-<div class="spinner" [class]="size" *ngIf="variant === 'spinner'">
-	<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 48 48">
-		<circle cx="24" cy="4" r="4" fill="currentColor" />
-		<circle cx="12.19" cy="7.86" r="3.7" fill="currentColor" />
-		<circle cx="5.02" cy="17.68" r="3.4" fill="currentColor" />
-		<circle cx="5.02" cy="30.32" r="3.1" fill="currentColor" />
-		<circle cx="12.19" cy="40.14" r="2.8" fill="currentColor" />
-		<circle cx="24" cy="44" r="2.5" fill="currentColor" />
-		<circle cx="35.81" cy="40.14" r="2.2" fill="currentColor" />
-		<circle cx="42.98" cy="30.32" r="1.9" fill="currentColor" />
-		<circle cx="42.98" cy="17.68" r="1.6" fill="currentColor" />
-		<circle cx="35.81" cy="7.86" r="1.3" fill="currentColor" />
-	</svg>
-</div>
-
-<div class="textInput" *ngIf="variant === 'textInput'">
-	<input
-		disabled
-		type="text"
-		class="form-control"
-		placeholder="Loading..."
-	>
-</div>
-
-<div class="picker" *ngIf="variant === 'picker'">
-	<input
-		disabled
-		type="text"
-		class="form-control"
-		placeholder="Loading..."
-	>
-	<div class="chevronDown"></div>
-</div>

package/src/lib/elements/loading-indicator/loading-indicator.component.scss

@@ -1,179 +0,0 @@
-@import '../../../style/themes/default/variables';
-
-:host {
-	display: block;
-}
-
-.threeDots {
-	display: block;
-	position: relative;
-
-	&.tiny {
-		--base: 4px;
-	}
-
-	&.small {
-		--base: 8px;
-	}
-
-	&.medium {
-		--base: 12px;
-	}
-
-	&.large {
-		--base: 18px;
-	}
-
-	&.huge {
-		--base: 26px;
-	}
-
-	width: calc(4 * var(--base));
-	height: var(--base);
-
-	div {
-		position: absolute;
-		top: 0px;
-		width: var(--base);
-		height: var(--base);
-		border-radius: 50%;
-		background: $primary;
-		animation-timing-function: cubic-bezier(0, 1, 1, 0);
-	}
-
-	div:nth-child(1) {
-		animation: lds-ellipsis1 0.6s infinite;
-	}
-
-	div:nth-child(2) {
-		animation: lds-ellipsis2 0.6s infinite;
-	}
-
-	div:nth-child(3) {
-		left: calc(1.5 * var(--base));
-		animation: lds-ellipsis2 0.6s infinite;
-	}
-
-	div:nth-child(4) {
-		left: calc(3 * var(--base));
-		animation: lds-ellipsis3 0.6s infinite;
-	}
-
-	@keyframes lds-ellipsis1 {
-		0% {
-			transform: scale(0);
-		}
-		100% {
-			transform: scale(1);
-		}
-	}
-	@keyframes lds-ellipsis3 {
-		0% {
-			transform: scale(1);
-		}
-		100% {
-			transform: scale(0);
-		}
-	}
-	@keyframes lds-ellipsis2 {
-		0% {
-			transform: translate(0, 0);
-		}
-		100% {
-			transform: translate(150%, 0);
-		}
-	}
-}
-
-.spinner {
-	&.tiny {
-		svg {
-			width: 1rem;
-			height: 1rem;
-		}
-	}
-	&.small {
-		svg {
-			width: 1.6rem;
-			height: 1.6rem;
-		}
-	}
-	&.medium {
-		svg {
-			width: 2.5rem;
-			height: 2.5rem;
-		}
-	}
-	&.large {
-		svg {
-			width: 3rem;
-			height: 3rem;
-		}
-	}
-	&.huge {
-		svg {
-			width: 4rem;
-			height: 4rem;
-		}
-	}
-
-	svg {
-		-webkit-transition-property: -webkit-transform;
-		-webkit-transition-duration: 1.2s;
-		-webkit-animation-name: rotate;
-		-webkit-animation-iteration-count: infinite;
-		-webkit-animation-timing-function: linear;
-
-		-moz-transition-property: -moz-transform;
-		-moz-animation-name: rotate;
-		-moz-animation-duration: 1.2s;
-		-moz-animation-iteration-count: infinite;
-		-moz-animation-timing-function: linear;
-
-		transition-property: transform;
-		animation-name: rotate;
-		animation-duration: 1.2s;
-		animation-iteration-count: infinite;
-		animation-timing-function: linear;
-	}
-
-	@-webkit-keyframes rotate {
-		from {
-			-webkit-transform: rotate(0deg);
-		}
-		to {
-			-webkit-transform: rotate(360deg);
-		}
-	}
-
-	@-moz-keyframes rotate {
-		from {
-			-moz-transform: rotate(0deg);
-		}
-		to {
-			-moz-transform: rotate(360deg);
-		}
-	}
-
-	@keyframes rotate {
-		from {
-			transform: rotate(0deg);
-		}
-		to {
-			transform: rotate(360deg);
-		}
-	}
-}
-.picker {
-	position: relative;
-	.chevronDown {
-		position: absolute;
-		top: 18px;
-		right: 23px;
-		width: 0;
-		height: 0;
-		border-top: 5px solid $default-text-color;
-		border-left: 5px solid transparent;
-		border-right: 5px solid transparent;
-	}
-}

package/src/lib/elements/loading-indicator/loading-indicator.component.ts

@@ -1,11 +0,0 @@
-import { Component, Input } from '@angular/core';
-
-@Component({
-	selector: 'klp-loading-indicator',
-	templateUrl: './loading-indicator.component.html',
-	styleUrls: ['./loading-indicator.component.scss'],
-})
-export class LoadingIndicatorComponent {
-	@Input() public variant: '3dots' | 'spinner' | 'textInput' | 'picker' = '3dots';
-	@Input() public size: 'tiny' | 'small' | 'medium' | 'large' | 'huge' = 'medium';
-}

package/src/lib/elements/number-input/number-input.component.html

@@ -1,7 +0,0 @@
-<input
-	type="number"
-	class="form-control"
-	[(ngModel)]="innerValue"
-	(input)="setInnerValueAndNotify($event.target.value)"
-	[placeholder]="placeholder ? placeholder : ''"
-/>

package/src/lib/elements/number-input/number-input.component.scss

@@ -1,15 +0,0 @@
-@import '../../../style/themes/default/variables';
-@import '../../../style/mixins';
-
-:host {
-  display: block;
-}
-
-input {
-  outline: none;
-  @include formControl();
-}
-
-.showErrors {
-  border-color: $default-warning;
-}

package/src/lib/elements/number-input/number-input.component.ts

@@ -1,13 +0,0 @@
-import { Component, Input } from '@angular/core';
-import { NG_VALUE_ACCESSOR } from '@angular/forms';
-import {ValueAccessorBase} from "../value-accessor-base/value-accessor-base.component";
-
-@Component({
-	selector: 'klp-form-number-input',
-	templateUrl: './number-input.component.html',
-	styleUrls: ['./number-input.component.scss'],
-	providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: NumberInputComponent, multi: true }],
-})
-export class NumberInputComponent extends ValueAccessorBase<string> {
-	@Input() placeholder: string;
-}

package/src/lib/elements/password-field/password-field.component.html

@@ -1,10 +0,0 @@
-<input
-	type="password"
-	class="form-control"
-  [ngClass]="{showErrors: isInErrorState()}"
-	[(ngModel)]="innerValue"
-	(input)="setInnerValueAndNotify($event.target.value)"
-	placeholder="{{ 'Password' }}"
-	(blur)="touch()"
-/>
-<!-- TODO: translate -->

package/src/lib/elements/password-field/password-field.component.scss

@@ -1,15 +0,0 @@
-@import '../../../style/themes/default/variables';
-@import '../../../style/mixins';
-
-:host {
-  display: block;
-}
-
-input {
-  outline: none;
-  @include formControl();
-}
-
-.showErrors {
-  border-color: $default-warning;
-}

package/src/lib/elements/password-field/password-field.component.ts

@@ -1,11 +0,0 @@
-import { Component } from '@angular/core';
-import { NG_VALUE_ACCESSOR } from '@angular/forms';
-import {ValueAccessorBase} from "../value-accessor-base/value-accessor-base.component";
-
-@Component({
-	selector: 'klp-password-field',
-	templateUrl: './password-field.component.html',
-	styleUrls: ['./password-field.component.scss'],
-	providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: PasswordFieldComponent, multi: true }],
-})
-export class PasswordFieldComponent extends ValueAccessorBase<string> {}

package/src/lib/elements/select/select.component.html

@@ -1,22 +0,0 @@
-<ng-select
-	[placeholder]="placeholder"
-	bindLabel="name"
-	bindValue="id"
-	[items]="options"
-	[clearable]="clearable"
-	[(ngModel)]="innerValue"
-	[ngClass]="{showErrors: isInErrorState()}"
-	(change)="setInnerValueAndNotify(innerValue)"
-	[multiple]="multiple"
-	[disabled]="disabled"
-	(blur)="touch()"
-	[dropdownPosition]="dropdownPosition"
-	[searchFn]="customSearchFn"
->
-	<ng-template let-item="item" ng-option-tmp>
-		{{ item.name }}
-		<div *ngIf="item.description" class="dropdown-item-description">
-			{{ item.description }}
-		</div>
-	</ng-template>
-</ng-select>