@dereekb/dbx-form 2.0.0 → 4.0.0

package/lib/formly/template/index.d.ts

@@ -0,0 +1,2 @@
+export * from './login';
+export * from './available';

package/lib/formly/template/login.d.ts

@@ -0,0 +1,59 @@
+import { TextFieldConfig } from '../field/value/text/text.field';
+import { EmailFieldConfig } from '../field/value/text/text.additional.field';
+import { FormlyFieldConfig } from "@ngx-formly/core";
+import { Maybe } from '@dereekb/util';
+/**
+ * Convenience interface for the password parameters configuration for a TextPasswordField.
+ */
+export interface TextPasswordFieldPasswordParameters extends Partial<Pick<TextFieldConfig, 'maxLength' | 'minLength' | 'pattern'>> {
+}
+/**
+ * textPasswordField() configuration.
+ */
+export interface TextPasswordFieldConfig extends Omit<TextFieldConfig, 'inputType' | 'key'>, Partial<Pick<TextFieldConfig, 'key'>> {
+}
+/**
+ * Configured simple text password field.
+ *
+ * @param config
+ * @returns
+ */
+export declare function textPasswordField(config?: TextPasswordFieldConfig): FormlyFieldConfig;
+/**
+ * Configured verify field for a password.
+ * @param config
+ * @returns
+ */
+export declare function textVerifyPasswordField(config?: TextPasswordFieldConfig): FormlyFieldConfig;
+export interface TextPasswordWithVerifyFieldConfig {
+    password?: TextPasswordFieldConfig;
+    verifyPassword?: TextPasswordFieldConfig;
+}
+export declare function textPasswordWithVerifyFieldGroup(config: TextPasswordWithVerifyFieldConfig): FormlyFieldConfig;
+export interface UsernameLoginFieldUsernameConfig {
+    email?: Omit<EmailFieldConfig, 'key'>;
+    username?: Omit<TextFieldConfig, 'key'>;
+}
+/**
+ * usernamePasswordLoginFields() configuration.
+ */
+export interface UsernameLoginFieldsConfig {
+    username: 'email' | 'username' | UsernameLoginFieldUsernameConfig;
+    password?: TextPasswordFieldConfig;
+    verifyPassword?: Maybe<boolean | TextPasswordFieldConfig>;
+}
+/**
+ * Value type exported by usernameLoginFields()
+ */
+export interface DefaultUsernameLoginFieldsValue {
+    username: string;
+    password: string;
+    verifyPassword?: string;
+}
+/**
+ * Template for login field that takes in a username and password.
+ *
+ * @param param0
+ * @returns
+ */
+export declare function usernamePasswordLoginFields({ username, password, verifyPassword }: UsernameLoginFieldsConfig): FormlyFieldConfig[];

package/lib/validator/available.d.ts

@@ -0,0 +1,30 @@
+import { Observable } from 'rxjs';
+import { AsyncValidatorFn } from "@angular/forms";
+export declare const FIELD_VALUE_IS_AVAILABLE_VALIDATION_KEY = "fieldValueIsAvailable";
+export declare const FIELD_VALUE_IS_AVAILABLE_ERROR_VALIDATION_KEY = "fieldValueIsAvailableError";
+export declare type FieldValueIsAvailableValidatorFunction<T> = (value: T) => Observable<boolean>;
+export interface FieldValueIsAvailableValidatorConfig<T> {
+    /**
+     * How long to wait in between value changes.
+     */
+    throttle?: number;
+    /**
+     * Returns an observable that checks whether or not the value is currently available.
+     *
+     * @param value
+     */
+    readonly checkValueIsAvailable: FieldValueIsAvailableValidatorFunction<T>;
+    /**
+     * Custom message for this validator.
+     */
+    message?: string;
+}
+/**
+ * Validator for validating all values within an object.
+ *
+ * This is useful for validating a control group where two or more values are expected to be the same, such as a password and a password verification field.
+ *
+ * @param config
+ * @returns
+ */
+export declare function fieldValueIsAvailableValidator<T>(config: FieldValueIsAvailableValidatorConfig<T>): AsyncValidatorFn;

package/lib/validator/field.d.ts

