import * as i0 from '@angular/core';
import { TemplateRef, Component, Input, ViewChild, Pipe, QueryList, EventEmitter, ContentChildren, Output, NgModule } from '@angular/core';
import { startWith } from 'rxjs';
import * as i1 from '@angular/common';
import { CommonModule } from '@angular/common';
import * as i2 from '@aztrix/icons';
import { IconsModule } from '@aztrix/icons';
import * as i3 from '@aztrix/components/button';
import { ButtonModule } from '@aztrix/components/button';

class OptionComponent {
    constructor() {
        this.value = OptionComponent._nextId++;
    }
    static { this._nextId = 0; }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: OptionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: OptionComponent, selector: "ax-option", inputs: { icon: "icon", value: "value" }, viewQueries: [{ propertyName: "_implicitContent", first: true, predicate: TemplateRef, descendants: true, static: true }], ngImport: i0, template: "<ng-template><ng-content></ng-content></ng-template>\n" }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: OptionComponent, decorators: [{
            type: Component,
            args: [{ selector: 'ax-option', template: "<ng-template><ng-content></ng-content></ng-template>\n" }]
        }], propDecorators: { icon: [{
                type: Input
            }], value: [{
                type: Input
            }], _implicitContent: [{
                type: ViewChild,
                args: [TemplateRef, { static: true }]
            }] } });

class SelectedOptionPipe {
    transform(options, selected) {
        return options.find((option) => option.value === selected);
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: SelectedOptionPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "17.3.12", ngImport: i0, type: SelectedOptionPipe, name: "selectedOption" }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: SelectedOptionPipe, decorators: [{
            type: Pipe,
            args: [{ name: 'selectedOption' }]
        }] });

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: 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
            }] } });

class OptionPanelModule {
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: OptionPanelModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.3.12", ngImport: i0, type: OptionPanelModule, declarations: [OptionComponent, OptionPanelComponent, SelectedOptionPipe], imports: [CommonModule, IconsModule, ButtonModule], exports: [OptionPanelComponent, OptionComponent] }); }
    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: OptionPanelModule, imports: [CommonModule, IconsModule, ButtonModule] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: OptionPanelModule, decorators: [{
            type: NgModule,
            args: [{
                    declarations: [OptionComponent, OptionPanelComponent, SelectedOptionPipe],
                    imports: [CommonModule, IconsModule, ButtonModule],
                    exports: [OptionPanelComponent, OptionComponent],
                }]
        }] });

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

export { OptionComponent, OptionPanelComponent, OptionPanelModule };
//# sourceMappingURL=aztrix-components-option-panel.mjs.map
