@dereekb/dbx-web 13.43.0 → 14.0.0

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

@@ -1,6 +1,6 @@
 import { asArray, cssClassesSet, useIterableOrValue, spaceSeparatedCssClasses, makeValuesGroupMap } from '@dereekb/util';
 import * as i0 from '@angular/core';
-import { inject, Injectable, input, computed, Directive, InjectionToken, makeEnvironmentProviders, signal, viewChild, ElementRef, effect, ChangeDetectionStrategy, Component, provideEnvironmentInitializer } from '@angular/core';
+import { inject, Injectable, input, computed, Directive, InjectionToken, makeEnvironmentProviders, signal, Service, viewChild, ElementRef, effect, Component, provideEnvironmentInitializer } from '@angular/core';
 import { toObservable } from '@angular/core/rxjs-interop';
 import { DbxDetachService, DbxPopoverService, DbxStyleService, DbxButtonComponent, DbxFlexGroupDirective, DbxFlexSizeDirective, DbxButtonSpacerDirective, DbxColorService, DbxColorDirective, DBX_THEME_COLORS_MAIN, DBX_THEME_COLORS_EXTRA, DbxPagebarComponent, DbxBarDirective, DbxBarHeaderComponent, DbxAnchorListComponent } from '@dereekb/dbx-web';
 import { NgComponentOutlet } from '@angular/common';
@@ -182,10 +182,10 @@ class DbxStyleDemoStyleLoaderService {
         });
         return mergeDbxStyleDemoStyleTemplates(resolved);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: DbxStyleDemoStyleLoaderService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: DbxStyleDemoStyleLoaderService });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: DbxStyleDemoStyleLoaderService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: DbxStyleDemoStyleLoaderService });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: DbxStyleDemoStyleLoaderService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: DbxStyleDemoStyleLoaderService, decorators: [{
             type: Injectable
         }], ctorParameters: () => [] });
 
@@ -212,7 +212,8 @@ class DbxStyleDemoStyleLoaderDirective {
     /**
      * Template keys to resolve through the service, or a config object carrying inline templates.
      */
-    dbxStyleDemoStyleLoader = input(undefined, ...(ngDevMode ? [{ debugName: "dbxStyleDemoStyleLoader" }] : /* istanbul ignore next */ []));
+    dbxStyleDemoStyleLoader = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "dbxStyleDemoStyleLoader" }] : /* istanbul ignore next */ []));
     _mergedSignal = computed(() => {
         const input = this.dbxStyleDemoStyleLoader();
         const keysOrTemplates = isDbxStyleDemoStyleLoaderConfig(input) ? input.templates : input;
@@ -226,24 +227,26 @@ class DbxStyleDemoStyleLoaderDirective {
             result = mergeDbxStyleDemoStyleTemplates(asArray(keysOrTemplates).filter(isDbxStyleDemoStyleTemplate));
         }
         return result;
-    }, ...(ngDevMode ? [{ debugName: "_mergedSignal" }] : /* istanbul ignore next */ []));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_mergedSignal" }] : /* istanbul ignore next */ []));
     styleSignal = computed(() => {
         const { style } = this._mergedSignal();
         return Object.keys(style).length > 0 ? style : null;
-    }, ...(ngDevMode ? [{ debugName: "styleSignal" }] : /* istanbul ignore next */ []));
-    classesSignal = computed(() => spaceSeparatedCssClasses(this._mergedSignal().classes), ...(ngDevMode ? [{ debugName: "classesSignal" }] : /* istanbul ignore next */ []));
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: DbxStyleDemoStyleLoaderDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.11", type: DbxStyleDemoStyleLoaderDirective, isStandalone: true, selector: "[dbxStyleDemoStyleLoader]", inputs: { dbxStyleDemoStyleLoader: { classPropertyName: "dbxStyleDemoStyleLoader", publicName: "dbxStyleDemoStyleLoader", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classesSignal()", "style": "styleSignal()" } }, ngImport: i0 });
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "styleSignal" }] : /* istanbul ignore next */ []));
+    classesSignal = computed(() => spaceSeparatedCssClasses(this._mergedSignal().classes), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "classesSignal" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: DbxStyleDemoStyleLoaderDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.1.4", type: DbxStyleDemoStyleLoaderDirective, isStandalone: true, selector: "[dbxStyleDemoStyleLoader]", inputs: { dbxStyleDemoStyleLoader: { classPropertyName: "dbxStyleDemoStyleLoader", publicName: "dbxStyleDemoStyleLoader", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classesSignal()", "style": "styleSignal()" } }, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: DbxStyleDemoStyleLoaderDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: DbxStyleDemoStyleLoaderDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[dbxStyleDemoStyleLoader]',
                     host: {
                         '[class]': 'classesSignal()',
                         '[style]': 'styleSignal()'
-                    },
-                    standalone: true
+                    }
                 }]
         }], propDecorators: { dbxStyleDemoStyleLoader: [{ type: i0.Input, args: [{ isSignal: true, alias: "dbxStyleDemoStyleLoader", required: false }] }] } });
 
