bl-schedule
Version:
To install this library, run:
362 lines (354 loc) • 16.2 kB
JavaScript
(function (global, factory) {
typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('@angular/common'), require('@angular/forms'), require('bl-dropdown-ng2')) :
typeof define === 'function' && define.amd ? define(['exports', '@angular/core', '@angular/common', '@angular/forms', 'bl-dropdown-ng2'], factory) :
(factory((global['bl-schedule'] = {}),global.core,global.common,global.forms,global.blDropdownNg2));
}(this, (function (exports,core,common,forms,blDropdownNg2) { 'use strict';
/**
* @fileoverview added by tsickle
* @suppress {checkTypes} checked by tsc
*/
var Localization = (function () {
function Localization() {
}
/**
* @param {?} lang
* @return {?}
*/
Localization.Get = /**
* @param {?} lang
* @return {?}
*/
function (lang) {
var /** @type {?} */ data = this.loc[lang];
return data;
};
Localization.loc = {
'ka-GE': {
"Days": [
{ id: 1, text: "ორშაბათი" },
{ id: 2, text: "სამშაბათი" },
{ id: 3, text: "ოთხშაბათი" },
{ id: 4, text: "ხუთშაბათი" },
{ id: 5, text: "პარასკევი" },
{ id: 6, text: "შაბათი" },
{ id: 0, text: "კვირა" }
],
"DaysMin": [
{ id: 1, text: "ორშ" },
{ id: 2, text: "სამ" },
{ id: 3, text: "ოთხ" },
{ id: 4, text: "ხუთ" },
{ id: 5, text: "პარ" },
{ id: 6, text: "შაბ" },
{ id: 0, text: "კვი" }
],
"Translations": {
"WeekDay": "დღე",
"MonthDay": "რიცხვი",
"StartTime": "დრო",
"Day": "დღე",
"OccursEvery": "გაეშვება ყოველ",
"WeekOn": "კვირას",
"MonthOn": "თვეს",
"OClock": "საათზე",
"At": ''
}
},
'en-US': {
"Days": [
{ id: 1, text: "Monday" },
{ id: 2, text: "Thuesday" },
{ id: 3, text: "Wednesday" },
{ id: 4, text: "Thursday" },
{ id: 5, text: "Friday" },
{ id: 6, text: "Saturday" },
{ id: 0, text: "Sunday" }
],
"DaysMin": [
{ id: 1, text: "Mon" },
{ id: 2, text: "Tue" },
{ id: 3, text: "Wed" },
{ id: 4, text: "Thu" },
{ id: 5, text: "Fri" },
{ id: 6, text: "Sat" },
{ id: 0, text: "Sun" }
],
"Translations": {
"WeekDay": "Week",
"MonthDay": "Month",
"StartTime": "Time",
"Day": "Day",
"OccursEvery": "Occures Every",
"WeekOn": "Week On",
"MonthOn": "Month On",
"OClock": "O'Clock",
"At": 'at'
}
}
};
return Localization;
}());
/**
* @fileoverview added by tsickle
* @suppress {checkTypes} checked by tsc
*/
var Schedule = (function () {
function Schedule() {
this.weekDays = [], this.monthDays = [];
}
return Schedule;
}());
/**
* @fileoverview added by tsickle
* @suppress {checkTypes} checked by tsc
*/
var ScheduleComponent = (function () {
function ScheduleComponent() {
this.scheduleChange = new core.EventEmitter();
}
/**
* @return {?}
*/
ScheduleComponent.prototype.ngOnInit = /**
* @return {?}
*/
function () {
this.options.language = this.options.language || "en-US";
this.LocalizationData = Localization.Get(this.options.language);
this.scheduleModel = new Schedule();
this.initializeScheduleModel();
this.days = this.LocalizationData.DaysMin;
this.numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30, 31];
};
/**
* @return {?}
*/
ScheduleComponent.prototype.ngOnChanges = /**
* @return {?}
*/
function () {
this.initializeScheduleModel();
};
/**
* @return {?}
*/
ScheduleComponent.prototype.initializeScheduleModel = /**
* @return {?}
*/
function () {
if (this.schedule) {
this.scheduleModel = new Schedule();
var /** @type {?} */ parsed = JSON.parse(this.schedule);
this.scheduleModel.monthDays = parsed.monthDays;
this.scheduleModel.startTime = parsed.startTime;
this.scheduleModel.weekDays = parsed.weekDays;
this.setScheduleText();
}
};
/**
* @return {?}
*/
ScheduleComponent.prototype.setScheduleText = /**
* @return {?}
*/
function () {
var /** @type {?} */ localization = this.LocalizationData;
var /** @type {?} */ text = localization.Translations.OccursEvery + " ";
var /** @type {?} */ i = 0;
if (this.scheduleModel.weekDays.length > 0) {
i++;
text += "" + localization.Translations.WeekOn;
this.scheduleModel.weekDays.forEach(function (weekDay) {
text += " " + localization.Days.find(function (x) { return x.id == weekDay; }).text + ", ";
});
text = text.substring(0, text.length - 2);
}
if (this.scheduleModel.monthDays.length > 0) {
i++;
text += (this.scheduleModel.weekDays.length > 0 ? ',' : '') + " " + localization.Translations.MonthOn;
this.scheduleModel.monthDays.forEach(function (day) {
text += " " + day + ", ";
});
text = text.substring(0, text.length - 2);
}
if (i == 0) {
text += localization.Translations.Day;
}
if (this.scheduleModel.startTime) {
text += " " + localization.Translations.At + " " + this.scheduleModel.startTime + " " + localization.Translations.OClock;
}
this.scheduleText = text;
};
/**
* @param {?} event
* @param {?} day
* @return {?}
*/
ScheduleComponent.prototype.selectDay = /**
* @param {?} event
* @param {?} day
* @return {?}
*/
function (event, day) {
var /** @type {?} */ target = event.srcElement;
target.classList.toggle('selected');
var /** @type {?} */ dayIndex = this.scheduleModel.monthDays.indexOf(day);
if (dayIndex > -1) {
this.scheduleModel.monthDays.splice(dayIndex, 1);
}
else {
this.scheduleModel.monthDays.push(day);
}
this.modelOut();
};
/**
* @param {?} event
* @param {?} index
* @return {?}
*/
ScheduleComponent.prototype.selectWeekDay = /**
* @param {?} event
* @param {?} index
* @return {?}
*/
function (event, index) {
var /** @type {?} */ target = event.srcElement;
target.classList.toggle('selected');
var /** @type {?} */ dayIndex = this.scheduleModel.weekDays.indexOf(index);
if (dayIndex > -1) {
this.scheduleModel.weekDays.splice(dayIndex, 1);
}
else {
this.scheduleModel.weekDays.push(index);
}
this.modelOut();
};
/**
* @return {?}
*/
ScheduleComponent.prototype.modelOut = /**
* @return {?}
*/
function () {
var /** @type {?} */ sortFunction = function (a, b) { return a - b; };
this.scheduleModel.monthDays.sort(sortFunction);
this.scheduleModel.weekDays.sort(sortFunction);
this.setScheduleText();
this.schedule = JSON.stringify(this.scheduleModel);
this.scheduleChange.emit(this.schedule);
};
/**
* @param {?} day
* @return {?}
*/
ScheduleComponent.prototype.isDaySelected = /**
* @param {?} day
* @return {?}
*/
function (day) {
if (this.scheduleModel.monthDays != undefined || this.scheduleModel.monthDays.length != 0) {
return this.scheduleModel.monthDays.indexOf(day) > -1 ? 'selected' : '';
}
else {
return '';
}
};
/**
* @param {?} weekDay
* @return {?}
*/
ScheduleComponent.prototype.isWeekDaySelected = /**
* @param {?} weekDay
* @return {?}
*/
function (weekDay) {
if (this.scheduleModel.weekDays != undefined || this.scheduleModel.weekDays.length != 0) {
return this.scheduleModel.weekDays.indexOf(weekDay) > -1 ? 'selected' : '';
}
else {
return '';
}
};
/**
* @param {?} day
* @return {?}
*/
ScheduleComponent.prototype.setMonthDayStyles = /**
* @param {?} day
* @return {?}
*/
function (day) {
return {
'background-color': this.isDaySelected(day) ? this.options.highlightColor : 'transparent'
};
};
/**
* @param {?} day
* @return {?}
*/
ScheduleComponent.prototype.setWeekDayStyles = /**
* @param {?} day
* @return {?}
*/
function (day) {
return {
'background-color': this.isWeekDaySelected(day) ? this.options.highlightColor : 'transparent'
};
};
ScheduleComponent.decorators = [
{ type: core.Component, args: [{
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; }"]
},] },
];
/** @nocollapse */
ScheduleComponent.ctorParameters = function () { return []; };
ScheduleComponent.propDecorators = {
"options": [{ type: core.Input, args: ["options",] },],
"schedule": [{ type: core.Input },],
"scheduleChange": [{ type: core.Output },],
"disabled": [{ type: core.Input },],
};
return ScheduleComponent;
}());
/**
* @fileoverview added by tsickle
* @suppress {checkTypes} checked by tsc
*/
var ScheduleModule = (function () {
function ScheduleModule() {
}
/**
* @return {?}
*/
ScheduleModule.forRoot = /**
* @return {?}
*/
function () {
return {
ngModule: ScheduleModule,
providers: []
};
};
ScheduleModule.decorators = [
{ type: core.NgModule, args: [{
imports: [
common.CommonModule,
forms.FormsModule,
blDropdownNg2.DropdownModule
],
declarations: [
ScheduleComponent
],
exports: [
ScheduleComponent
]
},] },
];
return ScheduleModule;
}());
exports.ScheduleModule = ScheduleModule;
exports.ScheduleComponent = ScheduleComponent;
Object.defineProperty(exports, '__esModule', { value: true });
})));