@klippa/ngx-enhancy-forms 1.0.0 → 2.1.0

package/lib/validators/dateValidator.d.ts

@@ -0,0 +1,3 @@
+import { AbstractControl, ValidationErrors } from '@angular/forms';
+export declare const invalidDateKey = "--invalid_date--";
+export declare function dateValidator(control: AbstractControl): ValidationErrors | null;

package/package.json

@@ -1,52 +1,27 @@
 {
   "name": "@klippa/ngx-enhancy-forms",
-  "version": "1.0.0",
-  "private": false,
-  "scripts": {
-    "ng": "ng",
-    "start": "ng serve",
-    "build": "ng build --prod",
-    "test": "ng test",
-    "lint": "ng lint"
-  },
-  "dependencies": {
-    "tslib": "^2.0.0"
+  "version": "2.1.0",
+  "publishConfig": {
+    "access": "public"
   },
   "peerDependencies": {
     "@angular/common": ">=10.x",
-    "@angular/material": ">=10.x",
     "@angular/core": ">=10.x",
-    "@angular/animations": ">=10.x",
-    "@angular/cdk": ">=10.x",
-    "@angular/forms": ">=10.x",
-    "@ng-select/ng-select": ">=5.1.x",
+    "ngx-mat-datefns-date-adapter": ">=10.x",
+    "date-fns": ">=2.26.x",
     "lodash": ">=4.17.x",
     "ngx-sortablejs": ">=10.x",
     "sortablejs": ">=1.14.x"
   },
-  "devDependencies": {
-    "@angular-devkit/build-angular": "^0.1002.3",
-    "@angular/material": "~10.2.5",
-    "@angular/animations": "~10.2.5",
-    "@angular/cdk": "~10.2.5",
-    "@angular/cli": "~10.2.3",
-    "@angular/common": "~10.2.5",
-    "@angular/compiler": "~10.2.5",
-    "@angular/compiler-cli": "~10.2.5",
-    "@angular/core": "~10.2.5",
-    "@angular/forms": "~10.2.5",
-    "@angular/platform-browser": "~10.2.5",
-    "@angular/platform-browser-dynamic": "~10.2.5",
-    "@ng-select/ng-select": "~5.1.0",
-    "@types/lodash": "^4.14.176",
-    "@types/node": "^12.11.1",
-    "lodash": "^4.17.21",
-    "ng-packagr": "~10.0.0",
-    "ngx-sortablejs": "~10.1.0",
-    "rxjs": "^6.5.3",
-    "sortablejs": "~1.14.0",
-    "ts-node": "~8.3.0",
-    "typescript": "~3.9.7",
-    "zone.js": "~0.10.3"
-  }
+  "dependencies": {
+    "tslib": "^2.0.0"
+  },
+  "main": "bundles/klippa-ngx-enhancy-forms.umd.js",
+  "module": "fesm2015/klippa-ngx-enhancy-forms.js",
+  "es2015": "fesm2015/klippa-ngx-enhancy-forms.js",
+  "esm2015": "esm2015/klippa-ngx-enhancy-forms.js",
+  "fesm2015": "fesm2015/klippa-ngx-enhancy-forms.js",
+  "typings": "klippa-ngx-enhancy-forms.d.ts",
+  "metadata": "klippa-ngx-enhancy-forms.metadata.json",
+  "sideEffects": false
 }

package/public-api.d.ts

@@ -0,0 +1,20 @@
+export * from './lib/ngx-enhancy-forms.module';
+export * from './lib/elements/button/button.component';
+export * from './lib/elements/checkbox/checkbox.component';
+export * from './lib/elements/datepicker/datepicker.component';
+export * from './lib/elements/email/email-input.component';
+export * from './lib/elements/loading-indicator/loading-indicator.component';
+export * from './lib/elements/number-input/number-input.component';
+export * from './lib/elements/password-field/password-field.component';
+export * from './lib/elements/select/select.component';
+export * from './lib/elements/sortable-items/sortable-items.component';
+export * from './lib/elements/text-input/text-input.component';
+export * from './lib/elements/toggle/toggle.component';
+export * from './lib/elements/value-accessor-base/value-accessor-base.component';
+export * from './lib/form/form.component';
+export * from './lib/form/form-caption/form-caption.component';
+export * from './lib/form/form-element/form-element.component';
+export * from './lib/form/form-error/form-error.component';
+export * from './lib/form/form-submit-button/form-submit-button.component';
+export * from './lib/validators/dateValidator';
+export * from './lib/types';

package/.editorconfig

@@ -1,17 +0,0 @@
-# Editor configuration, see https://editorconfig.org
-root = true
-
-[*]
-charset = utf-8
-indent_style = space
-indent_size = 2
-insert_final_newline = true
-trim_trailing_whitespace = true
-
-[*.ts]
-indent_style = tab
-quote_type = single
-
-[*.md]
-max_line_length = off
-trim_trailing_whitespace = false

package/.github/workflows/ci.yml

@@ -1,18 +0,0 @@
-name: Node.js CI
-
-on:
-  pull_request:
-    branches:
-      - main
-      - develop
-jobs:
-  setup:
-    runs-on: ubuntu-latest
-    steps:
-      - uses: actions/checkout@v2
-      - name: Use Node.js
-        uses: actions/setup-node@v1
-        with:
-          node-version: 14.x
-      - run: yarn install
-      - run: yarn run build

package/.github/workflows/release.yml

@@ -1,22 +0,0 @@
-name: NPM Publish
-
-on:
-  push:
-    branches:
-      - main
-
-jobs:
-  publish:
-    runs-on: ubuntu-latest
-    steps:
-      - uses: actions/checkout@v1
-      - uses: actions/setup-node@v1
-        with:
-          registry-url: 'https://registry.npmjs.org'
-          node-version: 14.x
-          always-auth: true
-      - run: yarn install
-      - run: yarn run build
-      - run: yarn publish --access public
-        env:
-          NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}

