@hxui/angular
Version:
This README includes the steps that are necessary to import the HxUi-angular into a project or to contribute with development.
1,395 lines (1,379 loc) • 689 kB
JavaScript
import { Injectable, ElementRef, Directive, HostListener, NgModule, Component, EventEmitter, Output, Input, forwardRef, TemplateRef, ReflectiveInjector, NgZone, ComponentFactoryResolver, Injector, Renderer2, ViewContainerRef, HostBinding, Optional, Inject, ViewChild, IterableDiffers, ViewEncapsulation, Pipe, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import { NG_VALUE_ACCESSOR, NG_VALIDATORS, FormsModule, NgControl } from '@angular/forms';
import { CommonModule, DOCUMENT } from '@angular/common';
import { __values, __decorate, __spread, __assign } from 'tslib';
import { filter, takeUntil, take, debounceTime, mergeMap, toArray } from 'rxjs/operators';
import { FocusTrapFactory, A11yModule } from '@angular/cdk/a11y';
import { cloneDeep, isEqual } from 'lodash';
import sortBy from 'array-sort-by';
import { Subject, Observable, from } from 'rxjs';
import { ComponentPortal, PortalModule } from '@angular/cdk/portal';
import { Overlay, ScrollDispatcher, OverlayModule } from '@angular/cdk/overlay';
import { Directionality } from '@angular/cdk/bidi';
import { BrowserModule } from '@angular/platform-browser';
import { HttpClientModule } from '@angular/common/http';
import { RouterModule } from '@angular/router';
/**
* @fileoverview added by tsickle
* @suppress {checkTypes} checked by tsc
*/
/**
* @copyright Valor Software
* @copyright Angular ng-bootstrap team
*/
var /**
* @copyright Valor Software
* @copyright Angular ng-bootstrap team
*/
Positioning = /** @class */ (function () {
function Positioning() {
}
/**
* @param {?} element
* @param {?=} round
* @return {?}
*/
Positioning.prototype.position = /**
* @param {?} element
* @param {?=} round
* @return {?}
*/
function (element, round) {
if (round === void 0) { round = true; }
var /** @type {?} */ elPosition;
var /** @type {?} */ parentOffset = { width: 0, height: 0, top: 0, bottom: 0, left: 0, right: 0 };
if (this.getStyle(element, 'position') === 'fixed') {
elPosition = element.getBoundingClientRect();
}
else {
var /** @type {?} */ offsetParentEl = this.offsetParent(element);
elPosition = this.offset(element, false);
if (offsetParentEl !== document.documentElement) {
parentOffset = this.offset(offsetParentEl, false);
}
parentOffset.top += offsetParentEl.clientTop;
parentOffset.left += offsetParentEl.clientLeft;
}
elPosition.top -= parentOffset.top;
elPosition.bottom -= parentOffset.top;
elPosition.left -= parentOffset.left;
elPosition.right -= parentOffset.left;
if (round) {
elPosition.top = Math.round(elPosition.top);
elPosition.bottom = Math.round(elPosition.bottom);
elPosition.left = Math.round(elPosition.left);
elPosition.right = Math.round(elPosition.right);
}
return elPosition;
};
/**
* @param {?} element
* @param {?=} round
* @return {?}
*/
Positioning.prototype.offset = /**
* @param {?} element
* @param {?=} round
* @return {?}
*/
function (element, round) {
if (round === void 0) { round = true; }
var /** @type {?} */ elBcr = element.getBoundingClientRect();
var /** @type {?} */ viewportOffset = {
top: window.pageYOffset - document.documentElement.clientTop,
left: window.pageXOffset - document.documentElement.clientLeft
};
var /** @type {?} */ elOffset = {
height: elBcr.height || element.offsetHeight,
width: elBcr.width || element.offsetWidth,
top: elBcr.top + viewportOffset.top,
bottom: elBcr.bottom + viewportOffset.top,
left: elBcr.left + viewportOffset.left,
right: elBcr.right + viewportOffset.left
};
if (round) {
elOffset.height = Math.round(elOffset.height);
elOffset.width = Math.round(elOffset.width);
elOffset.top = Math.round(elOffset.top);
elOffset.bottom = Math.round(elOffset.bottom);
elOffset.left = Math.round(elOffset.left);
elOffset.right = Math.round(elOffset.right);
}
return elOffset;
};
/**
* @param {?} hostElement
* @param {?} targetElement
* @param {?} placement
* @param {?=} appendToBody
* @return {?}
*/
Positioning.prototype.positionElements = /**
* @param {?} hostElement
* @param {?} targetElement
* @param {?} placement
* @param {?=} appendToBody
* @return {?}
*/
function (hostElement, targetElement, placement, appendToBody) {
var /** @type {?} */ hostElPosition = appendToBody ? this.offset(hostElement, false) : this.position(hostElement, false);
var /** @type {?} */ shiftWidth = {
left: hostElPosition.left,
center: hostElPosition.left + hostElPosition.width / 2 - targetElement.offsetWidth / 2,
right: hostElPosition.left + hostElPosition.width
};
var /** @type {?} */ shiftHeight = {
top: hostElPosition.top,
center: hostElPosition.top + hostElPosition.height / 2 - targetElement.offsetHeight / 2,
bottom: hostElPosition.top + hostElPosition.height
};
var /** @type {?} */ targetElBCR = targetElement.getBoundingClientRect();
var /** @type {?} */ placementPrimary = placement.split(' ')[0] || 'top';
var /** @type {?} */ placementSecondary = placement.split(' ')[1] || 'center';
var /** @type {?} */ targetElPosition = {
height: targetElBCR.height || targetElement.offsetHeight,
width: targetElBCR.width || targetElement.offsetWidth,
top: 0,
bottom: targetElBCR.height || targetElement.offsetHeight,
left: 0,
right: targetElBCR.width || targetElement.offsetWidth
};
switch (placementPrimary) {
case 'top':
targetElPosition.top = hostElPosition.top - targetElement.offsetHeight;
targetElPosition.bottom += hostElPosition.top - targetElement.offsetHeight;
targetElPosition.left = shiftWidth[placementSecondary];
targetElPosition.right += shiftWidth[placementSecondary];
break;
case 'bottom':
targetElPosition.top = shiftHeight[placementPrimary];
targetElPosition.bottom += shiftHeight[placementPrimary];
targetElPosition.left = shiftWidth[placementSecondary];
targetElPosition.right += shiftWidth[placementSecondary];
break;
case 'left':
targetElPosition.top = shiftHeight[placementSecondary];
targetElPosition.bottom += shiftHeight[placementSecondary];
targetElPosition.left = hostElPosition.left - targetElement.offsetWidth;
targetElPosition.right += hostElPosition.left - targetElement.offsetWidth;
break;
case 'right':
targetElPosition.top = shiftHeight[placementSecondary];
targetElPosition.bottom += shiftHeight[placementSecondary];
targetElPosition.left = shiftWidth[placementPrimary];
targetElPosition.right += shiftWidth[placementPrimary];
break;
}
targetElPosition.top = Math.round(targetElPosition.top);
targetElPosition.bottom = Math.round(targetElPosition.bottom);
targetElPosition.left = Math.round(targetElPosition.left);
targetElPosition.right = Math.round(targetElPosition.right);
return targetElPosition;
};
/**
* @param {?} element
* @param {?} prop
* @return {?}
*/
Positioning.prototype.getStyle = /**
* @param {?} element
* @param {?} prop
* @return {?}
*/
function (element, prop) { return (/** @type {?} */ (window.getComputedStyle(element)))[prop]; };
/**
* @param {?} element
* @return {?}
*/
Positioning.prototype.isStaticPositioned = /**
* @param {?} element
* @return {?}
*/
function (element) {
return (this.getStyle(element, 'position') || 'static') === 'static';
};
/**
* @param {?} element
* @return {?}
*/
Positioning.prototype.offsetParent = /**
* @param {?} element
* @return {?}
*/
function (element) {
var /** @type {?} */ offsetParentEl = /** @type {?} */ (element.offsetParent) || document.documentElement;
while (offsetParentEl && offsetParentEl !== document.documentElement && this.isStaticPositioned(offsetParentEl)) {
offsetParentEl = /** @type {?} */ (offsetParentEl.offsetParent);
}
return offsetParentEl || document.documentElement;
};
return Positioning;
}());
var /** @type {?} */ positionService = new Positioning();
/**
* @param {?} hostElement
* @param {?} targetElement
* @param {?} placement
* @param {?=} appendToBody
* @return {?}
*/
function positionElements(hostElement, targetElement, placement, appendToBody) {
var /** @type {?} */ pos = positionService.positionElements(hostElement, targetElement, placement, appendToBody);
targetElement.style.top = pos.top + "px";
targetElement.style.left = pos.left + "px";
}
/**
* @fileoverview added by tsickle
* @suppress {checkTypes} checked by tsc
*/
var PositioningService = /** @class */ (function () {
function PositioningService() {
}
/**
* @param {?} options
* @return {?}
*/
PositioningService.prototype.position = /**
* @param {?} options
* @return {?}
*/
function (options) {
var element = options.element, target = options.target, attachment = options.attachment, appendToBody = options.appendToBody;
positionElements(this._getHtmlElement(target), this._getHtmlElement(element), /** @type {?} */ (attachment), appendToBody);
};
/**
* @param {?} element
* @return {?}
*/
PositioningService.prototype.isElementBelowTheFold = /**
* @param {?} element
* @return {?}
*/
function (element) {
var /** @type {?} */ rect = element.getBoundingClientRect();
return ((rect.top + rect.height) > document.body.clientHeight);
};
/**
* @param {?} element
* @return {?}
*/
PositioningService.prototype._getHtmlElement = /**
* @param {?} element
* @return {?}
*/
function (element) {
// it means that we got a selector
if (typeof element === 'string') {
return /** @type {?} */ (document.querySelector(element));
}
if (element instanceof ElementRef) {
return element.nativeElement;
}
return /** @type {?} */ (element);
};
PositioningService.decorators = [
{ type: Injectable },
];
return PositioningService;
}());
/**
* @fileoverview added by tsickle
* @suppress {checkTypes} checked by tsc
*/
/**
* @abstract
*/
var /**
* @abstract
*/
PositioningOptions = /** @class */ (function () {
function PositioningOptions() {
}
return PositioningOptions;
}());
/**
* @fileoverview added by tsickle
* @suppress {checkTypes} checked by tsc
*/
var AutoGrowDirective = /** @class */ (function () {
function AutoGrowDirective(element) {
this.element = element;
}
/**
* @return {?}
*/
AutoGrowDirective.prototype.onInput = /**
* @return {?}
*/
function () {
this.resize();
};
/**
* @return {?}
*/
AutoGrowDirective.prototype.ngAfterViewInit = /**
* @return {?}
*/
function () {
var /** @type {?} */ style = this.element.nativeElement.style;
style.overflow = 'hidden';
style.height = 'auto';
};
/**
* @return {?}
*/
AutoGrowDirective.prototype.resize = /**
* @return {?}
*/
function () {
var /** @type {?} */ el = this.element.nativeElement;
if (el.style.height === el.scrollHeight + 'px') {
return;
}
el.style.overflow = 'hidden';
el.style.height = 'auto';
el.style.height = el.scrollHeight + "px";
};
AutoGrowDirective.decorators = [
{ type: Directive, args: [{
selector: 'textarea[autogrow]'
},] },
];
/** @nocollapse */
AutoGrowDirective.ctorParameters = function () { return [
{ type: ElementRef, },
]; };
AutoGrowDirective.propDecorators = {
"onInput": [{ type: HostListener, args: ['input', ['$event.target'],] },],
};
return AutoGrowDirective;
}());
/**
* @fileoverview added by tsickle
* @suppress {checkTypes} checked by tsc
*/
var AutoGrowModule = /** @class */ (function () {
function AutoGrowModule() {
}
/**
* @return {?}
*/
AutoGrowModule.forRoot = /**
* @return {?}
*/
function () {
return {
ngModule: AutoGrowModule, providers: []
};
};
AutoGrowModule.decorators = [
{ type: NgModule, args: [{
declarations: [
AutoGrowDirective
],
exports: [
AutoGrowDirective
]
},] },
];
return AutoGrowModule;
}());
/**
* @fileoverview added by tsickle
* @suppress {checkTypes} checked by tsc
*/
var DatepickerComponent = /** @class */ (function () {
function DatepickerComponent(hostElement, positioningService) {
this.hostElement = hostElement;
this.positioningService = positioningService;
this.onDateSelected = new EventEmitter();
this.days = new Array();
this.week = ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday'];
this.cellCount = 41;
}
/**
* @return {?}
*/
DatepickerComponent.prototype.renderCalendar = /**
* @return {?}
*/
function () {
for (var /** @type {?} */ i = 0; i <= this.cellCount; i++) {
// date will be set to the first day of the month set in this.viewDate
var /** @type {?} */ date = new Date(this.viewDate.getFullYear(), this.viewDate.getMonth());
// Shifts the week to start from Monday, rather than Sunday, this causes the index to start at 1
var /** @type {?} */ dayOffset = date.getDay() === 0 ? 7 : date.getDay();
this.days[i] = new Date(date.setDate(2 - dayOffset + i));
}
};
/**
* @return {?}
*/
DatepickerComponent.prototype.positionCalendar = /**
* @return {?}
*/
function () {
var /** @type {?} */ rect = this.hostElement.nativeElement.getBoundingClientRect();
var /** @type {?} */ buffer = 10;
if (this.positioningService.isElementBelowTheFold(this.hostElement.nativeElement)) {
this.hostElement.nativeElement.style.top = (rect.top - (rect.top + rect.height + buffer)) + 'px';
}
};
/**
* @return {?}
*/
DatepickerComponent.prototype.previousMonth = /**
* @return {?}
*/
function () {
this.viewDate = new Date(this.viewDate.getFullYear(), this.viewDate.getMonth() - 1);
this.renderCalendar();
};
/**
* @return {?}
*/
DatepickerComponent.prototype.nextMonth = /**
* @return {?}
*/
function () {
this.viewDate = new Date(this.viewDate.getFullYear(), this.viewDate.getMonth() + 1);
this.renderCalendar();
};
/**
* @param {?} inputDate
* @return {?}
*/
DatepickerComponent.prototype.isCurrentMonth = /**
* @param {?} inputDate
* @return {?}
*/
function (inputDate) {
return inputDate.getMonth() === this.viewDate.getMonth();
};
/**
* @param {?} inputDate
* @return {?}
*/
DatepickerComponent.prototype.isCurrentDay = /**
* @param {?} inputDate
* @return {?}
*/
function (inputDate) {
return inputDate.getTime() === this.presentDate.getTime();
};
/**
* @param {?} inputDate
* @return {?}
*/
DatepickerComponent.prototype.isSelectedDay = /**
* @param {?} inputDate
* @return {?}
*/
function (inputDate) {
if (this.selectedDate) {
return inputDate.getTime() === this.selectedDate.getTime();
}
return false;
};
/**
* @param {?} inputDate
* @return {?}
*/
DatepickerComponent.prototype.isInvalidDay = /**
* @param {?} inputDate
* @return {?}
*/
function (inputDate) {
return this.validators.map(function (fn) { return fn(inputDate); }).reduce(function (prev, next) { return prev || next; }, false);
};
/**
* @param {?} date
* @return {?}
*/
DatepickerComponent.prototype.setSelectedDate = /**
* @param {?} date
* @return {?}
*/
function (date) {
if (!this.isInvalidDay(date)) {
this.selectedDate = date;
this.onDateSelected.emit(date);
}
};
/**
* @param {?} changes
* @return {?}
*/
DatepickerComponent.prototype.ngOnChanges = /**
* @param {?} changes
* @return {?}
*/
function (changes) {
if (!!changes["selectedDate"].currentValue) {
this.viewDate = new Date(this.selectedDate.getFullYear(), this.selectedDate.getMonth());
}
};
/**
* @return {?}
*/
DatepickerComponent.prototype.ngOnInit = /**
* @return {?}
*/
function () {
var /** @type {?} */ date = new Date();
this.presentDate = new Date(date.getFullYear(), date.getMonth(), date.getDate());
this.viewDate = this.viewDate || new Date(date.getFullYear(), date.getMonth());
this.renderCalendar();
this.positionCalendar();
};
DatepickerComponent.decorators = [
{ type: Component, args: [{
selector: 'hxa-datepicker',
template: "<div class=\"hxui-reset\">\n <div class=\"hx-card hxa-datepicker-container\">\n <div class=\"hx-card-header hxa-datepicker-header\">\n <div class=\"hxa-datepicker-month\">\n <div class=\"hxa-datepicker-icon\" title=\"Previous Month\" (click)=\"previousMonth()\">\n <a class=\"hx-button is-transparent\"><i class=\"hx-icon icon-angle-left\"></i></a>\n </div>\n <div class=\"hxa-datepicker-month-title\">\n <span>{{viewDate.toLocaleString(\"en-au\", { month: \"long\", year: \"numeric\" })}}</span></div>\n <div class=\"hxa-datepicker-icon\" title=\"Next Month\" (click)=\"nextMonth()\">\n <a class=\"hx-button is-transparent\"><i class=\"hx-icon icon-angle-right\"></i></a>\n </div>\n </div>\n <div class=\"hxa-datepicker-week\">\n <div class=\"hxa-datepicker-weekday\" *ngFor=\"let weekday of week\">\n {{weekday | slice:0:3}}\n </div>\n </div>\n </div>\n <div class=\"hxa-datepicker-contents\">\n <div class=\"hxa-datepicker-day\" *ngFor=\"let day of days\" \n [ngClass]=\"{'hxa-datepicker-day-siblingmonth': !isCurrentMonth(day), \n 'hxa-datepicker-day-currentday': isCurrentDay(day),\n 'hxa-datepicker-day-selectedday': isSelectedDay(day),\n 'hxa-datepicker-day-invalidday': isInvalidDay(day)}\"\n (click)=\"setSelectedDate(day)\">\n <a class=\"hx-button is-transparent\">{{day.getDate()}}</a>\n </div>\n </div>\n </div>\n</div>",
styles: [".hxa-datepicker-container{max-width:21em;width:21em;height:24em;display:flex;flex-direction:column;font-size:1rem}.hxa-datepicker-header{padding:1rem 1rem 0;flex-direction:column;align-items:initial;justify-content:space-around;font-weight:100}.hxa-datepicker-icon{cursor:pointer;display:flex;flex:1;flex-direction:column;justify-content:center;align-items:center}.hxa-datepicker-icon .hx-button{position:initial!important;top:initial!important}.hxa-datepicker-icon .hx-button.is-transparent:hover{color:#000}.hxa-datepicker-icon .hx-icon{font-size:2.3em;position:initial!important;top:initial!important;color:#0d4d78}.hxa-datepicker-month{display:flex;text-align:center;margin-bottom:1rem}.hxa-datepicker-month-title{font-size:1.5em;flex:3;display:flex;justify-content:center;align-items:center;color:#0d4d78}.hxa-datepicker-week{display:flex;width:100%;text-align:center}.hxa-datepicker-weekday{flex:1;color:#0d4d78}.hxa-datepicker-contents{padding:1rem;background-color:rgba(246,246,249,.5);display:flex;flex-flow:row wrap;flex:1;justify-content:space-around;align-content:space-around}.hxa-datepicker-day{flex:1 1 14%;height:16.666%;display:flex;justify-content:center;align-items:center}.hxa-datepicker-day .hx-button{position:initial;top:initial;flex:1;font-weight:400;height:100%;padding:0;color:#41b987}.hxa-datepicker-day-siblingmonth .hx-button{color:#3b3b3b;font-weight:100}.hxa-datepicker-day-selectedday .hx-button{color:#fff;background:#41b987}.hxa-datepicker-day-invalidday .hx-button{color:#e0e0e1!important;pointer-events:none}.hxa-datepicker-day-currentday .hx-button{border:2px solid #41b987}"]
},] },
];
/** @nocollapse */
DatepickerComponent.ctorParameters = function () { return [
{ type: ElementRef, },
{ type: PositioningService, },
]; };
DatepickerComponent.propDecorators = {
"selectedDate": [{ type: Input },],
"validators": [{ type: Input },],
"onDateSelected": [{ type: Output },],
};
return DatepickerComponent;
}());
/**
* @fileoverview added by tsickle
* @suppress {checkTypes} checked by tsc
*/
var DatepickerFormComponent = /** @class */ (function () {
function DatepickerFormComponent(element) {
this.element = element;
this.disabled = false;
this.readonly = false;
this.required = false;
this.defaultToPresentDate = true;
this.allowPreviousDates = true;
this.allowFutureDates = true;
this.dateFormat = "dd/MM/y";
this.placeholder = "Date";
this.align = "bottom";
this.from = '';
this.to = '';
this.onDateChange = new EventEmitter();
this.visible = false;
this.dateValidators = new Array();
this.onChanged = new Array();
this.onTouched = new Array();
}
/**
* @return {?}
*/
DatepickerFormComponent.prototype.ngOnInit = /**
* @return {?}
*/
function () {
var _this = this;
var /** @type {?} */ date = new Date();
this.presentDate = new Date(date.getFullYear(), date.getMonth(), date.getDate());
if (this.defaultToPresentDate) {
setTimeout(function () {
_this.setDate(_this.presentDate);
});
}
// Close to the minimum and maxium possible dates, but still normalisable
// http://ecma-international.org/ecma-262/5.1/#sec-15.9.1.1
var /** @type {?} */ from$$1 = this.parseDate(this.from) || new Date(-8630000000000000);
var /** @type {?} */ to = this.parseDate(this.to) || new Date(8630000000000000);
if (!!this.from || !!this.to) {
this.validateDateRange = this.createDateRangeValidator(from$$1, to);
this.dateValidators.push(this.validateDateRange.bind(this));
}
if (!this.allowPreviousDates)
this.dateValidators.push(this.validateIsNotBeforeDate.bind(this));
if (!this.allowFutureDates)
this.dateValidators.push(this.validateIsNotAfterDate.bind(this));
};
/**
* @param {?} date
* @return {?}
*/
DatepickerFormComponent.prototype.setDate = /**
* @param {?} date
* @return {?}
*/
function (date) {
this.date = date;
this.onDateChange.emit(date);
this.propogateChange(date);
};
/**
* @return {?}
*/
DatepickerFormComponent.prototype.setVisible = /**
* @return {?}
*/
function () {
this.visible = true;
};
/**
* @return {?}
*/
DatepickerFormComponent.prototype.unsetVisible = /**
* @return {?}
*/
function () {
this.visible = false;
};
/**
* @param {?} targetElement
* @return {?}
*/
DatepickerFormComponent.prototype.onClickOutsideComponent = /**
* @param {?} targetElement
* @return {?}
*/
function (targetElement) {
if (!this.element.nativeElement.firstChild.contains(targetElement)) {
this.unsetVisible();
}
};
/**
* @param {?} inputDate
* @return {?}
*/
DatepickerFormComponent.prototype.onDateSelectEvent = /**
* @param {?} inputDate
* @return {?}
*/
function (inputDate) {
this.unsetVisible();
this.setDate(inputDate);
};
/**
* @param {?} inputDate
* @return {?}
*/
DatepickerFormComponent.prototype.onChange = /**
* @param {?} inputDate
* @return {?}
*/
function (inputDate) {
var /** @type {?} */ date = this.parseDate(inputDate);
if (inputDate == "") {
this.setDate(null);
}
else if (!!date) {
this.setDate(date);
}
else {
this.propogateChange(inputDate);
}
};
/**
* @return {?}
*/
DatepickerFormComponent.prototype.onFocus = /**
* @return {?}
*/
function () {
this.setVisible();
this.propogateTouched();
};
/**
* @param {?} inputDate
* @return {?}
*/
DatepickerFormComponent.prototype.onTab = /**
* @param {?} inputDate
* @return {?}
*/
function (inputDate) {
this.onChange(inputDate);
this.unsetVisible();
this.propogateTouched();
};
/**
* @param {?} inputDate
* @return {?}
*/
DatepickerFormComponent.prototype.parseDate = /**
* @param {?} inputDate
* @return {?}
*/
function (inputDate) {
// Since Date.Parse() only acceps m/d/y dates, we have to swap the day and month
var /** @type {?} */ dateArray = inputDate.split(/[.,\/ -]/);
if (dateArray.length == 3 && dateArray[2].length != 0) {
var /** @type {?} */ day = dateArray.shift();
dateArray.splice(1, 0, day);
var /** @type {?} */ parseInput = Date.parse(dateArray.join("/"));
if (!isNaN(parseInput)) {
return new Date(parseInput);
}
}
return null;
};
/**
* @param {?} date
* @return {?}
*/
DatepickerFormComponent.prototype.validateIsNotBeforeDate = /**
* @param {?} date
* @return {?}
*/
function (date) {
var /** @type {?} */ normalisedDate = new Date(date.getFullYear(), date.getMonth(), date.getDate());
return normalisedDate.getTime() < this.presentDate.getTime();
};
/**
* @param {?} date
* @return {?}
*/
DatepickerFormComponent.prototype.validateIsNotAfterDate = /**
* @param {?} date
* @return {?}
*/
function (date) {
var /** @type {?} */ normalisedDate = new Date(date.getFullYear(), date.getMonth(), date.getDate());
return normalisedDate.getTime() > this.presentDate.getTime();
};
/**
* @param {?} from
* @param {?} to
* @return {?}
*/
DatepickerFormComponent.prototype.createDateRangeValidator = /**
* @param {?} from
* @param {?} to
* @return {?}
*/
function (from$$1, to) {
var /** @type {?} */ normalisedFromDate = new Date(from$$1.getFullYear(), from$$1.getMonth(), from$$1.getDate());
var /** @type {?} */ normalisedToDate = new Date(to.getFullYear(), to.getMonth(), to.getDate());
return function (date) {
var /** @type {?} */ normalisedDate = new Date(date.getFullYear(), date.getMonth(), date.getDate());
return !(normalisedFromDate.getTime() <= normalisedDate.getTime() &&
normalisedDate.getTime() <= normalisedToDate.getTime());
};
};
/**
* @param {?} value
* @return {?}
*/
DatepickerFormComponent.prototype.writeValue = /**
* @param {?} value
* @return {?}
*/
function (value) {
this.setDate(value);
};
/**
* @param {?} fn
* @return {?}
*/
DatepickerFormComponent.prototype.registerOnChange = /**
* @param {?} fn
* @return {?}
*/
function (fn) {
this.onChanged.push(fn);
};
/**
* @param {?} fn
* @return {?}
*/
DatepickerFormComponent.prototype.registerOnTouched = /**
* @param {?} fn
* @return {?}
*/
function (fn) {
this.onTouched.push(fn);
};
/**
* @return {?}
*/
DatepickerFormComponent.prototype.propogateTouched = /**
* @return {?}
*/
function () {
this.onTouched.forEach(function (fn) { return fn(); });
};
/**
* @param {?} value
* @return {?}
*/
DatepickerFormComponent.prototype.propogateChange = /**
* @param {?} value
* @return {?}
*/
function (value) {
this.onChanged.forEach(function (fn) { return fn(value); });
};
/**
* @param {?} control
* @return {?}
*/
DatepickerFormComponent.prototype.validate = /**
* @param {?} control
* @return {?}
*/
function (control) {
var /** @type {?} */ date = Date.parse(control.value);
if (!this.required && (control.value === null || control.value === undefined)) {
this.isValid = true;
return null;
}
if (isNaN(date)) {
this.isValid = false;
return {
dateParseError: {
valid: false
}
};
}
if (!this.allowPreviousDates && this.validateIsNotBeforeDate(this.date)) {
this.isValid = false;
return {
previousDateError: {
valid: false
}
};
}
if (!this.allowFutureDates && this.validateIsNotAfterDate(this.date)) {
this.isValid = false;
return {
futureDateError: {
valid: false
}
};
}
if (this.validateDateRange && this.validateDateRange(this.date)) {
this.isValid = false;
return {
dateRangeError: {
valid: false
}
};
}
if (this.required && !this.date) {
this.isValid = false;
return {
dateRequiredError: {
valid: false
}
};
}
this.isValid = true;
return null;
};
DatepickerFormComponent.decorators = [
{ type: Component, args: [{
selector: 'hxa-datepicker-input, hxa-datepicker-form',
template: "<div class=\"hx-input-group hxa-datepicker-form\">\n <div class=\"hx-input-control\" [ngClass]=\"{'is-danger': !isValid && datePickerForm.touched}\">\n <input class=\"hx-input\" type=\"text\" #datePickerForm=\"ngModel\"\n [required]=\"required ? true : null\"\n [disabled]=\"disabled\"\n [readonly]=\"readonly ? true : null\"\n [ngModel]=\"date | date:dateFormat\"\n (change)=\"onChange(datePickerForm.value)\"\n (focus)=\"onFocus()\"\n (keydown.Tab)=\"onTab(datePickerForm.value)\">\n <label class=\"hx-label\" *ngIf=\"placeholder\">{{placeholder}} <sup *ngIf=\"required\">*</sup></label>\n <div class=\"hx-help\"></div>\n <div class=\"hxa-datepicker-help\">Please select a date</div>\n </div>\n <i class=\"hx-icon icon-calendar\"></i>\n <hxa-datepicker class=\"hxa-datepicker-calendar\" *ngIf=\"visible\" \n [selectedDate]=\"date\"\n [validators]=\"dateValidators\"\n (onDateSelected)=\"onDateSelectEvent($event)\"\n [ngClass]=\"{'hxa-datepicker-calendar-top': align == 'top', 'hxa-datepicker-calendar-bottom': align == 'bottom'}\"></hxa-datepicker>\n</div>\n",
styles: [".hxa-datepicker-form{position:relative;max-width:21rem}.hxa-datepicker-calendar{position:absolute;z-index:99;left:0}.hxa-datepicker-calendar-top{bottom:100%}.hxa-datepicker-calendar-bottom{top:70%}.hxa-datepicker-help{font-size:.75rem;margin-top:.25rem;color:#63605f}.hxa-datepicker-form input[readonly]~.hx-label{top:-.5rem;font-size:.75rem;color:#41b987}"],
providers: [{
provide: NG_VALUE_ACCESSOR,
useExisting: forwardRef(function () { return DatepickerFormComponent; }),
multi: true
},
{
provide: NG_VALIDATORS,
useExisting: forwardRef(function () { return DatepickerFormComponent; }),
multi: true,
}]
},] },
];
/** @nocollapse */
DatepickerFormComponent.ctorParameters = function () { return [
{ type: ElementRef, },
]; };
DatepickerFormComponent.propDecorators = {
"disabled": [{ type: Input },],
"readonly": [{ type: Input },],
"required": [{ type: Input },],
"defaultToPresentDate": [{ type: Input },],
"allowPreviousDates": [{ type: Input },],
"allowFutureDates": [{ type: Input },],
"dateFormat": [{ type: Input },],
"placeholder": [{ type: Input },],
"align": [{ type: Input },],
"from": [{ type: Input },],
"to": [{ type: Input },],
"onDateChange": [{ type: Output },],
"onClickOutsideComponent": [{ type: HostListener, args: ['document:click', ['$event.target'],] },],
};
return DatepickerFormComponent;
}());
/**
* @fileoverview added by tsickle
* @suppress {checkTypes} checked by tsc
*/
var DatepickerModule = /** @class */ (function () {
function DatepickerModule() {
}
/**
* @return {?}
*/
DatepickerModule.forRoot = /**
* @return {?}
*/
function () {
return { ngModule: DatepickerModule, providers: [] };
};
DatepickerModule.decorators = [
{ type: NgModule, args: [{
imports: [CommonModule, FormsModule],
declarations: [DatepickerComponent, DatepickerFormComponent],
exports: [DatepickerComponent, DatepickerFormComponent]
},] },
];
return DatepickerModule;
}());
/**
* @fileoverview added by tsickle
* @suppress {checkTypes} checked by tsc
*/
/**
* Default dropdown configuration
*/
var DropdownConfig = /** @class */ (function () {
function DropdownConfig() {
/**
* default dropdown auto closing behavior
*/
this.autoClose = true;
}
DropdownConfig.decorators = [
{ type: Injectable },
];
return DropdownConfig;
}());
/**
* @fileoverview added by tsickle
* @suppress {checkTypes} checked by tsc
*/
var ContentRef = /** @class */ (function () {
function ContentRef(nodes, viewRef, componentRef) {
this.nodes = nodes;
this.viewRef = viewRef;
this.componentRef = componentRef;
}
return ContentRef;
}());
/**
* @fileoverview added by tsickle
* @suppress {checkTypes} checked by tsc
*/
/**
* @copyright Valor Software
* @copyright Angular ng-bootstrap team
*/
var /**
* @copyright Valor Software
* @copyright Angular ng-bootstrap team
*/
Trigger = /** @class */ (function () {
function Trigger(open, close) {
this.open = open;
this.close = close || open;
}
/**
* @return {?}
*/
Trigger.prototype.isManual = /**
* @return {?}
*/
function () { return this.open === 'manual' || this.close === 'manual'; };
return Trigger;
}());
/**
* @fileoverview added by tsickle
* @suppress {checkTypes} checked by tsc
*/
var /** @type {?} */ DEFAULT_ALIASES = {
hover: ['mouseenter', 'mouseleave'],
focus: ['focusin', 'focusout']
};
/**
* @param {?} triggers
* @param {?=} aliases
* @return {?}
*/
function parseTriggers(triggers, aliases) {
if (aliases === void 0) { aliases = DEFAULT_ALIASES; }
var /** @type {?} */ trimmedTriggers = (triggers || '').trim();
if (trimmedTriggers.length === 0) {
return [];
}
var /** @type {?} */ parsedTriggers = trimmedTriggers.split(/\s+/)
.map(function (trigger) { return trigger.split(':'); })
.map(function (triggerPair) {
var /** @type {?} */ alias = aliases[triggerPair[0]] || triggerPair;
return new Trigger(alias[0], alias[1]);
});
var /** @type {?} */ manualTriggers = parsedTriggers
.filter(function (triggerPair) { return triggerPair.isManual(); });
if (manualTriggers.length > 1) {
throw new Error('Triggers parse error: only one manual trigger is allowed');
}
if (manualTriggers.length === 1 && parsedTriggers.length > 1) {
throw new Error('Triggers parse error: manual trigger can\'t be mixed with other triggers');
}
return parsedTriggers;
}
/**
* @param {?} renderer
* @param {?} target
* @param {?} triggers
* @param {?} showFn
* @param {?} hideFn
* @param {?} toggleFn
* @return {?}
*/
function listenToTriggers(renderer, target, triggers, showFn, hideFn, toggleFn) {
var /** @type {?} */ parsedTriggers = parseTriggers(triggers);
var /** @type {?} */ listeners = [];
if (parsedTriggers.length === 1 && parsedTriggers[0].isManual()) {
return Function.prototype;
}
parsedTriggers.forEach(function (trigger) {
if (trigger.open === trigger.close) {
listeners.push(renderer.listen(target, trigger.open, toggleFn));
return;
}
listeners.push(renderer.listen(target, /** @type {?} */ (trigger.open), showFn), renderer.listen(target, /** @type {?} */ (trigger.close), hideFn));
});
return function () { listeners.forEach(function (unsubscribeFn) { return (unsubscribeFn()); }); };
}
/**
* @fileoverview added by tsickle
* @suppress {checkTypes} checked by tsc
*/
/**
* @template T
*/
var /**
* @template T
*/
ComponentLoader = /** @class */ (function () {
function ComponentLoader(_viewContainerRef, _renderer, _elementRef, _injector, _componentFactoryResolver, _ngZone, _posService) {
this.onBeforeShow = new EventEmitter();
this.onShown = new EventEmitter();
this.onBeforeHide = new EventEmitter();
this.onHidden = new EventEmitter();
this._providers = [];
this._ngZone = _ngZone;
this._injector = _injector;
this._renderer = _renderer;
this._elementRef = _elementRef;
this._posService = _posService;
this._viewContainerRef = _viewContainerRef;
this._componentFactoryResolver = _componentFactoryResolver;
}
Object.defineProperty(ComponentLoader.prototype, "isShown", {
get: /**
* @return {?}
*/
function () {
return !!this._componentRef;
},
enumerable: true,
configurable: true
});
/**
* @param {?} compType
* @return {?}
*/
ComponentLoader.prototype.attach = /**
* @param {?} compType
* @return {?}
*/
function (compType) {
this._componentFactory = this._componentFactoryResolver
.resolveComponentFactory(compType);
return this;
};
/**
* @param {?=} container
* @return {?}
*/
ComponentLoader.prototype.to = /**
* @param {?=} container
* @return {?}
*/
function (container) {
this.container = container || this.container;
return this;
};
/**
* @param {?=} opts
* @return {?}
*/
ComponentLoader.prototype.position = /**
* @param {?=} opts
* @return {?}
*/
function (opts) {
this.attachment = opts.attachment || this.attachment;
this._elementRef = /** @type {?} */ (opts.target) || this._elementRef;
return this;
};
/**
* @param {?} provider
* @return {?}
*/
ComponentLoader.prototype.provide = /**
* @param {?} provider
* @return {?}
*/
function (provider) {
this._providers.push(provider);
return this;
};
/**
* @param {?=} opts
* @return {?}
*/
ComponentLoader.prototype.show = /**
* @param {?=} opts
* @return {?}
*/
function (opts) {
if (opts === void 0) { opts = {}; }
this._subscribePositioning();
if (!this._componentRef) {
this.onBeforeShow.emit();
this._contentRef = this._getContentRef(opts.content);
var /** @type {?} */ injector = ReflectiveInjector.resolveAndCreate(this._providers, this._injector);
this._componentRef = this._viewContainerRef
.createComponent(this._componentFactory, 0, injector, this._contentRef.nodes);
this.instance = this._componentRef.instance;
Object.assign(this._componentRef.instance, opts);
if (this.container === 'body' && typeof document !== 'undefined') {
document.querySelector(/** @type {?} */ (this.container))
.appendChild(this._componentRef.location.nativeElement);
}
// we need to manually invoke change detection since events registered
// via
// Renderer::listen() are not picked up by change detection with the
// OnPush strategy
this._componentRef.changeDetectorRef.markForCheck();
this.onShown.emit(this._componentRef.instance);
}
return this._componentRef;
};
/**
* @return {?}
*/
ComponentLoader.prototype.hide = /**
* @return {?}
*/
function () {
if (this._componentRef) {
this.onBeforeHide.emit(this._componentRef.instance);
this._viewContainerRef.remove(this._viewContainerRef.indexOf(this._componentRef.hostView));
this._componentRef = null;
if (this._contentRef.viewRef) {
this._viewContainerRef.remove(this._viewContainerRef.indexOf(this._contentRef.viewRef));
this._contentRef = null;
}
this._componentRef = null;
this.onHidden.emit();
}
return this;
};
/**
* @return {?}
*/
ComponentLoader.prototype.toggle = /**
* @return {?}
*/
function () {
if (this.isShown) {
this.hide();
return;
}
this.show();
};
/**
* @return {?}
*/
ComponentLoader.prototype.dispose = /**
* @return {?}
*/
function () {
if (this.isShown) {
this.hide();
}
this._unsubscribePositioning();
if (this._unregisterListenersFn) {
this._unregisterListenersFn();
}
};
/**
* @param {?} listenOpts
* @return {?}
*/
ComponentLoader.prototype.listen = /**
* @param {?} listenOpts
* @return {?}
*/
function (listenOpts) {
var _this = this;
this.triggers = listenOpts.triggers || this.triggers;
listenOpts.target = listenOpts.target || this._elementRef;
listenOpts.show = listenOpts.show || (function () { return _this.show(); });
listenOpts.hide = listenOpts.hide || (function () { return _this.hide(); });
listenOpts.toggle = listenOpts.toggle || (function () {
return _this.isShown
? listenOpts.hide()
: listenOpts.show();
});
this._unregisterListenersFn = listenToTriggers(this._renderer, listenOpts.target.nativeElement, this.triggers, listenOpts.show, listenOpts.hide, listenOpts.toggle);
return this;
};
/**
* @return {?}
*/
ComponentLoader.prototype._subscribePositioning = /**
* @return {?}
*/
function () {
var _this = this;
if (this._zoneSubscription || !this.attachment) {
return;
}
this._zoneSubscription = this._ngZone
.onStable.subscribe(function () {
if (!_this._componentRef) {
return;
}
_this._posService.position({
element: _this._componentRef.location,
target: _this._elementRef,
attachment: _this.attachment,
appendToBody: _this.container === 'body'
});
});
};
/**
* @return {?}
*/
ComponentLoader.prototype._unsubscribePositioning = /**
* @return {?}
*/
function () {
if (!this._zoneSubscription) {
return;
}
this._zoneSubscription.unsubscribe();
this._zoneSubscription = null;
};
/**
* @param {?} content
* @return {?}
*/
ComponentLoader.prototype._getContentRef = /**
* @param {?} content
* @return {?}
*/
function (content) {
if (!content) {
return new ContentRef([]);
}
if (content instanceof TemplateRef) {
var /** @type {?} */ viewRef = this._viewContainerRef
.createEmbeddedView(content);
return new ContentRef([viewRef.rootNodes], viewRef);
}
return new ContentRef([[this._renderer.createText("" + content)]]);
};
return ComponentLoader;
}());
/**
* @fileoverview added by tsickle
* @suppress {checkTypes} checked by tsc
*/
var ComponentLoaderFactory = /** @class */ (function () {
function ComponentLoaderFactory(componentFactoryResolver, ngZone, injector, posService) {
this._ngZone = ngZone;
this._injector = injector;
this._posService = posService;
this._componentFactoryResolver = componentFactoryResolver;
}
/**
* @template T
* @param {?} _elementRef
* @param {?} _viewContainerRef
* @param {?} _renderer
* @return {?}
*/
ComponentLoaderFactory.prototype.createLoader = /**
* @template T
* @param {?} _elementRef
* @param {?} _viewContainerRef
* @param {?} _renderer
* @return {?}
*/
function (_elementRef, _viewContainerRef, _renderer) {
return new ComponentLoader(_viewContainerRef, _renderer, _elementRef, this._injector, this._componentFactoryResolver, this._ngZone, this._posService);
};
ComponentLoaderFactory.decorators = [
{ type: Injectable },
];
/** @nocollapse */
ComponentLoaderFactory.ctorParameters = function () { return [
{ type: ComponentFactoryResolver, },
{ type: NgZone, },
{ type: Injector, },
{ type: PositioningService, },
]; };
return ComponentLoaderFactory;
}());
/**
* @fileoverview added by tsickle
* @suppress {checkTypes} checked by tsc
*/
var DropdownState = /** @class */ (function () {
function DropdownState() {
var _this = this;
this.direction = 'down';
this.isOpenChange = new EventEmitter();
this.isDisabledChange = new EventEmitter();
this.toggleClick = new EventEmitter();
this.dropdownMenu = new Promise(function (resolve) {
_this.resolveDropdownMenu = resolve;
});
this.isOpenChange.subscribe(function (value) {
_this.isOpen = value;
});
}
DropdownState.decorators = [
{ type: Injectable },
];
/** @nocollapse */
DropdownState.ctorParameters = function () { return []; };
return DropdownState;
}());
/**
* @fileoverview added by tsickle
* @suppress {checkTypes} checked by tsc
*/
var DropdownContainerComponent = /** @class */ (function () {
function DropdownContainerComponent(_state) {
var _this = this;
this._state = _state;
this.isOpen = false;
this._subscription = _state.isOpenChange.subscribe(function (value) {
_this.isOpen = value;
});
}
Object.defineProperty(DropdownContainerComponent.prototype, "direction", {
get: /**
* @return {?}
*/
function () {