import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppComponent } from './app.component';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { AccessibilityModule, ColorServiceModule, colorSets } from '@ux-aspects/ux-aspects';
import { FloatLabelModule } from '@ux-aspects/ux-aspects';
import { LoginModule } from '@micro-focus/ux-aspects';
import { AutofillMonitor } from './autofill';
@NgModule({
imports: [
AccessibilityModule,
ColorServiceModule.forRoot(colorSets.microFocus),
BrowserModule,
FormsModule,
ReactiveFormsModule,
LoginModule,
BrowserAnimationsModule,
FloatLabelModule,
],
declarations: [
AppComponent,
],
providers: [
AutofillMonitor
],
bootstrap: [AppComponent]
})
export class AppModule {
}
platformBrowserDynamic().bootstrapModule(AppModule);
System.config({
"transpiler": "typescript",
"typescriptOptions": {
"emitDecoratorMetadata": true
},
"map": {
"@ux-aspects/ux-aspects": "https://unpkg.com/@ux-aspects/ux-aspects@1.7.16/bundles/ux-aspects-ux-aspects.umd.js",
"@micro-focus/ux-aspects": "./mf.ts",
"@angular/core": "https://unpkg.com/@angular/core@5/bundles/core.umd.js",
"@angular/common": "https://unpkg.com/@angular/common@5/bundles/common.umd.js",
"@angular/compiler": "https://unpkg.com/@angular/compiler@5/bundles/compiler.umd.js",
"@angular/forms": "https://unpkg.com/@angular/forms@5/bundles/forms.umd.js",
"@angular/router": "https://unpkg.com/@angular/router@5/bundles/router.umd.js",
"@angular/common/http": "https://unpkg.com/@angular/common@5/bundles/common-http.umd.js",
"@angular/platform-browser": "https://unpkg.com/@angular/platform-browser@5/bundles/platform-browser.umd.js",
"@angular/platform-browser/animations": "https://unpkg.com/@angular/platform-browser@5/bundles/platform-browser-animations.umd.js",
"@angular/platform-browser-dynamic": "https://unpkg.com/@angular/platform-browser-dynamic@5/bundles/platform-browser-dynamic.umd.js",
"@angular/upgrade/static": "https://unpkg.com/@angular/upgrade@5/bundles/upgrade-static.umd.js",
"@angular/animations": "https://unpkg.com/@angular/animations@5/bundles/animations.umd.js",
"@angular/animations/browser": "https://unpkg.com/@angular/animations@5/bundles/animations-browser.umd.js",
"@angular/cdk/a11y": "https://unpkg.com/@angular/cdk@5.2.5/bundles/cdk-a11y.umd.js",
"@angular/cdk/accordion": "https://unpkg.com/@angular/cdk@5.2.5bundles/cdk-accordion.umd.js",
"@angular/cdk/bidi": "https://unpkg.com/@angular/cdk@5.2.5/bundles/cdk-bidi.umd.js",
"@angular/cdk/coercion": "https://unpkg.com/@angular/cdk@5.2.5/bundles/cdk-coercion.umd.js",
"@angular/cdk/collections": "https://unpkg.com/@angular/cdk@5.2.5/bundles/cdk-collections.umd.js",
"@angular/cdk/keycodes": "https://unpkg.com/@angular/cdk@5.2.5/bundles/cdk-keycodes.umd.js",
"@angular/cdk/layout": "https://unpkg.com/@angular/cdk@5.2.5/bundles/cdk-layout.umd.js",
"@angular/cdk/observers": "https://unpkg.com/@angular/cdk@5.2.5/bundles/cdk-observers.umd.js",
"@angular/cdk/overlay": "https://unpkg.com/@angular/cdk@5.2.5/bundles/cdk-overlay.umd.js",
"@angular/cdk/platform": "https://unpkg.com/@angular/cdk@5.2.5/bundles/cdk-platform.umd.js",
"@angular/cdk/portal": "https://unpkg.com/@angular/cdk@5.2.5/bundles/cdk-portal.umd.js",
"@angular/cdk/scrolling": "https://unpkg.com/@angular/cdk@5.2.5/bundles/cdk-scrolling.umd.js",
"@angular/cdk/stepper": "https://unpkg.com/@angular/cdk@5.2.5/bundles/cdk-stepper.umd.js",
"@angular/cdk/table": "https://unpkg.com/@angular/cdk@5.2.5/bundles/cdk-table.umd.js",
"tslib": "https://unpkg.com/tslib@1.7.1",
"rxjs": "https://unpkg.com/rxjs@6.5.2",
"rxjs-compat": "https://unpkg.com/rxjs-compat@6.5.2",
"ngx-bootstrap": "https://unpkg.com/ngx-bootstrap@2.0.5/bundles/ngx-bootstrap.umd.min.js",
"chance": "https://unpkg.com/chance",
"chart.js": "https://unpkg.com/chart.js/dist/Chart.bundle.min.js",
"ng2-charts": "https://unpkg.com/ng2-charts@1.6.0/charts/charts.js",
"ng2-file-upload": "https://unpkg.com/ng2-file-upload/bundles/ng2-file-upload.umd.js",
"angular-split": "https://unpkg.com/angular-split@1.0.0-rc.3/bundles/angular-split.umd.js",
"dragula": "https://unpkg.com/dragula/dist/dragula.js",
"dragula/dist/dragula": "https://unpkg.com/dragula/dist/dragula.js",
"ngx-mask": "https://unpkg.com/ngx-mask/bundles/ngx-mask.umd.js",
"resize-observer-polyfill": "https://unpkg.com/resize-observer-polyfill@1.5.0/dist/ResizeObserver.js",
"d3": "https://unpkg.com/d3@5.9.2",
"d3-array": "https://unpkg.com/d3@5.9.2",
"d3-axis": "https://unpkg.com/d3@5.9.2",
"d3-brush": "https://unpkg.com/d3@5.9.2",
"d3-chord": "https://unpkg.com/d3@5.9.2",
"d3-collection": "https://unpkg.com/d3@5.9.2",
"d3-color": "https://unpkg.com/d3@5.9.2",
"d3-contour": "https://unpkg.com/d3@5.9.2",
"d3-dispatch": "https://unpkg.com/d3@5.9.2",
"d3-drag": "https://unpkg.com/d3@5.9.2",
"d3-dsv": "https://unpkg.com/d3@5.9.2",
"d3-ease": "https://unpkg.com/d3@5.9.2",
"d3-fetch": "https://unpkg.com/d3@5.9.2",
"d3-force": "https://unpkg.com/d3@5.9.2",
"d3-format": "https://unpkg.com/d3@5.9.2",
"d3-geo": "https://unpkg.com/d3@5.9.2",
"d3-hierarchy": "https://unpkg.com/d3@5.9.2",
"d3-interpolate": "https://unpkg.com/d3@5.9.2",
"d3-path": "https://unpkg.com/d3@5.9.2",
"d3-polygon": "https://unpkg.com/d3@5.9.2",
"d3-quadtree": "https://unpkg.com/d3@5.9.2",
"d3-random": "https://unpkg.com/d3@5.9.2",
"d3-scale": "https://unpkg.com/d3@5.9.2",
"d3-scale-chromatic": "https://unpkg.com/d3@5.9.2",
"d3-selection": "https://unpkg.com/d3@5.9.2",
"d3-shape": "https://unpkg.com/d3@5.9.2",
"d3-time": "https://unpkg.com/d3@5.9.2",
"d3-time-format": "https://unpkg.com/d3@5.9.2",
"d3-timer": "https://unpkg.com/d3@5.9.2",
"d3-transition": "https://unpkg.com/d3@5.9.2",
"d3-voronoi": "https://unpkg.com/d3@5.9.2",
"d3-zoom": "https://unpkg.com/d3@5.9.2",
"ngx-bootstrap/accordion": "https://unpkg.com/ngx-bootstrap@2.0.5/bundles/ngx-bootstrap.umd.min.js",
"ngx-bootstrap/alert": "https://unpkg.com/ngx-bootstrap@2.0.5/bundles/ngx-bootstrap.umd.min.js",
"ngx-bootstrap/buttons": "https://unpkg.com/ngx-bootstrap@2.0.5/bundles/ngx-bootstrap.umd.min.js",
"ngx-bootstrap/carousel": "https://unpkg.com/ngx-bootstrap@2.0.5/bundles/ngx-bootstrap.umd.min.js",
"ngx-bootstrap/collapse": "https://unpkg.com/ngx-bootstrap@2.0.5/bundles/ngx-bootstrap.umd.min.js",
"ngx-bootstrap/component-loader": "https://unpkg.com/ngx-bootstrap@2.0.5/bundles/ngx-bootstrap.umd.min.js",
"ngx-bootstrap/datepicker": "https://unpkg.com/ngx-bootstrap@2.0.5/bundles/ngx-bootstrap.umd.min.js",
"ngx-bootstrap/dropdown": "https://unpkg.com/ngx-bootstrap@2.0.5/bundles/ngx-bootstrap.umd.min.js",
"ngx-bootstrap/modal": "https://unpkg.com/ngx-bootstrap@2.0.5/bundles/ngx-bootstrap.umd.min.js",
"ngx-bootstrap/pagination": "https://unpkg.com/ngx-bootstrap@2.0.5/bundles/ngx-bootstrap.umd.min.js",
"ngx-bootstrap/popover": "https://unpkg.com/ngx-bootstrap@2.0.5/bundles/ngx-bootstrap.umd.min.js",
"ngx-bootstrap/positioning": "https://unpkg.com/ngx-bootstrap@2.0.5/bundles/ngx-bootstrap.umd.min.js",
"ngx-bootstrap/progressbar": "https://unpkg.com/ngx-bootstrap@2.0.5/bundles/ngx-bootstrap.umd.min.js",
"ngx-bootstrap/rating": "https://unpkg.com/ngx-bootstrap@2.0.5/bundles/ngx-bootstrap.umd.min.js",
"ngx-bootstrap/sortable": "https://unpkg.com/ngx-bootstrap@2.0.5/bundles/ngx-bootstrap.umd.min.js",
"ngx-bootstrap/tabs": "https://unpkg.com/ngx-bootstrap@2.0.5/bundles/ngx-bootstrap.umd.min.js",
"ngx-bootstrap/timepicker": "https://unpkg.com/ngx-bootstrap@2.0.5/bundles/ngx-bootstrap.umd.min.js",
"ngx-bootstrap/tooltip": "https://unpkg.com/ngx-bootstrap@2.0.5/bundles/ngx-bootstrap.umd.min.js",
"ngx-bootstrap/typeahead": "https://unpkg.com/ngx-bootstrap@2.0.5/bundles/ngx-bootstrap.umd.min.js"
},
"packages": {
".": {
"defaultExtension": "ts"
},
"vendor": {
"defaultExtension": "js"
},
"rxjs": {
"main": "index.js",
"defaultExtension": "js"
},
"rxjs/operators": {
"main": "index.js",
"defaultExtension": "js"
},
"rxjs/internal-compatibility": {
"main": "index.js",
"defaultExtension": "js"
}
}
});
import { Component, ElementRef, ViewChild, OnDestroy, AfterViewInit } from '@angular/core';
import { AbstractControl, FormBuilder, FormGroup, Validators } from '@angular/forms';
import { AutofillMonitor } from './autofill.ts';
import { LoginLayout } from '@micro-focus/ux-aspects';
@Component({
selector: 'app',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent implements AfterViewInit, OnDestroy {
@ViewChild('username', { read: ElementRef, static: false }) username: ElementRef<HTMLElement>;
@ViewChild('password', { read: ElementRef, static: false }) password: ElementRef<HTMLElement>;
usernameAutofilled: boolean;
passwordAutofilled: boolean;
familyColor: string = '#ba47e2';
familyName: string = 'Application <br> Dev/Test';
familyIcon: string = 'A';
formTitle: string = 'StormRunner <br> Load';
animated: boolean = true;
gridCharacter: string = '+';
gridRows: number = 5;
gridColumns: number = 6;
gridAnimated: boolean = true;
gridDelay: number = 1190;
layout: LoginLayout = LoginLayout.Basic;
graphicPanelImage: string = (window as any).uxdAssetsUrl + '/img/virtual-reality.png';
icon: string = (window as any).uxdAssetsUrl + '/img/app-logo.svg';
companyLogo: string = (window as any).uxdAssetsUrl + '/img/Micro-Focus-Logo-Grey.png';
visible = true;
loginForm: FormGroup;
get usernameValue(): string {
return this.loginForm.get('username').value;
}
get passwordValue(): string {
return this.loginForm.get('password').value;
}
// exposing enum to the view
LoginLayout = LoginLayout;
constructor(private formBuilder: FormBuilder,
private _autofill: AutofillMonitor) {
this.loginForm = formBuilder.group({
'username': [''],
'password': ['']
});
}
ngAfterViewInit() {
this._autofill.monitor(this.username.nativeElement)
.subscribe(value => this.usernameAutofilled = value.isAutofilled);
this._autofill.monitor(this.password.nativeElement)
.subscribe(value => this.passwordAutofilled = value.isAutofilled);
}
ngOnDestroy() {
this._autofill.stopMonitoring(this.username.nativeElement);
this._autofill.stopMonitoring(this.password.nativeElement);
}
reload(): void {
this.visible = false;
setTimeout(() => {
this.visible = true;
});
}
setBasicLayout(): void {
this.gridDelay = 1190;
this.reload();
}
setThemeImageLayout(): void {
this.gridDelay = 1800;
this.reload();
}
}
/**
* The above is checking if the input field has been autofilled using the AutoFillMonitor Sevice, the 'AutoFilled' text will
* appear if the input field has been autofilled.
* AutoFillMonitor Service will need to be added to you application and imported - This can be seen in 'autofill.ts'
* CSS for the AutoFillMonitor will need to be added to your application - This can be seen in 'app.component.css'
*
*/
<ux-login *ngIf="visible"
[familyColor]="familyColor"
[familyName]="familyName"
[familyIcon]="familyIcon"
[formTitle]="formTitle"
[animated]="animated"
[gridCharacter]="gridCharacter"
[gridRows]="gridRows"
[gridColumns]="gridColumns"
[gridAnimated]="gridAnimated"
[gridDelay]="gridDelay"
[layout]="layout"
[graphicPanelImage]="graphicPanelImage"
[icon]="icon"
[companyLogo]="companyLogo">
<form [formGroup]="loginForm" class="form-flat">
<div class="form-group">
<label [uxFloatLabel]="username" [value]="usernameValue" for="username">User Name</label>
<input type="text" #username id="username" class="form-control" formControlName="username">
</div>
<div class="form-group">
<label [uxFloatLabel]="password" [value]="passwordValue" for="password">Password</label>
<input type="password" #password id="password" class="form-control" formControlName="password">
</div>
<div class="form-group text-right">
<button type="submit" class="btn button-primary">Login</button>
</div>
</form>
</ux-login>
<button type="button" class="m-l-lg btn button-primary" (click)="reload()">Reload Animation</button>
<!DOCTYPE html>
<html>
<head>
<base href=".">
<title>UX Aspects Example</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/typescript/3.4.5/typescript.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/core-js/2.5.7/core.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/zone.js/0.9.1/zone.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.47/system.js"></script>
<script src="systemjs.config.js"></script>
<script>window.uxdAssetsUrl = 'https://pages.github.houston.softwaregrp.net/caf/ux-aspects-micro-focus/assets';</script>
<link rel="stylesheet" href="https://unpkg.com/bootstrap@3.3.7/dist/css/bootstrap.min.css"/>
<link rel="stylesheet" href="https://pages.github.houston.softwaregrp.net/caf/ux-aspects-micro-focus/assets/styles/ux-aspects.css"/>
<link rel="stylesheet" href="https://pages.github.houston.softwaregrp.net/caf/ux-aspects-micro-focus/assets/styles/quantum-ux-aspects.css"/>
<style>body { padding: 15px; background-color: #fff; }</style>
</head>
<body>
<app>Loading...</app>
<script>System.import('main.ts').catch(console.error.bind(console));</script>
</body>
</html>
/**
* @license
* Copyright Google LLC All Rights Reserved.
*
* Use of this source code is governed by an MIT-style license that can be
* found in the LICENSE file at https://angular.io/license
*/
import {Platform} from '@angular/cdk/platform';
import {
Directive,
ElementRef,
EventEmitter,
Injectable,
NgZone,
OnDestroy,
OnInit,
Output,
} from '@angular/core';
import {EMPTY, Observable, Subject} from 'rxjs';
/** An event that is emitted when the autofill state of an input changes. */
export type AutofillEvent = {
/** The element whose autofill state changes. */
target: Element;
/** Whether the element is currently autofilled. */
isAutofilled: boolean;
};
/** Used to track info about currently monitored elements. */
type MonitoredElementInfo = {
subject: Subject<AutofillEvent>;
unlisten: () => void;
};
/** Options to pass to the animationstart listener. */
const listenerOptions = normalizePassiveListenerOptions({passive: true});
/**
* An injectable service that can be used to monitor the autofill state of an input.
* Based on the following blog post:
* https://medium.com/@brunn/detecting-autofilled-fields-in-javascript-aed598d25da7
*/
@Injectable()
export class AutofillMonitor implements OnDestroy {
private _monitoredElements = new Map<Element, MonitoredElementInfo>();
constructor(private _platform: Platform, private _ngZone: NgZone) {}
/**
* Monitor for changes in the autofill state of the given input element.
* @param element The element to monitor.
* @return A stream of autofill state changes.
*/
monitor(element: Element): Observable<AutofillEvent> {
if (!this._platform.isBrowser) {
return EMPTY;
}
const info = this._monitoredElements.get(element);
if (info) {
return info.subject.asObservable();
}
const result = new Subject<AutofillEvent>();
const cssClass = 'cdk-text-field-autofilled';
const listener = ((event: AnimationEvent) => {
// Animation events fire on initial element render, we check for the presence of the autofill
// CSS class to make sure this is a real change in state, not just the initial render before
// we fire off events.
if (event.animationName === 'cdk-text-field-autofill-start' &&
!element.classList.contains(cssClass)) {
element.classList.add(cssClass);
this._ngZone.run(() => result.next({target: event.target as Element, isAutofilled: true}));
} else if (event.animationName === 'cdk-text-field-autofill-end' &&
element.classList.contains(cssClass)) {
element.classList.remove(cssClass);
this._ngZone.run(() => result.next({target: event.target as Element, isAutofilled: false}));
}
}) as EventListenerOrEventListenerObject;
this._ngZone.runOutsideAngular(() => {
element.addEventListener('animationstart', listener, listenerOptions);
element.classList.add('cdk-text-field-autofill-monitored');
});
this._monitoredElements.set(element, {
subject: result,
unlisten: () => {
element.removeEventListener('animationstart', listener, listenerOptions);
}
});
return result.asObservable();
}
/**
* Stop monitoring the autofill state of the given input element.
* @param element The element to stop monitoring.
*/
stopMonitoring(element: Element): void;
/**
* Stop monitoring the autofill state of the given input element.
* @param element The element to stop monitoring.
*/
stopMonitoring(element: ElementRef<Element>): void;
stopMonitoring(elementOrRef: Element | ElementRef<Element>): void {
const element = coerceElement(elementOrRef);
const info = this._monitoredElements.get(element);
if (info) {
info.unlisten();
info.subject.complete();
element.classList.remove('cdk-text-field-autofill-monitored');
element.classList.remove('cdk-text-field-autofilled');
this._monitoredElements.delete(element);
}
}
ngOnDestroy() {
this._monitoredElements.forEach((_info, element) => this.stopMonitoring(element));
}
}
/** Cached result of whether the user's browser supports passive event listeners. */
let supportsPassiveEvents: boolean;
/**
* Checks whether the user's browser supports passive event listeners.
* See: https://github.com/WICG/EventListenerOptions/blob/gh-pages/explainer.md
*/
export function supportsPassiveEventListeners(): boolean {
if (supportsPassiveEvents == null && typeof window !== 'undefined') {
try {
window.addEventListener('test', null!, Object.defineProperty({}, 'passive', {
get: () => supportsPassiveEvents = true
}));
} finally {
supportsPassiveEvents = supportsPassiveEvents || false;
}
}
return supportsPassiveEvents;
}
/**
* Normalizes an `AddEventListener` object to something that can be passed
* to `addEventListener` on any browser, no matter whether it supports the
* `options` parameter.
* @param options Object to be normalized.
*/
export function normalizePassiveListenerOptions(options: AddEventListenerOptions):
AddEventListenerOptions | boolean {
return supportsPassiveEventListeners() ? options : !!options.capture;
}
@keyframes cdk-text-field-autofill-start{/*!*/}@keyframes cdk-text-field-autofill-end{/*!*/}.cdk-text-field-autofill-monitored:-webkit-autofill{animation-name:cdk-text-field-autofill-start}.cdk-text-field-autofill-monitored:not(:-webkit-autofill){animation-name:cdk-text-field-autofill-end}textarea.cdk-textarea-autosize{resize:none}textarea.cdk-textarea-autosize-measuring{height:auto!important;overflow:hidden!important;padding:2px 0!important;box-sizing:content-box!important}
!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("rxjs/BehaviorSubject"),require("rxjs/Observable"),require("@angular/platform-browser"),require("@angular/cdk/observers"),require("@angular/forms"),require("@angular/cdk/layout"),require("rxjs/operators"),require("rxjs/Subject"),require("@angular/common"),require("@angular/core"),require("@ux-aspects/ux-aspects")):"function"==typeof define&&define.amd?define("@micro-focus/ux-aspects",["exports","rxjs/BehaviorSubject","rxjs/Observable","@angular/platform-browser","@angular/cdk/observers","@angular/forms","@angular/cdk/layout","rxjs/operators","rxjs/Subject","@angular/common","@angular/core","@ux-aspects/ux-aspects"],t):t((e["micro-focus"]=e["micro-focus"]||{},e["micro-focus"]["ux-aspects"]={}),e.rxjs.BehaviorSubject,e.rxjs.Observable,e.ng.platformBrowser,e.ng.cdk.observers,e.ng.forms,e.ng.cdk.layout,e.rxjs.operators,e.rxjs.Subject,e.ng.common,e.ng.core,e.uxAspects)}(this,function(e,n,t,a,i,r,o,s,l,d,c,u){"use strict";var m=function(e,t){return(m=Object.setPrototypeOf||{__proto__:[]}instanceof Array&&function(e,t){e.__proto__=t}||function(e,t){for(var n in t)t.hasOwnProperty(n)&&(e[n]=t[n])})(e,t)};var h=function(){return(h=Object.assign||function(e){for(var t,n=1,i=arguments.length;n<i;n++)for(var r in t=arguments[n])Object.prototype.hasOwnProperty.call(t,r)&&(e[r]=t[r]);return e}).apply(this,arguments)};function g(e,t){var n="function"==typeof Symbol&&e[Symbol.iterator];if(!n)return e;var i,r,a=n.call(e),o=[];try{for(;(void 0===t||0<t--)&&!(i=a.next()).done;)o.push(i.value)}catch(s){r={error:s}}finally{try{i&&!i.done&&(n=a["return"])&&n.call(a)}finally{if(r)throw r.error}}return o}function p(){for(var e=[],t=0;t<arguments.length;t++)e=e.concat(g(arguments[t]));return e}var y=function(){function e(){this.blocks=[{size:8,duration:0},{size:8,duration:200},{size:8,duration:400}],this._blockCount=3,this._animationDelay=200}return Object.defineProperty(e.prototype,"size",{set:function(e){this.blocks=[];for(var t=e/(2*this._blockCount-1),n=0;n<this._blockCount;n++)this.blocks=p(this.blocks,[{duration:n*this._animationDelay,size:t}])},enumerable:!0,configurable:!0}),e.decorators=[{type:c.Component,args:[{selector:"ux-loader",template:'<div class="ux-loader-block"\n *ngFor="let block of blocks; let first = first; let last = last"\n [style.width.px]="block.size"\n [style.height.px]="block.size"\n [style.margin-left.px]="first ? 0 : block.size / 2"\n [style.margin-right.px]="last ? 0 : block.size / 2"\n [style.animation-delay.ms]="block.duration">\n</div>',changeDetection:c.ChangeDetectionStrategy.OnPush}]}],e.propDecorators={size:[{type:c.Input}]},e}(),f=function(){function e(){this.thickness=5,this.length=15,this._size=35}return Object.defineProperty(e.prototype,"size",{get:function(){return this._size},set:function(e){this._size=e,this.thickness=Math.ceil(e/7),this.length=(e-this.thickness)/2},enumerable:!0,configurable:!0}),e.decorators=[{type:c.Component,args:[{selector:"ux-spinner",template:'<div class="ux-spinner-container"\n [style.width.px]="thickness"\n [style.height.px]="thickness">\n\n <div class="ux-spinner ux-spinner-left"\n [style.width.px]="length"\n [style.height.px]="length"\n [style.top.px]="-length"\n [style.border-left-width.px]="thickness"\n [style.border-bottom-width.px]="thickness">\n </div>\n\n <div class="ux-spinner ux-spinner-right"\n [style.width.px]="length"\n [style.height.px]="length"\n [style.left.px]="-length"\n [style.border-top-width.px]="thickness"\n [style.border-right-width.px]="thickness">\n </div>\n\n</div>',changeDetection:c.ChangeDetectionStrategy.OnPush}]}],e.propDecorators={size:[{type:c.Input},{type:c.HostBinding,args:["style.width.px"]},{type:c.HostBinding,args:["style.height.px"]}]},e}(),v=function(){function e(){}return e.decorators=[{type:c.NgModule,args:[{declarations:[f,y],exports:[f,y],imports:[d.CommonModule]}]}],e}(),D=function(){return function(e){return new t.Observable(function(t){e.subscribe({next:function(e){requestAnimationFrame(function(){return t.next(e)})},error:function(e){t.error(e)},complete:function(){t.complete()}})})}};function b(e,t,n){void 0===n&&(n=t);var i=new Date(t.getFullYear(),t.getMonth(),t.getDate()),r=new Date(n.getFullYear(),n.getMonth(),n.getDate(),23,59,59,999),a=e.start.getTime(),o=e.end.getTime();return!0===e.ref.allDay?a>=i.getTime()&&a<=r.getTime():a<=r.getTime()&&o>=i.getTime()&&!F(e.end)}function k(e,t,n){void 0===n&&(n=t);var i=M(t).start,r=M(n).end;return e.start.getTime()<i.getTime()&&(e.start=i),e.end&&e.end.getTime()>=r.getTime()&&(e.end=r),e}function w(e,t){return 100*(e/24+t/1440)}function I(e){var t=g(e.split(":").map(function(e){return parseInt(e)}),3);return{hour:t[0],minute:t[1],second:t[2]}}function C(e){return e.ref.allDay?0:w(e.end.getHours(),e.end.getMinutes())-w(e.start.getHours(),e.start.getMinutes())}function x(e){for(var t=0;;){if(!e.find(function(e){return e.indentation===t}))return t;t++}}function T(t,e){return e.filter(function(e){return!e.ref.allDay&&e.start.getTime()<=t&&e.end.getTime()>t})}function O(e,t){return void 0===t&&(t=new Date),e.getFullYear()===t.getFullYear()&&e.getMonth()===t.getMonth()&&e.getDate()===t.getDate()}function _(e,t){void 0===t&&(t=e.target);var n=t.getBoundingClientRect(),i=n.top,r=n.left;return{x:e.clientX-r,y:e.clientY-i}}function E(e){return e.reduce(function(e,t){return p(e,function n(i){if(i.allDay||O(i.start,i.end))return[{ref:i,start:new Date(i.start),end:new Date(i.end)}];return function r(e,t){var n=new Date(e),i=[];for(;!O(n,t);)i.push(new Date(n)),n.setDate(n.getDate()+1);return i.push(n),i}(i.start,i.end).map(function(e){return M(e)}).map(function(e){var t=e.start,n=e.end;return{ref:i,start:O(i.start,t)?new Date(i.start):new Date(t),end:O(i.end,n)?new Date(i.end):new Date(n)}})}(t))},[])}function M(e){return{start:new Date(e.getFullYear(),e.getMonth(),e.getDate()),end:new Date(e.getFullYear(),e.getMonth(),e.getDate(),23,59,59,999)}}function S(e){return e.reduce(function(e,t){return-1!==e.indexOf(t.ref)?e:p(e,[t.ref])},[])}function F(e){return 0===e.getHours()&&0===e.getMinutes()&&0===e.getSeconds()}function z(t,e){return e.filter(function(e){return e.ref===t.ref})}function R(t,e,n){z(e,n).forEach(function(e){return e.dragging=t})}function P(n,e){var t=function r(n){return W.reduce(function(e,t){return p(e,n.map(function(e){return{hour:t,minute:e}}))},[])}(e),i=L/t.length;return t.map(function(e,t){return{time:e,position:t*i}}).reduce(function(e,t){return Math.abs(e.position-n)<Math.abs(t.position-n)?e:t},{position:Infinity})}function H(e,t){return z(e,t).reduce(function(e,t){return t.end.getTime()>e.end.getTime()?t:e})===e}var W=[0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23],$=["Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday"],j=50,L=j*W.length,B=function(){function e(e){var t=this;this._changeDetectorRef=e,this.date=new Date,this.items=[],this.showNow=!0,this.headerFormatter=this.defaultHeaderFormatter,this.hourFormatter=this.defaultHourFormatter,this.showDraggingIndicator=!0,this.itemDragEnabled=!0,this.itemResizeEnabled=!0,this.allDayResizable=!1,this.itemsChange=new c.EventEmitter,this.itemClick=new c.EventEmitter,this.itemDblClick=new c.EventEmitter,this.itemRightClick=new c.EventEmitter,this.itemKeydown=new c.EventEmitter,this.itemDragged=new c.EventEmitter,this.itemResized=new c.EventEmitter,this.timeClick=new c.EventEmitter,this.timeDblClick=new c.EventEmitter,this.timeRightClick=new c.EventEmitter,this.timeDragged=new c.EventEmitter,this.headerClick=new c.EventEmitter,this.hours=W,this.subdivisions=[0,30],this.nowIndicatorPosition$=new n.BehaviorSubject(this.getNowPosition()),this.nodes=[],this.isHeaderOverflowing=!1,this.onHeaderResize$=new l.Subject,this.headerOverflowCheck$=this.onHeaderResize$.pipe(D()),this._offset={x:0,y:0},this._workdayStart={hour:9,minute:0,second:0},this._workdayEnd={hour:17,minute:0,second:0},this._intervalId=window.setInterval(function(){return t.nowIndicatorPosition$.next(t.getNowPosition())},28e3)}return Object.defineProperty(e.prototype,"workStart",{set:function(e){this._workdayStart=I(e)},enumerable:!0,configurable:!0}),Object.defineProperty(e.prototype,"workEnd",{set:function(e){this._workdayEnd=I(e)},enumerable:!0,configurable:!0}),Object.defineProperty(e.prototype,"hourDivisions",{set:function(e){this.subdivisions=function i(e){for(var t=[],n=0;n<e;n++)t.push(60/e*n);return t}(e)},enumerable:!0,configurable:!0}),e.prototype.ngOnChanges=function(e){(e.date||e.items)&&this.setItemPositions()},e.prototype.ngAfterViewInit=function(){var e=this.scrollToTime?I(this.scrollToTime):this._workdayStart,t=this.calendar.nativeElement.scrollHeight/86400,n=60*t,i=60*n,r=e.hour*i+(e.minute||0)*n+(e.second||0)*t;this.calendar.nativeElement.scrollTop=r},e.prototype.ngOnDestroy=function(){clearInterval(this._intervalId)},e.prototype.getNowPosition=function(){if(this.showNow&&this.isDateToday())return w((new Date).getHours(),(new Date).getMinutes())},e.prototype.isStartOfWorkDay=function(e,t){return 60*this._workdayStart.hour+this._workdayStart.minute===60*e+t},e.prototype.isWorkingHour=function(e,t){void 0===t&&(t=0);var n=60*this._workdayStart.hour+this._workdayStart.minute,i=60*this._workdayEnd.hour+this._workdayStart.minute,r=60*e+t;return n<=r&&r<i},e.prototype.isDateToday=function(e){return void 0===e&&(e=this.date),O(e)},e.prototype.setItemPositions=function(t,n){var e,i;void 0===t&&(t=this.date),void 0===n&&(n=this.date),this.nodes=E(this.items).filter(function(e){return b(e,t,n)});try{for(var r=function d(e){var t="function"==typeof Symbol&&e[Symbol.iterator],n=0;return t?t.call(e):{next:function(){return e&&n>=e.length&&(e=void 0),{value:e&&e[n++],done:!e}}}}(this.nodes),a=r.next();!a.done;a=r.next()){var o=a.value,s=w((o=k(o,t,n)).start.getHours(),o.start.getMinutes()),l=C(o);o.top=s,o.height=l}}catch(c){e={error:c}}finally{try{a&&!a.done&&(i=r["return"])&&i.call(r)}finally{if(e)throw e.error}}!function u(e,t){void 0===t&&(t=0);for(var n=e.filter(function(e){return!e.ref.allDay}).reduce(function(e,t){return Math.min(e,t.start.getTime())},Infinity),i=e.filter(function(e){return!e.ref.allDay}).reduce(function(e,t){return Math.max(e,t.end.getTime())},0),r=n;r<=i;r+=6e4){var a=T(r,e);a.forEach(function(e,t,n){e.indentation===undefined&&(e.indentation=x(n))}),a.forEach(function(e,t,n){var i=100/n.length;i=n.reduce(function(e,t){return Math.min(e,t.width||i)},i),i=Math.min(e.width||i,i),e.width=i,e.left=e.width*e.indentation})}t<Math.max(e.reduce(function(e,t){return Math.max(e,t.indentation||0)},0),1)&&u(e,t+1)}(this.nodes),this._changeDetectorRef.markForCheck()},e.prototype.convertTimeToDate=function(e,t){return new Date(this.date.getFullYear(),this.date.getMonth(),this.date.getDate(),e,t)},e.prototype.trackByFn=function(e,t){return t.ref.id},e.prototype.dragstart=function(e,t){this._node=h({},t),R(!0,t,this.nodes),t.left=0,t.width=100,this._offset=_(e),this._changeDetectorRef.markForCheck(),this._event=e},e.prototype.drag=function(e,t){var n=P(_(e,this.grid.nativeElement).y-this._offset.y,this.subdivisions);t.top=n.position/L*100,t.height=C(t),t.time=n.time,this._event=e,this._changeDetectorRef.markForCheck()},e.prototype.dragend=function(e){if(this.isOverDrop||this.drag(this._event,e),this.isOverDrop=null,R(!1,e,this.nodes),this._offset={x:0,y:0},e.time){var t=function n(e){return e.ref.end.getTime()-e.ref.start.getTime()}(e);e.ref.start.setHours(e.time.hour,e.time.minute),e.ref.end.setTime(e.ref.start.getTime()+t),this.setItemPositions()}this._changeDetectorRef.markForCheck(),this.itemDragged.emit(e.ref),this.items=S(this.nodes),this.itemsChange.emit(this.items)},e.prototype.onDrop=function(e){e.top=this._node.top,e.left=this._node.left,e.width=this._node.width,e.height=this._node.height,e.time=this._node.time},e.prototype.resizestart=function(e,t){R(!0,t,this.nodes),e.stopPropagation()},e.prototype.resize=function(e,t){var n=P(_(e,this.grid.nativeElement).y-this._offset.y,this.subdivisions),i=new Date(t.end);i.setHours(n.time.hour,n.time.minute),i.getTime()>t.start.getTime()&&(t.end.setTime(i.getTime()),t.height=C(t)),this._changeDetectorRef.markForCheck()},e.prototype.resizeend=function(e){R(!1,e,this.nodes),e.ref.end.setTime(e.end.getTime()),this.itemResized.emit(e.ref),this.setItemPositions(),this.items=S(this.nodes),this.itemsChange.emit(this.items)},e.prototype.isDraggable=function(e){return"boolean"==typeof this.itemDragEnabled?this.itemDragEnabled:"function"!=typeof this.itemDragEnabled||this.itemDragEnabled(e.ref)},e.prototype.isResizable=function(e){return"boolean"==typeof this.itemResizeEnabled?H(e,this.nodes)&&this.itemResizeEnabled:"function"!=typeof this.itemResizeEnabled||H(e,this.nodes)&&this.itemResizeEnabled(e.ref)},e.prototype.timeDragstart=function(e){var t=_(e,this.grid.nativeElement).y;this._offset=_(e),this.dragIndicator={start:P(t-this._offset.y,this.subdivisions).time},this._changeDetectorRef.markForCheck()},e.prototype.timeDrag=function(e){var t=_(e,this.grid.nativeElement).y;this._offset=_(e);var n=P(t-this._offset.y+j/this.subdivisions.length,this.subdivisions).time;j*W.length-j/this.subdivisions.length<t&&(n.hour=23,n.minute=59),60*this.dragIndicator.start.hour+this.dragIndicator.start.minute<60*n.hour+n.minute&&(this.dragIndicator=h({},this.dragIndicator,{end:n})),this._changeDetectorRef.markForCheck()},e.prototype.timeDragend=function(){if(this.dragIndicator.start&&this.dragIndicator.end){var e=new Date(this.date),t=new Date(this.date);e.setHours(this.dragIndicator.start.hour,this.dragIndicator.start.minute,0,0),t.setHours(this.dragIndicator.end.hour,this.dragIndicator.end.minute,0,0),this.timeDragged.emit({start:e,end:t})}this._offset={x:0,y:0},this.dragIndicator={},this._changeDetectorRef.markForCheck()},e.prototype.getPositionFromTime=function(e){return void 0===e&&(e={hour:0,minute:0}),w(e.hour,e.minute)},e.prototype.getHeightFromTimeDifference=function(e,t){return void 0===t&&(t=e),e||t?w(t.hour,t.minute)-w(e.hour,e.minute):0},e.prototype.onHeaderResize=function(e,t,n){var i=e.pageY-pageYOffset,r=t.getBoundingClientRect(),a=i-(r.top+r.height/2),o=getComputedStyle(n),s=o.minHeight,l=o.maxHeight;this.allDayHeight||(this.allDayHeight=n.getBoundingClientRect().height);var d=isNaN(parseFloat(s))?84:parseFloat(s),c=isNaN(parseFloat(l))?Infinity:parseFloat(l);this.allDayHeight=Math.max(Math.min(c,this.allDayHeight+a),d),this.onHeaderResize$.next()},e.prototype.defaultHeaderFormatter=function(e){return $[e.getDay()]+" "+e.getDate()},e.prototype.defaultHourFormatter=function(e){return e+":00 "+(e<12?"AM":"PM")},e.decorators=[{type:c.Component,args:[{selector:"ux-calendar-day",template:'\x3c!-- Calendar Header Section --\x3e\n<div class="calendar-header"\n #header\n [class.calendar-header-resizable]="allDayResizable"\n [style.height.px]="allDayHeight"\n [style.padding-right.px]="calendar.offsetWidth - calendar.scrollWidth">\n\n \x3c!-- Header Left Side --\x3e\n <div class="calendar-header-side"\n aria-hidden="true">\n <ng-container [ngTemplateOutlet]="headerIndicatorTemplate || defaultHeaderIndicatorTemplate">\n </ng-container>\n </div>\n\n \x3c!-- Header Main Content Region --\x3e\n <div class="calendar-header-main">\n\n \x3c!-- Show Current Date --\x3e\n <div class="calendar-header-title"\n (click)="headerClick.emit(date)"\n [class.calendar-header-title-active]="isDateToday()">\n <span class="calendar-header-title-label">{{ headerFormatter(date) }}</span>\n </div>\n\n \x3c!-- Show List of the All Day Items --\x3e\n <div class="calendar-header-items"\n [trigger]="headerOverflowCheck$"\n [style.margin-right.px]="isHeaderOverflowing ? calendar.scrollWidth - calendar.offsetWidth : 0"\n (uxOverflowVerticalObserver)="isHeaderOverflowing = $event">\n\n \x3c!-- Loop through all the All Day items --\x3e\n <div class="calendar-header-item"\n tabindex="0"\n uxDrag\n [model]="item.ref"\n [draggable]="isDraggable(item)"\n [clone]="true"\n group="ux-calendar-day-all-day-item"\n *ngFor="let item of nodes | allDay: true; trackBy: trackByFn"\n attr.aria-label="All day calendar item on {{ item.start | date: \'MMMM d, y\' }}"\n [ngClass]="customClass ? customClass(item.ref) : null"\n [ngStyle]="customStyle ? customStyle(item.ref) : null"\n (keydown)="itemKeydown.emit({ event: $event, item: item.ref })"\n (click)="itemClick.emit(item.ref)"\n (contextmenu)="itemRightClick.emit(item.ref)"\n (dblclick)="itemDblClick.emit(item.ref)">\n\n <div class="calendar-header-item-handle"></div>\n\n <ng-container [ngTemplateOutlet]="allDayItemTemplate || defaultAllDayItemTemplate"\n [ngTemplateOutletContext]="{ $implicit: item.ref }">\n </ng-container>\n </div>\n\n </div>\n </div>\n\n <div *ngIf="allDayResizable"\n #headerResizer\n class="calendar-header-resizer"\n uxDrag\n (onDrag)="onHeaderResize($event, headerResizer, header)">\n </div>\n\n</div>\n\n\x3c!-- The main calendar region --\x3e\n<div class="calendar-main"\n role="presentation"\n #calendar>\n\n \x3c!-- The side region containing the hours --\x3e\n <div class="calendar-main-side"\n aria-hidden="true">\n <div *ngFor="let hour of hours"\n class="calendar-hour-indicator"\n [class.calendar-hour-indicator-workday]="isWorkingHour(hour)">\n {{ hourFormatter(hour) }}\n </div>\n </div>\n\n <div class="calendar-main-hours"\n role="grid"\n #grid>\n\n \x3c!-- Draw the row outlines --\x3e\n <div *ngFor="let hour of hours"\n class="calendar-hour-row">\n <div class="calendar-hour-row-division"\n *ngFor="let minute of subdivisions"\n uxDrag\n (onDragStart)="timeDragstart($event)"\n (onDrag)="timeDrag($event)"\n (onDragEnd)="timeDragend()"\n [class.calendar-hour-row-division-workhour]="isWorkingHour(hour, minute)"\n [style.height.%]="100 / subdivisions.length"\n (click)="timeClick.emit(convertTimeToDate(hour, minute))"\n (contextmenu)="timeRightClick.emit(convertTimeToDate(hour, minute))"\n (dblclick)="timeDblClick.emit(convertTimeToDate(hour, minute))">\n </div>\n </div>\n\n \x3c!-- Loop through all the regular items --\x3e\n <ux-calendar-item [hidden]="isOverDrop === item"\n [item]="item"\n group="ux-calendar-day-item"\n [isResizable]="isResizable(item)"\n [isDraggable]="isDraggable(item)"\n [template]="itemTemplate"\n [customClass]="customClass ? customClass(item.ref) : null"\n [customStyle]="customStyle ? customStyle(item.ref) : null"\n *ngFor="let item of nodes | allDay: false; trackBy: trackByFn"\n (itemClick)="itemClick.emit(item.ref)"\n (itemRightClick)="itemRightClick.emit(item.ref)"\n (itemDblClick)="itemDblClick.emit(item.ref)"\n (itemKeydown)="itemKeydown.emit($event)"\n (onDragStart)="dragstart($event, item)"\n (onDrag)="drag($event, item)"\n (onDragEnd)="dragend(item)"\n (onDrop)="onDrop(item)"\n (onDropEnter)="isOverDrop = item"\n (onDropLeave)="isOverDrop = null"\n (resizeStart)="resizestart($event, item)"\n (resize)="resize($event, item)"\n (resizeEnd)="resizeend(item)">\n </ux-calendar-item>\n\n \x3c!-- Show the current time --\x3e\n <div class="calendar-now-indicator"\n *ngIf="showNow && isDateToday()"\n [style.top.%]="nowIndicatorPosition$ | async">\n </div>\n\n <div class="calendar-drag-indicator"\n *ngIf="showDraggingIndicator && dragIndicator"\n [style.top.%]="getPositionFromTime(dragIndicator.start)"\n [style.height.%]="getHeightFromTimeDifference(dragIndicator.start, dragIndicator.end)">\n </div>\n\n </div>\n\n</div>\n\n<ng-template #defaultAllDayItemTemplate\n let-item>\n <span class="calendar-label">{{ item?.subject }}</span>\n</ng-template>\n\n<ng-template #defaultHeaderIndicatorTemplate>\n <span i18n="@@uxaspects.calendar.allday">All Day</span>\n <span class="hpe-icon hpe-chevron-right"></span>\n</ng-template>',changeDetection:c.ChangeDetectionStrategy.OnPush,host:{role:"grid"}}]}],e.ctorParameters=function(){return[{type:c.ChangeDetectorRef}]},e.propDecorators={date:[{type:c.Input}],items:[{type:c.Input}],showNow:[{type:c.Input}],workStart:[{type:c.Input}],workEnd:[{type:c.Input}],hourDivisions:[{type:c.Input}],headerFormatter:[{type:c.Input}],hourFormatter:[{type:c.Input}],customClass:[{type:c.Input}],customStyle:[{type:c.Input}],scrollToTime:[{type:c.Input}],showDraggingIndicator:[{type:c.Input}],itemDragEnabled:[{type:c.Input}],itemResizeEnabled:[{type:c.Input}],allDayResizable:[{type:c.Input}],itemsChange:[{type:c.Output}],itemClick:[{type:c.Output}],itemDblClick:[{type:c.Output}],itemRightClick:[{type:c.Output}],itemKeydown:[{type:c.Output}],itemDragged:[{type:c.Output}],itemResized:[{type:c.Output}],timeClick:[{type:c.Output}],timeDblClick:[{type:c.Output}],timeRightClick:[{type:c.Output}],timeDragged:[{type:c.Output}],headerClick:[{type:c.Output}],itemTemplate:[{type:c.ContentChild,args:["itemTemplate"]}],allDayItemTemplate:[{type:c.ContentChild,args:["allDayItemTemplate"]}],headerIndicatorTemplate:[{type:c.ContentChild,args:["headerIndicatorTemplate"]}],grid:[{type:c.ViewChild,args:["grid"]}],calendar:[{type:c.ViewChild,args:["calendar"]}]},e}(),A=function(){function e(e,t){this._changeDetector=e,this._santizer=t,this.date=new Date,this.items=[],this.showNow=!0,this.startDay=d.WeekDay.Sunday,this.itemDragEnabled=!0,this.itemsChange=new c.EventEmitter,this.itemClick=new c.EventEmitter,this.itemDblClick=new c.EventEmitter,this.itemRightClick=new c.EventEmitter,this.itemKeydown=new c.EventEmitter,this.itemDragged=new c.EventEmitter,this.dayClick=new c.EventEmitter,this.dayRightClick=new c.EventEmitter,this.dayDblClick=new c.EventEmitter,this.resize$=new l.Subject,this._overflow=new Map,this._items=new Map}return e.prototype.ngOnChanges=function(e){var t=this;(e.date||e.items||e.startDay)&&(this._days=null,setTimeout(function(){return t._changeDetector.detectChanges()})),e.items&&(this._items.clear(),this.rowHeight=this.getWeekHeight())},e.prototype.ngAfterViewInit=function(){this._changeDetector.detectChanges()},e.prototype.isToday=function(e){return O(e,new Date)},e.prototype.getDays=function(){for(var e=[d.WeekDay.Sunday,d.WeekDay.Monday,d.WeekDay.Tuesday,d.WeekDay.Wednesday,d.WeekDay.Thursday,d.WeekDay.Friday,d.WeekDay.Saturday],t=0;t<this.startDay;t++)e.push(e.shift());return e},e.prototype.getDaysInMonth=function(){if(this._days)return this._days;for(var e=new Date(this.date.getFullYear(),this.date.getMonth()),t=new Date(this.date.getFullYear(),this.date.getMonth()+1,0),n=this.getDays()[6];e.getDay()!==this.startDay;)e.setDate(e.getDate()-1);for(;t.getDay()!==n;)t.setDate(t.getDate()+1);for(var i=[],r=new Date(e),a=M(t).end;r<a;)i.push(new Date(r)),r.setDate(r.getDate()+1);this._days=[];for(var o=0;o<i.length;o+=7)this._days.push(i.slice(o,o+7));return this._days},e.prototype.isCurrentMonth=function(e){return e.getMonth()===this.date.getMonth()&&e.getFullYear()===this.date.getFullYear()},e.prototype.getItemsForDay=function(t){var n=this;if(this._items.has(t))return this._items.get(t).slice();var e=this.items.filter(function(e){return n.isItemOnDate(e,t)}).sort(function(e,t){return e.start.getTime()-t.start.getTime()});return this._items.set(t,e),e},e.prototype.isItemOnDate=function(e,t){var n=M(t),i=n.start,r=n.end,a=i.getTime(),o=r.getTime();return!0===e.allDay?e.start.getTime()>=a&&e.start.getTime()<=o:a<=e.end.getTime()&&o>=e.start.getTime()&&!F(e.end)},e.prototype.trackItemByFn=function(e,t){return t.id},e.prototype.trackWeekByFn=function(e,t){return t[0].getTime()},e.prototype.trackDayByFn=function(e,t){return t.getTime()},e.prototype.moveItemToDate=function(e){if(this.isDragging){var t=this.isDragging.allDay?0:this.isDragging.end.getTime()-this.isDragging.start.getTime();this.isDragging.start.setMonth(e.getMonth(),e.getDate()),this.isDragging.allDay||this.isDragging.end.setTime(this.isDragging.start.getTime()+t),this.isDragging=null,this.items=this.items.slice(),this.itemsChange.emit(this.items),this._items.clear()}},e.prototype.setOverflowState=function(e,t){this._overflow.set(e,t),this._changeDetector.detectChanges()},e.prototype.isOverflowing=function(e){return!!this._overflow.has(e)&&this._overflow.get(e)},e.prototype.getWeekHeight=function(){return this._santizer.bypassSecurityTrustStyle("calc(100% / "+this.getDaysInMonth().length+")")},e.prototype.blur=function(e){this.focused=null,requestAnimationFrame(function(){return e.scrollTop=0})},e.prototype.getStartAndEndOfDay=function(e){return M(e)},e.prototype.isItemDraggable=function(e){return"boolean"==typeof this.itemDragEnabled?this.itemDragEnabled:"function"!=typeof this.itemDragEnabled||this.itemDragEnabled(e)},e.decorators=[{type:c.Component,args:[{selector:"ux-calendar-month",template:'<div class="calendar-header">\n <div class="calendar-header-item" *ngFor="let day of getDays()">\n <span class="calendar-header-item-label" *ngIf="day === 0" i18n="@@uxaspects.calendar.Sunday">Sunday</span>\n <span class="calendar-header-item-label" *ngIf="day === 1" i18n="@@uxaspects.calendar.Monday">Monday</span>\n <span class="calendar-header-item-label" *ngIf="day === 2" i18n="@@uxaspects.calendar.Tuesday">Tuesday</span>\n <span class="calendar-header-item-label" *ngIf="day === 3" i18n="@@uxaspects.calendar.Wednesday">Wednesday</span>\n <span class="calendar-header-item-label" *ngIf="day === 4" i18n="@@uxaspects.calendar.Thursday">Thursday</span>\n <span class="calendar-header-item-label" *ngIf="day === 5" i18n="@@uxaspects.calendar.Friday">Friday</span>\n <span class="calendar-header-item-label" *ngIf="day === 6" i18n="@@uxaspects.calendar.Saturday">Saturday</span>\n </div>\n</div>\n\n<div class="calendar" role="grid" (uxResize)="resize$.next()">\n\n <div class="calendar-week"\n *ngFor="let week of getDaysInMonth(); trackBy: trackWeekByFn; let weekIdx = index"\n [style.height]="rowHeight">\n\n <div class="calendar-day"\n role="gridcell"\n [class.calendar-day-dragging]="isDragging"\n [class.calendar-day-active]="showNow && isToday(day)"\n [class.calendar-day-outside-range]="!isCurrentMonth(day)"\n (mouseup)="moveItemToDate(day)"\n (click)="dayClick.emit(day)"\n (contextmenu)="dayRightClick.emit(day)"\n (dblclick)="dayDblClick.emit(day)"\n *ngFor="let day of week; trackBy: trackDayByFn; let dayIdx = index">\n\n <div class="calendar-day-header">{{ day | date: \'d\' }}</div>\n\n <div class="calendar-item-container"\n *ngIf="getItemsForDay(day); let items"\n #calendarContainer\n #overflow="ux-overflow-observer"\n [tolerance]="2"\n [trigger]="resize$"\n (uxOverflowVerticalObserver)="setOverflowState(day, $event)"\n [class.calendar-item-container-overflow]="isOverflowing(day)"\n [class.calendar-overflow-visible]="focused === day">\n\n <div class="calendar-item-list" (cdkObserveContent)="!isDragging ? overflow.checkForOverflow() : null">\n <div class="calendar-item"\n [ngClass]="customClass ? customClass(item) : null"\n [ngStyle]="customStyle ? customStyle(item) : null"\n *ngFor="let item of items; trackBy: trackItemByFn"\n [tabindex]="isCurrentMonth(day) ? 0 : -1"\n attr.aria-label="Calendar Item starting at {{ item.allDay ? getStartAndEndOfDay(item.start).start : item.start.getTime() | date: \'MMMM d, y, h:mm a\' }} and ending at {{ item.allDay ? getStartAndEndOfDay(item.start).end : item.end.getTime() | date: \'MMMM d, y, h:mm a\' }}"\n uxDrag\n [draggable]="isItemDraggable(item)"\n [clone]="true"\n group="ux-calendar-month-item"\n [model]="item"\n (onDragStart)="isDragging = item"\n (onDragEnd)="isDragging = null; itemDragged.emit(item)"\n (click)="itemClick.emit(item); $event.stopPropagation()"\n (dblclick)="itemDblClick.emit(item); $event.stopPropagation()"\n (contextmenu)="itemRightClick.emit(item); $event.stopPropagation()"\n (keydown)="itemKeydown.emit({ event: $event, item: item })"\n (focus)="focused = day"\n (blur)="blur(calendarContainer)">\n\n <ng-container\n [ngTemplateOutlet]="itemTemplate || defaultItemTemplate"\n [ngTemplateOutletContext]="{ $implicit: item }">\n </ng-container>\n </div>\n </div>\n </div>\n\n </div>\n\n </div>\n\n</div>\n\n<ng-template #defaultItemTemplate let-item>\n <span class="calendar-item-label">{{ item.subject }}</span>\n</ng-template>\n',changeDetection:c.ChangeDetectionStrategy.OnPush}]}],e.ctorParameters=function(){return[{type:c.ChangeDetectorRef},{type:a.DomSanitizer}]},e.propDecorators={date:[{type:c.Input}],items:[{type:c.Input}],showNow:[{type:c.Input}],startDay:[{type:c.Input}],customClass:[{type:c.Input}],customStyle:[{type:c.Input}],itemDragEnabled:[{type:c.Input}],itemTemplate:[{type:c.ContentChild,args:["itemTemplate"]}],itemsChange:[{type:c.Output}],itemClick:[{type:c.Output}],itemDblClick:[{type:c.Output}],itemRightClick:[{type:c.Output}],itemKeydown:[{type:c.Output}],itemDragged:[{type:c.Output}],dayClick:[{type:c.Output}],dayRightClick:[{type:c.Output}],dayDblClick:[{type:c.Output}]},e}(),N=function(r){function e(e,t){var n=r.call(this,e)||this;return n._sanitizer=t,n.days=[d.WeekDay.Sunday,d.WeekDay.Monday,d.WeekDay.Tuesday,d.WeekDay.Wednesday,d.WeekDay.Thursday,d.WeekDay.Friday,d.WeekDay.Saturday],n.workDayStart=d.WeekDay.Monday,n.workDayEnd=d.WeekDay.Friday,n._onDestroy=new l.Subject,n.onHeaderResize$.pipe(s.tap(function(){return n.headerHeight=0}),D(),s.takeUntil(n._onDestroy)).subscribe(function(){return n.setHeaderHeight()}),n}return function i(e,t){function n(){this.constructor=e}m(e,t),e.prototype=null===t?Object.create(t):(n.prototype=t.prototype,new n)}(e,r),e.prototype.ngOnDestroy=function(){r.prototype.ngOnDestroy.call(this),this._onDestroy.next(),this._onDestroy.complete()},e.prototype.getNowPosition=function(){if(this.showNow)return w((new Date).getHours(),(new Date).getMinutes())},e.prototype.getItemsOnDay=function(t){return this.nodes.filter(function(e){return b(e,t)})},e.prototype.isDayToday=function(e){return O(e)},e.prototype.isWorkingHour=function(e,t,n){void 0===t&&(t=0),void 0===n&&(n=null);var i=r.prototype.isWorkingHour.call(this,e,t);return null!==n?i&&n>=this.workDayStart&&n<=this.workDayEnd:i},e.prototype.getWeekdays=function(){var t=this,n=[];return this.days.forEach(function(e){return n.push(t.setDay(t.date,e))}),n},e.prototype.setDay=function(e,t){return(e=new Date(e)).setDate(e.getDate()-e.getDay()+t),e},e.prototype.trackByDayFn=function(e,t){return t.getTime()},e.prototype.getColumnWidth=function(e){void 0===e&&(e=0);var t=100/this.days.length,n=e/this.days.length;return this._sanitizer.bypassSecurityTrustStyle("calc("+t+"% - "+n+"px)")},e.prototype.drag=function(e,t){var n=_(e,this.grid.nativeElement),i=n.x,r=P(n.y-this._offset.y,this.subdivisions),a=this.grid.nativeElement.offsetWidth/this.days.length,o=this.days.findIndex(function(e){return e===t.start.getDay()}),s=Math.min(Math.max(Math.floor(i/a),0),this.days.length-1);t.top=r.position/L*100,t.left=100*(s-o),t.height=C(t),t.time=r.time,t.dayOffset=this.days[s]-t.start.getDay(),this._event=e,this._changeDetectorRef.markForCheck()},e.prototype.dragend=function(e){this.isOverDrop||this.drag(this._event,e),this.isOverDrop=null,R(!1,e,this.nodes),this._offset={x:0,y:0};var t=new Date(e.start);t.setHours(e.time.hour,e.time.minute),t.setDate(e.start.getDate()+e.dayOffset||0);var n=t.getTime()-e.start.getTime();0!==n&&(e.ref.start.setTime(e.ref.start.getTime()+n),e.ref.end.setTime(e.ref.end.getTime()+n)),this.setItemPositions(),this._changeDetectorRef.markForCheck(),this.itemDragged.emit(e.ref),this.items=S(this.nodes),this.itemsChange.emit(this.items)},e.prototype.onDrop=function(e){r.prototype.onDrop.call(this,e),e.left=this._node.left,e.dayOffset=0},e.prototype.setItemPositions=function(){var e=this.getWeekdays();r.prototype.setItemPositions.call(this,e[0],e[e.length-1])},e.prototype.timeDragstart=function(e){var t=_(e,this.grid.nativeElement),n=t.x,i=t.y,r=this.getColumnFromPosition(n);this._offset=_(e),this.dragIndicator={start:h({},P(i-this._offset.y,this.subdivisions).time,{day:this.days[r]})},this._changeDetectorRef.markForCheck()},e.prototype.timeDrag=function(e){var t=_(e,this.grid.nativeElement),n=t.x,i=t.y;this._offset=_(e);var r=this.getColumnFromPosition(n),a=P(i-this._offset.y+j/this.subdivisions.length,this.subdivisions).time;j*W.length-j/this.subdivisions.length<i&&(a.hour=23,a.minute=59),3600*this.dragIndicator.start.day+60*this.dragIndicator.start.hour+this.dragIndicator.start.minute<3600*this.days[r]+60*a.hour+a.minute&&(this.dragIndicator=h({},this.dragIndicator,{end:h({day:this.days[r]},a)})),this.dragIndicator.end&&this.dragIndicator.end.day<this.dragIndicator.start.day&&(this.dragIndicator.end.day=this.dragIndicator.start.day),this._changeDetectorRef.markForCheck()},e.prototype.timeDragend=function(){if(this.dragIndicator.start&&this.dragIndicator.end){var e=new Date(this.date),t=new Date(this.date);e=this.setDay(e,this.dragIndicator.start.day),t=this.setDay(t,this.dragIndicator.end.day),e.setHours(this.dragIndicator.start.hour,this.dragIndicator.start.minute,0,0),t.setHours(this.dragIndicator.end.hour,this.dragIndicator.end.minute,0,0),this.timeDragged.emit({start:e,end:t})}this._offset={x:0,y:0},this.dragIndicator={},this._changeDetectorRef.markForCheck()},e.prototype.getColumnFromPosition=function(e){var t=this.grid.nativeElement.offsetWidth/this.days.length;return Math.max(Math.floor(e/t),0)},e.prototype.isDragIndicatorVisibleForDay=function(e){return!!(this.dragIndicator&&this.dragIndicator.start&&this.dragIndicator.end)&&(this.dragIndicator.start.day<=e.getDay()&&this.dragIndicator.end.day>=e.getDay())},e.prototype.getDragIndiciatorPositionFromTime=function(e,t){if(e)return e.day<t.getDay()?0:w(e.hour,e.minute)},e.prototype.getDragIndicatorHeightFromTimeDifference=function(e,t,n){return void 0===t&&(t=e),e||t?(e.day<n.getDay()&&(e={hour:0,minute:0}),t.day>n.getDay()&&(t={hour:23,minute:59}),w(t.hour,t.minute)-w(e.hour,e.minute)):0},e.prototype.onDropAllDayItem=function(t,e){O(t.start,e)||(this.nodes.find(function(e){return e.ref===t}).start=e,t.start=e,this.itemDragged.emit(t),this.items=S(this.nodes),this.itemsChange.emit(this.items),this._changeDetectorRef.markForCheck())},e.prototype.setHeaderHeight=function(){this.headerHeight=this.columns.reduce(function(e,t){return Math.max(t.nativeElement.offsetHeight,e)},0)},e.decorators=[{type:c.Component,args:[{selector:"ux-calendar-week",template:'\x3c!-- Calendar Header Section --\x3e\n<div class="calendar-header"\n #header\n [class.calendar-header-resizable]="allDayResizable"\n [style.height.px]="allDayHeight"\n [style.padding-right.px]="calendar.offsetWidth - calendar.scrollWidth">\n\n \x3c!-- Header Left Side --\x3e\n <div class="calendar-header-side"\n #headerSide\n aria-hidden="true">\n <ng-container [ngTemplateOutlet]="headerIndicatorTemplate || defaultHeaderIndicatorTemplate">\n </ng-container>\n </div>\n\n <div class="calendar-header-content">\n\n <div class="calendar-header-titles">\n\n <div class="calendar-header-title"\n *ngFor="let day of getWeekdays(); trackBy: trackByDayFn"\n [style.width]="getColumnWidth()"\n (click)="headerClick.emit(date)"\n [class.calendar-header-title-active]="isDayToday(day)">\n\n <span class="calendar-header-title-label">{{ headerFormatter(day) }}</span>\n </div>\n </div>\n\n <div class="calendar-header-days"\n #days\n [trigger]="headerOverflowCheck$"\n (uxOverflowVerticalObserver)="isHeaderOverflowing = $event"\n [style.margin-right.px]="isHeaderOverflowing ? days.scrollWidth - days.offsetWidth : 0">\n\n <div class="calendar-header-scroll-container" [style.min-height.px]="headerHeight">\n <div class="calendar-header-items"\n #headerColumns\n [style.width]="getColumnWidth()"\n uxDrop\n group="ux-calendar-week-all-day-item"\n (onDrop)="onDropAllDayItem($event, day); onHeaderResize$.next()"\n *ngFor="let day of getWeekdays(); trackBy: trackByDayFn">\n\n \x3c!-- Loop through all the All Day items --\x3e\n <div class="calendar-header-item"\n *ngFor="let item of getItemsOnDay(day) | allDay: true; trackBy: trackByFn"\n uxDrag\n [clone]="true"\n [model]="item.ref"\n [draggable]="isDraggable(item)"\n group="ux-calendar-week-all-day-item"\n tabindex="0"\n attr.aria-label="All day calendar item on {{ item.start | date: \'MMMM d, y\' }}"\n [ngClass]="customClass ? customClass(item.ref) : null"\n [ngStyle]="customStyle ? customStyle(item.ref) : null"\n (click)="itemClick.emit(item.ref)"\n (keydown)="itemKeydown.emit({ event: $event, item: item.ref })"\n (contextmenu)="itemRightClick.emit(item.ref)"\n (dblclick)="itemDblClick.emit(item.ref)">\n\n <div class="calendar-header-item-handle"></div>\n\n <ng-container [ngTemplateOutlet]="allDayItemTemplate || defaultAllDayItemTemplate"\n [ngTemplateOutletContext]="{ $implicit: item.ref }">\n </ng-container>\n </div>\n </div>\n </div>\n\n </div>\n\n </div>\n\n <div *ngIf="allDayResizable"\n #headerResizer\n class="calendar-header-resizer"\n uxDrag\n (onDrag)="onHeaderResize($event, headerResizer, header)">\n </div>\n\n</div>\n\n\x3c!-- The main calendar region --\x3e\n<div class="calendar-main"\n role="presentation"\n #calendar>\n\n \x3c!-- The side region containing the hours --\x3e\n <div class="calendar-main-side"\n aria-hidden="true">\n <div *ngFor="let hour of hours"\n class="calendar-hour-indicator"\n [class.calendar-hour-indicator-workday]="isWorkingHour(hour)">\n {{ hourFormatter(hour) }}\n </div>\n </div>\n\n <div class="calendar-main-hours"\n role="grid"\n #grid>\n\n <div class="calendar-day-column"\n [style.width]="getColumnWidth()"\n *ngFor="let day of getWeekdays(); trackBy: trackByDayFn">\n\n \x3c!-- Draw the row outlines --\x3e\n <div *ngFor="let hour of hours"\n class="calendar-hour-row">\n <div class="calendar-hour-row-division"\n *ngFor="let minute of subdivisions"\n uxDrag\n (onDragStart)="timeDragstart($event)"\n (onDrag)="timeDrag($event)"\n (onDragEnd)="timeDragend()"\n [class.calendar-hour-row-division-workhour]="isWorkingHour(hour, minute, day.getDay())"\n [style.height.%]="100 / subdivisions.length"\n (click)="timeClick.emit(convertTimeToDate(hour, minute))"\n (contextmenu)="timeRightClick.emit(convertTimeToDate(hour, minute))"\n (dblclick)="timeDblClick.emit(convertTimeToDate(hour, minute))">\n </div>\n </div>\n\n \x3c!-- Loop through all the regular items --\x3e\n <ux-calendar-item [hidden]="isOverDrop === item"\n [item]="item"\n group="ux-calendar-week-item"\n [isResizable]="isResizable(item)"\n [isDraggable]="isDraggable(item)"\n [template]="itemTemplate"\n [customClass]="customClass ? customClass(item.ref) : null"\n [customStyle]="customStyle ? customStyle(item.ref) : null"\n *ngFor="let item of getItemsOnDay(day) | allDay: false; trackBy: trackByFn"\n (itemClick)="itemClick.emit(item.ref)"\n (itemRightClick)="itemRightClick.emit(item.ref)"\n (itemDblClick)="itemDblClick.emit(item.ref)"\n (itemKeydown)="itemKeydown.emit($event)"\n (onDragStart)="dragstart($event, item)"\n (onDrag)="drag($event, item)"\n (onDragEnd)="dragend(item)"\n (onDrop)="onDrop(item)"\n (onDropEnter)="isOverDrop = item"\n (onDropLeave)="isOverDrop = null"\n (resizeStart)="resizestart($event, item)"\n (resize)="resize($event, item)"\n (resizeEnd)="resizeend(item)">\n </ux-calendar-item>\n\n \x3c!-- Show the current time --\x3e\n <div class="calendar-now-indicator"\n *ngIf="showNow && isDayToday(day)"\n [style.top.%]="nowIndicatorPosition$ | async">\n </div>\n\n <div class="calendar-drag-indicator"\n *ngIf="showDraggingIndicator && dragIndicator && isDragIndicatorVisibleForDay(day)"\n [style.top.%]="getDragIndiciatorPositionFromTime(dragIndicator.start, day)"\n [style.height.%]="getDragIndicatorHeightFromTimeDifference(dragIndicator.start, dragIndicator.end, day)">\n </div>\n\n </div>\n\n </div>\n\n</div>\n\n<ng-template #defaultAllDayItemTemplate\n let-item>\n <span class="calendar-label">{{ item?.subject }}</span>\n</ng-template>\n\n<ng-template #defaultHeaderIndicatorTemplate>\n <span i18n="@@uxaspects.calendar.allday">All Day</span>\n <span class="hpe-icon hpe-chevron-right"></span>\n</ng-template>',changeDetection:c.ChangeDetectionStrategy.OnPush,host:{role:"grid"}}]}],e.ctorParameters=function(){return[{type:c.ChangeDetectorRef},{type:a.DomSanitizer}]},e.propDecorators={days:[{type:c.Input}],workDayStart:[{type:c.Input}],workDayEnd:[{type:c.Input}],columns:[{type:c.ViewChildren,args:["headerColumns"]}]},e}(B),Y=function(){function e(){this.isDraggable=!0,this.isResizable=!0,this.itemClick=new c.EventEmitter,this.itemRightClick=new c.EventEmitter,this.itemDblClick=new c.EventEmitter,this.itemKeydown=new c.EventEmitter,this.onDragStart=new c.EventEmitter,this.onDrag=new c.EventEmitter,this.onDragEnd=new c.EventEmitter,this.onDrop=new c.EventEmitter,this.onDropEnter=new c.EventEmitter,this.onDropLeave=new c.EventEmitter,this.resizeStart=new c.EventEmitter,this.resize=new c.EventEmitter,this.resizeEnd=new c.EventEmitter}return e.prototype.getNewDateInstance=function(e){return new Date(e)},e.decorators=[{type:c.Component,args:[{selector:"ux-calendar-item",template:'<div class="calendar-item"\n role="gridcell"\n tabindex="0"\n attr.aria-label="Calendar Item starting at {{ getNewDateInstance(item.start) | date: \'MMMM d, y, h:mm a\' }} and ending at {{ getNewDateInstance(item.end) | date: \'MMMM d, y, h:mm a\' }}"\n [class.calendar-item-dragging]="item.dragging"\n [ngClass]="customClass"\n [ngStyle]="customStyle"\n [style.top.%]="item.top"\n [style.left.%]="item.left"\n [style.width.%]="item.width"\n [style.height.%]="item.height"\n [style.z-index]="item.dragging ? 1 : 0"\n (click)="itemClick.emit($event)"\n (contextmenu)="itemRightClick.emit($event)"\n (dblclick)="itemDblClick.emit($event)"\n (keydown)="itemKeydown.emit($event)"\n uxDrag\n [group]="group"\n [model]="item.ref"\n [draggable]="isDraggable"\n [clone]="true"\n (onDragStart)="isDraggable ? onDragStart.emit($event) : null"\n (onDrag)="isDraggable ? onDrag.emit($event) : null"\n (onDragEnd)="isDraggable ? onDragEnd.emit() : null"\n (onDrop)="onDrop.emit()"\n (onDropEnter)="onDropEnter.emit()"\n (onDropLeave)="onDropLeave.emit()">\n\n <div class="calendar-item-handle"></div>\n\n <ng-container\n [ngTemplateOutlet]="template || defaultItemTemplate"\n [ngTemplateOutletContext]="{ $implicit: item.ref }">\n </ng-container>\n\n <div class="calendar-item-resize-handle"\n aria-hidden="true"\n *ngIf="isResizable"\n uxDrag\n (onDragStart)="resizeStart.emit($event)"\n (onDrag)="resize.emit($event)"\n (onDragEnd)="resizeEnd.emit()">\n </div>\n</div>\n\n<ng-template #defaultItemTemplate let-item>\n <span class="calendar-label">{{ item?.subject }}</span>\n</ng-template>',changeDetection:c.ChangeDetectionStrategy.OnPush}]}],e.propDecorators={item:[{type:c.Input}],group:[{type:c.Input}],customClass:[{type:c.Input}],customStyle:[{type:c.Input}],template:[{type:c.Input}],isDraggable:[{type:c.Input}],isResizable:[{type:c.Input}],itemClick:[{type:c.Output}],itemRightClick:[{type:c.Output}],itemDblClick:[{type:c.Output}],itemKeydown:[{type:c.Output}],onDragStart:[{type:c.Output}],onDrag:[{type:c.Output}],onDragEnd:[{type:c.Output}],onDrop:[{type:c.Output}],onDropEnter:[{type:c.Output}],onDropLeave:[{type:c.Output}],resizeStart:[{type:c.Output}],resize:[{type:c.Output}],resizeEnd:[{type:c.Output}]},e}(),K=function(){function e(){}return e.prototype.transform=function(e,t){return e.filter(function(e){return t?e.ref.allDay:!e.ref.allDay})},e.decorators=[{type:c.Pipe,args:[{name:"allDay",pure:!0}]}],e}(),q=function(){function e(){}return e.decorators=[{type:c.NgModule,args:[{imports:[d.CommonModule,u.DragModule,u.ScrollModule,u.ResizeModule,u.ObserversModule,i.ObserversModule],exports:[B,N,A,u.DragModule],declarations:[B,K,N,Y,A]}]}],e}(),V={Sunday:0,Monday:1,Tuesday:2,Wednesday:3,Thursday:4,Friday:5,Saturday:6};V[V.Sunday]="Sunday",V[V.Monday]="Monday",V[V.Tuesday]="Tuesday",V[V.Wednesday]="Wednesday",V[V.Thursday]="Thursday",V[V.Friday]="Friday",V[V.Saturday]="Saturday";var G=function(){function e(){this._rows=5,this._columns=6,this._delay=0,this.character="+",this.animated=!0,this.playing=!1}return Object.defineProperty(e.prototype,"rows",{get:function(){return this._rows},set:function(e){this._rows=e,this.updateGrid()},enumerable:!0,configurable:!0}),Object.defineProperty(e.prototype,"columns",{get:function(){return this._columns},set:function(e){this._columns=e,this.updateGrid()},enumerable:!0,configurable:!0}),Object.defineProperty(e.prototype,"delay",{get:function(){return this._delay},set:function(e){this._delay=e,this.updateGrid()},enumerable:!0,configurable:!0}),e.prototype.ngOnInit=function(){this.updateGrid()},e.prototype.updateGrid=function(){this.grid=new Array(this.rows);for(var e=0;e<this.rows;e++)this.grid[e]=new Array(this.columns)},e.prototype.ngAfterViewInit=function(){var e=this;setTimeout(function(){return e.playing=!0},this.delay)},e.prototype.getDistance=function(e,t){return Math.max(this.rows-e,t)},e.decorators=[{type:c.Component,args:[{selector:"ux-character-grid",template:'<div role="presentation" class="character-grid" [class.animated]="animated" [class.playing]="playing" aria-hidden="true">\n <div class="character-grid-row" *ngFor="let row of grid; let y = index">\n <span class="character-grid-col character-distance-{{ getDistance(x, y) }}" *ngFor="let col of row; let x = index">{{ character }}</span>\n </div>\n</div>'}]}],e.propDecorators={rows:[{type:c.Input}],columns:[{type:c.Input}],delay:[{type:c.Input}],character:[{type:c.Input}],animated:[{type:c.Input}]},e}(),U=function(){function e(){}return e.decorators=[{type:c.NgModule,args:[{imports:[d.CommonModule],exports:[G],declarations:[G]}]}],e}(),X=function(){function e(e){this._breakpointObserver=e,this.familyColor="#0073e7",this.familyName="Family Name <br> Dev/Test",this.familyIcon="MF",this.animated=!0,this.formTitle="Application <br> Login",this.gridCharacter="+",this.gridRows=5,this.gridColumns=6,this.gridAnimated=!0,this.gridDelay=1190,this.layoutChange=new c.EventEmitter,this.playing=!1,this.loginLayout=J,this._layout=J.Basic,this._autoDeviceLayout=!0,this._onDestroy=new l.Subject}return Object.defineProperty(e.prototype,"layout",{get:function(){return this._layout},set:function(e){this._layout in J&&(e===J.ThemeImage&&(this.gridDelay=1800),this._layout=e,this.layoutChange.emit(e))},enumerable:!0,configurable:!0}),Object.defineProperty(e.prototype,"deviceLayout",{set:function(e){if(e===Q.Auto)this._autoDeviceLayout=!0,this.deviceLayoutClass=null;else switch(this._autoDeviceLayout=!1,e){case Q.Mobile:this.deviceLayoutClass="login-sm";break;case Q.Desktop:this.deviceLayoutClass="login-lg"}},enumerable:!0,configurable:!0}),e.prototype.ngOnInit=function(){var t=this;this._breakpointObserver.observe("(max-width: 720px)").pipe(s.takeUntil(this._onDestroy)).subscribe(function(e){t._autoDeviceLayout&&(t.deviceLayoutClass=e.matches?"login-sm":null)})},e.prototype.ngOnDestroy=function(){this._onDestroy.next(),this._onDestroy.complete()},e.decorators=[{type:c.Component,args:[{selector:"ux-login",template:'<div class="login-container"\n [class.login-alternate-1]="layout === loginLayout.ThemeImage"\n [class.login-basic]="layout === loginLayout.Basic"\n [class.login-prevent-animation]="!animated"\n [ngClass]="deviceLayoutClass"\n aria-label="Login Form">\n\n <div role="presentation" class="graphic-panel {{ graphicPanelImage }}" [style.background-image]="\'url(\' + graphicPanelImage + \')\'" *ngIf="!graphicPanelTemplate"></div>\n <div role="presentation" class="graphic-panel" *ngIf="graphicPanelTemplate">\n <ng-container [ngTemplateOutlet]="graphicPanelTemplate"></ng-container>\n </div>\n\n <div class="panel-container">\n <div class="content-panel">\n\n <div *ngIf="!contentPanelTemplate">\n\n <div role="presentation" class="logo-container" [style.background-color]="familyColor" *ngIf="!logoTemplate">\n <img class="logo" [src]="icon">\n </div>\n <div role="presentation" class="logo-container" *ngIf="logoTemplate">\n <ng-container [ngTemplateOutlet]="logoTemplate"></ng-container>\n </div>\n\n <ux-character-grid *ngIf="!gridTemplate" [delay]="animated ? gridDelay : 0" [character]="gridCharacter"\n [rows]="gridRows" [columns]="gridColumns" [animated]="animated && gridAnimated">\n </ux-character-grid>\n\n <div role="presentation" class="character-grid" *ngIf="gridTemplate">\n <ng-container [ngTemplateOutlet]="gridTemplate"></ng-container>\n </div>\n\n\n <div role="presentation" class="family-icon" [style.borderColor]="familyColor" *ngIf="!familyIconTemplate" aria-label="Product Family Acronym">\n {{ familyIcon }}\n </div>\n <div role="presentation" class="family-icon" *ngIf="familyIconTemplate">\n <ng-container [ngTemplateOutlet]="familyIconTemplate"></ng-container>\n </div>\n\n <div role="heading" class="family-name-container">\n <span *ngIf="!familyNameTemplate" class="family-name" aria-label="Product Family Name" [innerHTML]="familyName"></span>\n <ng-container *ngIf="familyNameTemplate" [ngTemplateOutlet]="familyNameTemplate"></ng-container>\n </div>\n\n </div>\n\n <ng-container *ngIf="contentPanelTemplate" [ngTemplateOutlet]="contentPanelTemplate"></ng-container>\n\n </div>\n\n <div class="form-panel">\n <h1 *ngIf="!formPanelTemplate" class="form-title expanding-animation" [innerHTML]="formTitle"></h1>\n <ng-container *ngIf="formPanelTemplate" [ngTemplateOutlet]="formPanelTemplate"></ng-container>\n <ng-content></ng-content>\n </div>\n </div>\n\n <div role="presentation" class="company-logo company-logo-image" *ngIf="!companyLogoTemplate" [style.background-image]="\'url(\' + companyLogo + \')\'"></div>\n <div role="presentation" class="company-logo" *ngIf="companyLogoTemplate">\n <ng-container [ngTemplateOutlet]="companyLogoTemplate"></ng-container>\n </div>\n\n</div>'}]}],e.ctorParameters=function(){return[{type:o.BreakpointObserver}]},e.propDecorators={familyColor:[{type:c.Input}],familyName:[{type:c.Input}],familyIcon:[{type:c.Input}],icon:[{type:c.Input}],graphicPanelImage:[{type:c.Input}],companyLogo:[{type:c.Input}],animated:[{type:c.Input}],formTitle:[{type:c.Input}],gridCharacter:[{type:c.Input}],gridRows:[{type:c.Input}],gridColumns:[{type:c.Input}],gridAnimated:[{type:c.Input}],gridDelay:[{type:c.Input}],logoTemplate:[{type:c.Input}],familyIconTemplate:[{type:c.Input}],familyNameTemplate:[{type:c.Input}],gridTemplate:[{type:c.Input}],graphicPanelTemplate:[{type:c.Input}],contentPanelTemplate:[{type:c.Input}],formPanelTemplate:[{type:c.Input}],companyLogoTemplate:[{type:c.Input}],layout:[{type:c.Input}],deviceLayout:[{type:c.Input}],layoutChange:[{type:c.Output}]},e}(),J={Basic:0,ThemeImage:1};J[J.Basic]="Basic",J[J.ThemeImage]="ThemeImage";var Q={Auto:0,Mobile:1,Desktop:2};Q[Q.Auto]="Auto",Q[Q.Mobile]="Mobile",Q[Q.Desktop]="Desktop";var Z=function(){function e(){}return e.decorators=[{type:c.NgModule,args:[{imports:[r.FormsModule,d.CommonModule,U,o.LayoutModule],exports:[X],declarations:[X]}]}],e}(),ee=function(){function e(e){this._colorService=e,this.diameter=48,this.thickness=12,this.barColor="primary",this.trackColor="grey5",this.value=0,this.min=0,this.max=100,e.setColorSet(u.colorSets.microFocus)}return Object.defineProperty(e.prototype,"_barColor",{get:function(){return this._colorService.resolve(this.barColor)},enumerable:!0,configurable:!0}),Object.defineProperty(e.prototype,"_trackColor",{get:function(){return this._colorService.resolve(this.trackColor)},enumerable:!0,configurable:!0}),Object.defineProperty(e.prototype,"_viewbox",{get:function(){return"0 0 "+this.diameter+" "+this.diameter},enumerable:!0,configurable:!0}),Object.defineProperty(e.prototype,"_radius",{get:function(){return(this.diameter-this._thickness)/2},enumerable:!0,configurable:!0}),Object.defineProperty(e.prototype,"_circumference",{get:function(){return 2*Math.PI*this._radius},enumerable:!0,configurable:!0}),Object.defineProperty(e.prototype,"_progress",{get:function(){var e=Math.max(this.min,Math.min(this.max,this.value));return this._circumference-this._circumference*(e/(this.max-this.min))},enumerable:!0,configurable:!0}),Object.defineProperty(e.prototype,"_thickness",{get:function(){return this.diameter/100*this.thickness},enumerable:!0,configurable:!0}),e.decorators=[{type:c.Component,args:[{selector:"ux-circular-progress",template:'<svg\n [style.width.px]="diameter"\n [style.height.px]="diameter"\n [attr.viewBox]="_viewbox"\n shape-rendering="geometricPrecision"\n preserveAspectRatio="xMidYMid meet"\n focusable="false">\n\n <circle\n cx="50%"\n cy="50%"\n [attr.r]="_radius"\n [style.stroke]="_trackColor"\n [style.stroke-dasharray.px]="_circumference"\n [style.stroke-width.%]="thickness">\n </circle>\n\n <circle\n cx="50%"\n cy="50%"\n [attr.r]="_radius"\n [style.stroke]="_barColor"\n [style.stroke-dashoffset.px]="_progress"\n [style.stroke-dasharray.px]="_circumference"\n [style.stroke-width.%]="thickness">\n </circle>\n</svg>',changeDetection:c.ChangeDetectionStrategy.OnPush,host:{role:"progressbar","[style.width.px]":"diameter","[style.height.px]":"diameter","[attr.aria-valuemin]":"min","[attr.aria-valuemax]":"max","[attr.aria-valuenow]":"value"}}]}],e.ctorParameters=function(){return[{type:u.ColorService}]},e.propDecorators={diameter:[{type:c.Input}],thickness:[{type:c.Input}],barColor:[{type:c.Input}],trackColor:[{type:c.Input}],value:[{type:c.Input}],min:[{type:c.Input}],max:[{type:c.Input}]},e}(),te=function(){function e(){}return e.decorators=[{type:c.NgModule,args:[{imports:[d.CommonModule,u.ColorServiceModule],declarations:[ee],exports:[ee]}]}],e}(),ne=function(){function e(){this.color="brand-blue",this.circular=!1,this.removable=!1,this.removeAriaLabel="Remove Tag",this.remove=new c.EventEmitter}return e.decorators=[{type:c.Component,args:[{selector:"ux-tag",template:'<div class="tag-{{ color }}"\n [class.tag-flat]="!circular"\n [class.tag-circular]="circular"\n [class.tag-filled]="circular">\n\n <ng-content></ng-content>\n\n <button *ngIf="removable && !circular"\n uxFocusIndicator\n class="tag-remove"\n type="button"\n (click)="remove.emit()"\n [attr.aria-label]="removeAriaLabel">\n\n <i class="hpe-icon hpe-close"></i>\n </button>\n</div>',changeDetection:c.ChangeDetectionStrategy.OnPush}]}],e.propDecorators={color:[{type:c.Input}],circular:[{type:c.Input}],removable:[{type:c.Input}],removeAriaLabel:[{type:c.Input}],remove:[{type:c.Output}]},e}(),ie=function(){function e(){}return e.decorators=[{type:c.NgModule,args:[{imports:[u.AccessibilityModule,d.CommonModule],declarations:[ne],exports:[ne]}]}],e}();e.ActivityModule=v,e.LoaderComponent=y,e.SpinnerComponent=f,e.CalendarDayComponent=B,e.CalendarMonthComponent=A,e.CalendarWeekComponent=N,e.CalendarModule=q,e.Day=V,e.CharacterGridModule=U,e.CharacterGridComponent=G,e.LoginModule=Z,e.LoginComponent=X,e.LoginLayout=J,e.LoginDeviceLayout=Q,e.CicularProgressComponent=ee,e.ProgressModule=te,e.TagComponent=ne,e.TagModule=ie,e.ɵb=Y,e.ɵa=K,Object.defineProperty(e,"__esModule",{value:!0})});
//# sourceMappingURL=micro-focus-ux-aspects.umd.min.js.map