import { Component, Input } from '@angular/core';
import { AbstractControl } from '@angular/forms';
import { FontsService } from '@aztrix/helpers';
import * as i0 from "@angular/core";
import * as i1 from "@aztrix/helpers";
import * as i2 from "@angular/common";
export class FontSelectComponent {
    constructor(_fonts) {
        this._fonts = _fonts;
    }
    get fontsGrouped() {
        return 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();
    }
}
FontSelectComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.5", ngImport: i0, type: FontSelectComponent, deps: [{ token: i1.FontsService }], target: i0.ɵɵFactoryTarget.Component });
FontSelectComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.5", 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=\"font\" *ngFor=\"let font of fontGroup.fonts\" (click)=\"form.setValue(font.value)\">\n      <input\n        class=\"input\"\n        type=\"radio\"\n        [id]=\"'font-' + font.index\"\n        [value]=\"'font-' + font.index\"\n        [checked]=\"font.value === form?.value\"\n      />\n      <label\n        class=\"font-label\"\n        [for]=\"'font-' + font.index\"\n        [ngStyle]=\"{'font-family': font.value}\"\n      >\n        <span>Aa</span>\n      </label>\n      <span class=\"option-label\">{{ font.label }}</span>\n    </div>\n  </div>\n</div>\n", styles: [":host{display:flex;flex-direction:column;gap:2rem}:host input[type=radio]:checked+label{background-color:var(--primary-color-500)}.fonts{display:grid;grid-gap:1rem;grid-template-columns:repeat(auto-fill,minmax(90px,1fr))}.font{width:100%;min-height:80px;display:flex;flex-direction:column;align-items:center;text-align:center}.input{position:absolute;visibility:hidden;opacity:0}.input+label{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}.input+label.bg-color-label{background-color:#363f48}.input+label .ax-button{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.font-label span{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-size:2rem}.option-label{margin-top:.5rem}\n"], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.5", 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=\"font\" *ngFor=\"let font of fontGroup.fonts\" (click)=\"form.setValue(font.value)\">\n      <input\n        class=\"input\"\n        type=\"radio\"\n        [id]=\"'font-' + font.index\"\n        [value]=\"'font-' + font.index\"\n        [checked]=\"font.value === form?.value\"\n      />\n      <label\n        class=\"font-label\"\n        [for]=\"'font-' + font.index\"\n        [ngStyle]=\"{'font-family': font.value}\"\n      >\n        <span>Aa</span>\n      </label>\n      <span class=\"option-label\">{{ font.label }}</span>\n    </div>\n  </div>\n</div>\n", styles: [":host{display:flex;flex-direction:column;gap:2rem}:host input[type=radio]:checked+label{background-color:var(--primary-color-500)}.fonts{display:grid;grid-gap:1rem;grid-template-columns:repeat(auto-fill,minmax(90px,1fr))}.font{width:100%;min-height:80px;display:flex;flex-direction:column;align-items:center;text-align:center}.input{position:absolute;visibility:hidden;opacity:0}.input+label{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}.input+label.bg-color-label{background-color:#363f48}.input+label .ax-button{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.font-label span{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-size:2rem}.option-label{margin-top:.5rem}\n"] }]
        }], ctorParameters: function () { return [{ type: i1.FontsService }]; }, propDecorators: { form: [{
                type: Input
            }] } });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZm9udC1zZWxlY3QuY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vbGlicy9jb21wb25lbnRzL2ZvbnQtc2VsZWN0L2ZvbnQtc2VsZWN0LmNvbXBvbmVudC50cyIsIi4uLy4uLy4uLy4uLy4uL2xpYnMvY29tcG9uZW50cy9mb250LXNlbGVjdC9mb250LXNlbGVjdC5jb21wb25lbnQuaHRtbCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQUMsU0FBUyxFQUFFLEtBQUssRUFBUyxNQUFNLGVBQWUsQ0FBQztBQUN2RCxPQUFPLEVBQUMsZUFBZSxFQUFDLE1BQU0sZ0JBQWdCLENBQUM7QUFDL0MsT0FBTyxFQUFDLFlBQVksRUFBQyxNQUFNLGlCQUFpQixDQUFDOzs7O0FBTzdDLE1BQU0sT0FBTyxtQkFBbUI7SUFHOUIsWUFBb0IsTUFBb0I7UUFBcEIsV0FBTSxHQUFOLE1BQU0sQ0FBYztJQUFHLENBQUM7SUFFNUMsSUFBSSxZQUFZO1FBQ2QsT0FBTyxJQUFJLENBQUMsTUFBTSxDQUFDLEtBQUssQ0FBQyxNQUFNLENBQUMsQ0FBQyxJQUFJLEVBQUUsSUFBSSxFQUFFLEVBQUU7WUFDN0MsTUFBTSxJQUFJLEdBQUcsSUFBSSxDQUFDLElBQUksQ0FBQyxDQUFDLENBQUMsRUFBRSxFQUFFLENBQUMsQ0FBQyxDQUFDLElBQUksS0FBSyxJQUFJLENBQUMsSUFBSSxDQUFDLENBQUM7WUFDcEQsSUFBSSxJQUFJLEVBQUU7Z0JBQ1IsSUFBSSxDQUFDLEtBQUssQ0FBQyxJQUFJLENBQUMsSUFBSSxDQUFDLENBQUM7YUFDdkI7aUJBQU07Z0JBQ0wsSUFBSSxDQUFDLElBQUksQ0FBQyxFQUFDLElBQUksRUFBRSxJQUFJLENBQUMsSUFBSSxFQUFFLEtBQUssRUFBRSxDQUFDLElBQUksQ0FBQyxFQUFDLENBQUMsQ0FBQzthQUM3QztZQUNELE9BQU8sSUFBSSxDQUFDO1FBQ2QsQ0FBQyxFQUFFLEVBQUUsQ0FBQyxDQUFDO0lBQ1QsQ0FBQztJQUVELFFBQVE7UUFDTixJQUFJLENBQUMsTUFBTSxDQUFDLFlBQVksRUFBRSxDQUFDLElBQUksRUFBRSxDQUFDO0lBQ3BDLENBQUM7O2dIQW5CVSxtQkFBbUI7b0dBQW5CLG1CQUFtQixnRkNUaEMsa3VCQXNCQTsyRkRiYSxtQkFBbUI7a0JBTC9CLFNBQVM7K0JBQ0UsZ0JBQWdCO21HQUtqQixJQUFJO3NCQUFaLEtBQUsiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQge0NvbXBvbmVudCwgSW5wdXQsIE9uSW5pdH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5pbXBvcnQge0Fic3RyYWN0Q29udHJvbH0gZnJvbSAnQGFuZ3VsYXIvZm9ybXMnO1xuaW1wb3J0IHtGb250c1NlcnZpY2V9IGZyb20gJ0BhenRyaXgvaGVscGVycyc7XG5cbkBDb21wb25lbnQoe1xuICBzZWxlY3RvcjogJ2F4LWZvbnQtc2VsZWN0JyxcbiAgdGVtcGxhdGVVcmw6ICdmb250LXNlbGVjdC5jb21wb25lbnQuaHRtbCcsXG4gIHN0eWxlVXJsczogWydmb250LXNlbGVjdC5jb21wb25lbnQuc2NzcyddLFxufSlcbmV4cG9ydCBjbGFzcyBGb250U2VsZWN0Q29tcG9uZW50IGltcGxlbWVudHMgT25Jbml0IHtcbiAgQElucHV0KCkgZm9ybTogQWJzdHJhY3RDb250cm9sO1xuXG4gIGNvbnN0cnVjdG9yKHByaXZhdGUgX2ZvbnRzOiBGb250c1NlcnZpY2UpIHt9XG5cbiAgZ2V0IGZvbnRzR3JvdXBlZCgpIHtcbiAgICByZXR1cm4gdGhpcy5fZm9udHMuZm9udHMucmVkdWNlKChwcmV2LCBjdXJyKSA9PiB7XG4gICAgICBjb25zdCBpdGVtID0gcHJldi5maW5kKChpKSA9PiBpLnR5cGUgPT09IGN1cnIudHlwZSk7XG4gICAgICBpZiAoaXRlbSkge1xuICAgICAgICBpdGVtLmZvbnRzLnB1c2goY3Vycik7XG4gICAgICB9IGVsc2Uge1xuICAgICAgICBwcmV2LnB1c2goe3R5cGU6IGN1cnIudHlwZSwgZm9udHM6IFtjdXJyXX0pO1xuICAgICAgfVxuICAgICAgcmV0dXJuIHByZXY7XG4gICAgfSwgW10pO1xuICB9XG5cbiAgbmdPbkluaXQoKTogdm9pZCB7XG4gICAgdGhpcy5fZm9udHMubG9hZEFsbEZvbnRzKCkudGhlbigpO1xuICB9XG59XG4iLCI8ZGl2ICpuZ0Zvcj1cImxldCBmb250R3JvdXAgb2YgZm9udHNHcm91cGVkXCI+XG4gIDxoMz57eyAncGFnZS5lZGl0LmFwcGVhcmFuY2UuZm9udC50eXBlLicgKyBmb250R3JvdXAudHlwZSB8IHRyYW5zbGF0ZSB9fTwvaDM+XG4gIDxkaXYgY2xhc3M9XCJmb250c1wiPlxuICAgIDxkaXYgY2xhc3M9XCJmb250XCIgKm5nRm9yPVwibGV0IGZvbnQgb2YgZm9udEdyb3VwLmZvbnRzXCIgKGNsaWNrKT1cImZvcm0uc2V0VmFsdWUoZm9udC52YWx1ZSlcIj5cbiAgICAgIDxpbnB1dFxuICAgICAgICBjbGFzcz1cImlucHV0XCJcbiAgICAgICAgdHlwZT1cInJhZGlvXCJcbiAgICAgICAgW2lkXT1cIidmb250LScgKyBmb250LmluZGV4XCJcbiAgICAgICAgW3ZhbHVlXT1cIidmb250LScgKyBmb250LmluZGV4XCJcbiAgICAgICAgW2NoZWNrZWRdPVwiZm9udC52YWx1ZSA9PT0gZm9ybT8udmFsdWVcIlxuICAgICAgLz5cbiAgICAgIDxsYWJlbFxuICAgICAgICBjbGFzcz1cImZvbnQtbGFiZWxcIlxuICAgICAgICBbZm9yXT1cIidmb250LScgKyBmb250LmluZGV4XCJcbiAgICAgICAgW25nU3R5bGVdPVwieydmb250LWZhbWlseSc6IGZvbnQudmFsdWV9XCJcbiAgICAgID5cbiAgICAgICAgPHNwYW4+QWE8L3NwYW4+XG4gICAgICA8L2xhYmVsPlxuICAgICAgPHNwYW4gY2xhc3M9XCJvcHRpb24tbGFiZWxcIj57eyBmb250LmxhYmVsIH19PC9zcGFuPlxuICAgIDwvZGl2PlxuICA8L2Rpdj5cbjwvZGl2PlxuIl19