import { MXBaseComponent, AXClearableComponent, AXComponent, AXClosableComponent } from '@acorex/cdk/common';
import { AXTranslatorPipe } from '@acorex/core/translation';
import { NgClass, AsyncPipe, CommonModule } from '@angular/common';
import * as i0 from '@angular/core';
import { inject, HostListener, HostBinding, Input, ViewEncapsulation, ChangeDetectionStrategy, Component, input, ElementRef, model, afterNextRender, effect, NgModule } from '@angular/core';
import { AXFullScreenService } from '@acorex/core/full-screen';

/**
 * A button component that allows users to clear or reset a value.
 *
 * @category Components
 */
class AXDecoratorClearButtonComponent extends MXBaseComponent {
    constructor() {
        super(...arguments);
        this._parent = inject(AXClearableComponent, { optional: true });
        /**
         *  @ignore
         */
        this._icon = 'ax-icon ax-icon-clear';
    }
    /**
     * The icon displayed on the clear button.
     */
    get icon() {
        return this._icon || 'ax-icon-close';
    }
    /**
     * Sets the icon displayed on the clear button.
     *
     * @param v - The icon class to display. If not provided, defaults to 'ax-icon-close'.
     */
    set icon(v) {
        this._icon = v;
    }
    /**
     *  @ignore
     */
    get hostClass() {
        const hidden = this._parent.disabled || this._parent.readonly || this._parent.value == null || this._parent.value == '';
        return `ax-icon ax-clear-button ${hidden ? 'ax-hidden' : ''}`;
    }
    /**
     *  @ignore
     */
    _handleOnClick(e) {
        e.stopPropagation();
        if (!this._parent.disabled && !this._parent.readonly)
            this._parent?.reset(true);
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: AXDecoratorClearButtonComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.16", type: AXDecoratorClearButtonComponent, isStandalone: true, selector: "ax-clear-button", inputs: { icon: "icon" }, host: { listeners: { "click": "_handleOnClick($event)" }, properties: { "class": "this.hostClass" } }, providers: [{ provide: AXComponent, useExisting: AXDecoratorClearButtonComponent }], usesInheritance: true, ngImport: i0, template: `<button
    type="button"
    tabIndex="-1"
    role="button"
    [attr.aria-label]="'@acorex:common.general.clear' | translate | async"
    [title]="'@acorex:common.general.clear' | translate | async"
  >
    <i class="ax-icon-solid" [ngClass]="icon"></i>
  </button>`, isInline: true, styles: ["ax-clear-button{max-width:fit-content}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: AXDecoratorClearButtonComponent, decorators: [{
            type: Component,
            args: [{ selector: 'ax-clear-button', template: `<button
    type="button"
    tabIndex="-1"
    role="button"
    [attr.aria-label]="'@acorex:common.general.clear' | translate | async"
    [title]="'@acorex:common.general.clear' | translate | async"
  >
    <i class="ax-icon-solid" [ngClass]="icon"></i>
  </button>`, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [NgClass, AsyncPipe, AXTranslatorPipe], providers: [{ provide: AXComponent, useExisting: AXDecoratorClearButtonComponent }], styles: ["ax-clear-button{max-width:fit-content}\n"] }]
        }], propDecorators: { icon: [{
                type: Input
            }], hostClass: [{
                type: HostBinding,
                args: ['class']
            }], _handleOnClick: [{
                type: HostListener,
                args: ['click', ['$event']]
            }] } });

/**
 * A button component that displays a close icon and triggers an action when clicked.
 *
 * @category Components
 */
class AXDecoratorCloseButtonComponent extends MXBaseComponent {
    constructor() {
        super(...arguments);
        this._parent = inject(AXClosableComponent, { optional: true });
        // @Inject(AXClosableComponent) private _parent?: AXClosableComponent,
        this.closeAll = input(false, ...(ngDevMode ? [{ debugName: "closeAll" }] : []));
        /**
         *  @ignore
         */
        this._icon = 'ax-icon ax-icon-close';
    }
    /**
     * The icon class to be applied to the button.
     */
    get icon() {
        return this._icon || 'ax-icon-close';
    }
    /**
     * Sets the icon class to be applied to the button.
     *
     * @param v The icon class.
     */
    set icon(v) {
        this._icon = v;
    }
    /**
     *  @ignore
     */
    _handleOnClick() {
        if (this.closeAll()) {
            this._parent?.closeAll();
        }
        else {
            this._parent?.close();
        }
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: AXDecoratorCloseButtonComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.16", type: AXDecoratorCloseButtonComponent, isStandalone: true, selector: "ax-close-button", inputs: { closeAll: { classPropertyName: "closeAll", publicName: "closeAll", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: false, isRequired: false, transformFunction: null } }, host: { listeners: { "click": "_handleOnClick($event)" } }, providers: [{ provide: AXComponent, useExisting: AXDecoratorCloseButtonComponent }], usesInheritance: true, ngImport: i0, template: `<button
    type="button"
    role="button"
    [attr.aria-label]="
      closeAll()
        ? ('@acorex:common.general.close-all' | translate | async)
        : ('@acorex:common.general.close' | translate | async)
    "
    [title]="
      closeAll()
        ? ('@acorex:common.general.close-all' | translate | async)
        : ('@acorex:common.general.close' | translate | async)
    "
  >
    <i [ngClass]="icon"></i>
  </button>`, isInline: true, styles: ["ax-close-button button{display:flex;cursor:pointer;background-color:transparent}ax-close-button button i{--ax-sys-icon-size: 1.5rem}ax-close-button button:hover{opacity:.7}ax-close-button button:focus{opacity:.8;outline:2px solid transparent;outline-offset:2px}ax-close-button button:active{opacity:1}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: AXDecoratorCloseButtonComponent, decorators: [{
            type: Component,
            args: [{ selector: 'ax-close-button', template: `<button
    type="button"
    role="button"
    [attr.aria-label]="
      closeAll()
        ? ('@acorex:common.general.close-all' | translate | async)
        : ('@acorex:common.general.close' | translate | async)
    "
    [title]="
      closeAll()
        ? ('@acorex:common.general.close-all' | translate | async)
        : ('@acorex:common.general.close' | translate | async)
    "
  >
    <i [ngClass]="icon"></i>
  </button>`, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [NgClass, AsyncPipe, AXTranslatorPipe], providers: [{ provide: AXComponent, useExisting: AXDecoratorCloseButtonComponent }], styles: ["ax-close-button button{display:flex;cursor:pointer;background-color:transparent}ax-close-button button i{--ax-sys-icon-size: 1.5rem}ax-close-button button:hover{opacity:.7}ax-close-button button:focus{opacity:.8;outline:2px solid transparent;outline-offset:2px}ax-close-button button:active{opacity:1}\n"] }]
        }], propDecorators: { closeAll: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeAll", required: false }] }], icon: [{
                type: Input
            }], _handleOnClick: [{
                type: HostListener,
                args: ['click', ['$event']]
            }] } });

class AXDecoratorColorIndicatorComponent {
    constructor() {
        this.previewColor = input(...(ngDevMode ? [undefined, { debugName: "previewColor" }] : []));
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: AXDecoratorColorIndicatorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.16", type: AXDecoratorColorIndicatorComponent, isStandalone: true, selector: "ax-color-indicator", inputs: { previewColor: { classPropertyName: "previewColor", publicName: "previewColor", isSignal: true, isRequired: false, transformFunction: null } }, providers: [{ provide: AXComponent, useExisting: AXDecoratorColorIndicatorComponent }], ngImport: i0, template: "<div [style]=\"{ backgroundColor: previewColor() }\" class=\"ax-indicator-color\"></div>\n", styles: ["ax-color-indicator{margin-inline:.3rem;display:block}ax-color-indicator .ax-indicator-color{width:100%;height:.2rem}\n"], encapsulation: i0.ViewEncapsulation.None }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: AXDecoratorColorIndicatorComponent, decorators: [{
            type: Component,
            args: [{ selector: 'ax-color-indicator', encapsulation: ViewEncapsulation.None, providers: [{ provide: AXComponent, useExisting: AXDecoratorColorIndicatorComponent }], template: "<div [style]=\"{ backgroundColor: previewColor() }\" class=\"ax-indicator-color\"></div>\n", styles: ["ax-color-indicator{margin-inline:.3rem;display:block}ax-color-indicator .ax-indicator-color{width:100%;height:.2rem}\n"] }]
        }], propDecorators: { previewColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "previewColor", required: false }] }] } });

class AXDecoratorFullScreenButtonComponent extends MXBaseComponent {
    constructor() {
        super(...arguments);
        this.fullScreenService = inject(AXFullScreenService);
        this.elementRef = inject(ElementRef);
        this.element = model(...(ngDevMode ? [undefined, { debugName: "element" }] : []));
        this.isActive = model(false, ...(ngDevMode ? [{ debugName: "isActive" }] : []));
        this.#init = afterNextRender(() => {
            this.elementRef.nativeElement.onclick = () => {
                this.isActive.update((prev) => !prev);
            };
        });
        this.#eff = effect(() => {
            if (this.isActive()) {
                this.fullScreenService.enter(this.element());
            }
            else {
                this.fullScreenService.exit(this.element());
            }
        }, ...(ngDevMode ? [{ debugName: "#eff" }] : []));
    }
    #init;
    #eff;
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: AXDecoratorFullScreenButtonComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.16", type: AXDecoratorFullScreenButtonComponent, isStandalone: true, selector: "ax-fullscreen-button", inputs: { element: { classPropertyName: "element", publicName: "element", isSignal: true, isRequired: false, transformFunction: null }, isActive: { classPropertyName: "isActive", publicName: "isActive", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { element: "elementChange", isActive: "isActiveChange" }, providers: [{ provide: AXComponent, useExisting: AXDecoratorFullScreenButtonComponent }], usesInheritance: true, ngImport: i0, template: ` <button
    type="button"
    tabIndex="-1"
    role="button"
    [attr.aria-label]="'@acorex:common.general.full-screen' | translate | async"
    [title]="'@acorex:common.general.full-screen' | translate | async"
  >
    <i class="ax-icon {{ this.isActive() ? 'ax-icon-close' : 'ax-icon-full-screen' }} "></i>
  </button>`, isInline: true, styles: ["ax-fullscreen-button{min-width:1rem}\n"], dependencies: [{ kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: AXDecoratorFullScreenButtonComponent, decorators: [{
            type: Component,
            args: [{ selector: 'ax-fullscreen-button', template: ` <button
    type="button"
    tabIndex="-1"
    role="button"
    [attr.aria-label]="'@acorex:common.general.full-screen' | translate | async"
    [title]="'@acorex:common.general.full-screen' | translate | async"
  >
    <i class="ax-icon {{ this.isActive() ? 'ax-icon-close' : 'ax-icon-full-screen' }} "></i>
  </button>`, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, providers: [{ provide: AXComponent, useExisting: AXDecoratorFullScreenButtonComponent }], imports: [AsyncPipe, AXTranslatorPipe], styles: ["ax-fullscreen-button{min-width:1rem}\n"] }]
        }], propDecorators: { element: [{ type: i0.Input, args: [{ isSignal: true, alias: "element", required: false }] }, { type: i0.Output, args: ["elementChange"] }], isActive: [{ type: i0.Input, args: [{ isSignal: true, alias: "isActive", required: false }] }, { type: i0.Output, args: ["isActiveChange"] }] } });

/**
 * A flexible component for various UI elements like footer, header, content, and more.
 * @category Components
 */
class AXDecoratorGenericComponent extends MXBaseComponent {
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: AXDecoratorGenericComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.16", type: AXDecoratorGenericComponent, isStandalone: true, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title, ax-subtitle, ax-placeholder, ax-overlay", providers: [
            { provide: 'ax-footer', useExisting: AXDecoratorGenericComponent },
            { provide: 'ax-header', useExisting: AXDecoratorGenericComponent },
            { provide: 'ax-content', useExisting: AXDecoratorGenericComponent },
            { provide: 'ax-divider', useExisting: AXDecoratorGenericComponent },
            { provide: 'ax-form-hint', useExisting: AXDecoratorGenericComponent },
            { provide: 'ax-prefix', useExisting: AXDecoratorGenericComponent },
            { provide: 'ax-suffix', useExisting: AXDecoratorGenericComponent },
            { provide: 'ax-text', useExisting: AXDecoratorGenericComponent },
            { provide: 'ax-title', useExisting: AXDecoratorGenericComponent },
            { provide: 'ax-subtitle', useExisting: AXDecoratorGenericComponent },
            { provide: 'ax-placeholder', useExisting: AXDecoratorGenericComponent },
            { provide: 'ax-overlay', useExisting: AXDecoratorGenericComponent },
            { provide: AXComponent, useExisting: AXDecoratorGenericComponent },
        ], usesInheritance: true, ngImport: i0, template: `<ng-content></ng-content>`, isInline: true, styles: [".ax-decoration-container,ax-header,ax-footer{display:flex;justify-content:space-between;gap:.5rem;align-items:center}.ax-decoration-container>ax-prefix,.ax-decoration-container>ax-suffix,ax-header>ax-prefix,ax-header>ax-suffix,ax-footer>ax-prefix,ax-footer>ax-suffix{display:flex;flex:1 1 0%;align-items:center;gap:.5rem}.ax-decoration-container>ax-prefix,ax-header>ax-prefix,ax-footer>ax-prefix{order:-9999;align-items:center;justify-content:flex-start}.ax-decoration-container>ax-suffix,ax-header>ax-suffix,ax-footer>ax-suffix{order:9999;align-items:center;justify-content:flex-end}ax-subtitle{opacity:.75;display:block;font-weight:400;font-size:.875rem;line-height:1.25rem}ax-form-hint{margin-top:.5rem;display:block;font-size:.875rem;line-height:1.25rem;color:rgba(var(--ax-sys-color-on-surface),.75)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: AXDecoratorGenericComponent, decorators: [{
            type: Component,
            args: [{ selector: 'ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title, ax-subtitle, ax-placeholder, ax-overlay', template: `<ng-content></ng-content>`, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, providers: [
                        { provide: 'ax-footer', useExisting: AXDecoratorGenericComponent },
                        { provide: 'ax-header', useExisting: AXDecoratorGenericComponent },
                        { provide: 'ax-content', useExisting: AXDecoratorGenericComponent },
                        { provide: 'ax-divider', useExisting: AXDecoratorGenericComponent },
                        { provide: 'ax-form-hint', useExisting: AXDecoratorGenericComponent },
                        { provide: 'ax-prefix', useExisting: AXDecoratorGenericComponent },
                        { provide: 'ax-suffix', useExisting: AXDecoratorGenericComponent },
                        { provide: 'ax-text', useExisting: AXDecoratorGenericComponent },
                        { provide: 'ax-title', useExisting: AXDecoratorGenericComponent },
                        { provide: 'ax-subtitle', useExisting: AXDecoratorGenericComponent },
                        { provide: 'ax-placeholder', useExisting: AXDecoratorGenericComponent },
                        { provide: 'ax-overlay', useExisting: AXDecoratorGenericComponent },
                        { provide: AXComponent, useExisting: AXDecoratorGenericComponent },
                    ], styles: [".ax-decoration-container,ax-header,ax-footer{display:flex;justify-content:space-between;gap:.5rem;align-items:center}.ax-decoration-container>ax-prefix,.ax-decoration-container>ax-suffix,ax-header>ax-prefix,ax-header>ax-suffix,ax-footer>ax-prefix,ax-footer>ax-suffix{display:flex;flex:1 1 0%;align-items:center;gap:.5rem}.ax-decoration-container>ax-prefix,ax-header>ax-prefix,ax-footer>ax-prefix{order:-9999;align-items:center;justify-content:flex-start}.ax-decoration-container>ax-suffix,ax-header>ax-suffix,ax-footer>ax-suffix{order:9999;align-items:center;justify-content:flex-end}ax-subtitle{opacity:.75;display:block;font-weight:400;font-size:.875rem;line-height:1.25rem}ax-form-hint{margin-top:.5rem;display:block;font-size:.875rem;line-height:1.25rem;color:rgba(var(--ax-sys-color-on-surface),.75)}\n"] }]
        }] });

/**
 * A button component that displays a close icon and triggers an action when clicked.
 *
 * @category Components
 */
class AXDecoratorHeadingComponent extends MXBaseComponent {
    constructor() {
        super(...arguments);
        this.darkMode = input(true, ...(ngDevMode ? [{ debugName: "darkMode" }] : []));
        this.color = input('lightest', ...(ngDevMode ? [{ debugName: "color" }] : []));
        this.weight = input('semibold', ...(ngDevMode ? [{ debugName: "weight" }] : []));
    }
    get __hostClass() {
        return `ax-heading-${this.color()} ax-${this.weight()} ${!this.darkMode() && 'ax-heading-no-dark'}`;
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: AXDecoratorHeadingComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.16", type: AXDecoratorHeadingComponent, isStandalone: true, selector: "ax-heading", inputs: { darkMode: { classPropertyName: "darkMode", publicName: "darkMode", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, weight: { classPropertyName: "weight", publicName: "weight", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "this.__hostClass" } }, providers: [{ provide: AXComponent, useExisting: AXDecoratorHeadingComponent }], usesInheritance: true, ngImport: i0, template: `<ng-content></ng-content>`, isInline: true, styles: ["ax-heading{display:flex;flex-direction:column}ax-heading:has(h1,h2,h3){gap:.5rem}ax-heading:has(h4,h5,h6){gap:.25rem}ax-heading h1,ax-heading h2,ax-heading h3,ax-heading h4,ax-heading h5,ax-heading h6{font-weight:var(--ax-comp-heading-font-weight)}ax-heading p,ax-heading ax-subtitle{font-size:1rem;line-height:1.625rem}ax-heading h1{font-size:2rem;line-height:2.5rem;letter-spacing:-1.5%}ax-heading h2{font-size:1.625rem;line-height:2.125rem;letter-spacing:-1.5%}ax-heading h3{font-size:1.375rem;line-height:1.875rem;letter-spacing:-1%}ax-heading h4{font-size:1.125rem;line-height:1.625rem;letter-spacing:-.5%}ax-heading h5{font-size:1rem;line-height:1.5rem;letter-spacing:-.5%}ax-heading h6{font-size:.875rem;line-height:1.375rem}ax-heading.ax-regular{--ax-comp-heading-font-weight: 400}ax-heading.ax-medium{--ax-comp-heading-font-weight: 500}ax-heading.ax-semibold{--ax-comp-heading-font-weight: 600}ax-heading.ax-bold{--ax-comp-heading-font-weight: 700}ax-heading.ax-heading-lightest ax-subtitle{opacity:74%}ax-heading.ax-heading-lighter ax-subtitle{opacity:76%}ax-heading.ax-heading-light ax-subtitle{opacity:78%}ax-heading.ax-heading-surface ax-subtitle{opacity:80%}ax-heading.ax-heading-dark ax-subtitle{opacity:82%}ax-heading.ax-heading-darker ax-subtitle{opacity:84%}ax-heading.ax-heading-darkest ax-subtitle{opacity:86%}.ax-dark ax-heading.ax-heading-no-dark.ax-heading-lightest ax-subtitle{opacity:86%}.ax-dark ax-heading.ax-heading-no-dark.ax-heading-lighter ax-subtitle{opacity:84%}.ax-dark ax-heading.ax-heading-no-dark.ax-heading-light ax-subtitle{opacity:82%}.ax-dark ax-heading.ax-heading-no-dark.ax-heading-surface ax-subtitle{opacity:80%}.ax-dark ax-heading.ax-heading-no-dark.ax-heading-dark ax-subtitle{opacity:78%}.ax-dark ax-heading.ax-heading-no-dark.ax-heading-darker ax-subtitle{opacity:76%}.ax-dark ax-heading.ax-heading-no-dark.ax-heading-darkest ax-subtitle{opacity:74%}@media screen and (max-width: 768px){ax-heading h1{font-size:1.5rem;line-height:1.875rem}ax-heading h2{font-size:1.375rem;line-height:1.75rem}ax-heading h3{font-size:1.25rem;line-height:1.625rem}ax-heading h4{line-height:1.5rem}ax-heading h5{line-height:1.375rem}ax-heading h6{line-height:1.25rem}ax-heading p,ax-heading ax-subtitle{line-height:1.5rem}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: AXDecoratorHeadingComponent, decorators: [{
            type: Component,
            args: [{ selector: 'ax-heading', template: `<ng-content></ng-content>`, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, providers: [{ provide: AXComponent, useExisting: AXDecoratorHeadingComponent }], styles: ["ax-heading{display:flex;flex-direction:column}ax-heading:has(h1,h2,h3){gap:.5rem}ax-heading:has(h4,h5,h6){gap:.25rem}ax-heading h1,ax-heading h2,ax-heading h3,ax-heading h4,ax-heading h5,ax-heading h6{font-weight:var(--ax-comp-heading-font-weight)}ax-heading p,ax-heading ax-subtitle{font-size:1rem;line-height:1.625rem}ax-heading h1{font-size:2rem;line-height:2.5rem;letter-spacing:-1.5%}ax-heading h2{font-size:1.625rem;line-height:2.125rem;letter-spacing:-1.5%}ax-heading h3{font-size:1.375rem;line-height:1.875rem;letter-spacing:-1%}ax-heading h4{font-size:1.125rem;line-height:1.625rem;letter-spacing:-.5%}ax-heading h5{font-size:1rem;line-height:1.5rem;letter-spacing:-.5%}ax-heading h6{font-size:.875rem;line-height:1.375rem}ax-heading.ax-regular{--ax-comp-heading-font-weight: 400}ax-heading.ax-medium{--ax-comp-heading-font-weight: 500}ax-heading.ax-semibold{--ax-comp-heading-font-weight: 600}ax-heading.ax-bold{--ax-comp-heading-font-weight: 700}ax-heading.ax-heading-lightest ax-subtitle{opacity:74%}ax-heading.ax-heading-lighter ax-subtitle{opacity:76%}ax-heading.ax-heading-light ax-subtitle{opacity:78%}ax-heading.ax-heading-surface ax-subtitle{opacity:80%}ax-heading.ax-heading-dark ax-subtitle{opacity:82%}ax-heading.ax-heading-darker ax-subtitle{opacity:84%}ax-heading.ax-heading-darkest ax-subtitle{opacity:86%}.ax-dark ax-heading.ax-heading-no-dark.ax-heading-lightest ax-subtitle{opacity:86%}.ax-dark ax-heading.ax-heading-no-dark.ax-heading-lighter ax-subtitle{opacity:84%}.ax-dark ax-heading.ax-heading-no-dark.ax-heading-light ax-subtitle{opacity:82%}.ax-dark ax-heading.ax-heading-no-dark.ax-heading-surface ax-subtitle{opacity:80%}.ax-dark ax-heading.ax-heading-no-dark.ax-heading-dark ax-subtitle{opacity:78%}.ax-dark ax-heading.ax-heading-no-dark.ax-heading-darker ax-subtitle{opacity:76%}.ax-dark ax-heading.ax-heading-no-dark.ax-heading-darkest ax-subtitle{opacity:74%}@media screen and (max-width: 768px){ax-heading h1{font-size:1.5rem;line-height:1.875rem}ax-heading h2{font-size:1.375rem;line-height:1.75rem}ax-heading h3{font-size:1.25rem;line-height:1.625rem}ax-heading h4{line-height:1.5rem}ax-heading h5{line-height:1.375rem}ax-heading h6{line-height:1.25rem}ax-heading p,ax-heading ax-subtitle{line-height:1.5rem}}\n"] }]
        }], propDecorators: { darkMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "darkMode", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], weight: [{ type: i0.Input, args: [{ isSignal: true, alias: "weight", required: false }] }], __hostClass: [{
                type: HostBinding,
                args: ['class']
            }] } });

/**
 * A component for displaying various types of icons including `<i>`, `<span>`, `<svg>`, and `<img>`.
 * @category Components
 */
class AXDecoratorIconComponent extends MXBaseComponent {
    constructor() {
        super(...arguments);
        /**
         * Specifies the icon to be displayed.
         *
         * @defaultValue  ''
         */
        this.icon = '';
    }
    /**
     *  @ignore
     */
    get __iconClass() {
        this.cdr.detectChanges();
        return `${this.icon}`;
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: AXDecoratorIconComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.16", type: AXDecoratorIconComponent, isStandalone: true, selector: "ax-icon", inputs: { icon: "icon" }, host: { properties: { "class": "this.__iconClass" } }, providers: [
            { provide: 'ax-icon', useExisting: AXDecoratorIconComponent },
            { provide: AXComponent, useExisting: AXDecoratorIconComponent },
        ], usesInheritance: true, ngImport: i0, template: '<ng-content></ng-content>', isInline: true, styles: ["ax-icon{display:inherit}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: AXDecoratorIconComponent, decorators: [{
            type: Component,
            args: [{ selector: 'ax-icon', template: '<ng-content></ng-content>', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, providers: [
                        { provide: 'ax-icon', useExisting: AXDecoratorIconComponent },
                        { provide: AXComponent, useExisting: AXDecoratorIconComponent },
                    ], styles: ["ax-icon{display:inherit}\n"] }]
        }], propDecorators: { icon: [{
                type: Input
            }], __iconClass: [{
                type: HostBinding,
                args: ['class']
            }] } });

const COMPONENT = [
    AXDecoratorIconComponent,
    AXDecoratorClearButtonComponent,
    AXDecoratorCloseButtonComponent,
    AXDecoratorGenericComponent,
    AXDecoratorFullScreenButtonComponent,
    AXDecoratorHeadingComponent,
    AXDecoratorColorIndicatorComponent,
];
const MODULES = [CommonModule];
class AXDecoratorModule {
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: AXDecoratorModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.16", ngImport: i0, type: AXDecoratorModule, imports: [CommonModule, AXDecoratorIconComponent,
            AXDecoratorClearButtonComponent,
            AXDecoratorCloseButtonComponent,
            AXDecoratorGenericComponent,
            AXDecoratorFullScreenButtonComponent,
            AXDecoratorHeadingComponent,
            AXDecoratorColorIndicatorComponent], exports: [AXDecoratorIconComponent,
            AXDecoratorClearButtonComponent,
            AXDecoratorCloseButtonComponent,
            AXDecoratorGenericComponent,
            AXDecoratorFullScreenButtonComponent,
            AXDecoratorHeadingComponent,
            AXDecoratorColorIndicatorComponent] }); }
    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: AXDecoratorModule, imports: [MODULES] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: AXDecoratorModule, decorators: [{
            type: NgModule,
            args: [{
                    imports: [...MODULES, ...COMPONENT],
                    exports: [...COMPONENT],
                    providers: [],
                }]
        }] });

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

export { AXDecoratorClearButtonComponent, AXDecoratorCloseButtonComponent, AXDecoratorColorIndicatorComponent, AXDecoratorFullScreenButtonComponent, AXDecoratorGenericComponent, AXDecoratorHeadingComponent, AXDecoratorIconComponent, AXDecoratorModule };
//# sourceMappingURL=acorex-components-decorators.mjs.map
