@dereekb/dbx-form 13.7.0 → 13.8.0

package/fesm2022/dereekb-dbx-form-expand.field.component-Bp5_uO1A.mjs

@@ -0,0 +1,56 @@
+import * as i0 from '@angular/core';
+import { input, computed, ChangeDetectionStrategy, Component } from '@angular/core';
+import * as i3 from '@angular/material/button';
+import { MatButtonModule } from '@angular/material/button';
+import * as i1 from '@angular/material/icon';
+import { MatIconModule } from '@angular/material/icon';
+
+/**
+ * Forge ValueFieldComponent that renders an expand/collapse control.
+ *
+ * Displays as either a Material stroked button or a clickable text link.
+ * Writes `true`/`false` to its FieldTree value on click, which drives
+ * conditional visibility on sibling groups via ng-forge's `logic` system.
+ */
+class DbxForgeExpandFieldComponent {
+    // ng-forge ValueFieldComponent inputs
+    field = input.required(...(ngDevMode ? [{ debugName: "field" }] : /* istanbul ignore next */ []));
+    key = input.required(...(ngDevMode ? [{ debugName: "key" }] : /* istanbul ignore next */ []));
+    label = input(...(ngDevMode ? [undefined, { debugName: "label" }] : /* istanbul ignore next */ []));
+    placeholder = input(...(ngDevMode ? [undefined, { debugName: "placeholder" }] : /* istanbul ignore next */ []));
+    className = input('', ...(ngDevMode ? [{ debugName: "className" }] : /* istanbul ignore next */ []));
+    tabIndex = input(...(ngDevMode ? [undefined, { debugName: "tabIndex" }] : /* istanbul ignore next */ []));
+    props = input(...(ngDevMode ? [undefined, { debugName: "props" }] : /* istanbul ignore next */ []));
+    meta = input(...(ngDevMode ? [undefined, { debugName: "meta" }] : /* istanbul ignore next */ []));
+    validationMessages = input(...(ngDevMode ? [undefined, { debugName: "validationMessages" }] : /* istanbul ignore next */ []));
+    defaultValidationMessages = input(...(ngDevMode ? [undefined, { debugName: "defaultValidationMessages" }] : /* istanbul ignore next */ []));
+    isOpenSignal = computed(() => {
+        return this.field()().value() ?? false;
+    }, ...(ngDevMode ? [{ debugName: "isOpenSignal" }] : /* istanbul ignore next */ []));
+    buttonTypeSignal = computed(() => {
+        return this.props()?.buttonType ?? 'text';
+    }, ...(ngDevMode ? [{ debugName: "buttonTypeSignal" }] : /* istanbul ignore next */ []));
+    labelSignal = computed(() => {
+        return this.props()?.expandLabel ?? '';
+    }, ...(ngDevMode ? [{ debugName: "labelSignal" }] : /* istanbul ignore next */ []));
+    iconSignal = computed(() => {
+        return this.isOpenSignal() ? 'expand_less' : 'expand_more';
+    }, ...(ngDevMode ? [{ debugName: "iconSignal" }] : /* istanbul ignore next */ []));
+    toggle() {
+        const fieldState = this.field()();
+        const currentValue = fieldState.value() ?? false;
+        fieldState.value.set(!currentValue);
+        fieldState.markAsTouched();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: DbxForgeExpandFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.4", type: DbxForgeExpandFieldComponent, isStandalone: true, selector: "dbx-forge-expand-field", inputs: { field: { classPropertyName: "field", publicName: "field", isSignal: true, isRequired: true, transformFunction: null }, key: { classPropertyName: "key", publicName: "key", isSignal: true, isRequired: true, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, className: { classPropertyName: "className", publicName: "className", isSignal: true, isRequired: false, transformFunction: null }, tabIndex: { classPropertyName: "tabIndex", publicName: "tabIndex", isSignal: true, isRequired: false, transformFunction: null }, props: { classPropertyName: "props", publicName: "props", isSignal: true, isRequired: false, transformFunction: null }, meta: { classPropertyName: "meta", publicName: "meta", isSignal: true, isRequired: false, transformFunction: null }, validationMessages: { classPropertyName: "validationMessages", publicName: "validationMessages", isSignal: true, isRequired: false, transformFunction: null }, defaultValidationMessages: { classPropertyName: "defaultValidationMessages", publicName: "defaultValidationMessages", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "className()" } }, ngImport: i0, template: "@if (buttonTypeSignal() === 'button') {\n  <button mat-stroked-button type=\"button\" class=\"dbx-forge-expand-button\" (click)=\"toggle()\" [attr.aria-expanded]=\"isOpenSignal()\">\n    <mat-icon>{{ iconSignal() }}</mat-icon>\n    {{ labelSignal() }}\n  </button>\n} @else {\n  <span class=\"dbx-forge-expand-text\" role=\"button\" tabindex=\"0\" (click)=\"toggle()\" (keydown.enter)=\"toggle()\" (keydown.space)=\"toggle()\" [attr.aria-expanded]=\"isOpenSignal()\">\n    <mat-icon class=\"dbx-forge-expand-text-icon\">{{ iconSignal() }}</mat-icon>\n    {{ labelSignal() }}\n  </span>\n}\n", styles: [":host{display:block}.dbx-forge-expand-text{cursor:pointer;display:inline-flex;align-items:center;gap:4px;-webkit-user-select:none;user-select:none;color:var(--mat-sys-primary);font-size:.875rem}.dbx-forge-expand-text:hover{text-decoration:underline}.dbx-forge-expand-text-icon{font-size:18px;width:18px;height:18px}\n"], dependencies: [{ kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i3.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: DbxForgeExpandFieldComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'dbx-forge-expand-field', imports: [MatButtonModule, MatIconModule], changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, host: {
+                        '[class]': 'className()'
+                    }, template: "@if (buttonTypeSignal() === 'button') {\n  <button mat-stroked-button type=\"button\" class=\"dbx-forge-expand-button\" (click)=\"toggle()\" [attr.aria-expanded]=\"isOpenSignal()\">\n    <mat-icon>{{ iconSignal() }}</mat-icon>\n    {{ labelSignal() }}\n  </button>\n} @else {\n  <span class=\"dbx-forge-expand-text\" role=\"button\" tabindex=\"0\" (click)=\"toggle()\" (keydown.enter)=\"toggle()\" (keydown.space)=\"toggle()\" [attr.aria-expanded]=\"isOpenSignal()\">\n    <mat-icon class=\"dbx-forge-expand-text-icon\">{{ iconSignal() }}</mat-icon>\n    {{ labelSignal() }}\n  </span>\n}\n", styles: [":host{display:block}.dbx-forge-expand-text{cursor:pointer;display:inline-flex;align-items:center;gap:4px;-webkit-user-select:none;user-select:none;color:var(--mat-sys-primary);font-size:.875rem}.dbx-forge-expand-text:hover{text-decoration:underline}.dbx-forge-expand-text-icon{font-size:18px;width:18px;height:18px}\n"] }]
+        }], propDecorators: { field: [{ type: i0.Input, args: [{ isSignal: true, alias: "field", required: true }] }], key: [{ type: i0.Input, args: [{ isSignal: true, alias: "key", required: true }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], className: [{ type: i0.Input, args: [{ isSignal: true, alias: "className", required: false }] }], tabIndex: [{ type: i0.Input, args: [{ isSignal: true, alias: "tabIndex", required: false }] }], props: [{ type: i0.Input, args: [{ isSignal: true, alias: "props", required: false }] }], meta: [{ type: i0.Input, args: [{ isSignal: true, alias: "meta", required: false }] }], validationMessages: [{ type: i0.Input, args: [{ isSignal: true, alias: "validationMessages", required: false }] }], defaultValidationMessages: [{ type: i0.Input, args: [{ isSignal: true, alias: "defaultValidationMessages", required: false }] }] } });
+
+export { DbxForgeExpandFieldComponent };
+//# sourceMappingURL=dereekb-dbx-form-expand.field.component-Bp5_uO1A.mjs.map

package/fesm2022/dereekb-dbx-form-expand.field.component-Bp5_uO1A.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"dereekb-dbx-form-expand.field.component-Bp5_uO1A.mjs","sources":["../../../../packages/dbx-form/src/lib/forge/field/wrapper/expand/expand.field.component.ts","../../../../packages/dbx-form/src/lib/forge/field/wrapper/expand/expand.field.component.html"],"sourcesContent":["import { ChangeDetectionStrategy, Component, computed, input } from '@angular/core';\nimport { MatButtonModule } from '@angular/material/button';\nimport { MatIconModule } from '@angular/material/icon';\nimport { type FieldTree } from '@angular/forms/signals';\nimport type { DynamicText, FieldMeta, ValidationMessages } from '@ng-forge/dynamic-forms';\nimport type { DbxForgeExpandFieldProps } from './expand.field';\n\n/**\n * Forge ValueFieldComponent that renders an expand/collapse control.\n *\n * Displays as either a Material stroked button or a clickable text link.\n * Writes `true`/`false` to its FieldTree value on click, which drives\n * conditional visibility on sibling groups via ng-forge's `logic` system.\n */\n@Component({\n  selector: 'dbx-forge-expand-field',\n  templateUrl: './expand.field.component.html',\n  styles: `\n    :host {\n      display: block;\n    }\n\n    .dbx-forge-expand-text {\n      cursor: pointer;\n      display: inline-flex;\n      align-items: center;\n      gap: 4px;\n      user-select: none;\n      color: var(--mat-sys-primary);\n      font-size: 0.875rem;\n    }\n\n    .dbx-forge-expand-text:hover {\n      text-decoration: underline;\n    }\n\n    .dbx-forge-expand-text-icon {\n      font-size: 18px;\n      width: 18px;\n      height: 18px;\n    }\n  `,\n  imports: [MatButtonModule, MatIconModule],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  standalone: true,\n  host: {\n    '[class]': 'className()'\n  }\n})\nexport class DbxForgeExpandFieldComponent {\n  // ng-forge ValueFieldComponent inputs\n  readonly field = input.required<FieldTree<boolean>>();\n  readonly key = input.required<string>();\n  readonly label = input<DynamicText | undefined>();\n  readonly placeholder = input<DynamicText | undefined>();\n  readonly className = input<string>('');\n  readonly tabIndex = input<number | undefined>();\n  readonly props = input<DbxForgeExpandFieldProps | undefined>();\n  readonly meta = input<FieldMeta | undefined>();\n  readonly validationMessages = input<ValidationMessages | undefined>();\n  readonly defaultValidationMessages = input<ValidationMessages | undefined>();\n\n  readonly isOpenSignal = computed((): boolean => {\n    return this.field()().value() ?? false;\n  });\n\n  readonly buttonTypeSignal = computed(() => {\n    return this.props()?.buttonType ?? 'text';\n  });\n\n  readonly labelSignal = computed(() => {\n    return this.props()?.expandLabel ?? '';\n  });\n\n  readonly iconSignal = computed(() => {\n    return this.isOpenSignal() ? 'expand_less' : 'expand_more';\n  });\n\n  toggle(): void {\n    const fieldState = this.field()();\n    const currentValue = fieldState.value() ?? false;\n    fieldState.value.set(!currentValue);\n    fieldState.markAsTouched();\n  }\n}\n","@if (buttonTypeSignal() === 'button') {\n  <button mat-stroked-button type=\"button\" class=\"dbx-forge-expand-button\" (click)=\"toggle()\" [attr.aria-expanded]=\"isOpenSignal()\">\n    <mat-icon>{{ iconSignal() }}</mat-icon>\n    {{ labelSignal() }}\n  </button>\n} @else {\n  <span class=\"dbx-forge-expand-text\" role=\"button\" tabindex=\"0\" (click)=\"toggle()\" (keydown.enter)=\"toggle()\" (keydown.space)=\"toggle()\" [attr.aria-expanded]=\"isOpenSignal()\">\n    <mat-icon class=\"dbx-forge-expand-text-icon\">{{ iconSignal() }}</mat-icon>\n    {{ labelSignal() }}\n  </span>\n}\n"],"names":["i2"],"mappings":"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"}

