import { Component, Input } from '@angular/core';
import { FontsService } from '@aztrix/helpers';
import * as i0 from "@angular/core";
import * as i1 from "@aztrix/helpers";
import * as i2 from "@angular/common";
import * as i3 from "@aztrix/translate";
export class FontSelectComponent {
    constructor(_fonts) {
        this._fonts = _fonts;
        this.fontsGrouped = this._fonts.fonts.reduce((prev, curr) => {
            const item = prev.find((i) => i.type === curr.type);
            if (item) {
                item.fonts.push(curr);
            }
            else {
                prev.push({ type: curr.type, fonts: [curr] });
            }
            return prev;
        }, []);
    }
    ngOnInit() {
        this._fonts.loadAllFonts().then();
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: FontSelectComponent, deps: [{ token: i1.FontsService }], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: FontSelectComponent, selector: "ax-font-select", inputs: { form: "form" }, ngImport: i0, template: "<div *ngFor=\"let fontGroup of fontsGrouped\">\n  <h3>{{ 'page.edit.appearance.font.type.' + fontGroup.type | translate }}</h3>\n  <div class=\"fonts\">\n    <div class=\"wrapper\" *ngFor=\"let font of fontGroup.fonts\" (click)=\"form?.setValue(font.value)\">\n      <button class=\"button\" [ngClass]=\"{selected: font.value === form?.value}\">\n        <span class=\"font-label\" [ngStyle]=\"{'font-family': font.value}\">Aa</span>\n      </button>\n      <span class=\"option-label\">{{ font.label }}</span>\n    </div>\n  </div>\n</div>\n", styles: [":host{display:flex;flex-direction:column;gap:2rem}.fonts{display:grid;grid-gap:1rem;grid-template-columns:repeat(auto-fill,minmax(90px,1fr))}.wrapper{width:100%;min-height:80px;display:flex;flex-direction:column;align-items:center;text-align:center}.button{position:relative;display:inline-block;width:100%;height:70px;overflow:hidden;background-color:#efefef;border-radius:10px;cursor:pointer;-webkit-user-select:none;user-select:none;border-width:0}.button.selected{background-color:var(--primary-color-500)}.font-label{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-size:2rem}.option-label{margin-top:.5rem}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: FontSelectComponent, decorators: [{
            type: Component,
            args: [{ selector: 'ax-font-select', template: "<div *ngFor=\"let fontGroup of fontsGrouped\">\n  <h3>{{ 'page.edit.appearance.font.type.' + fontGroup.type | translate }}</h3>\n  <div class=\"fonts\">\n    <div class=\"wrapper\" *ngFor=\"let font of fontGroup.fonts\" (click)=\"form?.setValue(font.value)\">\n      <button class=\"button\" [ngClass]=\"{selected: font.value === form?.value}\">\n        <span class=\"font-label\" [ngStyle]=\"{'font-family': font.value}\">Aa</span>\n      </button>\n      <span class=\"option-label\">{{ font.label }}</span>\n    </div>\n  </div>\n</div>\n", styles: [":host{display:flex;flex-direction:column;gap:2rem}.fonts{display:grid;grid-gap:1rem;grid-template-columns:repeat(auto-fill,minmax(90px,1fr))}.wrapper{width:100%;min-height:80px;display:flex;flex-direction:column;align-items:center;text-align:center}.button{position:relative;display:inline-block;width:100%;height:70px;overflow:hidden;background-color:#efefef;border-radius:10px;cursor:pointer;-webkit-user-select:none;user-select:none;border-width:0}.button.selected{background-color:var(--primary-color-500)}.font-label{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-size:2rem}.option-label{margin-top:.5rem}\n"] }]
        }], ctorParameters: () => [{ type: i1.FontsService }], propDecorators: { form: [{
                type: Input
            }] } });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZm9udC1zZWxlY3QuY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vbGlicy9jb21wb25lbnRzL2ZvbnQtc2VsZWN0L2ZvbnQtc2VsZWN0LmNvbXBvbmVudC50cyIsIi4uLy4uLy4uLy4uLy4uL2xpYnMvY29tcG9uZW50cy9mb250LXNlbGVjdC9mb250LXNlbGVjdC5jb21wb25lbnQuaHRtbCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQUMsU0FBUyxFQUFFLEtBQUssRUFBUyxNQUFNLGVBQWUsQ0FBQztBQUV2RCxPQUFPLEVBQUMsWUFBWSxFQUFDLE1BQU0saUJBQWlCLENBQUM7Ozs7O0FBTzdDLE1BQU0sT0FBTyxtQkFBbUI7SUFnQjlCLFlBQW9CLE1BQW9CO1FBQXBCLFdBQU0sR0FBTixNQUFNLENBQWM7UUFieEMsaUJBQVksR0FBRyxJQUFJLENBQUMsTUFBTSxDQUFDLEtBQUssQ0FBQyxNQUFNLENBQ3JDLENBQUMsSUFBSSxFQUFFLElBQUksRUFBRSxFQUFFO1lBQ2IsTUFBTSxJQUFJLEdBQUcsSUFBSSxDQUFDLElBQUksQ0FBQyxDQUFDLENBQUMsRUFBRSxFQUFFLENBQUMsQ0FBQyxDQUFDLElBQUksS0FBSyxJQUFJLENBQUMsSUFBSSxDQUFDLENBQUM7WUFDcEQsSUFBSSxJQUFJLEVBQUUsQ0FBQztnQkFDVCxJQUFJLENBQUMsS0FBSyxDQUFDLElBQUksQ0FBQyxJQUFJLENBQUMsQ0FBQztZQUN4QixDQUFDO2lCQUFNLENBQUM7Z0JBQ04sSUFBSSxDQUFDLElBQUksQ0FBQyxFQUFDLElBQUksRUFBRSxJQUFJLENBQUMsSUFBSSxFQUFFLEtBQUssRUFBRSxDQUFDLElBQUksQ0FBQyxFQUFDLENBQUMsQ0FBQztZQUM5QyxDQUFDO1lBQ0QsT0FBTyxJQUFJLENBQUM7UUFDZCxDQUFDLEVBQ3VGLEVBQUUsQ0FDM0YsQ0FBQztJQUV5QyxDQUFDO0lBRTVDLFFBQVE7UUFDTixJQUFJLENBQUMsTUFBTSxDQUFDLFlBQVksRUFBRSxDQUFDLElBQUksRUFBRSxDQUFDO0lBQ3BDLENBQUM7K0dBcEJVLG1CQUFtQjttR0FBbkIsbUJBQW1CLGdGQ1RoQyxnaUJBV0E7OzRGREZhLG1CQUFtQjtrQkFML0IsU0FBUzsrQkFDRSxnQkFBZ0I7aUZBS2pCLElBQUk7c0JBQVosS0FBSyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7Q29tcG9uZW50LCBJbnB1dCwgT25Jbml0fSBmcm9tICdAYW5ndWxhci9jb3JlJztcbmltcG9ydCB7QWJzdHJhY3RDb250cm9sfSBmcm9tICdAYW5ndWxhci9mb3Jtcyc7XG5pbXBvcnQge0ZvbnRzU2VydmljZX0gZnJvbSAnQGF6dHJpeC9oZWxwZXJzJztcblxuQENvbXBvbmVudCh7XG4gIHNlbGVjdG9yOiAnYXgtZm9udC1zZWxlY3QnLFxuICB0ZW1wbGF0ZVVybDogJ2ZvbnQtc2VsZWN0LmNvbXBvbmVudC5odG1sJyxcbiAgc3R5bGVVcmxzOiBbJ2ZvbnQtc2VsZWN0LmNvbXBvbmVudC5zY3NzJ10sXG59KVxuZXhwb3J0IGNsYXNzIEZvbnRTZWxlY3RDb21wb25lbnQgaW1wbGVtZW50cyBPbkluaXQge1xuICBASW5wdXQoKSBmb3JtOiBBYnN0cmFjdENvbnRyb2wgfCB1bmRlZmluZWQ7XG5cbiAgZm9udHNHcm91cGVkID0gdGhpcy5fZm9udHMuZm9udHMucmVkdWNlKFxuICAgIChwcmV2LCBjdXJyKSA9PiB7XG4gICAgICBjb25zdCBpdGVtID0gcHJldi5maW5kKChpKSA9PiBpLnR5cGUgPT09IGN1cnIudHlwZSk7XG4gICAgICBpZiAoaXRlbSkge1xuICAgICAgICBpdGVtLmZvbnRzLnB1c2goY3Vycik7XG4gICAgICB9IGVsc2Uge1xuICAgICAgICBwcmV2LnB1c2goe3R5cGU6IGN1cnIudHlwZSwgZm9udHM6IFtjdXJyXX0pO1xuICAgICAgfVxuICAgICAgcmV0dXJuIHByZXY7XG4gICAgfSxcbiAgICA8e3R5cGU6IHN0cmluZzsgZm9udHM6IHt2YWx1ZTogc3RyaW5nOyBsYWJlbDogc3RyaW5nOyBpbmRleDogc3RyaW5nOyB0eXBlOiBzdHJpbmd9W119W10+W11cbiAgKTtcblxuICBjb25zdHJ1Y3Rvcihwcml2YXRlIF9mb250czogRm9udHNTZXJ2aWNlKSB7fVxuXG4gIG5nT25Jbml0KCk6IHZvaWQge1xuICAgIHRoaXMuX2ZvbnRzLmxvYWRBbGxGb250cygpLnRoZW4oKTtcbiAgfVxufVxuIiwiPGRpdiAqbmdGb3I9XCJsZXQgZm9udEdyb3VwIG9mIGZvbnRzR3JvdXBlZFwiPlxuICA8aDM+e3sgJ3BhZ2UuZWRpdC5hcHBlYXJhbmNlLmZvbnQudHlwZS4nICsgZm9udEdyb3VwLnR5cGUgfCB0cmFuc2xhdGUgfX08L2gzPlxuICA8ZGl2IGNsYXNzPVwiZm9udHNcIj5cbiAgICA8ZGl2IGNsYXNzPVwid3JhcHBlclwiICpuZ0Zvcj1cImxldCBmb250IG9mIGZvbnRHcm91cC5mb250c1wiIChjbGljayk9XCJmb3JtPy5zZXRWYWx1ZShmb250LnZhbHVlKVwiPlxuICAgICAgPGJ1dHRvbiBjbGFzcz1cImJ1dHRvblwiIFtuZ0NsYXNzXT1cIntzZWxlY3RlZDogZm9udC52YWx1ZSA9PT0gZm9ybT8udmFsdWV9XCI+XG4gICAgICAgIDxzcGFuIGNsYXNzPVwiZm9udC1sYWJlbFwiIFtuZ1N0eWxlXT1cInsnZm9udC1mYW1pbHknOiBmb250LnZhbHVlfVwiPkFhPC9zcGFuPlxuICAgICAgPC9idXR0b24+XG4gICAgICA8c3BhbiBjbGFzcz1cIm9wdGlvbi1sYWJlbFwiPnt7IGZvbnQubGFiZWwgfX08L3NwYW4+XG4gICAgPC9kaXY+XG4gIDwvZGl2PlxuPC9kaXY+XG4iXX0=