@dereekb/dbx-web 13.6.2 → 13.6.3

package/fesm2022/dereekb-dbx-web.mjs

@@ -13390,12 +13390,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.3", ngImpor
  *
  * Use the `center` input to vertically center the badge with the content.
  *
+ * Accepts either individual inputs or a single `config` object. Individual inputs
+ * take precedence over config values when both are provided.
+ *
  * @example
  * ```html
  * <dbx-step-block [step]="1" header="Create Account" hint="Fill in the registration form.">
  *   <p>Enter your email and password to get started.</p>
  * </dbx-step-block>
  *
+ * <dbx-step-block [config]="stepConfig">
+ *   <p>Content using a config object.</p>
+ * </dbx-step-block>
+ *
  * <dbx-step-block [step]="2" color="accent" header="Custom Header Content">
  *   <span header>Extra header content</span>
  *   <p>Detail content goes here.</p>
@@ -13403,30 +13410,37 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.3", ngImpor
  * ```
  */
 class DbxStepBlockComponent {
-    step = input(1, ...(ngDevMode ? [{ debugName: "step" }] : /* istanbul ignore next */ []));
+    config = input(...(ngDevMode ? [undefined, { debugName: "config" }] : /* istanbul ignore next */ []));
+    step = input(...(ngDevMode ? [undefined, { debugName: "step" }] : /* istanbul ignore next */ []));
     icon = input(...(ngDevMode ? [undefined, { debugName: "icon" }] : /* istanbul ignore next */ []));
     header = input(...(ngDevMode ? [undefined, { debugName: "header" }] : /* istanbul ignore next */ []));
     hint = input(...(ngDevMode ? [undefined, { debugName: "hint" }] : /* istanbul ignore next */ []));
-    color = input('primary', ...(ngDevMode ? [{ debugName: "color" }] : /* istanbul ignore next */ []));
-    center = input(false, ...(ngDevMode ? [{ debugName: "center" }] : /* istanbul ignore next */ []));
+    color = input(...(ngDevMode ? [undefined, { debugName: "color" }] : /* istanbul ignore next */ []));
+    center = input(...(ngDevMode ? [undefined, { debugName: "center" }] : /* istanbul ignore next */ []));
+    stepSignal = computed(() => this.step() ?? this.config()?.step ?? 1, ...(ngDevMode ? [{ debugName: "stepSignal" }] : /* istanbul ignore next */ []));
+    iconSignal = computed(() => this.icon() ?? this.config()?.icon, ...(ngDevMode ? [{ debugName: "iconSignal" }] : /* istanbul ignore next */ []));
+    headerSignal = computed(() => this.header() ?? this.config()?.header, ...(ngDevMode ? [{ debugName: "headerSignal" }] : /* istanbul ignore next */ []));
+    hintSignal = computed(() => this.hint() ?? this.config()?.hint, ...(ngDevMode ? [{ debugName: "hintSignal" }] : /* istanbul ignore next */ []));
+    colorSignal = computed(() => this.color() ?? this.config()?.color ?? 'primary', ...(ngDevMode ? [{ debugName: "colorSignal" }] : /* istanbul ignore next */ []));
+    centerSignal = computed(() => this.center() ?? this.config()?.center ?? false, ...(ngDevMode ? [{ debugName: "centerSignal" }] : /* istanbul ignore next */ []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.3", ngImport: i0, type: DbxStepBlockComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.3", type: DbxStepBlockComponent, isStandalone: true, selector: "dbx-step-block", inputs: { step: { classPropertyName: "step", publicName: "step", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, header: { classPropertyName: "header", publicName: "header", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, center: { classPropertyName: "center", publicName: "center", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.dbx-step-block-center": "center()" }, classAttribute: "dbx-step-block d-block" }, ngImport: i0, template: `
-    <div class="dbx-step-block-badge" [dbxColor]="color()">
-      @if (icon()) {
-        <mat-icon>{{ icon() }}</mat-icon>
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.3", type: DbxStepBlockComponent, isStandalone: true, selector: "dbx-step-block", inputs: { config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: false, transformFunction: null }, step: { classPropertyName: "step", publicName: "step", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, header: { classPropertyName: "header", publicName: "header", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, center: { classPropertyName: "center", publicName: "center", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.dbx-step-block-center": "centerSignal()" }, classAttribute: "dbx-step-block d-block" }, ngImport: i0, template: `
+    <div class="dbx-step-block-badge" [dbxColor]="colorSignal()">
+      @if (iconSignal()) {
+        <mat-icon>{{ iconSignal() }}</mat-icon>
       } @else {
-        {{ step() }}
+        {{ stepSignal() }}
       }
     </div>
     <div class="dbx-step-block-content">
-      @if (header()) {
+      @if (headerSignal()) {
         <div class="dbx-step-block-header">
-          <span class="dbx-step-block-header-label">{{ header() }}</span>
+          <span class="dbx-step-block-header-label">{{ headerSignal() }}</span>
           <ng-content select="[header]"></ng-content>
         </div>
       }
-      @if (hint()) {
-        <span class="dbx-step-block-hint">{{ hint() }}</span>
+      @if (hintSignal()) {
+        <span class="dbx-step-block-hint">{{ hintSignal() }}</span>
       }
       <ng-content></ng-content>
     </div>
@@ -13437,35 +13451,35 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.3", ngImpor
             args: [{
                     selector: 'dbx-step-block',
                     template: `
-    <div class="dbx-step-block-badge" [dbxColor]="color()">
-      @if (icon()) {
-        <mat-icon>{{ icon() }}</mat-icon>
+    <div class="dbx-step-block-badge" [dbxColor]="colorSignal()">
+      @if (iconSignal()) {
+        <mat-icon>{{ iconSignal() }}</mat-icon>
       } @else {
-        {{ step() }}
+        {{ stepSignal() }}
       }
     </div>
     <div class="dbx-step-block-content">
-      @if (header()) {
+      @if (headerSignal()) {
         <div class="dbx-step-block-header">
-          <span class="dbx-step-block-header-label">{{ header() }}</span>
+          <span class="dbx-step-block-header-label">{{ headerSignal() }}</span>
           <ng-content select="[header]"></ng-content>
         </div>
       }
-      @if (hint()) {
-        <span class="dbx-step-block-hint">{{ hint() }}</span>
+      @if (hintSignal()) {
+        <span class="dbx-step-block-hint">{{ hintSignal() }}</span>
       }
       <ng-content></ng-content>
     </div>
   `,
                     host: {
                         class: 'dbx-step-block d-block',
-                        '[class.dbx-step-block-center]': 'center()'
+                        '[class.dbx-step-block-center]': 'centerSignal()'
                     },
                     imports: [MatIconModule, DbxColorDirective],
                     standalone: true,
                     changeDetection: ChangeDetectionStrategy.OnPush
                 }]
-        }], propDecorators: { step: [{ type: i0.Input, args: [{ isSignal: true, alias: "step", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], header: [{ type: i0.Input, args: [{ isSignal: true, alias: "header", required: false }] }], hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], center: [{ type: i0.Input, args: [{ isSignal: true, alias: "center", required: false }] }] } });
+        }], propDecorators: { config: [{ type: i0.Input, args: [{ isSignal: true, alias: "config", required: false }] }], step: [{ type: i0.Input, args: [{ isSignal: true, alias: "step", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], header: [{ type: i0.Input, args: [{ isSignal: true, alias: "header", required: false }] }], hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], center: [{ type: i0.Input, args: [{ isSignal: true, alias: "center", required: false }] }] } });
 
 /**
  * Adds inline spacing sized for icons, typically used to align text that sits next to icon-bearing siblings.