package/fesm2022/dereekb-dbx-form-formfield.field.component-BQyujXe3.mjs

@@ -0,0 +1,70 @@
+import * as i0 from '@angular/core';
+import { viewChild, computed, ChangeDetectionStrategy, Component } from '@angular/core';
+import { DynamicTextPipe } from '@ng-forge/dynamic-forms';
+import { AbstractForgeWrapperFieldComponent, forgeFieldDisabled, provideDbxForgeWrapperFieldDirective } from './dereekb-dbx-form.mjs';
+import { AsyncPipe } from '@angular/common';
+import { D as DbxForgeWrapperContentComponent } from './dereekb-dbx-form-wrapper.content.component-Cy4ND_se.mjs';
+
+/**
+ * Forge wrapper field component that renders child fields inside a Material-style
+ * outlined container with a notched outline, floating label, and hint/error subscript.
+ *
+ * This is the forge equivalent of ngx-formly's `FormlyWrapperFormField` which wraps
+ * fields in `<mat-form-field>`. Uses `<dbx-forge-wrapper-content />` for the nested
+ * DynamicForm rendering and reads its validation state for error display.
+ */
+class DbxForgeFormFieldWrapperComponent extends AbstractForgeWrapperFieldComponent {
+    contentRef = viewChild(DbxForgeWrapperContentComponent, ...(ngDevMode ? [{ debugName: "contentRef" }] : /* istanbul ignore next */ []));
+    // Disabled state
+    isDisabled = forgeFieldDisabled();
+    // Child form validation state via content component
+    childErrors = computed(() => this.contentRef()?.errors() ?? [], ...(ngDevMode ? [{ debugName: "childErrors" }] : /* istanbul ignore next */ []));
+    childTouched = computed(() => this.contentRef()?.touched() ?? false, ...(ngDevMode ? [{ debugName: "childTouched" }] : /* istanbul ignore next */ []));
+    childDirty = computed(() => this.contentRef()?.dynamicForm()?.dirty() ?? false, ...(ngDevMode ? [{ debugName: "childDirty" }] : /* istanbul ignore next */ []));
+    // Error display: show errors when the child form has been touched OR is dirty (value changed)
+    showErrors = computed(() => (this.childTouched() || this.childDirty()) && this.childErrors().length > 0, ...(ngDevMode ? [{ debugName: "showErrors" }] : /* istanbul ignore next */ []));
+    hasError = computed(() => this.showErrors(), ...(ngDevMode ? [{ debugName: "hasError" }] : /* istanbul ignore next */ []));
+    firstErrorMessage = computed(() => {
+        const errors = this.childErrors();
+        if (errors.length === 0) {
+            return '';
+        }
+        const error = errors[0];
+        // Try raw error message first (set by Angular built-in validators)
+        if (error.message) {
+            return error.message;
+        }
+        // Resolve from child field validationMessages by matching error.kind
+        const fields = this.props()?.fields;
+        if (fields?.length) {
+            for (const field of fields) {
+                const messages = field.validationMessages;
+                if (messages?.[error.kind]) {
+                    return messages[error.kind];
+                }
+            }
+        }
+        return error.kind;
+    }, ...(ngDevMode ? [{ debugName: "firstErrorMessage" }] : /* istanbul ignore next */ []));
+    // Props
+    hintSignal = computed(() => this.props()?.hint, ...(ngDevMode ? [{ debugName: "hintSignal" }] : /* istanbul ignore next */ []));
+    /**
+     * Whether any child field has `required: true`, used to show the asterisk in the label.
+     */
+    isRequired = computed(() => {
+        const fields = this.props()?.fields;
+        return fields?.some((f) => f.required === true) ?? false;
+    }, ...(ngDevMode ? [{ debugName: "isRequired" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: DbxForgeFormFieldWrapperComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.4", type: DbxForgeFormFieldWrapperComponent, isStandalone: true, selector: "dbx-forge-form-field-wrapper", host: { properties: { "class": "className()" }, classAttribute: "mat-mdc-form-field mat-form-field-animations-enabled" }, providers: provideDbxForgeWrapperFieldDirective(DbxForgeFormFieldWrapperComponent), viewQueries: [{ propertyName: "contentRef", first: true, predicate: DbxForgeWrapperContentComponent, descendants: true, isSignal: true }], usesInheritance: 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()\">\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\">\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    <dbx-forge-wrapper-content />\n  </div>\n</div>\n<div class=\"mat-mdc-form-field-subscript-wrapper mat-mdc-form-field-bottom-align\">\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\">{{ 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\">{{ hint }}</div>\n    </div>\n  }\n</div>\n", styles: [":host{display:block;width:100%;margin-bottom:16px}.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%);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{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{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))}.mat-mdc-form-field-subscript-wrapper{padding:0 16px;box-sizing:border-box}\n"], dependencies: [{ kind: "component", type: DbxForgeWrapperContentComponent, selector: "dbx-forge-wrapper-content" }, { kind: "pipe", type: DynamicTextPipe, name: "dynamicText" }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: DbxForgeFormFieldWrapperComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'dbx-forge-form-field-wrapper', providers: provideDbxForgeWrapperFieldDirective(DbxForgeFormFieldWrapperComponent), imports: [DbxForgeWrapperContentComponent, DynamicTextPipe, AsyncPipe], changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, host: {
+                        class: 'mat-mdc-form-field mat-form-field-animations-enabled',
+                        '[class]': 'className()'
+                    }, template: "<div class=\"dbx-forge-form-field-wrapper\" [class.dbx-forge-form-field-wrapper-error]=\"hasError()\" [class.dbx-forge-form-field-wrapper-disabled]=\"isDisabled()\">\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\">\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    <dbx-forge-wrapper-content />\n  </div>\n</div>\n<div class=\"mat-mdc-form-field-subscript-wrapper mat-mdc-form-field-bottom-align\">\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\">{{ 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\">{{ hint }}</div>\n    </div>\n  }\n</div>\n", styles: [":host{display:block;width:100%;margin-bottom:16px}.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%);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{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{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))}.mat-mdc-form-field-subscript-wrapper{padding:0 16px;box-sizing:border-box}\n"] }]
+        }], propDecorators: { contentRef: [{ type: i0.ViewChild, args: [i0.forwardRef(() => DbxForgeWrapperContentComponent), { isSignal: true }] }] } });
+
+export { DbxForgeFormFieldWrapperComponent };
+//# sourceMappingURL=dereekb-dbx-form-formfield.field.component-BQyujXe3.mjs.map

