@dereekb/dbx-form 13.16.0 → 13.18.0

package/fesm2022/dereekb-dbx-form-style-demo.mjs

@@ -0,0 +1,417 @@
+import * as i0 from '@angular/core';
+import { input, computed, Directive, ChangeDetectionStrategy, Component, inject, makeEnvironmentProviders } from '@angular/core';
+import { toObservable } from '@angular/core/rxjs-interop';
+import { filter, switchMap, of } from 'rxjs';
+import { filterMaybe } from '@dereekb/rxjs';
+import { cleanSubscription } from '@dereekb/dbx-core';
+import * as i1 from '@dereekb/dbx-form';
+import { AbstractSyncForgeFormDirective, dbxFormSourceObservableFromStream, dbxForgePickableChipField, DbxForgeFormComponentImportsModule, dbxForgeFormComponentProviders, dbxForgeNameField, dbxForgeEmailField, dbxForgeValueSelectionField, dbxForgeTextAreaField, dbxForgeCheckboxField, dbxForgeToggleField } from '@dereekb/dbx-form';
+import { AbstractPopoverDirective, DbxPopoverContentComponent, DbxPopoverHeaderComponent, DbxPopoverCloseButtonComponent, DbxPopoverScrollContentDirective, DbxDetachContentComponent, DbxDetachControlsComponent } from '@dereekb/dbx-web';
+import { DbxStyleDemoControlsService, DBX_STYLE_DEMO_CONTROLS_COMPONENT, DBX_STYLE_DEMO_SECTIONS_COMPONENT, provideDbxStyleDemoSections } from '@dereekb/dbx-web/style-demo';
+import { DbxDocsUiExampleComponent, DbxDocsUiExampleInfoComponent, DbxDocsUiExampleContentComponent } from '@dereekb/dbx-web/docs';
+
+/**
+ * Abstract base for the slim style-demo controls form components ({@link DbxFormStyleDemoPresetsComponent},
+ * {@link DbxFormStyleDemoSectionsComponent}).
+ *
+ * Keeps a single `pickablechipfield` form in two-way sync with the playground's {@link DbxStyleDemoControls} (read from
+ * the `controls` input). The controls UI lives in dbx-form because the pickable chip field is a `@dereekb/dbx-form`
+ * field, which `@dereekb/dbx-web` cannot import.
+ *
+ * Both sync directions are driven off the form's state stream so they survive the component being recreated each time
+ * the panel/popover reopens:
+ *
+ * - **Controls → form (seed):** {@link dbxFormSourceObservableFromStream} in `'reset'` mode re-pushes the controls
+ *   state into the form every time the form enters its RESET state. This covers the initial ready transition — which
+ *   only fires once the forge field delegate has registered — so the chips seed from the live service state even though the
+ *   delegate's `init` ignores the context's pending initial value. The `isSettingValue` guard filters the synchronous
+ *   reset feedback `setValue` produces, exactly as `DbxFormSourceDirective` documents.
+ * - **Form → controls (write-back):** only genuine user edits are applied. `setValue` marks the form pristine and
+ *   untouched, so every seed / reset / initialization emission is `pristine: true`; the pickable chip field marks its
+ *   control dirty on toggle, so a user edit is the only `pristine: false` emission. Filtering on that keeps init/reset
+ *   noise from ever wiping the live service state.
+ *
+ * This directive is demo/debug-only and disposable — it is not a dbx-form core runtime primitive.
+ *
+ * @typeParam V - The form value type (a subset of the controls state: enabled sections or active presets).
+ */
+class AbstractDbxFormStyleDemoControlsFormDirective extends AbstractSyncForgeFormDirective {
+    /**
+     * The playground control surface to keep the chip field in sync with.
+     */
+    controls = input(undefined, ...(ngDevMode ? [{ debugName: "controls" }] : /* istanbul ignore next */ []));
+    /**
+     * Guards the controls→form seed against the `setValue` → `resetForm` feedback loop: set before `setValue` and cleared
+     * on the next microtask, so the synchronous reset emission `setValue` triggers on the stream is filtered out.
+     */
+    _isSettingValue = false;
+    /**
+     * The controls state as a form value, recomputed whenever the controls signals change.
+     */
+    _controlsValue$ = toObservable(computed(() => {
+        const controls = this.controls();
+        return controls == null ? undefined : this.readControlsValue(controls);
+    })).pipe(filterMaybe());
+    /**
+     * Controls → form: seed the form with the controls state on every RESET (see class docs).
+     */
+    _seedFormSub = cleanSubscription(dbxFormSourceObservableFromStream(this.context.stream$.pipe(filter(() => !this._isSettingValue)), this._controlsValue$, 'reset').subscribe((value) => {
+        this._isSettingValue = true;
+        this.context.setValue(value);
+        void Promise.resolve().then(() => (this._isSettingValue = false));
+    }));
+    /**
+     * Form → controls: write back only genuine user edits (`pristine: false`), diff-applied as deltas (see class docs).
+     */
+    _writeBackSub = cleanSubscription(this.context.stream$
+        .pipe(filter((event) => event.pristine === false), switchMap(() => this.context.getValue()))
+        .subscribe((value) => {
+        const controls = this.controls();
+        if (controls != null && value != null) {
+            this.applyValueToControls(controls, value);
+        }
+    }));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: AbstractDbxFormStyleDemoControlsFormDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.11", type: AbstractDbxFormStyleDemoControlsFormDirective, isStandalone: true, inputs: { controls: { classPropertyName: "controls", publicName: "controls", isSignal: true, isRequired: false, transformFunction: null } }, usesInheritance: true, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: AbstractDbxFormStyleDemoControlsFormDirective, decorators: [{
+            type: Directive
+        }], propDecorators: { controls: [{ type: i0.Input, args: [{ isSignal: true, alias: "controls", required: false }] }] } });
+
+/**
+ * Slim chip-field controls UI picking which style-lever presets are active, kept in two-way sync with the playground's
+ * {@link DbxStyleDemoControls}. Presets restyle the whole app, so this is what the global "Style Controls" detach panel
+ * renders.
+ *
+ * Because the chip field is a `dbx-forge` field, the host app must register its forge field declarations (the demo
+ * app does so via `provideDbxFormConfiguration()` + `provideDbxForgeFormFieldDeclarations()`).
+ *
+ * This component is demo/debug-only and disposable — it is not a dbx-form core runtime primitive.
+ */
+class DbxFormStyleDemoPresetsComponent extends AbstractDbxFormStyleDemoControlsFormDirective {
+    formConfig = {
+        fields: [
+            dbxForgePickableChipField({
+                key: 'presets',
+                label: 'Presets',
+                props: {
+                    loadValues: () => of((this.controls()?.templateTogglesSignal() ?? []).map((toggle) => ({ value: toggle.templateName, meta: toggle }))),
+                    displayForValue: (values) => {
+                        const toggleMap = new Map((this.controls()?.templateTogglesSignal() ?? []).map((toggle) => [toggle.templateName, toggle]));
+                        return of(values.map((x) => {
+                            const toggle = x.meta ?? toggleMap.get(x.value);
+                            return { ...x, meta: toggle, label: toggle?.label ?? x.value, sublabel: toggle?.group ?? undefined };
+                        }));
+                    },
+                    filterSelectedValues: (input) => {
+                        const toggles = this.controls()?.templateTogglesSignal() ?? [];
+                        const groupForKey = new Map(toggles.map((toggle) => [toggle.templateName, toggle.group]));
+                        const beforeValuesSet = new Set(input.beforeValues);
+                        const addedKeys = input.afterValues.filter((key) => !beforeValuesSet.has(key));
+                        let result = input.afterValues;
+                        addedKeys.forEach((addedKey) => {
+                            const group = groupForKey.get(addedKey);
+                            if (group != null) {
+                                // Same-group presets are mutually exclusive: keep only the newly added key in its group.
+                                result = result.filter((key) => key === addedKey || groupForKey.get(key) !== group);
+                            }
+                        });
+                        return result;
+                    }
+                }
+            })
+        ]
+    };
+    readControlsValue(controls) {
+        return { presets: [...controls.activeTemplateKeysSignal()] };
+    }
+    applyValueToControls(controls, value) {
+        const formPresets = new Set(value.presets ?? []);
+        const activeKeys = controls.activeTemplateKeysSignal();
+        controls.templateTogglesSignal().forEach((toggle) => {
+            const shouldActivate = formPresets.has(toggle.templateName);
+            if (shouldActivate !== activeKeys.has(toggle.templateName)) {
+                controls.setTemplateActive(toggle.templateName, shouldActivate);
+            }
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: DbxFormStyleDemoPresetsComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.11", type: DbxFormStyleDemoPresetsComponent, isStandalone: true, selector: "dbx-form-style-demo-presets", providers: dbxForgeFormComponentProviders(), usesInheritance: true, ngImport: i0, template: `
+    <dbx-forge></dbx-forge>
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: DbxForgeFormComponentImportsModule }, { kind: "component", type: i1.DbxForgeFormComponent, selector: "dbx-forge" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: DbxFormStyleDemoPresetsComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'dbx-form-style-demo-presets',
+                    template: `
+    <dbx-forge></dbx-forge>
+  `,
+                    standalone: true,
+                    imports: [DbxForgeFormComponentImportsModule],
+                    providers: dbxForgeFormComponentProviders(),
+                    changeDetection: ChangeDetectionStrategy.OnPush
+                }]
+        }] });
+
+/**
+ * Slim chip-field controls UI picking which showcase sections are visible, kept in two-way sync with the playground's
+ * {@link DbxStyleDemoControls}. Sections only affect the `<dbx-style-demo>` playground page, so this renders inside a
+ * popover opened from the playground header rather than the global controls panel.
+ *
+ * Because the chip field is a `dbx-forge` field, the host app must register its forge field declarations (the demo
+ * app does so via `provideDbxFormConfiguration()` + `provideDbxForgeFormFieldDeclarations()`).
+ *
+ * This component is demo/debug-only and disposable — it is not a dbx-form core runtime primitive.
+ */
+class DbxFormStyleDemoSectionsComponent extends AbstractDbxFormStyleDemoControlsFormDirective {
+    formConfig = {
+        fields: [
+            dbxForgePickableChipField({
+                key: 'sections',
+                label: 'Sections',
+                props: {
+                    showSelectAllButton: true,
+                    loadValues: () => of((this.controls()?.sectionsSignal() ?? []).map((section) => ({ value: section.id, meta: section }))),
+                    displayForValue: (values) => {
+                        const sectionMap = new Map((this.controls()?.sectionsSignal() ?? []).map((section) => [section.id, section]));
+                        return of(values.map((x) => {
+                            const section = x.meta ?? sectionMap.get(x.value);
+                            return { ...x, meta: section, label: section?.title ?? x.value, sublabel: section?.group ?? undefined };
+                        }));
+                    }
+                }
+            })
+        ]
+    };
+    readControlsValue(controls) {
+        return { sections: [...controls.enabledIdsSignal()] };
+    }
+    applyValueToControls(controls, value) {
+        const formSections = new Set(value.sections ?? []);
+        const enabledIds = controls.enabledIdsSignal();
+        controls.sectionsSignal().forEach((section) => {
+            const shouldEnable = formSections.has(section.id);
+            if (shouldEnable !== enabledIds.has(section.id)) {
+                controls.setSectionEnabled(section.id, shouldEnable);
+            }
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: DbxFormStyleDemoSectionsComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.11", type: DbxFormStyleDemoSectionsComponent, isStandalone: true, selector: "dbx-form-style-demo-sections", providers: dbxForgeFormComponentProviders(), usesInheritance: true, ngImport: i0, template: `
+    <dbx-forge></dbx-forge>
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: DbxForgeFormComponentImportsModule }, { kind: "component", type: i1.DbxForgeFormComponent, selector: "dbx-forge" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: DbxFormStyleDemoSectionsComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'dbx-form-style-demo-sections',
+                    template: `
+    <dbx-forge></dbx-forge>
+  `,
+                    standalone: true,
+                    imports: [DbxForgeFormComponentImportsModule],
+                    providers: dbxForgeFormComponentProviders(),
+                    changeDetection: ChangeDetectionStrategy.OnPush
+                }]
+        }] });
+
+/**
+ * Popover that renders {@link DbxFormStyleDemoSectionsComponent} inside the shared popover chrome, registered as the
+ * style-demo sections component via `DBX_STYLE_DEMO_SECTIONS_COMPONENT` (see `provideDbxFormStyleDemo()`).
+ *
+ * `DbxStyleDemoControlsService` opens this through `DbxPopoverService`, anchored to the playground header's "Sections"
+ * button, because sections only affect the `<dbx-style-demo>` playground page (unlike presets, which restyle the whole
+ * app). `dbx-popover-scroll-content` gives the long sections list correct scrolling. The component reads the same
+ * {@link DbxStyleDemoControlsService} instance and forwards it to the sections component, which owns the chip field and
+ * the controls↔form sync.
+ *
+ * This component is demo/debug-only and disposable — it is not a dbx-form core runtime primitive.
+ */
+class DbxFormStyleDemoSectionsPopoverComponent extends AbstractPopoverDirective {
+    controlsService = inject(DbxStyleDemoControlsService);
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: DbxFormStyleDemoSectionsPopoverComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.11", type: DbxFormStyleDemoSectionsPopoverComponent, isStandalone: true, selector: "dbx-form-style-demo-sections-popover", usesInheritance: true, ngImport: i0, template: `
+    <dbx-popover-content>
+      <dbx-popover-header icon="tune" header="Sections">
+        <dbx-popover-close-button></dbx-popover-close-button>
+      </dbx-popover-header>
+      <dbx-popover-scroll-content>
+        <div class="dbx-p2"><dbx-form-style-demo-sections [controls]="controlsService" /></div>
+      </dbx-popover-scroll-content>
+    </dbx-popover-content>
+  `, isInline: true, dependencies: [{ kind: "component", type: DbxPopoverContentComponent, selector: "dbx-popover-content" }, { kind: "component", type: DbxPopoverHeaderComponent, selector: "dbx-popover-header", inputs: ["header", "icon"] }, { kind: "component", type: DbxPopoverCloseButtonComponent, selector: "dbx-popover-close-button" }, { kind: "directive", type: DbxPopoverScrollContentDirective, selector: "dbx-popover-scroll-content,[dbxPopoverScrollContent],.dbx-popover-scroll-content" }, { kind: "component", type: DbxFormStyleDemoSectionsComponent, selector: "dbx-form-style-demo-sections" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: DbxFormStyleDemoSectionsPopoverComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'dbx-form-style-demo-sections-popover',
+                    template: `
+    <dbx-popover-content>
+      <dbx-popover-header icon="tune" header="Sections">
+        <dbx-popover-close-button></dbx-popover-close-button>
+      </dbx-popover-header>
+      <dbx-popover-scroll-content>
+        <div class="dbx-p2"><dbx-form-style-demo-sections [controls]="controlsService" /></div>
+      </dbx-popover-scroll-content>
+    </dbx-popover-content>
+  `,
+                    standalone: true,
+                    imports: [DbxPopoverContentComponent, DbxPopoverHeaderComponent, DbxPopoverCloseButtonComponent, DbxPopoverScrollContentDirective, DbxFormStyleDemoSectionsComponent],
+                    changeDetection: ChangeDetectionStrategy.OnPush
+                }]
+        }] });
+
+/**
+ * Detach panel that renders {@link DbxFormStyleDemoPresetsComponent} inside the shared detach chrome, registered as the
+ * style-demo controls component via `DBX_STYLE_DEMO_CONTROLS_COMPONENT` (see `provideDbxFormStyleDemo()`).
+ *
+ * `DbxStyleDemoControlsService` opens this through `DbxDetachService`, so the panel survives navigation and is available
+ * app-wide. It renders the presets chips (which restyle the whole app); sections (which only affect the playground page)
+ * live in their own popover opened from the playground header. The component reads the same
+ * {@link DbxStyleDemoControlsService} instance and forwards it to the presets component, which owns the chip field and
+ * the controls↔form sync. Scrolling within the fixed-height pane comes from `.dbx-detach-content-container`.
+ *
+ * This component is demo/debug-only and disposable — it is not a dbx-form core runtime primitive.
+ */
+class DbxFormStyleDemoControlsDetachComponent {
+    controlsService = inject(DbxStyleDemoControlsService);
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: DbxFormStyleDemoControlsDetachComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.11", type: DbxFormStyleDemoControlsDetachComponent, isStandalone: true, selector: "dbx-form-style-demo-controls-detach", ngImport: i0, template: `
+    <dbx-detach-content>
+      <dbx-detach-controls controls header="Style Controls"></dbx-detach-controls>
+      <div class="dbx-p3">
+        <dbx-form-style-demo-presets [controls]="controlsService" />
+      </div>
+    </dbx-detach-content>
+  `, isInline: true, dependencies: [{ kind: "component", type: DbxDetachContentComponent, selector: "dbx-detach-content" }, { kind: "component", type: DbxDetachControlsComponent, selector: "dbx-detach-controls", inputs: ["header"] }, { kind: "component", type: DbxFormStyleDemoPresetsComponent, selector: "dbx-form-style-demo-presets" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: DbxFormStyleDemoControlsDetachComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'dbx-form-style-demo-controls-detach',
+                    template: `
+    <dbx-detach-content>
+      <dbx-detach-controls controls header="Style Controls"></dbx-detach-controls>
+      <div class="dbx-p3">
+        <dbx-form-style-demo-presets [controls]="controlsService" />
+      </div>
+    </dbx-detach-content>
+  `,
+                    standalone: true,
+                    imports: [DbxDetachContentComponent, DbxDetachControlsComponent, DbxFormStyleDemoPresetsComponent],
+                    changeDetection: ChangeDetectionStrategy.OnPush
+                }]
+        }] });
+
+/**
+ * Style-demo section rendering a representative `<dbx-forge>` form (name, email, select, textarea, checkbox, toggle)
+ * so the form-field surfaces are visible in the playground. Fields paint from the `--mat-form-field-*` and surface
+ * tokens, so they respond live to the Shape and Surface levers and flip with light/dark.
+ *
+ * Requires the host app to register its forge field declarations (the demo app does so via
+ * `provideDbxFormConfiguration()` + `provideDbxForgeFormFieldDeclarations()`).
+ *
+ * @dbxDocsUiExample
+ * @dbxDocsUiExampleSlug style-demo-form-fields
+ * @dbxDocsUiExampleCategory style-demo
+ * @dbxDocsUiExampleSummary A representative dbx-forge form (name, email, select, textarea, checkbox, toggle).
+ * @dbxDocsUiExampleRelated text, value-selection, checkbox
+ */
+class DbxFormStyleDemoFieldsSectionComponent extends AbstractSyncForgeFormDirective {
+    formConfig = {
+        fields: [
+            dbxForgeNameField({ key: 'name', label: 'Full Name', required: true }),
+            dbxForgeEmailField({ key: 'email', label: 'Email', required: true }),
+            dbxForgeValueSelectionField({
+                key: 'role',
+                label: 'Role',
+                props: {
+                    options: [
+                        { label: 'Admin', value: 'admin' },
+                        { label: 'Editor', value: 'editor' },
+                        { label: 'Viewer', value: 'viewer' }
+                    ]
+                }
+            }),
+            dbxForgeTextAreaField({ key: 'bio', label: 'Bio', rows: 3 }),
+            dbxForgeCheckboxField({ key: 'subscribe', label: 'Subscribe to updates' }),
+            dbxForgeToggleField({ key: 'notifications', label: 'Enable notifications' })
+        ]
+    };
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: DbxFormStyleDemoFieldsSectionComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.11", type: DbxFormStyleDemoFieldsSectionComponent, isStandalone: true, selector: "dbx-form-style-demo-fields-section", providers: dbxForgeFormComponentProviders(), usesInheritance: true, ngImport: i0, template: `
+    <dbx-docs-ui-example header="Form Fields" hint="A representative dbx-forge form.">
+      <dbx-docs-ui-example-info>
+        <p>
+          A mix of forge fields — name, email,
+          <code>valueSelectionField</code>
+          , textarea, checkbox, and toggle. Each draws its container colour and corner radius from the
+          <code>--mat-form-field-*</code>
+          tokens layered over the surface ramp, so the fields respond live to the Shape and Surface levers and flip with light/dark. The host app must register its forge field declarations for this section to render.
+        </p>
+      </dbx-docs-ui-example-info>
+      <dbx-docs-ui-example-content>
+        <dbx-forge></dbx-forge>
+      </dbx-docs-ui-example-content>
+    </dbx-docs-ui-example>
+  `, isInline: true, dependencies: [{ kind: "component", type: DbxDocsUiExampleComponent, selector: "dbx-docs-ui-example", inputs: ["header", "hint"] }, { kind: "component", type: DbxDocsUiExampleInfoComponent, selector: "dbx-docs-ui-example-info" }, { kind: "component", type: DbxDocsUiExampleContentComponent, selector: "dbx-docs-ui-example-content" }, { kind: "ngmodule", type: DbxForgeFormComponentImportsModule }, { kind: "component", type: i1.DbxForgeFormComponent, selector: "dbx-forge" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: DbxFormStyleDemoFieldsSectionComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'dbx-form-style-demo-fields-section',
+                    standalone: true,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    imports: [DbxDocsUiExampleComponent, DbxDocsUiExampleInfoComponent, DbxDocsUiExampleContentComponent, DbxForgeFormComponentImportsModule],
+                    providers: dbxForgeFormComponentProviders(),
+                    template: `
+    <dbx-docs-ui-example header="Form Fields" hint="A representative dbx-forge form.">
+      <dbx-docs-ui-example-info>
+        <p>
+          A mix of forge fields — name, email,
+          <code>valueSelectionField</code>
+          , textarea, checkbox, and toggle. Each draws its container colour and corner radius from the
+          <code>--mat-form-field-*</code>
+          tokens layered over the surface ramp, so the fields respond live to the Shape and Surface levers and flip with light/dark. The host app must register its forge field declarations for this section to render.
+        </p>
+      </dbx-docs-ui-example-info>
+      <dbx-docs-ui-example-content>
+        <dbx-forge></dbx-forge>
+      </dbx-docs-ui-example-content>
+    </dbx-docs-ui-example>
+  `
+                }]
+        }] });
+
+/**
+ * The `@dereekb/dbx-form/style-demo` section group.
+ */
+const DBX_FORM_STYLE_DEMO_SECTION_GROUP = {
+    libId: 'dbx-form',
+    sections: [{ id: 'dbx-form-fields', title: 'Form Fields', group: 'form', tags: ['dbx-form', 'form'], component: DbxFormStyleDemoFieldsSectionComponent, defaultEnabled: true }]
+};
+/**
+ * Registers the `@dereekb/dbx-form/style-demo` sections with the `<dbx-style-demo>` playground, registers
+ * {@link DbxFormStyleDemoControlsDetachComponent} as the global style-demo controls (presets) detach panel, and registers
+ * {@link DbxFormStyleDemoSectionsPopoverComponent} as the style-demo sections popover opened from the playground header.
+ *
+ * The Form Fields section, the controls panel, and the sections popover all render `<dbx-forge>` forms, so the host app
+ * must register its forge field declarations (e.g. `provideDbxFormConfiguration()` + `provideDbxForgeFormFieldDeclarations()`) for them to render.
+ *
+ * Pair with `provideDbxStyleDemo()` (the shell from `@dereekb/dbx-web/style-demo`).
+ *
+ * @returns EnvironmentProviders contributing the form sections, the controls detach component, and the sections popover component.
+ *
+ * @__NO_SIDE_EFFECTS__
+ */
+function provideDbxFormStyleDemo() {
+    return makeEnvironmentProviders([provideDbxStyleDemoSections(DBX_FORM_STYLE_DEMO_SECTION_GROUP), { provide: DBX_STYLE_DEMO_CONTROLS_COMPONENT, useValue: DbxFormStyleDemoControlsDetachComponent }, { provide: DBX_STYLE_DEMO_SECTIONS_COMPONENT, useValue: DbxFormStyleDemoSectionsPopoverComponent }]);
+}
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { AbstractDbxFormStyleDemoControlsFormDirective, DBX_FORM_STYLE_DEMO_SECTION_GROUP, DbxFormStyleDemoControlsDetachComponent, DbxFormStyleDemoFieldsSectionComponent, DbxFormStyleDemoPresetsComponent, DbxFormStyleDemoSectionsComponent, DbxFormStyleDemoSectionsPopoverComponent, provideDbxFormStyleDemo };
+//# sourceMappingURL=dereekb-dbx-form-style-demo.mjs.map

package/fesm2022/dereekb-dbx-form-style-demo.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"dereekb-dbx-form-style-demo.mjs","sources":["../../../../packages/dbx-form/style-demo/src/lib/controls.form.directive.ts","../../../../packages/dbx-form/style-demo/src/lib/controls.presets.component.ts","../../../../packages/dbx-form/style-demo/src/lib/controls.sections.component.ts","../../../../packages/dbx-form/style-demo/src/lib/controls.sections.popover.component.ts","../../../../packages/dbx-form/style-demo/src/lib/controls.detach.component.ts","../../../../packages/dbx-form/style-demo/src/lib/fields.section.component.ts","../../../../packages/dbx-form/style-demo/src/lib/form.style.demo.providers.ts","../../../../packages/dbx-form/style-demo/src/dereekb-dbx-form-style-demo.ts"],"sourcesContent":["import { Directive, computed, input } from '@angular/core';\nimport { toObservable } from '@angular/core/rxjs-interop';\nimport { filter, switchMap } from 'rxjs';\nimport { type Maybe } from '@dereekb/util';\nimport { filterMaybe } from '@dereekb/rxjs';\nimport { cleanSubscription } from '@dereekb/dbx-core';\nimport { AbstractSyncForgeFormDirective, dbxFormSourceObservableFromStream } from '@dereekb/dbx-form';\nimport { type DbxStyleDemoControls } from '@dereekb/dbx-web/style-demo';\n\n/**\n * Abstract base for the slim style-demo controls form components ({@link DbxFormStyleDemoPresetsComponent},\n * {@link DbxFormStyleDemoSectionsComponent}).\n *\n * Keeps a single `pickablechipfield` form in two-way sync with the playground's {@link DbxStyleDemoControls} (read from\n * the `controls` input). The controls UI lives in dbx-form because the pickable chip field is a `@dereekb/dbx-form`\n * field, which `@dereekb/dbx-web` cannot import.\n *\n * Both sync directions are driven off the form's state stream so they survive the component being recreated each time\n * the panel/popover reopens:\n *\n * - **Controls → form (seed):** {@link dbxFormSourceObservableFromStream} in `'reset'` mode re-pushes the controls\n *   state into the form every time the form enters its RESET state. This covers the initial ready transition — which\n *   only fires once the forge field delegate has registered — so the chips seed from the live service state even though the\n *   delegate's `init` ignores the context's pending initial value. The `isSettingValue` guard filters the synchronous\n *   reset feedback `setValue` produces, exactly as `DbxFormSourceDirective` documents.\n * - **Form → controls (write-back):** only genuine user edits are applied. `setValue` marks the form pristine and\n *   untouched, so every seed / reset / initialization emission is `pristine: true`; the pickable chip field marks its\n *   control dirty on toggle, so a user edit is the only `pristine: false` emission. Filtering on that keeps init/reset\n *   noise from ever wiping the live service state.\n *\n * This directive is demo/debug-only and disposable — it is not a dbx-form core runtime primitive.\n *\n * @typeParam V - The form value type (a subset of the controls state: enabled sections or active presets).\n */\n@Directive()\nexport abstract class AbstractDbxFormStyleDemoControlsFormDirective<V extends object> extends AbstractSyncForgeFormDirective<V> {\n  /**\n   * The playground control surface to keep the chip field in sync with.\n   */\n  readonly controls = input<Maybe<DbxStyleDemoControls>>(undefined);\n\n  /**\n   * Guards the controls→form seed against the `setValue` → `resetForm` feedback loop: set before `setValue` and cleared\n   * on the next microtask, so the synchronous reset emission `setValue` triggers on the stream is filtered out.\n   */\n  private _isSettingValue = false;\n\n  /**\n   * Builds the form value from the controls service signals.\n   */\n  protected abstract readControlsValue(controls: DbxStyleDemoControls): V;\n\n  /**\n   * Diff-applies the form value to the controls service via its setters, writing only the deltas.\n   */\n  protected abstract applyValueToControls(controls: DbxStyleDemoControls, value: V): void;\n\n  /**\n   * The controls state as a form value, recomputed whenever the controls signals change.\n   */\n  private readonly _controlsValue$ = toObservable(\n    computed<Maybe<V>>(() => {\n      const controls = this.controls();\n      return controls == null ? undefined : this.readControlsValue(controls);\n    })\n  ).pipe(filterMaybe());\n\n  /**\n   * Controls → form: seed the form with the controls state on every RESET (see class docs).\n   */\n  protected readonly _seedFormSub = cleanSubscription(\n    dbxFormSourceObservableFromStream(this.context.stream$.pipe(filter(() => !this._isSettingValue)), this._controlsValue$, 'reset').subscribe((value) => {\n      this._isSettingValue = true;\n      this.context.setValue(value);\n      void Promise.resolve().then(() => (this._isSettingValue = false));\n    })\n  );\n\n  /**\n   * Form → controls: write back only genuine user edits (`pristine: false`), diff-applied as deltas (see class docs).\n   */\n  protected readonly _writeBackSub = cleanSubscription(\n    this.context.stream$\n      .pipe(\n        filter((event) => event.pristine === false),\n        switchMap(() => this.context.getValue())\n      )\n      .subscribe((value) => {\n        const controls = this.controls();\n\n        if (controls != null && value != null) {\n          this.applyValueToControls(controls, value);\n        }\n      })\n  );\n}\n","import { ChangeDetectionStrategy, Component } from '@angular/core';\nimport type { FieldDef, FormConfig } from '@ng-forge/dynamic-forms';\nimport { of } from 'rxjs';\nimport { DbxForgeFormComponentImportsModule, dbxForgeFormComponentProviders, dbxForgePickableChipField, type PickableValueFieldValue } from '@dereekb/dbx-form';\nimport { type DbxStyleDemoControls, type DbxStyleDemoStyleTemplateKey, type DbxStyleDemoTemplateToggle } from '@dereekb/dbx-web/style-demo';\nimport { AbstractDbxFormStyleDemoControlsFormDirective } from './controls.form.directive';\n\n/**\n * Form value for the {@link DbxFormStyleDemoPresetsComponent}: the keys of the active style-lever presets.\n */\nexport interface DbxFormStyleDemoPresetsFormValue {\n  readonly presets: DbxStyleDemoStyleTemplateKey[];\n}\n\n/**\n * Slim chip-field controls UI picking which style-lever presets are active, kept in two-way sync with the playground's\n * {@link DbxStyleDemoControls}. Presets restyle the whole app, so this is what the global \"Style Controls\" detach panel\n * renders.\n *\n * Because the chip field is a `dbx-forge` field, the host app must register its forge field declarations (the demo\n * app does so via `provideDbxFormConfiguration()` + `provideDbxForgeFormFieldDeclarations()`).\n *\n * This component is demo/debug-only and disposable — it is not a dbx-form core runtime primitive.\n */\n@Component({\n  selector: 'dbx-form-style-demo-presets',\n  template: `\n    <dbx-forge></dbx-forge>\n  `,\n  standalone: true,\n  imports: [DbxForgeFormComponentImportsModule],\n  providers: dbxForgeFormComponentProviders(),\n  changeDetection: ChangeDetectionStrategy.OnPush\n})\nexport class DbxFormStyleDemoPresetsComponent extends AbstractDbxFormStyleDemoControlsFormDirective<DbxFormStyleDemoPresetsFormValue> {\n  readonly formConfig: FormConfig = {\n    fields: [\n      dbxForgePickableChipField<DbxStyleDemoStyleTemplateKey, DbxStyleDemoTemplateToggle>({\n        key: 'presets',\n        label: 'Presets',\n        props: {\n          loadValues: () => of((this.controls()?.templateTogglesSignal() ?? []).map((toggle) => ({ value: toggle.templateName, meta: toggle }))),\n          displayForValue: (values: PickableValueFieldValue<DbxStyleDemoStyleTemplateKey, DbxStyleDemoTemplateToggle>[]) => {\n            const toggleMap = new Map((this.controls()?.templateTogglesSignal() ?? []).map((toggle) => [toggle.templateName, toggle]));\n            return of(\n              values.map((x) => {\n                const toggle = x.meta ?? toggleMap.get(x.value);\n                return { ...x, meta: toggle, label: toggle?.label ?? x.value, sublabel: toggle?.group ?? undefined };\n              })\n            );\n          },\n          filterSelectedValues: (input) => {\n            const toggles = this.controls()?.templateTogglesSignal() ?? [];\n            const groupForKey = new Map(toggles.map((toggle) => [toggle.templateName, toggle.group]));\n            const beforeValuesSet = new Set(input.beforeValues);\n            const addedKeys = input.afterValues.filter((key) => !beforeValuesSet.has(key));\n\n            let result = input.afterValues;\n\n            addedKeys.forEach((addedKey) => {\n              const group = groupForKey.get(addedKey);\n\n              if (group != null) {\n                // Same-group presets are mutually exclusive: keep only the newly added key in its group.\n                result = result.filter((key) => key === addedKey || groupForKey.get(key) !== group);\n              }\n            });\n\n            return result;\n          }\n        }\n      })\n    ] as FieldDef<unknown>[]\n  } as FormConfig;\n\n  protected readControlsValue(controls: DbxStyleDemoControls): DbxFormStyleDemoPresetsFormValue {\n    return { presets: [...controls.activeTemplateKeysSignal()] };\n  }\n\n  protected applyValueToControls(controls: DbxStyleDemoControls, value: DbxFormStyleDemoPresetsFormValue): void {\n    const formPresets = new Set(value.presets ?? []);\n    const activeKeys = controls.activeTemplateKeysSignal();\n\n    controls.templateTogglesSignal().forEach((toggle) => {\n      const shouldActivate = formPresets.has(toggle.templateName);\n\n      if (shouldActivate !== activeKeys.has(toggle.templateName)) {\n        controls.setTemplateActive(toggle.templateName, shouldActivate);\n      }\n    });\n  }\n}\n","import { ChangeDetectionStrategy, Component } from '@angular/core';\nimport type { FieldDef, FormConfig } from '@ng-forge/dynamic-forms';\nimport { of } from 'rxjs';\nimport { DbxForgeFormComponentImportsModule, dbxForgeFormComponentProviders, dbxForgePickableChipField, type PickableValueFieldValue } from '@dereekb/dbx-form';\nimport { type DbxStyleDemoControls, type DbxStyleDemoSection, type DbxStyleDemoSectionId } from '@dereekb/dbx-web/style-demo';\nimport { AbstractDbxFormStyleDemoControlsFormDirective } from './controls.form.directive';\n\n/**\n * Form value for the {@link DbxFormStyleDemoSectionsComponent}: the ids of the enabled (visible) sections.\n */\nexport interface DbxFormStyleDemoSectionsFormValue {\n  readonly sections: DbxStyleDemoSectionId[];\n}\n\n/**\n * Slim chip-field controls UI picking which showcase sections are visible, kept in two-way sync with the playground's\n * {@link DbxStyleDemoControls}. Sections only affect the `<dbx-style-demo>` playground page, so this renders inside a\n * popover opened from the playground header rather than the global controls panel.\n *\n * Because the chip field is a `dbx-forge` field, the host app must register its forge field declarations (the demo\n * app does so via `provideDbxFormConfiguration()` + `provideDbxForgeFormFieldDeclarations()`).\n *\n * This component is demo/debug-only and disposable — it is not a dbx-form core runtime primitive.\n */\n@Component({\n  selector: 'dbx-form-style-demo-sections',\n  template: `\n    <dbx-forge></dbx-forge>\n  `,\n  standalone: true,\n  imports: [DbxForgeFormComponentImportsModule],\n  providers: dbxForgeFormComponentProviders(),\n  changeDetection: ChangeDetectionStrategy.OnPush\n})\nexport class DbxFormStyleDemoSectionsComponent extends AbstractDbxFormStyleDemoControlsFormDirective<DbxFormStyleDemoSectionsFormValue> {\n  readonly formConfig: FormConfig = {\n    fields: [\n      dbxForgePickableChipField<DbxStyleDemoSectionId, DbxStyleDemoSection>({\n        key: 'sections',\n        label: 'Sections',\n        props: {\n          showSelectAllButton: true,\n          loadValues: () => of((this.controls()?.sectionsSignal() ?? []).map((section) => ({ value: section.id, meta: section }))),\n          displayForValue: (values: PickableValueFieldValue<DbxStyleDemoSectionId, DbxStyleDemoSection>[]) => {\n            const sectionMap = new Map((this.controls()?.sectionsSignal() ?? []).map((section) => [section.id, section]));\n            return of(\n              values.map((x) => {\n                const section = x.meta ?? sectionMap.get(x.value);\n                return { ...x, meta: section, label: section?.title ?? x.value, sublabel: section?.group ?? undefined };\n              })\n            );\n          }\n        }\n      })\n    ] as FieldDef<unknown>[]\n  } as FormConfig;\n\n  protected readControlsValue(controls: DbxStyleDemoControls): DbxFormStyleDemoSectionsFormValue {\n    return { sections: [...controls.enabledIdsSignal()] };\n  }\n\n  protected applyValueToControls(controls: DbxStyleDemoControls, value: DbxFormStyleDemoSectionsFormValue): void {\n    const formSections = new Set(value.sections ?? []);\n    const enabledIds = controls.enabledIdsSignal();\n\n    controls.sectionsSignal().forEach((section) => {\n      const shouldEnable = formSections.has(section.id);\n\n      if (shouldEnable !== enabledIds.has(section.id)) {\n        controls.setSectionEnabled(section.id, shouldEnable);\n      }\n    });\n  }\n}\n","import { ChangeDetectionStrategy, Component, inject } from '@angular/core';\nimport { AbstractPopoverDirective, DbxPopoverCloseButtonComponent, DbxPopoverContentComponent, DbxPopoverHeaderComponent, DbxPopoverScrollContentDirective } from '@dereekb/dbx-web';\nimport { DbxStyleDemoControlsService } from '@dereekb/dbx-web/style-demo';\nimport { DbxFormStyleDemoSectionsComponent } from './controls.sections.component';\n\n/**\n * Popover that renders {@link DbxFormStyleDemoSectionsComponent} inside the shared popover chrome, registered as the\n * style-demo sections component via `DBX_STYLE_DEMO_SECTIONS_COMPONENT` (see `provideDbxFormStyleDemo()`).\n *\n * `DbxStyleDemoControlsService` opens this through `DbxPopoverService`, anchored to the playground header's \"Sections\"\n * button, because sections only affect the `<dbx-style-demo>` playground page (unlike presets, which restyle the whole\n * app). `dbx-popover-scroll-content` gives the long sections list correct scrolling. The component reads the same\n * {@link DbxStyleDemoControlsService} instance and forwards it to the sections component, which owns the chip field and\n * the controls↔form sync.\n *\n * This component is demo/debug-only and disposable — it is not a dbx-form core runtime primitive.\n */\n@Component({\n  selector: 'dbx-form-style-demo-sections-popover',\n  template: `\n    <dbx-popover-content>\n      <dbx-popover-header icon=\"tune\" header=\"Sections\">\n        <dbx-popover-close-button></dbx-popover-close-button>\n      </dbx-popover-header>\n      <dbx-popover-scroll-content>\n        <div class=\"dbx-p2\"><dbx-form-style-demo-sections [controls]=\"controlsService\" /></div>\n      </dbx-popover-scroll-content>\n    </dbx-popover-content>\n  `,\n  standalone: true,\n  imports: [DbxPopoverContentComponent, DbxPopoverHeaderComponent, DbxPopoverCloseButtonComponent, DbxPopoverScrollContentDirective, DbxFormStyleDemoSectionsComponent],\n  changeDetection: ChangeDetectionStrategy.OnPush\n})\nexport class DbxFormStyleDemoSectionsPopoverComponent extends AbstractPopoverDirective {\n  readonly controlsService = inject(DbxStyleDemoControlsService);\n}\n","import { ChangeDetectionStrategy, Component, inject } from '@angular/core';\nimport { DbxDetachContentComponent, DbxDetachControlsComponent } from '@dereekb/dbx-web';\nimport { DbxStyleDemoControlsService } from '@dereekb/dbx-web/style-demo';\nimport { DbxFormStyleDemoPresetsComponent } from './controls.presets.component';\n\n/**\n * Detach panel that renders {@link DbxFormStyleDemoPresetsComponent} inside the shared detach chrome, registered as the\n * style-demo controls component via `DBX_STYLE_DEMO_CONTROLS_COMPONENT` (see `provideDbxFormStyleDemo()`).\n *\n * `DbxStyleDemoControlsService` opens this through `DbxDetachService`, so the panel survives navigation and is available\n * app-wide. It renders the presets chips (which restyle the whole app); sections (which only affect the playground page)\n * live in their own popover opened from the playground header. The component reads the same\n * {@link DbxStyleDemoControlsService} instance and forwards it to the presets component, which owns the chip field and\n * the controls↔form sync. Scrolling within the fixed-height pane comes from `.dbx-detach-content-container`.\n *\n * This component is demo/debug-only and disposable — it is not a dbx-form core runtime primitive.\n */\n@Component({\n  selector: 'dbx-form-style-demo-controls-detach',\n  template: `\n    <dbx-detach-content>\n      <dbx-detach-controls controls header=\"Style Controls\"></dbx-detach-controls>\n      <div class=\"dbx-p3\">\n        <dbx-form-style-demo-presets [controls]=\"controlsService\" />\n      </div>\n    </dbx-detach-content>\n  `,\n  standalone: true,\n  imports: [DbxDetachContentComponent, DbxDetachControlsComponent, DbxFormStyleDemoPresetsComponent],\n  changeDetection: ChangeDetectionStrategy.OnPush\n})\nexport class DbxFormStyleDemoControlsDetachComponent {\n  readonly controlsService = inject(DbxStyleDemoControlsService);\n}\n","import { ChangeDetectionStrategy, Component } from '@angular/core';\nimport type { FieldDef, FormConfig } from '@ng-forge/dynamic-forms';\nimport { AbstractSyncForgeFormDirective, DbxForgeFormComponentImportsModule, dbxForgeCheckboxField, dbxForgeEmailField, dbxForgeFormComponentProviders, dbxForgeNameField, dbxForgeTextAreaField, dbxForgeToggleField, dbxForgeValueSelectionField } from '@dereekb/dbx-form';\nimport { DbxDocsUiExampleComponent, DbxDocsUiExampleContentComponent, DbxDocsUiExampleInfoComponent } from '@dereekb/dbx-web/docs';\n\n/**\n * Style-demo section rendering a representative `<dbx-forge>` form (name, email, select, textarea, checkbox, toggle)\n * so the form-field surfaces are visible in the playground. Fields paint from the `--mat-form-field-*` and surface\n * tokens, so they respond live to the Shape and Surface levers and flip with light/dark.\n *\n * Requires the host app to register its forge field declarations (the demo app does so via\n * `provideDbxFormConfiguration()` + `provideDbxForgeFormFieldDeclarations()`).\n *\n * @dbxDocsUiExample\n * @dbxDocsUiExampleSlug style-demo-form-fields\n * @dbxDocsUiExampleCategory style-demo\n * @dbxDocsUiExampleSummary A representative dbx-forge form (name, email, select, textarea, checkbox, toggle).\n * @dbxDocsUiExampleRelated text, value-selection, checkbox\n */\n@Component({\n  selector: 'dbx-form-style-demo-fields-section',\n  standalone: true,\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  imports: [DbxDocsUiExampleComponent, DbxDocsUiExampleInfoComponent, DbxDocsUiExampleContentComponent, DbxForgeFormComponentImportsModule],\n  providers: dbxForgeFormComponentProviders(),\n  template: `\n    <dbx-docs-ui-example header=\"Form Fields\" hint=\"A representative dbx-forge form.\">\n      <dbx-docs-ui-example-info>\n        <p>\n          A mix of forge fields — name, email,\n          <code>valueSelectionField</code>\n          , textarea, checkbox, and toggle. Each draws its container colour and corner radius from the\n          <code>--mat-form-field-*</code>\n          tokens layered over the surface ramp, so the fields respond live to the Shape and Surface levers and flip with light/dark. The host app must register its forge field declarations for this section to render.\n        </p>\n      </dbx-docs-ui-example-info>\n      <dbx-docs-ui-example-content>\n        <dbx-forge></dbx-forge>\n      </dbx-docs-ui-example-content>\n    </dbx-docs-ui-example>\n  `\n})\nexport class DbxFormStyleDemoFieldsSectionComponent extends AbstractSyncForgeFormDirective<object> {\n  readonly formConfig: FormConfig = {\n    fields: [\n      dbxForgeNameField({ key: 'name', label: 'Full Name', required: true }),\n      dbxForgeEmailField({ key: 'email', label: 'Email', required: true }),\n      dbxForgeValueSelectionField({\n        key: 'role',\n        label: 'Role',\n        props: {\n          options: [\n            { label: 'Admin', value: 'admin' },\n            { label: 'Editor', value: 'editor' },\n            { label: 'Viewer', value: 'viewer' }\n          ]\n        }\n      }),\n      dbxForgeTextAreaField({ key: 'bio', label: 'Bio', rows: 3 }),\n      dbxForgeCheckboxField({ key: 'subscribe', label: 'Subscribe to updates' }),\n      dbxForgeToggleField({ key: 'notifications', label: 'Enable notifications' })\n    ] as FieldDef<unknown>[]\n  } as FormConfig;\n}\n","import { type EnvironmentProviders, makeEnvironmentProviders } from '@angular/core';\nimport { DBX_STYLE_DEMO_CONTROLS_COMPONENT, DBX_STYLE_DEMO_SECTIONS_COMPONENT, type DbxStyleDemoSectionGroup, provideDbxStyleDemoSections } from '@dereekb/dbx-web/style-demo';\nimport { DbxFormStyleDemoControlsDetachComponent } from './controls.detach.component';\nimport { DbxFormStyleDemoSectionsPopoverComponent } from './controls.sections.popover.component';\nimport { DbxFormStyleDemoFieldsSectionComponent } from './fields.section.component';\n\n/**\n * The `@dereekb/dbx-form/style-demo` section group.\n */\nexport const DBX_FORM_STYLE_DEMO_SECTION_GROUP: DbxStyleDemoSectionGroup = {\n  libId: 'dbx-form',\n  sections: [{ id: 'dbx-form-fields', title: 'Form Fields', group: 'form', tags: ['dbx-form', 'form'], component: DbxFormStyleDemoFieldsSectionComponent, defaultEnabled: true }]\n};\n\n/**\n * Registers the `@dereekb/dbx-form/style-demo` sections with the `<dbx-style-demo>` playground, registers\n * {@link DbxFormStyleDemoControlsDetachComponent} as the global style-demo controls (presets) detach panel, and registers\n * {@link DbxFormStyleDemoSectionsPopoverComponent} as the style-demo sections popover opened from the playground header.\n *\n * The Form Fields section, the controls panel, and the sections popover all render `<dbx-forge>` forms, so the host app\n * must register its forge field declarations (e.g. `provideDbxFormConfiguration()` + `provideDbxForgeFormFieldDeclarations()`) for them to render.\n *\n * Pair with `provideDbxStyleDemo()` (the shell from `@dereekb/dbx-web/style-demo`).\n *\n * @returns EnvironmentProviders contributing the form sections, the controls detach component, and the sections popover component.\n *\n * @__NO_SIDE_EFFECTS__\n */\nexport function provideDbxFormStyleDemo(): EnvironmentProviders {\n  return makeEnvironmentProviders([provideDbxStyleDemoSections(DBX_FORM_STYLE_DEMO_SECTION_GROUP), { provide: DBX_STYLE_DEMO_CONTROLS_COMPONENT, useValue: DbxFormStyleDemoControlsDetachComponent }, { provide: DBX_STYLE_DEMO_SECTIONS_COMPONENT, useValue: DbxFormStyleDemoSectionsPopoverComponent }]);\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}