@dereekb/dbx-form 13.10.2 → 13.10.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -2619,52 +2619,54 @@ function _finalizeValidation(instance, fieldDef) {
|
|
|
2619
2619
|
}
|
|
2620
2620
|
function _finalizeValidators(instance, fieldDef, validation) {
|
|
2621
2621
|
const validators = validation.validators;
|
|
2622
|
-
|
|
2623
|
-
|
|
2624
|
-
|
|
2625
|
-
|
|
2626
|
-
|
|
2627
|
-
|
|
2628
|
-
|
|
2629
|
-
|
|
2630
|
-
|
|
2631
|
-
|
|
2632
|
-
|
|
2633
|
-
|
|
2634
|
-
else {
|
|
2635
|
-
const { fn, reusableDefinition: _reusableDefinition, ...rest } = entry;
|
|
2636
|
-
const functionName = rest.functionName ?? _generateValidatorFunctionName();
|
|
2637
|
-
hasOneOrMoreValidatorFunctions = true;
|
|
2638
|
-
switch (entry.type) {
|
|
2639
|
-
case 'custom':
|
|
2640
|
-
validatorCustomFnConfig.validators[functionName] = fn;
|
|
2641
|
-
break;
|
|
2642
|
-
case 'async':
|
|
2643
|
-
validatorCustomFnConfig.asyncValidators[functionName] = fn;
|
|
2644
|
-
break;
|
|
2645
|
-
default:
|
|
2646
|
-
break;
|
|
2622
|
+
if (validators) {
|
|
2623
|
+
let hasOneOrMoreValidatorFunctions = false;
|
|
2624
|
+
const validatorCustomFnConfig = { validators: {}, asyncValidators: {} };
|
|
2625
|
+
let validatorFnNameCount = 0;
|
|
2626
|
+
function _generateValidatorFunctionName() {
|
|
2627
|
+
validatorFnNameCount += 1;
|
|
2628
|
+
return `__vfn__${fieldDef.key}_${validatorFnNameCount}`;
|
|
2629
|
+
}
|
|
2630
|
+
const finalizedValidators = validators.map((entry) => {
|
|
2631
|
+
let result;
|
|
2632
|
+
if (!('fn' in entry)) {
|
|
2633
|
+
result = entry;
|
|
2647
2634
|
}
|
|
2648
|
-
|
|
2649
|
-
|
|
2650
|
-
|
|
2651
|
-
|
|
2652
|
-
|
|
2653
|
-
|
|
2654
|
-
|
|
2655
|
-
|
|
2656
|
-
|
|
2657
|
-
|
|
2658
|
-
|
|
2659
|
-
|
|
2660
|
-
|
|
2661
|
-
|
|
2662
|
-
|
|
2663
|
-
|
|
2664
|
-
|
|
2665
|
-
|
|
2666
|
-
customFnConfig: validatorFormConfig
|
|
2635
|
+
else {
|
|
2636
|
+
const { fn, reusableDefinition: _reusableDefinition, ...rest } = entry;
|
|
2637
|
+
const functionName = rest.functionName ?? _generateValidatorFunctionName();
|
|
2638
|
+
hasOneOrMoreValidatorFunctions = true;
|
|
2639
|
+
switch (entry.type) {
|
|
2640
|
+
case 'custom':
|
|
2641
|
+
validatorCustomFnConfig.validators[functionName] = fn;
|
|
2642
|
+
break;
|
|
2643
|
+
case 'async':
|
|
2644
|
+
validatorCustomFnConfig.asyncValidators[functionName] = fn;
|
|
2645
|
+
break;
|
|
2646
|
+
default:
|
|
2647
|
+
break;
|
|
2648
|
+
}
|
|
2649
|
+
// Return a clean ValidatorConfig without fn or reusableDefinition
|
|
2650
|
+
result = { ...rest, functionName };
|
|
2651
|
+
}
|
|
2652
|
+
return result;
|
|
2667
2653
|
});
|
|
2654
|
+
instance.setValidation({
|
|
2655
|
+
validators: finalizedValidators,
|
|
2656
|
+
validationMessages: validation.validationMessages
|
|
2657
|
+
});
|
|
2658
|
+
if (hasOneOrMoreValidatorFunctions) {
|
|
2659
|
+
const validatorFormConfig = {};
|
|
2660
|
+
if (Object.keys(validatorCustomFnConfig.validators).length > 0) {
|
|
2661
|
+
validatorFormConfig.validators = validatorCustomFnConfig.validators;
|
|
2662
|
+
}
|
|
2663
|
+
if (Object.keys(validatorCustomFnConfig.asyncValidators).length > 0) {
|
|
2664
|
+
validatorFormConfig.asyncValidators = validatorCustomFnConfig.asyncValidators;
|
|
2665
|
+
}
|
|
2666
|
+
instance.addFormConfig({
|
|
2667
|
+
customFnConfig: validatorFormConfig
|
|
2668
|
+
});
|
|
2669
|
+
}
|
|
2668
2670
|
}
|
|
2669
2671
|
}
|
|
2670
2672
|
// MARK: Utils
|
|
@@ -10537,12 +10539,19 @@ class DbxForgeFormFieldWrapperComponent {
|
|
|
10537
10539
|
errorId = computed(() => `${this.keySignal()}-error`, ...(ngDevMode ? [{ debugName: "errorId" }] : /* istanbul ignore next */ []));
|
|
10538
10540
|
hintId = computed(() => `${this.keySignal()}-hint`, ...(ngDevMode ? [{ debugName: "hintId" }] : /* istanbul ignore next */ []));
|
|
10539
10541
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: DbxForgeFormFieldWrapperComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
10540
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.10", type: DbxForgeFormFieldWrapperComponent, isStandalone: true, selector: "dbx-forge-form-field-wrapper", inputs: { fieldInputs: { classPropertyName: "fieldInputs", publicName: "fieldInputs", isSignal: true, isRequired: false, transformFunction: null }, props: { classPropertyName: "props", publicName: "props", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classNameSignal()" }, classAttribute: "
|
|
10542
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.10", type: DbxForgeFormFieldWrapperComponent, isStandalone: true, selector: "dbx-forge-form-field-wrapper", inputs: { fieldInputs: { classPropertyName: "fieldInputs", publicName: "fieldInputs", isSignal: true, isRequired: false, transformFunction: null }, props: { classPropertyName: "props", publicName: "props", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classNameSignal()" }, classAttribute: "dbx-forge-form-field mat-form-field-animations-enabled" }, viewQueries: [{ propertyName: "fieldComponent", first: true, predicate: ["fieldComponent"], descendants: true, read: ViewContainerRef, isSignal: true }], ngImport: i0, template: "<div class=\"dbx-forge-form-field-wrapper\" [class.dbx-forge-form-field-wrapper-error]=\"hasError()\" [class.dbx-forge-form-field-wrapper-disabled]=\"isDisabled()\" role=\"group\" [attr.aria-labelledby]=\"label() ? labelId() : null\">\n <div class=\"dbx-forge-form-field-outline\">\n <div class=\"dbx-forge-form-field-outline-leading\"></div>\n <div class=\"dbx-forge-form-field-outline-notch\" [class.dbx-forge-form-field-outline-notch-empty]=\"!label()\">\n @if (label(); as labelText) {\n <span class=\"dbx-forge-form-field-outline-label\" [id]=\"labelId()\">\n {{ labelText | dynamicText | async }}\n @if (isRequired()) {\n <span aria-hidden=\"true\" class=\"mat-mdc-form-field-required-marker mdc-floating-label--required\"></span>\n }\n </span>\n }\n </div>\n <div class=\"dbx-forge-form-field-outline-trailing\"></div>\n </div>\n <div class=\"dbx-forge-form-field-content\">\n <ng-container #fieldComponent></ng-container>\n </div>\n</div>\n<div class=\"mat-mdc-form-field-subscript-wrapper mat-mdc-form-field-bottom-align mat-mdc-form-field-subscript-dynamic-size\">\n @if (showErrors()) {\n <div class=\"mat-mdc-form-field-error-wrapper\">\n <div class=\"mat-mdc-form-field-error mat-mdc-form-field-bottom-align\" [id]=\"errorId()\">{{ firstErrorMessage() }}</div>\n </div>\n } @else if (hintSignal(); as hint) {\n <div class=\"mat-mdc-form-field-hint-wrapper\">\n <div class=\"mat-mdc-form-field-hint mat-mdc-form-field-bottom-align\" [id]=\"hintId()\">{{ hint }}</div>\n </div>\n }\n</div>\n", styles: [".dbx-forge-form-field-wrapper{position:relative;margin-top:8px}.dbx-forge-form-field-outline{display:flex;position:absolute;inset:0;pointer-events:none}.dbx-forge-form-field-outline-leading{border:1px solid var(--mdc-outlined-text-field-outline-color, var(--mat-sys-outline, rgba(0, 0, 0, .38)));border-right:none;border-radius:var(--mdc-outlined-text-field-container-shape, 8px) 0 0 var(--mdc-outlined-text-field-container-shape, 8px);width:12px}.dbx-forge-form-field-outline-notch{border-bottom:1px solid var(--mdc-outlined-text-field-outline-color, var(--mat-sys-outline, rgba(0, 0, 0, .38)));display:flex;align-items:flex-start;max-width:calc(100% - 24px)}.dbx-forge-form-field-outline-notch-empty{border-top:1px solid var(--mdc-outlined-text-field-outline-color, var(--mat-sys-outline, rgba(0, 0, 0, .38)));width:0;padding:0}.dbx-forge-form-field-outline-label{display:inline-block;transform:translateY(-50%);pointer-events:auto;padding:0 4px;background:var(--mat-sys-surface, white);white-space:nowrap;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-family:var(--mat-form-field-outlined-label-text-populated-font, var(--mat-sys-body-small-font));font-size:var(--mat-form-field-outlined-label-text-populated-size, var(--mat-sys-body-small-size));line-height:var(--mat-form-field-outlined-label-text-populated-line-height, var(--mat-sys-body-small-line-height));letter-spacing:var(--mat-form-field-outlined-label-text-populated-tracking, var(--mat-sys-body-small-tracking));font-weight:var(--mat-form-field-outlined-label-text-populated-weight, var(--mat-sys-body-small-weight));color:var(--mdc-outlined-text-field-label-text-color, var(--mat-sys-on-surface-variant, rgba(0, 0, 0, .6)))}.dbx-forge-form-field-outline-trailing{border:1px solid var(--mdc-outlined-text-field-outline-color, var(--mat-sys-outline, rgba(0, 0, 0, .38)));border-left:none;border-radius:0 var(--mdc-outlined-text-field-container-shape, 8px) var(--mdc-outlined-text-field-container-shape, 8px) 0;flex-grow:1}.dbx-forge-form-field-wrapper:hover .dbx-forge-form-field-outline-leading,.dbx-forge-form-field-wrapper:hover .dbx-forge-form-field-outline-notch,.dbx-forge-form-field-wrapper:hover .dbx-forge-form-field-outline-trailing{border-color:var(--mdc-outlined-text-field-hover-outline-color, var(--mat-sys-on-surface, rgba(0, 0, 0, .87)))}.dbx-forge-form-field-wrapper:focus-within .dbx-forge-form-field-outline-leading,.dbx-forge-form-field-wrapper:focus-within .dbx-forge-form-field-outline-notch,.dbx-forge-form-field-wrapper:focus-within .dbx-forge-form-field-outline-trailing{border-color:var(--mdc-outlined-text-field-focus-outline-color, var(--mat-sys-primary));border-width:2px}.dbx-forge-form-field-wrapper:focus-within .dbx-forge-form-field-outline-label{color:var(--mdc-outlined-text-field-focus-label-text-color, var(--mat-sys-primary));padding:0 3px}.dbx-forge-form-field-wrapper-error .dbx-forge-form-field-outline-leading,.dbx-forge-form-field-wrapper-error .dbx-forge-form-field-outline-notch,.dbx-forge-form-field-wrapper-error .dbx-forge-form-field-outline-trailing,.dbx-forge-form-field-wrapper-error:focus-within .dbx-forge-form-field-outline-leading,.dbx-forge-form-field-wrapper-error:focus-within .dbx-forge-form-field-outline-notch,.dbx-forge-form-field-wrapper-error:focus-within .dbx-forge-form-field-outline-trailing{border-color:var(--mdc-outlined-text-field-error-outline-color, var(--mat-sys-error, #f44336))}.dbx-forge-form-field-wrapper-error .dbx-forge-form-field-outline-label,.dbx-forge-form-field-wrapper-error:focus-within .dbx-forge-form-field-outline-label{color:var(--mdc-outlined-text-field-error-label-text-color, var(--mat-sys-error, #f44336))}.dbx-forge-form-field-content{position:relative;padding:var(--mat-form-field-container-vertical-padding, 16px) 16px 8px;min-height:56px;box-sizing:border-box}.dbx-forge-form-field-wrapper-disabled .dbx-forge-form-field-content{opacity:.38;pointer-events:none}.dbx-forge-form-field-wrapper-disabled .dbx-forge-form-field-outline-leading,.dbx-forge-form-field-wrapper-disabled .dbx-forge-form-field-outline-notch,.dbx-forge-form-field-wrapper-disabled .dbx-forge-form-field-outline-trailing,.dbx-forge-form-field-wrapper-disabled:hover .dbx-forge-form-field-outline-leading,.dbx-forge-form-field-wrapper-disabled:hover .dbx-forge-form-field-outline-notch,.dbx-forge-form-field-wrapper-disabled:hover .dbx-forge-form-field-outline-trailing{border-color:var(--mdc-outlined-text-field-disabled-outline-color, rgba(0, 0, 0, .12))}.dbx-forge-form-field-wrapper-disabled .dbx-forge-form-field-outline-label{color:var(--mdc-outlined-text-field-disabled-label-text-color, rgba(0, 0, 0, .38))}\n"], dependencies: [{ kind: "pipe", type: DynamicTextPipe, name: "dynamicText" }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
10541
10543
|
}
|
|
10542
10544
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: DbxForgeFormFieldWrapperComponent, decorators: [{
|
|
10543
10545
|
type: Component,
|
|
10544
10546
|
args: [{ selector: 'dbx-forge-form-field-wrapper', imports: [DynamicTextPipe, AsyncPipe], changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, host: {
|
|
10545
|
-
|
|
10547
|
+
// `mat-form-field-animations-enabled` is intentionally retained: it gates
|
|
10548
|
+
// the 300ms subscript fade animation via Material's
|
|
10549
|
+
// `.mat-form-field-animations-enabled .mat-mdc-form-field-hint-wrapper { animation-duration: 300ms; }`
|
|
10550
|
+
// rule and does not cause the `.mat-mdc-form-field` style leak. The
|
|
10551
|
+
// `mat-mdc-form-field` host class was removed because Material lazy-loads
|
|
10552
|
+
// `display: inline-flex; line-height: 24px; ...` onto that selector once
|
|
10553
|
+
// any real `mat-form-field` is instantiated, which distorted this wrapper.
|
|
10554
|
+
class: 'dbx-forge-form-field mat-form-field-animations-enabled',
|
|
10546
10555
|
'[class]': 'classNameSignal()'
|
|
10547
10556
|
}, template: "<div class=\"dbx-forge-form-field-wrapper\" [class.dbx-forge-form-field-wrapper-error]=\"hasError()\" [class.dbx-forge-form-field-wrapper-disabled]=\"isDisabled()\" role=\"group\" [attr.aria-labelledby]=\"label() ? labelId() : null\">\n <div class=\"dbx-forge-form-field-outline\">\n <div class=\"dbx-forge-form-field-outline-leading\"></div>\n <div class=\"dbx-forge-form-field-outline-notch\" [class.dbx-forge-form-field-outline-notch-empty]=\"!label()\">\n @if (label(); as labelText) {\n <span class=\"dbx-forge-form-field-outline-label\" [id]=\"labelId()\">\n {{ labelText | dynamicText | async }}\n @if (isRequired()) {\n <span aria-hidden=\"true\" class=\"mat-mdc-form-field-required-marker mdc-floating-label--required\"></span>\n }\n </span>\n }\n </div>\n <div class=\"dbx-forge-form-field-outline-trailing\"></div>\n </div>\n <div class=\"dbx-forge-form-field-content\">\n <ng-container #fieldComponent></ng-container>\n </div>\n</div>\n<div class=\"mat-mdc-form-field-subscript-wrapper mat-mdc-form-field-bottom-align mat-mdc-form-field-subscript-dynamic-size\">\n @if (showErrors()) {\n <div class=\"mat-mdc-form-field-error-wrapper\">\n <div class=\"mat-mdc-form-field-error mat-mdc-form-field-bottom-align\" [id]=\"errorId()\">{{ firstErrorMessage() }}</div>\n </div>\n } @else if (hintSignal(); as hint) {\n <div class=\"mat-mdc-form-field-hint-wrapper\">\n <div class=\"mat-mdc-form-field-hint mat-mdc-form-field-bottom-align\" [id]=\"hintId()\">{{ hint }}</div>\n </div>\n }\n</div>\n", styles: [".dbx-forge-form-field-wrapper{position:relative;margin-top:8px}.dbx-forge-form-field-outline{display:flex;position:absolute;inset:0;pointer-events:none}.dbx-forge-form-field-outline-leading{border:1px solid var(--mdc-outlined-text-field-outline-color, var(--mat-sys-outline, rgba(0, 0, 0, .38)));border-right:none;border-radius:var(--mdc-outlined-text-field-container-shape, 8px) 0 0 var(--mdc-outlined-text-field-container-shape, 8px);width:12px}.dbx-forge-form-field-outline-notch{border-bottom:1px solid var(--mdc-outlined-text-field-outline-color, var(--mat-sys-outline, rgba(0, 0, 0, .38)));display:flex;align-items:flex-start;max-width:calc(100% - 24px)}.dbx-forge-form-field-outline-notch-empty{border-top:1px solid var(--mdc-outlined-text-field-outline-color, var(--mat-sys-outline, rgba(0, 0, 0, .38)));width:0;padding:0}.dbx-forge-form-field-outline-label{display:inline-block;transform:translateY(-50%);pointer-events:auto;padding:0 4px;background:var(--mat-sys-surface, white);white-space:nowrap;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-family:var(--mat-form-field-outlined-label-text-populated-font, var(--mat-sys-body-small-font));font-size:var(--mat-form-field-outlined-label-text-populated-size, var(--mat-sys-body-small-size));line-height:var(--mat-form-field-outlined-label-text-populated-line-height, var(--mat-sys-body-small-line-height));letter-spacing:var(--mat-form-field-outlined-label-text-populated-tracking, var(--mat-sys-body-small-tracking));font-weight:var(--mat-form-field-outlined-label-text-populated-weight, var(--mat-sys-body-small-weight));color:var(--mdc-outlined-text-field-label-text-color, var(--mat-sys-on-surface-variant, rgba(0, 0, 0, .6)))}.dbx-forge-form-field-outline-trailing{border:1px solid var(--mdc-outlined-text-field-outline-color, var(--mat-sys-outline, rgba(0, 0, 0, .38)));border-left:none;border-radius:0 var(--mdc-outlined-text-field-container-shape, 8px) var(--mdc-outlined-text-field-container-shape, 8px) 0;flex-grow:1}.dbx-forge-form-field-wrapper:hover .dbx-forge-form-field-outline-leading,.dbx-forge-form-field-wrapper:hover .dbx-forge-form-field-outline-notch,.dbx-forge-form-field-wrapper:hover .dbx-forge-form-field-outline-trailing{border-color:var(--mdc-outlined-text-field-hover-outline-color, var(--mat-sys-on-surface, rgba(0, 0, 0, .87)))}.dbx-forge-form-field-wrapper:focus-within .dbx-forge-form-field-outline-leading,.dbx-forge-form-field-wrapper:focus-within .dbx-forge-form-field-outline-notch,.dbx-forge-form-field-wrapper:focus-within .dbx-forge-form-field-outline-trailing{border-color:var(--mdc-outlined-text-field-focus-outline-color, var(--mat-sys-primary));border-width:2px}.dbx-forge-form-field-wrapper:focus-within .dbx-forge-form-field-outline-label{color:var(--mdc-outlined-text-field-focus-label-text-color, var(--mat-sys-primary));padding:0 3px}.dbx-forge-form-field-wrapper-error .dbx-forge-form-field-outline-leading,.dbx-forge-form-field-wrapper-error .dbx-forge-form-field-outline-notch,.dbx-forge-form-field-wrapper-error .dbx-forge-form-field-outline-trailing,.dbx-forge-form-field-wrapper-error:focus-within .dbx-forge-form-field-outline-leading,.dbx-forge-form-field-wrapper-error:focus-within .dbx-forge-form-field-outline-notch,.dbx-forge-form-field-wrapper-error:focus-within .dbx-forge-form-field-outline-trailing{border-color:var(--mdc-outlined-text-field-error-outline-color, var(--mat-sys-error, #f44336))}.dbx-forge-form-field-wrapper-error .dbx-forge-form-field-outline-label,.dbx-forge-form-field-wrapper-error:focus-within .dbx-forge-form-field-outline-label{color:var(--mdc-outlined-text-field-error-label-text-color, var(--mat-sys-error, #f44336))}.dbx-forge-form-field-content{position:relative;padding:var(--mat-form-field-container-vertical-padding, 16px) 16px 8px;min-height:56px;box-sizing:border-box}.dbx-forge-form-field-wrapper-disabled .dbx-forge-form-field-content{opacity:.38;pointer-events:none}.dbx-forge-form-field-wrapper-disabled .dbx-forge-form-field-outline-leading,.dbx-forge-form-field-wrapper-disabled .dbx-forge-form-field-outline-notch,.dbx-forge-form-field-wrapper-disabled .dbx-forge-form-field-outline-trailing,.dbx-forge-form-field-wrapper-disabled:hover .dbx-forge-form-field-outline-leading,.dbx-forge-form-field-wrapper-disabled:hover .dbx-forge-form-field-outline-notch,.dbx-forge-form-field-wrapper-disabled:hover .dbx-forge-form-field-outline-trailing{border-color:var(--mdc-outlined-text-field-disabled-outline-color, rgba(0, 0, 0, .12))}.dbx-forge-form-field-wrapper-disabled .dbx-forge-form-field-outline-label{color:var(--mdc-outlined-text-field-disabled-label-text-color, rgba(0, 0, 0, .38))}\n"] }]
|
|
10548
10557
|
}], propDecorators: { fieldComponent: [{ type: i0.ViewChild, args: ['fieldComponent', { ...{ read: ViewContainerRef }, isSignal: true }] }], fieldInputs: [{ type: i0.Input, args: [{ isSignal: true, alias: "fieldInputs", required: false }] }], props: [{ type: i0.Input, args: [{ isSignal: true, alias: "props", required: false }] }] } });
|