@@ -287,14 +290,14 @@ class DbxStyleDemoSectionRegistry {
     sectionsSignal;
     constructor() {
         const groups = inject(DBX_STYLE_DEMO_SECTION_GROUP, { optional: true }) ?? [];
-        this.sectionsSignal = signal(groups.flatMap((group) => group.sections), ...(ngDevMode ? [{ debugName: "sectionsSignal" }] : /* istanbul ignore next */ []));
+        this.sectionsSignal = signal(groups.flatMap((group) => group.sections), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "sectionsSignal" }] : /* istanbul ignore next */ []));
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: DbxStyleDemoSectionRegistry, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: DbxStyleDemoSectionRegistry, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: DbxStyleDemoSectionRegistry, deps: [], target: i0.ɵɵFactoryTarget.Service });
+    static ɵprov = i0.ɵɵngDeclareService({ minVersion: "22.0.0", version: "22.1.4", ngImport: i0, type: DbxStyleDemoSectionRegistry });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: DbxStyleDemoSectionRegistry, decorators: [{
-            type: Injectable,
-            args: [{ providedIn: 'root' }]
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: DbxStyleDemoSectionRegistry, decorators: [{
+            type: Service
         }], ctorParameters: () => [] });
 
 /**
@@ -414,42 +417,52 @@ class DbxStyleDemoControlsService {
     _sectionsComponentClass = inject(DBX_STYLE_DEMO_SECTIONS_COMPONENT, { optional: true });
     _styleService = inject(DbxStyleService, { optional: true });
     _config = inject(DbxStyleDemoControlsServiceConfig, { optional: true });
-    _sectionEnabledOverrides = signal(new Map(), ...(ngDevMode ? [{ debugName: "_sectionEnabledOverrides" }] : /* istanbul ignore next */ []));
-    _activeTemplateKeysOverride = signal(undefined, ...(ngDevMode ? [{ debugName: "_activeTemplateKeysOverride" }] : /* istanbul ignore next */ []));
-    _defaultActiveTemplateKeys = signal([], ...(ngDevMode ? [{ debugName: "_defaultActiveTemplateKeys" }] : /* istanbul ignore next */ []));
+    _sectionEnabledOverrides = signal(new Map(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_sectionEnabledOverrides" }] : /* istanbul ignore next */ []));
+    _activeTemplateKeysOverride = signal(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_activeTemplateKeysOverride" }] : /* istanbul ignore next */ []));
+    _defaultActiveTemplateKeys = signal([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_defaultActiveTemplateKeys" }] : /* istanbul ignore next */ []));
     /**
      * True when a controls component is registered, gating the controls buttons.
      */
-    hasControlsSignal = signal(this._controlsComponentClass != null, ...(ngDevMode ? [{ debugName: "hasControlsSignal" }] : /* istanbul ignore next */ []));
+    hasControlsSignal = signal(this._controlsComponentClass != null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hasControlsSignal" }] : /* istanbul ignore next */ []));
     /**
      * True when a sections component is registered (and a popover service is available), gating the playground's
      * "Sections" button.
      */
-    hasSectionsSignal = signal(this._sectionsComponentClass != null && this._popoverService != null, ...(ngDevMode ? [{ debugName: "hasSectionsSignal" }] : /* istanbul ignore next */ []));
+    hasSectionsSignal = signal(this._sectionsComponentClass != null && this._popoverService != null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hasSectionsSignal" }] : /* istanbul ignore next */ []));
     /**
      * All registered sections, unfiltered (the global controls list every section).
      */
     sectionsSignal = this._registry.sectionsSignal;
-    templateTogglesSignal = signal(this._toggles, ...(ngDevMode ? [{ debugName: "templateTogglesSignal" }] : /* istanbul ignore next */ []));
+    templateTogglesSignal = signal(this._toggles, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "templateTogglesSignal" }] : /* istanbul ignore next */ []));
     enabledIdsSignal = computed(() => {
         const overrides = this._sectionEnabledOverrides();
         return new Set(this.sectionsSignal()
             .filter((section) => overrides.get(section.id) ?? section.defaultEnabled !== false)
             .map((section) => section.id));
-    }, ...(ngDevMode ? [{ debugName: "enabledIdsSignal" }] : /* istanbul ignore next */ []));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "enabledIdsSignal" }] : /* istanbul ignore next */ []));
     activeTemplateKeysSignal = computed(() => {
         const _defaultActiveTemplateKeys = this._defaultActiveTemplateKeys();
         const override = this._activeTemplateKeysOverride();
         return override ?? new Set(_defaultActiveTemplateKeys);
-    }, ...(ngDevMode ? [{ debugName: "activeTemplateKeysSignal" }] : /* istanbul ignore next */ []));
-    activeTemplateKeysArraySignal = computed(() => Array.from(this.activeTemplateKeysSignal()), ...(ngDevMode ? [{ debugName: "activeTemplateKeysArraySignal" }] : /* istanbul ignore next */ []));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "activeTemplateKeysSignal" }] : /* istanbul ignore next */ []));
+    activeTemplateKeysArraySignal = computed(() => Array.from(this.activeTemplateKeysSignal()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "activeTemplateKeysArraySignal" }] : /* istanbul ignore next */ []));
     constructor() {
         const styleService = this._styleService;
         if (styleService != null && this._config?.applyStylesToApp !== false) {
             const supplementSignal = computed(() => {
                 const { style, classes } = this._loaderService.mergeTemplates(Array.from(this.activeTemplateKeysSignal()));
                 return { style, classes };
-            }, ...(ngDevMode ? [{ debugName: "supplementSignal" }] : /* istanbul ignore next */ []));
+            }, /* @ts-ignore */
+            ...(ngDevMode ? [{ debugName: "supplementSignal" }] : /* istanbul ignore next */ []));
             styleService.setSupplement(toObservable(supplementSignal));
         }
     }
