import { Component, ContentChildren, EventEmitter, Input, Output, QueryList, } from '@angular/core';
import { startWith } from 'rxjs';
import { OptionComponent } from './option/option.component';
import * as i0 from "@angular/core";
import * as i1 from "@angular/common";
import * as i2 from "@aztrix/icons";
import * as i3 from "@aztrix/components/button";
import * as i4 from "./selected-option.pipe";
export class OptionPanelComponent {
    constructor() {
        this._options = new QueryList();
        this.selected = undefined;
        this.selectedChanged = new EventEmitter();
    }
    changeOption(option) {
        this.selected = option;
        this.selectedChanged.next(this.selected);
    }
    ngAfterContentInit() {
        this._children.changes.pipe(startWith(this._children)).subscribe((children) => {
            if (children.length) {
                this._options = children;
            }
        });
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: OptionPanelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: OptionPanelComponent, selector: "ax-option-panel", inputs: { selected: "selected" }, outputs: { selectedChanged: "selectedChanged" }, queries: [{ propertyName: "_children", predicate: OptionComponent, descendants: true }], ngImport: i0, template: "<div class=\"options\">\n  <button\n    *ngFor=\"let option of _options\"\n    class=\"option\"\n    [ngClass]=\"{selected: option.value === selected}\"\n    (click)=\"changeOption(option.value)\"\n    axButton\n    icon-button\n  >\n    <ax-icon class=\"icon\" [name]=\"option.icon\"></ax-icon>\n  </button>\n</div>\n\n<ng-container *ngIf=\"_options | selectedOption: selected as option\">\n  <div class=\"content\" *ngIf=\"option._implicitContent\">\n    <ng-container *ngTemplateOutlet=\"option._implicitContent\"></ng-container>\n  </div>\n</ng-container>\n", styles: [":host{display:flex;flex-direction:column;gap:1.5rem}.options{display:flex;flex-wrap:wrap;gap:1rem}button.option{width:4rem;height:4rem;border-radius:.6rem;background-color:#efefef}button.option .icon{width:2.5rem;height:2.5rem}button.option.selected{background-color:var(--primary-color-500)}.content{animation:fadeIn .2s cubic-bezier(.25,.8,.25,1);transform:scale(.8);animation-fill-mode:forwards;opacity:0}@keyframes fadeIn{0%{transform:scale(.8);opacity:0}to{transform:scale(1);opacity:1}}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i2.IconComponent, selector: "ax-icon", inputs: ["name", "inline"] }, { kind: "directive", type: i3.ButtonDirective, selector: "[axButton]", inputs: ["color", "labelHideMobile", "smallButton", "bigButton", "fullWidth", "filled", "outline", "icon-button", "hoverLabel", "hover", "lowercase", "disabled"] }, { kind: "pipe", type: i4.SelectedOptionPipe, name: "selectedOption" }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: OptionPanelComponent, decorators: [{
            type: Component,
            args: [{ selector: 'ax-option-panel', template: "<div class=\"options\">\n  <button\n    *ngFor=\"let option of _options\"\n    class=\"option\"\n    [ngClass]=\"{selected: option.value === selected}\"\n    (click)=\"changeOption(option.value)\"\n    axButton\n    icon-button\n  >\n    <ax-icon class=\"icon\" [name]=\"option.icon\"></ax-icon>\n  </button>\n</div>\n\n<ng-container *ngIf=\"_options | selectedOption: selected as option\">\n  <div class=\"content\" *ngIf=\"option._implicitContent\">\n    <ng-container *ngTemplateOutlet=\"option._implicitContent\"></ng-container>\n  </div>\n</ng-container>\n", styles: [":host{display:flex;flex-direction:column;gap:1.5rem}.options{display:flex;flex-wrap:wrap;gap:1rem}button.option{width:4rem;height:4rem;border-radius:.6rem;background-color:#efefef}button.option .icon{width:2.5rem;height:2.5rem}button.option.selected{background-color:var(--primary-color-500)}.content{animation:fadeIn .2s cubic-bezier(.25,.8,.25,1);transform:scale(.8);animation-fill-mode:forwards;opacity:0}@keyframes fadeIn{0%{transform:scale(.8);opacity:0}to{transform:scale(1);opacity:1}}\n"] }]
        }], propDecorators: { _children: [{
                type: ContentChildren,
                args: [OptionComponent, { descendants: true }]
            }], selected: [{
                type: Input
            }], selectedChanged: [{
                type: Output
            }] } });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoib3B0aW9uLXBhbmVsLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uL2xpYnMvY29tcG9uZW50cy9vcHRpb24tcGFuZWwvb3B0aW9uLXBhbmVsLmNvbXBvbmVudC50cyIsIi4uLy4uLy4uLy4uLy4uL2xpYnMvY29tcG9uZW50cy9vcHRpb24tcGFuZWwvb3B0aW9uLXBhbmVsLmNvbXBvbmVudC5odG1sIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFFTCxTQUFTLEVBQ1QsZUFBZSxFQUNmLFlBQVksRUFDWixLQUFLLEVBQ0wsTUFBTSxFQUNOLFNBQVMsR0FDVixNQUFNLGVBQWUsQ0FBQztBQUN2QixPQUFPLEVBQUMsU0FBUyxFQUFDLE1BQU0sTUFBTSxDQUFDO0FBRS9CLE9BQU8sRUFBQyxlQUFlLEVBQUMsTUFBTSwyQkFBMkIsQ0FBQzs7Ozs7O0FBTzFELE1BQU0sT0FBTyxvQkFBb0I7SUFMakM7UUFRRSxhQUFRLEdBQStCLElBQUksU0FBUyxFQUFtQixDQUFDO1FBRS9ELGFBQVEsR0FBZ0MsU0FBUyxDQUFDO1FBQ2pELG9CQUFlLEdBQUcsSUFBSSxZQUFZLEVBQW1CLENBQUM7S0FjakU7SUFaQyxZQUFZLENBQUMsTUFBdUI7UUFDbEMsSUFBSSxDQUFDLFFBQVEsR0FBRyxNQUFNLENBQUM7UUFDdkIsSUFBSSxDQUFDLGVBQWUsQ0FBQyxJQUFJLENBQUMsSUFBSSxDQUFDLFFBQVEsQ0FBQyxDQUFDO0lBQzNDLENBQUM7SUFFRCxrQkFBa0I7UUFDaEIsSUFBSSxDQUFDLFNBQVMsQ0FBQyxPQUFPLENBQUMsSUFBSSxDQUFDLFNBQVMsQ0FBQyxJQUFJLENBQUMsU0FBUyxDQUFDLENBQUMsQ0FBQyxTQUFTLENBQUMsQ0FBQyxRQUFRLEVBQUUsRUFBRTtZQUM1RSxJQUFJLFFBQVEsQ0FBQyxNQUFNLEVBQUUsQ0FBQztnQkFDcEIsSUFBSSxDQUFDLFFBQVEsR0FBRyxRQUFRLENBQUM7WUFDM0IsQ0FBQztRQUNILENBQUMsQ0FBQyxDQUFDO0lBQ0wsQ0FBQzsrR0FuQlUsb0JBQW9CO21HQUFwQixvQkFBb0Isb0tBQ2QsZUFBZSxnRENuQmxDLG1qQkFrQkE7OzRGREFhLG9CQUFvQjtrQkFMaEMsU0FBUzsrQkFDRSxpQkFBaUI7OEJBSzRCLFNBQVM7c0JBQS9ELGVBQWU7dUJBQUMsZUFBZSxFQUFFLEVBQUMsV0FBVyxFQUFFLElBQUksRUFBQztnQkFJNUMsUUFBUTtzQkFBaEIsS0FBSztnQkFDSSxlQUFlO3NCQUF4QixNQUFNIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHtcbiAgQWZ0ZXJDb250ZW50SW5pdCxcbiAgQ29tcG9uZW50LFxuICBDb250ZW50Q2hpbGRyZW4sXG4gIEV2ZW50RW1pdHRlcixcbiAgSW5wdXQsXG4gIE91dHB1dCxcbiAgUXVlcnlMaXN0LFxufSBmcm9tICdAYW5ndWxhci9jb3JlJztcbmltcG9ydCB7c3RhcnRXaXRofSBmcm9tICdyeGpzJztcblxuaW1wb3J0IHtPcHRpb25Db21wb25lbnR9IGZyb20gJy4vb3B0aW9uL29wdGlvbi5jb21wb25lbnQnO1xuXG5AQ29tcG9uZW50KHtcbiAgc2VsZWN0b3I6ICdheC1vcHRpb24tcGFuZWwnLFxuICB0ZW1wbGF0ZVVybDogJy4vb3B0aW9uLXBhbmVsLmNvbXBvbmVudC5odG1sJyxcbiAgc3R5bGVVcmxzOiBbJy4vb3B0aW9uLXBhbmVsLmNvbXBvbmVudC5zY3NzJ10sXG59KVxuZXhwb3J0IGNsYXNzIE9wdGlvblBhbmVsQ29tcG9uZW50IGltcGxlbWVudHMgQWZ0ZXJDb250ZW50SW5pdCB7XG4gIEBDb250ZW50Q2hpbGRyZW4oT3B0aW9uQ29tcG9uZW50LCB7ZGVzY2VuZGFudHM6IHRydWV9KSBfY2hpbGRyZW46IFF1ZXJ5TGlzdDxPcHRpb25Db21wb25lbnQ+O1xuXG4gIF9vcHRpb25zOiBRdWVyeUxpc3Q8T3B0aW9uQ29tcG9uZW50PiA9IG5ldyBRdWVyeUxpc3Q8T3B0aW9uQ29tcG9uZW50PigpO1xuXG4gIEBJbnB1dCgpIHNlbGVjdGVkOiBudW1iZXIgfCBzdHJpbmcgfCB1bmRlZmluZWQgPSB1bmRlZmluZWQ7XG4gIEBPdXRwdXQoKSBzZWxlY3RlZENoYW5nZWQgPSBuZXcgRXZlbnRFbWl0dGVyPG51bWJlciB8IHN0cmluZz4oKTtcblxuICBjaGFuZ2VPcHRpb24ob3B0aW9uOiBudW1iZXIgfCBzdHJpbmcpIHtcbiAgICB0aGlzLnNlbGVjdGVkID0gb3B0aW9uO1xuICAgIHRoaXMuc2VsZWN0ZWRDaGFuZ2VkLm5leHQodGhpcy5zZWxlY3RlZCk7XG4gIH1cblxuICBuZ0FmdGVyQ29udGVudEluaXQoKTogdm9pZCB7XG4gICAgdGhpcy5fY2hpbGRyZW4uY2hhbmdlcy5waXBlKHN0YXJ0V2l0aCh0aGlzLl9jaGlsZHJlbikpLnN1YnNjcmliZSgoY2hpbGRyZW4pID0+IHtcbiAgICAgIGlmIChjaGlsZHJlbi5sZW5ndGgpIHtcbiAgICAgICAgdGhpcy5fb3B0aW9ucyA9IGNoaWxkcmVuO1xuICAgICAgfVxuICAgIH0pO1xuICB9XG59XG4iLCI8ZGl2IGNsYXNzPVwib3B0aW9uc1wiPlxuICA8YnV0dG9uXG4gICAgKm5nRm9yPVwibGV0IG9wdGlvbiBvZiBfb3B0aW9uc1wiXG4gICAgY2xhc3M9XCJvcHRpb25cIlxuICAgIFtuZ0NsYXNzXT1cIntzZWxlY3RlZDogb3B0aW9uLnZhbHVlID09PSBzZWxlY3RlZH1cIlxuICAgIChjbGljayk9XCJjaGFuZ2VPcHRpb24ob3B0aW9uLnZhbHVlKVwiXG4gICAgYXhCdXR0b25cbiAgICBpY29uLWJ1dHRvblxuICA+XG4gICAgPGF4LWljb24gY2xhc3M9XCJpY29uXCIgW25hbWVdPVwib3B0aW9uLmljb25cIj48L2F4LWljb24+XG4gIDwvYnV0dG9uPlxuPC9kaXY+XG5cbjxuZy1jb250YWluZXIgKm5nSWY9XCJfb3B0aW9ucyB8IHNlbGVjdGVkT3B0aW9uOiBzZWxlY3RlZCBhcyBvcHRpb25cIj5cbiAgPGRpdiBjbGFzcz1cImNvbnRlbnRcIiAqbmdJZj1cIm9wdGlvbi5faW1wbGljaXRDb250ZW50XCI+XG4gICAgPG5nLWNvbnRhaW5lciAqbmdUZW1wbGF0ZU91dGxldD1cIm9wdGlvbi5faW1wbGljaXRDb250ZW50XCI+PC9uZy1jb250YWluZXI+XG4gIDwvZGl2PlxuPC9uZy1jb250YWluZXI+XG4iXX0=