bl-schedule/bl-schedule.metadata.json

To install this library, run:

{"__symbolic":"module","version":4,"metadata":{"ScheduleModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":8,"character":1},"arguments":[{"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule","line":10,"character":4},{"__symbolic":"reference","module":"@angular/forms","name":"FormsModule","line":11,"character":4},{"__symbolic":"reference","module":"bl-dropdown-ng2","name":"DropdownModule","line":12,"character":4}],"declarations":[{"__symbolic":"reference","name":"ScheduleComponent"}],"exports":[{"__symbolic":"reference","name":"ScheduleComponent"}]}]}],"members":{},"statics":{"forRoot":{"__symbolic":"function","parameters":[],"value":{"ngModule":{"__symbolic":"reference","name":"ScheduleModule"},"providers":[]}}}},"ScheduleComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":6,"character":1},"arguments":[{"selector":"schedule-component","template":"<div class=\"modal datepicker-modal open\" tabindex=\"0\" style=\"z-index: 1003; display: block; opacity: 1; top: 10%; transform: scaleX(1) scaleY(1);\"> <div class=\"modal-content datepicker-container\"> <div class=\"datepicker-calendar\"> <fieldset class=\"wrapper wrapper-inline wrapper-days\" [ngStyle]=\"{ 'border-color': options.color }\"> <legend>{{LocalizationData.Translations.MonthDay}}</legend> <div class=\"days\" [ngClass]=\"{'disabled': disabled}\"> <div class=\"day\" *ngFor=\"let dayNum of numbers\"> <div class=\"circle\" [ngClass]=\"isDaySelected(dayNum)\" [ngStyle]=\"setMonthDayStyles(dayNum)\" (click)=\"selectDay($event, dayNum)\">{{dayNum}}</div> </div> </div> </fieldset> </div> <div class=\"datepicker-date-display\"> <fieldset class=\"wrapper wrapper-inline wrapper-weekDays\" [ngStyle]=\"{ 'border-color': options.color }\"> <legend>{{LocalizationData.Translations.WeekDay}}</legend> <div class=\"weekDays\" [ngClass]=\"{'disabled': disabled}\"> <div class=\"weekDay\" [ngClass]=\"isWeekDaySelected(weekDay.id)\" [ngStyle]=\"setWeekDayStyles(weekDay.id)\" (click)=\"selectWeekDay($event, weekDay.id)\" *ngFor=\"let weekDay of days\">{{weekDay.text}}</div> </div> </fieldset> </div> <div class=\"datepicker-data-start-time\" *ngIf=\"options.startTimeDataSource\"> <fieldset class=\"time-wrapper\" [ngStyle]=\"{ 'border-color': options.color }\"> <legend>{{LocalizationData.Translations.StartTime}}</legend> <bl-dropdown-ng2 [disabled]=\"disabled\" name=\"time\" required [(ngModel)]=\"scheduleModel.startTime\" [dataSource]=\"options.startTimeDataSource\" (onSelect)=\"modelOut()\"></bl-dropdown-ng2> </fieldset> </div> </div> <div class=\"schedule-text\">{{scheduleText}}</div> </div>","styles":[".wrapper { position: relative; box-sizing: border-box; } .wrapper .title { width: 100%; margin-top: 0; } .wrapper-days { width: 290px; } .wrapper-days .title { padding-left: 15px; } .wrapper-weekDays { width: 78px; } .wrapper-inline { display: inline-block; } .days { display: flex; flex-wrap: wrap; justify-content: flex-start; width: 100%; } .days .day { width: 14.285714285714286%; position: relative; margin-bottom: 10px; cursor: pointer; } .days .day .circle { width: 35px; height: 30px; line-height: 30px; border-radius: 3px; margin: 0 auto; text-align: center; } .days.disabled { pointer-events: none; } .days .day .selected { background-color: #687776; color: white; } input { width: 100%; background: transparent; padding-bottom: 6px; border-bottom-width: 1px; border-bottom-color: #e7e7e7; border-bottom-style: solid; width: 120px; border: none; padding: 6px 0; margin-bottom: 10px; border-bottom: 1px solid white; } input:focus { outline: none; } input[type=date]::-webkit-inner-spin-button { -webkit-appearance: none; display: none; } input[type=date]::-webkit-calendar-picker-indicator { color: white; } input[type=date]::-webkit-calendar-picker-indicator:hover { background: transparent; } ::placeholder { color: white; opacity: 1; /* Firefox */ } :-ms-input-placeholder { /* Internet Explorer 10-11 */ color: white; } ::-ms-input-placeholder { /* Microsoft Edge */ color: white; } input[type=date]::-webkit-datetime-edit { color: white; } .weekDays { display: flex; flex-direction: column; justify-content: flex-start; align-content: flex-end; width: 100%; text-align: center; } .weekDays .weekDay { padding: 3px; margin: 2px 0; cursor: pointer; border-radius: 3px; } .weekDays.disabled { pointer-events: none; } .weekDays .weekDay.selected { background-color: #687776; color: white; } .datepicker-date-display { padding: 10px; font-weight: 500; } .datepicker-calendar-container { width: 335px; } .datepicker-calendar { padding: 10px; } .datepicker-container.modal-content { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; padding: 0; } .modal { display: none; position: relative; padding: 0; border-radius: 2px; } .schedule-text { padding: 0 15px; width: 390px; } .modal:focus { outline: none; } .datepicker-data-start-time { padding: 10px; } .datepicker-data-start-time select { width: 100%; } fieldset { border: 1.5px solid; padding: 8px; border-style: solid; border-radius: 3px; } fieldset { border: 1px solid #dddde4; border-color: #dddde4; height: 100%; box-sizing: border-box; } fieldset legend { padding: 0 5px; } .wrapper-days { width: 314px; } input { border: none; } .time-wrapper { width: 90px; }"]}]}],"members":{"options":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":13,"character":3},"arguments":["options"]}]}],"schedule":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":15,"character":3}}]}],"scheduleChange":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":16,"character":3}}]}],"disabled":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":18,"character":3}}]}],"__ctor__":[{"__symbolic":"constructor"}],"ngOnInit":[{"__symbolic":"method"}],"ngOnChanges":[{"__symbolic":"method"}],"initializeScheduleModel":[{"__symbolic":"method"}],"setScheduleText":[{"__symbolic":"method"}],"selectDay":[{"__symbolic":"method"}],"selectWeekDay":[{"__symbolic":"method"}],"modelOut":[{"__symbolic":"method"}],"isDaySelected":[{"__symbolic":"method"}],"isWeekDaySelected":[{"__symbolic":"method"}],"setMonthDayStyles":[{"__symbolic":"method"}],"setWeekDayStyles":[{"__symbolic":"method"}]}}},"origins":{"ScheduleModule":"./index","ScheduleComponent":"./schedule.component"},"importAs":"bl-schedule"}