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

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

@@ -1,16 +1,18 @@
 import * as i0 from '@angular/core';
-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 { isDevMode, Input, ChangeDetectionStrategy, Component, inject, ElementRef, Directive, InjectionToken, ChangeDetectorRef, HostListener, HostBinding, forwardRef, ViewContainerRef, TemplateRef, ContentChild, ViewEncapsulation, 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 { firstValueFrom, isObservable, BehaviorSubject, of, merge, from, Subject, combineLatest, map as map$1, defer, Observable } from 'rxjs';
+import { take, map, switchMap, startWith, distinctUntilChanged, auditTime, tap, shareReplay, mapTo, debounceTime, takeUntil, finalize, filter } from 'rxjs/operators';
+import * as i2$1 from '@angular/common';
+import { AsyncPipe, NgIf, NgFor, NgTemplateOutlet, CommonModule, NgStyle } from '@angular/common';
+import { faCheck, faTimes, faAngleDoubleRight, faAngleDoubleLeft, faLock, faUnlock, faAngleLeft, faBars, faAngleDown } from '@fortawesome/free-solid-svg-icons';
+import * as i2 from '@theseam/ui-common/icon';
+import { TheSeamIconModule } from '@theseam/ui-common/icon';
 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 { 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';
@@ -21,8 +23,6 @@ import { moveItemInArray, transferArrayItem, DragDropModule, CdkDrag } from '@an
 import { InputBoolean, InputNumber, mixinDisabled } from '@theseam/ui-common/core';
 import { TheSeamElemResizedDirective } from '@theseam/ui-common/shared';
 import { THESEAM_WIDGET_DATA, THESEAM_WIDGET_ACCESSOR } from '@theseam/ui-common/widget';
-import * as i2 from '@theseam/ui-common/icon';
-import { TheSeamIconModule } from '@theseam/ui-common/icon';
 import * as i3 from '@theseam/ui-common/buttons';
 import { TheSeamButtonsModule } from '@theseam/ui-common/buttons';
 import { TheSeamDynamicComponentLoader } from '@theseam/ui-common/dynamic-component-loader';
@@ -65,6 +65,10 @@ const DEFAULT_USERNAME_FIELD_CONFIG = {
     pattern: /^[a-zA-Z0-9\-._@+]+$/,
 };
 
+const DEFAULT_PASSWORD_FIELD_CONFIG = {
+    minLength: 8,
+};
+
 function isCountryUSA(control) {
     return control.value === 'USA';
 }
@@ -156,6 +160,87 @@ function usernameExistsValidator(userExists) {
     };
 }
 
+/**
+ * Rejects passwords that contain the word "password" (case-insensitive).
+ */
+function passwordContentValidator(control) {
+    if (isEmptyInputValue(control.value)) {
+        return null;
+    }
+    return control.value.toLowerCase().indexOf('password') === -1
+        ? null
+        : { passwordContent: { value: 'password' } };
+}
+
+/**
+ * Requires at least one lowercase letter.
+ */
+function passwordLowercaseValidator(control) {
+    if (isEmptyInputValue(control.value)) {
+        return null;
+    }
+    return control.value.match(/[a-z]/) ? null : { passwordLowercase: {} };
+}
+
+/**
+ * Requires at least one uppercase letter.
+ */
+function passwordUppercaseValidator(control) {
+    if (isEmptyInputValue(control.value)) {
+        return null;
+    }
+    return control.value.match(/[A-Z]/) ? null : { passwordUppercase: {} };
+}
+
+/**
+ * Requires at least one digit.
+ */
+function passwordNumberValidator(control) {
+    if (isEmptyInputValue(control.value)) {
+        return null;
+    }
+    return control.value.match(/\d/) ? null : { passwordNumber: {} };
+}
+
+/**
+ * Requires at least one special character.
+ */
+function passwordSpecialCharValidator(control) {
+    if (isEmptyInputValue(control.value)) {
+        return null;
+    }
+    return control.value.match(/[-!@#$%^&*()_+|~=`{}[\]:";'<>?,./]/)
+        ? null
+        : { passwordSpecialChar: {} };
+}
+
+const DEFAULT_CONFIG = {
+    minLength: 8,
+};
+/**
+ * Requires password to meet a minimum length.
+ */
+function passwordLengthValidator(config) {
+    const c = { ...DEFAULT_CONFIG, ...config };
+    return (control) => {
+        if (isEmptyInputValue(control.value)) {
+            return null;
+        }
+        return control.value.length >= c.minLength ? null : { passwordLength: {} };
+    };
+}
+
+/**
+ * Group-level validator that checks password1 and password2 controls match.
+ */
+function passwordMatchValidator(g) {
+    const control1 = g.get('password1');
+    const control2 = g.get('password2');
+    const value1 = control1 && control1.value;
+    const value2 = control2 && control2.value;
+    return value1 === value2 ? null : { passwordMatch: true };
+}
+
 function getAddress1Validators(config, overrides) {
     const c = { ...DEFAULT_ADDRESS_FIELD_CONFIG, ...config };
     const o = { required: true, ...overrides };
@@ -250,6 +335,22 @@ function getUsernameValidators(userExists, config, overrides) {
     };
 }
 
+function getPasswordValidators(config, overrides) {
+    const o = { required: true, ...overrides };
+    return {
+        validators: [
+            ...(o.required ? [Validators.required] : []),
+            passwordContentValidator,
+            passwordLengthValidator(config),
+            passwordUppercaseValidator,
+            passwordLowercaseValidator,
+            passwordNumberValidator,
+            passwordSpecialCharValidator,
+        ],
+        asyncValidators: [],
+    };
+}
+
 function createAddress1Control(formState = null, config, overrides) {
     const v = getAddress1Validators(config, overrides);
     return new FormControl(formState, v.validators, v.asyncValidators);
@@ -285,6 +386,122 @@ function createUsernameControl(formState = null, userExists, config, overrides)
     return new FormControl(formState, v.validators, v.asyncValidators);
 }
 
+const DEFAULT_VALIDATORS = [
+    { validatorName: 'passwordLength', message: 'Be at least 8 characters.' },
+    {
+        validatorName: 'passwordLowercase',
+        message: 'At least one lowercase letter.',
+    },
+    {
+        validatorName: 'passwordUppercase',
+        message: 'At least one uppercase letter.',
+    },
+    { validatorName: 'passwordNumber', message: 'At least one number.' },
+    {
+        validatorName: 'passwordSpecialChar',
+        message: 'At least one special character (!, @, #, etc.).',
+    },
+    {
+        validatorName: 'passwordContent',
+        message: 'Cannot contain "password".',
+    },
+    {
+        validatorName: 'passwordMatch',
+        message: 'Both password fields must match.',
+        target: 'group',
+    },
+];
+class TheSeamPasswordValidatorsListComponent {
+    _successIcon = { icon: faCheck, iconClass: 'text-success' };
+    _errorIcon = { icon: faTimes, iconClass: 'text-danger' };
+    fieldOneName = 'password1';
+    fieldTwoName = 'password2';
+    /**
+     * Override the default validator list. Each item specifies a validatorName,
+     * display message, and optionally whether the error is on the field or group.
+     */
+    validators = DEFAULT_VALIDATORS;
+    get control() {
+        return this._controlSubject.value;
+    }
+    set control(value) {
+        this._controlSubject.next(value);
+    }
+    _controlSubject = new BehaviorSubject(undefined);
+    _touched = new BehaviorSubject(false);
+    _records$ = this._createRecordsObservable();
+    ngDoCheck() {
+        const fieldOne = this._getField(this.fieldOneName);
+        const fieldTwo = this._getField(this.fieldTwoName);
+        if (!fieldOne || !fieldTwo) {
+            return;
+        }
+        const touched = fieldOne.touched || fieldTwo.touched;
+        if (this._touched.value !== touched) {
+            this._touched.next(touched);
+        }
+    }
+    _getField(name) {
+        return this.control?.get(name);
+    }
+    _createRecordsObservable() {
+        return this._controlSubject.pipe(switchMap((control) => {
+            if (!control) {
+                return of([]);
+            }
+            return merge(control.statusChanges, this._touched).pipe(startWith(control.status), map(() => this._buildRecords(control)));
+        }));
+    }
+    _buildRecords(group) {
+        const fieldOne = this._getField(this.fieldOneName);
+        const fieldTwo = this._getField(this.fieldTwoName);
+        return this.validators.map((item) => {
+            const record = {
+                _id: item.validatorName,
+                message: item.message,
+            };
+            if (!fieldOne || !fieldTwo) {
+                return record;
+            }
+            const isGroupValidator = item.target === 'group';
+            if (isGroupValidator) {
+                // Group validators only show status when both fields are dirty
+                if (!fieldOne.dirty || !fieldTwo.dirty) {
+                    return record;
+                }
+                const hasError = group.hasError(item.validatorName);
+                Object.assign(record, hasError ? this._errorIcon : this._successIcon);
+            }
+            else {
+                // Field validators show status when password1 is dirty
+                if (!fieldOne.dirty) {
+                    return record;
+                }
+                const hasError = fieldOne.hasError(item.validatorName);
+                Object.assign(record, hasError ? this._errorIcon : this._successIcon);
+            }
+            return record;
+        });
+    }
+    _trackBy(_index, item) {
+        return item._id;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: TheSeamPasswordValidatorsListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: TheSeamPasswordValidatorsListComponent, isStandalone: true, selector: "seam-password-validators-list", inputs: { fieldOneName: "fieldOneName", fieldTwoName: "fieldTwoName", validators: "validators", control: "control" }, ngImport: i0, template: "<h5 class=\"password-validators-list--header\">\n  Password must meet the following\n  <br />\n  requirements:\n</h5>\n<hr />\n<div class=\"password-validators-list--items\">\n  @for (item of _records$ | async; track item._id) {\n    <div class=\"password-validators-list--item\">\n      <div class=\"password-validators-list--item-icon\">\n        @if (item.icon) {\n          <seam-icon [icon]=\"item.icon\" [class]=\"item.iconClass\"></seam-icon>\n        }\n      </div>\n      {{ item.message }}\n    </div>\n  }\n</div>\n", styles: [":host{display:flex;flex-direction:column;width:340px}@media screen and (max-width:340px){:host{width:auto}}.password-validators-list--header{color:var(--gray-900, #212529);font-weight:500;font-size:17px;text-align:center;padding:6px 10px 0;margin-bottom:0}hr{margin:5px 0 10px}.password-validators-list--items{color:#000;font-size:15px;padding:0 10px 10px 21px}.password-validators-list--item{display:flex;flex-direction:row}.password-validators-list--item-icon{flex:0 0 auto;width:30px;height:24px}\n"], dependencies: [{ kind: "ngmodule", type: TheSeamIconModule }, { kind: "component", type: i2.IconComponent, selector: "seam-icon", inputs: ["grayscaleOnDisable", "disabled", "iconClass", "icon", "size", "showDefaultOnError", "defaultIcon", "iconType"] }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: TheSeamPasswordValidatorsListComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'seam-password-validators-list', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [AsyncPipe, TheSeamIconModule], template: "<h5 class=\"password-validators-list--header\">\n  Password must meet the following\n  <br />\n  requirements:\n</h5>\n<hr />\n<div class=\"password-validators-list--items\">\n  @for (item of _records$ | async; track item._id) {\n    <div class=\"password-validators-list--item\">\n      <div class=\"password-validators-list--item-icon\">\n        @if (item.icon) {\n          <seam-icon [icon]=\"item.icon\" [class]=\"item.iconClass\"></seam-icon>\n        }\n      </div>\n      {{ item.message }}\n    </div>\n  }\n</div>\n", styles: [":host{display:flex;flex-direction:column;width:340px}@media screen and (max-width:340px){:host{width:auto}}.password-validators-list--header{color:var(--gray-900, #212529);font-weight:500;font-size:17px;text-align:center;padding:6px 10px 0;margin-bottom:0}hr{margin:5px 0 10px}.password-validators-list--items{color:#000;font-size:15px;padding:0 10px 10px 21px}.password-validators-list--item{display:flex;flex-direction:row}.password-validators-list--item-icon{flex:0 0 auto;width:30px;height:24px}\n"] }]
+        }], propDecorators: { fieldOneName: [{
+                type: Input
+            }], fieldTwoName: [{
+                type: Input
+            }], validators: [{
+                type: Input
+            }], control: [{
+                type: Input
+            }] } });
+
 function createAddressFormGroup(options) {
     const config = options.config;
     const countryRequiredOutsideUSA = options.countryRequiredOutsideUSA ?? true;
@@ -317,6 +534,14 @@ function createAddressFormGroup(options) {
     return { group, subscription };
 }
 
+function createPasswordFormGroup(config) {
+    const v = getPasswordValidators(config);
+    return new FormGroup({
+        password1: new FormControl(null, v.validators, v.asyncValidators),
+        password2: new FormControl(null, Validators.required),
+    }, { validators: [passwordMatchValidator] });
+}
+
 // Models
 
 class BaseLayoutContentFooterDirective {
@@ -4559,5 +4784,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_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 };
+export { BaseLayoutContentDirective, BaseLayoutContentFooterDirective, BaseLayoutContentHeaderDirective, BaseLayoutSideBarDirective, BaseLayoutSideBarFooterDirective, BaseLayoutSideBarHeaderDirective, BaseLayoutTopBarDirective, DEFAULT_ADDRESS_FIELD_CONFIG, DEFAULT_PASSWORD_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, TheSeamPasswordValidatorsListComponent, TheSeamSchemaFormFrameworkComponent, TheSeamSchemaFormModule, TheSeamSideNavModule, TheSeamTopBarComponent, TheSeamTopBarModule, TopBarCompactMenuBtnDetailDirective, TopBarItemDirective, TopBarMenuBtnDetailDirective, TopBarMenuButtonComponent, TopBarMenuDirective, TopBarNavToggleBtnDetailDirective, TopBarTitleComponent, applyItemConfig, areSameHorizontalNavItem, canBeActive, canExpand, canHaveChildren, computeDirection, createAddress1Control, createAddress2Control, createAddressFormGroup, createCityControl, createCountryControl, createPasswordFormGroup, createStateControl, createUsernameControl, createZipControl, extendFramework, fader, findHorizontalNavLinkItems, findLinkItems, getAddress1Validators, getAddress2Validators, getCityValidators, getCountryValidators, getHorizontalNavItemStateProp, getItemStateProp, getPasswordValidators, getStateValidators, getUrlSegments, getUsernameValidators, getZipValidators, hasActiveChild, hasChildren, hasExpandedChild, horizontalNavItemCanBeActive, horizontalNavItemCanExpand, horizontalNavItemCanHaveChildren, horizontalNavItemHasActiveChild, horizontalNavItemHasChildren, horizontalNavItemHasExpandedChild, ifUSA, isCountryUSA, isExpanded, isHorizontalNavItemActive, isHorizontalNavItemExpanded, isHorizontalNavItemFocused, isHorizontalNavItemType, isNavItemActive, isNavItemType, passwordContentValidator, passwordLengthValidator, passwordLowercaseValidator, passwordMatchValidator, passwordNumberValidator, passwordSpecialCharValidator, passwordUppercaseValidator, routeChanges, seamRouteTransition, setDefaultHorizontalNavItemState, setDefaultState, setHorizontalNavItemStateProp, setItemStateProp, sideNavExpandStateChangeFn, sideToSide, slider, stateProvinceRegionValidator, stepper, transformer, usernameExistsValidator };
 //# sourceMappingURL=theseam-ui-common-framework.mjs.map