@@ -0,0 +1,32 @@
+import { ValidatorFn } from "@angular/forms";
+import { KeyValueTupleFilter, IsEqualFunction } from "@dereekb/util";
+export declare const FIELD_VALUES_ARE_EQUAL_VALIDATION_KEY = "fieldValuesAreEqual";
+export interface FieldValuesAreEqualValidatorConfig<T extends object = any> {
+    /**
+     * Keys of the value to match on.
+     *
+     * If none are defined, then all fields from the control are matched.
+     */
+    keysFilter?: string[];
+    /**
+     * Full filter to use, if defined.
+     */
+    valuesFilter?: KeyValueTupleFilter<T, any>;
+    /**
+     * Optional equivalence comparator.
+     */
+    isEqual?: IsEqualFunction<T>;
+    /**
+     * Custom message for this validator.
+     */
+    message?: string;
+}
+/**
+ * Validator for validating all values within an object.
+ *
+ * This is useful for validating a control group where two or more values are expected to be the same, such as a password and a password verification field.
+ *
+ * @param config
+ * @returns
+ */
+export declare function fieldValuesAreEqualValidator<T extends object = any>(config?: FieldValuesAreEqualValidatorConfig<T>): ValidatorFn;

package/lib/validator/index.d.ts

@@ -1,3 +1,5 @@
 export * from './boolean';
 export * from './email';
+export * from './field';
 export * from './number';
+export * from './available';

package/package.json

@@ -1,68 +1,40 @@
 {
   "name": "@dereekb/dbx-form",
-  "version": "2.0.0",
+  "version": "4.0.0",
   "peerDependencies": {
-    "@angular/common": "^13.1.0",
-    "@angular/core": "^13.1.0",
-    "@dereekb/dbx-core": "2.0.0",
-    "@ngrx/component-store": "^13.0.2",
-    "@ngrx/data": "^13.0.2",
-    "@ngrx/effects": "^13.0.2",
-    "@ngrx/entity": "^13.0.2",
-    "@ngrx/store": "^13.0.2",
-    "rxjs": "^7.5.2",
-    "@dereekb/util": "2.0.0",
-    "extra-set": "^2.2.11",
-    "make-error": "^1.3.0",
-    "@dereekb/rxjs": "2.0.0",
-    "ms": "^3.0.0-canary.1",
-    "@angular/platform-browser": "^13.0.0",
-    "date-fns": "^2.28.0",
-    "@dereekb/date": "2.0.0",
-    "class-transformer": "^0.5.1",
-    "class-validator": "^0.13.2",
-    "date-fns-tz": "^1.2.2",
-    "rrule": "git+https://git@github.com/dereekb/rrule.git#17adf5708d6567b4d01a3a8afd106261421ea492",
-    "@angular/router": "^13.0.0",
-    "@uirouter/core": "^6.0.8",
-    "@uirouter/angular": "^9.1.0",
+    "@angular/common": "^13.0.0",
+    "@angular/core": "^13.0.0",
+    "@dereekb/dbx-core": "4.0.0",
     "@angular/material": "^13.0.0",
-    "@dereekb/dbx-web": "2.0.0",
-    "mat-progress-buttons": "git+https://git@github.com/dereekb/mat-progress-buttons.git#60b0374a45644e8756f20b8d761738151ca3df64",
-    "@angular/flex-layout": "^13.0.0-beta.38",
-    "ng-overlay-container": "^13.0.0",
-    "@angular/cdk": "^13.0.0",
-    "angular-resize-event": "^3.1.1",
-    "ngx-infinite-scroll": "^10.0.1",
-    "linkify-string": "4.0.0-beta.3",
-    "@ngx-formly/core": "6.0.0-next.8",
+    "@dereekb/dbx-web": "4.0.0",
     "@angular/forms": "^13.0.0",
-    "@ngx-formly/material": "6.0.0-next.8",
-    "change-case": "^4.1.2",
+    "@ngx-formly/core": "6.0.0-next.9",
+    "@ngx-formly/material": "6.0.0-next.9",
     "ngx-editor": "^12.1.1",
     "ngx-mat-intl-tel-input": "^4.1.0"
   },
   "dependencies": {
     "tslib": "^2.3.0"
   },
-  "module": "fesm2015/dereekb-dbx-form.mjs",
-  "es2020": "fesm2020/dereekb-dbx-form.mjs",
-  "esm2020": "esm2020/dereekb-dbx-form.mjs",
-  "fesm2020": "fesm2020/dereekb-dbx-form.mjs",
-  "fesm2015": "fesm2015/dereekb-dbx-form.mjs",
-  "typings": "dereekb-dbx-form.d.ts",
   "exports": {
-    "./package.json": {
-      "default": "./package.json"
-    },
     ".": {
+      "sass": "./_index.scss",
       "types": "./dereekb-dbx-form.d.ts",
       "esm2020": "./esm2020/dereekb-dbx-form.mjs",
       "es2020": "./fesm2020/dereekb-dbx-form.mjs",
       "es2015": "./fesm2015/dereekb-dbx-form.mjs",
       "node": "./fesm2015/dereekb-dbx-form.mjs",
       "default": "./fesm2020/dereekb-dbx-form.mjs"
+    },
+    "./package.json": {
+      "default": "./package.json"
     }
   },
+  "module": "fesm2015/dereekb-dbx-form.mjs",
+  "es2020": "fesm2020/dereekb-dbx-form.mjs",
+  "esm2020": "esm2020/dereekb-dbx-form.mjs",
+  "fesm2020": "fesm2020/dereekb-dbx-form.mjs",
+  "fesm2015": "fesm2015/dereekb-dbx-form.mjs",
+  "typings": "dereekb-dbx-form.d.ts",
   "sideEffects": false
 }

