zmz-calendar - npm Package Compare versions

Comparing version 0.3.0 to 0.4.0

lib/components/calendar/calendar.component.d.ts

@@ -5,3 +5,3 @@ /// <reference types="moment" />
 import { CalendarMonthComponent } from '../month/calendar-month.component';
-import { CalendarConfig, State, NavigationStrategy } from '../../types';
+import { CalendarConfig, State, NavigationStrategy, Theme } from '../../types';
 import { CalendarState } from '../../services';
@@ -29,2 +29,3 @@ export declare class CalendarComponent implements OnInit {
     };
+    theme: Theme;
     ngOnInit(): void;
@@ -31,0 +32,0 @@ canGoNext(): boolean;

lib/components/calendar/calendar.component.js

@@ -25,9 +25,10 @@ "use strict";
         var _this = this;
-        var _a = this.config || {}, _b = _a.locale, locale = _b === void 0 ? 'es' : _b, 
+        var _a = this.config || {}, _b = _a.theme, theme = _b === void 0 ? 'form' : _b, _c = _a.locale, locale = _c === void 0 ? 'es' : _c, 
         // weekdays, complete month and nav strategy clickable defaults to false
-        _c = _a.weekDayClickable, 
+        _d = _a.weekDayClickable, 
         // weekdays, complete month and nav strategy clickable defaults to false
-        weekDayClickable = _c === void 0 ? false : _c, _d = _a.completeMonths, completeMonths = _d === void 0 ? false : _d, _e = _a.navigationStrategy, navigationStrategy = _e === void 0 ? false : _e, _f = _a.navigationState, navigationState = _f === void 0 ? services_1.STATES.AVAILABLE : _f, _g = _a.validRange, validRange = _g === void 0 ? {} : _g;
+        weekDayClickable = _d === void 0 ? false : _d, _e = _a.completeMonths, completeMonths = _e === void 0 ? false : _e, _f = _a.navigationStrategy, navigationStrategy = _f === void 0 ? false : _f, _g = _a.navigationState, navigationState = _g === void 0 ? services_1.STATES.AVAILABLE : _g, _h = _a.validRange, validRange = _h === void 0 ? {} : _h;
         // Set locale
         moment.locale(locale);
+        this.theme = theme;
         this.weekDayClickable = weekDayClickable;
@@ -151,4 +152,4 @@ this.completeMonth = completeMonths;
         selector: 'zmz-calendar',
