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

Angular component allows you to show and manage business hours

!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(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")):"function"==typeof define&&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"],t):t((e="undefined"!=typeof globalThis?globalThis:e||self)["ng-business-hours"]={},e.ng.core,e.ng.forms,e.moment,e.ng.common,e.ng.material.select,e.ng.material.formField,e.ng.platformBrowser.animations)}(this,(function(e,t,o,i,r,s,n,a){"use strict";function l(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var u=l(i),m=function(){function e(e){this.locale=e,this.currentLocale=e}return e.prototype.getCurrentLocale=function(){return this.currentLocale},e.prototype.setCurrentLocale=function(e){this.currentLocale=e},e}();m.decorators=[{type:t.Injectable}],m.ctorParameters=function(){return[{type:String,decorators:[{type:t.Inject,args:[t.LOCALE_ID]}]}]};var d=function(){function e(e){this.localeService=e}return e.prototype.transform=function(e,t){return void 0===t&&(t="E"),r.formatDate(e,t,this.localeService.getCurrentLocale())},e}();function f(e){var t,o,i,r,s,n,a;return(null===(t=e.get("open"))||void 0===t?void 0:t.value)?u.default(null===(o=e.get("from"))||void 0===o?void 0:o.value,"HH:mm")<u.default(null===(i=e.get("to"))||void 0===i?void 0:i.value,"HH:mm")?(null===(r=e.get("from"))||void 0===r||r.setErrors(null),null===(s=e.get("to"))||void 0===s||s.setErrors(null),null):(null===(n=e.get("from"))||void 0===n||n.setErrors({timeToMustBeGreaterThenTimeFrom:!0}),null===(a=e.get("to"))||void 0===a||a.setErrors({timeToMustBeGreaterThenTimeFrom:!0}),{timeToMustBeGreaterThenTimeFrom:!0}):null}d.decorators=[{type:t.Pipe,args:[{name:"localizedDate",pure:!1}]}],d.ctorParameters=function(){return[{type:m}]};var p=function(){function e(e,t){var o=this;this.localizedDatePipe=e,this.fb=t,this.timeFrom="09:00",this.timeTo="18:00",this.isoWeek=!0,this.val="",this.disabled=!1,this.startTime="00:00",this.maxTime="24:00",this.interval=15,this.timeFormat="HH:mm",this.defaultBusinessHours=[{open:!0,from:this.timeFrom,to:this.timeTo},{open:!0,from:this.timeFrom,to:this.timeTo},{open:!0,from:this.timeFrom,to:this.timeTo},{open:!0,from:this.timeFrom,to:this.timeTo},{open:!0,from:this.timeFrom,to:this.timeTo},{open:!1,from:"",to:""},{open:!1,from:"",to:""}],this.onChange=function(e){var t=Object.values(e);o.onValuesChange(t)},this.onValuesChange=function(e){},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()}return e.prototype.ngOnInit=function(){this.formValueChangesSubscription=this.form.valueChanges.subscribe(this.onChange)},e.prototype.registerOnChange=function(e){this.onValuesChange=e},e.prototype.registerOnTouched=function(e){this.onTouched=e},e.prototype.setDisabledState=function(e){this.disabled=e,e?this.form.disable():this.form.enable()},e.prototype.writeValue=function(e){if(e&&e.length>0){var t=Object.assign({},e);this.businessHours=t,this.form.setValue(t,{emitEvent:!1})}else this.form.setValue(this.defaultBusinessHours,{emitEvent:!0})},e.prototype.validate=function(e){return this.form.valid?null:{businessHoursInvalid:!0}},e.prototype.onChangeOperationState=function(e){var t,o,i,r,s,n,a,l,u,m;this.disabled||(this.businessHours[e].open=!this.businessHours[e].open,null===(o=null===(t=this.form.get(String(e)))||void 0===t?void 0:t.get("open"))||void 0===o||o.setValue(this.businessHours[e].open),this.businessHours[e].open?(null===(r=null===(i=this.form.get(String(e)))||void 0===i?void 0:i.get("from"))||void 0===r||r.setValue(this.timeFrom),null===(n=null===(s=this.form.get(String(e)))||void 0===s?void 0:s.get("to"))||void 0===n||n.setValue(this.timeTo)):(null===(l=null===(a=this.form.get(String(e)))||void 0===a?void 0:a.get("from"))||void 0===l||l.setValue(""),null===(m=null===(u=this.form.get(String(e)))||void 0===u?void 0:u.get("to"))||void 0===m||m.setValue("")))},e.prototype.getDateForWeekDay=function(e){return u.default().startOf(this.isoWeek?"isoWeek":"week").add(e,"day").toDate()},e.prototype.initForm=function(){var e,t=this;this.form=this.fb.group({}),this.weekdays.forEach((function(o,i){e=t.fb.group({open:[{value:t.businessHours[i].open,disabled:t.disabled}],from:[{value:t.businessHours[i].from,disabled:t.disabled}],to:[{value:t.businessHours[i].to,disabled:t.disabled}]},{validators:f}),t.form.addControl(String(i),e)}))},e.prototype.getTimeOptions=function(e,t,o){for(var i=u.default(e,"HH:mm"),r=u.default(t,"HH:mm"),s=[];i<=r;)s.push(u.default(i).format(this.timeFormat)),i.add(o,"minutes");return s},e.prototype.ngOnDestroy=function(){this.formValueChangesSubscription.unsubscribe()},e}();p.decorators=[{type:t.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:o.NG_VALUE_ACCESSOR,multi:!0,useExisting:t.forwardRef((function(){return p}))},{provide:o.NG_VALIDATORS,multi:!0,useExisting:t.forwardRef((function(){return p}))}],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}"]}]}],p.ctorParameters=function(){return[{type:d},{type:o.FormBuilder}]},p.propDecorators={timeFromLabel:[{type:t.Input}],timeToLabel:[{type:t.Input}],validationErrorMessage:[{type:t.Input}],timeFrom:[{type:t.Input}],timeTo:[{type:t.Input}],isoWeek:[{type:t.Input}]};var c=function(){};c.decorators=[{type:t.NgModule,args:[{declarations:[p,d],imports:[r.CommonModule,a.BrowserAnimationsModule,o.ReactiveFormsModule,n.MatFormFieldModule,s.MatSelectModule],exports:[p],providers:[d,m]}]}],e.NgBusinessHoursComponent=p,e.NgBusinessHoursLocaleService=m,e.NgBusinessHoursModule=c,e.ɵa=d,Object.defineProperty(e,"__esModule",{value:!0})}));
//# sourceMappingURL=ng-business-hours.umd.min.js.map