@@ -518,10 +531,10 @@ class DbxStyleDemoControlsService {
             });
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: DbxStyleDemoControlsService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: DbxStyleDemoControlsService });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: DbxStyleDemoControlsService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: DbxStyleDemoControlsService });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: DbxStyleDemoControlsService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: DbxStyleDemoControlsService, decorators: [{
             type: Injectable
         }], ctorParameters: () => [] });
 
@@ -550,7 +563,8 @@ class DbxStyleDemoComponent {
     /**
      * Playground configuration.
      */
-    config = input(undefined, ...(ngDevMode ? [{ debugName: "config" }] : /* istanbul ignore next */ []));
+    config = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "config" }] : /* istanbul ignore next */ []));
     /**
      * True when a controls component is registered, gating the "Style controls" button.
      */
@@ -582,18 +596,21 @@ class DbxStyleDemoComponent {
             result = sections;
         }
         return result;
-    }, ...(ngDevMode ? [{ debugName: "sectionsSignal" }] : /* istanbul ignore next */ []));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "sectionsSignal" }] : /* istanbul ignore next */ []));
     visibleSectionsSignal = computed(() => {
         const enabledIds = this._controlsService.enabledIdsSignal();
         return this.sectionsSignal().filter((section) => enabledIds.has(section.id));
-    }, ...(ngDevMode ? [{ debugName: "visibleSectionsSignal" }] : /* istanbul ignore next */ []));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "visibleSectionsSignal" }] : /* istanbul ignore next */ []));
     /**
      * Seeds the controls service with this playground's configured default active templates.
      */
     _seedDefaultTemplatesEffect = effect(() => {
         const defaults = this.config()?.defaultActiveTemplates;
         this._controlsService.setDefaultActiveTemplates(defaults ?? []);
-    }, ...(ngDevMode ? [{ debugName: "_seedDefaultTemplatesEffect" }] : /* istanbul ignore next */ []));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_seedDefaultTemplatesEffect" }] : /* istanbul ignore next */ []));
     openControls() {
         this._controlsService.openControls();
     }