-        template: "\n    <div class=\"calendar-nav\">\n      <div class=\"nav-btn\" [ngClass]=\"{disabled: !canGoPrev()}\" (click)=\"onPrev()\">\n        <div class=\"icon icon-left-arrow\"></div>\n      </div>\n      <div> {{ monthName }} {{ year }} </div>\n      <div class=\"nav-btn\" [ngClass]=\"{disabled: !canGoNext()}\" (click)=\"onNext()\">\n        <div class=\"icon icon-right-arrow\"></div>\n      </div>\n    </div>\n    <zmz-calendar-week-days (weekday)=\"onWeekDaySelected($event)\" [clickable]=\"weekDayClickable\"></zmz-calendar-week-days>\n    <zmz-calendar-month [(year)]=\"year\" [(month)]=\"month\" [stateFn]=\"stateFn\" (dateSelected)=\"onDateSelected($event)\"></zmz-calendar-month>\n  ",
-        styles: ["\n    .calendar-nav {\n      box-sizing: border-box;\n      display: flex;\n      flex-direction: row;\n      justify-content: space-between;\n      align-items: center;\n      align-content: center;\n      max-width: 100%; }\n\n    .nav-btn {\n      color: #3e99f0;\n      border: 1px solid #3e99f0;\n      border-radius: 5px;\n      box-sizing: border-box;\n      display: flex;\n      flex-direction: row;\n      justify-content: center;\n      align-items: center;\n      align-content: center;\n      max-width: 100%;\n      width: 70px;\n      height: 34px;\n      cursor: pointer; }\n      .nav-btn.disabled {\n        color: #E5E5E5;\n        border-color: #E5E5E5; }\n\n    .icon {\n      font-size: 30px;\n      box-sizing: border-box;\n      display: flex;\n      flex-direction: row;\n      justify-content: center;\n      align-items: center;\n      align-content: center;\n      max-width: 100%; }\n\n    .icon:before {\n      font-family: 'ZomoZ', sans-serif !important;\n      -moz-osx-font-smoothing: grayscale;\n      -webkit-font-smoothing: antialiased;\n      font-style: normal !important;\n      font-variant: normal !important;\n      font-weight: normal !important;\n      line-height: 1;\n      text-transform: none !important;\n      speak: none; }\n\n    .icon-right-arrow:before {\n      content: '\\66'; }\n\n    .icon-left-arrow:before {\n      content: '\\65'; }\n  "]
+        template: "\n    <div class=\"calendar-nav\" [ngClass]=\"{'calendar-nav-show': theme === 'show'}\">\n      <div class=\"nav-btn\" [ngClass]=\"{disabled: !canGoPrev(), 'nav-btn-form': theme === 'form'}\" (click)=\"onPrev()\">\n        <div class=\"icon\" [ngClass]=\"{'icon-chevron-left': theme === 'show', 'icon-left-arrow': theme === 'form'}\"></div>\n      </div>\n      <div> {{ monthName }} {{ year }} </div>\n      <div class=\"nav-btn\" [ngClass]=\"{disabled: !canGoNext(), 'nav-btn-form': theme === 'form'}\" (click)=\"onNext()\">\n        <div class=\"icon\" [ngClass]=\"{'icon-chevron-right': theme === 'show', 'icon-right-arrow': theme === 'form'}\"></div>\n      </div>\n    </div>\n    <zmz-calendar-week-days (weekday)=\"onWeekDaySelected($event)\" [clickable]=\"weekDayClickable\" [theme]=\"theme\"></zmz-calendar-week-days>\n    <zmz-calendar-month [(year)]=\"year\" [(month)]=\"month\" [stateFn]=\"stateFn\" (dateSelected)=\"onDateSelected($event)\"></zmz-calendar-month>\n  ",
+        styles: ["\n    .calendar-nav {\n      box-sizing: border-box;\n      display: flex;\n      flex-direction: row;\n      justify-content: space-between;\n      align-items: center;\n      align-content: center;\n      max-width: 100%; }\n      .calendar-nav-show {\n        background-color: #e5e5e5; }\n\n    .nav-btn {\n      color: #3e99f0;\n      box-sizing: border-box;\n      display: flex;\n      flex-direction: row;\n      justify-content: center;\n      align-items: center;\n      align-content: center;\n      max-width: 100%;\n      width: 70px;\n      height: 34px;\n      cursor: pointer; }\n      .nav-btn .icon {\n        font-size: 15px; }\n      .nav-btn.disabled {\n        color: #E5E5E5;\n        border-color: #E5E5E5; }\n      .nav-btn-form {\n        border: 1px solid #3e99f0;\n        border-radius: 5px; }\n        .nav-btn-form .icon {\n          font-size: 30px; }\n\n    .icon {\n      box-sizing: border-box;\n      display: flex;\n      flex-direction: row;\n      justify-content: center;\n      align-items: center;\n      align-content: center;\n      max-width: 100%; }\n\n    .icon:before {\n      font-family: 'ZomoZ', sans-serif !important;\n      -moz-osx-font-smoothing: grayscale;\n      -webkit-font-smoothing: antialiased;\n      font-style: normal !important;\n      font-variant: normal !important;\n      font-weight: normal !important;\n      line-height: 1;\n      text-transform: none !important;\n      speak: none; }\n\n    .icon-chevron-right:before {\n      content: '\\6e';\n      font-size: 15px; }\n\n    .icon-chevron-left:before {\n      content: '\\70';\n      font-size: 15px; }\n\n    .icon-right-arrow:before {\n      content: '\\66'; }\n\n    .icon-left-arrow:before {\n      content: '\\65'; }\n  "]
     })
@@ -155,0 +156,0 @@ ], CalendarComponent);

lib/components/calendar/calendar.component.metadata.json

