import { __awaiter } from "tslib";
import { ChangeDetectionStrategy, ChangeDetectorRef, Component } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormBuilder, ReactiveFormsModule } from '@angular/forms';
import { FirstUppercaseLocalizeSAPipe } from '@anglr/common';
import { TitledDialogService } from '@anglr/common/material';
import { LayoutEditorMetadataExtractor, PropertiesControlBase } from '@anglr/dynamic/layout-editor';
import { generateId } from '@jscrpt/common';
import * as i0 from "@angular/core";
import * as i1 from "@anglr/dynamic/layout-editor";
import * as i2 from "@anglr/common/material";
import * as i3 from "@angular/forms";
import * as i4 from "@angular/common";
/**
 * Component used for displaying material tab group properties control
 */
export class MaterialTabGroupPropertiesControlSAComponent extends PropertiesControlBase {
    //######################### protected properties #########################
    /**
     * Tabs control
     */
    get tabsControl() {
        var _a;
        return (_a = this.form) === null || _a === void 0 ? void 0 : _a.controls.tabs;
    }
    /**
     * Tabs control form groups
     */
    get tabsControls() {
        var _a;
        return (_a = this.tabsControl) === null || _a === void 0 ? void 0 : _a.controls;
    }
    //######################### constructor #########################
    constructor(changeDetector, metadataExtractor, dialog, fb) {
        super(changeDetector, metadataExtractor);
        this.dialog = dialog;
        this.fb = fb;
    }
    //######################### protected methods - template bindings #########################
    /**
     * Adds new tab to tab group
     */
    addTab() {
        var _a;
        return __awaiter(this, void 0, void 0, function* () {
            (_a = this.tabsControl) === null || _a === void 0 ? void 0 : _a.push(this.fb.group({
                title: 'Tab',
                content: {
                    id: `${generateId(6)}-tab`,
                    package: 'material-components',
                    name: 'tab',
                    options: {}
                }
            }));
        });
    }
    /**
     * Removes tab on specified index in form array
     * @param index Tab index to remove
     */
    removeTab(index) {
        var _a;
        (_a = this.tabsControl) === null || _a === void 0 ? void 0 : _a.removeAt(index);
    }
}
MaterialTabGroupPropertiesControlSAComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.4", ngImport: i0, type: MaterialTabGroupPropertiesControlSAComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i1.LayoutEditorMetadataExtractor }, { token: i2.TitledDialogService }, { token: i3.FormBuilder }], target: i0.ɵɵFactoryTarget.Component });
MaterialTabGroupPropertiesControlSAComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.4", type: MaterialTabGroupPropertiesControlSAComponent, isStandalone: true, selector: "material-tab-group-properties-control", usesInheritance: true, ngImport: i0, template: "<div class=\"properties-form-group\">\n    <label class=\"properties-control-label\">{{'tabs'|firstUppercaseLocalize}}</label>\n    <div>\n        <div class=\"dynamic-flex-row\" *ngFor=\"let tabControl of tabsControls; let i = index\" [formGroup]=\"tabControl\">\n            <div>{{i+1}}.</div>\n            <input class=\"properties-form-control dynamic-flex-1\" type=\"text\" formControlName=\"title\">\n            <button type=\"button\" class=\"dynamic-btn-icon dynamic-margin-horizontal-extra-small\" (click)=\"$event.preventDefault(); $event.stopPropagation(); removeTab(i)\">\n                <span class=\"fas fa-times\"></span>\n            </button>\n        </div>\n        \n        <button type=\"button\" class=\"dynamic-btn dynamic-btn-primary dynamic-margin-vertical-small\" (click)=\"addTab()\">\n            <span>{{'add tab'|firstUppercaseLocalize}}</span>\n        </button>\n    </div>\n</div>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "pipe", type: FirstUppercaseLocalizeSAPipe, name: "firstUppercaseLocalize" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.4", ngImport: i0, type: MaterialTabGroupPropertiesControlSAComponent, decorators: [{
            type: Component,
            args: [{ selector: 'material-tab-group-properties-control', standalone: true, imports: [
                        CommonModule,
                        ReactiveFormsModule,
                        FirstUppercaseLocalizeSAPipe,
                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"properties-form-group\">\n    <label class=\"properties-control-label\">{{'tabs'|firstUppercaseLocalize}}</label>\n    <div>\n        <div class=\"dynamic-flex-row\" *ngFor=\"let tabControl of tabsControls; let i = index\" [formGroup]=\"tabControl\">\n            <div>{{i+1}}.</div>\n            <input class=\"properties-form-control dynamic-flex-1\" type=\"text\" formControlName=\"title\">\n            <button type=\"button\" class=\"dynamic-btn-icon dynamic-margin-horizontal-extra-small\" (click)=\"$event.preventDefault(); $event.stopPropagation(); removeTab(i)\">\n                <span class=\"fas fa-times\"></span>\n            </button>\n        </div>\n        \n        <button type=\"button\" class=\"dynamic-btn dynamic-btn-primary dynamic-margin-vertical-small\" (click)=\"addTab()\">\n            <span>{{'add tab'|firstUppercaseLocalize}}</span>\n        </button>\n    </div>\n</div>\n" }]
        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i1.LayoutEditorMetadataExtractor }, { type: i2.TitledDialogService }, { type: i3.FormBuilder }] });
//# sourceMappingURL=tabGroupPropertiesControl.component.js.map