diff options
Diffstat (limited to 'vnfmarket/common/thirdparty/angular-material/modules/closure/datepicker')
6 files changed, 3464 insertions, 0 deletions
diff --git a/vnfmarket/common/thirdparty/angular-material/modules/closure/datepicker/datepicker-default-theme.css b/vnfmarket/common/thirdparty/angular-material/modules/closure/datepicker/datepicker-default-theme.css new file mode 100644 index 00000000..387b7aa1 --- /dev/null +++ b/vnfmarket/common/thirdparty/angular-material/modules/closure/datepicker/datepicker-default-theme.css @@ -0,0 +1,84 @@ +/*! + * Angular Material Design + * https://github.com/angular/material + * @license MIT + * v1.1.3 + */ +/** Theme styles for mdCalendar. */ +.md-calendar.md-THEME_NAME-theme { + background: '{{background-A100}}'; + color: '{{background-A200-0.87}}'; } + .md-calendar.md-THEME_NAME-theme tr:last-child td { + border-bottom-color: '{{background-200}}'; } + +.md-THEME_NAME-theme .md-calendar-day-header { + background: '{{background-300}}'; + color: '{{background-A200-0.87}}'; } + +.md-THEME_NAME-theme .md-calendar-date.md-calendar-date-today .md-calendar-date-selection-indicator { + border: 1px solid '{{primary-500}}'; } + +.md-THEME_NAME-theme .md-calendar-date.md-calendar-date-today.md-calendar-date-disabled { + color: '{{primary-500-0.6}}'; } + +.md-calendar-date.md-focus .md-THEME_NAME-theme .md-calendar-date-selection-indicator, .md-THEME_NAME-theme .md-calendar-date-selection-indicator:hover { + background: '{{background-300}}'; } + +.md-THEME_NAME-theme .md-calendar-date.md-calendar-selected-date .md-calendar-date-selection-indicator, +.md-THEME_NAME-theme .md-calendar-date.md-focus.md-calendar-selected-date .md-calendar-date-selection-indicator { + background: '{{primary-500}}'; + color: '{{primary-500-contrast}}'; + border-color: transparent; } + +.md-THEME_NAME-theme .md-calendar-date-disabled, +.md-THEME_NAME-theme .md-calendar-month-label-disabled { + color: '{{background-A200-0.435}}'; } + +/** Theme styles for mdDatepicker. */ +.md-THEME_NAME-theme .md-datepicker-input { + color: '{{foreground-1}}'; } + .md-THEME_NAME-theme .md-datepicker-input::-webkit-input-placeholder { + color: '{{foreground-3}}'; } + .md-THEME_NAME-theme .md-datepicker-input:-moz-placeholder { + color: '{{foreground-3}}'; } + .md-THEME_NAME-theme .md-datepicker-input::-moz-placeholder { + color: '{{foreground-3}}'; } + .md-THEME_NAME-theme .md-datepicker-input:-ms-input-placeholder { + color: '{{foreground-3}}'; } + .md-THEME_NAME-theme .md-datepicker-input::-webkit-input-placeholder { + color: '{{foreground-3}}'; } + +.md-THEME_NAME-theme .md-datepicker-input-container { + border-bottom-color: '{{foreground-4}}'; } + .md-THEME_NAME-theme .md-datepicker-input-container.md-datepicker-focused { + border-bottom-color: '{{primary-color}}'; } + .md-accent .md-THEME_NAME-theme .md-datepicker-input-container.md-datepicker-focused { + border-bottom-color: '{{accent-color}}'; } + .md-warn .md-THEME_NAME-theme .md-datepicker-input-container.md-datepicker-focused { + border-bottom-color: '{{warn-A700}}'; } + .md-THEME_NAME-theme .md-datepicker-input-container.md-datepicker-invalid { + border-bottom-color: '{{warn-A700}}'; } + +.md-THEME_NAME-theme .md-datepicker-calendar-pane { + border-color: '{{background-hue-1}}'; } + +.md-THEME_NAME-theme .md-datepicker-triangle-button .md-datepicker-expand-triangle { + border-top-color: '{{foreground-2}}'; } + +.md-THEME_NAME-theme .md-datepicker-open .md-datepicker-calendar-icon { + color: '{{primary-color}}'; } + +.md-THEME_NAME-theme .md-datepicker-open.md-accent .md-datepicker-calendar-icon, .md-accent .md-THEME_NAME-theme .md-datepicker-open .md-datepicker-calendar-icon { + color: '{{accent-color}}'; } + +.md-THEME_NAME-theme .md-datepicker-open.md-warn .md-datepicker-calendar-icon, .md-warn .md-THEME_NAME-theme .md-datepicker-open .md-datepicker-calendar-icon { + color: '{{warn-A700}}'; } + +.md-THEME_NAME-theme .md-datepicker-calendar { + background: '{{background-A100}}'; } + +.md-THEME_NAME-theme .md-datepicker-input-mask-opaque { + box-shadow: 0 0 0 9999px "{{background-hue-1}}"; } + +.md-THEME_NAME-theme .md-datepicker-open .md-datepicker-input-container { + background: "{{background-hue-1}}"; } diff --git a/vnfmarket/common/thirdparty/angular-material/modules/closure/datepicker/datepicker-default-theme.min.css b/vnfmarket/common/thirdparty/angular-material/modules/closure/datepicker/datepicker-default-theme.min.css new file mode 100644 index 00000000..4cea0abc --- /dev/null +++ b/vnfmarket/common/thirdparty/angular-material/modules/closure/datepicker/datepicker-default-theme.min.css @@ -0,0 +1,6 @@ +/*! + * Angular Material Design + * https://github.com/angular/material + * @license MIT + * v1.1.2-master-a9ba340 + */.md-calendar.md-THEME_NAME-theme{background:"{{background-A100}}";color:"{{background-A200-0.87}}"}.md-calendar.md-THEME_NAME-theme tr:last-child td{border-bottom-color:"{{background-200}}"}.md-THEME_NAME-theme .md-calendar-day-header{background:"{{background-300}}";color:"{{background-A200-0.87}}"}.md-THEME_NAME-theme .md-calendar-date.md-calendar-date-today .md-calendar-date-selection-indicator{border:1px solid}.md-THEME_NAME-theme .md-calendar-date.md-calendar-date-today.md-calendar-date-disabled{color:"{{primary-500-0.6}}"}.md-calendar-date.md-focus .md-THEME_NAME-theme .md-calendar-date-selection-indicator,.md-THEME_NAME-theme .md-calendar-date-selection-indicator:hover{background:"{{background-300}}"}.md-THEME_NAME-theme .md-calendar-date.md-calendar-selected-date .md-calendar-date-selection-indicator,.md-THEME_NAME-theme .md-calendar-date.md-focus.md-calendar-selected-date .md-calendar-date-selection-indicator{background:"{{primary-500}}";color:"{{primary-500-contrast}}";border-color:transparent}.md-THEME_NAME-theme .md-calendar-date-disabled,.md-THEME_NAME-theme .md-calendar-month-label-disabled{color:"{{background-A200-0.435}}"}.md-THEME_NAME-theme .md-datepicker-input{color:"{{foreground-1}}"}.md-THEME_NAME-theme .md-datepicker-input:-moz-placeholder,.md-THEME_NAME-theme .md-datepicker-input::-moz-placeholder{color:"{{foreground-3}}"}.md-THEME_NAME-theme .md-datepicker-input:-ms-input-placeholder{color:"{{foreground-3}}"}.md-THEME_NAME-theme .md-datepicker-input::-webkit-input-placeholder{color:"{{foreground-3}}"}.md-THEME_NAME-theme .md-datepicker-input-container{border-bottom-color:"{{foreground-4}}"}.md-THEME_NAME-theme .md-datepicker-input-container.md-datepicker-focused{border-bottom-color:"{{primary-color}}"}.md-accent .md-THEME_NAME-theme .md-datepicker-input-container.md-datepicker-focused{border-bottom-color:"{{accent-color}}"}.md-THEME_NAME-theme .md-datepicker-input-container.md-datepicker-invalid,.md-warn .md-THEME_NAME-theme .md-datepicker-input-container.md-datepicker-focused{border-bottom-color:"{{warn-A700}}"}.md-THEME_NAME-theme .md-datepicker-calendar-pane{border-color:"{{background-hue-1}}"}.md-THEME_NAME-theme .md-datepicker-triangle-button .md-datepicker-expand-triangle{border-top-color:"{{foreground-2}}"}.md-THEME_NAME-theme .md-datepicker-open .md-datepicker-calendar-icon{color:"{{primary-color}}"}.md-accent .md-THEME_NAME-theme .md-datepicker-open .md-datepicker-calendar-icon,.md-THEME_NAME-theme .md-datepicker-open.md-accent .md-datepicker-calendar-icon{color:"{{accent-color}}"}.md-THEME_NAME-theme .md-datepicker-open.md-warn .md-datepicker-calendar-icon,.md-warn .md-THEME_NAME-theme .md-datepicker-open .md-datepicker-calendar-icon{color:"{{warn-A700}}"}.md-THEME_NAME-theme .md-datepicker-calendar{background:"{{background-A100}}"}.md-THEME_NAME-theme .md-datepicker-input-mask-opaque{box-shadow:0 0 0 9999px "{{background-hue-1}}"}.md-THEME_NAME-theme .md-datepicker-open .md-datepicker-input-container{background:"{{background-hue-1}}"}
\ No newline at end of file diff --git a/vnfmarket/common/thirdparty/angular-material/modules/closure/datepicker/datepicker.css b/vnfmarket/common/thirdparty/angular-material/modules/closure/datepicker/datepicker.css new file mode 100644 index 00000000..127fe5c9 --- /dev/null +++ b/vnfmarket/common/thirdparty/angular-material/modules/closure/datepicker/datepicker.css @@ -0,0 +1,311 @@ +/*! + * Angular Material Design + * https://github.com/angular/material + * @license MIT + * v1.1.3 + */ +/** Styles for mdCalendar. */ +md-calendar { + font-size: 13px; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; } + +.md-calendar-scroll-mask { + display: inline-block; + overflow: hidden; + height: 308px; } + .md-calendar-scroll-mask .md-virtual-repeat-scroller { + overflow-y: scroll; + -webkit-overflow-scrolling: touch; } + .md-calendar-scroll-mask .md-virtual-repeat-scroller::-webkit-scrollbar { + display: none; } + .md-calendar-scroll-mask .md-virtual-repeat-offsetter { + width: 100%; } + +.md-calendar-scroll-container { + box-shadow: inset -3px 3px 6px rgba(0, 0, 0, 0.2); + display: inline-block; + height: 308px; + width: 346px; } + +.md-calendar-date { + height: 44px; + width: 44px; + text-align: center; + padding: 0; + border: none; + box-sizing: content-box; } + .md-calendar-date:first-child { + padding-left: 16px; } + [dir=rtl] .md-calendar-date:first-child { + padding-left: 0; + padding-right: 16px; } + .md-calendar-date:last-child { + padding-right: 16px; } + [dir=rtl] .md-calendar-date:last-child { + padding-right: 0; + padding-left: 16px; } + .md-calendar-date.md-calendar-date-disabled { + cursor: default; } + +.md-calendar-date-selection-indicator { + -webkit-transition: background-color, color 0.4s cubic-bezier(0.25, 0.8, 0.25, 1); + transition: background-color, color 0.4s cubic-bezier(0.25, 0.8, 0.25, 1); + border-radius: 50%; + display: inline-block; + width: 40px; + height: 40px; + line-height: 40px; } + .md-calendar-date:not(.md-disabled) .md-calendar-date-selection-indicator { + cursor: pointer; } + +.md-calendar-month-label { + height: 44px; + font-size: 14px; + font-weight: 500; + padding: 0 0 0 24px; } + [dir=rtl] .md-calendar-month-label { + padding: 0 24px 0 0; } + md-calendar-month .md-calendar-month-label:not(.md-calendar-month-label-disabled) { + cursor: pointer; } + .md-calendar-month-label md-icon { + -webkit-transform: rotate(180deg); + transform: rotate(180deg); } + [dir=rtl] .md-calendar-month-label md-icon { + -webkit-transform: none; + transform: none; } + .md-calendar-month-label span { + vertical-align: middle; } + +.md-calendar-day-header { + table-layout: fixed; + border-spacing: 0; + border-collapse: collapse; } + .md-calendar-day-header th { + height: 40px; + width: 44px; + text-align: center; + padding: 0; + border: none; + box-sizing: content-box; + font-weight: normal; } + .md-calendar-day-header th:first-child { + padding-left: 16px; } + [dir=rtl] .md-calendar-day-header th:first-child { + padding-left: 0; + padding-right: 16px; } + .md-calendar-day-header th:last-child { + padding-right: 16px; } + [dir=rtl] .md-calendar-day-header th:last-child { + padding-right: 0; + padding-left: 16px; } + +.md-calendar { + table-layout: fixed; + border-spacing: 0; + border-collapse: collapse; } + .md-calendar tr:last-child td { + border-bottom-width: 1px; + border-bottom-style: solid; } + .md-calendar:first-child { + border-top: 1px solid transparent; } + .md-calendar tbody, .md-calendar td, .md-calendar tr { + vertical-align: middle; + box-sizing: content-box; } + +/** Styles for mdDatepicker. */ +md-datepicker { + white-space: nowrap; + overflow: hidden; + vertical-align: middle; } + +.md-inline-form md-datepicker { + margin-top: 12px; } + +.md-datepicker-button { + display: inline-block; + box-sizing: border-box; + background: none; + vertical-align: middle; + position: relative; } + .md-datepicker-button:before { + top: 0; + left: 0; + bottom: 0; + right: 0; + position: absolute; + content: ''; + speak: none; } + +.md-datepicker-input { + font-size: 14px; + box-sizing: border-box; + border: none; + box-shadow: none; + outline: none; + background: transparent; + min-width: 120px; + max-width: 328px; + padding: 0 0 5px; } + .md-datepicker-input::-ms-clear { + display: none; } + +._md-datepicker-floating-label > md-datepicker { + overflow: visible; } + ._md-datepicker-floating-label > md-datepicker .md-datepicker-input-container { + border: none; } + ._md-datepicker-floating-label > md-datepicker .md-datepicker-button { + float: left; + margin-top: -12px; + top: 9.5px; } + [dir=rtl] ._md-datepicker-floating-label > md-datepicker .md-datepicker-button { + float: right; } + +._md-datepicker-floating-label .md-input { + float: none; } + +._md-datepicker-floating-label._md-datepicker-has-calendar-icon > label:not(.md-no-float):not(.md-container-ignore) { + right: 18px; + left: auto; + width: calc(100% - 84px); } + [dir=rtl] ._md-datepicker-floating-label._md-datepicker-has-calendar-icon > label:not(.md-no-float):not(.md-container-ignore) { + right: auto; } + [dir=rtl] ._md-datepicker-floating-label._md-datepicker-has-calendar-icon > label:not(.md-no-float):not(.md-container-ignore) { + left: 18px; } + +._md-datepicker-floating-label._md-datepicker-has-calendar-icon .md-input-message-animation { + margin-left: 64px; } + [dir=rtl] ._md-datepicker-floating-label._md-datepicker-has-calendar-icon .md-input-message-animation { + margin-left: auto; + margin-right: 64px; } + +._md-datepicker-has-triangle-icon { + padding-right: 18px; + margin-right: -18px; } + [dir=rtl] ._md-datepicker-has-triangle-icon { + padding-right: 0; + padding-left: 18px; } + [dir=rtl] ._md-datepicker-has-triangle-icon { + margin-right: auto; + margin-left: -18px; } + +.md-datepicker-input-container { + position: relative; + border-bottom-width: 1px; + border-bottom-style: solid; + display: inline-block; + width: auto; } + .md-icon-button + .md-datepicker-input-container { + margin-left: 12px; } + [dir=rtl] .md-icon-button + .md-datepicker-input-container { + margin-left: auto; + margin-right: 12px; } + .md-datepicker-input-container.md-datepicker-focused { + border-bottom-width: 2px; } + +.md-datepicker-is-showing .md-scroll-mask { + z-index: 99; } + +.md-datepicker-calendar-pane { + position: absolute; + top: 0; + left: -100%; + z-index: 100; + border-width: 1px; + border-style: solid; + background: transparent; + -webkit-transform: scale(0); + transform: scale(0); + -webkit-transform-origin: 0 0; + transform-origin: 0 0; + -webkit-transition: -webkit-transform 0.2s cubic-bezier(0.25, 0.8, 0.25, 1); + transition: -webkit-transform 0.2s cubic-bezier(0.25, 0.8, 0.25, 1); + transition: transform 0.2s cubic-bezier(0.25, 0.8, 0.25, 1); + transition: transform 0.2s cubic-bezier(0.25, 0.8, 0.25, 1), -webkit-transform 0.2s cubic-bezier(0.25, 0.8, 0.25, 1); } + .md-datepicker-calendar-pane.md-pane-open { + -webkit-transform: scale(1); + transform: scale(1); } + +.md-datepicker-input-mask { + height: 40px; + width: 340px; + position: relative; + overflow: hidden; + background: transparent; + pointer-events: none; + cursor: text; } + +.md-datepicker-calendar { + opacity: 0; + -webkit-transition: opacity 0.2s cubic-bezier(0.5, 0, 0.25, 1); + transition: opacity 0.2s cubic-bezier(0.5, 0, 0.25, 1); } + .md-pane-open .md-datepicker-calendar { + opacity: 1; } + .md-datepicker-calendar md-calendar:focus { + outline: none; } + +.md-datepicker-expand-triangle { + position: absolute; + top: 50%; + left: 50%; + -webkit-transform: translate(-50%, -50%); + transform: translate(-50%, -50%); + width: 0; + height: 0; + border-left: 5px solid transparent; + border-right: 5px solid transparent; + border-top: 5px solid; } + +.md-datepicker-triangle-button { + position: absolute; + right: 0; + bottom: -2.5px; + -webkit-transform: translateX(45%); + transform: translateX(45%); } + [dir=rtl] .md-datepicker-triangle-button { + right: auto; + left: 0; } + [dir=rtl] .md-datepicker-triangle-button { + -webkit-transform: translateX(-45%); + transform: translateX(-45%); } + +.md-datepicker-triangle-button.md-button.md-icon-button { + height: 36px; + width: 36px; + position: absolute; + padding: 8px; } + +md-datepicker[disabled] .md-datepicker-input-container { + border-bottom-color: transparent; } + +md-datepicker[disabled] .md-datepicker-triangle-button { + display: none; } + +.md-datepicker-open { + overflow: hidden; } + .md-datepicker-open .md-datepicker-input-container, + .md-datepicker-open input.md-input { + border-bottom-color: transparent; } + .md-datepicker-open .md-datepicker-triangle-button, + .md-datepicker-open.md-input-has-value > label, + .md-datepicker-open.md-input-has-placeholder > label { + display: none; } + +.md-datepicker-pos-adjusted .md-datepicker-input-mask { + display: none; } + +.md-datepicker-calendar-pane .md-calendar { + -webkit-transform: translateY(-85px); + transform: translateY(-85px); + -webkit-transition: -webkit-transform 0.65s cubic-bezier(0.25, 0.8, 0.25, 1); + transition: -webkit-transform 0.65s cubic-bezier(0.25, 0.8, 0.25, 1); + transition: transform 0.65s cubic-bezier(0.25, 0.8, 0.25, 1); + transition: transform 0.65s cubic-bezier(0.25, 0.8, 0.25, 1), -webkit-transform 0.65s cubic-bezier(0.25, 0.8, 0.25, 1); + -webkit-transition-delay: 0.125s; + transition-delay: 0.125s; } + +.md-datepicker-calendar-pane.md-pane-open .md-calendar { + -webkit-transform: translateY(0); + transform: translateY(0); } diff --git a/vnfmarket/common/thirdparty/angular-material/modules/closure/datepicker/datepicker.js b/vnfmarket/common/thirdparty/angular-material/modules/closure/datepicker/datepicker.js new file mode 100644 index 00000000..8cc894ac --- /dev/null +++ b/vnfmarket/common/thirdparty/angular-material/modules/closure/datepicker/datepicker.js @@ -0,0 +1,3049 @@ +/*! + * Angular Material Design + * https://github.com/angular/material + * @license MIT + * v1.1.3 + */ +goog.provide('ngmaterial.components.datepicker'); +goog.require('ngmaterial.components.icon'); +goog.require('ngmaterial.components.virtualRepeat'); +goog.require('ngmaterial.core'); +/** + * @ngdoc module + * @name material.components.datepicker + * @description Module for the datepicker component. + */ + +angular.module('material.components.datepicker', [ + 'material.core', + 'material.components.icon', + 'material.components.virtualRepeat' +]); + +(function() { + 'use strict'; + + /** + * @ngdoc directive + * @name mdCalendar + * @module material.components.datepicker + * + * @param {Date} ng-model The component's model. Should be a Date object. + * @param {Date=} md-min-date Expression representing the minimum date. + * @param {Date=} md-max-date Expression representing the maximum date. + * @param {(function(Date): boolean)=} md-date-filter Function expecting a date and returning a boolean whether it can be selected or not. + * + * @description + * `<md-calendar>` is a component that renders a calendar that can be used to select a date. + * It is a part of the `<md-datepicker` pane, however it can also be used on it's own. + * + * @usage + * + * <hljs lang="html"> + * <md-calendar ng-model="birthday"></md-calendar> + * </hljs> + */ + CalendarCtrl['$inject'] = ["$element", "$scope", "$$mdDateUtil", "$mdUtil", "$mdConstant", "$mdTheming", "$$rAF", "$attrs", "$mdDateLocale"]; + angular.module('material.components.datepicker') + .directive('mdCalendar', calendarDirective); + + // POST RELEASE + // TODO(jelbourn): Mac Cmd + left / right == Home / End + // TODO(jelbourn): Refactor month element creation to use cloneNode (performance). + // TODO(jelbourn): Define virtual scrolling constants (compactness) users can override. + // TODO(jelbourn): Animated month transition on ng-model change (virtual-repeat) + // TODO(jelbourn): Scroll snapping (virtual repeat) + // TODO(jelbourn): Remove superfluous row from short months (virtual-repeat) + // TODO(jelbourn): Month headers stick to top when scrolling. + // TODO(jelbourn): Previous month opacity is lowered when partially scrolled out of view. + // TODO(jelbourn): Support md-calendar standalone on a page (as a tabstop w/ aria-live + // announcement and key handling). + // Read-only calendar (not just date-picker). + + function calendarDirective() { + return { + template: function(tElement, tAttr) { + // TODO(crisbeto): This is a workaround that allows the calendar to work, without + // a datepicker, until issue #8585 gets resolved. It can safely be removed + // afterwards. This ensures that the virtual repeater scrolls to the proper place on load by + // deferring the execution until the next digest. It's necessary only if the calendar is used + // without a datepicker, otherwise it's already wrapped in an ngIf. + var extraAttrs = tAttr.hasOwnProperty('ngIf') ? '' : 'ng-if="calendarCtrl.isInitialized"'; + var template = '' + + '<div ng-switch="calendarCtrl.currentView" ' + extraAttrs + '>' + + '<md-calendar-year ng-switch-when="year"></md-calendar-year>' + + '<md-calendar-month ng-switch-default></md-calendar-month>' + + '</div>'; + + return template; + }, + scope: { + minDate: '=mdMinDate', + maxDate: '=mdMaxDate', + dateFilter: '=mdDateFilter', + _currentView: '@mdCurrentView' + }, + require: ['ngModel', 'mdCalendar'], + controller: CalendarCtrl, + controllerAs: 'calendarCtrl', + bindToController: true, + link: function(scope, element, attrs, controllers) { + var ngModelCtrl = controllers[0]; + var mdCalendarCtrl = controllers[1]; + mdCalendarCtrl.configureNgModel(ngModelCtrl); + } + }; + } + + /** + * Occasionally the hideVerticalScrollbar method might read an element's + * width as 0, because it hasn't been laid out yet. This value will be used + * as a fallback, in order to prevent scenarios where the element's width + * would otherwise have been set to 0. This value is the "usual" width of a + * calendar within a floating calendar pane. + */ + var FALLBACK_WIDTH = 340; + + /** Next identifier for calendar instance. */ + var nextUniqueId = 0; + + /** + * Controller for the mdCalendar component. + * ngInject @constructor + */ + function CalendarCtrl($element, $scope, $$mdDateUtil, $mdUtil, + $mdConstant, $mdTheming, $$rAF, $attrs, $mdDateLocale) { + + $mdTheming($element); + + /** @final {!angular.JQLite} */ + this.$element = $element; + + /** @final {!angular.Scope} */ + this.$scope = $scope; + + /** @final */ + this.dateUtil = $$mdDateUtil; + + /** @final */ + this.$mdUtil = $mdUtil; + + /** @final */ + this.keyCode = $mdConstant.KEY_CODE; + + /** @final */ + this.$$rAF = $$rAF; + + /** @final */ + this.$mdDateLocale = $mdDateLocale; + + /** @final {Date} */ + this.today = this.dateUtil.createDateAtMidnight(); + + /** @type {!angular.NgModelController} */ + this.ngModelCtrl = null; + + /** @type {String} Class applied to the selected date cell. */ + this.SELECTED_DATE_CLASS = 'md-calendar-selected-date'; + + /** @type {String} Class applied to the cell for today. */ + this.TODAY_CLASS = 'md-calendar-date-today'; + + /** @type {String} Class applied to the focused cell. */ + this.FOCUSED_DATE_CLASS = 'md-focus'; + + /** @final {number} Unique ID for this calendar instance. */ + this.id = nextUniqueId++; + + /** + * The date that is currently focused or showing in the calendar. This will initially be set + * to the ng-model value if set, otherwise to today. It will be updated as the user navigates + * to other months. The cell corresponding to the displayDate does not necesarily always have + * focus in the document (such as for cases when the user is scrolling the calendar). + * @type {Date} + */ + this.displayDate = null; + + /** + * The selected date. Keep track of this separately from the ng-model value so that we + * can know, when the ng-model value changes, what the previous value was before it's updated + * in the component's UI. + * + * @type {Date} + */ + this.selectedDate = null; + + /** + * The first date that can be rendered by the calendar. The default is taken + * from the mdDateLocale provider and is limited by the mdMinDate. + * @type {Date} + */ + this.firstRenderableDate = null; + + /** + * The last date that can be rendered by the calendar. The default comes + * from the mdDateLocale provider and is limited by the maxDate. + * @type {Date} + */ + this.lastRenderableDate = null; + + /** + * Used to toggle initialize the root element in the next digest. + * @type {Boolean} + */ + this.isInitialized = false; + + /** + * Cache for the width of the element without a scrollbar. Used to hide the scrollbar later on + * and to avoid extra reflows when switching between views. + * @type {Number} + */ + this.width = 0; + + /** + * Caches the width of the scrollbar in order to be used when hiding it and to avoid extra reflows. + * @type {Number} + */ + this.scrollbarWidth = 0; + + // Unless the user specifies so, the calendar should not be a tab stop. + // This is necessary because ngAria might add a tabindex to anything with an ng-model + // (based on whether or not the user has turned that particular feature on/off). + if (!$attrs.tabindex) { + $element.attr('tabindex', '-1'); + } + + var boundKeyHandler = angular.bind(this, this.handleKeyEvent); + + + + // If use the md-calendar directly in the body without datepicker, + // handleKeyEvent will disable other inputs on the page. + // So only apply the handleKeyEvent on the body when the md-calendar inside datepicker, + // otherwise apply on the calendar element only. + + var handleKeyElement; + if ($element.parent().hasClass('md-datepicker-calendar')) { + handleKeyElement = angular.element(document.body); + } else { + handleKeyElement = $element; + } + + // Bind the keydown handler to the body, in order to handle cases where the focused + // element gets removed from the DOM and stops propagating click events. + handleKeyElement.on('keydown', boundKeyHandler); + + $scope.$on('$destroy', function() { + handleKeyElement.off('keydown', boundKeyHandler); + }); + + // For Angular 1.4 and older, where there are no lifecycle hooks but bindings are pre-assigned, + // manually call the $onInit hook. + if (angular.version.major === 1 && angular.version.minor <= 4) { + this.$onInit(); + } + + } + + /** + * Angular Lifecycle hook for newer Angular versions. + * Bindings are not guaranteed to have been assigned in the controller, but they are in the $onInit hook. + */ + CalendarCtrl.prototype.$onInit = function() { + + /** + * The currently visible calendar view. Note the prefix on the scope value, + * which is necessary, because the datepicker seems to reset the real one value if the + * calendar is open, but the value on the datepicker's scope is empty. + * @type {String} + */ + this.currentView = this._currentView || 'month'; + + var dateLocale = this.$mdDateLocale; + + if (this.minDate && this.minDate > dateLocale.firstRenderableDate) { + this.firstRenderableDate = this.minDate; + } else { + this.firstRenderableDate = dateLocale.firstRenderableDate; + } + + if (this.maxDate && this.maxDate < dateLocale.lastRenderableDate) { + this.lastRenderableDate = this.maxDate; + } else { + this.lastRenderableDate = dateLocale.lastRenderableDate; + } + }; + + /** + * Sets up the controller's reference to ngModelController. + * @param {!angular.NgModelController} ngModelCtrl + */ + CalendarCtrl.prototype.configureNgModel = function(ngModelCtrl) { + var self = this; + + self.ngModelCtrl = ngModelCtrl; + + self.$mdUtil.nextTick(function() { + self.isInitialized = true; + }); + + ngModelCtrl.$render = function() { + var value = this.$viewValue; + + // Notify the child scopes of any changes. + self.$scope.$broadcast('md-calendar-parent-changed', value); + + // Set up the selectedDate if it hasn't been already. + if (!self.selectedDate) { + self.selectedDate = value; + } + + // Also set up the displayDate. + if (!self.displayDate) { + self.displayDate = self.selectedDate || self.today; + } + }; + }; + + /** + * Sets the ng-model value for the calendar and emits a change event. + * @param {Date} date + */ + CalendarCtrl.prototype.setNgModelValue = function(date) { + var value = this.dateUtil.createDateAtMidnight(date); + this.focus(value); + this.$scope.$emit('md-calendar-change', value); + this.ngModelCtrl.$setViewValue(value); + this.ngModelCtrl.$render(); + return value; + }; + + /** + * Sets the current view that should be visible in the calendar + * @param {string} newView View name to be set. + * @param {number|Date} time Date object or a timestamp for the new display date. + */ + CalendarCtrl.prototype.setCurrentView = function(newView, time) { + var self = this; + + self.$mdUtil.nextTick(function() { + self.currentView = newView; + + if (time) { + self.displayDate = angular.isDate(time) ? time : new Date(time); + } + }); + }; + + /** + * Focus the cell corresponding to the given date. + * @param {Date} date The date to be focused. + */ + CalendarCtrl.prototype.focus = function(date) { + if (this.dateUtil.isValidDate(date)) { + var previousFocus = this.$element[0].querySelector('.md-focus'); + if (previousFocus) { + previousFocus.classList.remove(this.FOCUSED_DATE_CLASS); + } + + var cellId = this.getDateId(date, this.currentView); + var cell = document.getElementById(cellId); + if (cell) { + cell.classList.add(this.FOCUSED_DATE_CLASS); + cell.focus(); + this.displayDate = date; + } + } else { + var rootElement = this.$element[0].querySelector('[ng-switch]'); + + if (rootElement) { + rootElement.focus(); + } + } + }; + + /** + * Normalizes the key event into an action name. The action will be broadcast + * to the child controllers. + * @param {KeyboardEvent} event + * @returns {String} The action that should be taken, or null if the key + * does not match a calendar shortcut. + */ + CalendarCtrl.prototype.getActionFromKeyEvent = function(event) { + var keyCode = this.keyCode; + + switch (event.which) { + case keyCode.ENTER: return 'select'; + + case keyCode.RIGHT_ARROW: return 'move-right'; + case keyCode.LEFT_ARROW: return 'move-left'; + + // TODO(crisbeto): Might want to reconsider using metaKey, because it maps + // to the "Windows" key on PC, which opens the start menu or resizes the browser. + case keyCode.DOWN_ARROW: return event.metaKey ? 'move-page-down' : 'move-row-down'; + case keyCode.UP_ARROW: return event.metaKey ? 'move-page-up' : 'move-row-up'; + + case keyCode.PAGE_DOWN: return 'move-page-down'; + case keyCode.PAGE_UP: return 'move-page-up'; + + case keyCode.HOME: return 'start'; + case keyCode.END: return 'end'; + + default: return null; + } + }; + + /** + * Handles a key event in the calendar with the appropriate action. The action will either + * be to select the focused date or to navigate to focus a new date. + * @param {KeyboardEvent} event + */ + CalendarCtrl.prototype.handleKeyEvent = function(event) { + var self = this; + + this.$scope.$apply(function() { + // Capture escape and emit back up so that a wrapping component + // (such as a date-picker) can decide to close. + if (event.which == self.keyCode.ESCAPE || event.which == self.keyCode.TAB) { + self.$scope.$emit('md-calendar-close'); + + if (event.which == self.keyCode.TAB) { + event.preventDefault(); + } + + return; + } + + // Broadcast the action that any child controllers should take. + var action = self.getActionFromKeyEvent(event); + if (action) { + event.preventDefault(); + event.stopPropagation(); + self.$scope.$broadcast('md-calendar-parent-action', action); + } + }); + }; + + /** + * Hides the vertical scrollbar on the calendar scroller of a child controller by + * setting the width on the calendar scroller and the `overflow: hidden` wrapper + * around the scroller, and then setting a padding-right on the scroller equal + * to the width of the browser's scrollbar. + * + * This will cause a reflow. + * + * @param {object} childCtrl The child controller whose scrollbar should be hidden. + */ + CalendarCtrl.prototype.hideVerticalScrollbar = function(childCtrl) { + var self = this; + var element = childCtrl.$element[0]; + var scrollMask = element.querySelector('.md-calendar-scroll-mask'); + + if (self.width > 0) { + setWidth(); + } else { + self.$$rAF(function() { + var scroller = childCtrl.calendarScroller; + + self.scrollbarWidth = scroller.offsetWidth - scroller.clientWidth; + self.width = element.querySelector('table').offsetWidth; + setWidth(); + }); + } + + function setWidth() { + var width = self.width || FALLBACK_WIDTH; + var scrollbarWidth = self.scrollbarWidth; + var scroller = childCtrl.calendarScroller; + + scrollMask.style.width = width + 'px'; + scroller.style.width = (width + scrollbarWidth) + 'px'; + scroller.style.paddingRight = scrollbarWidth + 'px'; + } + }; + + /** + * Gets an identifier for a date unique to the calendar instance for internal + * purposes. Not to be displayed. + * @param {Date} date The date for which the id is being generated + * @param {string} namespace Namespace for the id. (month, year etc.) + * @returns {string} + */ + CalendarCtrl.prototype.getDateId = function(date, namespace) { + if (!namespace) { + throw new Error('A namespace for the date id has to be specified.'); + } + + return [ + 'md', + this.id, + namespace, + date.getFullYear(), + date.getMonth(), + date.getDate() + ].join('-'); + }; + + /** + * Util to trigger an extra digest on a parent scope, in order to to ensure that + * any child virtual repeaters have updated. This is necessary, because the virtual + * repeater doesn't update the $index the first time around since the content isn't + * in place yet. The case, in which this is an issue, is when the repeater has less + * than a page of content (e.g. a month or year view has a min or max date). + */ + CalendarCtrl.prototype.updateVirtualRepeat = function() { + var scope = this.$scope; + var virtualRepeatResizeListener = scope.$on('$md-resize-enable', function() { + if (!scope.$$phase) { + scope.$apply(); + } + + virtualRepeatResizeListener(); + }); + }; +})(); + +(function() { + 'use strict'; + + CalendarMonthCtrl['$inject'] = ["$element", "$scope", "$animate", "$q", "$$mdDateUtil", "$mdDateLocale"]; + angular.module('material.components.datepicker') + .directive('mdCalendarMonth', calendarDirective); + + /** + * Height of one calendar month tbody. This must be made known to the virtual-repeat and is + * subsequently used for scrolling to specific months. + */ + var TBODY_HEIGHT = 265; + + /** + * Height of a calendar month with a single row. This is needed to calculate the offset for + * rendering an extra month in virtual-repeat that only contains one row. + */ + var TBODY_SINGLE_ROW_HEIGHT = 45; + + /** Private directive that represents a list of months inside the calendar. */ + function calendarDirective() { + return { + template: + '<table aria-hidden="true" class="md-calendar-day-header"><thead></thead></table>' + + '<div class="md-calendar-scroll-mask">' + + '<md-virtual-repeat-container class="md-calendar-scroll-container" ' + + 'md-offset-size="' + (TBODY_SINGLE_ROW_HEIGHT - TBODY_HEIGHT) + '">' + + '<table role="grid" tabindex="0" class="md-calendar" aria-readonly="true">' + + '<tbody ' + + 'md-calendar-month-body ' + + 'role="rowgroup" ' + + 'md-virtual-repeat="i in monthCtrl.items" ' + + 'md-month-offset="$index" ' + + 'class="md-calendar-month" ' + + 'md-start-index="monthCtrl.getSelectedMonthIndex()" ' + + 'md-item-size="' + TBODY_HEIGHT + '">' + + + // The <tr> ensures that the <tbody> will always have the + // proper height, even if it's empty. If it's content is + // compiled, the <tr> will be overwritten. + '<tr aria-hidden="true" style="height:' + TBODY_HEIGHT + 'px;"></tr>' + + '</tbody>' + + '</table>' + + '</md-virtual-repeat-container>' + + '</div>', + require: ['^^mdCalendar', 'mdCalendarMonth'], + controller: CalendarMonthCtrl, + controllerAs: 'monthCtrl', + bindToController: true, + link: function(scope, element, attrs, controllers) { + var calendarCtrl = controllers[0]; + var monthCtrl = controllers[1]; + monthCtrl.initialize(calendarCtrl); + } + }; + } + + /** + * Controller for the calendar month component. + * ngInject @constructor + */ + function CalendarMonthCtrl($element, $scope, $animate, $q, + $$mdDateUtil, $mdDateLocale) { + + /** @final {!angular.JQLite} */ + this.$element = $element; + + /** @final {!angular.Scope} */ + this.$scope = $scope; + + /** @final {!angular.$animate} */ + this.$animate = $animate; + + /** @final {!angular.$q} */ + this.$q = $q; + + /** @final */ + this.dateUtil = $$mdDateUtil; + + /** @final */ + this.dateLocale = $mdDateLocale; + + /** @final {HTMLElement} */ + this.calendarScroller = $element[0].querySelector('.md-virtual-repeat-scroller'); + + /** @type {boolean} */ + this.isInitialized = false; + + /** @type {boolean} */ + this.isMonthTransitionInProgress = false; + + var self = this; + + /** + * Handles a click event on a date cell. + * Created here so that every cell can use the same function instance. + * @this {HTMLTableCellElement} The cell that was clicked. + */ + this.cellClickHandler = function() { + var timestamp = $$mdDateUtil.getTimestampFromNode(this); + self.$scope.$apply(function() { + self.calendarCtrl.setNgModelValue(timestamp); + }); + }; + + /** + * Handles click events on the month headers. Switches + * the calendar to the year view. + * @this {HTMLTableCellElement} The cell that was clicked. + */ + this.headerClickHandler = function() { + self.calendarCtrl.setCurrentView('year', $$mdDateUtil.getTimestampFromNode(this)); + }; + } + + /*** Initialization ***/ + + /** + * Initialize the controller by saving a reference to the calendar and + * setting up the object that will be iterated by the virtual repeater. + */ + CalendarMonthCtrl.prototype.initialize = function(calendarCtrl) { + /** + * Dummy array-like object for virtual-repeat to iterate over. The length is the total + * number of months that can be viewed. We add 2 months: one to include the current month + * and one for the last dummy month. + * + * This is shorter than ideal because of a (potential) Firefox bug + * https://bugzilla.mozilla.org/show_bug.cgi?id=1181658. + */ + + this.items = { + length: this.dateUtil.getMonthDistance( + calendarCtrl.firstRenderableDate, + calendarCtrl.lastRenderableDate + ) + 2 + }; + + this.calendarCtrl = calendarCtrl; + this.attachScopeListeners(); + calendarCtrl.updateVirtualRepeat(); + + // Fire the initial render, since we might have missed it the first time it fired. + calendarCtrl.ngModelCtrl && calendarCtrl.ngModelCtrl.$render(); + }; + + /** + * Gets the "index" of the currently selected date as it would be in the virtual-repeat. + * @returns {number} + */ + CalendarMonthCtrl.prototype.getSelectedMonthIndex = function() { + var calendarCtrl = this.calendarCtrl; + + return this.dateUtil.getMonthDistance( + calendarCtrl.firstRenderableDate, + calendarCtrl.displayDate || calendarCtrl.selectedDate || calendarCtrl.today + ); + }; + + /** + * Change the selected date in the calendar (ngModel value has already been changed). + * @param {Date} date + */ + CalendarMonthCtrl.prototype.changeSelectedDate = function(date) { + var self = this; + var calendarCtrl = self.calendarCtrl; + var previousSelectedDate = calendarCtrl.selectedDate; + calendarCtrl.selectedDate = date; + + this.changeDisplayDate(date).then(function() { + var selectedDateClass = calendarCtrl.SELECTED_DATE_CLASS; + var namespace = 'month'; + + // Remove the selected class from the previously selected date, if any. + if (previousSelectedDate) { + var prevDateCell = document.getElementById(calendarCtrl.getDateId(previousSelectedDate, namespace)); + if (prevDateCell) { + prevDateCell.classList.remove(selectedDateClass); + prevDateCell.setAttribute('aria-selected', 'false'); + } + } + + // Apply the select class to the new selected date if it is set. + if (date) { + var dateCell = document.getElementById(calendarCtrl.getDateId(date, namespace)); + if (dateCell) { + dateCell.classList.add(selectedDateClass); + dateCell.setAttribute('aria-selected', 'true'); + } + } + }); + }; + + /** + * Change the date that is being shown in the calendar. If the given date is in a different + * month, the displayed month will be transitioned. + * @param {Date} date + */ + CalendarMonthCtrl.prototype.changeDisplayDate = function(date) { + // Initialization is deferred until this function is called because we want to reflect + // the starting value of ngModel. + if (!this.isInitialized) { + this.buildWeekHeader(); + this.calendarCtrl.hideVerticalScrollbar(this); + this.isInitialized = true; + return this.$q.when(); + } + + // If trying to show an invalid date or a transition is in progress, do nothing. + if (!this.dateUtil.isValidDate(date) || this.isMonthTransitionInProgress) { + return this.$q.when(); + } + + this.isMonthTransitionInProgress = true; + var animationPromise = this.animateDateChange(date); + + this.calendarCtrl.displayDate = date; + + var self = this; + animationPromise.then(function() { + self.isMonthTransitionInProgress = false; + }); + + return animationPromise; + }; + + /** + * Animates the transition from the calendar's current month to the given month. + * @param {Date} date + * @returns {angular.$q.Promise} The animation promise. + */ + CalendarMonthCtrl.prototype.animateDateChange = function(date) { + if (this.dateUtil.isValidDate(date)) { + var monthDistance = this.dateUtil.getMonthDistance(this.calendarCtrl.firstRenderableDate, date); + this.calendarScroller.scrollTop = monthDistance * TBODY_HEIGHT; + } + + return this.$q.when(); + }; + + /** + * Builds and appends a day-of-the-week header to the calendar. + * This should only need to be called once during initialization. + */ + CalendarMonthCtrl.prototype.buildWeekHeader = function() { + var firstDayOfWeek = this.dateLocale.firstDayOfWeek; + var shortDays = this.dateLocale.shortDays; + + var row = document.createElement('tr'); + for (var i = 0; i < 7; i++) { + var th = document.createElement('th'); + th.textContent = shortDays[(i + firstDayOfWeek) % 7]; + row.appendChild(th); + } + + this.$element.find('thead').append(row); + }; + + /** + * Attaches listeners for the scope events that are broadcast by the calendar. + */ + CalendarMonthCtrl.prototype.attachScopeListeners = function() { + var self = this; + + self.$scope.$on('md-calendar-parent-changed', function(event, value) { + self.changeSelectedDate(value); + }); + + self.$scope.$on('md-calendar-parent-action', angular.bind(this, this.handleKeyEvent)); + }; + + /** + * Handles the month-specific keyboard interactions. + * @param {Object} event Scope event object passed by the calendar. + * @param {String} action Action, corresponding to the key that was pressed. + */ + CalendarMonthCtrl.prototype.handleKeyEvent = function(event, action) { + var calendarCtrl = this.calendarCtrl; + var displayDate = calendarCtrl.displayDate; + + if (action === 'select') { + calendarCtrl.setNgModelValue(displayDate); + } else { + var date = null; + var dateUtil = this.dateUtil; + + switch (action) { + case 'move-right': date = dateUtil.incrementDays(displayDate, 1); break; + case 'move-left': date = dateUtil.incrementDays(displayDate, -1); break; + + case 'move-page-down': date = dateUtil.incrementMonths(displayDate, 1); break; + case 'move-page-up': date = dateUtil.incrementMonths(displayDate, -1); break; + + case 'move-row-down': date = dateUtil.incrementDays(displayDate, 7); break; + case 'move-row-up': date = dateUtil.incrementDays(displayDate, -7); break; + + case 'start': date = dateUtil.getFirstDateOfMonth(displayDate); break; + case 'end': date = dateUtil.getLastDateOfMonth(displayDate); break; + } + + if (date) { + date = this.dateUtil.clampDate(date, calendarCtrl.minDate, calendarCtrl.maxDate); + + this.changeDisplayDate(date).then(function() { + calendarCtrl.focus(date); + }); + } + } + }; +})(); + +(function() { + 'use strict'; + + mdCalendarMonthBodyDirective['$inject'] = ["$compile", "$$mdSvgRegistry"]; + CalendarMonthBodyCtrl['$inject'] = ["$element", "$$mdDateUtil", "$mdDateLocale"]; + angular.module('material.components.datepicker') + .directive('mdCalendarMonthBody', mdCalendarMonthBodyDirective); + + /** + * Private directive consumed by md-calendar-month. Having this directive lets the calender use + * md-virtual-repeat and also cleanly separates the month DOM construction functions from + * the rest of the calendar controller logic. + * ngInject + */ + function mdCalendarMonthBodyDirective($compile, $$mdSvgRegistry) { + var ARROW_ICON = $compile('<md-icon md-svg-src="' + + $$mdSvgRegistry.mdTabsArrow + '"></md-icon>')({})[0]; + + return { + require: ['^^mdCalendar', '^^mdCalendarMonth', 'mdCalendarMonthBody'], + scope: { offset: '=mdMonthOffset' }, + controller: CalendarMonthBodyCtrl, + controllerAs: 'mdMonthBodyCtrl', + bindToController: true, + link: function(scope, element, attrs, controllers) { + var calendarCtrl = controllers[0]; + var monthCtrl = controllers[1]; + var monthBodyCtrl = controllers[2]; + + monthBodyCtrl.calendarCtrl = calendarCtrl; + monthBodyCtrl.monthCtrl = monthCtrl; + monthBodyCtrl.arrowIcon = ARROW_ICON.cloneNode(true); + + // The virtual-repeat re-uses the same DOM elements, so there are only a limited number + // of repeated items that are linked, and then those elements have their bindings updated. + // Since the months are not generated by bindings, we simply regenerate the entire thing + // when the binding (offset) changes. + scope.$watch(function() { return monthBodyCtrl.offset; }, function(offset) { + if (angular.isNumber(offset)) { + monthBodyCtrl.generateContent(); + } + }); + } + }; + } + + /** + * Controller for a single calendar month. + * ngInject @constructor + */ + function CalendarMonthBodyCtrl($element, $$mdDateUtil, $mdDateLocale) { + /** @final {!angular.JQLite} */ + this.$element = $element; + + /** @final */ + this.dateUtil = $$mdDateUtil; + + /** @final */ + this.dateLocale = $mdDateLocale; + + /** @type {Object} Reference to the month view. */ + this.monthCtrl = null; + + /** @type {Object} Reference to the calendar. */ + this.calendarCtrl = null; + + /** + * Number of months from the start of the month "items" that the currently rendered month + * occurs. Set via angular data binding. + * @type {number} + */ + this.offset = null; + + /** + * Date cell to focus after appending the month to the document. + * @type {HTMLElement} + */ + this.focusAfterAppend = null; + } + + /** Generate and append the content for this month to the directive element. */ + CalendarMonthBodyCtrl.prototype.generateContent = function() { + var date = this.dateUtil.incrementMonths(this.calendarCtrl.firstRenderableDate, this.offset); + + this.$element + .empty() + .append(this.buildCalendarForMonth(date)); + + if (this.focusAfterAppend) { + this.focusAfterAppend.classList.add(this.calendarCtrl.FOCUSED_DATE_CLASS); + this.focusAfterAppend.focus(); + this.focusAfterAppend = null; + } + }; + + /** + * Creates a single cell to contain a date in the calendar with all appropriate + * attributes and classes added. If a date is given, the cell content will be set + * based on the date. + * @param {Date=} opt_date + * @returns {HTMLElement} + */ + CalendarMonthBodyCtrl.prototype.buildDateCell = function(opt_date) { + var monthCtrl = this.monthCtrl; + var calendarCtrl = this.calendarCtrl; + + // TODO(jelbourn): cloneNode is likely a faster way of doing this. + var cell = document.createElement('td'); + cell.tabIndex = -1; + cell.classList.add('md-calendar-date'); + cell.setAttribute('role', 'gridcell'); + + if (opt_date) { + cell.setAttribute('tabindex', '-1'); + cell.setAttribute('aria-label', this.dateLocale.longDateFormatter(opt_date)); + cell.id = calendarCtrl.getDateId(opt_date, 'month'); + + // Use `data-timestamp` attribute because IE10 does not support the `dataset` property. + cell.setAttribute('data-timestamp', opt_date.getTime()); + + // TODO(jelourn): Doing these comparisons for class addition during generation might be slow. + // It may be better to finish the construction and then query the node and add the class. + if (this.dateUtil.isSameDay(opt_date, calendarCtrl.today)) { + cell.classList.add(calendarCtrl.TODAY_CLASS); + } + + if (this.dateUtil.isValidDate(calendarCtrl.selectedDate) && + this.dateUtil.isSameDay(opt_date, calendarCtrl.selectedDate)) { + cell.classList.add(calendarCtrl.SELECTED_DATE_CLASS); + cell.setAttribute('aria-selected', 'true'); + } + + var cellText = this.dateLocale.dates[opt_date.getDate()]; + + if (this.isDateEnabled(opt_date)) { + // Add a indicator for select, hover, and focus states. + var selectionIndicator = document.createElement('span'); + selectionIndicator.classList.add('md-calendar-date-selection-indicator'); + selectionIndicator.textContent = cellText; + cell.appendChild(selectionIndicator); + cell.addEventListener('click', monthCtrl.cellClickHandler); + + if (calendarCtrl.displayDate && this.dateUtil.isSameDay(opt_date, calendarCtrl.displayDate)) { + this.focusAfterAppend = cell; + } + } else { + cell.classList.add('md-calendar-date-disabled'); + cell.textContent = cellText; + } + } + + return cell; + }; + + /** + * Check whether date is in range and enabled + * @param {Date=} opt_date + * @return {boolean} Whether the date is enabled. + */ + CalendarMonthBodyCtrl.prototype.isDateEnabled = function(opt_date) { + return this.dateUtil.isDateWithinRange(opt_date, + this.calendarCtrl.minDate, this.calendarCtrl.maxDate) && + (!angular.isFunction(this.calendarCtrl.dateFilter) + || this.calendarCtrl.dateFilter(opt_date)); + }; + + /** + * Builds a `tr` element for the calendar grid. + * @param rowNumber The week number within the month. + * @returns {HTMLElement} + */ + CalendarMonthBodyCtrl.prototype.buildDateRow = function(rowNumber) { + var row = document.createElement('tr'); + row.setAttribute('role', 'row'); + + // Because of an NVDA bug (with Firefox), the row needs an aria-label in order + // to prevent the entire row being read aloud when the user moves between rows. + // See http://community.nvda-project.org/ticket/4643. + row.setAttribute('aria-label', this.dateLocale.weekNumberFormatter(rowNumber)); + + return row; + }; + + /** + * Builds the <tbody> content for the given date's month. + * @param {Date=} opt_dateInMonth + * @returns {DocumentFragment} A document fragment containing the <tr> elements. + */ + CalendarMonthBodyCtrl.prototype.buildCalendarForMonth = function(opt_dateInMonth) { + var date = this.dateUtil.isValidDate(opt_dateInMonth) ? opt_dateInMonth : new Date(); + + var firstDayOfMonth = this.dateUtil.getFirstDateOfMonth(date); + var firstDayOfTheWeek = this.getLocaleDay_(firstDayOfMonth); + var numberOfDaysInMonth = this.dateUtil.getNumberOfDaysInMonth(date); + + // Store rows for the month in a document fragment so that we can append them all at once. + var monthBody = document.createDocumentFragment(); + + var rowNumber = 1; + var row = this.buildDateRow(rowNumber); + monthBody.appendChild(row); + + // If this is the final month in the list of items, only the first week should render, + // so we should return immediately after the first row is complete and has been + // attached to the body. + var isFinalMonth = this.offset === this.monthCtrl.items.length - 1; + + // Add a label for the month. If the month starts on a Sun/Mon/Tues, the month label + // goes on a row above the first of the month. Otherwise, the month label takes up the first + // two cells of the first row. + var blankCellOffset = 0; + var monthLabelCell = document.createElement('td'); + var monthLabelCellContent = document.createElement('span'); + + monthLabelCellContent.textContent = this.dateLocale.monthHeaderFormatter(date); + monthLabelCell.appendChild(monthLabelCellContent); + monthLabelCell.classList.add('md-calendar-month-label'); + // If the entire month is after the max date, render the label as a disabled state. + if (this.calendarCtrl.maxDate && firstDayOfMonth > this.calendarCtrl.maxDate) { + monthLabelCell.classList.add('md-calendar-month-label-disabled'); + } else { + monthLabelCell.addEventListener('click', this.monthCtrl.headerClickHandler); + monthLabelCell.setAttribute('data-timestamp', firstDayOfMonth.getTime()); + monthLabelCell.setAttribute('aria-label', this.dateLocale.monthFormatter(date)); + monthLabelCell.appendChild(this.arrowIcon.cloneNode(true)); + } + + if (firstDayOfTheWeek <= 2) { + monthLabelCell.setAttribute('colspan', '7'); + + var monthLabelRow = this.buildDateRow(); + monthLabelRow.appendChild(monthLabelCell); + monthBody.insertBefore(monthLabelRow, row); + + if (isFinalMonth) { + return monthBody; + } + } else { + blankCellOffset = 3; + monthLabelCell.setAttribute('colspan', '3'); + row.appendChild(monthLabelCell); + } + + // Add a blank cell for each day of the week that occurs before the first of the month. + // For example, if the first day of the month is a Tuesday, add blank cells for Sun and Mon. + // The blankCellOffset is needed in cases where the first N cells are used by the month label. + for (var i = blankCellOffset; i < firstDayOfTheWeek; i++) { + row.appendChild(this.buildDateCell()); + } + + // Add a cell for each day of the month, keeping track of the day of the week so that + // we know when to start a new row. + var dayOfWeek = firstDayOfTheWeek; + var iterationDate = firstDayOfMonth; + for (var d = 1; d <= numberOfDaysInMonth; d++) { + // If we've reached the end of the week, start a new row. + if (dayOfWeek === 7) { + // We've finished the first row, so we're done if this is the final month. + if (isFinalMonth) { + return monthBody; + } + dayOfWeek = 0; + rowNumber++; + row = this.buildDateRow(rowNumber); + monthBody.appendChild(row); + } + + iterationDate.setDate(d); + var cell = this.buildDateCell(iterationDate); + row.appendChild(cell); + + dayOfWeek++; + } + + // Ensure that the last row of the month has 7 cells. + while (row.childNodes.length < 7) { + row.appendChild(this.buildDateCell()); + } + + // Ensure that all months have 6 rows. This is necessary for now because the virtual-repeat + // requires that all items have exactly the same height. + while (monthBody.childNodes.length < 6) { + var whitespaceRow = this.buildDateRow(); + for (var j = 0; j < 7; j++) { + whitespaceRow.appendChild(this.buildDateCell()); + } + monthBody.appendChild(whitespaceRow); + } + + return monthBody; + }; + + /** + * Gets the day-of-the-week index for a date for the current locale. + * @private + * @param {Date} date + * @returns {number} The column index of the date in the calendar. + */ + CalendarMonthBodyCtrl.prototype.getLocaleDay_ = function(date) { + return (date.getDay() + (7 - this.dateLocale.firstDayOfWeek)) % 7; + }; +})(); + +(function() { + 'use strict'; + + CalendarYearCtrl['$inject'] = ["$element", "$scope", "$animate", "$q", "$$mdDateUtil"]; + angular.module('material.components.datepicker') + .directive('mdCalendarYear', calendarDirective); + + /** + * Height of one calendar year tbody. This must be made known to the virtual-repeat and is + * subsequently used for scrolling to specific years. + */ + var TBODY_HEIGHT = 88; + + /** Private component, representing a list of years in the calendar. */ + function calendarDirective() { + return { + template: + '<div class="md-calendar-scroll-mask">' + + '<md-virtual-repeat-container class="md-calendar-scroll-container">' + + '<table role="grid" tabindex="0" class="md-calendar" aria-readonly="true">' + + '<tbody ' + + 'md-calendar-year-body ' + + 'role="rowgroup" ' + + 'md-virtual-repeat="i in yearCtrl.items" ' + + 'md-year-offset="$index" class="md-calendar-year" ' + + 'md-start-index="yearCtrl.getFocusedYearIndex()" ' + + 'md-item-size="' + TBODY_HEIGHT + '">' + + // The <tr> ensures that the <tbody> will have the proper + // height, even though it may be empty. + '<tr aria-hidden="true" style="height:' + TBODY_HEIGHT + 'px;"></tr>' + + '</tbody>' + + '</table>' + + '</md-virtual-repeat-container>' + + '</div>', + require: ['^^mdCalendar', 'mdCalendarYear'], + controller: CalendarYearCtrl, + controllerAs: 'yearCtrl', + bindToController: true, + link: function(scope, element, attrs, controllers) { + var calendarCtrl = controllers[0]; + var yearCtrl = controllers[1]; + yearCtrl.initialize(calendarCtrl); + } + }; + } + + /** + * Controller for the mdCalendar component. + * ngInject @constructor + */ + function CalendarYearCtrl($element, $scope, $animate, $q, $$mdDateUtil) { + + /** @final {!angular.JQLite} */ + this.$element = $element; + + /** @final {!angular.Scope} */ + this.$scope = $scope; + + /** @final {!angular.$animate} */ + this.$animate = $animate; + + /** @final {!angular.$q} */ + this.$q = $q; + + /** @final */ + this.dateUtil = $$mdDateUtil; + + /** @final {HTMLElement} */ + this.calendarScroller = $element[0].querySelector('.md-virtual-repeat-scroller'); + + /** @type {boolean} */ + this.isInitialized = false; + + /** @type {boolean} */ + this.isMonthTransitionInProgress = false; + + var self = this; + + /** + * Handles a click event on a date cell. + * Created here so that every cell can use the same function instance. + * @this {HTMLTableCellElement} The cell that was clicked. + */ + this.cellClickHandler = function() { + self.calendarCtrl.setCurrentView('month', $$mdDateUtil.getTimestampFromNode(this)); + }; + } + + /** + * Initialize the controller by saving a reference to the calendar and + * setting up the object that will be iterated by the virtual repeater. + */ + CalendarYearCtrl.prototype.initialize = function(calendarCtrl) { + /** + * Dummy array-like object for virtual-repeat to iterate over. The length is the total + * number of years that can be viewed. We add 1 extra in order to include the current year. + */ + this.items = { + length: this.dateUtil.getYearDistance( + calendarCtrl.firstRenderableDate, + calendarCtrl.lastRenderableDate + ) + 1 + }; + + this.calendarCtrl = calendarCtrl; + this.attachScopeListeners(); + calendarCtrl.updateVirtualRepeat(); + + // Fire the initial render, since we might have missed it the first time it fired. + calendarCtrl.ngModelCtrl && calendarCtrl.ngModelCtrl.$render(); + }; + + /** + * Gets the "index" of the currently selected date as it would be in the virtual-repeat. + * @returns {number} + */ + CalendarYearCtrl.prototype.getFocusedYearIndex = function() { + var calendarCtrl = this.calendarCtrl; + + return this.dateUtil.getYearDistance( + calendarCtrl.firstRenderableDate, + calendarCtrl.displayDate || calendarCtrl.selectedDate || calendarCtrl.today + ); + }; + + /** + * Change the date that is highlighted in the calendar. + * @param {Date} date + */ + CalendarYearCtrl.prototype.changeDate = function(date) { + // Initialization is deferred until this function is called because we want to reflect + // the starting value of ngModel. + if (!this.isInitialized) { + this.calendarCtrl.hideVerticalScrollbar(this); + this.isInitialized = true; + return this.$q.when(); + } else if (this.dateUtil.isValidDate(date) && !this.isMonthTransitionInProgress) { + var self = this; + var animationPromise = this.animateDateChange(date); + + self.isMonthTransitionInProgress = true; + self.calendarCtrl.displayDate = date; + + return animationPromise.then(function() { + self.isMonthTransitionInProgress = false; + }); + } + }; + + /** + * Animates the transition from the calendar's current month to the given month. + * @param {Date} date + * @returns {angular.$q.Promise} The animation promise. + */ + CalendarYearCtrl.prototype.animateDateChange = function(date) { + if (this.dateUtil.isValidDate(date)) { + var monthDistance = this.dateUtil.getYearDistance(this.calendarCtrl.firstRenderableDate, date); + this.calendarScroller.scrollTop = monthDistance * TBODY_HEIGHT; + } + + return this.$q.when(); + }; + + /** + * Handles the year-view-specific keyboard interactions. + * @param {Object} event Scope event object passed by the calendar. + * @param {String} action Action, corresponding to the key that was pressed. + */ + CalendarYearCtrl.prototype.handleKeyEvent = function(event, action) { + var calendarCtrl = this.calendarCtrl; + var displayDate = calendarCtrl.displayDate; + + if (action === 'select') { + this.changeDate(displayDate).then(function() { + calendarCtrl.setCurrentView('month', displayDate); + calendarCtrl.focus(displayDate); + }); + } else { + var date = null; + var dateUtil = this.dateUtil; + + switch (action) { + case 'move-right': date = dateUtil.incrementMonths(displayDate, 1); break; + case 'move-left': date = dateUtil.incrementMonths(displayDate, -1); break; + + case 'move-row-down': date = dateUtil.incrementMonths(displayDate, 6); break; + case 'move-row-up': date = dateUtil.incrementMonths(displayDate, -6); break; + } + + if (date) { + var min = calendarCtrl.minDate ? dateUtil.getFirstDateOfMonth(calendarCtrl.minDate) : null; + var max = calendarCtrl.maxDate ? dateUtil.getFirstDateOfMonth(calendarCtrl.maxDate) : null; + date = dateUtil.getFirstDateOfMonth(this.dateUtil.clampDate(date, min, max)); + + this.changeDate(date).then(function() { + calendarCtrl.focus(date); + }); + } + } + }; + + /** + * Attaches listeners for the scope events that are broadcast by the calendar. + */ + CalendarYearCtrl.prototype.attachScopeListeners = function() { + var self = this; + + self.$scope.$on('md-calendar-parent-changed', function(event, value) { + self.changeDate(value); + }); + + self.$scope.$on('md-calendar-parent-action', angular.bind(self, self.handleKeyEvent)); + }; +})(); + +(function() { + 'use strict'; + + CalendarYearBodyCtrl['$inject'] = ["$element", "$$mdDateUtil", "$mdDateLocale"]; + angular.module('material.components.datepicker') + .directive('mdCalendarYearBody', mdCalendarYearDirective); + + /** + * Private component, consumed by the md-calendar-year, which separates the DOM construction logic + * and allows for the year view to use md-virtual-repeat. + */ + function mdCalendarYearDirective() { + return { + require: ['^^mdCalendar', '^^mdCalendarYear', 'mdCalendarYearBody'], + scope: { offset: '=mdYearOffset' }, + controller: CalendarYearBodyCtrl, + controllerAs: 'mdYearBodyCtrl', + bindToController: true, + link: function(scope, element, attrs, controllers) { + var calendarCtrl = controllers[0]; + var yearCtrl = controllers[1]; + var yearBodyCtrl = controllers[2]; + + yearBodyCtrl.calendarCtrl = calendarCtrl; + yearBodyCtrl.yearCtrl = yearCtrl; + + scope.$watch(function() { return yearBodyCtrl.offset; }, function(offset) { + if (angular.isNumber(offset)) { + yearBodyCtrl.generateContent(); + } + }); + } + }; + } + + /** + * Controller for a single year. + * ngInject @constructor + */ + function CalendarYearBodyCtrl($element, $$mdDateUtil, $mdDateLocale) { + /** @final {!angular.JQLite} */ + this.$element = $element; + + /** @final */ + this.dateUtil = $$mdDateUtil; + + /** @final */ + this.dateLocale = $mdDateLocale; + + /** @type {Object} Reference to the calendar. */ + this.calendarCtrl = null; + + /** @type {Object} Reference to the year view. */ + this.yearCtrl = null; + + /** + * Number of months from the start of the month "items" that the currently rendered month + * occurs. Set via angular data binding. + * @type {number} + */ + this.offset = null; + + /** + * Date cell to focus after appending the month to the document. + * @type {HTMLElement} + */ + this.focusAfterAppend = null; + } + + /** Generate and append the content for this year to the directive element. */ + CalendarYearBodyCtrl.prototype.generateContent = function() { + var date = this.dateUtil.incrementYears(this.calendarCtrl.firstRenderableDate, this.offset); + + this.$element + .empty() + .append(this.buildCalendarForYear(date)); + + if (this.focusAfterAppend) { + this.focusAfterAppend.classList.add(this.calendarCtrl.FOCUSED_DATE_CLASS); + this.focusAfterAppend.focus(); + this.focusAfterAppend = null; + } + }; + + /** + * Creates a single cell to contain a year in the calendar. + * @param {number} opt_year Four-digit year. + * @param {number} opt_month Zero-indexed month. + * @returns {HTMLElement} + */ + CalendarYearBodyCtrl.prototype.buildMonthCell = function(year, month) { + var calendarCtrl = this.calendarCtrl; + var yearCtrl = this.yearCtrl; + var cell = this.buildBlankCell(); + + // Represent this month/year as a date. + var firstOfMonth = new Date(year, month, 1); + cell.setAttribute('aria-label', this.dateLocale.monthFormatter(firstOfMonth)); + cell.id = calendarCtrl.getDateId(firstOfMonth, 'year'); + + // Use `data-timestamp` attribute because IE10 does not support the `dataset` property. + cell.setAttribute('data-timestamp', firstOfMonth.getTime()); + + if (this.dateUtil.isSameMonthAndYear(firstOfMonth, calendarCtrl.today)) { + cell.classList.add(calendarCtrl.TODAY_CLASS); + } + + if (this.dateUtil.isValidDate(calendarCtrl.selectedDate) && + this.dateUtil.isSameMonthAndYear(firstOfMonth, calendarCtrl.selectedDate)) { + cell.classList.add(calendarCtrl.SELECTED_DATE_CLASS); + cell.setAttribute('aria-selected', 'true'); + } + + var cellText = this.dateLocale.shortMonths[month]; + + if (this.dateUtil.isMonthWithinRange(firstOfMonth, + calendarCtrl.minDate, calendarCtrl.maxDate)) { + var selectionIndicator = document.createElement('span'); + selectionIndicator.classList.add('md-calendar-date-selection-indicator'); + selectionIndicator.textContent = cellText; + cell.appendChild(selectionIndicator); + cell.addEventListener('click', yearCtrl.cellClickHandler); + + if (calendarCtrl.displayDate && this.dateUtil.isSameMonthAndYear(firstOfMonth, calendarCtrl.displayDate)) { + this.focusAfterAppend = cell; + } + } else { + cell.classList.add('md-calendar-date-disabled'); + cell.textContent = cellText; + } + + return cell; + }; + + /** + * Builds a blank cell. + * @return {HTMLTableCellElement} + */ + CalendarYearBodyCtrl.prototype.buildBlankCell = function() { + var cell = document.createElement('td'); + cell.tabIndex = -1; + cell.classList.add('md-calendar-date'); + cell.setAttribute('role', 'gridcell'); + + cell.setAttribute('tabindex', '-1'); + return cell; + }; + + /** + * Builds the <tbody> content for the given year. + * @param {Date} date Date for which the content should be built. + * @returns {DocumentFragment} A document fragment containing the months within the year. + */ + CalendarYearBodyCtrl.prototype.buildCalendarForYear = function(date) { + // Store rows for the month in a document fragment so that we can append them all at once. + var year = date.getFullYear(); + var yearBody = document.createDocumentFragment(); + + var monthCell, i; + // First row contains label and Jan-Jun. + var firstRow = document.createElement('tr'); + var labelCell = document.createElement('td'); + labelCell.className = 'md-calendar-month-label'; + labelCell.textContent = year; + firstRow.appendChild(labelCell); + + for (i = 0; i < 6; i++) { + firstRow.appendChild(this.buildMonthCell(year, i)); + } + yearBody.appendChild(firstRow); + + // Second row contains a blank cell and Jul-Dec. + var secondRow = document.createElement('tr'); + secondRow.appendChild(this.buildBlankCell()); + for (i = 6; i < 12; i++) { + secondRow.appendChild(this.buildMonthCell(year, i)); + } + yearBody.appendChild(secondRow); + + return yearBody; + }; +})(); + +(function() { + 'use strict'; + + /** + * @ngdoc service + * @name $mdDateLocaleProvider + * @module material.components.datepicker + * + * @description + * The `$mdDateLocaleProvider` is the provider that creates the `$mdDateLocale` service. + * This provider that allows the user to specify messages, formatters, and parsers for date + * internationalization. The `$mdDateLocale` service itself is consumed by Angular Material + * components that deal with dates. + * + * @property {(Array<string>)=} months Array of month names (in order). + * @property {(Array<string>)=} shortMonths Array of abbreviated month names. + * @property {(Array<string>)=} days Array of the days of the week (in order). + * @property {(Array<string>)=} shortDays Array of abbreviated dayes of the week. + * @property {(Array<string>)=} dates Array of dates of the month. Only necessary for locales + * using a numeral system other than [1, 2, 3...]. + * @property {(Array<string>)=} firstDayOfWeek The first day of the week. Sunday = 0, Monday = 1, + * etc. + * @property {(function(string): Date)=} parseDate Function to parse a date object from a string. + * @property {(function(Date, string): string)=} formatDate Function to format a date object to a + * string. The datepicker directive also provides the time zone, if it was specified. + * @property {(function(Date): string)=} monthHeaderFormatter Function that returns the label for + * a month given a date. + * @property {(function(Date): string)=} monthFormatter Function that returns the full name of a month + * for a giben date. + * @property {(function(number): string)=} weekNumberFormatter Function that returns a label for + * a week given the week number. + * @property {(string)=} msgCalendar Translation of the label "Calendar" for the current locale. + * @property {(string)=} msgOpenCalendar Translation of the button label "Open calendar" for the + * current locale. + * @property {Date=} firstRenderableDate The date from which the datepicker calendar will begin + * rendering. Note that this will be ignored if a minimum date is set. Defaults to January 1st 1880. + * @property {Date=} lastRenderableDate The last date that will be rendered by the datepicker + * calendar. Note that this will be ignored if a maximum date is set. Defaults to January 1st 2130. + * + * @usage + * <hljs lang="js"> + * myAppModule.config(function($mdDateLocaleProvider) { + * + * // Example of a French localization. + * $mdDateLocaleProvider.months = ['janvier', 'février', 'mars', ...]; + * $mdDateLocaleProvider.shortMonths = ['janv', 'févr', 'mars', ...]; + * $mdDateLocaleProvider.days = ['dimanche', 'lundi', 'mardi', ...]; + * $mdDateLocaleProvider.shortDays = ['Di', 'Lu', 'Ma', ...]; + * + * // Can change week display to start on Monday. + * $mdDateLocaleProvider.firstDayOfWeek = 1; + * + * // Optional. + * $mdDateLocaleProvider.dates = [1, 2, 3, 4, 5, 6, ...]; + * + * // Example uses moment.js to parse and format dates. + * $mdDateLocaleProvider.parseDate = function(dateString) { + * var m = moment(dateString, 'L', true); + * return m.isValid() ? m.toDate() : new Date(NaN); + * }; + * + * $mdDateLocaleProvider.formatDate = function(date) { + * var m = moment(date); + * return m.isValid() ? m.format('L') : ''; + * }; + * + * $mdDateLocaleProvider.monthHeaderFormatter = function(date) { + * return myShortMonths[date.getMonth()] + ' ' + date.getFullYear(); + * }; + * + * // In addition to date display, date components also need localized messages + * // for aria-labels for screen-reader users. + * + * $mdDateLocaleProvider.weekNumberFormatter = function(weekNumber) { + * return 'Semaine ' + weekNumber; + * }; + * + * $mdDateLocaleProvider.msgCalendar = 'Calendrier'; + * $mdDateLocaleProvider.msgOpenCalendar = 'Ouvrir le calendrier'; + * + * // You can also set when your calendar begins and ends. + * $mdDateLocaleProvider.firstRenderableDate = new Date(1776, 6, 4); + * $mdDateLocaleProvider.lastRenderableDate = new Date(2012, 11, 21); + * }); + * </hljs> + * + */ + angular.module('material.components.datepicker').config(["$provide", function($provide) { + // TODO(jelbourn): Assert provided values are correctly formatted. Need assertions. + + /** @constructor */ + function DateLocaleProvider() { + /** Array of full month names. E.g., ['January', 'Febuary', ...] */ + this.months = null; + + /** Array of abbreviated month names. E.g., ['Jan', 'Feb', ...] */ + this.shortMonths = null; + + /** Array of full day of the week names. E.g., ['Monday', 'Tuesday', ...] */ + this.days = null; + + /** Array of abbreviated dat of the week names. E.g., ['M', 'T', ...] */ + this.shortDays = null; + + /** Array of dates of a month (1 - 31). Characters might be different in some locales. */ + this.dates = null; + + /** Index of the first day of the week. 0 = Sunday, 1 = Monday, etc. */ + this.firstDayOfWeek = 0; + + /** + * Function that converts the date portion of a Date to a string. + * @type {(function(Date): string)} + */ + this.formatDate = null; + + /** + * Function that converts a date string to a Date object (the date portion) + * @type {function(string): Date} + */ + this.parseDate = null; + + /** + * Function that formats a Date into a month header string. + * @type {function(Date): string} + */ + this.monthHeaderFormatter = null; + + /** + * Function that formats a week number into a label for the week. + * @type {function(number): string} + */ + this.weekNumberFormatter = null; + + /** + * Function that formats a date into a long aria-label that is read + * when the focused date changes. + * @type {function(Date): string} + */ + this.longDateFormatter = null; + + /** + * ARIA label for the calendar "dialog" used in the datepicker. + * @type {string} + */ + this.msgCalendar = ''; + + /** + * ARIA label for the datepicker's "Open calendar" buttons. + * @type {string} + */ + this.msgOpenCalendar = ''; + } + + /** + * Factory function that returns an instance of the dateLocale service. + * ngInject + * @param $locale + * @returns {DateLocale} + */ + DateLocaleProvider.prototype.$get = function($locale, $filter) { + /** + * Default date-to-string formatting function. + * @param {!Date} date + * @param {string=} timezone + * @returns {string} + */ + function defaultFormatDate(date, timezone) { + if (!date) { + return ''; + } + + // All of the dates created through ng-material *should* be set to midnight. + // If we encounter a date where the localeTime shows at 11pm instead of midnight, + // we have run into an issue with DST where we need to increment the hour by one: + // var d = new Date(1992, 9, 8, 0, 0, 0); + // d.toLocaleString(); // == "10/7/1992, 11:00:00 PM" + var localeTime = date.toLocaleTimeString(); + var formatDate = date; + if (date.getHours() === 0 && + (localeTime.indexOf('11:') !== -1 || localeTime.indexOf('23:') !== -1)) { + formatDate = new Date(date.getFullYear(), date.getMonth(), date.getDate(), 1, 0, 0); + } + + return $filter('date')(formatDate, 'M/d/yyyy', timezone); + } + + /** + * Default string-to-date parsing function. + * @param {string} dateString + * @returns {!Date} + */ + function defaultParseDate(dateString) { + return new Date(dateString); + } + + /** + * Default function to determine whether a string makes sense to be + * parsed to a Date object. + * + * This is very permissive and is just a basic sanity check to ensure that + * things like single integers aren't able to be parsed into dates. + * @param {string} dateString + * @returns {boolean} + */ + function defaultIsDateComplete(dateString) { + dateString = dateString.trim(); + + // Looks for three chunks of content (either numbers or text) separated + // by delimiters. + var re = /^(([a-zA-Z]{3,}|[0-9]{1,4})([ \.,]+|[\/\-])){2}([a-zA-Z]{3,}|[0-9]{1,4})$/; + return re.test(dateString); + } + + /** + * Default date-to-string formatter to get a month header. + * @param {!Date} date + * @returns {string} + */ + function defaultMonthHeaderFormatter(date) { + return service.shortMonths[date.getMonth()] + ' ' + date.getFullYear(); + } + + /** + * Default formatter for a month. + * @param {!Date} date + * @returns {string} + */ + function defaultMonthFormatter(date) { + return service.months[date.getMonth()] + ' ' + date.getFullYear(); + } + + /** + * Default week number formatter. + * @param number + * @returns {string} + */ + function defaultWeekNumberFormatter(number) { + return 'Week ' + number; + } + + /** + * Default formatter for date cell aria-labels. + * @param {!Date} date + * @returns {string} + */ + function defaultLongDateFormatter(date) { + // Example: 'Thursday June 18 2015' + return [ + service.days[date.getDay()], + service.months[date.getMonth()], + service.dates[date.getDate()], + date.getFullYear() + ].join(' '); + } + + // The default "short" day strings are the first character of each day, + // e.g., "Monday" => "M". + var defaultShortDays = $locale.DATETIME_FORMATS.SHORTDAY.map(function(day) { + return day.substring(0, 1); + }); + + // The default dates are simply the numbers 1 through 31. + var defaultDates = Array(32); + for (var i = 1; i <= 31; i++) { + defaultDates[i] = i; + } + + // Default ARIA messages are in English (US). + var defaultMsgCalendar = 'Calendar'; + var defaultMsgOpenCalendar = 'Open calendar'; + + // Default start/end dates that are rendered in the calendar. + var defaultFirstRenderableDate = new Date(1880, 0, 1); + var defaultLastRendereableDate = new Date(defaultFirstRenderableDate.getFullYear() + 250, 0, 1); + + var service = { + months: this.months || $locale.DATETIME_FORMATS.MONTH, + shortMonths: this.shortMonths || $locale.DATETIME_FORMATS.SHORTMONTH, + days: this.days || $locale.DATETIME_FORMATS.DAY, + shortDays: this.shortDays || defaultShortDays, + dates: this.dates || defaultDates, + firstDayOfWeek: this.firstDayOfWeek || 0, + formatDate: this.formatDate || defaultFormatDate, + parseDate: this.parseDate || defaultParseDate, + isDateComplete: this.isDateComplete || defaultIsDateComplete, + monthHeaderFormatter: this.monthHeaderFormatter || defaultMonthHeaderFormatter, + monthFormatter: this.monthFormatter || defaultMonthFormatter, + weekNumberFormatter: this.weekNumberFormatter || defaultWeekNumberFormatter, + longDateFormatter: this.longDateFormatter || defaultLongDateFormatter, + msgCalendar: this.msgCalendar || defaultMsgCalendar, + msgOpenCalendar: this.msgOpenCalendar || defaultMsgOpenCalendar, + firstRenderableDate: this.firstRenderableDate || defaultFirstRenderableDate, + lastRenderableDate: this.lastRenderableDate || defaultLastRendereableDate + }; + + return service; + }; + DateLocaleProvider.prototype.$get['$inject'] = ["$locale", "$filter"]; + + $provide.provider('$mdDateLocale', new DateLocaleProvider()); + }]); +})(); + +(function() { + 'use strict'; + + /** + * Utility for performing date calculations to facilitate operation of the calendar and + * datepicker. + */ + angular.module('material.components.datepicker').factory('$$mdDateUtil', function() { + return { + getFirstDateOfMonth: getFirstDateOfMonth, + getNumberOfDaysInMonth: getNumberOfDaysInMonth, + getDateInNextMonth: getDateInNextMonth, + getDateInPreviousMonth: getDateInPreviousMonth, + isInNextMonth: isInNextMonth, + isInPreviousMonth: isInPreviousMonth, + getDateMidpoint: getDateMidpoint, + isSameMonthAndYear: isSameMonthAndYear, + getWeekOfMonth: getWeekOfMonth, + incrementDays: incrementDays, + incrementMonths: incrementMonths, + getLastDateOfMonth: getLastDateOfMonth, + isSameDay: isSameDay, + getMonthDistance: getMonthDistance, + isValidDate: isValidDate, + setDateTimeToMidnight: setDateTimeToMidnight, + createDateAtMidnight: createDateAtMidnight, + isDateWithinRange: isDateWithinRange, + incrementYears: incrementYears, + getYearDistance: getYearDistance, + clampDate: clampDate, + getTimestampFromNode: getTimestampFromNode, + isMonthWithinRange: isMonthWithinRange + }; + + /** + * Gets the first day of the month for the given date's month. + * @param {Date} date + * @returns {Date} + */ + function getFirstDateOfMonth(date) { + return new Date(date.getFullYear(), date.getMonth(), 1); + } + + /** + * Gets the number of days in the month for the given date's month. + * @param date + * @returns {number} + */ + function getNumberOfDaysInMonth(date) { + return new Date(date.getFullYear(), date.getMonth() + 1, 0).getDate(); + } + + /** + * Get an arbitrary date in the month after the given date's month. + * @param date + * @returns {Date} + */ + function getDateInNextMonth(date) { + return new Date(date.getFullYear(), date.getMonth() + 1, 1); + } + + /** + * Get an arbitrary date in the month before the given date's month. + * @param date + * @returns {Date} + */ + function getDateInPreviousMonth(date) { + return new Date(date.getFullYear(), date.getMonth() - 1, 1); + } + + /** + * Gets whether two dates have the same month and year. + * @param {Date} d1 + * @param {Date} d2 + * @returns {boolean} + */ + function isSameMonthAndYear(d1, d2) { + return d1.getFullYear() === d2.getFullYear() && d1.getMonth() === d2.getMonth(); + } + + /** + * Gets whether two dates are the same day (not not necesarily the same time). + * @param {Date} d1 + * @param {Date} d2 + * @returns {boolean} + */ + function isSameDay(d1, d2) { + return d1.getDate() == d2.getDate() && isSameMonthAndYear(d1, d2); + } + + /** + * Gets whether a date is in the month immediately after some date. + * @param {Date} startDate The date from which to compare. + * @param {Date} endDate The date to check. + * @returns {boolean} + */ + function isInNextMonth(startDate, endDate) { + var nextMonth = getDateInNextMonth(startDate); + return isSameMonthAndYear(nextMonth, endDate); + } + + /** + * Gets whether a date is in the month immediately before some date. + * @param {Date} startDate The date from which to compare. + * @param {Date} endDate The date to check. + * @returns {boolean} + */ + function isInPreviousMonth(startDate, endDate) { + var previousMonth = getDateInPreviousMonth(startDate); + return isSameMonthAndYear(endDate, previousMonth); + } + + /** + * Gets the midpoint between two dates. + * @param {Date} d1 + * @param {Date} d2 + * @returns {Date} + */ + function getDateMidpoint(d1, d2) { + return createDateAtMidnight((d1.getTime() + d2.getTime()) / 2); + } + + /** + * Gets the week of the month that a given date occurs in. + * @param {Date} date + * @returns {number} Index of the week of the month (zero-based). + */ + function getWeekOfMonth(date) { + var firstDayOfMonth = getFirstDateOfMonth(date); + return Math.floor((firstDayOfMonth.getDay() + date.getDate() - 1) / 7); + } + + /** + * Gets a new date incremented by the given number of days. Number of days can be negative. + * @param {Date} date + * @param {number} numberOfDays + * @returns {Date} + */ + function incrementDays(date, numberOfDays) { + return new Date(date.getFullYear(), date.getMonth(), date.getDate() + numberOfDays); + } + + /** + * Gets a new date incremented by the given number of months. Number of months can be negative. + * If the date of the given month does not match the target month, the date will be set to the + * last day of the month. + * @param {Date} date + * @param {number} numberOfMonths + * @returns {Date} + */ + function incrementMonths(date, numberOfMonths) { + // If the same date in the target month does not actually exist, the Date object will + // automatically advance *another* month by the number of missing days. + // For example, if you try to go from Jan. 30 to Feb. 30, you'll end up on March 2. + // So, we check if the month overflowed and go to the last day of the target month instead. + var dateInTargetMonth = new Date(date.getFullYear(), date.getMonth() + numberOfMonths, 1); + var numberOfDaysInMonth = getNumberOfDaysInMonth(dateInTargetMonth); + if (numberOfDaysInMonth < date.getDate()) { + dateInTargetMonth.setDate(numberOfDaysInMonth); + } else { + dateInTargetMonth.setDate(date.getDate()); + } + + return dateInTargetMonth; + } + + /** + * Get the integer distance between two months. This *only* considers the month and year + * portion of the Date instances. + * + * @param {Date} start + * @param {Date} end + * @returns {number} Number of months between `start` and `end`. If `end` is before `start` + * chronologically, this number will be negative. + */ + function getMonthDistance(start, end) { + return (12 * (end.getFullYear() - start.getFullYear())) + (end.getMonth() - start.getMonth()); + } + + /** + * Gets the last day of the month for the given date. + * @param {Date} date + * @returns {Date} + */ + function getLastDateOfMonth(date) { + return new Date(date.getFullYear(), date.getMonth(), getNumberOfDaysInMonth(date)); + } + + /** + * Checks whether a date is valid. + * @param {Date} date + * @return {boolean} Whether the date is a valid Date. + */ + function isValidDate(date) { + return date && date.getTime && !isNaN(date.getTime()); + } + + /** + * Sets a date's time to midnight. + * @param {Date} date + */ + function setDateTimeToMidnight(date) { + if (isValidDate(date)) { + date.setHours(0, 0, 0, 0); + } + } + + /** + * Creates a date with the time set to midnight. + * Drop-in replacement for two forms of the Date constructor: + * 1. No argument for Date representing now. + * 2. Single-argument value representing number of seconds since Unix Epoch + * or a Date object. + * @param {number|Date=} opt_value + * @return {Date} New date with time set to midnight. + */ + function createDateAtMidnight(opt_value) { + var date; + if (angular.isUndefined(opt_value)) { + date = new Date(); + } else { + date = new Date(opt_value); + } + setDateTimeToMidnight(date); + return date; + } + + /** + * Checks if a date is within a min and max range, ignoring the time component. + * If minDate or maxDate are not dates, they are ignored. + * @param {Date} date + * @param {Date} minDate + * @param {Date} maxDate + */ + function isDateWithinRange(date, minDate, maxDate) { + var dateAtMidnight = createDateAtMidnight(date); + var minDateAtMidnight = isValidDate(minDate) ? createDateAtMidnight(minDate) : null; + var maxDateAtMidnight = isValidDate(maxDate) ? createDateAtMidnight(maxDate) : null; + return (!minDateAtMidnight || minDateAtMidnight <= dateAtMidnight) && + (!maxDateAtMidnight || maxDateAtMidnight >= dateAtMidnight); + } + + /** + * Gets a new date incremented by the given number of years. Number of years can be negative. + * See `incrementMonths` for notes on overflow for specific dates. + * @param {Date} date + * @param {number} numberOfYears + * @returns {Date} + */ + function incrementYears(date, numberOfYears) { + return incrementMonths(date, numberOfYears * 12); + } + + /** + * Get the integer distance between two years. This *only* considers the year portion of the + * Date instances. + * + * @param {Date} start + * @param {Date} end + * @returns {number} Number of months between `start` and `end`. If `end` is before `start` + * chronologically, this number will be negative. + */ + function getYearDistance(start, end) { + return end.getFullYear() - start.getFullYear(); + } + + /** + * Clamps a date between a minimum and a maximum date. + * @param {Date} date Date to be clamped + * @param {Date=} minDate Minimum date + * @param {Date=} maxDate Maximum date + * @return {Date} + */ + function clampDate(date, minDate, maxDate) { + var boundDate = date; + if (minDate && date < minDate) { + boundDate = new Date(minDate.getTime()); + } + if (maxDate && date > maxDate) { + boundDate = new Date(maxDate.getTime()); + } + return boundDate; + } + + /** + * Extracts and parses the timestamp from a DOM node. + * @param {HTMLElement} node Node from which the timestamp will be extracted. + * @return {number} Time since epoch. + */ + function getTimestampFromNode(node) { + if (node && node.hasAttribute('data-timestamp')) { + return Number(node.getAttribute('data-timestamp')); + } + } + + /** + * Checks if a month is within a min and max range, ignoring the date and time components. + * If minDate or maxDate are not dates, they are ignored. + * @param {Date} date + * @param {Date} minDate + * @param {Date} maxDate + */ + function isMonthWithinRange(date, minDate, maxDate) { + var month = date.getMonth(); + var year = date.getFullYear(); + + return (!minDate || minDate.getFullYear() < year || minDate.getMonth() <= month) && + (!maxDate || maxDate.getFullYear() > year || maxDate.getMonth() >= month); + } + }); +})(); + +(function() { + 'use strict'; + + // POST RELEASE + // TODO(jelbourn): Demo that uses moment.js + // TODO(jelbourn): make sure this plays well with validation and ngMessages. + // TODO(jelbourn): calendar pane doesn't open up outside of visible viewport. + // TODO(jelbourn): forward more attributes to the internal input (required, autofocus, etc.) + // TODO(jelbourn): something better for mobile (calendar panel takes up entire screen?) + // TODO(jelbourn): input behavior (masking? auto-complete?) + + + DatePickerCtrl['$inject'] = ["$scope", "$element", "$attrs", "$window", "$mdConstant", "$mdTheming", "$mdUtil", "$mdDateLocale", "$$mdDateUtil", "$$rAF", "$filter"]; + datePickerDirective['$inject'] = ["$$mdSvgRegistry", "$mdUtil", "$mdAria", "inputDirective"]; + angular.module('material.components.datepicker') + .directive('mdDatepicker', datePickerDirective); + + /** + * @ngdoc directive + * @name mdDatepicker + * @module material.components.datepicker + * + * @param {Date} ng-model The component's model. Expects a JavaScript Date object. + * @param {Object=} ng-model-options Allows tuning of the way in which `ng-model` is being updated. Also allows + * for a timezone to be specified. <a href="https://docs.angularjs.org/api/ng/directive/ngModelOptions#usage">Read more at the ngModelOptions docs.</a> + * @param {expression=} ng-change Expression evaluated when the model value changes. + * @param {expression=} ng-focus Expression evaluated when the input is focused or the calendar is opened. + * @param {expression=} ng-blur Expression evaluated when focus is removed from the input or the calendar is closed. + * @param {boolean=} ng-disabled Whether the datepicker is disabled. + * @param {boolean=} ng-required Whether a value is required for the datepicker. + * @param {Date=} md-min-date Expression representing a min date (inclusive). + * @param {Date=} md-max-date Expression representing a max date (inclusive). + * @param {(function(Date): boolean)=} md-date-filter Function expecting a date and returning a boolean whether it can be selected or not. + * @param {String=} md-placeholder The date input placeholder value. + * @param {String=} md-open-on-focus When present, the calendar will be opened when the input is focused. + * @param {Boolean=} md-is-open Expression that can be used to open the datepicker's calendar on-demand. + * @param {String=} md-current-view Default open view of the calendar pane. Can be either "month" or "year". + * @param {String=} md-hide-icons Determines which datepicker icons should be hidden. Note that this may cause the + * datepicker to not align properly with other components. **Use at your own risk.** Possible values are: + * * `"all"` - Hides all icons. + * * `"calendar"` - Only hides the calendar icon. + * * `"triangle"` - Only hides the triangle icon. + * @param {Object=} md-date-locale Allows for the values from the `$mdDateLocaleProvider` to be + * ovewritten on a per-element basis (e.g. `msgOpenCalendar` can be overwritten with + * `md-date-locale="{ msgOpenCalendar: 'Open a special calendar' }"`). + * + * @description + * `<md-datepicker>` is a component used to select a single date. + * For information on how to configure internationalization for the date picker, + * see `$mdDateLocaleProvider`. + * + * This component supports [ngMessages](https://docs.angularjs.org/api/ngMessages/directive/ngMessages). + * Supported attributes are: + * * `required`: whether a required date is not set. + * * `mindate`: whether the selected date is before the minimum allowed date. + * * `maxdate`: whether the selected date is after the maximum allowed date. + * * `debounceInterval`: ms to delay input processing (since last debounce reset); default value 500ms + * + * @usage + * <hljs lang="html"> + * <md-datepicker ng-model="birthday"></md-datepicker> + * </hljs> + * + */ + + function datePickerDirective($$mdSvgRegistry, $mdUtil, $mdAria, inputDirective) { + return { + template: function(tElement, tAttrs) { + // Buttons are not in the tab order because users can open the calendar via keyboard + // interaction on the text input, and multiple tab stops for one component (picker) + // may be confusing. + var hiddenIcons = tAttrs.mdHideIcons; + var ariaLabelValue = tAttrs.ariaLabel || tAttrs.mdPlaceholder; + + var calendarButton = (hiddenIcons === 'all' || hiddenIcons === 'calendar') ? '' : + '<md-button class="md-datepicker-button md-icon-button" type="button" ' + + 'tabindex="-1" aria-hidden="true" ' + + 'ng-click="ctrl.openCalendarPane($event)">' + + '<md-icon class="md-datepicker-calendar-icon" aria-label="md-calendar" ' + + 'md-svg-src="' + $$mdSvgRegistry.mdCalendar + '"></md-icon>' + + '</md-button>'; + + var triangleButton = ''; + + if (hiddenIcons !== 'all' && hiddenIcons !== 'triangle') { + triangleButton = '' + + '<md-button type="button" md-no-ink ' + + 'class="md-datepicker-triangle-button md-icon-button" ' + + 'ng-click="ctrl.openCalendarPane($event)" ' + + 'aria-label="{{::ctrl.locale.msgOpenCalendar}}">' + + '<div class="md-datepicker-expand-triangle"></div>' + + '</md-button>'; + + tElement.addClass(HAS_TRIANGLE_ICON_CLASS); + } + + return calendarButton + + '<div class="md-datepicker-input-container" ng-class="{\'md-datepicker-focused\': ctrl.isFocused}">' + + '<input ' + + (ariaLabelValue ? 'aria-label="' + ariaLabelValue + '" ' : '') + + 'class="md-datepicker-input" ' + + 'aria-haspopup="true" ' + + 'aria-expanded="{{ctrl.isCalendarOpen}}" ' + + 'ng-focus="ctrl.setFocused(true)" ' + + 'ng-blur="ctrl.setFocused(false)"> ' + + triangleButton + + '</div>' + + + // This pane will be detached from here and re-attached to the document body. + '<div class="md-datepicker-calendar-pane md-whiteframe-z1" id="{{::ctrl.calendarPaneId}}">' + + '<div class="md-datepicker-input-mask">' + + '<div class="md-datepicker-input-mask-opaque"></div>' + + '</div>' + + '<div class="md-datepicker-calendar">' + + '<md-calendar role="dialog" aria-label="{{::ctrl.locale.msgCalendar}}" ' + + 'md-current-view="{{::ctrl.currentView}}"' + + 'md-min-date="ctrl.minDate"' + + 'md-max-date="ctrl.maxDate"' + + 'md-date-filter="ctrl.dateFilter"' + + 'ng-model="ctrl.date" ng-if="ctrl.isCalendarOpen">' + + '</md-calendar>' + + '</div>' + + '</div>'; + }, + require: ['ngModel', 'mdDatepicker', '?^mdInputContainer', '?^form'], + scope: { + minDate: '=mdMinDate', + maxDate: '=mdMaxDate', + placeholder: '@mdPlaceholder', + currentView: '@mdCurrentView', + dateFilter: '=mdDateFilter', + isOpen: '=?mdIsOpen', + debounceInterval: '=mdDebounceInterval', + dateLocale: '=mdDateLocale' + }, + controller: DatePickerCtrl, + controllerAs: 'ctrl', + bindToController: true, + link: function(scope, element, attr, controllers) { + var ngModelCtrl = controllers[0]; + var mdDatePickerCtrl = controllers[1]; + var mdInputContainer = controllers[2]; + var parentForm = controllers[3]; + var mdNoAsterisk = $mdUtil.parseAttributeBoolean(attr.mdNoAsterisk); + + mdDatePickerCtrl.configureNgModel(ngModelCtrl, mdInputContainer, inputDirective); + + if (mdInputContainer) { + // We need to move the spacer after the datepicker itself, + // because md-input-container adds it after the + // md-datepicker-input by default. The spacer gets wrapped in a + // div, because it floats and gets aligned next to the datepicker. + // There are easier ways of working around this with CSS (making the + // datepicker 100% wide, change the `display` etc.), however they + // break the alignment with any other form controls. + var spacer = element[0].querySelector('.md-errors-spacer'); + + if (spacer) { + element.after(angular.element('<div>').append(spacer)); + } + + mdInputContainer.setHasPlaceholder(attr.mdPlaceholder); + mdInputContainer.input = element; + mdInputContainer.element + .addClass(INPUT_CONTAINER_CLASS) + .toggleClass(HAS_CALENDAR_ICON_CLASS, attr.mdHideIcons !== 'calendar' && attr.mdHideIcons !== 'all'); + + if (!mdInputContainer.label) { + $mdAria.expect(element, 'aria-label', attr.mdPlaceholder); + } else if(!mdNoAsterisk) { + attr.$observe('required', function(value) { + mdInputContainer.label.toggleClass('md-required', !!value); + }); + } + + scope.$watch(mdInputContainer.isErrorGetter || function() { + return ngModelCtrl.$invalid && (ngModelCtrl.$touched || (parentForm && parentForm.$submitted)); + }, mdInputContainer.setInvalid); + } else if (parentForm) { + // If invalid, highlights the input when the parent form is submitted. + var parentSubmittedWatcher = scope.$watch(function() { + return parentForm.$submitted; + }, function(isSubmitted) { + if (isSubmitted) { + mdDatePickerCtrl.updateErrorState(); + parentSubmittedWatcher(); + } + }); + } + } + }; + } + + /** Additional offset for the input's `size` attribute, which is updated based on its content. */ + var EXTRA_INPUT_SIZE = 3; + + /** Class applied to the container if the date is invalid. */ + var INVALID_CLASS = 'md-datepicker-invalid'; + + /** Class applied to the datepicker when it's open. */ + var OPEN_CLASS = 'md-datepicker-open'; + + /** Class applied to the md-input-container, if a datepicker is placed inside it */ + var INPUT_CONTAINER_CLASS = '_md-datepicker-floating-label'; + + /** Class to be applied when the calendar icon is enabled. */ + var HAS_CALENDAR_ICON_CLASS = '_md-datepicker-has-calendar-icon'; + + /** Class to be applied when the triangle icon is enabled. */ + var HAS_TRIANGLE_ICON_CLASS = '_md-datepicker-has-triangle-icon'; + + /** Default time in ms to debounce input event by. */ + var DEFAULT_DEBOUNCE_INTERVAL = 500; + + /** + * Height of the calendar pane used to check if the pane is going outside the boundary of + * the viewport. See calendar.scss for how $md-calendar-height is computed; an extra 20px is + * also added to space the pane away from the exact edge of the screen. + * + * This is computed statically now, but can be changed to be measured if the circumstances + * of calendar sizing are changed. + */ + var CALENDAR_PANE_HEIGHT = 368; + + /** + * Width of the calendar pane used to check if the pane is going outside the boundary of + * the viewport. See calendar.scss for how $md-calendar-width is computed; an extra 20px is + * also added to space the pane away from the exact edge of the screen. + * + * This is computed statically now, but can be changed to be measured if the circumstances + * of calendar sizing are changed. + */ + var CALENDAR_PANE_WIDTH = 360; + + /** Used for checking whether the current user agent is on iOS or Android. */ + var IS_MOBILE_REGEX = /ipad|iphone|ipod|android/i; + + /** + * Controller for md-datepicker. + * + * ngInject @constructor + */ + function DatePickerCtrl($scope, $element, $attrs, $window, $mdConstant, + $mdTheming, $mdUtil, $mdDateLocale, $$mdDateUtil, $$rAF, $filter) { + + /** @final */ + this.$window = $window; + + /** @final */ + this.dateUtil = $$mdDateUtil; + + /** @final */ + this.$mdConstant = $mdConstant; + + /* @final */ + this.$mdUtil = $mdUtil; + + /** @final */ + this.$$rAF = $$rAF; + + /** @final */ + this.$mdDateLocale = $mdDateLocale; + + /** + * The root document element. This is used for attaching a top-level click handler to + * close the calendar panel when a click outside said panel occurs. We use `documentElement` + * instead of body because, when scrolling is disabled, some browsers consider the body element + * to be completely off the screen and propagate events directly to the html element. + * @type {!angular.JQLite} + */ + this.documentElement = angular.element(document.documentElement); + + /** @type {!angular.NgModelController} */ + this.ngModelCtrl = null; + + /** @type {HTMLInputElement} */ + this.inputElement = $element[0].querySelector('input'); + + /** @final {!angular.JQLite} */ + this.ngInputElement = angular.element(this.inputElement); + + /** @type {HTMLElement} */ + this.inputContainer = $element[0].querySelector('.md-datepicker-input-container'); + + /** @type {HTMLElement} Floating calendar pane. */ + this.calendarPane = $element[0].querySelector('.md-datepicker-calendar-pane'); + + /** @type {HTMLElement} Calendar icon button. */ + this.calendarButton = $element[0].querySelector('.md-datepicker-button'); + + /** + * Element covering everything but the input in the top of the floating calendar pane. + * @type {!angular.JQLite} + */ + this.inputMask = angular.element($element[0].querySelector('.md-datepicker-input-mask-opaque')); + + /** @final {!angular.JQLite} */ + this.$element = $element; + + /** @final {!angular.Attributes} */ + this.$attrs = $attrs; + + /** @final {!angular.Scope} */ + this.$scope = $scope; + + /** @type {Date} */ + this.date = null; + + /** @type {boolean} */ + this.isFocused = false; + + /** @type {boolean} */ + this.isDisabled; + this.setDisabled($element[0].disabled || angular.isString($attrs.disabled)); + + /** @type {boolean} Whether the date-picker's calendar pane is open. */ + this.isCalendarOpen = false; + + /** @type {boolean} Whether the calendar should open when the input is focused. */ + this.openOnFocus = $attrs.hasOwnProperty('mdOpenOnFocus'); + + /** @final */ + this.mdInputContainer = null; + + /** + * Element from which the calendar pane was opened. Keep track of this so that we can return + * focus to it when the pane is closed. + * @type {HTMLElement} + */ + this.calendarPaneOpenedFrom = null; + + /** @type {String} Unique id for the calendar pane. */ + this.calendarPaneId = 'md-date-pane-' + $mdUtil.nextUid(); + + /** Pre-bound click handler is saved so that the event listener can be removed. */ + this.bodyClickHandler = angular.bind(this, this.handleBodyClick); + + /** + * Name of the event that will trigger a close. Necessary to sniff the browser, because + * the resize event doesn't make sense on mobile and can have a negative impact since it + * triggers whenever the browser zooms in on a focused input. + */ + this.windowEventName = IS_MOBILE_REGEX.test( + navigator.userAgent || navigator.vendor || window.opera + ) ? 'orientationchange' : 'resize'; + + /** Pre-bound close handler so that the event listener can be removed. */ + this.windowEventHandler = $mdUtil.debounce(angular.bind(this, this.closeCalendarPane), 100); + + /** Pre-bound handler for the window blur event. Allows for it to be removed later. */ + this.windowBlurHandler = angular.bind(this, this.handleWindowBlur); + + /** The built-in Angular date filter. */ + this.ngDateFilter = $filter('date'); + + /** @type {Number} Extra margin for the left side of the floating calendar pane. */ + this.leftMargin = 20; + + /** @type {Number} Extra margin for the top of the floating calendar. Gets determined on the first open. */ + this.topMargin = null; + + // Unless the user specifies so, the datepicker should not be a tab stop. + // This is necessary because ngAria might add a tabindex to anything with an ng-model + // (based on whether or not the user has turned that particular feature on/off). + if ($attrs.tabindex) { + this.ngInputElement.attr('tabindex', $attrs.tabindex); + $attrs.$set('tabindex', null); + } else { + $attrs.$set('tabindex', '-1'); + } + + $attrs.$set('aria-owns', this.calendarPaneId); + + $mdTheming($element); + $mdTheming(angular.element(this.calendarPane)); + + var self = this; + + $scope.$on('$destroy', function() { + self.detachCalendarPane(); + }); + + if ($attrs.mdIsOpen) { + $scope.$watch('ctrl.isOpen', function(shouldBeOpen) { + if (shouldBeOpen) { + self.openCalendarPane({ + target: self.inputElement + }); + } else { + self.closeCalendarPane(); + } + }); + } + + // For Angular 1.4 and older, where there are no lifecycle hooks but bindings are pre-assigned, + // manually call the $onInit hook. + if (angular.version.major === 1 && angular.version.minor <= 4) { + this.$onInit(); + } + + } + + /** + * Angular Lifecycle hook for newer Angular versions. + * Bindings are not guaranteed to have been assigned in the controller, but they are in the $onInit hook. + */ + DatePickerCtrl.prototype.$onInit = function() { + + /** + * Holds locale-specific formatters, parsers, labels etc. Allows + * the user to override specific ones from the $mdDateLocale provider. + * @type {!Object} + */ + this.locale = this.dateLocale ? angular.extend({}, this.$mdDateLocale, this.dateLocale) : this.$mdDateLocale; + + this.installPropertyInterceptors(); + this.attachChangeListeners(); + this.attachInteractionListeners(); + }; + + /** + * Sets up the controller's reference to ngModelController and + * applies Angular's `input[type="date"]` directive. + * @param {!angular.NgModelController} ngModelCtrl Instance of the ngModel controller. + * @param {Object} mdInputContainer Instance of the mdInputContainer controller. + * @param {Object} inputDirective Config for Angular's `input` directive. + */ + DatePickerCtrl.prototype.configureNgModel = function(ngModelCtrl, mdInputContainer, inputDirective) { + this.ngModelCtrl = ngModelCtrl; + this.mdInputContainer = mdInputContainer; + + // The input needs to be [type="date"] in order to be picked up by Angular. + this.$attrs.$set('type', 'date'); + + // Invoke the `input` directive link function, adding a stub for the element. + // This allows us to re-use Angular's logic for setting the timezone via ng-model-options. + // It works by calling the link function directly which then adds the proper `$parsers` and + // `$formatters` to the ngModel controller. + inputDirective[0].link.pre(this.$scope, { + on: angular.noop, + val: angular.noop, + 0: {} + }, this.$attrs, [ngModelCtrl]); + + var self = this; + + // Responds to external changes to the model value. + self.ngModelCtrl.$formatters.push(function(value) { + if (value && !(value instanceof Date)) { + throw Error('The ng-model for md-datepicker must be a Date instance. ' + + 'Currently the model is a: ' + (typeof value)); + } + + self.onExternalChange(value); + + return value; + }); + + // Responds to external error state changes (e.g. ng-required based on another input). + ngModelCtrl.$viewChangeListeners.unshift(angular.bind(this, this.updateErrorState)); + + // Forwards any events from the input to the root element. This is necessary to get `updateOn` + // working for events that don't bubble (e.g. 'blur') since Angular binds the handlers to + // the `<md-datepicker>`. + var updateOn = self.$mdUtil.getModelOption(ngModelCtrl, 'updateOn'); + + if (updateOn) { + this.ngInputElement.on( + updateOn, + angular.bind(this.$element, this.$element.triggerHandler, updateOn) + ); + } + }; + + /** + * Attach event listeners for both the text input and the md-calendar. + * Events are used instead of ng-model so that updates don't infinitely update the other + * on a change. This should also be more performant than using a $watch. + */ + DatePickerCtrl.prototype.attachChangeListeners = function() { + var self = this; + + self.$scope.$on('md-calendar-change', function(event, date) { + self.setModelValue(date); + self.onExternalChange(date); + self.closeCalendarPane(); + }); + + self.ngInputElement.on('input', angular.bind(self, self.resizeInputElement)); + + var debounceInterval = angular.isDefined(this.debounceInterval) ? + this.debounceInterval : DEFAULT_DEBOUNCE_INTERVAL; + self.ngInputElement.on('input', self.$mdUtil.debounce(self.handleInputEvent, + debounceInterval, self)); + }; + + /** Attach event listeners for user interaction. */ + DatePickerCtrl.prototype.attachInteractionListeners = function() { + var self = this; + var $scope = this.$scope; + var keyCodes = this.$mdConstant.KEY_CODE; + + // Add event listener through angular so that we can triggerHandler in unit tests. + self.ngInputElement.on('keydown', function(event) { + if (event.altKey && event.keyCode == keyCodes.DOWN_ARROW) { + self.openCalendarPane(event); + $scope.$digest(); + } + }); + + if (self.openOnFocus) { + self.ngInputElement.on('focus', angular.bind(self, self.openCalendarPane)); + angular.element(self.$window).on('blur', self.windowBlurHandler); + + $scope.$on('$destroy', function() { + angular.element(self.$window).off('blur', self.windowBlurHandler); + }); + } + + $scope.$on('md-calendar-close', function() { + self.closeCalendarPane(); + }); + }; + + /** + * Capture properties set to the date-picker and imperitively handle internal changes. + * This is done to avoid setting up additional $watches. + */ + DatePickerCtrl.prototype.installPropertyInterceptors = function() { + var self = this; + + if (this.$attrs.ngDisabled) { + // The expression is to be evaluated against the directive element's scope and not + // the directive's isolate scope. + var scope = this.$scope.$parent; + + if (scope) { + scope.$watch(this.$attrs.ngDisabled, function(isDisabled) { + self.setDisabled(isDisabled); + }); + } + } + + Object.defineProperty(this, 'placeholder', { + get: function() { return self.inputElement.placeholder; }, + set: function(value) { self.inputElement.placeholder = value || ''; } + }); + }; + + /** + * Sets whether the date-picker is disabled. + * @param {boolean} isDisabled + */ + DatePickerCtrl.prototype.setDisabled = function(isDisabled) { + this.isDisabled = isDisabled; + this.inputElement.disabled = isDisabled; + + if (this.calendarButton) { + this.calendarButton.disabled = isDisabled; + } + }; + + /** + * Sets the custom ngModel.$error flags to be consumed by ngMessages. Flags are: + * - mindate: whether the selected date is before the minimum date. + * - maxdate: whether the selected flag is after the maximum date. + * - filtered: whether the selected date is allowed by the custom filtering function. + * - valid: whether the entered text input is a valid date + * + * The 'required' flag is handled automatically by ngModel. + * + * @param {Date=} opt_date Date to check. If not given, defaults to the datepicker's model value. + */ + DatePickerCtrl.prototype.updateErrorState = function(opt_date) { + var date = opt_date || this.date; + + // Clear any existing errors to get rid of anything that's no longer relevant. + this.clearErrorState(); + + if (this.dateUtil.isValidDate(date)) { + // Force all dates to midnight in order to ignore the time portion. + date = this.dateUtil.createDateAtMidnight(date); + + if (this.dateUtil.isValidDate(this.minDate)) { + var minDate = this.dateUtil.createDateAtMidnight(this.minDate); + this.ngModelCtrl.$setValidity('mindate', date >= minDate); + } + + if (this.dateUtil.isValidDate(this.maxDate)) { + var maxDate = this.dateUtil.createDateAtMidnight(this.maxDate); + this.ngModelCtrl.$setValidity('maxdate', date <= maxDate); + } + + if (angular.isFunction(this.dateFilter)) { + this.ngModelCtrl.$setValidity('filtered', this.dateFilter(date)); + } + } else { + // The date is seen as "not a valid date" if there is *something* set + // (i.e.., not null or undefined), but that something isn't a valid date. + this.ngModelCtrl.$setValidity('valid', date == null); + } + + angular.element(this.inputContainer).toggleClass(INVALID_CLASS, !this.ngModelCtrl.$valid); + }; + + /** Clears any error flags set by `updateErrorState`. */ + DatePickerCtrl.prototype.clearErrorState = function() { + this.inputContainer.classList.remove(INVALID_CLASS); + ['mindate', 'maxdate', 'filtered', 'valid'].forEach(function(field) { + this.ngModelCtrl.$setValidity(field, true); + }, this); + }; + + /** Resizes the input element based on the size of its content. */ + DatePickerCtrl.prototype.resizeInputElement = function() { + this.inputElement.size = this.inputElement.value.length + EXTRA_INPUT_SIZE; + }; + + /** + * Sets the model value if the user input is a valid date. + * Adds an invalid class to the input element if not. + */ + DatePickerCtrl.prototype.handleInputEvent = function() { + var inputString = this.inputElement.value; + var parsedDate = inputString ? this.locale.parseDate(inputString) : null; + this.dateUtil.setDateTimeToMidnight(parsedDate); + + // An input string is valid if it is either empty (representing no date) + // or if it parses to a valid date that the user is allowed to select. + var isValidInput = inputString == '' || ( + this.dateUtil.isValidDate(parsedDate) && + this.locale.isDateComplete(inputString) && + this.isDateEnabled(parsedDate) + ); + + // The datepicker's model is only updated when there is a valid input. + if (isValidInput) { + this.setModelValue(parsedDate); + this.date = parsedDate; + } + + this.updateErrorState(parsedDate); + }; + + /** + * Check whether date is in range and enabled + * @param {Date=} opt_date + * @return {boolean} Whether the date is enabled. + */ + DatePickerCtrl.prototype.isDateEnabled = function(opt_date) { + return this.dateUtil.isDateWithinRange(opt_date, this.minDate, this.maxDate) && + (!angular.isFunction(this.dateFilter) || this.dateFilter(opt_date)); + }; + + /** Position and attach the floating calendar to the document. */ + DatePickerCtrl.prototype.attachCalendarPane = function() { + var calendarPane = this.calendarPane; + var body = document.body; + + calendarPane.style.transform = ''; + this.$element.addClass(OPEN_CLASS); + this.mdInputContainer && this.mdInputContainer.element.addClass(OPEN_CLASS); + angular.element(body).addClass('md-datepicker-is-showing'); + + var elementRect = this.inputContainer.getBoundingClientRect(); + var bodyRect = body.getBoundingClientRect(); + + if (!this.topMargin || this.topMargin < 0) { + this.topMargin = (this.inputMask.parent().prop('clientHeight') - this.ngInputElement.prop('clientHeight')) / 2; + } + + // Check to see if the calendar pane would go off the screen. If so, adjust position + // accordingly to keep it within the viewport. + var paneTop = elementRect.top - bodyRect.top - this.topMargin; + var paneLeft = elementRect.left - bodyRect.left - this.leftMargin; + + // If ng-material has disabled body scrolling (for example, if a dialog is open), + // then it's possible that the already-scrolled body has a negative top/left. In this case, + // we want to treat the "real" top as (0 - bodyRect.top). In a normal scrolling situation, + // though, the top of the viewport should just be the body's scroll position. + var viewportTop = (bodyRect.top < 0 && document.body.scrollTop == 0) ? + -bodyRect.top : + document.body.scrollTop; + + var viewportLeft = (bodyRect.left < 0 && document.body.scrollLeft == 0) ? + -bodyRect.left : + document.body.scrollLeft; + + var viewportBottom = viewportTop + this.$window.innerHeight; + var viewportRight = viewportLeft + this.$window.innerWidth; + + // Creates an overlay with a hole the same size as element. We remove a pixel or two + // on each end to make it overlap slightly. The overlay's background is added in + // the theme in the form of a box-shadow with a huge spread. + this.inputMask.css({ + position: 'absolute', + left: this.leftMargin + 'px', + top: this.topMargin + 'px', + width: (elementRect.width - 1) + 'px', + height: (elementRect.height - 2) + 'px' + }); + + // If the right edge of the pane would be off the screen and shifting it left by the + // difference would not go past the left edge of the screen. If the calendar pane is too + // big to fit on the screen at all, move it to the left of the screen and scale the entire + // element down to fit. + if (paneLeft + CALENDAR_PANE_WIDTH > viewportRight) { + if (viewportRight - CALENDAR_PANE_WIDTH > 0) { + paneLeft = viewportRight - CALENDAR_PANE_WIDTH; + } else { + paneLeft = viewportLeft; + var scale = this.$window.innerWidth / CALENDAR_PANE_WIDTH; + calendarPane.style.transform = 'scale(' + scale + ')'; + } + + calendarPane.classList.add('md-datepicker-pos-adjusted'); + } + + // If the bottom edge of the pane would be off the screen and shifting it up by the + // difference would not go past the top edge of the screen. + if (paneTop + CALENDAR_PANE_HEIGHT > viewportBottom && + viewportBottom - CALENDAR_PANE_HEIGHT > viewportTop) { + paneTop = viewportBottom - CALENDAR_PANE_HEIGHT; + calendarPane.classList.add('md-datepicker-pos-adjusted'); + } + + calendarPane.style.left = paneLeft + 'px'; + calendarPane.style.top = paneTop + 'px'; + document.body.appendChild(calendarPane); + + // Add CSS class after one frame to trigger open animation. + this.$$rAF(function() { + calendarPane.classList.add('md-pane-open'); + }); + }; + + /** Detach the floating calendar pane from the document. */ + DatePickerCtrl.prototype.detachCalendarPane = function() { + this.$element.removeClass(OPEN_CLASS); + this.mdInputContainer && this.mdInputContainer.element.removeClass(OPEN_CLASS); + angular.element(document.body).removeClass('md-datepicker-is-showing'); + this.calendarPane.classList.remove('md-pane-open'); + this.calendarPane.classList.remove('md-datepicker-pos-adjusted'); + + if (this.isCalendarOpen) { + this.$mdUtil.enableScrolling(); + } + + if (this.calendarPane.parentNode) { + // Use native DOM removal because we do not want any of the + // angular state of this element to be disposed. + this.calendarPane.parentNode.removeChild(this.calendarPane); + } + }; + + /** + * Open the floating calendar pane. + * @param {Event} event + */ + DatePickerCtrl.prototype.openCalendarPane = function(event) { + if (!this.isCalendarOpen && !this.isDisabled && !this.inputFocusedOnWindowBlur) { + this.isCalendarOpen = this.isOpen = true; + this.calendarPaneOpenedFrom = event.target; + + // Because the calendar pane is attached directly to the body, it is possible that the + // rest of the component (input, etc) is in a different scrolling container, such as + // an md-content. This means that, if the container is scrolled, the pane would remain + // stationary. To remedy this, we disable scrolling while the calendar pane is open, which + // also matches the native behavior for things like `<select>` on Mac and Windows. + this.$mdUtil.disableScrollAround(this.calendarPane); + + this.attachCalendarPane(); + this.focusCalendar(); + this.evalAttr('ngFocus'); + + // Attach click listener inside of a timeout because, if this open call was triggered by a + // click, we don't want it to be immediately propogated up to the body and handled. + var self = this; + this.$mdUtil.nextTick(function() { + // Use 'touchstart` in addition to click in order to work on iOS Safari, where click + // events aren't propogated under most circumstances. + // See http://www.quirksmode.org/blog/archives/2014/02/mouse_event_bub.html + self.documentElement.on('click touchstart', self.bodyClickHandler); + }, false); + + window.addEventListener(this.windowEventName, this.windowEventHandler); + } + }; + + /** Close the floating calendar pane. */ + DatePickerCtrl.prototype.closeCalendarPane = function() { + if (this.isCalendarOpen) { + var self = this; + + self.detachCalendarPane(); + self.ngModelCtrl.$setTouched(); + self.evalAttr('ngBlur'); + + self.documentElement.off('click touchstart', self.bodyClickHandler); + window.removeEventListener(self.windowEventName, self.windowEventHandler); + + self.calendarPaneOpenedFrom.focus(); + self.calendarPaneOpenedFrom = null; + + if (self.openOnFocus) { + // Ensures that all focus events have fired before resetting + // the calendar. Prevents the calendar from reopening immediately + // in IE when md-open-on-focus is set. Also it needs to trigger + // a digest, in order to prevent issues where the calendar wasn't + // showing up on the next open. + self.$mdUtil.nextTick(reset); + } else { + reset(); + } + } + + function reset(){ + self.isCalendarOpen = self.isOpen = false; + } + }; + + /** Gets the controller instance for the calendar in the floating pane. */ + DatePickerCtrl.prototype.getCalendarCtrl = function() { + return angular.element(this.calendarPane.querySelector('md-calendar')).controller('mdCalendar'); + }; + + /** Focus the calendar in the floating pane. */ + DatePickerCtrl.prototype.focusCalendar = function() { + // Use a timeout in order to allow the calendar to be rendered, as it is gated behind an ng-if. + var self = this; + this.$mdUtil.nextTick(function() { + self.getCalendarCtrl().focus(); + }, false); + }; + + /** + * Sets whether the input is currently focused. + * @param {boolean} isFocused + */ + DatePickerCtrl.prototype.setFocused = function(isFocused) { + if (!isFocused) { + this.ngModelCtrl.$setTouched(); + } + + // The ng* expressions shouldn't be evaluated when mdOpenOnFocus is on, + // because they also get called when the calendar is opened/closed. + if (!this.openOnFocus) { + this.evalAttr(isFocused ? 'ngFocus' : 'ngBlur'); + } + + this.isFocused = isFocused; + }; + + /** + * Handles a click on the document body when the floating calendar pane is open. + * Closes the floating calendar pane if the click is not inside of it. + * @param {MouseEvent} event + */ + DatePickerCtrl.prototype.handleBodyClick = function(event) { + if (this.isCalendarOpen) { + var isInCalendar = this.$mdUtil.getClosest(event.target, 'md-calendar'); + + if (!isInCalendar) { + this.closeCalendarPane(); + } + + this.$scope.$digest(); + } + }; + + /** + * Handles the event when the user navigates away from the current tab. Keeps track of + * whether the input was focused when the event happened, in order to prevent the calendar + * from re-opening. + */ + DatePickerCtrl.prototype.handleWindowBlur = function() { + this.inputFocusedOnWindowBlur = document.activeElement === this.inputElement; + }; + + /** + * Evaluates an attribute expression against the parent scope. + * @param {String} attr Name of the attribute to be evaluated. + */ + DatePickerCtrl.prototype.evalAttr = function(attr) { + if (this.$attrs[attr]) { + this.$scope.$parent.$eval(this.$attrs[attr]); + } + }; + + /** + * Sets the ng-model value by first converting the date object into a strng. Converting it + * is necessary, in order to pass Angular's `input[type="date"]` validations. Angular turns + * the value into a Date object afterwards, before setting it on the model. + * @param {Date=} value Date to be set as the model value. + */ + DatePickerCtrl.prototype.setModelValue = function(value) { + var timezone = this.$mdUtil.getModelOption(this.ngModelCtrl, 'timezone'); + this.ngModelCtrl.$setViewValue(this.ngDateFilter(value, 'yyyy-MM-dd', timezone)); + }; + + /** + * Updates the datepicker when a model change occurred externally. + * @param {Date=} value Value that was set to the model. + */ + DatePickerCtrl.prototype.onExternalChange = function(value) { + var timezone = this.$mdUtil.getModelOption(this.ngModelCtrl, 'timezone'); + + this.date = value; + this.inputElement.value = this.locale.formatDate(value, timezone); + this.mdInputContainer && this.mdInputContainer.setHasValue(!!value); + this.resizeInputElement(); + this.updateErrorState(); + }; +})(); + +ngmaterial.components.datepicker = angular.module("material.components.datepicker");
\ No newline at end of file diff --git a/vnfmarket/common/thirdparty/angular-material/modules/closure/datepicker/datepicker.min.css b/vnfmarket/common/thirdparty/angular-material/modules/closure/datepicker/datepicker.min.css new file mode 100644 index 00000000..81ac6d5a --- /dev/null +++ b/vnfmarket/common/thirdparty/angular-material/modules/closure/datepicker/datepicker.min.css @@ -0,0 +1,6 @@ +/*! + * Angular Material Design + * https://github.com/angular/material + * @license MIT + * v1.1.2-master-a9ba340 + */md-calendar{font-size:13px;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.md-calendar-scroll-mask{display:inline-block;overflow:hidden;height:308px}.md-calendar-scroll-mask .md-virtual-repeat-scroller{overflow-y:scroll;-webkit-overflow-scrolling:touch}.md-calendar-scroll-mask .md-virtual-repeat-scroller::-webkit-scrollbar{display:none}.md-calendar-scroll-mask .md-virtual-repeat-offsetter{width:100%}.md-calendar-scroll-container{box-shadow:inset -3px 3px 6px rgba(0,0,0,.2);display:inline-block;height:308px;width:346px}.md-calendar-date{height:44px;width:44px;text-align:center;padding:0;border:none;box-sizing:content-box}.md-calendar-date:first-child{padding-left:16px}[dir=rtl] .md-calendar-date:first-child{padding-left:0;padding-right:16px}.md-calendar-date:last-child{padding-right:16px}[dir=rtl] .md-calendar-date:last-child{padding-right:0;padding-left:16px}.md-calendar-date.md-calendar-date-disabled{cursor:default}.md-calendar-date-selection-indicator{-webkit-transition:background-color,color .4s cubic-bezier(.25,.8,.25,1);transition:background-color,color .4s cubic-bezier(.25,.8,.25,1);border-radius:50%;display:inline-block;width:40px;height:40px;line-height:40px}.md-calendar-date:not(.md-disabled) .md-calendar-date-selection-indicator{cursor:pointer}.md-calendar-month-label{height:44px;font-size:14px;font-weight:500;padding:0 0 0 24px}[dir=rtl] .md-calendar-month-label{padding:0 24px 0 0}md-calendar-month .md-calendar-month-label:not(.md-calendar-month-label-disabled){cursor:pointer}.md-calendar-month-label md-icon{-webkit-transform:rotate(180deg);transform:rotate(180deg)}[dir=rtl] .md-calendar-month-label md-icon{-webkit-transform:none;transform:none}.md-calendar-month-label span{vertical-align:middle}.md-calendar-day-header{table-layout:fixed;border-spacing:0;border-collapse:collapse}.md-calendar-day-header th{height:40px;width:44px;text-align:center;padding:0;border:none;box-sizing:content-box;font-weight:400}.md-calendar-day-header th:first-child{padding-left:16px}[dir=rtl] .md-calendar-day-header th:first-child{padding-left:0;padding-right:16px}.md-calendar-day-header th:last-child{padding-right:16px}[dir=rtl] .md-calendar-day-header th:last-child{padding-right:0;padding-left:16px}.md-calendar{table-layout:fixed;border-spacing:0;border-collapse:collapse}.md-calendar tr:last-child td{border-bottom-width:1px;border-bottom-style:solid}.md-calendar:first-child{border-top:1px solid transparent}.md-calendar tbody,.md-calendar td,.md-calendar tr{vertical-align:middle;box-sizing:content-box}md-datepicker{white-space:nowrap;overflow:hidden;vertical-align:middle}.md-inline-form md-datepicker{margin-top:12px}.md-datepicker-button{display:inline-block;box-sizing:border-box;background:none;vertical-align:middle;position:relative}.md-datepicker-button:before{top:0;left:0;bottom:0;right:0;position:absolute;content:"";speak:none}.md-datepicker-input{font-size:14px;box-sizing:border-box;border:none;box-shadow:none;outline:none;background:transparent;min-width:120px;max-width:328px;padding:0 0 5px}.md-datepicker-input::-ms-clear{display:none}._md-datepicker-floating-label>md-datepicker{overflow:visible}._md-datepicker-floating-label>md-datepicker .md-datepicker-input-container{border:none}._md-datepicker-floating-label>md-datepicker .md-datepicker-button{float:left;margin-top:-12px;top:9.5px}[dir=rtl] ._md-datepicker-floating-label>md-datepicker .md-datepicker-button{float:right}._md-datepicker-floating-label .md-input{float:none}._md-datepicker-floating-label._md-datepicker-has-calendar-icon>label:not(.md-no-float):not(.md-container-ignore){right:18px;left:auto;width:calc(100% - 84px)}[dir=rtl] ._md-datepicker-floating-label._md-datepicker-has-calendar-icon>label:not(.md-no-float):not(.md-container-ignore){right:auto;left:18px}._md-datepicker-floating-label._md-datepicker-has-calendar-icon .md-input-message-animation{margin-left:64px}[dir=rtl] ._md-datepicker-floating-label._md-datepicker-has-calendar-icon .md-input-message-animation{margin-left:auto;margin-right:64px}._md-datepicker-has-triangle-icon{padding-right:18px;margin-right:-18px}[dir=rtl] ._md-datepicker-has-triangle-icon{padding-right:0;padding-left:18px;margin-right:auto;margin-left:-18px}.md-datepicker-input-container{position:relative;border-bottom-width:1px;border-bottom-style:solid;display:inline-block;width:auto}.md-icon-button+.md-datepicker-input-container{margin-left:12px}[dir=rtl] .md-icon-button+.md-datepicker-input-container{margin-left:auto;margin-right:12px}.md-datepicker-input-container.md-datepicker-focused{border-bottom-width:2px}.md-datepicker-is-showing .md-scroll-mask{z-index:99}.md-datepicker-calendar-pane{position:absolute;top:0;left:-100%;z-index:100;border-width:1px;border-style:solid;background:transparent;-webkit-transform:scale(0);transform:scale(0);-webkit-transform-origin:0 0;transform-origin:0 0;-webkit-transition:-webkit-transform .2s cubic-bezier(.25,.8,.25,1);transition:-webkit-transform .2s cubic-bezier(.25,.8,.25,1);transition:transform .2s cubic-bezier(.25,.8,.25,1);transition:transform .2s cubic-bezier(.25,.8,.25,1),-webkit-transform .2s cubic-bezier(.25,.8,.25,1)}.md-datepicker-calendar-pane.md-pane-open{-webkit-transform:scale(1);transform:scale(1)}.md-datepicker-input-mask{height:40px;width:340px;position:relative;overflow:hidden;background:transparent;pointer-events:none;cursor:text}.md-datepicker-calendar{opacity:0;-webkit-transition:opacity .2s cubic-bezier(.5,0,.25,1);transition:opacity .2s cubic-bezier(.5,0,.25,1)}.md-pane-open .md-datepicker-calendar{opacity:1}.md-datepicker-calendar md-calendar:focus{outline:none}.md-datepicker-expand-triangle{position:absolute;top:50%;left:50%;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%);width:0;height:0;border-left:5px solid transparent;border-right:5px solid transparent;border-top:5px solid}.md-datepicker-triangle-button{position:absolute;right:0;bottom:-2.5px;-webkit-transform:translateX(45%);transform:translateX(45%)}[dir=rtl] .md-datepicker-triangle-button{right:auto;left:0;-webkit-transform:translateX(-45%);transform:translateX(-45%)}.md-datepicker-triangle-button.md-button.md-icon-button{height:36px;width:36px;position:absolute;padding:8px}md-datepicker[disabled] .md-datepicker-input-container{border-bottom-color:transparent}md-datepicker[disabled] .md-datepicker-triangle-button{display:none}.md-datepicker-open{overflow:hidden}.md-datepicker-open .md-datepicker-input-container,.md-datepicker-open input.md-input{border-bottom-color:transparent}.md-datepicker-open .md-datepicker-triangle-button,.md-datepicker-open.md-input-has-placeholder>label,.md-datepicker-open.md-input-has-value>label,.md-datepicker-pos-adjusted .md-datepicker-input-mask{display:none}.md-datepicker-calendar-pane .md-calendar{-webkit-transform:translateY(-85px);transform:translateY(-85px);-webkit-transition:-webkit-transform .65s cubic-bezier(.25,.8,.25,1);transition:-webkit-transform .65s cubic-bezier(.25,.8,.25,1);transition:transform .65s cubic-bezier(.25,.8,.25,1);transition:transform .65s cubic-bezier(.25,.8,.25,1),-webkit-transform .65s cubic-bezier(.25,.8,.25,1);-webkit-transition-delay:.125s;transition-delay:.125s}.md-datepicker-calendar-pane.md-pane-open .md-calendar{-webkit-transform:translateY(0);transform:translateY(0)}
\ No newline at end of file diff --git a/vnfmarket/common/thirdparty/angular-material/modules/closure/datepicker/datepicker.min.js b/vnfmarket/common/thirdparty/angular-material/modules/closure/datepicker/datepicker.min.js new file mode 100644 index 00000000..931cbaa8 --- /dev/null +++ b/vnfmarket/common/thirdparty/angular-material/modules/closure/datepicker/datepicker.min.js @@ -0,0 +1,8 @@ +/*! + * Angular Material Design + * https://github.com/angular/material + * @license MIT + * v1.1.2-master-a9ba340 + */ +goog.provide("ngmaterial.components.datepicker"),goog.require("ngmaterial.components.icon"),goog.require("ngmaterial.components.virtualRepeat"),goog.require("ngmaterial.core"),angular.module("material.components.datepicker",["material.core","material.components.icon","material.components.virtualRepeat"]),function(){"use strict";function e(){return{template:function(e,t){var a=t.hasOwnProperty("ngIf")?"":'ng-if="calendarCtrl.isInitialized"',n='<div ng-switch="calendarCtrl.currentView" '+a+'><md-calendar-year ng-switch-when="year"></md-calendar-year><md-calendar-month ng-switch-default></md-calendar-month></div>';return n},scope:{minDate:"=mdMinDate",maxDate:"=mdMaxDate",dateFilter:"=mdDateFilter",_currentView:"@mdCurrentView"},require:["ngModel","mdCalendar"],controller:t,controllerAs:"calendarCtrl",bindToController:!0,link:function(e,t,a,n){var i=n[0],r=n[1];r.configureNgModel(i)}}}function t(e,t,a,i,r,l,s,d,o){l(e),this.$element=e,this.$scope=t,this.dateUtil=a,this.$mdUtil=i,this.keyCode=r.KEY_CODE,this.$$rAF=s,this.$mdDateLocale=o,this.today=this.dateUtil.createDateAtMidnight(),this.ngModelCtrl=null,this.SELECTED_DATE_CLASS="md-calendar-selected-date",this.TODAY_CLASS="md-calendar-date-today",this.FOCUSED_DATE_CLASS="md-focus",this.id=n++,this.displayDate=null,this.selectedDate=null,this.firstRenderableDate=null,this.lastRenderableDate=null,this.isInitialized=!1,this.width=0,this.scrollbarWidth=0,d.tabindex||e.attr("tabindex","-1");var c,h=angular.bind(this,this.handleKeyEvent);c=e.parent().hasClass("md-datepicker-calendar")?angular.element(document.body):e,c.on("keydown",h),t.$on("$destroy",function(){c.off("keydown",h)}),1===angular.version.major&&angular.version.minor<=4&&this.$onInit()}t.$inject=["$element","$scope","$$mdDateUtil","$mdUtil","$mdConstant","$mdTheming","$$rAF","$attrs","$mdDateLocale"],angular.module("material.components.datepicker").directive("mdCalendar",e);var a=340,n=0;t.prototype.$onInit=function(){this.currentView=this._currentView||"month";var e=this.$mdDateLocale;this.minDate&&this.minDate>e.firstRenderableDate?this.firstRenderableDate=this.minDate:this.firstRenderableDate=e.firstRenderableDate,this.maxDate&&this.maxDate<e.lastRenderableDate?this.lastRenderableDate=this.maxDate:this.lastRenderableDate=e.lastRenderableDate},t.prototype.configureNgModel=function(e){var t=this;t.ngModelCtrl=e,t.$mdUtil.nextTick(function(){t.isInitialized=!0}),e.$render=function(){var e=this.$viewValue;t.$scope.$broadcast("md-calendar-parent-changed",e),t.selectedDate||(t.selectedDate=e),t.displayDate||(t.displayDate=t.selectedDate||t.today)}},t.prototype.setNgModelValue=function(e){var t=this.dateUtil.createDateAtMidnight(e);return this.focus(t),this.$scope.$emit("md-calendar-change",t),this.ngModelCtrl.$setViewValue(t),this.ngModelCtrl.$render(),t},t.prototype.setCurrentView=function(e,t){var a=this;a.$mdUtil.nextTick(function(){a.currentView=e,t&&(a.displayDate=angular.isDate(t)?t:new Date(t))})},t.prototype.focus=function(e){if(this.dateUtil.isValidDate(e)){var t=this.$element[0].querySelector(".md-focus");t&&t.classList.remove(this.FOCUSED_DATE_CLASS);var a=this.getDateId(e,this.currentView),n=document.getElementById(a);n&&(n.classList.add(this.FOCUSED_DATE_CLASS),n.focus(),this.displayDate=e)}else{var i=this.$element[0].querySelector("[ng-switch]");i&&i.focus()}},t.prototype.getActionFromKeyEvent=function(e){var t=this.keyCode;switch(e.which){case t.ENTER:return"select";case t.RIGHT_ARROW:return"move-right";case t.LEFT_ARROW:return"move-left";case t.DOWN_ARROW:return e.metaKey?"move-page-down":"move-row-down";case t.UP_ARROW:return e.metaKey?"move-page-up":"move-row-up";case t.PAGE_DOWN:return"move-page-down";case t.PAGE_UP:return"move-page-up";case t.HOME:return"start";case t.END:return"end";default:return null}},t.prototype.handleKeyEvent=function(e){var t=this;this.$scope.$apply(function(){if(e.which==t.keyCode.ESCAPE||e.which==t.keyCode.TAB)return t.$scope.$emit("md-calendar-close"),void(e.which==t.keyCode.TAB&&e.preventDefault());var a=t.getActionFromKeyEvent(e);a&&(e.preventDefault(),e.stopPropagation(),t.$scope.$broadcast("md-calendar-parent-action",a))})},t.prototype.hideVerticalScrollbar=function(e){function t(){var t=n.width||a,i=n.scrollbarWidth,l=e.calendarScroller;r.style.width=t+"px",l.style.width=t+i+"px",l.style.paddingRight=i+"px"}var n=this,i=e.$element[0],r=i.querySelector(".md-calendar-scroll-mask");n.width>0?t():n.$$rAF(function(){var a=e.calendarScroller;n.scrollbarWidth=a.offsetWidth-a.clientWidth,n.width=i.querySelector("table").offsetWidth,t()})},t.prototype.getDateId=function(e,t){if(!t)throw new Error("A namespace for the date id has to be specified.");return["md",this.id,t,e.getFullYear(),e.getMonth(),e.getDate()].join("-")},t.prototype.updateVirtualRepeat=function(){var e=this.$scope,t=e.$on("$md-resize-enable",function(){e.$$phase||e.$apply(),t()})}}(),function(){"use strict";function e(){return{template:'<table aria-hidden="true" class="md-calendar-day-header"><thead></thead></table><div class="md-calendar-scroll-mask"><md-virtual-repeat-container class="md-calendar-scroll-container" md-offset-size="'+(n-a)+'"><table role="grid" tabindex="0" class="md-calendar" aria-readonly="true"><tbody md-calendar-month-body role="rowgroup" md-virtual-repeat="i in monthCtrl.items" md-month-offset="$index" class="md-calendar-month" md-start-index="monthCtrl.getSelectedMonthIndex()" md-item-size="'+a+'"><tr aria-hidden="true" style="height:'+a+'px;"></tr></tbody></table></md-virtual-repeat-container></div>',require:["^^mdCalendar","mdCalendarMonth"],controller:t,controllerAs:"monthCtrl",bindToController:!0,link:function(e,t,a,n){var i=n[0],r=n[1];r.initialize(i)}}}function t(e,t,a,n,i,r){this.$element=e,this.$scope=t,this.$animate=a,this.$q=n,this.dateUtil=i,this.dateLocale=r,this.calendarScroller=e[0].querySelector(".md-virtual-repeat-scroller"),this.isInitialized=!1,this.isMonthTransitionInProgress=!1;var l=this;this.cellClickHandler=function(){var e=i.getTimestampFromNode(this);l.$scope.$apply(function(){l.calendarCtrl.setNgModelValue(e)})},this.headerClickHandler=function(){l.calendarCtrl.setCurrentView("year",i.getTimestampFromNode(this))}}t.$inject=["$element","$scope","$animate","$q","$$mdDateUtil","$mdDateLocale"],angular.module("material.components.datepicker").directive("mdCalendarMonth",e);var a=265,n=45;t.prototype.initialize=function(e){this.items={length:this.dateUtil.getMonthDistance(e.firstRenderableDate,e.lastRenderableDate)+2},this.calendarCtrl=e,this.attachScopeListeners(),e.updateVirtualRepeat(),e.ngModelCtrl&&e.ngModelCtrl.$render()},t.prototype.getSelectedMonthIndex=function(){var e=this.calendarCtrl;return this.dateUtil.getMonthDistance(e.firstRenderableDate,e.displayDate||e.selectedDate||e.today)},t.prototype.changeSelectedDate=function(e){var t=this,a=t.calendarCtrl,n=a.selectedDate;a.selectedDate=e,this.changeDisplayDate(e).then(function(){var t=a.SELECTED_DATE_CLASS,i="month";if(n){var r=document.getElementById(a.getDateId(n,i));r&&(r.classList.remove(t),r.setAttribute("aria-selected","false"))}if(e){var l=document.getElementById(a.getDateId(e,i));l&&(l.classList.add(t),l.setAttribute("aria-selected","true"))}})},t.prototype.changeDisplayDate=function(e){if(!this.isInitialized)return this.buildWeekHeader(),this.calendarCtrl.hideVerticalScrollbar(this),this.isInitialized=!0,this.$q.when();if(!this.dateUtil.isValidDate(e)||this.isMonthTransitionInProgress)return this.$q.when();this.isMonthTransitionInProgress=!0;var t=this.animateDateChange(e);this.calendarCtrl.displayDate=e;var a=this;return t.then(function(){a.isMonthTransitionInProgress=!1}),t},t.prototype.animateDateChange=function(e){if(this.dateUtil.isValidDate(e)){var t=this.dateUtil.getMonthDistance(this.calendarCtrl.firstRenderableDate,e);this.calendarScroller.scrollTop=t*a}return this.$q.when()},t.prototype.buildWeekHeader=function(){for(var e=this.dateLocale.firstDayOfWeek,t=this.dateLocale.shortDays,a=document.createElement("tr"),n=0;n<7;n++){var i=document.createElement("th");i.textContent=t[(n+e)%7],a.appendChild(i)}this.$element.find("thead").append(a)},t.prototype.attachScopeListeners=function(){var e=this;e.$scope.$on("md-calendar-parent-changed",function(t,a){e.changeSelectedDate(a)}),e.$scope.$on("md-calendar-parent-action",angular.bind(this,this.handleKeyEvent))},t.prototype.handleKeyEvent=function(e,t){var a=this.calendarCtrl,n=a.displayDate;if("select"===t)a.setNgModelValue(n);else{var i=null,r=this.dateUtil;switch(t){case"move-right":i=r.incrementDays(n,1);break;case"move-left":i=r.incrementDays(n,-1);break;case"move-page-down":i=r.incrementMonths(n,1);break;case"move-page-up":i=r.incrementMonths(n,-1);break;case"move-row-down":i=r.incrementDays(n,7);break;case"move-row-up":i=r.incrementDays(n,-7);break;case"start":i=r.getFirstDateOfMonth(n);break;case"end":i=r.getLastDateOfMonth(n)}i&&(i=this.dateUtil.clampDate(i,a.minDate,a.maxDate),this.changeDisplayDate(i).then(function(){a.focus(i)}))}}}(),function(){"use strict";function e(e,a){var n=e('<md-icon md-svg-src="'+a.mdTabsArrow+'"></md-icon>')({})[0];return{require:["^^mdCalendar","^^mdCalendarMonth","mdCalendarMonthBody"],scope:{offset:"=mdMonthOffset"},controller:t,controllerAs:"mdMonthBodyCtrl",bindToController:!0,link:function(e,t,a,i){var r=i[0],l=i[1],s=i[2];s.calendarCtrl=r,s.monthCtrl=l,s.arrowIcon=n.cloneNode(!0),e.$watch(function(){return s.offset},function(e){angular.isNumber(e)&&s.generateContent()})}}}function t(e,t,a){this.$element=e,this.dateUtil=t,this.dateLocale=a,this.monthCtrl=null,this.calendarCtrl=null,this.offset=null,this.focusAfterAppend=null}e.$inject=["$compile","$$mdSvgRegistry"],t.$inject=["$element","$$mdDateUtil","$mdDateLocale"],angular.module("material.components.datepicker").directive("mdCalendarMonthBody",e),t.prototype.generateContent=function(){var e=this.dateUtil.incrementMonths(this.calendarCtrl.firstRenderableDate,this.offset);this.$element.empty().append(this.buildCalendarForMonth(e)),this.focusAfterAppend&&(this.focusAfterAppend.classList.add(this.calendarCtrl.FOCUSED_DATE_CLASS),this.focusAfterAppend.focus(),this.focusAfterAppend=null)},t.prototype.buildDateCell=function(e){var t=this.monthCtrl,a=this.calendarCtrl,n=document.createElement("td");if(n.tabIndex=-1,n.classList.add("md-calendar-date"),n.setAttribute("role","gridcell"),e){n.setAttribute("tabindex","-1"),n.setAttribute("aria-label",this.dateLocale.longDateFormatter(e)),n.id=a.getDateId(e,"month"),n.setAttribute("data-timestamp",e.getTime()),this.dateUtil.isSameDay(e,a.today)&&n.classList.add(a.TODAY_CLASS),this.dateUtil.isValidDate(a.selectedDate)&&this.dateUtil.isSameDay(e,a.selectedDate)&&(n.classList.add(a.SELECTED_DATE_CLASS),n.setAttribute("aria-selected","true"));var i=this.dateLocale.dates[e.getDate()];if(this.isDateEnabled(e)){var r=document.createElement("span");r.classList.add("md-calendar-date-selection-indicator"),r.textContent=i,n.appendChild(r),n.addEventListener("click",t.cellClickHandler),a.displayDate&&this.dateUtil.isSameDay(e,a.displayDate)&&(this.focusAfterAppend=n)}else n.classList.add("md-calendar-date-disabled"),n.textContent=i}return n},t.prototype.isDateEnabled=function(e){return this.dateUtil.isDateWithinRange(e,this.calendarCtrl.minDate,this.calendarCtrl.maxDate)&&(!angular.isFunction(this.calendarCtrl.dateFilter)||this.calendarCtrl.dateFilter(e))},t.prototype.buildDateRow=function(e){var t=document.createElement("tr");return t.setAttribute("role","row"),t.setAttribute("aria-label",this.dateLocale.weekNumberFormatter(e)),t},t.prototype.buildCalendarForMonth=function(e){var t=this.dateUtil.isValidDate(e)?e:new Date,a=this.dateUtil.getFirstDateOfMonth(t),n=this.getLocaleDay_(a),i=this.dateUtil.getNumberOfDaysInMonth(t),r=document.createDocumentFragment(),l=1,s=this.buildDateRow(l);r.appendChild(s);var d=this.offset===this.monthCtrl.items.length-1,o=0,c=document.createElement("td"),h=document.createElement("span");if(h.textContent=this.dateLocale.monthHeaderFormatter(t),c.appendChild(h),c.classList.add("md-calendar-month-label"),this.calendarCtrl.maxDate&&a>this.calendarCtrl.maxDate?c.classList.add("md-calendar-month-label-disabled"):(c.addEventListener("click",this.monthCtrl.headerClickHandler),c.setAttribute("data-timestamp",a.getTime()),c.setAttribute("aria-label",this.dateLocale.monthFormatter(t)),c.appendChild(this.arrowIcon.cloneNode(!0))),n<=2){c.setAttribute("colspan","7");var u=this.buildDateRow();if(u.appendChild(c),r.insertBefore(u,s),d)return r}else o=3,c.setAttribute("colspan","3"),s.appendChild(c);for(var m=o;m<n;m++)s.appendChild(this.buildDateCell());for(var p=n,g=a,f=1;f<=i;f++){if(7===p){if(d)return r;p=0,l++,s=this.buildDateRow(l),r.appendChild(s)}g.setDate(f);var D=this.buildDateCell(g);s.appendChild(D),p++}for(;s.childNodes.length<7;)s.appendChild(this.buildDateCell());for(;r.childNodes.length<6;){for(var C=this.buildDateRow(),v=0;v<7;v++)C.appendChild(this.buildDateCell());r.appendChild(C)}return r},t.prototype.getLocaleDay_=function(e){return(e.getDay()+(7-this.dateLocale.firstDayOfWeek))%7}}(),function(){"use strict";function e(){return{template:'<div class="md-calendar-scroll-mask"><md-virtual-repeat-container class="md-calendar-scroll-container"><table role="grid" tabindex="0" class="md-calendar" aria-readonly="true"><tbody md-calendar-year-body role="rowgroup" md-virtual-repeat="i in yearCtrl.items" md-year-offset="$index" class="md-calendar-year" md-start-index="yearCtrl.getFocusedYearIndex()" md-item-size="'+a+'"><tr aria-hidden="true" style="height:'+a+'px;"></tr></tbody></table></md-virtual-repeat-container></div>',require:["^^mdCalendar","mdCalendarYear"],controller:t,controllerAs:"yearCtrl",bindToController:!0,link:function(e,t,a,n){var i=n[0],r=n[1];r.initialize(i)}}}function t(e,t,a,n,i){this.$element=e,this.$scope=t,this.$animate=a,this.$q=n,this.dateUtil=i,this.calendarScroller=e[0].querySelector(".md-virtual-repeat-scroller"),this.isInitialized=!1,this.isMonthTransitionInProgress=!1;var r=this;this.cellClickHandler=function(){r.calendarCtrl.setCurrentView("month",i.getTimestampFromNode(this))}}t.$inject=["$element","$scope","$animate","$q","$$mdDateUtil"],angular.module("material.components.datepicker").directive("mdCalendarYear",e);var a=88;t.prototype.initialize=function(e){this.items={length:this.dateUtil.getYearDistance(e.firstRenderableDate,e.lastRenderableDate)+1},this.calendarCtrl=e,this.attachScopeListeners(),e.updateVirtualRepeat(),e.ngModelCtrl&&e.ngModelCtrl.$render()},t.prototype.getFocusedYearIndex=function(){var e=this.calendarCtrl;return this.dateUtil.getYearDistance(e.firstRenderableDate,e.displayDate||e.selectedDate||e.today)},t.prototype.changeDate=function(e){if(!this.isInitialized)return this.calendarCtrl.hideVerticalScrollbar(this),this.isInitialized=!0,this.$q.when();if(this.dateUtil.isValidDate(e)&&!this.isMonthTransitionInProgress){var t=this,a=this.animateDateChange(e);return t.isMonthTransitionInProgress=!0,t.calendarCtrl.displayDate=e,a.then(function(){t.isMonthTransitionInProgress=!1})}},t.prototype.animateDateChange=function(e){if(this.dateUtil.isValidDate(e)){var t=this.dateUtil.getYearDistance(this.calendarCtrl.firstRenderableDate,e);this.calendarScroller.scrollTop=t*a}return this.$q.when()},t.prototype.handleKeyEvent=function(e,t){var a=this.calendarCtrl,n=a.displayDate;if("select"===t)this.changeDate(n).then(function(){a.setCurrentView("month",n),a.focus(n)});else{var i=null,r=this.dateUtil;switch(t){case"move-right":i=r.incrementMonths(n,1);break;case"move-left":i=r.incrementMonths(n,-1);break;case"move-row-down":i=r.incrementMonths(n,6);break;case"move-row-up":i=r.incrementMonths(n,-6)}if(i){var l=a.minDate?r.getFirstDateOfMonth(a.minDate):null,s=a.maxDate?r.getFirstDateOfMonth(a.maxDate):null;i=r.getFirstDateOfMonth(this.dateUtil.clampDate(i,l,s)),this.changeDate(i).then(function(){a.focus(i)})}}},t.prototype.attachScopeListeners=function(){var e=this;e.$scope.$on("md-calendar-parent-changed",function(t,a){e.changeDate(a)}),e.$scope.$on("md-calendar-parent-action",angular.bind(e,e.handleKeyEvent))}}(),function(){"use strict";function e(){return{require:["^^mdCalendar","^^mdCalendarYear","mdCalendarYearBody"],scope:{offset:"=mdYearOffset"},controller:t,controllerAs:"mdYearBodyCtrl",bindToController:!0,link:function(e,t,a,n){var i=n[0],r=n[1],l=n[2];l.calendarCtrl=i,l.yearCtrl=r,e.$watch(function(){return l.offset},function(e){angular.isNumber(e)&&l.generateContent()})}}}function t(e,t,a){this.$element=e,this.dateUtil=t,this.dateLocale=a,this.calendarCtrl=null,this.yearCtrl=null,this.offset=null,this.focusAfterAppend=null}t.$inject=["$element","$$mdDateUtil","$mdDateLocale"],angular.module("material.components.datepicker").directive("mdCalendarYearBody",e),t.prototype.generateContent=function(){var e=this.dateUtil.incrementYears(this.calendarCtrl.firstRenderableDate,this.offset);this.$element.empty().append(this.buildCalendarForYear(e)),this.focusAfterAppend&&(this.focusAfterAppend.classList.add(this.calendarCtrl.FOCUSED_DATE_CLASS),this.focusAfterAppend.focus(),this.focusAfterAppend=null)},t.prototype.buildMonthCell=function(e,t){var a=this.calendarCtrl,n=this.yearCtrl,i=this.buildBlankCell(),r=new Date(e,t,1);i.setAttribute("aria-label",this.dateLocale.monthFormatter(r)),i.id=a.getDateId(r,"year"),i.setAttribute("data-timestamp",r.getTime()),this.dateUtil.isSameMonthAndYear(r,a.today)&&i.classList.add(a.TODAY_CLASS),this.dateUtil.isValidDate(a.selectedDate)&&this.dateUtil.isSameMonthAndYear(r,a.selectedDate)&&(i.classList.add(a.SELECTED_DATE_CLASS),i.setAttribute("aria-selected","true"));var l=this.dateLocale.shortMonths[t];if(this.dateUtil.isMonthWithinRange(r,a.minDate,a.maxDate)){var s=document.createElement("span");s.classList.add("md-calendar-date-selection-indicator"),s.textContent=l,i.appendChild(s),i.addEventListener("click",n.cellClickHandler),a.displayDate&&this.dateUtil.isSameMonthAndYear(r,a.displayDate)&&(this.focusAfterAppend=i)}else i.classList.add("md-calendar-date-disabled"),i.textContent=l;return i},t.prototype.buildBlankCell=function(){var e=document.createElement("td");return e.tabIndex=-1,e.classList.add("md-calendar-date"),e.setAttribute("role","gridcell"),e.setAttribute("tabindex","-1"),e},t.prototype.buildCalendarForYear=function(e){var t,a=e.getFullYear(),n=document.createDocumentFragment(),i=document.createElement("tr"),r=document.createElement("td");for(r.className="md-calendar-month-label",r.textContent=a,i.appendChild(r),t=0;t<6;t++)i.appendChild(this.buildMonthCell(a,t));n.appendChild(i);var l=document.createElement("tr");for(l.appendChild(this.buildBlankCell()),t=6;t<12;t++)l.appendChild(this.buildMonthCell(a,t));return n.appendChild(l),n}}(),function(){"use strict";angular.module("material.components.datepicker").config(["$provide",function(e){function t(){this.months=null,this.shortMonths=null,this.days=null,this.shortDays=null,this.dates=null,this.firstDayOfWeek=0,this.formatDate=null,this.parseDate=null,this.monthHeaderFormatter=null,this.weekNumberFormatter=null,this.longDateFormatter=null,this.msgCalendar="",this.msgOpenCalendar=""}t.prototype.$get=function(e,t){function a(e,a){if(!e)return"";var n=e.toLocaleTimeString(),i=e;return 0!==e.getHours()||n.indexOf("11:")===-1&&n.indexOf("23:")===-1||(i=new Date(e.getFullYear(),e.getMonth(),e.getDate(),1,0,0)),t("date")(i,"M/d/yyyy",a)}function n(e){return new Date(e)}function i(e){e=e.trim();var t=/^(([a-zA-Z]{3,}|[0-9]{1,4})([ \.,]+|[\/\-])){2}([a-zA-Z]{3,}|[0-9]{1,4})$/;return t.test(e)}function r(e){return f.shortMonths[e.getMonth()]+" "+e.getFullYear()}function l(e){return f.months[e.getMonth()]+" "+e.getFullYear()}function s(e){return"Week "+e}function d(e){return[f.days[e.getDay()],f.months[e.getMonth()],f.dates[e.getDate()],e.getFullYear()].join(" ")}for(var o=e.DATETIME_FORMATS.SHORTDAY.map(function(e){return e.substring(0,1)}),c=Array(32),h=1;h<=31;h++)c[h]=h;var u="Calendar",m="Open calendar",p=new Date(1880,0,1),g=new Date(p.getFullYear()+250,0,1),f={months:this.months||e.DATETIME_FORMATS.MONTH,shortMonths:this.shortMonths||e.DATETIME_FORMATS.SHORTMONTH,days:this.days||e.DATETIME_FORMATS.DAY,shortDays:this.shortDays||o,dates:this.dates||c,firstDayOfWeek:this.firstDayOfWeek||0,formatDate:this.formatDate||a,parseDate:this.parseDate||n,isDateComplete:this.isDateComplete||i,monthHeaderFormatter:this.monthHeaderFormatter||r,monthFormatter:this.monthFormatter||l,weekNumberFormatter:this.weekNumberFormatter||s,longDateFormatter:this.longDateFormatter||d,msgCalendar:this.msgCalendar||u,msgOpenCalendar:this.msgOpenCalendar||m,firstRenderableDate:this.firstRenderableDate||p,lastRenderableDate:this.lastRenderableDate||g};return f},t.prototype.$get.$inject=["$locale","$filter"],e.provider("$mdDateLocale",new t)}])}(),function(){"use strict";angular.module("material.components.datepicker").factory("$$mdDateUtil",function(){function e(e){return new Date(e.getFullYear(),e.getMonth(),1)}function t(e){return new Date(e.getFullYear(),e.getMonth()+1,0).getDate()}function a(e){return new Date(e.getFullYear(),e.getMonth()+1,1)}function n(e){return new Date(e.getFullYear(),e.getMonth()-1,1)}function i(e,t){return e.getFullYear()===t.getFullYear()&&e.getMonth()===t.getMonth()}function r(e,t){return e.getDate()==t.getDate()&&i(e,t)}function l(e,t){var n=a(e);return i(n,t)}function s(e,t){var a=n(e);return i(t,a)}function d(e,t){return f((e.getTime()+t.getTime())/2)}function o(t){var a=e(t);return Math.floor((a.getDay()+t.getDate()-1)/7)}function c(e,t){return new Date(e.getFullYear(),e.getMonth(),e.getDate()+t)}function h(e,a){var n=new Date(e.getFullYear(),e.getMonth()+a,1),i=t(n);return i<e.getDate()?n.setDate(i):n.setDate(e.getDate()),n}function u(e,t){return 12*(t.getFullYear()-e.getFullYear())+(t.getMonth()-e.getMonth())}function m(e){return new Date(e.getFullYear(),e.getMonth(),t(e))}function p(e){return e&&e.getTime&&!isNaN(e.getTime())}function g(e){p(e)&&e.setHours(0,0,0,0)}function f(e){var t;return t=angular.isUndefined(e)?new Date:new Date(e),g(t),t}function D(e,t,a){var n=f(e),i=p(t)?f(t):null,r=p(a)?f(a):null;return(!i||i<=n)&&(!r||r>=n)}function C(e,t){return h(e,12*t)}function v(e,t){return t.getFullYear()-e.getFullYear()}function y(e,t,a){var n=e;return t&&e<t&&(n=new Date(t.getTime())),a&&e>a&&(n=new Date(a.getTime())),n}function $(e){if(e&&e.hasAttribute("data-timestamp"))return Number(e.getAttribute("data-timestamp"))}function b(e,t,a){var n=e.getMonth(),i=e.getFullYear();return(!t||t.getFullYear()<i||t.getMonth()<=n)&&(!a||a.getFullYear()>i||a.getMonth()>=n)}return{getFirstDateOfMonth:e,getNumberOfDaysInMonth:t,getDateInNextMonth:a,getDateInPreviousMonth:n,isInNextMonth:l,isInPreviousMonth:s,getDateMidpoint:d,isSameMonthAndYear:i,getWeekOfMonth:o,incrementDays:c,incrementMonths:h,getLastDateOfMonth:m,isSameDay:r,getMonthDistance:u,isValidDate:p,setDateTimeToMidnight:g,createDateAtMidnight:f,isDateWithinRange:D,incrementYears:C,getYearDistance:v,clampDate:y,getTimestampFromNode:$,isMonthWithinRange:b}})}(),function(){"use strict";function e(e,a,n,i){return{template:function(t,a){var n=a.mdHideIcons,i=a.ariaLabel||a.mdPlaceholder,r="all"===n||"calendar"===n?"":'<md-button class="md-datepicker-button md-icon-button" type="button" tabindex="-1" aria-hidden="true" ng-click="ctrl.openCalendarPane($event)"><md-icon class="md-datepicker-calendar-icon" aria-label="md-calendar" md-svg-src="'+e.mdCalendar+'"></md-icon></md-button>',l="";return"all"!==n&&"triangle"!==n&&(l='<md-button type="button" md-no-ink class="md-datepicker-triangle-button md-icon-button" ng-click="ctrl.openCalendarPane($event)" aria-label="{{::ctrl.locale.msgOpenCalendar}}"><div class="md-datepicker-expand-triangle"></div></md-button>',t.addClass(s)),r+'<div class="md-datepicker-input-container" ng-class="{\'md-datepicker-focused\': ctrl.isFocused}"><input '+(i?'aria-label="'+i+'" ':"")+'class="md-datepicker-input" aria-haspopup="true" aria-expanded="{{ctrl.isCalendarOpen}}" ng-focus="ctrl.setFocused(true)" ng-blur="ctrl.setFocused(false)"> '+l+'</div><div class="md-datepicker-calendar-pane md-whiteframe-z1" id="{{::ctrl.calendarPaneId}}"><div class="md-datepicker-input-mask"><div class="md-datepicker-input-mask-opaque"></div></div><div class="md-datepicker-calendar"><md-calendar role="dialog" aria-label="{{::ctrl.locale.msgCalendar}}" md-current-view="{{::ctrl.currentView}}"md-min-date="ctrl.minDate"md-max-date="ctrl.maxDate"md-date-filter="ctrl.dateFilter"ng-model="ctrl.date" ng-if="ctrl.isCalendarOpen"></md-calendar></div></div>'},require:["ngModel","mdDatepicker","?^mdInputContainer","?^form"],scope:{minDate:"=mdMinDate",maxDate:"=mdMaxDate",placeholder:"@mdPlaceholder",currentView:"@mdCurrentView",dateFilter:"=mdDateFilter",isOpen:"=?mdIsOpen",debounceInterval:"=mdDebounceInterval",dateLocale:"=mdDateLocale"},controller:t,controllerAs:"ctrl",bindToController:!0,link:function(e,t,s,d){var o=d[0],c=d[1],h=d[2],u=d[3],m=a.parseAttributeBoolean(s.mdNoAsterisk);if(c.configureNgModel(o,h,i),h){var p=t[0].querySelector(".md-errors-spacer");p&&t.after(angular.element("<div>").append(p)),h.setHasPlaceholder(s.mdPlaceholder),h.input=t,h.element.addClass(r).toggleClass(l,"calendar"!==s.mdHideIcons&&"all"!==s.mdHideIcons),h.label?m||s.$observe("required",function(e){h.label.toggleClass("md-required",!!e)}):n.expect(t,"aria-label",s.mdPlaceholder),e.$watch(h.isErrorGetter||function(){return o.$invalid&&(o.$touched||u&&u.$submitted)},h.setInvalid)}else if(u)var g=e.$watch(function(){return u.$submitted},function(e){e&&(c.updateErrorState(),g())})}}}function t(e,t,a,n,i,r,l,s,d,o,c){this.$window=n,this.dateUtil=d,this.$mdConstant=i,this.$mdUtil=l,this.$$rAF=o,this.$mdDateLocale=s,this.documentElement=angular.element(document.documentElement),this.ngModelCtrl=null,this.inputElement=t[0].querySelector("input"),this.ngInputElement=angular.element(this.inputElement),this.inputContainer=t[0].querySelector(".md-datepicker-input-container"),this.calendarPane=t[0].querySelector(".md-datepicker-calendar-pane"),this.calendarButton=t[0].querySelector(".md-datepicker-button"),this.inputMask=angular.element(t[0].querySelector(".md-datepicker-input-mask-opaque")),this.$element=t,this.$attrs=a,this.$scope=e,this.date=null,this.isFocused=!1,this.isDisabled,this.setDisabled(t[0].disabled||angular.isString(a.disabled)),this.isCalendarOpen=!1,this.openOnFocus=a.hasOwnProperty("mdOpenOnFocus"),this.mdInputContainer=null,this.calendarPaneOpenedFrom=null,this.calendarPaneId="md-date-pane-"+l.nextUid(),this.bodyClickHandler=angular.bind(this,this.handleBodyClick),this.windowEventName=h.test(navigator.userAgent||navigator.vendor||window.opera)?"orientationchange":"resize",this.windowEventHandler=l.debounce(angular.bind(this,this.closeCalendarPane),100),this.windowBlurHandler=angular.bind(this,this.handleWindowBlur),this.ngDateFilter=c("date"),this.leftMargin=20,this.topMargin=null,a.tabindex?(this.ngInputElement.attr("tabindex",a.tabindex),a.$set("tabindex",null)):a.$set("tabindex","-1"),a.$set("aria-owns",this.calendarPaneId),r(t),r(angular.element(this.calendarPane));var u=this;e.$on("$destroy",function(){u.detachCalendarPane()}),a.mdIsOpen&&e.$watch("ctrl.isOpen",function(e){e?u.openCalendarPane({target:u.inputElement}):u.closeCalendarPane()}),1===angular.version.major&&angular.version.minor<=4&&this.$onInit()}t.$inject=["$scope","$element","$attrs","$window","$mdConstant","$mdTheming","$mdUtil","$mdDateLocale","$$mdDateUtil","$$rAF","$filter"],e.$inject=["$$mdSvgRegistry","$mdUtil","$mdAria","inputDirective"],angular.module("material.components.datepicker").directive("mdDatepicker",e);var a=3,n="md-datepicker-invalid",i="md-datepicker-open",r="_md-datepicker-floating-label",l="_md-datepicker-has-calendar-icon",s="_md-datepicker-has-triangle-icon",d=500,o=368,c=360,h=/ipad|iphone|ipod|android/i;t.prototype.$onInit=function(){this.locale=this.dateLocale?angular.extend({},this.$mdDateLocale,this.dateLocale):this.$mdDateLocale,this.installPropertyInterceptors(),this.attachChangeListeners(),this.attachInteractionListeners()},t.prototype.configureNgModel=function(e,t,a){this.ngModelCtrl=e,this.mdInputContainer=t,this.$attrs.$set("type","date"),a[0].link.pre(this.$scope,{on:angular.noop,val:angular.noop,0:{}},this.$attrs,[e]);var n=this;n.ngModelCtrl.$formatters.push(function(e){if(e&&!(e instanceof Date))throw Error("The ng-model for md-datepicker must be a Date instance. Currently the model is a: "+typeof e);return n.onExternalChange(e),e}),e.$viewChangeListeners.unshift(angular.bind(this,this.updateErrorState));var i=n.$mdUtil.getModelOption(e,"updateOn");i&&this.ngInputElement.on(i,angular.bind(this.$element,this.$element.triggerHandler,i))},t.prototype.attachChangeListeners=function(){var e=this;e.$scope.$on("md-calendar-change",function(t,a){e.setModelValue(a),e.onExternalChange(a),e.closeCalendarPane()}),e.ngInputElement.on("input",angular.bind(e,e.resizeInputElement));var t=angular.isDefined(this.debounceInterval)?this.debounceInterval:d;e.ngInputElement.on("input",e.$mdUtil.debounce(e.handleInputEvent,t,e))},t.prototype.attachInteractionListeners=function(){var e=this,t=this.$scope,a=this.$mdConstant.KEY_CODE;e.ngInputElement.on("keydown",function(n){n.altKey&&n.keyCode==a.DOWN_ARROW&&(e.openCalendarPane(n),t.$digest())}),e.openOnFocus&&(e.ngInputElement.on("focus",angular.bind(e,e.openCalendarPane)),angular.element(e.$window).on("blur",e.windowBlurHandler),t.$on("$destroy",function(){angular.element(e.$window).off("blur",e.windowBlurHandler)})),t.$on("md-calendar-close",function(){e.closeCalendarPane()})},t.prototype.installPropertyInterceptors=function(){var e=this;if(this.$attrs.ngDisabled){var t=this.$scope.$parent;t&&t.$watch(this.$attrs.ngDisabled,function(t){e.setDisabled(t)})}Object.defineProperty(this,"placeholder",{get:function(){return e.inputElement.placeholder},set:function(t){e.inputElement.placeholder=t||""}})},t.prototype.setDisabled=function(e){this.isDisabled=e,this.inputElement.disabled=e,this.calendarButton&&(this.calendarButton.disabled=e)},t.prototype.updateErrorState=function(e){var t=e||this.date;if(this.clearErrorState(),this.dateUtil.isValidDate(t)){if(t=this.dateUtil.createDateAtMidnight(t),this.dateUtil.isValidDate(this.minDate)){var a=this.dateUtil.createDateAtMidnight(this.minDate);this.ngModelCtrl.$setValidity("mindate",t>=a)}if(this.dateUtil.isValidDate(this.maxDate)){var i=this.dateUtil.createDateAtMidnight(this.maxDate);this.ngModelCtrl.$setValidity("maxdate",t<=i)}angular.isFunction(this.dateFilter)&&this.ngModelCtrl.$setValidity("filtered",this.dateFilter(t))}else this.ngModelCtrl.$setValidity("valid",null==t);angular.element(this.inputContainer).toggleClass(n,!this.ngModelCtrl.$valid)},t.prototype.clearErrorState=function(){this.inputContainer.classList.remove(n),["mindate","maxdate","filtered","valid"].forEach(function(e){this.ngModelCtrl.$setValidity(e,!0)},this)},t.prototype.resizeInputElement=function(){this.inputElement.size=this.inputElement.value.length+a},t.prototype.handleInputEvent=function(){var e=this.inputElement.value,t=e?this.locale.parseDate(e):null;this.dateUtil.setDateTimeToMidnight(t);var a=""==e||this.dateUtil.isValidDate(t)&&this.locale.isDateComplete(e)&&this.isDateEnabled(t);a&&(this.setModelValue(t),this.date=t),this.updateErrorState(t)},t.prototype.isDateEnabled=function(e){return this.dateUtil.isDateWithinRange(e,this.minDate,this.maxDate)&&(!angular.isFunction(this.dateFilter)||this.dateFilter(e))},t.prototype.attachCalendarPane=function(){var e=this.calendarPane,t=document.body;e.style.transform="",this.$element.addClass(i),this.mdInputContainer&&this.mdInputContainer.element.addClass(i),angular.element(t).addClass("md-datepicker-is-showing");var a=this.inputContainer.getBoundingClientRect(),n=t.getBoundingClientRect();(!this.topMargin||this.topMargin<0)&&(this.topMargin=(this.inputMask.parent().prop("clientHeight")-this.ngInputElement.prop("clientHeight"))/2);var r=a.top-n.top-this.topMargin,l=a.left-n.left-this.leftMargin,s=n.top<0&&0==document.body.scrollTop?-n.top:document.body.scrollTop,d=n.left<0&&0==document.body.scrollLeft?-n.left:document.body.scrollLeft,h=s+this.$window.innerHeight,u=d+this.$window.innerWidth; +if(this.inputMask.css({position:"absolute",left:this.leftMargin+"px",top:this.topMargin+"px",width:a.width-1+"px",height:a.height-2+"px"}),l+c>u){if(u-c>0)l=u-c;else{l=d;var m=this.$window.innerWidth/c;e.style.transform="scale("+m+")"}e.classList.add("md-datepicker-pos-adjusted")}r+o>h&&h-o>s&&(r=h-o,e.classList.add("md-datepicker-pos-adjusted")),e.style.left=l+"px",e.style.top=r+"px",document.body.appendChild(e),this.$$rAF(function(){e.classList.add("md-pane-open")})},t.prototype.detachCalendarPane=function(){this.$element.removeClass(i),this.mdInputContainer&&this.mdInputContainer.element.removeClass(i),angular.element(document.body).removeClass("md-datepicker-is-showing"),this.calendarPane.classList.remove("md-pane-open"),this.calendarPane.classList.remove("md-datepicker-pos-adjusted"),this.isCalendarOpen&&this.$mdUtil.enableScrolling(),this.calendarPane.parentNode&&this.calendarPane.parentNode.removeChild(this.calendarPane)},t.prototype.openCalendarPane=function(e){if(!this.isCalendarOpen&&!this.isDisabled&&!this.inputFocusedOnWindowBlur){this.isCalendarOpen=this.isOpen=!0,this.calendarPaneOpenedFrom=e.target,this.$mdUtil.disableScrollAround(this.calendarPane),this.attachCalendarPane(),this.focusCalendar(),this.evalAttr("ngFocus");var t=this;this.$mdUtil.nextTick(function(){t.documentElement.on("click touchstart",t.bodyClickHandler)},!1),window.addEventListener(this.windowEventName,this.windowEventHandler)}},t.prototype.closeCalendarPane=function(){function e(){t.isCalendarOpen=t.isOpen=!1}if(this.isCalendarOpen){var t=this;t.detachCalendarPane(),t.ngModelCtrl.$setTouched(),t.evalAttr("ngBlur"),t.documentElement.off("click touchstart",t.bodyClickHandler),window.removeEventListener(t.windowEventName,t.windowEventHandler),t.calendarPaneOpenedFrom.focus(),t.calendarPaneOpenedFrom=null,t.openOnFocus?t.$mdUtil.nextTick(e):e()}},t.prototype.getCalendarCtrl=function(){return angular.element(this.calendarPane.querySelector("md-calendar")).controller("mdCalendar")},t.prototype.focusCalendar=function(){var e=this;this.$mdUtil.nextTick(function(){e.getCalendarCtrl().focus()},!1)},t.prototype.setFocused=function(e){e||this.ngModelCtrl.$setTouched(),this.openOnFocus||this.evalAttr(e?"ngFocus":"ngBlur"),this.isFocused=e},t.prototype.handleBodyClick=function(e){if(this.isCalendarOpen){var t=this.$mdUtil.getClosest(e.target,"md-calendar");t||this.closeCalendarPane(),this.$scope.$digest()}},t.prototype.handleWindowBlur=function(){this.inputFocusedOnWindowBlur=document.activeElement===this.inputElement},t.prototype.evalAttr=function(e){this.$attrs[e]&&this.$scope.$parent.$eval(this.$attrs[e])},t.prototype.setModelValue=function(e){var t=this.$mdUtil.getModelOption(this.ngModelCtrl,"timezone");this.ngModelCtrl.$setViewValue(this.ngDateFilter(e,"yyyy-MM-dd",t))},t.prototype.onExternalChange=function(e){var t=this.$mdUtil.getModelOption(this.ngModelCtrl,"timezone");this.date=e,this.inputElement.value=this.locale.formatDate(e,t),this.mdInputContainer&&this.mdInputContainer.setHasValue(!!e),this.resizeInputElement(),this.updateErrorState()}}(),ngmaterial.components.datepicker=angular.module("material.components.datepicker");
\ No newline at end of file |