@@ -1,1 +0,1 @@
-[{"__symbolic":"module","version":3,"metadata":{"CalendarComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component"},"arguments":[{"selector":"zmz-calendar","template":"\n    <div class=\"calendar-nav\">\n      <div class=\"nav-btn\" [ngClass]=\"{disabled: !canGoPrev()}\" (click)=\"onPrev()\">\n        <div class=\"icon icon-left-arrow\"></div>\n      </div>\n      <div> {{ monthName }} {{ year }} </div>\n      <div class=\"nav-btn\" [ngClass]=\"{disabled: !canGoNext()}\" (click)=\"onNext()\">\n        <div class=\"icon icon-right-arrow\"></div>\n      </div>\n    </div>\n    <zmz-calendar-week-days (weekday)=\"onWeekDaySelected($event)\" [clickable]=\"weekDayClickable\"></zmz-calendar-week-days>\n    <zmz-calendar-month [(year)]=\"year\" [(month)]=\"month\" [stateFn]=\"stateFn\" (dateSelected)=\"onDateSelected($event)\"></zmz-calendar-month>\n  ","styles":["\n    .calendar-nav {\n      box-sizing: border-box;\n      display: flex;\n      flex-direction: row;\n      justify-content: space-between;\n      align-items: center;\n      align-content: center;\n      max-width: 100%; }\n\n    .nav-btn {\n      color: #3e99f0;\n      border: 1px solid #3e99f0;\n      border-radius: 5px;\n      box-sizing: border-box;\n      display: flex;\n      flex-direction: row;\n      justify-content: center;\n      align-items: center;\n      align-content: center;\n      max-width: 100%;\n      width: 70px;\n      height: 34px;\n      cursor: pointer; }\n      .nav-btn.disabled {\n        color: #E5E5E5;\n        border-color: #E5E5E5; }\n\n    .icon {\n      font-size: 30px;\n      box-sizing: border-box;\n      display: flex;\n      flex-direction: row;\n      justify-content: center;\n      align-items: center;\n      align-content: center;\n      max-width: 100%; }\n\n    .icon:before {\n      font-family: 'ZomoZ', sans-serif !important;\n      -moz-osx-font-smoothing: grayscale;\n      -webkit-font-smoothing: antialiased;\n      font-style: normal !important;\n      font-variant: normal !important;\n      font-weight: normal !important;\n      line-height: 1;\n      text-transform: none !important;\n      speak: none; }\n\n    .icon-right-arrow:before {\n      content: '\\66'; }\n\n    .icon-left-arrow:before {\n      content: '\\65'; }\n  "]}]}],"members":{"config":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"state":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"month":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"year":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"dateSelected":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"weekDaySelected":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"monthChange":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"monthCmp":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild"},"arguments":[{"__symbolic":"reference","module":"../month/calendar-month.component","name":"CalendarMonthComponent"}]}]}],"ngOnInit":[{"__symbolic":"method"}],"canGoNext":[{"__symbolic":"method"}],"canGoPrev":[{"__symbolic":"method"}],"onNext":[{"__symbolic":"method"}],"onPrev":[{"__symbolic":"method"}],"onDateSelected":[{"__symbolic":"method"}],"onWeekDaySelected":[{"__symbolic":"method"}]}}}},{"__symbolic":"module","version":1,"metadata":{"CalendarComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component"},"arguments":[{"selector":"zmz-calendar","template":"\n    <div class=\"calendar-nav\">\n      <div class=\"nav-btn\" [ngClass]=\"{disabled: !canGoPrev()}\" (click)=\"onPrev()\">\n        <div class=\"icon icon-left-arrow\"></div>\n      </div>\n      <div> {{ monthName }} {{ year }} </div>\n      <div class=\"nav-btn\" [ngClass]=\"{disabled: !canGoNext()}\" (click)=\"onNext()\">\n        <div class=\"icon icon-right-arrow\"></div>\n      </div>\n    </div>\n    <zmz-calendar-week-days (weekday)=\"onWeekDaySelected($event)\" [clickable]=\"weekDayClickable\"></zmz-calendar-week-days>\n    <zmz-calendar-month [(year)]=\"year\" [(month)]=\"month\" [stateFn]=\"stateFn\" (dateSelected)=\"onDateSelected($event)\"></zmz-calendar-month>\n  ","styles":["\n    .calendar-nav {\n      box-sizing: border-box;\n      display: flex;\n      flex-direction: row;\n      justify-content: space-between;\n      align-items: center;\n      align-content: center;\n      max-width: 100%; }\n\n    .nav-btn {\n      color: #3e99f0;\n      border: 1px solid #3e99f0;\n      border-radius: 5px;\n      box-sizing: border-box;\n      display: flex;\n      flex-direction: row;\n      justify-content: center;\n      align-items: center;\n      align-content: center;\n      max-width: 100%;\n      width: 70px;\n      height: 34px;\n      cursor: pointer; }\n      .nav-btn.disabled {\n        color: #E5E5E5;\n        border-color: #E5E5E5; }\n\n    .icon {\n      font-size: 30px;\n      box-sizing: border-box;\n      display: flex;\n      flex-direction: row;\n      justify-content: center;\n      align-items: center;\n      align-content: center;\n      max-width: 100%; }\n\n    .icon:before {\n      font-family: 'ZomoZ', sans-serif !important;\n      -moz-osx-font-smoothing: grayscale;\n      -webkit-font-smoothing: antialiased;\n      font-style: normal !important;\n      font-variant: normal !important;\n      font-weight: normal !important;\n      line-height: 1;\n      text-transform: none !important;\n      speak: none; }\n\n    .icon-right-arrow:before {\n      content: '\\66'; }\n\n    .icon-left-arrow:before {\n      content: '\\65'; }\n  "]}]}],"members":{"config":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"state":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"month":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"year":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"dateSelected":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"weekDaySelected":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"monthChange":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"monthCmp":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild"},"arguments":[{"__symbolic":"reference","module":"../month/calendar-month.component","name":"CalendarMonthComponent"}]}]}],"ngOnInit":[{"__symbolic":"method"}],"canGoNext":[{"__symbolic":"method"}],"canGoPrev":[{"__symbolic":"method"}],"onNext":[{"__symbolic":"method"}],"onPrev":[{"__symbolic":"method"}],"onDateSelected":[{"__symbolic":"method"}],"onWeekDaySelected":[{"__symbolic":"method"}]}}}}]
+[{"__symbolic":"module","version":3,"metadata":{"CalendarComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component"},"arguments":[{"selector":"zmz-calendar","template":"\n    <div class=\"calendar-nav\" [ngClass]=\"{'calendar-nav-show': theme === 'show'}\">\n      <div class=\"nav-btn\" [ngClass]=\"{disabled: !canGoPrev(), 'nav-btn-form': theme === 'form'}\" (click)=\"onPrev()\">\n        <div class=\"icon\" [ngClass]=\"{'icon-chevron-left': theme === 'show', 'icon-left-arrow': theme === 'form'}\"></div>\n      </div>\n      <div> {{ monthName }} {{ year }} </div>\n      <div class=\"nav-btn\" [ngClass]=\"{disabled: !canGoNext(), 'nav-btn-form': theme === 'form'}\" (click)=\"onNext()\">\n        <div class=\"icon\" [ngClass]=\"{'icon-chevron-right': theme === 'show', 'icon-right-arrow': theme === 'form'}\"></div>\n      </div>\n    </div>\n    <zmz-calendar-week-days (weekday)=\"onWeekDaySelected($event)\" [clickable]=\"weekDayClickable\" [theme]=\"theme\"></zmz-calendar-week-days>\n    <zmz-calendar-month [(year)]=\"year\" [(month)]=\"month\" [stateFn]=\"stateFn\" (dateSelected)=\"onDateSelected($event)\"></zmz-calendar-month>\n  ","styles":["\n    .calendar-nav {\n      box-sizing: border-box;\n      display: flex;\n      flex-direction: row;\n      justify-content: space-between;\n      align-items: center;\n      align-content: center;\n      max-width: 100%; }\n      .calendar-nav-show {\n        background-color: #e5e5e5; }\n\n    .nav-btn {\n      color: #3e99f0;\n      box-sizing: border-box;\n      display: flex;\n      flex-direction: row;\n      justify-content: center;\n      align-items: center;\n      align-content: center;\n      max-width: 100%;\n      width: 70px;\n      height: 34px;\n      cursor: pointer; }\n      .nav-btn .icon {\n        font-size: 15px; }\n      .nav-btn.disabled {\n        color: #E5E5E5;\n        border-color: #E5E5E5; }\n      .nav-btn-form {\n        border: 1px solid #3e99f0;\n        border-radius: 5px; }\n        .nav-btn-form .icon {\n          font-size: 30px; }\n\n    .icon {\n      box-sizing: border-box;\n      display: flex;\n      flex-direction: row;\n      justify-content: center;\n      align-items: center;\n      align-content: center;\n      max-width: 100%; }\n\n    .icon:before {\n      font-family: 'ZomoZ', sans-serif !important;\n      -moz-osx-font-smoothing: grayscale;\n      -webkit-font-smoothing: antialiased;\n      font-style: normal !important;\n      font-variant: normal !important;\n      font-weight: normal !important;\n      line-height: 1;\n      text-transform: none !important;\n      speak: none; }\n\n    .icon-chevron-right:before {\n      content: '\\6e';\n      font-size: 15px; }\n\n    .icon-chevron-left:before {\n      content: '\\70';\n      font-size: 15px; }\n\n    .icon-right-arrow:before {\n      content: '\\66'; }\n\n    .icon-left-arrow:before {\n      content: '\\65'; }\n  "]}]}],"members":{"config":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"state":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"month":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"year":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"dateSelected":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"weekDaySelected":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"monthChange":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"monthCmp":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild"},"arguments":[{"__symbolic":"reference","module":"../month/calendar-month.component","name":"CalendarMonthComponent"}]}]}],"ngOnInit":[{"__symbolic":"method"}],"canGoNext":[{"__symbolic":"method"}],"canGoPrev":[{"__symbolic":"method"}],"onNext":[{"__symbolic":"method"}],"onPrev":[{"__symbolic":"method"}],"onDateSelected":[{"__symbolic":"method"}],"onWeekDaySelected":[{"__symbolic":"method"}]}}}},{"__symbolic":"module","version":1,"metadata":{"CalendarComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component"},"arguments":[{"selector":"zmz-calendar","template":"\n    <div class=\"calendar-nav\" [ngClass]=\"{'calendar-nav-show': theme === 'show'}\">\n      <div class=\"nav-btn\" [ngClass]=\"{disabled: !canGoPrev(), 'nav-btn-form': theme === 'form'}\" (click)=\"onPrev()\">\n        <div class=\"icon\" [ngClass]=\"{'icon-chevron-left': theme === 'show', 'icon-left-arrow': theme === 'form'}\"></div>\n      </div>\n      <div> {{ monthName }} {{ year }} </div>\n      <div class=\"nav-btn\" [ngClass]=\"{disabled: !canGoNext(), 'nav-btn-form': theme === 'form'}\" (click)=\"onNext()\">\n        <div class=\"icon\" [ngClass]=\"{'icon-chevron-right': theme === 'show', 'icon-right-arrow': theme === 'form'}\"></div>\n      </div>\n    </div>\n    <zmz-calendar-week-days (weekday)=\"onWeekDaySelected($event)\" [clickable]=\"weekDayClickable\" [theme]=\"theme\"></zmz-calendar-week-days>\n    <zmz-calendar-month [(year)]=\"year\" [(month)]=\"month\" [stateFn]=\"stateFn\" (dateSelected)=\"onDateSelected($event)\"></zmz-calendar-month>\n  ","styles":["\n    .calendar-nav {\n      box-sizing: border-box;\n      display: flex;\n      flex-direction: row;\n      justify-content: space-between;\n      align-items: center;\n      align-content: center;\n      max-width: 100%; }\n      .calendar-nav-show {\n        background-color: #e5e5e5; }\n\n    .nav-btn {\n      color: #3e99f0;\n      box-sizing: border-box;\n      display: flex;\n      flex-direction: row;\n      justify-content: center;\n      align-items: center;\n      align-content: center;\n      max-width: 100%;\n      width: 70px;\n      height: 34px;\n      cursor: pointer; }\n      .nav-btn .icon {\n        font-size: 15px; }\n      .nav-btn.disabled {\n        color: #E5E5E5;\n        border-color: #E5E5E5; }\n      .nav-btn-form {\n        border: 1px solid #3e99f0;\n        border-radius: 5px; }\n        .nav-btn-form .icon {\n          font-size: 30px; }\n\n    .icon {\n      box-sizing: border-box;\n      display: flex;\n      flex-direction: row;\n      justify-content: center;\n      align-items: center;\n      align-content: center;\n      max-width: 100%; }\n\n    .icon:before {\n      font-family: 'ZomoZ', sans-serif !important;\n      -moz-osx-font-smoothing: grayscale;\n      -webkit-font-smoothing: antialiased;\n      font-style: normal !important;\n      font-variant: normal !important;\n      font-weight: normal !important;\n      line-height: 1;\n      text-transform: none !important;\n      speak: none; }\n\n    .icon-chevron-right:before {\n      content: '\\6e';\n      font-size: 15px; }\n\n    .icon-chevron-left:before {\n      content: '\\70';\n      font-size: 15px; }\n\n    .icon-right-arrow:before {\n      content: '\\66'; }\n\n    .icon-left-arrow:before {\n      content: '\\65'; }\n  "]}]}],"members":{"config":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"state":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"month":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"year":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"dateSelected":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"weekDaySelected":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"monthChange":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"monthCmp":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild"},"arguments":[{"__symbolic":"reference","module":"../month/calendar-month.component","name":"CalendarMonthComponent"}]}]}],"ngOnInit":[{"__symbolic":"method"}],"canGoNext":[{"__symbolic":"method"}],"canGoPrev":[{"__symbolic":"method"}],"onNext":[{"__symbolic":"method"}],"onPrev":[{"__symbolic":"method"}],"onDateSelected":[{"__symbolic":"method"}],"onWeekDaySelected":[{"__symbolic":"method"}]}}}}]

lib/components/week-days/calendar-week-days.component.d.ts

 import { OnInit, EventEmitter } from '@angular/core';
+import { Theme } from '../../types';
 export declare class CalendarWeekDaysComponent implements OnInit {
     clickable: boolean;
+    theme: Theme;
     weekday: EventEmitter<number>;
@@ -5,0 +7,0 @@ weekDays: string[];

lib/components/week-days/calendar-week-days.component.js

@@ -16,8 +16,19 @@ "use strict";
     function CalendarWeekDaysComponent() {
+        this.theme = 'form';
         this.weekday = new core_1.EventEmitter();
     }
     CalendarWeekDaysComponent.prototype.ngOnInit = function () {
-        this.weekDays = moment.weekdaysShort(true).map(function (day) {
-            return "" + day.charAt(0).toUpperCase() + day.slice(1).slice(0, -1);
-        });
+        switch (this.theme) {
+            case 'show':
+                this.weekDays = moment.weekdaysShort(true).map(function (day) {
+                    return "" + day.charAt(0).toUpperCase();
+                });
+                break;
+            /** Default case is theme === 'form' */
+            default:
+                this.weekDays = moment.weekdaysShort(true).map(function (day) {
+                    return "" + day.charAt(0).toUpperCase() + day.slice(1).slice(0, -1);
+                });
+                break;
+        }
     };
@@ -36,2 +47,6 @@ CalendarWeekDaysComponent.prototype.weekDaySelect = function (day) {
 __decorate([
+    core_1.Input(),
+    __metadata("design:type", String)
+], CalendarWeekDaysComponent.prototype, "theme", void 0);
+__decorate([
     core_1.Output(),
@@ -38,0 +53,0 @@ __metadata("design:type", core_1.EventEmitter)

lib/components/week-days/calendar-week-days.component.metadata.json

@@ -1,1 +0,1 @@
-[{"__symbolic":"module","version":3,"metadata":{"CalendarWeekDaysComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component"},"arguments":[{"selector":"zmz-calendar-week-days","template":"\n    <div class=\"week-day\" *ngFor=\"let day of weekDays; let i=index\" (click)=\"weekDaySelect(i)\" [ngClass]=\"{ clickable: clickable}\">\n      <div class=\"container\">\n        <div class=\"number\">\n          <span> {{day}} </span>\n\n          <div *ngIf=\"clickable\" class=\"click-arrow\">\n            <div class=\"icon icon-down-chevron\"></div>\n          </div>\n\n        </div>\n      </div>\n    </div>\n  ","styles":["\n    :host {\n      width: 100%;\n      box-sizing: border-box;\n      display: flex;\n      flex-direction: row;\n      justify-content: flex-start;\n      align-items: stretch;\n      align-content: stretch; }\n\n    .week-day {\n      width: 100%; }\n\n    .container {\n      position: relative;\n      width: 100%;\n      padding-bottom: 88%; }\n\n    .number {\n      position: absolute;\n      width: 100%;\n      height: 100%;\n      box-sizing: border-box;\n      display: flex;\n      flex-direction: column;\n      justify-content: center;\n      align-items: center;\n      align-content: center;\n      max-width: 100%; }\n\n    .clickable {\n      cursor: pointer;\n      color: #3E99EF; }\n\n    .click-arrow {\n      box-sizing: border-box;\n      display: flex;\n      flex-direction: row;\n      justify-content: center;\n      align-items: center;\n      align-content: center;\n      max-width: 100%; }\n\n    .icon {\n      font-size: 12px;\n      height: 1em;\n      width: 1em; }\n\n    .icon:before {\n      font-family: 'ZomoZ', sans-serif !important;\n      -moz-osx-font-smoothing: grayscale;\n      -webkit-font-smoothing: antialiased;\n      font-style: normal !important;\n      font-variant: normal !important;\n      font-weight: normal !important;\n      line-height: 1;\n      text-transform: none !important;\n      speak: none; }\n\n    .icon-down-chevron:before {\n      content: '\\6f'; }\n  "]}]}],"members":{"clickable":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"weekday":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"ngOnInit":[{"__symbolic":"method"}],"weekDaySelect":[{"__symbolic":"method"}]}}}},{"__symbolic":"module","version":1,"metadata":{"CalendarWeekDaysComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component"},"arguments":[{"selector":"zmz-calendar-week-days","template":"\n    <div class=\"week-day\" *ngFor=\"let day of weekDays; let i=index\" (click)=\"weekDaySelect(i)\" [ngClass]=\"{ clickable: clickable}\">\n      <div class=\"container\">\n        <div class=\"number\">\n          <span> {{day}} </span>\n\n          <div *ngIf=\"clickable\" class=\"click-arrow\">\n            <div class=\"icon icon-down-chevron\"></div>\n          </div>\n\n        </div>\n      </div>\n    </div>\n  ","styles":["\n    :host {\n      width: 100%;\n      box-sizing: border-box;\n      display: flex;\n      flex-direction: row;\n      justify-content: flex-start;\n      align-items: stretch;\n      align-content: stretch; }\n\n    .week-day {\n      width: 100%; }\n\n    .container {\n      position: relative;\n      width: 100%;\n      padding-bottom: 88%; }\n\n    .number {\n      position: absolute;\n      width: 100%;\n      height: 100%;\n      box-sizing: border-box;\n      display: flex;\n      flex-direction: column;\n      justify-content: center;\n      align-items: center;\n      align-content: center;\n      max-width: 100%; }\n\n    .clickable {\n      cursor: pointer;\n      color: #3E99EF; }\n\n    .click-arrow {\n      box-sizing: border-box;\n      display: flex;\n      flex-direction: row;\n      justify-content: center;\n      align-items: center;\n      align-content: center;\n      max-width: 100%; }\n\n    .icon {\n      font-size: 12px;\n      height: 1em;\n      width: 1em; }\n\n    .icon:before {\n      font-family: 'ZomoZ', sans-serif !important;\n      -moz-osx-font-smoothing: grayscale;\n      -webkit-font-smoothing: antialiased;\n      font-style: normal !important;\n      font-variant: normal !important;\n      font-weight: normal !important;\n      line-height: 1;\n      text-transform: none !important;\n      speak: none; }\n\n    .icon-down-chevron:before {\n      content: '\\6f'; }\n  "]}]}],"members":{"clickable":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"weekday":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"ngOnInit":[{"__symbolic":"method"}],"weekDaySelect":[{"__symbolic":"method"}]}}}}]
+[{"__symbolic":"module","version":3,"metadata":{"CalendarWeekDaysComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component"},"arguments":[{"selector":"zmz-calendar-week-days","template":"\n    <div class=\"week-day\" *ngFor=\"let day of weekDays; let i=index\" (click)=\"weekDaySelect(i)\" [ngClass]=\"{ clickable: clickable}\">\n      <div class=\"container\">\n        <div class=\"number\">\n          <span> {{day}} </span>\n\n          <div *ngIf=\"clickable\" class=\"click-arrow\">\n            <div class=\"icon icon-down-chevron\"></div>\n          </div>\n\n        </div>\n      </div>\n    </div>\n  ","styles":["\n    :host {\n      width: 100%;\n      box-sizing: border-box;\n      display: flex;\n      flex-direction: row;\n      justify-content: flex-start;\n      align-items: stretch;\n      align-content: stretch; }\n\n    .week-day {\n      width: 100%; }\n\n    .container {\n      position: relative;\n      width: 100%;\n      padding-bottom: 88%; }\n\n    .number {\n      position: absolute;\n      width: 100%;\n      height: 100%;\n      box-sizing: border-box;\n      display: flex;\n      flex-direction: column;\n      justify-content: center;\n      align-items: center;\n      align-content: center;\n      max-width: 100%; }\n\n    .clickable {\n      cursor: pointer;\n      color: #3E99EF; }\n\n    .click-arrow {\n      box-sizing: border-box;\n      display: flex;\n      flex-direction: row;\n      justify-content: center;\n      align-items: center;\n      align-content: center;\n      max-width: 100%; }\n\n    .icon {\n      font-size: 12px;\n      height: 1em;\n      width: 1em; }\n\n    .icon:before {\n      font-family: 'ZomoZ', sans-serif !important;\n      -moz-osx-font-smoothing: grayscale;\n      -webkit-font-smoothing: antialiased;\n      font-style: normal !important;\n      font-variant: normal !important;\n      font-weight: normal !important;\n      line-height: 1;\n      text-transform: none !important;\n      speak: none; }\n\n    .icon-down-chevron:before {\n      content: '\\6f'; }\n  "]}]}],"members":{"clickable":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"theme":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"weekday":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"ngOnInit":[{"__symbolic":"method"}],"weekDaySelect":[{"__symbolic":"method"}]}}}},{"__symbolic":"module","version":1,"metadata":{"CalendarWeekDaysComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component"},"arguments":[{"selector":"zmz-calendar-week-days","template":"\n    <div class=\"week-day\" *ngFor=\"let day of weekDays; let i=index\" (click)=\"weekDaySelect(i)\" [ngClass]=\"{ clickable: clickable}\">\n      <div class=\"container\">\n        <div class=\"number\">\n          <span> {{day}} </span>\n\n          <div *ngIf=\"clickable\" class=\"click-arrow\">\n            <div class=\"icon icon-down-chevron\"></div>\n          </div>\n\n        </div>\n      </div>\n    </div>\n  ","styles":["\n    :host {\n      width: 100%;\n      box-sizing: border-box;\n      display: flex;\n      flex-direction: row;\n      justify-content: flex-start;\n      align-items: stretch;\n      align-content: stretch; }\n\n    .week-day {\n      width: 100%; }\n\n    .container {\n      position: relative;\n      width: 100%;\n      padding-bottom: 88%; }\n\n    .number {\n      position: absolute;\n      width: 100%;\n      height: 100%;\n      box-sizing: border-box;\n      display: flex;\n      flex-direction: column;\n      justify-content: center;\n      align-items: center;\n      align-content: center;\n      max-width: 100%; }\n\n    .clickable {\n      cursor: pointer;\n      color: #3E99EF; }\n\n    .click-arrow {\n      box-sizing: border-box;\n      display: flex;\n      flex-direction: row;\n      justify-content: center;\n      align-items: center;\n      align-content: center;\n      max-width: 100%; }\n\n    .icon {\n      font-size: 12px;\n      height: 1em;\n      width: 1em; }\n\n    .icon:before {\n      font-family: 'ZomoZ', sans-serif !important;\n      -moz-osx-font-smoothing: grayscale;\n      -webkit-font-smoothing: antialiased;\n      font-style: normal !important;\n      font-variant: normal !important;\n      font-weight: normal !important;\n      line-height: 1;\n      text-transform: none !important;\n      speak: none; }\n\n    .icon-down-chevron:before {\n      content: '\\6f'; }\n  "]}]}],"members":{"clickable":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"theme":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"weekday":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"ngOnInit":[{"__symbolic":"method"}],"weekDaySelect":[{"__symbolic":"method"}]}}}}]

