import { NXComponent } from '@acorex/cdk/common';
import * as i0 from '@angular/core';
import { input, computed, ChangeDetectionStrategy, ViewEncapsulation, Component } from '@angular/core';

class AXAspectRatioComponent extends NXComponent {
    constructor() {
        super(...arguments);
        this.ratio = input(16 / 9, ...(ngDevMode ? [{ debugName: "ratio" }] : []));
        this.paddingTop = computed(() => `${100 / this.ratio()}%`, ...(ngDevMode ? [{ debugName: "paddingTop" }] : []));
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: AXAspectRatioComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.9", type: AXAspectRatioComponent, isStandalone: true, selector: "ax-aspect-ratio", inputs: { ratio: { classPropertyName: "ratio", publicName: "ratio", isSignal: true, isRequired: false, transformFunction: null } }, usesInheritance: true, ngImport: i0, template: `
    <div class="aspect-ratio-wrapper" [style.padding-top]="paddingTop()">
      <div class="content-wrapper">
        <ng-content></ng-content>
      </div>
    </div>
  `, isInline: true, styles: [".aspect-ratio-wrapper{width:100%;display:block;position:relative}.content-wrapper{top:0;left:0;right:0;bottom:0;position:absolute}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: AXAspectRatioComponent, decorators: [{
            type: Component,
            args: [{ selector: 'ax-aspect-ratio', template: `
    <div class="aspect-ratio-wrapper" [style.padding-top]="paddingTop()">
      <div class="content-wrapper">
        <ng-content></ng-content>
      </div>
    </div>
  `, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, styles: [".aspect-ratio-wrapper{width:100%;display:block;position:relative}.content-wrapper{top:0;left:0;right:0;bottom:0;position:absolute}\n"] }]
        }], propDecorators: { ratio: [{ type: i0.Input, args: [{ isSignal: true, alias: "ratio", required: false }] }] } });

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

export { AXAspectRatioComponent };
//# sourceMappingURL=acorex-components-aspect-ratio.mjs.map
