import { MXLookComponent, AXComponent } from '@acorex/cdk/common';
import * as i0 from '@angular/core';
import { HostBinding, ViewEncapsulation, ChangeDetectionStrategy, Component, NgModule } from '@angular/core';

/**
 * @category Components
 * A navigation bar component that supports custom styling and encapsulation.
 * It provides a consistent way to display navigation elements with prefix, title, and suffix content areas.
 */
class AXNavbarComponent extends MXLookComponent {
    /**
     * Gets the host CSS classes for the navbar component.
     *
     * @returns string - The CSS classes for the navbar component
     */
    get __hostClass() {
        return `ax-alert ax-none ax-${this.look}`;
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: AXNavbarComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.15", type: AXNavbarComponent, isStandalone: true, selector: "ax-navbar", inputs: { look: "look" }, host: { properties: { "class": "this.__hostClass" } }, providers: [{ provide: AXComponent, useExisting: AXNavbarComponent }], usesInheritance: true, ngImport: i0, template: "<div class=\"ax-navbar-start-side\">\n  <ng-content select=\"ax-prefix\"></ng-content>\n  <ng-content select=\"ax-title\"></ng-content>\n</div>\n<ng-content></ng-content>\n<div class=\"ax-navbar-end-side\">\n  <ng-content select=\"ax-suffix\"></ng-content>\n</div>\n", styles: ["ax-navbar.ax-fill{--ax-comp-navbar-bg-color: var(--ax-sys-color-surface)}ax-navbar.ax-flat{--ax-comp-navbar-border-color: var(--ax-sys-color-border-lightest-surface);--ax-comp-navbar-border-width: 1px}.ax-dark ax-navbar.ax-flat{--ax-comp-navbar-border-color: var(--ax-sys-color-border-darkest-surface)}ax-navbar.ax-solid{--ax-comp-navbar-bg-color: var(--ax-sys-color-lightest-surface)}.ax-dark ax-navbar.ax-solid{--ax-comp-navbar-bg-color: var(--ax-sys-color-darkest-surface)}ax-navbar{display:flex;min-height:3.5rem;width:100%;align-items:center;justify-content:space-between;gap:.75rem;padding-inline:1rem;padding-block:.5rem;background-color:rgba(var(--ax-comp-navbar-bg-color, none));border-bottom-width:var(--ax-comp-navbar-border-width, 0);border-color:rgba(var(--ax-comp-navbar-border-color, none))}ax-navbar .ax-navbar-start-side{margin-inline-end:2rem;display:flex;align-items:center;gap:.5rem;font-size:1rem;line-height:1.5rem}ax-navbar .ax-navbar-start-side ax-title{font-size:1.125rem;line-height:1.75rem;font-weight:600}ax-navbar .ax-navbar-end-side ax-suffix{display:flex;gap:.5rem}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: AXNavbarComponent, decorators: [{
            type: Component,
            args: [{ selector: 'ax-navbar', inputs: ['look'], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, providers: [{ provide: AXComponent, useExisting: AXNavbarComponent }], template: "<div class=\"ax-navbar-start-side\">\n  <ng-content select=\"ax-prefix\"></ng-content>\n  <ng-content select=\"ax-title\"></ng-content>\n</div>\n<ng-content></ng-content>\n<div class=\"ax-navbar-end-side\">\n  <ng-content select=\"ax-suffix\"></ng-content>\n</div>\n", styles: ["ax-navbar.ax-fill{--ax-comp-navbar-bg-color: var(--ax-sys-color-surface)}ax-navbar.ax-flat{--ax-comp-navbar-border-color: var(--ax-sys-color-border-lightest-surface);--ax-comp-navbar-border-width: 1px}.ax-dark ax-navbar.ax-flat{--ax-comp-navbar-border-color: var(--ax-sys-color-border-darkest-surface)}ax-navbar.ax-solid{--ax-comp-navbar-bg-color: var(--ax-sys-color-lightest-surface)}.ax-dark ax-navbar.ax-solid{--ax-comp-navbar-bg-color: var(--ax-sys-color-darkest-surface)}ax-navbar{display:flex;min-height:3.5rem;width:100%;align-items:center;justify-content:space-between;gap:.75rem;padding-inline:1rem;padding-block:.5rem;background-color:rgba(var(--ax-comp-navbar-bg-color, none));border-bottom-width:var(--ax-comp-navbar-border-width, 0);border-color:rgba(var(--ax-comp-navbar-border-color, none))}ax-navbar .ax-navbar-start-side{margin-inline-end:2rem;display:flex;align-items:center;gap:.5rem;font-size:1rem;line-height:1.5rem}ax-navbar .ax-navbar-start-side ax-title{font-size:1.125rem;line-height:1.75rem;font-weight:600}ax-navbar .ax-navbar-end-side ax-suffix{display:flex;gap:.5rem}\n"] }]
        }], propDecorators: { __hostClass: [{
                type: HostBinding,
                args: ['class']
            }] } });

class AXNavbarModule {
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: AXNavbarModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.15", ngImport: i0, type: AXNavbarModule, imports: [AXNavbarComponent], exports: [AXNavbarComponent] }); }
    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: AXNavbarModule }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: AXNavbarModule, decorators: [{
            type: NgModule,
            args: [{
                    imports: [AXNavbarComponent],
                    exports: [AXNavbarComponent],
                }]
        }] });

/**
 * Generated bundle index. Do not edit.
 */

export { AXNavbarComponent, AXNavbarModule };
//# sourceMappingURL=acorex-components-navbar.mjs.map