@@ -603,8 +620,8 @@ class DbxStyleDemoComponent {
             this._controlsService.openSectionsPopover({ origin });
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: DbxStyleDemoComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.11", type: DbxStyleDemoComponent, isStandalone: true, selector: "dbx-style-demo", inputs: { config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "sectionsButton", first: true, predicate: ["sectionsButton"], descendants: true, read: ElementRef, isSignal: true }], ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: DbxStyleDemoComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.4", type: DbxStyleDemoComponent, isStandalone: true, selector: "dbx-style-demo", inputs: { config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "sectionsButton", first: true, predicate: ["sectionsButton"], descendants: true, read: ElementRef, isSignal: true }], ngImport: i0, template: `
     <div class="dbx-style-demo dbx-flex-column dbx-p3">
       <div class="dbx-flex-bar dbx-pb3">
         <span class="dbx-text-title-large">Style Demo</span>
@@ -632,9 +649,9 @@ class DbxStyleDemoComponent {
         </div>
       </div>
     </div>
-  `, isInline: true, dependencies: [{ kind: "directive", type: NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletEnvironmentInjector", "ngComponentOutletContent", "ngComponentOutletNgModule"], exportAs: ["ngComponentOutlet"] }, { kind: "ngmodule", type: MatCardModule }, { kind: "component", type: i1.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: i1.MatCardContent, selector: "mat-card-content" }, { kind: "component", type: DbxButtonComponent, selector: "dbx-button", inputs: ["bar", "type", "buttonStyle", "color", "spinnerColor", "customButtonColor", "customTextColor", "customSpinnerColor", "basic", "tonal", "raised", "stroked", "flat", "iconOnly", "fab", "customContent", "allowClickPropagation", "mode"] }, { kind: "directive", type: DbxFlexGroupDirective, selector: "[dbxFlexGroup]", inputs: ["content", "breakToColumn", "relative", "breakpoint"] }, { kind: "directive", type: DbxFlexSizeDirective, selector: "[dbxFlexSize]", inputs: ["dbxFlexSize"] }, { kind: "directive", type: DbxStyleDemoStyleLoaderDirective, selector: "[dbxStyleDemoStyleLoader]", inputs: ["dbxStyleDemoStyleLoader"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, isInline: true, dependencies: [{ kind: "directive", type: NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletEnvironmentInjector", "ngComponentOutletContent", "ngComponentOutletNgModule"], exportAs: ["ngComponentOutlet"] }, { kind: "ngmodule", type: MatCardModule }, { kind: "component", type: i1.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: i1.MatCardContent, selector: "mat-card-content" }, { kind: "component", type: DbxButtonComponent, selector: "dbx-button", inputs: ["bar", "type", "buttonStyle", "color", "spinnerColor", "customTextColor", "customSpinnerColor", "basic", "tonal", "raised", "stroked", "flat", "iconOnly", "fab", "customContent", "allowClickPropagation", "mode"] }, { kind: "directive", type: DbxFlexGroupDirective, selector: "[dbxFlexGroup]", inputs: ["content", "breakToColumn", "relative", "breakpoint"] }, { kind: "directive", type: DbxFlexSizeDirective, selector: "[dbxFlexSize]", inputs: ["dbxFlexSize"] }, { kind: "directive", type: DbxStyleDemoStyleLoaderDirective, selector: "[dbxStyleDemoStyleLoader]", inputs: ["dbxStyleDemoStyleLoader"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: DbxStyleDemoComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: DbxStyleDemoComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'dbx-style-demo',
@@ -667,9 +684,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImpo
       </div>
     </div>
   `,
-                    standalone: true,
-                    imports: [NgComponentOutlet, MatCardModule, DbxButtonComponent, DbxFlexGroupDirective, DbxFlexSizeDirective, DbxStyleDemoStyleLoaderDirective],
-                    changeDetection: ChangeDetectionStrategy.OnPush
+                    imports: [NgComponentOutlet, MatCardModule, DbxButtonComponent, DbxFlexGroupDirective, DbxFlexSizeDirective, DbxStyleDemoStyleLoaderDirective]
                 }]
         }], propDecorators: { config: [{ type: i0.Input, args: [{ isSignal: true, alias: "config", required: false }] }], sectionsButton: [{ type: i0.ViewChild, args: ['sectionsButton', { ...{ read: ElementRef }, isSignal: true }] }] } });
 
@@ -687,8 +702,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImpo
 class DbxStyleDemoButtonsSectionComponent {
     variants = ['basic', 'stroked', 'flat', 'raised', 'tonal'];
     colors = [undefined, 'primary', 'accent', 'warn', 'success'];
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: DbxStyleDemoButtonsSectionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.11", type: DbxStyleDemoButtonsSectionComponent, isStandalone: true, selector: "dbx-style-demo-buttons-section", ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: DbxStyleDemoButtonsSectionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.4", type: DbxStyleDemoButtonsSectionComponent, isStandalone: true, selector: "dbx-style-demo-buttons-section", ngImport: i0, template: `
     <dbx-docs-ui-example header="Buttons" hint="dbx-button appearances across theme colors.">
       <dbx-docs-ui-example-info>
         <p>
@@ -730,14 +745,12 @@ class DbxStyleDemoButtonsSectionComponent {
         </div>
       </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: "component", type: DbxButtonComponent, selector: "dbx-button", inputs: ["bar", "type", "buttonStyle", "color", "spinnerColor", "customButtonColor", "customTextColor", "customSpinnerColor", "basic", "tonal", "raised", "stroked", "flat", "iconOnly", "fab", "customContent", "allowClickPropagation", "mode"] }, { kind: "directive", type: DbxButtonSpacerDirective, selector: "dbx-button-spacer,[dbxButtonSpacer]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, 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: "component", type: DbxButtonComponent, selector: "dbx-button", inputs: ["bar", "type", "buttonStyle", "color", "spinnerColor", "customTextColor", "customSpinnerColor", "basic", "tonal", "raised", "stroked", "flat", "iconOnly", "fab", "customContent", "allowClickPropagation", "mode"] }, { kind: "directive", type: DbxButtonSpacerDirective, selector: "dbx-button-spacer,[dbxButtonSpacer]" }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: DbxStyleDemoButtonsSectionComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: DbxStyleDemoButtonsSectionComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'dbx-style-demo-buttons-section',
-                    standalone: true,
-                    changeDetection: ChangeDetectionStrategy.OnPush,
                     imports: [DbxDocsUiExampleComponent, DbxDocsUiExampleInfoComponent, DbxDocsUiExampleContentComponent, DbxButtonComponent, DbxButtonSpacerDirective],
                     template: `
     <dbx-docs-ui-example header="Buttons" hint="dbx-button appearances across theme colors.">
@@ -796,8 +809,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImpo
  * @dbxDocsUiExampleRelated mat-card, dbx-card-box
  */
 class DbxStyleDemoCardsSectionComponent {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: DbxStyleDemoCardsSectionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.11", type: DbxStyleDemoCardsSectionComponent, isStandalone: true, selector: "dbx-style-demo-cards-section", ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: DbxStyleDemoCardsSectionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.4", type: DbxStyleDemoCardsSectionComponent, isStandalone: true, selector: "dbx-style-demo-cards-section", ngImport: i0, template: `
     <dbx-docs-ui-example header="Cards" hint="Material 3 card appearances painted from system surface tokens.">
       <dbx-docs-ui-example-info>
         <p>
@@ -846,14 +859,12 @@ class DbxStyleDemoCardsSectionComponent {
         </div>
       </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: MatCardModule }, { kind: "component", type: i1.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: i1.MatCardContent, selector: "mat-card-content" }, { kind: "component", type: DbxButtonComponent, selector: "dbx-button", inputs: ["bar", "type", "buttonStyle", "color", "spinnerColor", "customButtonColor", "customTextColor", "customSpinnerColor", "basic", "tonal", "raised", "stroked", "flat", "iconOnly", "fab", "customContent", "allowClickPropagation", "mode"] }, { kind: "directive", type: DbxFlexGroupDirective, selector: "[dbxFlexGroup]", inputs: ["content", "breakToColumn", "relative", "breakpoint"] }, { kind: "directive", type: DbxFlexSizeDirective, selector: "[dbxFlexSize]", inputs: ["dbxFlexSize"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, 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: MatCardModule }, { kind: "component", type: i1.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: i1.MatCardContent, selector: "mat-card-content" }, { kind: "component", type: DbxButtonComponent, selector: "dbx-button", inputs: ["bar", "type", "buttonStyle", "color", "spinnerColor", "customTextColor", "customSpinnerColor", "basic", "tonal", "raised", "stroked", "flat", "iconOnly", "fab", "customContent", "allowClickPropagation", "mode"] }, { kind: "directive", type: DbxFlexGroupDirective, selector: "[dbxFlexGroup]", inputs: ["content", "breakToColumn", "relative", "breakpoint"] }, { kind: "directive", type: DbxFlexSizeDirective, selector: "[dbxFlexSize]", inputs: ["dbxFlexSize"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: DbxStyleDemoCardsSectionComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: DbxStyleDemoCardsSectionComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'dbx-style-demo-cards-section',
-                    standalone: true,
-                    changeDetection: ChangeDetectionStrategy.OnPush,
                     imports: [DbxDocsUiExampleComponent, DbxDocsUiExampleInfoComponent, DbxDocsUiExampleContentComponent, MatCardModule, DbxButtonComponent, DbxFlexGroupDirective, DbxFlexSizeDirective],
                     template: `
     <dbx-docs-ui-example header="Cards" hint="Material 3 card appearances painted from system surface tokens.">
@@ -922,8 +933,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImpo
 class DbxStyleDemoColorTemplatesSectionComponent {
     _colorService = inject(DbxColorService, { optional: true });
     templates = (this._colorService?.getAllRegisteredTemplateKeys() ?? []).map((key) => ({ key, curated: this._colorService?.getTemplate(key)?.curated === true }));
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: DbxStyleDemoColorTemplatesSectionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.11", type: DbxStyleDemoColorTemplatesSectionComponent, isStandalone: true, selector: "dbx-style-demo-color-templates-section", ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: DbxStyleDemoColorTemplatesSectionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.4", type: DbxStyleDemoColorTemplatesSectionComponent, isStandalone: true, selector: "dbx-style-demo-color-templates-section", ngImport: i0, template: `
     <dbx-docs-ui-example header="Color Templates" hint="Registered DbxColorService templates.">
       <dbx-docs-ui-example-info>
         <p>
@@ -961,14 +972,12 @@ class DbxStyleDemoColorTemplatesSectionComponent {
         }
       </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: "directive", type: DbxColorDirective, selector: "[dbxColor]", inputs: ["dbxColor", "dbxColorTone"], outputs: ["dbxColorChange", "dbxColorToneChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, 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: "directive", type: DbxColorDirective, selector: "[dbxColor]", inputs: ["dbxColor", "dbxColorTone"], outputs: ["dbxColorChange", "dbxColorToneChange"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: DbxStyleDemoColorTemplatesSectionComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: DbxStyleDemoColorTemplatesSectionComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'dbx-style-demo-color-templates-section',
-                    standalone: true,
-                    changeDetection: ChangeDetectionStrategy.OnPush,
                     imports: [DbxDocsUiExampleComponent, DbxDocsUiExampleInfoComponent, DbxDocsUiExampleContentComponent, DbxColorDirective],
                     template: `
     <dbx-docs-ui-example header="Color Templates" hint="Registered DbxColorService templates.">
@@ -1025,8 +1034,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImpo
 class DbxStyleDemoColorTonesSectionComponent {
     colors = [...DBX_THEME_COLORS_MAIN, ...DBX_THEME_COLORS_EXTRA];
     tones = [40, 18, 8];
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: DbxStyleDemoColorTonesSectionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.11", type: DbxStyleDemoColorTonesSectionComponent, isStandalone: true, selector: "dbx-style-demo-color-tones-section", ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: DbxStyleDemoColorTonesSectionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.4", type: DbxStyleDemoColorTonesSectionComponent, isStandalone: true, selector: "dbx-style-demo-color-tones-section", ngImport: i0, template: `
     <dbx-docs-ui-example header="Color & Tones" hint="Themed [dbxColor] backgrounds, full and tonal.">
       <dbx-docs-ui-example-info>
         <p>
@@ -1053,14 +1062,12 @@ class DbxStyleDemoColorTonesSectionComponent {
         </div>
       </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: "directive", type: DbxColorDirective, selector: "[dbxColor]", inputs: ["dbxColor", "dbxColorTone"], outputs: ["dbxColorChange", "dbxColorToneChange"] }, { kind: "directive", type: DbxFlexGroupDirective, selector: "[dbxFlexGroup]", inputs: ["content", "breakToColumn", "relative", "breakpoint"] }, { kind: "directive", type: DbxFlexSizeDirective, selector: "[dbxFlexSize]", inputs: ["dbxFlexSize"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, 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: "directive", type: DbxColorDirective, selector: "[dbxColor]", inputs: ["dbxColor", "dbxColorTone"], outputs: ["dbxColorChange", "dbxColorToneChange"] }, { kind: "directive", type: DbxFlexGroupDirective, selector: "[dbxFlexGroup]", inputs: ["content", "breakToColumn", "relative", "breakpoint"] }, { kind: "directive", type: DbxFlexSizeDirective, selector: "[dbxFlexSize]", inputs: ["dbxFlexSize"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: DbxStyleDemoColorTonesSectionComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: DbxStyleDemoColorTonesSectionComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'dbx-style-demo-color-tones-section',
-                    standalone: true,
-                    changeDetection: ChangeDetectionStrategy.OnPush,
                     imports: [DbxDocsUiExampleComponent, DbxDocsUiExampleInfoComponent, DbxDocsUiExampleContentComponent, DbxColorDirective, DbxFlexGroupDirective, DbxFlexSizeDirective],
                     template: `
     <dbx-docs-ui-example header="Color & Tones" hint="Themed [dbxColor] backgrounds, full and tonal.">
@@ -1118,8 +1125,8 @@ class DbxStyleDemoNavigationSectionComponent {
         },
         { title: 'Help', icon: 'help', onClick: () => undefined }
     ];
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: DbxStyleDemoNavigationSectionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.11", type: DbxStyleDemoNavigationSectionComponent, isStandalone: true, selector: "dbx-style-demo-navigation-section", ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: DbxStyleDemoNavigationSectionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.4", type: DbxStyleDemoNavigationSectionComponent, isStandalone: true, selector: "dbx-style-demo-navigation-section", ngImport: i0, template: `
     <dbx-docs-ui-example header="Navigation" hint="Router-free navigation building blocks.">
       <dbx-docs-ui-example-info>
         <p>
@@ -1157,14 +1164,12 @@ class DbxStyleDemoNavigationSectionComponent {
         </div>
       </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: "component", type: DbxPagebarComponent, selector: "dbx-pagebar" }, { kind: "directive", type: DbxBarDirective, selector: "dbx-bar,[dbxBar]" }, { kind: "component", type: DbxBarHeaderComponent, selector: "dbx-bar-header", inputs: ["text", "icon"] }, { kind: "component", type: DbxAnchorListComponent, selector: "dbx-anchor-list", inputs: ["anchors"] }, { kind: "component", type: DbxButtonComponent, selector: "dbx-button", inputs: ["bar", "type", "buttonStyle", "color", "spinnerColor", "customButtonColor", "customTextColor", "customSpinnerColor", "basic", "tonal", "raised", "stroked", "flat", "iconOnly", "fab", "customContent", "allowClickPropagation", "mode"] }, { kind: "directive", type: DbxButtonSpacerDirective, selector: "dbx-button-spacer,[dbxButtonSpacer]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, 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: "component", type: DbxPagebarComponent, selector: "dbx-pagebar" }, { kind: "directive", type: DbxBarDirective, selector: "dbx-bar,[dbxBar]" }, { kind: "component", type: DbxBarHeaderComponent, selector: "dbx-bar-header", inputs: ["text", "icon"] }, { kind: "component", type: DbxAnchorListComponent, selector: "dbx-anchor-list", inputs: ["anchors"] }, { kind: "component", type: DbxButtonComponent, selector: "dbx-button", inputs: ["bar", "type", "buttonStyle", "color", "spinnerColor", "customTextColor", "customSpinnerColor", "basic", "tonal", "raised", "stroked", "flat", "iconOnly", "fab", "customContent", "allowClickPropagation", "mode"] }, { kind: "directive", type: DbxButtonSpacerDirective, selector: "dbx-button-spacer,[dbxButtonSpacer]" }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: DbxStyleDemoNavigationSectionComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: DbxStyleDemoNavigationSectionComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'dbx-style-demo-navigation-section',
-                    standalone: true,
-                    changeDetection: ChangeDetectionStrategy.OnPush,
                     imports: [DbxDocsUiExampleComponent, DbxDocsUiExampleInfoComponent, DbxDocsUiExampleContentComponent, DbxPagebarComponent, DbxBarDirective, DbxBarHeaderComponent, DbxAnchorListComponent, DbxButtonComponent, DbxButtonSpacerDirective],
                     template: `
     <dbx-docs-ui-example header="Navigation" hint="Router-free navigation building blocks.">
@@ -1233,8 +1238,8 @@ class DbxStyleDemoShapeScaleSectionComponent {
         { label: 'extra-extra-large', radius: '48px' },
         { label: 'full', radius: 'var(--mat-sys-corner-full)', webToken: '--mat-sys-corner-full' }
     ];
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: DbxStyleDemoShapeScaleSectionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.11", type: DbxStyleDemoShapeScaleSectionComponent, isStandalone: true, selector: "dbx-style-demo-shape-scale-section", ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: DbxStyleDemoShapeScaleSectionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.4", type: DbxStyleDemoShapeScaleSectionComponent, isStandalone: true, selector: "dbx-style-demo-shape-scale-section", ngImport: i0, template: `
     <dbx-docs-ui-example header="Shape Scale" hint="The Material 3 corner-radius scale.">
       <dbx-docs-ui-example-info>
         <p>
@@ -1282,14 +1287,12 @@ class DbxStyleDemoShapeScaleSectionComponent {
         </div>
       </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: MatCardModule }, { kind: "component", type: i1.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: i1.MatCardContent, selector: "mat-card-content" }, { kind: "component", type: DbxButtonComponent, selector: "dbx-button", inputs: ["bar", "type", "buttonStyle", "color", "spinnerColor", "customButtonColor", "customTextColor", "customSpinnerColor", "basic", "tonal", "raised", "stroked", "flat", "iconOnly", "fab", "customContent", "allowClickPropagation", "mode"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, 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: MatCardModule }, { kind: "component", type: i1.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: i1.MatCardContent, selector: "mat-card-content" }, { kind: "component", type: DbxButtonComponent, selector: "dbx-button", inputs: ["bar", "type", "buttonStyle", "color", "spinnerColor", "customTextColor", "customSpinnerColor", "basic", "tonal", "raised", "stroked", "flat", "iconOnly", "fab", "customContent", "allowClickPropagation", "mode"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: DbxStyleDemoShapeScaleSectionComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: DbxStyleDemoShapeScaleSectionComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'dbx-style-demo-shape-scale-section',
-                    standalone: true,
-                    changeDetection: ChangeDetectionStrategy.OnPush,
                     imports: [DbxDocsUiExampleComponent, DbxDocsUiExampleInfoComponent, DbxDocsUiExampleContentComponent, MatCardModule, DbxButtonComponent],
                     template: `
     <dbx-docs-ui-example header="Shape Scale" hint="The Material 3 corner-radius scale.">
@@ -1370,8 +1373,8 @@ class DbxStyleDemoSurfacesSectionComponent {
         { label: 'outline', border: '1px solid var(--mat-sys-outline)' },
         { label: 'outline-variant', border: '1px solid var(--mat-sys-outline-variant)' }
     ];
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: DbxStyleDemoSurfacesSectionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.11", type: DbxStyleDemoSurfacesSectionComponent, isStandalone: true, selector: "dbx-style-demo-surfaces-section", ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: DbxStyleDemoSurfacesSectionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.4", type: DbxStyleDemoSurfacesSectionComponent, isStandalone: true, selector: "dbx-style-demo-surfaces-section", ngImport: i0, template: `
     <dbx-docs-ui-example header="Surfaces" hint="The Material 3 surface ramp from system tokens.">
       <dbx-docs-ui-example-info>
         <p>
@@ -1412,14 +1415,12 @@ class DbxStyleDemoSurfacesSectionComponent {
         </div>
       </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" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, 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" }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: DbxStyleDemoSurfacesSectionComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: DbxStyleDemoSurfacesSectionComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'dbx-style-demo-surfaces-section',
-                    standalone: true,
-                    changeDetection: ChangeDetectionStrategy.OnPush,
                     imports: [DbxDocsUiExampleComponent, DbxDocsUiExampleInfoComponent, DbxDocsUiExampleContentComponent],
                     template: `
     <dbx-docs-ui-example header="Surfaces" hint="The Material 3 surface ramp from system tokens.">
@@ -1484,8 +1485,8 @@ class DbxStyleDemoTypeRolesSectionComponent {
         { cssClass: 'dbx-text-body-large', label: 'Body Large — the quick brown fox jumps over the lazy dog.' },
         { cssClass: 'dbx-text-label-medium', label: 'Label Medium' }
     ];
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: DbxStyleDemoTypeRolesSectionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.11", type: DbxStyleDemoTypeRolesSectionComponent, isStandalone: true, selector: "dbx-style-demo-type-roles-section", ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: DbxStyleDemoTypeRolesSectionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.4", type: DbxStyleDemoTypeRolesSectionComponent, isStandalone: true, selector: "dbx-style-demo-type-roles-section", ngImport: i0, template: `
     <dbx-docs-ui-example header="Type Roles" hint="Material 3 typescale via .dbx-text-* utilities.">
       <dbx-docs-ui-example-info>
         <p>
@@ -1506,14 +1507,12 @@ class DbxStyleDemoTypeRolesSectionComponent {
         </div>
       </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" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, 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" }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: DbxStyleDemoTypeRolesSectionComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: DbxStyleDemoTypeRolesSectionComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'dbx-style-demo-type-roles-section',
-                    standalone: true,
-                    changeDetection: ChangeDetectionStrategy.OnPush,
                     imports: [DbxDocsUiExampleComponent, DbxDocsUiExampleInfoComponent, DbxDocsUiExampleContentComponent],
                     template: `
     <dbx-docs-ui-example header="Type Roles" hint="Material 3 typescale via .dbx-text-* utilities.">