lib/types.d.ts

@@ -16,3 +16,5 @@ /// <reference types="moment" />
 export declare type NavigationStrategy = 'validRange' | 'state' | boolean;
+export declare type Theme = 'form' | 'show';
 export interface CalendarConfig {
+    theme?: Theme;
     locale?: Locale;
@@ -19,0 +21,0 @@ weekDayClickable?: boolean;

package.json

 {
   "name": "zmz-calendar",
-  "version": "0.3.0",
+  "version": "0.4.0",
   "description": "angular2 responsive calendar",
@@ -5,0 +5,0 @@ "main": "./lib/index.js",

README.md

@@ -59,3 +59,4 @@ # zmz-calendar
         the navigation for the dates outside that range. If `navigationState` is not provided, it defaults to `available`
-    6. navigationState: State used in the _state_ navigation strategy.
+    6. navigationState (_optional_): State used in the _state_ navigation strategy.
+    7. theme (_optional_): Set calendar styles. Possible values `form` or `show`.
 2. state: CalendarState indicating how the dates are displayed. More details below
@@ -62,0 +63,0 @@ 3. month: The number of the month to be initialy displayed. It's 1-based

New alerts

New author

Supply chain risk

A new npm collaborator published a version of the package for the first time. New collaborators are usually benign additions to a project, but do indicate a change to the security surface area of a package.

Found 1 instance in 1 package

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

Fixed alerts

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

Improved metrics

Number of lines in readme file

184

increased by0.55%

Worsened metrics

Total package byte prevSize

2675507

decreased by-5.35%

Number of package files

75

decreased by-24.24%

Lines of code

30386

decreased by-1.74%

Number of medium supply chain risk alerts

1

increased byInfinity%

No dependency changes