package/fesm2022/dereekb-dbx-form-formfield.field.component-BQyujXe3.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"dereekb-dbx-form-formfield.field.component-BQyujXe3.mjs","sources":["../../../../packages/dbx-form/src/lib/forge/field/wrapper/formfield/formfield.field.component.ts","../../../../packages/dbx-form/src/lib/forge/field/wrapper/formfield/formfield.field.component.html"],"sourcesContent":["import { ChangeDetectionStrategy, Component, computed, viewChild } from '@angular/core';\nimport { DynamicTextPipe, type FieldWithValidation } from '@ng-forge/dynamic-forms';\nimport { forgeFieldDisabled } from '../../field.disabled';\nimport { AsyncPipe } from '@angular/common';\nimport { AbstractForgeWrapperFieldComponent, provideDbxForgeWrapperFieldDirective } from '../wrapper.field';\nimport { DbxForgeWrapperContentComponent } from '../wrapper.content.component';\nimport type { DbxForgeFormFieldWrapperProps } from './formfield.field';\n\n/**\n * Forge wrapper field component that renders child fields inside a Material-style\n * outlined container with a notched outline, floating label, and hint/error subscript.\n *\n * This is the forge equivalent of ngx-formly's `FormlyWrapperFormField` which wraps\n * fields in `<mat-form-field>`. Uses `<dbx-forge-wrapper-content />` for the nested\n * DynamicForm rendering and reads its validation state for error display.\n */\n@Component({\n  selector: 'dbx-forge-form-field-wrapper',\n  templateUrl: './formfield.field.component.html',\n  styles: [\n    `\n      :host {\n        display: block;\n        width: 100%;\n        margin-bottom: 16px;\n      }\n\n      .dbx-forge-form-field-wrapper {\n        position: relative;\n        margin-top: 8px;\n      }\n\n      /* --- Notched outline --- */\n      .dbx-forge-form-field-outline {\n        display: flex;\n        position: absolute;\n        top: 0;\n        right: 0;\n        left: 0;\n        bottom: 0;\n        pointer-events: none;\n      }\n\n      .dbx-forge-form-field-outline-leading {\n        border: 1px solid var(--mdc-outlined-text-field-outline-color, var(--mat-sys-outline, rgba(0, 0, 0, 0.38)));\n        border-right: none;\n        border-radius: var(--mdc-outlined-text-field-container-shape, 8px) 0 0 var(--mdc-outlined-text-field-container-shape, 8px);\n        width: 12px;\n      }\n\n      .dbx-forge-form-field-outline-notch {\n        border-bottom: 1px solid var(--mdc-outlined-text-field-outline-color, var(--mat-sys-outline, rgba(0, 0, 0, 0.38)));\n        display: flex;\n        align-items: flex-start;\n        max-width: calc(100% - 24px);\n      }\n\n      .dbx-forge-form-field-outline-notch-empty {\n        border-top: 1px solid var(--mdc-outlined-text-field-outline-color, var(--mat-sys-outline, rgba(0, 0, 0, 0.38)));\n        width: 0;\n        padding: 0;\n      }\n\n      .dbx-forge-form-field-outline-label {\n        display: inline-block;\n        transform: translateY(-50%);\n        padding: 0 4px;\n        background: var(--mat-sys-surface, white);\n        white-space: nowrap;\n        -moz-osx-font-smoothing: grayscale;\n        -webkit-font-smoothing: antialiased;\n        font-family: var(--mat-form-field-outlined-label-text-populated-font, var(--mat-sys-body-small-font));\n        font-size: var(--mat-form-field-outlined-label-text-populated-size, var(--mat-sys-body-small-size));\n        line-height: var(--mat-form-field-outlined-label-text-populated-line-height, var(--mat-sys-body-small-line-height));\n        letter-spacing: var(--mat-form-field-outlined-label-text-populated-tracking, var(--mat-sys-body-small-tracking));\n        font-weight: var(--mat-form-field-outlined-label-text-populated-weight, var(--mat-sys-body-small-weight));\n        color: var(--mdc-outlined-text-field-label-text-color, var(--mat-sys-on-surface-variant, rgba(0, 0, 0, 0.6)));\n      }\n\n      .dbx-forge-form-field-outline-trailing {\n        border: 1px solid var(--mdc-outlined-text-field-outline-color, var(--mat-sys-outline, rgba(0, 0, 0, 0.38)));\n        border-left: none;\n        border-radius: 0 var(--mdc-outlined-text-field-container-shape, 8px) var(--mdc-outlined-text-field-container-shape, 8px) 0;\n        flex-grow: 1;\n      }\n\n      /* --- Hover state --- */\n      .dbx-forge-form-field-wrapper:hover .dbx-forge-form-field-outline-leading,\n      .dbx-forge-form-field-wrapper:hover .dbx-forge-form-field-outline-notch,\n      .dbx-forge-form-field-wrapper:hover .dbx-forge-form-field-outline-trailing {\n        border-color: var(--mdc-outlined-text-field-hover-outline-color, var(--mat-sys-on-surface, rgba(0, 0, 0, 0.87)));\n      }\n\n      /* --- Focus state --- */\n      .dbx-forge-form-field-wrapper:focus-within .dbx-forge-form-field-outline-leading,\n      .dbx-forge-form-field-wrapper:focus-within .dbx-forge-form-field-outline-notch,\n      .dbx-forge-form-field-wrapper:focus-within .dbx-forge-form-field-outline-trailing {\n        border-color: var(--mdc-outlined-text-field-focus-outline-color, var(--mat-sys-primary));\n        border-width: 2px;\n      }\n\n      .dbx-forge-form-field-wrapper:focus-within .dbx-forge-form-field-outline-label {\n        color: var(--mdc-outlined-text-field-focus-label-text-color, var(--mat-sys-primary));\n        padding: 0 3px;\n      }\n\n      /* --- Error state --- */\n      .dbx-forge-form-field-wrapper-error .dbx-forge-form-field-outline-leading,\n      .dbx-forge-form-field-wrapper-error .dbx-forge-form-field-outline-notch,\n      .dbx-forge-form-field-wrapper-error .dbx-forge-form-field-outline-trailing {\n        border-color: var(--mdc-outlined-text-field-error-outline-color, var(--mat-sys-error, #f44336));\n      }\n\n      .dbx-forge-form-field-wrapper-error .dbx-forge-form-field-outline-label {\n        color: var(--mdc-outlined-text-field-error-label-text-color, var(--mat-sys-error, #f44336));\n      }\n\n      /* --- Content area --- */\n      .dbx-forge-form-field-content {\n        position: relative;\n        padding: var(--mat-form-field-container-vertical-padding, 16px) 16px 8px;\n        min-height: 56px;\n        box-sizing: border-box;\n      }\n\n      /* --- Disabled state --- */\n      .dbx-forge-form-field-wrapper-disabled .dbx-forge-form-field-content {\n        opacity: 0.38;\n        pointer-events: none;\n      }\n\n      .dbx-forge-form-field-wrapper-disabled .dbx-forge-form-field-outline-leading,\n      .dbx-forge-form-field-wrapper-disabled .dbx-forge-form-field-outline-notch,\n      .dbx-forge-form-field-wrapper-disabled .dbx-forge-form-field-outline-trailing {\n        border-color: var(--mdc-outlined-text-field-disabled-outline-color, rgba(0, 0, 0, 0.12));\n      }\n\n      .dbx-forge-form-field-wrapper-disabled:hover .dbx-forge-form-field-outline-leading,\n      .dbx-forge-form-field-wrapper-disabled:hover .dbx-forge-form-field-outline-notch,\n      .dbx-forge-form-field-wrapper-disabled:hover .dbx-forge-form-field-outline-trailing {\n        border-color: var(--mdc-outlined-text-field-disabled-outline-color, rgba(0, 0, 0, 0.12));\n      }\n\n      .dbx-forge-form-field-wrapper-disabled .dbx-forge-form-field-outline-label {\n        color: var(--mdc-outlined-text-field-disabled-label-text-color, rgba(0, 0, 0, 0.38));\n      }\n\n      /* --- Subscript area --- */\n      .mat-mdc-form-field-subscript-wrapper {\n        padding: 0 16px;\n        box-sizing: border-box;\n      }\n    `\n  ],\n  providers: provideDbxForgeWrapperFieldDirective(DbxForgeFormFieldWrapperComponent),\n  imports: [DbxForgeWrapperContentComponent, DynamicTextPipe, AsyncPipe],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  standalone: true,\n  host: {\n    class: 'mat-mdc-form-field mat-form-field-animations-enabled',\n    '[class]': 'className()'\n  }\n})\nexport class DbxForgeFormFieldWrapperComponent extends AbstractForgeWrapperFieldComponent<DbxForgeFormFieldWrapperProps> {\n  readonly contentRef = viewChild(DbxForgeWrapperContentComponent);\n\n  // Disabled state\n  readonly isDisabled = forgeFieldDisabled();\n\n  // Child form validation state via content component\n  readonly childErrors = computed(() => this.contentRef()?.errors() ?? []);\n  readonly childTouched = computed(() => this.contentRef()?.touched() ?? false);\n  readonly childDirty = computed(() => this.contentRef()?.dynamicForm()?.dirty() ?? false);\n\n  // Error display: show errors when the child form has been touched OR is dirty (value changed)\n  readonly showErrors = computed(() => (this.childTouched() || this.childDirty()) && this.childErrors().length > 0);\n  readonly hasError = computed(() => this.showErrors());\n  readonly firstErrorMessage = computed(() => {\n    const errors = this.childErrors();\n\n    if (errors.length === 0) {\n      return '';\n    }\n\n    const error = errors[0];\n\n    // Try raw error message first (set by Angular built-in validators)\n    if (error.message) {\n      return error.message;\n    }\n\n    // Resolve from child field validationMessages by matching error.kind\n    const fields = this.props()?.fields;\n\n    if (fields?.length) {\n      for (const field of fields) {\n        const messages = (field as FieldWithValidation).validationMessages as Record<string, string> | undefined;\n\n        if (messages?.[error.kind]) {\n          return messages[error.kind];\n        }\n      }\n    }\n\n    return error.kind;\n  });\n\n  // Props\n  readonly hintSignal = computed(() => this.props()?.hint);\n\n  /**\n   * Whether any child field has `required: true`, used to show the asterisk in the label.\n   */\n  readonly isRequired = computed(() => {\n    const fields = this.props()?.fields;\n    return fields?.some((f: any) => f.required === true) ?? false;\n  });\n}\n","<div class=\"dbx-forge-form-field-wrapper\" [class.dbx-forge-form-field-wrapper-error]=\"hasError()\" [class.dbx-forge-form-field-wrapper-disabled]=\"isDisabled()\">\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\">\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    <dbx-forge-wrapper-content />\n  </div>\n</div>\n<div class=\"mat-mdc-form-field-subscript-wrapper mat-mdc-form-field-bottom-align\">\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\">{{ 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\">{{ hint }}</div>\n    </div>\n  }\n</div>\n"],"names":[],"mappings":"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"}

