import { __decorate, __metadata } from "tslib";
import { ChangeDetectorRef, Component, ElementRef, EventEmitter, HostBinding, Input, Output, } from '@angular/core';
import { createRangeForm } from '@aztrix/helpers';
import { MediaQuery, ObserveResizeService } from 'angular-container-media-query';
import * as i0 from "@angular/core";
import * as i1 from "angular-container-media-query";
import * as i2 from "@angular/common";
import * as i3 from "@aztrix/icons";
import * as i4 from "@aztrix/components/button";
import * as i5 from "@aztrix/components/property-view";
import * as i6 from "../days-combined-edit/days-combined-edit.component";
import * as i7 from "../day-edit/day-edit.component";
import * as i8 from "@aztrix/helpers";
import * as i9 from "@aztrix/translate";
export class DayRangeEditComponent {
    constructor(resize, elementRef, changeDetector) {
        this.cleared = false;
        this.readonly = false;
        this.editClicked = new EventEmitter();
        this.propertyEditClass = true;
        this.large = false;
        resize.register(this, elementRef, changeDetector);
    }
    add(group) {
        group.get('ranges').push(createRangeForm());
    }
    remove({ group, range }) {
        const ranges = group.get('ranges');
        if (ranges.length < 2) {
            const r = ranges.controls[0];
            r.setValue({ from: new Date(1970, 0, 1, 9), to: new Date(1970, 0, 1, 17) });
            group.get('open')?.setValue(false);
        }
        else {
            const index = ranges.controls.findIndex((r) => r === range);
            ranges.removeAt(index);
        }
    }
    get datesForm() {
        return this.form.get('dates');
    }
    get openingDaysForm() {
        return this.form.get('openingDays');
    }
    get collapsed() {
        return this.form.get('collapsed')?.value;
    }
    get firstText() {
        const texts = this.openingDaysForm.controls.map((g) => g.get('text'));
        return texts.length ? texts[0]?.value : '';
    }
    toggle() {
        this.form.get('collapsed')?.setValue(!this.collapsed);
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: DayRangeEditComponent, deps: [{ token: i1.ObserveResizeService }, { token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: DayRangeEditComponent, selector: "ax-day-range-edit", inputs: { form: "form", name: "name", special: "special", cleared: "cleared", readonly: "readonly" }, outputs: { editClicked: "editClicked" }, host: { properties: { "class.c-property-edit": "this.propertyEditClass", "class.large": "this.large" } }, ngImport: i0, template: "<div class=\"label\">\n  <ax-opening-hours-date-view\n    class=\"date\"\n    [dates]=\"datesForm.value\"\n    [text]=\"firstText\"\n  ></ax-opening-hours-date-view>\n  <button *ngIf=\"special\" axButton icon-button (click)=\"editClicked.emit()\">\n    <ax-icon class=\"icon\" name=\"pencil\"></ax-icon>\n  </button>\n</div>\n\n<button\n  *ngIf=\"openingDaysForm.controls.length > 1\"\n  class=\"dropdown\"\n  axButton\n  type=\"button\"\n  icon-button\n  (click)=\"toggle()\"\n>\n  <ax-icon class=\"icon\" [name]=\"collapsed ? 'chevron-right' : 'chevron-down'\"></ax-icon>\n</button>\n\n<ax-days-combined-edit\n  [name]=\"name\"\n  class=\"day\"\n  *ngIf=\"collapsed\"\n  [form]=\"form\"\n  [cleared]=\"cleared\"\n  [readonly]=\"readonly\"\n  (add)=\"add($event)\"\n  (remove)=\"remove($event)\"\n></ax-days-combined-edit>\n\n<div class=\"days\" *ngIf=\"!collapsed\">\n  <ax-day-edit\n    *ngFor=\"let dayGroup of openingDaysForm.controls; let index = index\"\n    [name]=\"name + ' day' + index\"\n    [group]=\"dayGroup\"\n    [cleared]=\"cleared\"\n    [readonly]=\"readonly\"\n    (add)=\"add($event)\"\n    (remove)=\"remove($event)\"\n  ></ax-day-edit>\n</div>\n\n<div class=\"errors\">\n  <div class=\"c-property-edit__error\" *ngFor=\"let error of openingDaysForm?.errors | keyvalue\">\n    <ax-icon class=\"icon\" name=\"alert-circle\"></ax-icon>\n    <span>{{ error.key | errorTranslationKey | translate: error.value }}</span>\n  </div>\n</div>\n", styles: [":host{display:grid;grid-template-columns:34px auto;grid-column-gap:.5rem;grid-template-areas:\"label label\" \"dropdown days\" \"errors errors\";margin:1rem 0 1.5rem}:host .days{grid-area:days;display:flex;flex-direction:column}:host.large .dropdown{margin:1.4rem 0 0}:host.large .days{display:grid;grid-template-columns:max-content 36px max-content max-content;grid-gap:1rem;grid-row-gap:.5rem;align-items:center;justify-content:flex-start;justify-items:flex-start;margin:.5rem 0 1.75rem;min-height:64px}.label{grid-area:label;display:flex;align-items:center;padding-left:36px}.label .ax-button{margin-right:.5rem}.day{grid-area:days}.dropdown{grid-row-start:2}.errors{grid-area:errors}\n"], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3.IconComponent, selector: "ax-icon", inputs: ["name", "inline"] }, { kind: "directive", type: i4.ButtonDirective, selector: "[axButton]", inputs: ["color", "labelHideMobile", "smallButton", "bigButton", "fullWidth", "filled", "outline", "icon-button", "hoverLabel", "hover", "lowercase", "disabled"] }, { kind: "component", type: i5.OpeningHoursDateViewComponent, selector: "ax-opening-hours-date-view", inputs: ["dates", "text"] }, { kind: "component", type: i6.DaysCombinedEditComponent, selector: "ax-days-combined-edit", inputs: ["form", "name", "cleared", "readonly"], outputs: ["add", "remove"] }, { kind: "component", type: i7.DayEditComponent, selector: "ax-day-edit", inputs: ["group", "name", "cleared", "readonly"], outputs: ["add", "remove"] }, { kind: "pipe", type: i2.KeyValuePipe, name: "keyvalue" }, { kind: "pipe", type: i8.ErrorTranslationKeyPipe, name: "errorTranslationKey" }, { kind: "pipe", type: i9.TranslatePipe, name: "translate" }] }); }
}
__decorate([
    MediaQuery('(min-width: 39.375em)'),
    __metadata("design:type", Object)
], DayRangeEditComponent.prototype, "large", void 0);
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: DayRangeEditComponent, decorators: [{
            type: Component,
            args: [{ selector: 'ax-day-range-edit', template: "<div class=\"label\">\n  <ax-opening-hours-date-view\n    class=\"date\"\n    [dates]=\"datesForm.value\"\n    [text]=\"firstText\"\n  ></ax-opening-hours-date-view>\n  <button *ngIf=\"special\" axButton icon-button (click)=\"editClicked.emit()\">\n    <ax-icon class=\"icon\" name=\"pencil\"></ax-icon>\n  </button>\n</div>\n\n<button\n  *ngIf=\"openingDaysForm.controls.length > 1\"\n  class=\"dropdown\"\n  axButton\n  type=\"button\"\n  icon-button\n  (click)=\"toggle()\"\n>\n  <ax-icon class=\"icon\" [name]=\"collapsed ? 'chevron-right' : 'chevron-down'\"></ax-icon>\n</button>\n\n<ax-days-combined-edit\n  [name]=\"name\"\n  class=\"day\"\n  *ngIf=\"collapsed\"\n  [form]=\"form\"\n  [cleared]=\"cleared\"\n  [readonly]=\"readonly\"\n  (add)=\"add($event)\"\n  (remove)=\"remove($event)\"\n></ax-days-combined-edit>\n\n<div class=\"days\" *ngIf=\"!collapsed\">\n  <ax-day-edit\n    *ngFor=\"let dayGroup of openingDaysForm.controls; let index = index\"\n    [name]=\"name + ' day' + index\"\n    [group]=\"dayGroup\"\n    [cleared]=\"cleared\"\n    [readonly]=\"readonly\"\n    (add)=\"add($event)\"\n    (remove)=\"remove($event)\"\n  ></ax-day-edit>\n</div>\n\n<div class=\"errors\">\n  <div class=\"c-property-edit__error\" *ngFor=\"let error of openingDaysForm?.errors | keyvalue\">\n    <ax-icon class=\"icon\" name=\"alert-circle\"></ax-icon>\n    <span>{{ error.key | errorTranslationKey | translate: error.value }}</span>\n  </div>\n</div>\n", styles: [":host{display:grid;grid-template-columns:34px auto;grid-column-gap:.5rem;grid-template-areas:\"label label\" \"dropdown days\" \"errors errors\";margin:1rem 0 1.5rem}:host .days{grid-area:days;display:flex;flex-direction:column}:host.large .dropdown{margin:1.4rem 0 0}:host.large .days{display:grid;grid-template-columns:max-content 36px max-content max-content;grid-gap:1rem;grid-row-gap:.5rem;align-items:center;justify-content:flex-start;justify-items:flex-start;margin:.5rem 0 1.75rem;min-height:64px}.label{grid-area:label;display:flex;align-items:center;padding-left:36px}.label .ax-button{margin-right:.5rem}.day{grid-area:days}.dropdown{grid-row-start:2}.errors{grid-area:errors}\n"] }]
        }], ctorParameters: () => [{ type: i1.ObserveResizeService }, { type: i0.ElementRef }, { type: i0.ChangeDetectorRef }], propDecorators: { form: [{
                type: Input
            }], name: [{
                type: Input
            }], special: [{
                type: Input
            }], cleared: [{
                type: Input
            }], readonly: [{
                type: Input
            }], editClicked: [{
                type: Output
            }], propertyEditClass: [{
                type: HostBinding,
                args: ['class.c-property-edit']
            }], large: [{
                type: HostBinding,
                args: ['class.large']
            }] } });
//# sourceMappingURL=data:application/json;base64, 