ng-business-hours/ng-business-hours.metadata.json

Angular component allows you to show and manage business hours

{"__symbolic":"module","version":4,"metadata":{"NgBusinessHoursDaySettings":{"__symbolic":"interface"},"NgBusinessHoursComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":17,"character":1},"arguments":[{"selector":"ng-business-hours","providers":[{"provide":{"__symbolic":"reference","module":"@angular/forms","name":"NG_VALUE_ACCESSOR","line":23,"character":15},"multi":true,"useExisting":{"__symbolic":"reference","name":"NgBusinessHoursComponent"}},{"provide":{"__symbolic":"reference","module":"@angular/forms","name":"NG_VALIDATORS","line":28,"character":15},"multi":true,"useExisting":{"__symbolic":"reference","name":"NgBusinessHoursComponent"}}],"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","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}"]}]}],"members":{"timeFromLabel":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":35,"character":3}}]}],"timeToLabel":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":36,"character":3}}]}],"validationErrorMessage":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":37,"character":3}}]}],"timeFrom":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":38,"character":3}}]}],"timeTo":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":39,"character":3}}]}],"isoWeek":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":40,"character":3}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","name":"ɵa"},{"__symbolic":"reference","module":"@angular/forms","name":"FormBuilder","line":72,"character":72}]}],"ngOnInit":[{"__symbolic":"method"}],"registerOnChange":[{"__symbolic":"method"}],"registerOnTouched":[{"__symbolic":"method"}],"setDisabledState":[{"__symbolic":"method"}],"writeValue":[{"__symbolic":"method"}],"validate":[{"__symbolic":"method"}],"onChangeOperationState":[{"__symbolic":"method"}],"getDateForWeekDay":[{"__symbolic":"method"}],"initForm":[{"__symbolic":"method"}],"getTimeOptions":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}]}},"NgBusinessHoursLocaleService":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Injectable","line":2,"character":1}}],"members":{"__ctor__":[{"__symbolic":"constructor","parameterDecorators":[[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Inject","line":6,"character":15},"arguments":[{"__symbolic":"reference","module":"@angular/core","name":"LOCALE_ID","line":6,"character":22}]}]],"parameters":[{"__symbolic":"reference","name":"string"}]}],"getCurrentLocale":[{"__symbolic":"method"}],"setCurrentLocale":[{"__symbolic":"method"}]}},"NgBusinessHoursModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":10,"character":1},"arguments":[{"declarations":[{"__symbolic":"reference","name":"NgBusinessHoursComponent"},{"__symbolic":"reference","name":"ɵa"}],"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule","line":16,"character":4},{"__symbolic":"reference","module":"@angular/platform-browser/animations","name":"BrowserAnimationsModule","line":17,"character":4},{"__symbolic":"reference","module":"@angular/forms","name":"ReactiveFormsModule","line":18,"character":4},{"__symbolic":"reference","module":"@angular/material/form-field","name":"MatFormFieldModule","line":19,"character":4},{"__symbolic":"reference","module":"@angular/material/select","name":"MatSelectModule","line":20,"character":4}],"exports":[{"__symbolic":"reference","name":"NgBusinessHoursComponent"}],"providers":[{"__symbolic":"reference","name":"ɵa"},{"__symbolic":"reference","name":"NgBusinessHoursLocaleService"}]}]}],"members":{}},"ɵa":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Pipe","line":4,"character":1},"arguments":[{"name":"localizedDate","pure":false}]}],"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","name":"NgBusinessHoursLocaleService"}]}],"transform":[{"__symbolic":"method"}]}}},"origins":{"NgBusinessHoursDaySettings":"./lib/ng-business-hours-day-settings.model","NgBusinessHoursComponent":"./lib/ng-business-hours.component","NgBusinessHoursLocaleService":"./lib/ng-business-hours-locale.service","NgBusinessHoursModule":"./lib/ng-business-hours.module","ɵa":"./lib/localized-date.pipe"},"importAs":"ng-business-hours"}