package/angular.json

@@ -1,28 +0,0 @@
-{
-  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
-  "version": 1,
-  "newProjectRoot": "projects",
-  "projects": {
-    "ngx-enhancy-forms": {
-      "projectType": "library",
-      "root": "./",
-      "sourceRoot": "./src",
-      "prefix": "lib",
-      "architect": {
-        "build": {
-          "builder": "@angular-devkit/build-angular:ng-packagr",
-          "options": {
-            "tsConfig": "./tsconfig.lib.json",
-            "project": "./ng-package.json"
-          },
-          "configurations": {
-            "production": {
-              "tsConfig": "./tsconfig.lib.prod.json"
-            }
-          }
-        }
-      }
-    }
-  },
-  "defaultProject": "ngx-enhancy-forms"
-}

package/ng-package.json

@@ -1,7 +0,0 @@
-{
-  "$schema": "./node_modules/ng-packagr/ng-package.schema.json",
-  "dest": "./dist",
-  "lib": {
-    "entryFile": "src/public-api.ts"
-  }
-}

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

@@ -1,18 +0,0 @@
-<button class="buttonFundamentals"
-	[ngClass]="[
-		variant,
-		size,
-		fullWidth ? 'fullWidth' : '',
-		hasBorder ? '' : 'no-border',
-		disabled ? 'disabled' : ''
-	]"
-	[type]="type"
-	(click)="onClick($event)"
->
-	<div class="caption" [ngClass]="{invisible: isLoading}">
-		<ng-content></ng-content>
-	</div>
-	<div class="loadingSpinnerContainer" *ngIf="isLoading">
-		<klp-loading-indicator variant="spinner" size="small"></klp-loading-indicator>
-	</div>
-</button>

package/src/lib/elements/button/button.component.scss

