import { Component, computed, input, ChangeDetectionStrategy, signal } from '@angular/core';
import { MatIconModule } from '@angular/material/icon';
import { NgTemplateOutlet } from '@angular/common';
import * as i0 from "@angular/core";
import * as i1 from "@angular/material/icon";
/**
 * Component used to style a section's header.
 */
export class DbxSectionHeaderComponent {
    headerConfig = input();
    h = input();
    paddedHeader = input();
    header = input();
    onlyHeader = input();
    icon = input();
    hint = input();
    hintInline = input();
    hintInlineDefault = signal(undefined);
    headerConfigSignal = computed(() => {
        const headerConfig = this.headerConfig();
        const config = {
            h: this.h() ?? headerConfig?.h,
            paddedHeader: this.paddedHeader() ?? headerConfig?.paddedHeader,
            header: this.header() ?? headerConfig?.header,
            onlyHeader: this.onlyHeader() ?? headerConfig?.onlyHeader,
            icon: this.icon() ?? headerConfig?.icon,
            hint: this.hint() ?? headerConfig?.hint,
            hintInline: this.hintInline() ?? headerConfig?.hintInline ?? this.hintInlineDefault()
        };
        return config;
    });
    showTitleSignal = computed(() => {
        const headerConfig = this.headerConfigSignal();
        return Boolean(headerConfig.header || headerConfig.icon);
    });
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DbxSectionHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: DbxSectionHeaderComponent, isStandalone: true, selector: "dbx-section-header,.dbx-section-header", inputs: { headerConfig: { classPropertyName: "headerConfig", publicName: "headerConfig", isSignal: true, isRequired: false, transformFunction: null }, h: { classPropertyName: "h", publicName: "h", isSignal: true, isRequired: false, transformFunction: null }, paddedHeader: { classPropertyName: "paddedHeader", publicName: "paddedHeader", isSignal: true, isRequired: false, transformFunction: null }, header: { classPropertyName: "header", publicName: "header", isSignal: true, isRequired: false, transformFunction: null }, onlyHeader: { classPropertyName: "onlyHeader", publicName: "onlyHeader", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, hintInline: { classPropertyName: "hintInline", publicName: "hintInline", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.dbx-section-header-full-title": "headerConfigSignal().onlyHeader", "class.dbx-section-header-padded": "headerConfigSignal().paddedHeader" } }, ngImport: i0, template: `
    <div class="dbx-section-header-content">
      @if (showTitleSignal()) {
        @switch (headerConfigSignal().h ?? 1) {
          @case (1) {
            <h1 class="dbx-section-header-content-title">
              <ng-container *ngTemplateOutlet="headerContentTitleTemplate"></ng-container>
            </h1>
          }
          @case (2) {
            <h2 class="dbx-section-header-content-title">
              <ng-container *ngTemplateOutlet="headerContentTitleTemplate"></ng-container>
            </h2>
          }
          @case (3) {
            <h3 class="dbx-section-header-content-title">
              <ng-container *ngTemplateOutlet="headerContentTitleTemplate"></ng-container>
            </h3>
          }
          @case (4) {
            <h4 class="dbx-section-header-content-title">
              <ng-container *ngTemplateOutlet="headerContentTitleTemplate"></ng-container>
            </h4>
          }
          @case (5) {
            <h5 class="dbx-section-header-content-title">
              <ng-container *ngTemplateOutlet="headerContentTitleTemplate"></ng-container>
            </h5>
          }
        }
        <span class="spacer"></span>
      }
      <ng-content></ng-content>
    </div>
    <!-- Show Hint Not Inline -->
    @if (headerConfigSignal().hint && !headerConfigSignal().hintInline) {
      <p class="dbx-section-hint dbx-hint">{{ headerConfigSignal().hint }}</p>
    }
    <ng-template #headerContentTitleTemplate>
      @if (headerConfigSignal().icon) {
        <mat-icon>{{ headerConfigSignal().icon }}</mat-icon>
      }
      <span class="title-text">
        {{ headerConfigSignal().header }}
        <!-- Show Hint Inline -->
        @if (headerConfigSignal().hint && headerConfigSignal().hintInline) {
          <span class="dbx-section-hint-inline dbx-hint">{{ headerConfigSignal().hint }}</span>
        }
      </span>
    </ng-template>
  `, isInline: true, dependencies: [{ kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DbxSectionHeaderComponent, decorators: [{
            type: Component,
            args: [{
                    selector: 'dbx-section-header,.dbx-section-header',
                    template: `
    <div class="dbx-section-header-content">
      @if (showTitleSignal()) {
        @switch (headerConfigSignal().h ?? 1) {
          @case (1) {
            <h1 class="dbx-section-header-content-title">
              <ng-container *ngTemplateOutlet="headerContentTitleTemplate"></ng-container>
            </h1>
          }
          @case (2) {
            <h2 class="dbx-section-header-content-title">
              <ng-container *ngTemplateOutlet="headerContentTitleTemplate"></ng-container>
            </h2>
          }
          @case (3) {
            <h3 class="dbx-section-header-content-title">
              <ng-container *ngTemplateOutlet="headerContentTitleTemplate"></ng-container>
            </h3>
          }
          @case (4) {
            <h4 class="dbx-section-header-content-title">
              <ng-container *ngTemplateOutlet="headerContentTitleTemplate"></ng-container>
            </h4>
          }
          @case (5) {
            <h5 class="dbx-section-header-content-title">
              <ng-container *ngTemplateOutlet="headerContentTitleTemplate"></ng-container>
            </h5>
          }
        }
        <span class="spacer"></span>
      }
      <ng-content></ng-content>
    </div>
    <!-- Show Hint Not Inline -->
    @if (headerConfigSignal().hint && !headerConfigSignal().hintInline) {
      <p class="dbx-section-hint dbx-hint">{{ headerConfigSignal().hint }}</p>
    }
    <ng-template #headerContentTitleTemplate>
      @if (headerConfigSignal().icon) {
        <mat-icon>{{ headerConfigSignal().icon }}</mat-icon>
      }
      <span class="title-text">
        {{ headerConfigSignal().header }}
        <!-- Show Hint Inline -->
        @if (headerConfigSignal().hint && headerConfigSignal().hintInline) {
          <span class="dbx-section-hint-inline dbx-hint">{{ headerConfigSignal().hint }}</span>
        }
      </span>
    </ng-template>
  `,
                    standalone: true,
                    imports: [MatIconModule, NgTemplateOutlet],
                    changeDetection: ChangeDetectionStrategy.OnPush,
                    host: {
                        '[class.dbx-section-header-full-title]': 'headerConfigSignal().onlyHeader',
                        '[class.dbx-section-header-padded]': 'headerConfigSignal().paddedHeader'
                    }
                }]
        }] });
//# sourceMappingURL=data:application/json;base64, 