package/fesm2022/dereekb-dbx-form-info.field.component-B0cFprvc.mjs

@@ -0,0 +1,50 @@
+import * as i0 from '@angular/core';
+import { input, computed, ChangeDetectionStrategy, Component } from '@angular/core';
+import { MatIconButton } from '@angular/material/button';
+import * as i1 from '@angular/material/icon';
+import { MatIconModule } from '@angular/material/icon';
+
+/**
+ * Forge ValueFieldComponent that renders a Material info icon button.
+ *
+ * Displays a circular icon button with the `info` icon. On click,
+ * invokes the `onInfoClick` callback from props.
+ */
+class DbxForgeInfoButtonFieldComponent {
+    // ng-forge ValueFieldComponent inputs
+    field = input.required(...(ngDevMode ? [{ debugName: "field" }] : /* istanbul ignore next */ []));
+    key = input.required(...(ngDevMode ? [{ debugName: "key" }] : /* istanbul ignore next */ []));
+    label = input(...(ngDevMode ? [undefined, { debugName: "label" }] : /* istanbul ignore next */ []));
+    placeholder = input(...(ngDevMode ? [undefined, { debugName: "placeholder" }] : /* istanbul ignore next */ []));
+    className = input('', ...(ngDevMode ? [{ debugName: "className" }] : /* istanbul ignore next */ []));
+    tabIndex = input(...(ngDevMode ? [undefined, { debugName: "tabIndex" }] : /* istanbul ignore next */ []));
+    props = input(...(ngDevMode ? [undefined, { debugName: "props" }] : /* istanbul ignore next */ []));
+    meta = input(...(ngDevMode ? [undefined, { debugName: "meta" }] : /* istanbul ignore next */ []));
+    validationMessages = input(...(ngDevMode ? [undefined, { debugName: "validationMessages" }] : /* istanbul ignore next */ []));
+    defaultValidationMessages = input(...(ngDevMode ? [undefined, { debugName: "defaultValidationMessages" }] : /* istanbul ignore next */ []));
+    ariaLabelSignal = computed(() => {
+        return this.props()?.ariaLabel ?? 'More information';
+    }, ...(ngDevMode ? [{ debugName: "ariaLabelSignal" }] : /* istanbul ignore next */ []));
+    onClick() {
+        this.props()?.onInfoClick();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: DbxForgeInfoButtonFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.4", type: DbxForgeInfoButtonFieldComponent, isStandalone: true, selector: "dbx-forge-info-button-field", inputs: { field: { classPropertyName: "field", publicName: "field", isSignal: true, isRequired: true, transformFunction: null }, key: { classPropertyName: "key", publicName: "key", isSignal: true, isRequired: true, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, className: { classPropertyName: "className", publicName: "className", isSignal: true, isRequired: false, transformFunction: null }, tabIndex: { classPropertyName: "tabIndex", publicName: "tabIndex", isSignal: true, isRequired: false, transformFunction: null }, props: { classPropertyName: "props", publicName: "props", isSignal: true, isRequired: false, transformFunction: null }, meta: { classPropertyName: "meta", publicName: "meta", isSignal: true, isRequired: false, transformFunction: null }, validationMessages: { classPropertyName: "validationMessages", publicName: "validationMessages", isSignal: true, isRequired: false, transformFunction: null }, defaultValidationMessages: { classPropertyName: "defaultValidationMessages", publicName: "defaultValidationMessages", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "className()" } }, ngImport: i0, template: `
+    <button mat-icon-button type="button" class="dbx-forge-info-button" (click)="onClick()" [attr.aria-label]="ariaLabelSignal()">
+      <mat-icon>info</mat-icon>
+    </button>
+  `, isInline: true, styles: [":host{display:flex;align-items:center;justify-content:center;align-self:center}\n"], dependencies: [{ kind: "component", type: MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: DbxForgeInfoButtonFieldComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'dbx-forge-info-button-field', template: `
+    <button mat-icon-button type="button" class="dbx-forge-info-button" (click)="onClick()" [attr.aria-label]="ariaLabelSignal()">
+      <mat-icon>info</mat-icon>
+    </button>
+  `, imports: [MatIconButton, MatIconModule], changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, host: {
+                        '[class]': 'className()'
+                    }, styles: [":host{display:flex;align-items:center;justify-content:center;align-self:center}\n"] }]
+        }], propDecorators: { field: [{ type: i0.Input, args: [{ isSignal: true, alias: "field", required: true }] }], key: [{ type: i0.Input, args: [{ isSignal: true, alias: "key", required: true }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], className: [{ type: i0.Input, args: [{ isSignal: true, alias: "className", required: false }] }], tabIndex: [{ type: i0.Input, args: [{ isSignal: true, alias: "tabIndex", required: false }] }], props: [{ type: i0.Input, args: [{ isSignal: true, alias: "props", required: false }] }], meta: [{ type: i0.Input, args: [{ isSignal: true, alias: "meta", required: false }] }], validationMessages: [{ type: i0.Input, args: [{ isSignal: true, alias: "validationMessages", required: false }] }], defaultValidationMessages: [{ type: i0.Input, args: [{ isSignal: true, alias: "defaultValidationMessages", required: false }] }] } });
+
+export { DbxForgeInfoButtonFieldComponent };
+//# sourceMappingURL=dereekb-dbx-form-info.field.component-B0cFprvc.mjs.map

package/fesm2022/dereekb-dbx-form-info.field.component-B0cFprvc.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"dereekb-dbx-form-info.field.component-B0cFprvc.mjs","sources":["../../../../packages/dbx-form/src/lib/forge/field/wrapper/info/info.field.component.ts"],"sourcesContent":["import { ChangeDetectionStrategy, Component, computed, input } from '@angular/core';\nimport { MatIconButton } from '@angular/material/button';\nimport { MatIconModule } from '@angular/material/icon';\nimport { type FieldTree } from '@angular/forms/signals';\nimport type { DynamicText, FieldMeta, ValidationMessages } from '@ng-forge/dynamic-forms';\nimport type { DbxForgeInfoButtonFieldProps } from './info.field';\n\n/**\n * Forge ValueFieldComponent that renders a Material info icon button.\n *\n * Displays a circular icon button with the `info` icon. On click,\n * invokes the `onInfoClick` callback from props.\n */\n@Component({\n  selector: 'dbx-forge-info-button-field',\n  template: `\n    <button mat-icon-button type=\"button\" class=\"dbx-forge-info-button\" (click)=\"onClick()\" [attr.aria-label]=\"ariaLabelSignal()\">\n      <mat-icon>info</mat-icon>\n    </button>\n  `,\n  styles: `\n    :host {\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      align-self: center;\n    }\n  `,\n  imports: [MatIconButton, MatIconModule],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  standalone: true,\n  host: {\n    '[class]': 'className()'\n  }\n})\nexport class DbxForgeInfoButtonFieldComponent {\n  // ng-forge ValueFieldComponent inputs\n  readonly field = input.required<FieldTree<unknown>>();\n  readonly key = input.required<string>();\n  readonly label = input<DynamicText | undefined>();\n  readonly placeholder = input<DynamicText | undefined>();\n  readonly className = input<string>('');\n  readonly tabIndex = input<number | undefined>();\n  readonly props = input<DbxForgeInfoButtonFieldProps | undefined>();\n  readonly meta = input<FieldMeta | undefined>();\n  readonly validationMessages = input<ValidationMessages | undefined>();\n  readonly defaultValidationMessages = input<ValidationMessages | undefined>();\n\n  readonly ariaLabelSignal = computed(() => {\n    return this.props()?.ariaLabel ?? 'More information';\n  });\n\n  onClick(): void {\n    this.props()?.onInfoClick();\n  }\n}\n"],"names":[],"mappings":"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"}

