@theseam/ui-common 1.0.2-beta.39 → 1.0.2-beta.42

package/fesm2022/theseam-ui-common-framework.mjs

@@ -1,16 +1,19 @@
 import * as i0 from '@angular/core';
-import { inject, ElementRef, Directive, InjectionToken, ChangeDetectorRef, HostListener, HostBinding, Input, forwardRef, ViewContainerRef, isDevMode, TemplateRef, ContentChild, ViewEncapsulation, ChangeDetectionStrategy, Component, NgModule, ViewChild, EventEmitter, Output, Injectable, Injector, ViewChildren, Inject, Optional, ContentChildren } from '@angular/core';
-import { tap, map, startWith, switchMap, shareReplay, mapTo, take, auditTime, debounceTime, takeUntil, distinctUntilChanged, finalize, filter } from 'rxjs/operators';
+import { isDevMode, inject, ElementRef, Directive, InjectionToken, ChangeDetectorRef, HostListener, HostBinding, Input, forwardRef, ViewContainerRef, TemplateRef, ContentChild, ViewEncapsulation, ChangeDetectionStrategy, Component, NgModule, ViewChild, EventEmitter, Output, Injectable, Injector, ViewChildren, Inject, Optional, ContentChildren } from '@angular/core';
+import * as i3$2 from '@angular/forms';
+import { AbstractControl, Validators, FormControl, FormGroup, ReactiveFormsModule } from '@angular/forms';
+import { isEmptyInputValue, hasProperty, notNullOrUndefined, observeControlValue, observeControlStatus, isNullOrUndefined } from '@theseam/ui-common/utils';
+import { firstValueFrom, isObservable, BehaviorSubject, from, Subject, of, combineLatest, map as map$1, defer, Observable } from 'rxjs';
+import { take, map, distinctUntilChanged, auditTime, tap, startWith, switchMap, shareReplay, mapTo, debounceTime, takeUntil, finalize, filter } from 'rxjs/operators';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import * as i1 from '@angular/cdk/portal';
 import { TemplatePortal, PortalModule, BasePortalOutlet, ComponentPortal } from '@angular/cdk/portal';
 import * as i2$1 from '@angular/common';
 import { NgIf, NgFor, NgTemplateOutlet, AsyncPipe, CommonModule, NgStyle } from '@angular/common';
-import { BehaviorSubject, from, isObservable, Subject, of, combineLatest, map as map$1, defer, Observable } from 'rxjs';
 import { faAngleDoubleRight, faAngleDoubleLeft, faLock, faUnlock, faAngleLeft, faBars, faAngleDown } from '@fortawesome/free-solid-svg-icons';
 import * as i1$3 from '@theseam/ui-common/layout';
 import { TheSeamLayoutService, TheSeamLayoutModule } from '@theseam/ui-common/layout';
 import { TheSeamOverlayScrollbarDirective } from '@theseam/ui-common/scrollbar';
-import { hasProperty, notNullOrUndefined, observeControlValue, observeControlStatus, isNullOrUndefined } from '@theseam/ui-common/utils';
 import { __decorate } from 'tslib';
 import { coerceNumberProperty, coerceBooleanProperty } from '@angular/cdk/coercion';
 import * as i1$1 from '@angular/cdk/drag-drop';
@@ -37,8 +40,6 @@ import { MenuComponent, TheSeamMenuModule } from '@theseam/ui-common/menu';
 import { faUserCircle } from '@fortawesome/free-regular-svg-icons';
 import * as i1$5 from '@ajsf/core';
 import { JsonSchemaFormModule, isArray, buildTitleMap, hasOwn, JsonSchemaFormService, Framework, WidgetLibraryModule, FrameworkLibraryService, WidgetLibraryService } from '@ajsf/core';
-import * as i3$2 from '@angular/forms';
-import { ReactiveFormsModule } from '@angular/forms';
 import { TheSeamCheckboxComponent } from '@theseam/ui-common/checkbox';
 import * as i4$1 from '@theseam/ui-common/form-field';
 import { TheSeamFormFieldModule } from '@theseam/ui-common/form-field';
