ng-business-hours/bundles/ng-business-hours.umd.js

Angular component allows you to show and manage business hours

(function (global, factory) {
    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('@angular/forms'), require('moment'), require('@angular/common'), require('@angular/material/select'), require('@angular/material/form-field'), require('@angular/platform-browser/animations')) :
    typeof define === 'function' && define.amd ? define('ng-business-hours', ['exports', '@angular/core', '@angular/forms', 'moment', '@angular/common', '@angular/material/select', '@angular/material/form-field', '@angular/platform-browser/animations'], factory) :
    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global['ng-business-hours'] = {}, global.ng.core, global.ng.forms, global.moment, global.ng.common, global.ng.material.select, global.ng.material.formField, global.ng.platformBrowser.animations));
}(this, (function (exports, core, forms, moment, common, select, formField, animations) { 'use strict';

    function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }

    var moment__default = /*#__PURE__*/_interopDefaultLegacy(moment);

    var NgBusinessHoursLocaleService = /** @class */ (function () {
        function NgBusinessHoursLocaleService(locale) {
            this.locale = locale;
            this.currentLocale = locale;
        }
        NgBusinessHoursLocaleService.prototype.getCurrentLocale = function () {
            return this.currentLocale;
        };
        NgBusinessHoursLocaleService.prototype.setCurrentLocale = function (value) {
            this.currentLocale = value;
        };
        return NgBusinessHoursLocaleService;
    }());
    NgBusinessHoursLocaleService.decorators = [
        { type: core.Injectable }
    ];
    NgBusinessHoursLocaleService.ctorParameters = function () { return [
        { type: String, decorators: [{ type: core.Inject, args: [core.LOCALE_ID,] }] }
    ]; };

    var LocalizedDatePipe = /** @class */ (function () {
        function LocalizedDatePipe(localeService) {
            this.localeService = localeService;
        }
        LocalizedDatePipe.prototype.transform = function (value, pattern) {
            if (pattern === void 0) { pattern = 'E'; }
            return common.formatDate(value, pattern, this.localeService.getCurrentLocale());
        };
        return LocalizedDatePipe;
    }());
    LocalizedDatePipe.decorators = [
        { type: core.Pipe, args: [{
                    name: 'localizedDate',
                    pure: false
                },] }
    ];
    LocalizedDatePipe.ctorParameters = function () { return [
        { type: NgBusinessHoursLocaleService }
    ]; };

    function daySettingsValidator(group) {
        var _a, _b, _c, _d, _e, _f, _g;
        var isOpen = (_a = group.get('open')) === null || _a === void 0 ? void 0 : _a.value;
        if (!isOpen) {
            return null;
        }
        var timeFrom = moment__default['default']((_b = group.get('from')) === null || _b === void 0 ? void 0 : _b.value, 'HH:mm');
        var timeTo = moment__default['default']((_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 };
    }

    var NgBusinessHoursComponent = /** @class */ (function () {
        function NgBusinessHoursComponent(localizedDatePipe, fb) {
            var _this = this;
            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 = function (obj) {
                var values = Object.values(obj);
                _this.onValuesChange(values);
            };
            this.onValuesChange = function (value) { };
            this.onTouched = function () { };
            this.weekdays = Array.from(Array(7).keys());
            this.timeOptions = this.getTimeOptions(this.startTime, this.maxTime, this.interval);
            this.businessHours = this.defaultBusinessHours;
            this.initForm();
        }
        NgBusinessHoursComponent.prototype.ngOnInit = function () {
            this.formValueChangesSubscription = this.form.valueChanges.subscribe(this.onChange);
        };
        NgBusinessHoursComponent.prototype.registerOnChange = function (fn) {
            this.onValuesChange = fn;
        };
        NgBusinessHoursComponent.prototype.registerOnTouched = function (fn) {
            this.onTouched = fn;
        };
        NgBusinessHoursComponent.prototype.setDisabledState = function (isDisabled) {
            this.disabled = isDisabled;
            if (isDisabled) {
                this.form.disable();
            }
            else {
                this.form.enable();
            }
        };
        NgBusinessHoursComponent.prototype.writeValue = function (obj) {
            if (obj && obj.length > 0) {
                var values = Object.assign({}, obj);
                this.businessHours = values;
                this.form.setValue(values, { emitEvent: false });
            }
            else {
                this.form.setValue(this.defaultBusinessHours, { emitEvent: true });
            }
        };
        NgBusinessHoursComponent.prototype.validate = function (control) {
            if (this.form.valid) {
                return null;
            }
            return { businessHoursInvalid: true };
        };
        NgBusinessHoursComponent.prototype.onChangeOperationState = function (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('');
            }
        };
        NgBusinessHoursComponent.prototype.getDateForWeekDay = function (num) {
            return moment__default['default']().startOf(this.isoWeek ? 'isoWeek' : 'week').add(num, 'day').toDate();
        };
        NgBusinessHoursComponent.prototype.initForm = function () {
            var _this = this;
            this.form = this.fb.group({});
            var fg;
            this.weekdays.forEach(function (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);
            });
        };
        NgBusinessHoursComponent.prototype.getTimeOptions = function (startTime, maxTime, interval) {
            var start = moment__default['default'](startTime, 'HH:mm');
            var max = moment__default['default'](maxTime, 'HH:mm');
            var timeOptions = [];
            while (start <= max) {
                timeOptions.push(moment__default['default'](start).format(this.timeFormat));
                start.add(interval, 'minutes');
            }
            return timeOptions;
        };
        NgBusinessHoursComponent.prototype.ngOnDestroy = function () {
            this.formValueChangesSubscription.unsubscribe();
        };
        return NgBusinessHoursComponent;
    }());
    NgBusinessHoursComponent.decorators = [
        { type: core.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: forms.NG_VALUE_ACCESSOR,
                            multi: true,
                            useExisting: core.forwardRef(function () { return NgBusinessHoursComponent; }),
                        },
                        {
                            provide: forms.NG_VALIDATORS,
                            multi: true,
                            useExisting: core.forwardRef(function () { return 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 = function () { return [
        { type: LocalizedDatePipe },
        { type: forms.FormBuilder }
    ]; };
    NgBusinessHoursComponent.propDecorators = {
        timeFromLabel: [{ type: core.Input }],
        timeToLabel: [{ type: core.Input }],
        validationErrorMessage: [{ type: core.Input }],
        timeFrom: [{ type: core.Input }],
        timeTo: [{ type: core.Input }],
        isoWeek: [{ type: core.Input }]
    };

    var NgBusinessHoursModule = /** @class */ (function () {
        function NgBusinessHoursModule() {
        }
        return NgBusinessHoursModule;
    }());
    NgBusinessHoursModule.decorators = [
        { type: core.NgModule, args: [{
                    declarations: [
                        NgBusinessHoursComponent,
                        LocalizedDatePipe
                    ],
                    imports: [
                        common.CommonModule,
                        animations.BrowserAnimationsModule,
                        forms.ReactiveFormsModule,
                        formField.MatFormFieldModule,
                        select.MatSelectModule,
                    ],
                    exports: [
                        NgBusinessHoursComponent,
                    ],
                    providers: [
                        LocalizedDatePipe,
                        NgBusinessHoursLocaleService,
                    ]
                },] }
    ];

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

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

    exports.NgBusinessHoursComponent = NgBusinessHoursComponent;
    exports.NgBusinessHoursLocaleService = NgBusinessHoursLocaleService;
    exports.NgBusinessHoursModule = NgBusinessHoursModule;
    exports.ɵa = LocalizedDatePipe;

    Object.defineProperty(exports, '__esModule', { value: true });

})));
//# sourceMappingURL=ng-business-hours.umd.js.map