ng-business-hours/fesm2015/ng-business-hours.js

Angular component allows you to show and manage business hours

import { Injectable, Inject, LOCALE_ID, Pipe, Component, forwardRef, Input, NgModule } from '@angular/core';
import { NG_VALUE_ACCESSOR, NG_VALIDATORS, FormBuilder, ReactiveFormsModule } from '@angular/forms';
import moment from 'moment';
import { formatDate, CommonModule } from '@angular/common';
import { MatSelectModule } from '@angular/material/select';
import { MatFormFieldModule } from '@angular/material/form-field';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

class NgBusinessHoursLocaleService {
    constructor(locale) {
        this.locale = locale;
        this.currentLocale = locale;
    }
    getCurrentLocale() {
        return this.currentLocale;
    }
    setCurrentLocale(value) {
        this.currentLocale = value;
    }
}
NgBusinessHoursLocaleService.decorators = [
    { type: Injectable }
];
NgBusinessHoursLocaleService.ctorParameters = () => [
    { type: String, decorators: [{ type: Inject, args: [LOCALE_ID,] }] }
];

class LocalizedDatePipe {
    constructor(localeService) {
        this.localeService = localeService;
    }
    transform(value, pattern = 'E') {
        return formatDate(value, pattern, this.localeService.getCurrentLocale());
    }
}
LocalizedDatePipe.decorators = [
    { type: Pipe, args: [{
                name: 'localizedDate',
                pure: false
            },] }
];
LocalizedDatePipe.ctorParameters = () => [
    { type: NgBusinessHoursLocaleService }
];

function daySettingsValidator(group) {
    var _a, _b, _c, _d, _e, _f, _g;
    const isOpen = (_a = group.get('open')) === null || _a === void 0 ? void 0 : _a.value;
    if (!isOpen) {
        return null;
    }
    const timeFrom = moment((_b = group.get('from')) === null || _b === void 0 ? void 0 : _b.value, 'HH:mm');
    const timeTo = moment((_c = group.get('to')) === null || _c === void 0 ? void 0 : _c.value, 'HH:mm');
    if (timeFrom < timeTo) {
        (_d = group.get('from')) === null || _d === void 0 ? void 0 : _d.setErrors(null);
        (_e = group.get('to')) === null || _e === void 0 ? void 0 : _e.setErrors(null);
        return null;
    }
    (_f = group.get('from')) === null || _f === void 0 ? void 0 : _f.setErrors({ timeToMustBeGreaterThenTimeFrom: true });
    (_g = group.get('to')) === null || _g === void 0 ? void 0 : _g.setErrors({ timeToMustBeGreaterThenTimeFrom: true });
    return { timeToMustBeGreaterThenTimeFrom: true };
}

