import { Component, computed, HostBinding, input } from '@angular/core';
import * as i0 from "@angular/core";
/**
 * val-container
 *
 * Layout primitive that caps content max-width using design tokens
 * and centers it horizontally. Use to keep UX consistent on large
 * screens without per-page CSS.
 *
 * @example
 * <val-container size="xl">
 *   <!-- page content -->
 * </val-container>
 *
 * @example
 * <val-container [props]="{ size: 'md', padding: 'compact' }">
 *   <!-- narrower form -->
 * </val-container>
 */
export class ContainerComponent {
    constructor() {
        this.props = input({});
        this.size = computed(() => this.props()?.size ?? 'xl');
        this.padding = computed(() => this.props()?.padding ?? 'comfortable');
        this.align = computed(() => this.props()?.align ?? 'center');
    }
    get sizeAttr() {
        return this.size();
    }
    get paddingAttr() {
        return this.padding();
    }
    get alignAttr() {
        return this.align();
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ContainerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.14", type: ContainerComponent, isStandalone: true, selector: "val-container", inputs: { props: { classPropertyName: "props", publicName: "props", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.data-size": "this.sizeAttr", "attr.data-padding": "this.paddingAttr", "attr.data-align": "this.alignAttr" } }, ngImport: i0, template: `<ng-content></ng-content>`, isInline: true, styles: ["@charset \"UTF-8\";:host{display:block;width:100%;box-sizing:border-box;margin-left:0;margin-right:auto}:host([data-align=center]){margin-left:auto;margin-right:auto}:host([data-padding=comfortable]){padding-left:12px;padding-right:12px}@media (min-width: 576px){:host([data-padding=comfortable]){padding-left:var(--val-container-padding, 16px);padding-right:var(--val-container-padding, 16px)}}:host([data-padding=compact]){padding-left:8px;padding-right:8px}:host([data-padding=none]){padding-left:0;padding-right:0}@media (min-width: 576px){:host([data-size=sm]){max-width:var(--val-container-sm, 540px)}}@media (min-width: 576px){:host([data-size=md]){max-width:var(--val-container-sm, 540px)}}@media (min-width: 768px){:host([data-size=md]){max-width:var(--val-container-md, 720px)}}@media (min-width: 576px){:host([data-size=lg]){max-width:var(--val-container-sm, 540px)}}@media (min-width: 768px){:host([data-size=lg]){max-width:var(--val-container-md, 720px)}}@media (min-width: 992px){:host([data-size=lg]){max-width:var(--val-container-lg, 880px)}}@media (min-width: 576px){:host([data-size=xl]){max-width:var(--val-container-sm, 540px)}}@media (min-width: 768px){:host([data-size=xl]){max-width:var(--val-container-md, 720px)}}@media (min-width: 992px){:host([data-size=xl]){max-width:var(--val-container-lg, 880px)}}@media (min-width: 1200px){:host([data-size=xl]){max-width:var(--val-container-xl, 1100px)}}:host([data-size=fluid]){max-width:100%}\n"] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ContainerComponent, decorators: [{
            type: Component,
            args: [{ selector: 'val-container', standalone: true, template: `<ng-content></ng-content>`, styles: ["@charset \"UTF-8\";:host{display:block;width:100%;box-sizing:border-box;margin-left:0;margin-right:auto}:host([data-align=center]){margin-left:auto;margin-right:auto}:host([data-padding=comfortable]){padding-left:12px;padding-right:12px}@media (min-width: 576px){:host([data-padding=comfortable]){padding-left:var(--val-container-padding, 16px);padding-right:var(--val-container-padding, 16px)}}:host([data-padding=compact]){padding-left:8px;padding-right:8px}:host([data-padding=none]){padding-left:0;padding-right:0}@media (min-width: 576px){:host([data-size=sm]){max-width:var(--val-container-sm, 540px)}}@media (min-width: 576px){:host([data-size=md]){max-width:var(--val-container-sm, 540px)}}@media (min-width: 768px){:host([data-size=md]){max-width:var(--val-container-md, 720px)}}@media (min-width: 576px){:host([data-size=lg]){max-width:var(--val-container-sm, 540px)}}@media (min-width: 768px){:host([data-size=lg]){max-width:var(--val-container-md, 720px)}}@media (min-width: 992px){:host([data-size=lg]){max-width:var(--val-container-lg, 880px)}}@media (min-width: 576px){:host([data-size=xl]){max-width:var(--val-container-sm, 540px)}}@media (min-width: 768px){:host([data-size=xl]){max-width:var(--val-container-md, 720px)}}@media (min-width: 992px){:host([data-size=xl]){max-width:var(--val-container-lg, 880px)}}@media (min-width: 1200px){:host([data-size=xl]){max-width:var(--val-container-xl, 1100px)}}:host([data-size=fluid]){max-width:100%}\n"] }]
        }], propDecorators: { sizeAttr: [{
                type: HostBinding,
                args: ['attr.data-size']
            }], paddingAttr: [{
                type: HostBinding,
                args: ['attr.data-padding']
            }], alignAttr: [{
                type: HostBinding,
                args: ['attr.data-align']
            }] } });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiY29udGFpbmVyLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uLy4uL3NyYy9saWIvY29tcG9uZW50cy9hdG9tcy9jb250YWluZXIvY29udGFpbmVyLmNvbXBvbmVudC50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQUUsU0FBUyxFQUFFLFFBQVEsRUFBRSxXQUFXLEVBQUUsS0FBSyxFQUFFLE1BQU0sZUFBZSxDQUFDOztBQUd4RTs7Ozs7Ozs7Ozs7Ozs7OztHQWdCRztBQU9ILE1BQU0sT0FBTyxrQkFBa0I7SUFOL0I7UUFPVyxVQUFLLEdBQUcsS0FBSyxDQUFvQixFQUFFLENBQUMsQ0FBQztRQUVyQyxTQUFJLEdBQUcsUUFBUSxDQUFnQixHQUFHLEVBQUUsQ0FBQyxJQUFJLENBQUMsS0FBSyxFQUFFLEVBQUUsSUFBSSxJQUFJLElBQUksQ0FBQyxDQUFDO1FBQ2pFLFlBQU8sR0FBRyxRQUFRLENBQW1CLEdBQUcsRUFBRSxDQUFDLElBQUksQ0FBQyxLQUFLLEVBQUUsRUFBRSxPQUFPLElBQUksYUFBYSxDQUFDLENBQUM7UUFDbkYsVUFBSyxHQUFHLFFBQVEsQ0FBaUIsR0FBRyxFQUFFLENBQUMsSUFBSSxDQUFDLEtBQUssRUFBRSxFQUFFLEtBQUssSUFBSSxRQUFRLENBQUMsQ0FBQztLQWFsRjtJQVhDLElBQW1DLFFBQVE7UUFDekMsT0FBTyxJQUFJLENBQUMsSUFBSSxFQUFFLENBQUM7SUFDckIsQ0FBQztJQUVELElBQXNDLFdBQVc7UUFDL0MsT0FBTyxJQUFJLENBQUMsT0FBTyxFQUFFLENBQUM7SUFDeEIsQ0FBQztJQUVELElBQW9DLFNBQVM7UUFDM0MsT0FBTyxJQUFJLENBQUMsS0FBSyxFQUFFLENBQUM7SUFDdEIsQ0FBQzsrR0FqQlUsa0JBQWtCO21HQUFsQixrQkFBa0Isd1ZBSG5CLDJCQUEyQjs7NEZBRzFCLGtCQUFrQjtrQkFOOUIsU0FBUzsrQkFDRSxlQUFlLGNBQ2IsSUFBSSxZQUNOLDJCQUEyQjs4QkFVRixRQUFRO3NCQUExQyxXQUFXO3VCQUFDLGdCQUFnQjtnQkFJUyxXQUFXO3NCQUFoRCxXQUFXO3VCQUFDLG1CQUFtQjtnQkFJSSxTQUFTO3NCQUE1QyxXQUFXO3VCQUFDLGlCQUFpQiIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IENvbXBvbmVudCwgY29tcHV0ZWQsIEhvc3RCaW5kaW5nLCBpbnB1dCB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuaW1wb3J0IHsgQ29udGFpbmVyQWxpZ24sIENvbnRhaW5lck1ldGFkYXRhLCBDb250YWluZXJQYWRkaW5nLCBDb250YWluZXJTaXplIH0gZnJvbSAnLi90eXBlcyc7XG5cbi8qKlxuICogdmFsLWNvbnRhaW5lclxuICpcbiAqIExheW91dCBwcmltaXRpdmUgdGhhdCBjYXBzIGNvbnRlbnQgbWF4LXdpZHRoIHVzaW5nIGRlc2lnbiB0b2tlbnNcbiAqIGFuZCBjZW50ZXJzIGl0IGhvcml6b250YWxseS4gVXNlIHRvIGtlZXAgVVggY29uc2lzdGVudCBvbiBsYXJnZVxuICogc2NyZWVucyB3aXRob3V0IHBlci1wYWdlIENTUy5cbiAqXG4gKiBAZXhhbXBsZVxuICogPHZhbC1jb250YWluZXIgc2l6ZT1cInhsXCI+XG4gKiAgIDwhLS0gcGFnZSBjb250ZW50IC0tPlxuICogPC92YWwtY29udGFpbmVyPlxuICpcbiAqIEBleGFtcGxlXG4gKiA8dmFsLWNvbnRhaW5lciBbcHJvcHNdPVwieyBzaXplOiAnbWQnLCBwYWRkaW5nOiAnY29tcGFjdCcgfVwiPlxuICogICA8IS0tIG5hcnJvd2VyIGZvcm0gLS0+XG4gKiA8L3ZhbC1jb250YWluZXI+XG4gKi9cbkBDb21wb25lbnQoe1xuICBzZWxlY3RvcjogJ3ZhbC1jb250YWluZXInLFxuICBzdGFuZGFsb25lOiB0cnVlLFxuICB0ZW1wbGF0ZTogYDxuZy1jb250ZW50PjwvbmctY29udGVudD5gLFxuICBzdHlsZVVybDogJy4vY29udGFpbmVyLmNvbXBvbmVudC5zY3NzJyxcbn0pXG5leHBvcnQgY2xhc3MgQ29udGFpbmVyQ29tcG9uZW50IHtcbiAgcmVhZG9ubHkgcHJvcHMgPSBpbnB1dDxDb250YWluZXJNZXRhZGF0YT4oe30pO1xuXG4gIHJlYWRvbmx5IHNpemUgPSBjb21wdXRlZDxDb250YWluZXJTaXplPigoKSA9PiB0aGlzLnByb3BzKCk/LnNpemUgPz8gJ3hsJyk7XG4gIHJlYWRvbmx5IHBhZGRpbmcgPSBjb21wdXRlZDxDb250YWluZXJQYWRkaW5nPigoKSA9PiB0aGlzLnByb3BzKCk/LnBhZGRpbmcgPz8gJ2NvbWZvcnRhYmxlJyk7XG4gIHJlYWRvbmx5IGFsaWduID0gY29tcHV0ZWQ8Q29udGFpbmVyQWxpZ24+KCgpID0+IHRoaXMucHJvcHMoKT8uYWxpZ24gPz8gJ2NlbnRlcicpO1xuXG4gIEBIb3N0QmluZGluZygnYXR0ci5kYXRhLXNpemUnKSBnZXQgc2l6ZUF0dHIoKSB7XG4gICAgcmV0dXJuIHRoaXMuc2l6ZSgpO1xuICB9XG5cbiAgQEhvc3RCaW5kaW5nKCdhdHRyLmRhdGEtcGFkZGluZycpIGdldCBwYWRkaW5nQXR0cigpIHtcbiAgICByZXR1cm4gdGhpcy5wYWRkaW5nKCk7XG4gIH1cblxuICBASG9zdEJpbmRpbmcoJ2F0dHIuZGF0YS1hbGlnbicpIGdldCBhbGlnbkF0dHIoKSB7XG4gICAgcmV0dXJuIHRoaXMuYWxpZ24oKTtcbiAgfVxufVxuIl19