import { __decorate, __metadata } from "tslib";
import { ChangeDetectionStrategy, ChangeDetectorRef, Component, ElementRef, HostBinding, Input, } from '@angular/core';
import { OpeningHoursParser } from '@aztrix/helpers';
import { MediaQuery, ObserveResizeService } from 'angular-container-media-query';
import { AbstractPropertyValueViewComponent } from '../abstract-property-value-view.component';
import * as i0 from "@angular/core";
import * as i1 from "angular-container-media-query";
import * as i2 from "@angular/common";
import * as i3 from "../value-verified-view/value-verified-view.component";
import * as i4 from "./opening-hours-date-view/opening-hours-date-view.component";
import * as i5 from "./opening-hours-day-view/opening-hours-day-view.component";
import * as i6 from "@aztrix/helpers";
export class OpeningHoursViewComponent extends AbstractPropertyValueViewComponent {
    set size(size) {
        switch (size) {
            case 'SMALL':
                this._smallClass = true;
                this._mediumClass = false;
                break;
            case 'MEDIUM':
                this._smallClass = false;
                this._mediumClass = true;
                break;
                break;
            default:
                break;
        }
        this._size = size;
    }
    get size() {
        return this._size;
    }
    set smallQuery(small) {
        if (this.size === 'AUTO') {
            this._smallClass = small;
        }
    }
    set mediumQuery(medium) {
        if (this.size === 'AUTO') {
            this._mediumClass = medium;
        }
    }
    constructor(resize, elementRef, changeDetector) {
        super();
        this._size = 'AUTO';
        this.openingDates = [];
        this._smallClass = false;
        this._mediumClass = false;
        resize.register(this, elementRef, changeDetector);
    }
    ngOnChanges(changes) {
        if (changes.property && this.property) {
            this.openingDates = OpeningHoursParser.parse(this.property?.value);
        }
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: OpeningHoursViewComponent, 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: OpeningHoursViewComponent, selector: "ax-opening-hours-view", inputs: { size: "size" }, host: { properties: { "class.small": "this._smallClass", "class.medium": "this._mediumClass" } }, usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<ax-value-verified-view\n  [property]=\"property\"\n  [parentProperty]=\"parentProperty\"\n  [showVerificationLabel]=\"showVerificationLabel\"\n>\n  <div class=\"day-ranges\">\n    <ng-container *ngFor=\"let openingDate of openingDates\">\n      <ax-opening-hours-date-view\n        [dates]=\"openingDate.dates\"\n        [text]=\"openingDate.openingDays[0].text\"\n      ></ax-opening-hours-date-view>\n      <div class=\"days\" *ngIf=\"openingDate.openingDays !== []; else empty\">\n        <ng-container *ngFor=\"let openingDay of openingDate.openingDays\">\n          <ax-opening-hours-day-view\n            class=\"day\"\n            [days]=\"[openingDay.day]\"\n          ></ax-opening-hours-day-view>\n          <ng-container *ngIf=\"!openingDay.open\">\n            <span class=\"closed\">{{ 'label.closed' | translate | uppercase }}</span>\n          </ng-container>\n          <ng-container *ngIf=\"openingDay.open\">\n            <ng-container\n              *ngFor=\"let range of openingDay.ranges; let first = first; let last = last\"\n            >\n              <span *ngIf=\"!first\"></span>\n              <span class=\"from\" [ngClass]=\"{last: last}\">{{ range.from | formatTime }}</span>\n              <span class=\"spacer\" [ngClass]=\"{last: last}\"> - </span>\n              <span class=\"to\" [ngClass]=\"{last: last}\">{{ range.to | formatTime }}</span>\n            </ng-container>\n          </ng-container>\n        </ng-container>\n      </div>\n      <ng-template #empty>\n        <span>{{ 'property.value.empty' | translate }}</span>\n      </ng-template>\n    </ng-container>\n  </div>\n</ax-value-verified-view>\n", styles: [".property-value{font-size:16px;font-weight:700}\n", ":host{display:block}:host.small .days{grid-template-columns:max-content 5px max-content}:host.small .day{grid-column:1/4;text-align:left}:host.small .closed{grid-column:1/4}:host.small .from{grid-column:1/2}:host.small .spacer{grid-column:2/3}:host.small .to{grid-column:3/4}.day-ranges{display:flex;flex-direction:column}.days{display:grid;grid-template-columns:max-content max-content 5px max-content;grid-gap:0 5px}.day{margin-right:5px}.closed{grid-column:2/5}.from,.to{justify-self:end}.last{margin-bottom:5px}\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.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3.ValueVerifiedViewComponent, selector: "ax-value-verified-view" }, { kind: "component", type: i4.OpeningHoursDateViewComponent, selector: "ax-opening-hours-date-view", inputs: ["dates", "text"] }, { kind: "component", type: i5.OpeningHoursDayViewComponent, selector: "ax-opening-hours-day-view", inputs: ["days"] }, { kind: "pipe", type: i2.UpperCasePipe, name: "uppercase" }, { kind: "pipe", type: i6.TranslatePipe, name: "translate" }, { kind: "pipe", type: i6.FormatTimePipe, name: "formatTime" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
}
__decorate([
    MediaQuery('(max-width: 250px)'),
    __metadata("design:type", Boolean),
    __metadata("design:paramtypes", [Boolean])
], OpeningHoursViewComponent.prototype, "smallQuery", null);
__decorate([
    MediaQuery('(min-width: 251px)'),
    __metadata("design:type", Boolean),
    __metadata("design:paramtypes", [Boolean])
], OpeningHoursViewComponent.prototype, "mediumQuery", null);
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: OpeningHoursViewComponent, decorators: [{
            type: Component,
            args: [{ selector: 'ax-opening-hours-view', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ax-value-verified-view\n  [property]=\"property\"\n  [parentProperty]=\"parentProperty\"\n  [showVerificationLabel]=\"showVerificationLabel\"\n>\n  <div class=\"day-ranges\">\n    <ng-container *ngFor=\"let openingDate of openingDates\">\n      <ax-opening-hours-date-view\n        [dates]=\"openingDate.dates\"\n        [text]=\"openingDate.openingDays[0].text\"\n      ></ax-opening-hours-date-view>\n      <div class=\"days\" *ngIf=\"openingDate.openingDays !== []; else empty\">\n        <ng-container *ngFor=\"let openingDay of openingDate.openingDays\">\n          <ax-opening-hours-day-view\n            class=\"day\"\n            [days]=\"[openingDay.day]\"\n          ></ax-opening-hours-day-view>\n          <ng-container *ngIf=\"!openingDay.open\">\n            <span class=\"closed\">{{ 'label.closed' | translate | uppercase }}</span>\n          </ng-container>\n          <ng-container *ngIf=\"openingDay.open\">\n            <ng-container\n              *ngFor=\"let range of openingDay.ranges; let first = first; let last = last\"\n            >\n              <span *ngIf=\"!first\"></span>\n              <span class=\"from\" [ngClass]=\"{last: last}\">{{ range.from | formatTime }}</span>\n              <span class=\"spacer\" [ngClass]=\"{last: last}\"> - </span>\n              <span class=\"to\" [ngClass]=\"{last: last}\">{{ range.to | formatTime }}</span>\n            </ng-container>\n          </ng-container>\n        </ng-container>\n      </div>\n      <ng-template #empty>\n        <span>{{ 'property.value.empty' | translate }}</span>\n      </ng-template>\n    </ng-container>\n  </div>\n</ax-value-verified-view>\n", styles: [".property-value{font-size:16px;font-weight:700}\n", ":host{display:block}:host.small .days{grid-template-columns:max-content 5px max-content}:host.small .day{grid-column:1/4;text-align:left}:host.small .closed{grid-column:1/4}:host.small .from{grid-column:1/2}:host.small .spacer{grid-column:2/3}:host.small .to{grid-column:3/4}.day-ranges{display:flex;flex-direction:column}.days{display:grid;grid-template-columns:max-content max-content 5px max-content;grid-gap:0 5px}.day{margin-right:5px}.closed{grid-column:2/5}.from,.to{justify-self:end}.last{margin-bottom:5px}\n"] }]
        }], ctorParameters: () => [{ type: i1.ObserveResizeService }, { type: i0.ElementRef }, { type: i0.ChangeDetectorRef }], propDecorators: { size: [{
                type: Input
            }], smallQuery: [], mediumQuery: [], _smallClass: [{
                type: HostBinding,
                args: ['class.small']
            }], _mediumClass: [{
                type: HostBinding,
                args: ['class.medium']
            }] } });
//# sourceMappingURL=data:application/json;base64, 