package/lib/formly/field/fields_TODO.scss

@@ -1,4 +0,0 @@
-
-.form-wrapped-component {
-  margin: 12px 0;
-}

package/lib/formly/form_TODO.scss

@@ -1,153 +0,0 @@
-$dbx-form-container-margin: 10px;
-
-.dbx-formly {
-  margin: $dbx-form-container-margin 0;
-}
-
-.dbx-form-spacer {
-  margin-top: 24px;  
-}
-
-// OLD. Remove
-$form-submit-view-margin: 8px;
-$material-form-margin: 16px;
-
-// MARK: Form Container
-.dbx-form-container {
-  margin: $dbx-form-container-margin 0;
-}
-
-// .dbx-form-container-form-view {}
-
-// MARK: Form View
-.dbx-form-view-padded {
-  padding: 0 $material-form-margin;
-}
-
-.required-text {
-  content: "*";
-  color: red;
-  // color: mat-color($tallynote-dbx-warn);
-}
-
-.dbx-form-view {
-  // margin-bottom: $material-form-margin;
-
-}
-
-.dbx-form-view-tools {
-  text-align: right;
-}
-
-.dbx-form-view-control {
-  width: 100%;
-}
-
-// .dbx-form-view-sub-form {}
-
-.mat-input-element {
-  margin: 0; // Safari Fix
-}
-
-.mat-form-field {
-  margin: 8px 0px 16px;
-}
-
-.mat-input-placeholder {
-  text-transform: capitalize;
-}
-
-.required {
-
-  .mat-checkbox-label::after,
-  .mat-input-placeholder::after {
-    @extend .required-text;
-  }
-}
-
-.capitalized-field {
-  .mat-input-element {
-    text-transform: capitalize;
-  }
-}
-
-.dbx-form-view-checkbox-control {
-  margin: 12px 0;
-  padding-left: 15px;
-
-  .mat-checkbox-label {
-    text-transform: capitalize;
-  }
-}
-
-.form-select-align {
-  padding-top: 24px;
-}
-
-.form-anti-padding {
-  margin-top: -20px;
-}
-
-.warning {
-  color: red;
-  // color: mat-color($tallynote-dbx-warn);
-}
-
-.dbx-form-view-help {
-  font-size: 75%;
-  color: grey;
-}
-
-.dbx-form-view-hint {
-  font-size: 75%;
-  margin-top: 3px;
-}
-
-// MARK: Tabs
-.mat-tab-header {
-  margin-bottom: $material-form-margin;
-}
-
-.dbx-form-view-tab-page {
-  padding: 12px 0;
-}
-
-// MARK: Input
-.mat-form-field {
-
-  .form-suffix-button {
-    width: 1.8em;
-    height: 1.8em;
-    margin-top: -0.6em;
-  }
-
-}
-
-// MARK: Controls
-.select-form-control {
-  width: 100%;
-}
-
-.form-suffix-button {
-  .mat-icon-button {
-    width: 2em;
-    height: 2em;
-
-    .mat-icon {
-      width: 1.8em;
-      height: 1.8em;
-    }
-  }
-}
-
-.date-form-control {
-
-  .mat-datepicker-toggle {
-
-    .mat-icon-button {
-      height: 2em;
-      width: 2em;
-    }
-
-  }
-}