package/fesm2022/dereekb-dbx-form-info.wrapper.field.component-Crm4wVr5.mjs

@@ -0,0 +1,35 @@
+import * as i0 from '@angular/core';
+import { computed, ChangeDetectionStrategy, Component } from '@angular/core';
+import { MatIconButton } from '@angular/material/button';
+import * as i1 from '@angular/material/icon';
+import { MatIconModule } from '@angular/material/icon';
+import { AbstractForgeWrapperFieldComponent, provideDbxForgeWrapperFieldDirective } from './dereekb-dbx-form.mjs';
+import { D as DbxForgeWrapperContentComponent } from './dereekb-dbx-form-wrapper.content.component-Cy4ND_se.mjs';
+
+/**
+ * Forge wrapper field component that renders child fields inside a flex layout
+ * with an info icon button beside them.
+ *
+ * This is the forge equivalent of formly's `DbxFormInfoWrapperComponent`,
+ * providing a content area with a clickable info button on the right side.
+ * Supports wrapping groups of fields, not just single fields.
+ */
+class DbxForgeInfoWrapperFieldComponent extends AbstractForgeWrapperFieldComponent {
+    ariaLabelSignal = computed(() => {
+        return this.props()?.ariaLabel ?? 'More information';
+    }, ...(ngDevMode ? [{ debugName: "ariaLabelSignal" }] : /* istanbul ignore next */ []));
+    onClick() {
+        this.props()?.onInfoClick();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: DbxForgeInfoWrapperFieldComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.4", type: DbxForgeInfoWrapperFieldComponent, isStandalone: true, selector: "dbx-forge-info-wrapper-field", host: { properties: { "class": "className()" } }, providers: provideDbxForgeWrapperFieldDirective(DbxForgeInfoWrapperFieldComponent), usesInheritance: true, ngImport: i0, template: "<div class=\"dbx-form-info-wrapper dbx-flex-bar\">\n  <div class=\"dbx-form-info-wrapper-content dbx-flex-grow\">\n    <dbx-forge-wrapper-content />\n  </div>\n  <div class=\"dbx-form-info-wrapper-info dbx-flex-noshrink dbx-flex-column dbx-flex-center\">\n    <button mat-icon-button type=\"button\" (click)=\"onClick()\" [attr.aria-label]=\"ariaLabelSignal()\">\n      <mat-icon>info</mat-icon>\n    </button>\n  </div>\n</div>\n", dependencies: [{ kind: "component", type: DbxForgeWrapperContentComponent, selector: "dbx-forge-wrapper-content" }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: DbxForgeInfoWrapperFieldComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'dbx-forge-info-wrapper-field', providers: provideDbxForgeWrapperFieldDirective(DbxForgeInfoWrapperFieldComponent), imports: [DbxForgeWrapperContentComponent, MatIconButton, MatIconModule], changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, host: {
+                        '[class]': 'className()'
+                    }, template: "<div class=\"dbx-form-info-wrapper dbx-flex-bar\">\n  <div class=\"dbx-form-info-wrapper-content dbx-flex-grow\">\n    <dbx-forge-wrapper-content />\n  </div>\n  <div class=\"dbx-form-info-wrapper-info dbx-flex-noshrink dbx-flex-column dbx-flex-center\">\n    <button mat-icon-button type=\"button\" (click)=\"onClick()\" [attr.aria-label]=\"ariaLabelSignal()\">\n      <mat-icon>info</mat-icon>\n    </button>\n  </div>\n</div>\n" }]
+        }] });
+
+export { DbxForgeInfoWrapperFieldComponent };
+//# sourceMappingURL=dereekb-dbx-form-info.wrapper.field.component-Crm4wVr5.mjs.map