class NgBusinessHoursComponent {
    constructor(localizedDatePipe, fb) {
        this.localizedDatePipe = localizedDatePipe;
        this.fb = fb;
        this.timeFrom = '09:00';
        this.timeTo = '18:00';
        this.isoWeek = true;
        this.val = '';
        this.disabled = false;
        this.startTime = '00:00';
        this.maxTime = '24:00';
        this.interval = 15;
        this.timeFormat = 'HH:mm';
        this.defaultBusinessHours = [
            { open: true, from: this.timeFrom, to: this.timeTo },
            { open: true, from: this.timeFrom, to: this.timeTo },
            { open: true, from: this.timeFrom, to: this.timeTo },
            { open: true, from: this.timeFrom, to: this.timeTo },
            { open: true, from: this.timeFrom, to: this.timeTo },
            { open: false, from: '', to: '' },
            { open: false, from: '', to: '' },
        ];
        this.onChange = (obj) => {
            const values = Object.values(obj);
            this.onValuesChange(values);
        };
        this.onValuesChange = (value) => { };
        this.onTouched = () => { };
        this.weekdays = Array.from(Array(7).keys());
        this.timeOptions = this.getTimeOptions(this.startTime, this.maxTime, this.interval);
        this.businessHours = this.defaultBusinessHours;
        this.initForm();
    }
    ngOnInit() {
        this.formValueChangesSubscription = this.form.valueChanges.subscribe(this.onChange);
    }
    registerOnChange(fn) {
        this.onValuesChange = fn;
    }
    registerOnTouched(fn) {
        this.onTouched = fn;
    }
    setDisabledState(isDisabled) {
        this.disabled = isDisabled;
        if (isDisabled) {
            this.form.disable();
        }
        else {
            this.form.enable();
        }
    }
    writeValue(obj) {
        if (obj && obj.length > 0) {
            const values = Object.assign({}, obj);
            this.businessHours = values;
            this.form.setValue(values, { emitEvent: false });
        }
        else {
            this.form.setValue(this.defaultBusinessHours, { emitEvent: true });
        }
    }
    validate(control) {
        if (this.form.valid) {
            return null;
        }
        return { businessHoursInvalid: true };
    }
    onChangeOperationState(i) {
        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
        if (this.disabled) {
            return;
        }
        this.businessHours[i].open = !this.businessHours[i].open;
        (_b = (_a = this.form.get(String(i))) === null || _a === void 0 ? void 0 : _a.get('open')) === null || _b === void 0 ? void 0 : _b.setValue(this.businessHours[i].open);
        if (this.businessHours[i].open) {
            (_d = (_c = this.form.get(String(i))) === null || _c === void 0 ? void 0 : _c.get('from')) === null || _d === void 0 ? void 0 : _d.setValue(this.timeFrom);
            (_f = (_e = this.form.get(String(i))) === null || _e === void 0 ? void 0 : _e.get('to')) === null || _f === void 0 ? void 0 : _f.setValue(this.timeTo);
        }
        else {
            (_h = (_g = this.form.get(String(i))) === null || _g === void 0 ? void 0 : _g.get('from')) === null || _h === void 0 ? void 0 : _h.setValue('');
            (_k = (_j = this.form.get(String(i))) === null || _j === void 0 ? void 0 : _j.get('to')) === null || _k === void 0 ? void 0 : _k.setValue('');
        }
    }
    getDateForWeekDay(num) {
        return moment().startOf(this.isoWeek ? 'isoWeek' : 'week').add(num, 'day').toDate();
    }
    initForm() {
        this.form = this.fb.group({});
        let fg;
        this.weekdays.forEach((value, index) => {
            fg = this.fb.group({
                open: [{ value: this.businessHours[index].open, disabled: this.disabled }],
                from: [{ value: this.businessHours[index].from, disabled: this.disabled }],
                to: [{ value: this.businessHours[index].to, disabled: this.disabled }],
            }, { validators: daySettingsValidator });
            this.form.addControl(String(index), fg);
        });
    }
    getTimeOptions(startTime, maxTime, interval) {
        const start = moment(startTime, 'HH:mm');
        const max = moment(maxTime, 'HH:mm');
        const timeOptions = [];
        while (start <= max) {
            timeOptions.push(moment(start).format(this.timeFormat));
            start.add(interval, 'minutes');
        }
        return timeOptions;
    }
    ngOnDestroy() {
        this.formValueChangesSubscription.unsubscribe();
    }
}
NgBusinessHoursComponent.decorators = [
    { type: Component, args: [{
                selector: 'ng-business-hours',
                template: "<form [formGroup]=\"form\" *ngIf=\"form\">\n  <div class=\"business-hours\"\n       [ngClass]=\"disabled ? 'business-hours--disabled' : ''\">\n    <div *ngFor=\"let day of weekdays; index as i\" [formGroupName]=\"i\" class=\"day\">\n      <div class=\"business-hours__left\">\n        <div class=\"day__weekday\">{{getDateForWeekDay(i) | localizedDate | titlecase}}</div>\n        <div class=\"day__box\"\n             (click)=\"onChangeOperationState(i)\"\n             [ngClass]=\"businessHours[i]['open'] ? 'day__box--open' : 'day__box--closed'\">\n          <input type=\"checkbox\" class=\"invisible\" formControlName=\"open\"/>\n        </div>\n      </div>\n      <div class=\"business-hours__right\">\n        <div class=\"operation-time\">\n          <div class=\"operation-time__input\">\n            <mat-form-field [ngClass]=\"!businessHours[i]['open'] ? 'invisible' : ''\">\n              <mat-label>{{timeFromLabel ? timeFromLabel : 'From'}}</mat-label>\n              <mat-select value=\"{{businessHours[i]['from']}}\" formControlName=\"from\">\n                <mat-option *ngFor=\"let timeOption of timeOptions\" [value]=\"timeOption\">{{timeOption}}</mat-option>\n              </mat-select>\n            </mat-form-field>\n          </div>\n          <div class=\"operation-time__input\">\n            <mat-form-field [ngClass]=\"!businessHours[i]['open'] ? 'invisible' : ''\">\n              <mat-label>{{timeToLabel ? timeToLabel : 'To'}}</mat-label>\n              <mat-select value=\"{{businessHours[i]['to']}}\" formControlName=\"to\">\n                <mat-option *ngFor=\"let timeOption of timeOptions\" [value]=\"timeOption\">{{timeOption}}</mat-option>\n              </mat-select>\n            </mat-form-field>\n          </div>\n          <mat-error *ngIf=\"form.get(i.toString())?.hasError('timeToMustBeGreaterThenTimeFrom')\" class=\"text-small-error\">\n            {{validationErrorMessage ? validationErrorMessage : 'The \"From\" must be earlier than the \"To\"'}}\n          </mat-error>\n        </div>\n      </div>\n    </div>\n  </div>\n</form>\n",
                providers: [
                    {
                        provide: NG_VALUE_ACCESSOR,
                        multi: true,
                        useExisting: forwardRef(() => NgBusinessHoursComponent),
                    },
                    {
                        provide: NG_VALIDATORS,
                        multi: true,
                        useExisting: forwardRef(() => NgBusinessHoursComponent),
                    }
                ],
                styles: [".business-hours__left{width:70px}.business-hours__right{width:calc(100% - 70px)}.business-hours--disabled{color:rgba(0,0,0,.38)}.day{clear:both;width:100%;display:flex}.day__box{height:2rem;border:1px solid #888;border-radius:5px;float:right;width:2rem;cursor:pointer;margin-top:.25rem}.day__box--open{border:1px solid #56e399;background-color:#56e399}.day__box--closed{border:1px solid #ced4da;background-color:#ced4da}.day__weekday{margin-top:.7rem;float:left}.operation-time{float:left;width:100%}.operation-time__input{margin-left:1rem;float:left;width:calc(50% - 1rem)}.invisible{visibility:hidden!important}::ng-deep .mat-form-field,::ng-deep .mat-form-field-infix{width:100%}::ng-deep .mat-form-field-wrapper{padding:0}.text-small-error{margin-top:-.75rem;margin-left:1rem;display:block;float:left;font-size:.65rem}.business-hours--disabled .day__box{opacity:.7;cursor:auto}"]
            },] }
];
NgBusinessHoursComponent.ctorParameters = () => [
    { type: LocalizedDatePipe },
    { type: FormBuilder }
];
NgBusinessHoursComponent.propDecorators = {
    timeFromLabel: [{ type: Input }],
    timeToLabel: [{ type: Input }],
    validationErrorMessage: [{ type: Input }],
    timeFrom: [{ type: Input }],
    timeTo: [{ type: Input }],
    isoWeek: [{ type: Input }]
};

class NgBusinessHoursModule {
}
NgBusinessHoursModule.decorators = [
    { type: NgModule, args: [{
                declarations: [
                    NgBusinessHoursComponent,
                    LocalizedDatePipe
                ],
                imports: [
                    CommonModule,
                    BrowserAnimationsModule,
                    ReactiveFormsModule,
                    MatFormFieldModule,
                    MatSelectModule,
                ],
                exports: [
                    NgBusinessHoursComponent,
                ],
                providers: [
                    LocalizedDatePipe,
                    NgBusinessHoursLocaleService,
                ]
            },] }
];

/*
 * Public API Surface of ng-business-hours
 */

/**
 * Generated bundle index. Do not edit.
 */

export { NgBusinessHoursComponent, NgBusinessHoursLocaleService, NgBusinessHoursModule, LocalizedDatePipe as ɵa };
//# sourceMappingURL=ng-business-hours.js.map