import { Component, EventEmitter, HostBinding, Input, Output } from '@angular/core';
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 "@aztrix/helpers";
export class IconDetailSelectComponent {
    constructor() {
        this.selected = new EventEmitter();
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: IconDetailSelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: IconDetailSelectComponent, selector: "ax-icon-detail-select", inputs: { mainIcon: "mainIcon", icons: "icons", color: "color" }, outputs: { selected: "selected" }, host: { properties: { "class": "this.color" } }, ngImport: i0, template: "<button axButton icon-button class=\"main\" [color]=\"color\" (click)=\"selected.next(mainIcon)\">\n  <ax-icon class=\"icon\" [name]=\"mainIcon\"></ax-icon>\n</button>\n\n<button class=\"confirm\" axButton filled [color]=\"color\" (click)=\"selected.next(mainIcon)\">\n  {{ 'label.confirm' | translate }}\n</button>\n\n<div class=\"variants\">\n  <h2>{{ 'icon-select.variants' | translate }}</h2>\n\n  <div class=\"items\">\n    <button\n      axButton\n      icon-button\n      filled\n      class=\"item\"\n      [color]=\"color\"\n      *ngFor=\"let icon of icons\"\n      (click)=\"selected.next(icon)\"\n    >\n      <ax-icon class=\"icon\" [name]=\"icon\"></ax-icon>\n    </button>\n  </div>\n</div>\n", styles: [":host{display:block;margin:.5rem}:host.primary .variants{background-color:var(--primary-color-500)}:host.secondary .variants{background-color:var(--secondary-color-500)}button.main{margin:0 auto;width:80px;height:80px}button.main .icon{width:60px;height:60px}button.confirm{display:block;margin:auto}.variants{display:flex;flex-direction:column;align-items:center;margin-top:1rem;padding:1rem;border-radius:5px;color:#fff;background-color:var(--font-color)}.items{display:flex;flex-wrap:wrap;justify-content:center}button.item{width:50px;height:50px}button.item .icon{width:40px;height:40px;margin:5px}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { 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.TranslatePipe, name: "translate" }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: IconDetailSelectComponent, decorators: [{
            type: Component,
            args: [{ selector: 'ax-icon-detail-select', template: "<button axButton icon-button class=\"main\" [color]=\"color\" (click)=\"selected.next(mainIcon)\">\n  <ax-icon class=\"icon\" [name]=\"mainIcon\"></ax-icon>\n</button>\n\n<button class=\"confirm\" axButton filled [color]=\"color\" (click)=\"selected.next(mainIcon)\">\n  {{ 'label.confirm' | translate }}\n</button>\n\n<div class=\"variants\">\n  <h2>{{ 'icon-select.variants' | translate }}</h2>\n\n  <div class=\"items\">\n    <button\n      axButton\n      icon-button\n      filled\n      class=\"item\"\n      [color]=\"color\"\n      *ngFor=\"let icon of icons\"\n      (click)=\"selected.next(icon)\"\n    >\n      <ax-icon class=\"icon\" [name]=\"icon\"></ax-icon>\n    </button>\n  </div>\n</div>\n", styles: [":host{display:block;margin:.5rem}:host.primary .variants{background-color:var(--primary-color-500)}:host.secondary .variants{background-color:var(--secondary-color-500)}button.main{margin:0 auto;width:80px;height:80px}button.main .icon{width:60px;height:60px}button.confirm{display:block;margin:auto}.variants{display:flex;flex-direction:column;align-items:center;margin-top:1rem;padding:1rem;border-radius:5px;color:#fff;background-color:var(--font-color)}.items{display:flex;flex-wrap:wrap;justify-content:center}button.item{width:50px;height:50px}button.item .icon{width:40px;height:40px;margin:5px}\n"] }]
        }], propDecorators: { mainIcon: [{
                type: Input
            }], icons: [{
                type: Input
            }], color: [{
                type: HostBinding,
                args: ['class']
            }, {
                type: Input
            }], selected: [{
                type: Output
            }] } });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaWNvbi1kZXRhaWwtc2VsZWN0LmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uL2xpYnMvY29tcG9uZW50cy9pY29uLXNlbGVjdC9pY29uLWRldGFpbC1zZWxlY3QvaWNvbi1kZXRhaWwtc2VsZWN0LmNvbXBvbmVudC50cyIsIi4uLy4uLy4uLy4uLy4uLy4uL2xpYnMvY29tcG9uZW50cy9pY29uLXNlbGVjdC9pY29uLWRldGFpbC1zZWxlY3QvaWNvbi1kZXRhaWwtc2VsZWN0LmNvbXBvbmVudC5odG1sIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBQyxTQUFTLEVBQUUsWUFBWSxFQUFFLFdBQVcsRUFBRSxLQUFLLEVBQUUsTUFBTSxFQUFDLE1BQU0sZUFBZSxDQUFDOzs7Ozs7QUFPbEYsTUFBTSxPQUFPLHlCQUF5QjtJQUx0QztRQVVZLGFBQVEsR0FBRyxJQUFJLFlBQVksRUFBVSxDQUFDO0tBQ2pEOytHQU5ZLHlCQUF5QjttR0FBekIseUJBQXlCLG1OQ1B0Qyxxc0JBeUJBOzs0RkRsQmEseUJBQXlCO2tCQUxyQyxTQUFTOytCQUNFLHVCQUF1Qjs4QkFLeEIsUUFBUTtzQkFBaEIsS0FBSztnQkFDRyxLQUFLO3NCQUFiLEtBQUs7Z0JBQ3lCLEtBQUs7c0JBQW5DLFdBQVc7dUJBQUMsT0FBTzs7c0JBQUcsS0FBSztnQkFFbEIsUUFBUTtzQkFBakIsTUFBTSIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7Q29tcG9uZW50LCBFdmVudEVtaXR0ZXIsIEhvc3RCaW5kaW5nLCBJbnB1dCwgT3V0cHV0fSBmcm9tICdAYW5ndWxhci9jb3JlJztcblxuQENvbXBvbmVudCh7XG4gIHNlbGVjdG9yOiAnYXgtaWNvbi1kZXRhaWwtc2VsZWN0JyxcbiAgdGVtcGxhdGVVcmw6ICcuL2ljb24tZGV0YWlsLXNlbGVjdC5jb21wb25lbnQuaHRtbCcsXG4gIHN0eWxlVXJsczogWycuL2ljb24tZGV0YWlsLXNlbGVjdC5jb21wb25lbnQuc2NzcyddLFxufSlcbmV4cG9ydCBjbGFzcyBJY29uRGV0YWlsU2VsZWN0Q29tcG9uZW50IHtcbiAgQElucHV0KCkgbWFpbkljb246IHN0cmluZztcbiAgQElucHV0KCkgaWNvbnM6IHN0cmluZ1tdO1xuICBASG9zdEJpbmRpbmcoJ2NsYXNzJykgQElucHV0KCkgY29sb3I6ICdwcmltYXJ5JyB8ICdzZWNvbmRhcnknIHwgdW5kZWZpbmVkO1xuXG4gIEBPdXRwdXQoKSBzZWxlY3RlZCA9IG5ldyBFdmVudEVtaXR0ZXI8c3RyaW5nPigpO1xufVxuIiwiPGJ1dHRvbiBheEJ1dHRvbiBpY29uLWJ1dHRvbiBjbGFzcz1cIm1haW5cIiBbY29sb3JdPVwiY29sb3JcIiAoY2xpY2spPVwic2VsZWN0ZWQubmV4dChtYWluSWNvbilcIj5cbiAgPGF4LWljb24gY2xhc3M9XCJpY29uXCIgW25hbWVdPVwibWFpbkljb25cIj48L2F4LWljb24+XG48L2J1dHRvbj5cblxuPGJ1dHRvbiBjbGFzcz1cImNvbmZpcm1cIiBheEJ1dHRvbiBmaWxsZWQgW2NvbG9yXT1cImNvbG9yXCIgKGNsaWNrKT1cInNlbGVjdGVkLm5leHQobWFpbkljb24pXCI+XG4gIHt7ICdsYWJlbC5jb25maXJtJyB8IHRyYW5zbGF0ZSB9fVxuPC9idXR0b24+XG5cbjxkaXYgY2xhc3M9XCJ2YXJpYW50c1wiPlxuICA8aDI+e3sgJ2ljb24tc2VsZWN0LnZhcmlhbnRzJyB8IHRyYW5zbGF0ZSB9fTwvaDI+XG5cbiAgPGRpdiBjbGFzcz1cIml0ZW1zXCI+XG4gICAgPGJ1dHRvblxuICAgICAgYXhCdXR0b25cbiAgICAgIGljb24tYnV0dG9uXG4gICAgICBmaWxsZWRcbiAgICAgIGNsYXNzPVwiaXRlbVwiXG4gICAgICBbY29sb3JdPVwiY29sb3JcIlxuICAgICAgKm5nRm9yPVwibGV0IGljb24gb2YgaWNvbnNcIlxuICAgICAgKGNsaWNrKT1cInNlbGVjdGVkLm5leHQoaWNvbilcIlxuICAgID5cbiAgICAgIDxheC1pY29uIGNsYXNzPVwiaWNvblwiIFtuYW1lXT1cImljb25cIj48L2F4LWljb24+XG4gICAgPC9idXR0b24+XG4gIDwvZGl2PlxuPC9kaXY+XG4iXX0=