@@ -50,6 +51,274 @@ import { Platform } from '@angular/cdk/platform';
 import * as i4$2 from '@theseam/ui-common/tiled-select';
 import { TheSeamTiledSelectModule } from '@theseam/ui-common/tiled-select';
 
+const DEFAULT_ADDRESS_FIELD_CONFIG = {
+    address1MaxLength: 50,
+    address2MaxLength: 50,
+    cityMaxLength: 50,
+    stateMaxLength: 200,
+    countryMaxLength: 10,
+    zipcodePattern: /^\d{5}(?:[-\s]\d{4})?$/,
+};
+
+const DEFAULT_USERNAME_FIELD_CONFIG = {
+    minLength: 8,
+    pattern: /^[a-zA-Z0-9\-._@+]+$/,
+};
+
+function isCountryUSA(control) {
+    return control.value === 'USA';
+}
+
+/**
+ * Use Validator if 'country' control value is 'USA'.
+ *
+ * If `countryControlOrPath` is not provided, it will be assumed there is a
+ * sibling named 'country'.
+ */
+function ifUSA(fn, countryControlOrPath) {
+    return (control) => {
+        let countryControl = null;
+        if (countryControlOrPath) {
+            if (typeof countryControlOrPath === 'string' ||
+                Array.isArray(countryControlOrPath)) {
+                countryControl = control.parent?.get(countryControlOrPath) ?? null;
+            }
+            else {
+                countryControl = countryControlOrPath;
+            }
+        }
+        else {
+            countryControl = control.parent?.get('country') ?? null;
+        }
+        if (!countryControl) {
+            return null;
+        }
+        if (!(countryControl instanceof AbstractControl)) {
+            if (isDevMode()) {
+                // eslint-disable-next-line no-console
+                console.warn(`ifUSA expects 'country' control to be a FormControl.`);
+            }
+            return null;
+        }
+        if (!isEmptyInputValue(countryControl.value) &&
+            isCountryUSA(countryControl)) {
+            return fn(control);
+        }
+        return null;
+    };
+}
+
+function stateProvinceRegionValidator(stateCodes) {
+    return async (control) => {
+        const errorName = 'stateProvinceRegion';
+        const value = control.value;
+        if (isEmptyInputValue(value)) {
+            return null;
+        }
+        if (control.parent == null) {
+            return null;
+        }
+        const countryControl = control.parent.get('country');
+        if (countryControl === null) {
+            // eslint-disable-next-line no-console
+            console.warn(`stateProvinceRegionValidator requires sibling control named 'country'.`);
+            return null;
+        }
+        if (isCountryUSA(countryControl)) {
+            const isValidStateCode = await firstValueFrom(stateCodes.pipe(take(1), map((codes) => codes.indexOf(value) !== -1)));
+            return isValidStateCode
+                ? null
+                : {
+                    [errorName]: {
+                        reason: `If value of 'country' is 'USA' then a valid state must be selected.`,
+                    },
+                };
+        }
+        return null;
+    };
+}
+
+/**
+ * Validates that a username already exists.
+ *
+ * Mirrors the `emailExistsValidator` pattern from `@theseam/ui-common/validators`.
+ */
+function usernameExistsValidator(userExists) {
+    return (control) => {
+        const validationResult = (exists) => {
+            return exists === false ? null : { usernameExists: {} };
+        };
+        const fnRes = userExists(control.value);
+        if (isObservable(fnRes)) {
+            return firstValueFrom(fnRes.pipe(map(validationResult)));
+        }
+        return Promise.resolve(fnRes).then(validationResult);
+    };
+}
+
+function getAddress1Validators(config, overrides) {
+    const c = { ...DEFAULT_ADDRESS_FIELD_CONFIG, ...config };
+    const o = { required: true, ...overrides };
+    const validators = [
+        ...(o.required ? [Validators.required] : []),
+        Validators.maxLength(c.address1MaxLength),
+        Validators.pattern(/[A-Za-z0-9]+/),
+    ];
+    return { validators, asyncValidators: [] };
+}
+
+function getAddress2Validators(config, overrides) {
+    const c = { ...DEFAULT_ADDRESS_FIELD_CONFIG, ...config };
+    const o = { required: false, ...overrides };
+    return {
+        validators: [
+            ...(o.required ? [Validators.required] : []),
+            Validators.maxLength(c.address2MaxLength),
+        ],
+        asyncValidators: [],
+    };
+}
+
+function getCityValidators(config, overrides) {
+    const c = { ...DEFAULT_ADDRESS_FIELD_CONFIG, ...config };
+    const o = { required: true, ...overrides };
+    const validators = [
+        ...(o.required ? [Validators.required] : []),
+        Validators.maxLength(c.cityMaxLength),
+        Validators.pattern(/[A-Za-z0-9]+/),
+    ];
+    return { validators, asyncValidators: [] };
+}
+
+const onlyAllowUsaValidator = (control) => {
+    if (isEmptyInputValue(control.value)) {
+        return null;
+    }
+    return control.value !== 'USA' ? { onlyAllowUsa: {} } : null;
+};
+function getCountryValidators(config, options, overrides) {
+    const c = { ...DEFAULT_ADDRESS_FIELD_CONFIG, ...config };
+    const o = { required: true, ...overrides };
+    const validators = [
+        ...(o.required ? [Validators.required] : []),
+        Validators.maxLength(c.countryMaxLength),
+    ];
+    if (options?.onlyAllowUsa) {
+        validators.push(onlyAllowUsaValidator);
+    }
+    return { validators, asyncValidators: [] };
+}
+
+function getStateValidators(stateCodes, countryControlOrPath, requiredOutsideUSA = true, config) {
+    const c = { ...DEFAULT_ADDRESS_FIELD_CONFIG, ...config };
+    const validators = [];
+    if (requiredOutsideUSA) {
+        validators.push(Validators.required);
+    }
+    else {
+        validators.push(ifUSA(Validators.required, countryControlOrPath));
+    }
+    validators.push(Validators.maxLength(c.stateMaxLength));
+    const asyncValidators = [
+        stateProvinceRegionValidator(stateCodes),
+    ];
+    return { validators, asyncValidators };
+}
+
+function getZipValidators(countryControlOrPath, config) {
+    const c = { ...DEFAULT_ADDRESS_FIELD_CONFIG, ...config };
+    return {
+        validators: [
+            ifUSA(Validators.required, countryControlOrPath),
+            ifUSA(Validators.pattern(c.zipcodePattern), countryControlOrPath),
+            Validators.maxLength(10),
+        ],
+        asyncValidators: [],
+    };
+}
+
+function getUsernameValidators(userExists, config, overrides) {
+    const c = { ...DEFAULT_USERNAME_FIELD_CONFIG, ...config };
+    const o = { required: true, ...overrides };
+    return {
+        validators: [
+            ...(o.required ? [Validators.required] : []),
+            Validators.minLength(c.minLength),
+            Validators.pattern(c.pattern),
+        ],
+        asyncValidators: [usernameExistsValidator(userExists)],
+    };
+}
+
+function createAddress1Control(formState = null, config, overrides) {
+    const v = getAddress1Validators(config, overrides);
+    return new FormControl(formState, v.validators, v.asyncValidators);
+}
+
+function createAddress2Control(formState = null, config, overrides) {
+    const v = getAddress2Validators(config, overrides);
+    return new FormControl(formState, v.validators, v.asyncValidators);
+}
+
+function createCityControl(formState = null, config, overrides) {
+    const v = getCityValidators(config, overrides);
+    return new FormControl(formState, v.validators, v.asyncValidators);
+}
+
+function createCountryControl(formState = null, options, overrides) {
+    const v = getCountryValidators(undefined, options, overrides);
+    return new FormControl(formState, v.validators, v.asyncValidators);
+}
+
+function createStateControl(formState = null, stateCodes, requiredOutsideUSA = true) {
+    const v = getStateValidators(stateCodes, undefined, requiredOutsideUSA);
+    return new FormControl(formState, v.validators, v.asyncValidators);
+}
+
+function createZipControl(formState = null) {
+    const v = getZipValidators();
+    return new FormControl(formState, v.validators, v.asyncValidators);
+}
+
+function createUsernameControl(formState = null, userExists, config, overrides) {
+    const v = getUsernameValidators(userExists, config, overrides);
+    return new FormControl(formState, v.validators, v.asyncValidators);
+}
+
+function createAddressFormGroup(options) {
+    const config = options.config;
+    const countryRequiredOutsideUSA = options.countryRequiredOutsideUSA ?? true;
+    const defaultCountry = options.defaultCountry ?? 'USA';
+    const group = new FormGroup({
+        address1: createAddress1Control(null, config),
+        address2: createAddress2Control(null, config),
+        city: createCityControl(null, config),
+        state: createStateControl(null, options.stateCodes, countryRequiredOutsideUSA),
+        zip: createZipControl(),
+        country: createCountryControl(defaultCountry),
+    });
+    const countryCtrl = group.controls.country;
+    let countryChange$ = countryCtrl.valueChanges.pipe(map(() => isCountryUSA(countryCtrl)), distinctUntilChanged(), auditTime(0), tap(() => {
+        const sv = getStateValidators(options.stateCodes, countryCtrl, countryRequiredOutsideUSA, config);
+        group.controls.state.setValidators(sv.validators);
+        group.controls.state.setAsyncValidators(sv.asyncValidators);
+        group.controls.state.updateValueAndValidity();
+        const zv = getZipValidators(countryCtrl, config);
+        group.controls.zip.setValidators(zv.validators);
+        group.controls.zip.setAsyncValidators(zv.asyncValidators);
+        group.controls.zip.updateValueAndValidity();
+    }));
+    if (options.destroyRef) {
+        countryChange$ = countryChange$.pipe(takeUntilDestroyed(options.destroyRef));
+        countryChange$.subscribe();
+        return group;
+    }
+    const subscription = countryChange$.subscribe();
+    return { group, subscription };
+}
+
+// Models
+
 class BaseLayoutContentFooterDirective {
     _elementRef = inject(ElementRef);
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: BaseLayoutContentFooterDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
@@ -4290,5 +4559,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { BaseLayoutContentDirective, BaseLayoutContentFooterDirective, BaseLayoutContentHeaderDirective, BaseLayoutSideBarDirective, BaseLayoutSideBarFooterDirective, BaseLayoutSideBarHeaderDirective, BaseLayoutTopBarDirective, DEFAULT_SIDE_NAV_CONFIG, DashboardComponent, DashboardWidgetContainerComponent, DashboardWidgetPortalOutletDirective, DashboardWidgetTemplateContainerComponent, DashboardWidgetsComponent, DashboardWidgetsPreferencesService, DashboardWidgetsService, HierarchyLevelResolver, HierarchyRouterOutletComponent, HorizontalNavComponent, NavItemComponent, SeamRouteShellComponent, SideNavComponent, SideNavItemComponent, SideNavToggleComponent, THESEAM_BASE_LAYOUT_REF, THESEAM_DASHBOARD_WIDGETS_PREFERENCES_ACCESSOR, THESEAM_SCHEMA_FRAMEWORK_OVERRIDES, THESEAM_SIDE_NAV_ACCESSOR, THESEAM_SIDE_NAV_CONFIG, THE_SEAM_BASE_LAYOUT, TheSeamBaseLayoutComponent, TheSeamBaseLayoutModule, TheSeamBaseLayoutNavToggleDirective, TheSeamDashboardModule, TheSeamDynamicRouterModule, TheSeamFramework, TheSeamNavModule, TheSeamSchemaFormFrameworkComponent, TheSeamSchemaFormModule, TheSeamSideNavModule, TheSeamTopBarComponent, TheSeamTopBarModule, TopBarCompactMenuBtnDetailDirective, TopBarItemDirective, TopBarMenuBtnDetailDirective, TopBarMenuButtonComponent, TopBarMenuDirective, TopBarNavToggleBtnDetailDirective, TopBarTitleComponent, applyItemConfig, areSameHorizontalNavItem, canBeActive, canExpand, canHaveChildren, computeDirection, extendFramework, fader, findHorizontalNavLinkItems, findLinkItems, getHorizontalNavItemStateProp, getItemStateProp, getUrlSegments, hasActiveChild, hasChildren, hasExpandedChild, horizontalNavItemCanBeActive, horizontalNavItemCanExpand, horizontalNavItemCanHaveChildren, horizontalNavItemHasActiveChild, horizontalNavItemHasChildren, horizontalNavItemHasExpandedChild, isExpanded, isHorizontalNavItemActive, isHorizontalNavItemExpanded, isHorizontalNavItemFocused, isHorizontalNavItemType, isNavItemActive, isNavItemType, routeChanges, seamRouteTransition, setDefaultHorizontalNavItemState, setDefaultState, setHorizontalNavItemStateProp, setItemStateProp, sideNavExpandStateChangeFn, sideToSide, slider, stepper, transformer };
+export { BaseLayoutContentDirective, BaseLayoutContentFooterDirective, BaseLayoutContentHeaderDirective, BaseLayoutSideBarDirective, BaseLayoutSideBarFooterDirective, BaseLayoutSideBarHeaderDirective, BaseLayoutTopBarDirective, DEFAULT_ADDRESS_FIELD_CONFIG, DEFAULT_SIDE_NAV_CONFIG, DEFAULT_USERNAME_FIELD_CONFIG, DashboardComponent, DashboardWidgetContainerComponent, DashboardWidgetPortalOutletDirective, DashboardWidgetTemplateContainerComponent, DashboardWidgetsComponent, DashboardWidgetsPreferencesService, DashboardWidgetsService, HierarchyLevelResolver, HierarchyRouterOutletComponent, HorizontalNavComponent, NavItemComponent, SeamRouteShellComponent, SideNavComponent, SideNavItemComponent, SideNavToggleComponent, THESEAM_BASE_LAYOUT_REF, THESEAM_DASHBOARD_WIDGETS_PREFERENCES_ACCESSOR, THESEAM_SCHEMA_FRAMEWORK_OVERRIDES, THESEAM_SIDE_NAV_ACCESSOR, THESEAM_SIDE_NAV_CONFIG, THE_SEAM_BASE_LAYOUT, TheSeamBaseLayoutComponent, TheSeamBaseLayoutModule, TheSeamBaseLayoutNavToggleDirective, TheSeamDashboardModule, TheSeamDynamicRouterModule, TheSeamFramework, TheSeamNavModule, TheSeamSchemaFormFrameworkComponent, TheSeamSchemaFormModule, TheSeamSideNavModule, TheSeamTopBarComponent, TheSeamTopBarModule, TopBarCompactMenuBtnDetailDirective, TopBarItemDirective, TopBarMenuBtnDetailDirective, TopBarMenuButtonComponent, TopBarMenuDirective, TopBarNavToggleBtnDetailDirective, TopBarTitleComponent, applyItemConfig, areSameHorizontalNavItem, canBeActive, canExpand, canHaveChildren, computeDirection, createAddress1Control, createAddress2Control, createAddressFormGroup, createCityControl, createCountryControl, createStateControl, createUsernameControl, createZipControl, extendFramework, fader, findHorizontalNavLinkItems, findLinkItems, getAddress1Validators, getAddress2Validators, getCityValidators, getCountryValidators, getHorizontalNavItemStateProp, getItemStateProp, getStateValidators, getUrlSegments, getUsernameValidators, getZipValidators, hasActiveChild, hasChildren, hasExpandedChild, horizontalNavItemCanBeActive, horizontalNavItemCanExpand, horizontalNavItemCanHaveChildren, horizontalNavItemHasActiveChild, horizontalNavItemHasChildren, horizontalNavItemHasExpandedChild, ifUSA, isCountryUSA, isExpanded, isHorizontalNavItemActive, isHorizontalNavItemExpanded, isHorizontalNavItemFocused, isHorizontalNavItemType, isNavItemActive, isNavItemType, routeChanges, seamRouteTransition, setDefaultHorizontalNavItemState, setDefaultState, setHorizontalNavItemStateProp, setItemStateProp, sideNavExpandStateChangeFn, sideToSide, slider, stateProvinceRegionValidator, stepper, transformer, usernameExistsValidator };
 //# sourceMappingURL=theseam-ui-common-framework.mjs.map