@@ -1,203 +0,0 @@
-@import '../../../style/themes/default/variables';
-
-:host {
-	display: inline-block;
-	&._fullWidth {
-		display: block;
-	}
-}
-.buttonFundamentals {
-	cursor: pointer;
-	letter-spacing: 1px;
-	font-size: 13px;
-	font-weight: bold;
-	padding: 10px 20px;
-	border: $border-default;
-	border-radius: $border-radius-default;
-	color: $default-text-color;
-}
-
-.fullWidth {
-	width: 100%;
-}
-
-.no-border {
-	border: none;
-}
-.caption {
-	&.invisible {
-		visibility: hidden;
-	}
-}
-button {
-	position: relative; // for the absolute loading spinner
-}
-.loadingSpinnerContainer {
-	position: absolute;
-	top: 0;
-	left: 0;
-	right: 0;
-	bottom: 0;
-	display: flex;
-	justify-content: center;
-	align-items: center;
-}
-
-.small {
-	padding-top: $padding-small;
-	padding-bottom: $padding-small;
-}
-
-.large {
-	line-height: 2;
-}
-
-.white {
-	color: $default-dark;
-	background-color: $default-white;
-	border-color: darken($border-color, 5%);
-	font-weight: 500;
-
-	&:hover,
-	&:active {
-		color: $default-dark;
-		background-color: lighten($border-color, 2%);
-		border-color: lighten($border-color, 2%);
-	}
-
-	&:focus {
-		text-decoration: underline;
-	}
-}
-
-.greenFilled {
-	background-color: $default-primary;
-	border-color: $default-primary;
-	color: $default-white;
-
-	&:hover {
-		color: $default-white;
-		background-color: lighten($default-primary, 5%);
-		border-color: lighten($default-primary, 5%);
-	}
-
-	&:focus {
-		text-decoration: underline;
-	}
-
-	&:active {
-		background-color: darken($default-primary, 5%);
-		border-color: darken($default-primary, 5%);
-	}
-}
-
-.greenOutlined {
-	background-color: $default-white;
-	border-color: $default-primary;
-	color: $default-primary;
-
-	&:hover {
-		color: $default-white;
-		background-color: lighten($default-primary, 5%);
-		border-color: lighten($default-primary, 5%);
-	}
-	&:focus {
-		text-decoration: underline;
-	}
-
-	&:active {
-		background-color: darken($default-primary, 5%);
-		border-color: darken($default-primary, 5%);
-	}
-}
-
-.greenLink {
-	color: $default-primary;
-	border: none;
-	background: none;
-	padding: 0;
-
-	&:hover,
-	&:focus {
-		text-decoration: underline;
-	}
-}
-
-.contextMenuItem {
-	color: $default-text-color;
-	background-color: $default-white;
-	border-color: $default-white;
-
-	&:hover {
-		background-color: $default-gray;
-		border-color: $default-gray;
-	}
-
-	&:focus,
-	&:active {
-		text-decoration: underline;
-	}
-}
-
-.redFilled {
-	color: $default-white;
-	background-color: $default-danger;
-	border-color: $default-danger;
-
-	&:hover {
-		color: $default-white;
-		background-color: lighten($default-danger, 5%);
-		border-color: lighten($default-danger, 5%);
-	}
-
-	&:focus {
-		text-decoration: underline;
-	}
-
-	&:active {
-		background-color: darken($default-danger, 5%);
-		border-color: darken($default-danger, 5%);
-	}
-}
-
-.redOutlined {
-	color: $default-danger;
-	background-color: $default-white;
-	border-color: $default-danger;
-
-	&:hover {
-		color: $default-white;
-		background-color: lighten($default-danger, 5%);
-		border-color: lighten($default-danger, 5%);
-	}
-
-	&:focus {
-		text-decoration: underline;
-	}
-
-	&:active {
-		background-color: darken($default-danger, 5%);
-		border-color: darken($default-danger, 5%);
-	}
-}
-
-.orangeFilled {
-	color: $default-white;
-	background-color: $default-warning;
-	border-color: $default-warning;
-
-	&:hover {
-		color: $default-white;
-		background-color: lighten($default-warning, 5%);
-		border-color: lighten($default-warning, 5%);
-	}
-
-	&:focus {
-		text-decoration: underline;
-	}
-
-	&:active {
-		background-color: darken($default-warning, 5%);
-		border-color: darken($default-warning, 5%);
-	}
-}

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

@@ -1,34 +0,0 @@
-import { Component, HostBinding, Input } from '@angular/core';
-
-@Component({
-	selector: 'klp-button',
-	templateUrl: './button.component.html',
-	styleUrls: ['./button.component.scss'],
-})
-export class ButtonComponent {
-	@Input() variant:
-		| 'white'
-		| 'greenFilled'
-		| 'greenOutlined'
-		| 'greenLink'
-		| 'contextMenuItem'
-		| 'redFilled'
-		| 'redOutlined'
-		| 'orangeFilled' = 'white';
-	@Input() size: 'small' | 'medium' | 'large' = 'medium';
-	@Input() fullWidth = false;
-	@Input() hasBorder = true;
-	@Input() disabled = false;
-	@Input() isLoading = false;
-	@Input() type: 'button' | 'submit' = 'button';
-
-	@HostBinding('class._fullWidth') get _() {
-		return this.fullWidth;
-	}
-
-	onClick(event: Event) {
-		if (this.disabled) {
-			event.stopPropagation();
-		}
-	}
-}

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