package/fesm2022/dereekb-dbx-form-info.wrapper.field.component-Crm4wVr5.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"dereekb-dbx-form-info.wrapper.field.component-Crm4wVr5.mjs","sources":["../../../../packages/dbx-form/src/lib/forge/field/wrapper/info/info.wrapper.field.component.ts","../../../../packages/dbx-form/src/lib/forge/field/wrapper/info/info.wrapper.field.component.html"],"sourcesContent":["import { ChangeDetectionStrategy, Component, computed } from '@angular/core';\nimport { MatIconButton } from '@angular/material/button';\nimport { MatIconModule } from '@angular/material/icon';\nimport { AbstractForgeWrapperFieldComponent, provideDbxForgeWrapperFieldDirective } from '../wrapper.field';\nimport { DbxForgeWrapperContentComponent } from '../wrapper.content.component';\nimport type { DbxForgeInfoWrapperFieldProps } from './info.wrapper.field';\n\n/**\n * Forge wrapper field component that renders child fields inside a flex layout\n * with an info icon button beside them.\n *\n * This is the forge equivalent of formly's `DbxFormInfoWrapperComponent`,\n * providing a content area with a clickable info button on the right side.\n * Supports wrapping groups of fields, not just single fields.\n */\n@Component({\n  selector: 'dbx-forge-info-wrapper-field',\n  templateUrl: './info.wrapper.field.component.html',\n  providers: provideDbxForgeWrapperFieldDirective(DbxForgeInfoWrapperFieldComponent),\n  imports: [DbxForgeWrapperContentComponent, MatIconButton, MatIconModule],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  standalone: true,\n  host: {\n    '[class]': 'className()'\n  }\n})\nexport class DbxForgeInfoWrapperFieldComponent extends AbstractForgeWrapperFieldComponent<DbxForgeInfoWrapperFieldProps> {\n  readonly ariaLabelSignal = computed(() => {\n    return this.props()?.ariaLabel ?? 'More information';\n  });\n\n  onClick(): void {\n    this.props()?.onInfoClick();\n  }\n}\n","<div class=\"dbx-form-info-wrapper dbx-flex-bar\">\n  <div class=\"dbx-form-info-wrapper-content dbx-flex-grow\">\n    <dbx-forge-wrapper-content />\n  </div>\n  <div class=\"dbx-form-info-wrapper-info dbx-flex-noshrink dbx-flex-column dbx-flex-center\">\n    <button mat-icon-button type=\"button\" (click)=\"onClick()\" [attr.aria-label]=\"ariaLabelSignal()\">\n      <mat-icon>info</mat-icon>\n    </button>\n  </div>\n</div>\n"],"names":[],"mappings":";;;;;;;;AAOA;;;;;;;AAOG;AAYG,MAAO,iCAAkC,SAAQ,kCAAiE,CAAA;AAC7G,IAAA,eAAe,GAAG,QAAQ,CAAC,MAAK;QACvC,OAAO,IAAI,CAAC,KAAK,EAAE,EAAE,SAAS,IAAI,kBAAkB;AACtD,IAAA,CAAC,sFAAC;IAEF,OAAO,GAAA;AACL,QAAA,IAAI,CAAC,KAAK,EAAE,EAAE,WAAW,EAAE;IAC7B;uGAPW,iCAAiC,EAAA,IAAA,EAAA,IAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;AAAjC,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,iCAAiC,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,8BAAA,EAAA,IAAA,EAAA,EAAA,UAAA,EAAA,EAAA,OAAA,EAAA,aAAA,EAAA,EAAA,EAAA,SAAA,EARjC,oCAAoC,CAAC,iCAAiC,CAAC,EAAA,eAAA,EAAA,IAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,EClBpF,gbAUA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EDSY,+BAA+B,EAAA,QAAA,EAAA,2BAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAE,aAAa,EAAA,QAAA,EAAA,sFAAA,EAAA,QAAA,EAAA,CAAA,WAAA,EAAA,WAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EAAE,aAAa,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,OAAA,EAAA,QAAA,EAAA,UAAA,EAAA,MAAA,EAAA,CAAA,OAAA,EAAA,QAAA,EAAA,SAAA,EAAA,SAAA,EAAA,UAAA,CAAA,EAAA,QAAA,EAAA,CAAA,SAAA,CAAA,EAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,CAAA;;2FAO5D,iCAAiC,EAAA,UAAA,EAAA,CAAA;kBAX7C,SAAS;AACE,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,8BAA8B,aAE7B,oCAAoC,CAAA,iCAAA,CAAmC,EAAA,OAAA,EACzE,CAAC,+BAA+B,EAAE,aAAa,EAAE,aAAa,CAAC,EAAA,eAAA,EACvD,uBAAuB,CAAC,MAAM,EAAA,UAAA,EACnC,IAAI,EAAA,IAAA,EACV;AACJ,wBAAA,SAAS,EAAE;AACZ,qBAAA,EAAA,QAAA,EAAA,gbAAA,EAAA;;;;;"}