@@ -1,15 +0,0 @@
-<label class="componentContainer">
-	<div class="checkboxContainer">
-		<input type="checkbox" class="checkboxNative"
-			[(ngModel)]="innerValue"
-			(change)="setInnerValueAndNotify(innerValue); touch()"
-			[disabled]="disabled"
-		/>
-    <div class="checkboxVisual">
-      <svg *ngIf="innerValue" version="1.1" viewBox="0 0 4.2333 4.2333" xmlns="http://www.w3.org/2000/svg">
-        <path d="m0.17014 2.7065 1.3073 1.1798 2.5656-3.7404" stroke="currentColor" fill="none" stroke-width=".4646px" />
-      </svg>
-    </div>
-	</div>
-	<div *ngIf="caption" class="caption">{{ caption }}</div>
-</label>

package/src/lib/elements/checkbox/checkbox.component.scss

@@ -1,55 +0,0 @@
-@import '../../../style/themes/default/variables';
-$size: 22px;
-:host {
-	display: block;
-}
-.componentContainer {
-	display: flex;
-	margin-bottom: 0;
-}
-.checkboxContainer {
-	position: relative;
-}
-.caption {
-	cursor: pointer;
-	font-weight: bold;
-	color: $default-text-color;
-}
-
-.checkboxNative {
-	position: absolute;
-	opacity: 0;
-	top: 0;
-	left: 0;
-	width: $size;
-	height: $size;
-	cursor: pointer;
-}
-
-.checkboxVisual {
-	pointer-events: none;
-  color: $primary;
-  padding: $padding-tiny;
-  width: $size;
-  height: $size;
-  display: inline-block;
-  border: 2px solid $border-color;
-  border-radius: 3px;
-  margin-right: 10px;
-  font-size: 15px;
-  font-weight: 400;
-  line-height: 19px;
-  vertical-align: bottom;
-  text-align: center;
-  background-color: $default-white;
-  cursor: pointer;
-}
-
-.checkboxNative[disabled] {
-	cursor: not-allowed;
-	+ .checkboxVisual {
-		&:before {
-			color: $default-gray-dark;
-		}
-	}
-}

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

@@ -1,14 +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-checkbox',
-	templateUrl: './checkbox.component.html',
-	styleUrls: ['./checkbox.component.scss'],
-	providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: CheckboxComponent, multi: true }],
-})
-export class CheckboxComponent extends ValueAccessorBase<boolean> {
-	@Input() caption: string;
-	@Input() disabled: boolean;
-}

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

@@ -1,20 +0,0 @@
-<div class="componentContainer form-control" [ngClass]="{showErrors: isInErrorState()}">
-	<mat-form-field [floatLabel]="'never'">
-		<input
-			#nativeInput
-			matInput
-			[matDatepicker]="picker"
-			[(ngModel)]="valueForMaterialDatePicker"
-			(dateInput)="dateChanged($event)"
-			(input)="nativeValueChanged($event)"
-			[min]="minDateStartOfDay"
-			[max]="maxDateEndOfDay"
-			[placeholder]="placeholder"
-			(click)="picker.open()"
-			(blur)="touch()"
-		>
-		<mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
-		<mat-datepicker #picker
-		></mat-datepicker>
-	</mat-form-field>
-</div>

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

@@ -1,47 +0,0 @@
-@import '../../../style/themes/default/variables';
-
-:host {
-	display: block;
-	// patching some styling in the native material date picker so it is inline with our own styling
-	::ng-deep {
-		mat-form-field {
-			display: block;
-			height: 100%;
-			.mat-form-field-label {
-				color: $default-gray-faded-dark;
-			}
-			&.mat-focused .mat-form-field-label {
-				color: $default-gray-faded-dark;
-			}
-		}
-		.mat-datepicker-toggle-active {
-			color: $default-gray-dark;
-		}
-		.mat-form-field-wrapper {
-			padding-bottom: none;
-		}
-		.mat-form-field-flex {
-			flex-direction: row-reverse;
-		}
-		.mat-form-field-infix {
-			border-top: none;
-		}
-		.mat-form-field-suffix {
-			margin-right: $spacing-small;
-			&:hover {
-				.mat-button-focus-overlay {
-					opacity: 0.1;
-				}
-			}
-		}
-		.mat-form-field-underline {
-			display: none;
-		}
-	}
-}
-
-.componentContainer {
-	&.showErrors {
-		border-color: $default-warning;
-	}
-}