@universal-material/angular
Version:
This library was generated with [Angular CLI](https://github.com/angular/angular-cli) version 16.1.0.
976 lines (950 loc) • 189 kB
JavaScript
import * as i0 from '@angular/core';
import { Directive, Inject, Input, HostListener, NgModule, InjectionToken, EventEmitter, Component, Optional, HostBinding, Output, forwardRef, Self, ContentChild, ViewChild, Injectable, SecurityContext, ChangeDetectionStrategy, ViewEncapsulation, TemplateRef, CUSTOM_ELEMENTS_SCHEMA, LOCALE_ID, ContentChildren, Host } from '@angular/core';
import * as i1 from '@angular/common';
import { DOCUMENT, CommonModule, getLocaleDayNames, FormStyle, TranslationWidth, WeekDay, getLocaleFirstDayOfWeek, DatePipe } from '@angular/common';
import * as i1$1 from '@angular/forms';
import { NG_VALUE_ACCESSOR, RadioControlValueAccessor, CheckboxControlValueAccessor, DefaultValueAccessor, COMPOSITION_BUFFER_MODE, SelectControlValueAccessor, NgSelectOption } from '@angular/forms';
import { BehaviorSubject, Subject, Observable, fromEvent, race, EMPTY, of, timer } from 'rxjs';
import { distinctUntilChanged, first, takeUntil, filter, tap, map, withLatestFrom, delay, endWith, take, mergeMap, switchMap, debounceTime } from 'rxjs/operators';
import * as i1$2 from '@angular/platform-browser';
import { ConfirmDialogBuilder, UmSnackbar } from '@universal-material/web';
export { SnackbarDuration } from '@universal-material/web';
import { fromPromise } from 'rxjs/internal/observable/innerFrom';
class RippleDirective {
constructor(_elementRef, document) {
this._elementRef = _elementRef;
this.document = document;
this.rippleConfig = {};
this.disabled = false;
this.isTouching = false;
this._mousedown = (e) => {
if (this.disabled ||
this._elementRef.nativeElement.hasAttribute('disabled') ||
this._elementRef.nativeElement.classList.contains('disabled')) {
return;
}
if (!this.isTouching) {
this.createRipple('mouseup', null, e.clientX, e.clientY);
}
};
this._touchstart = (e) => {
if (this.disabled ||
this._elementRef.nativeElement.hasAttribute('disabled') ||
this._elementRef.nativeElement.classList.contains('disabled')) {
return;
}
this.isTouching = true;
this.createRipple('touchend', () => {
setTimeout(() => this.isTouching = false, 100);
}, e.touches[0].clientX, e.touches[0].clientY);
};
}
static _setElementSquareSizeAndCenter(element, size) {
element.style.top = '50%';
element.style.left = '50%';
element.style.width = `${size}px`;
element.style.height = `${size}px`;
element.style.marginLeft = `${-size / 2}px`;
element.style.marginTop = `${-size / 2}px`;
}
ngAfterViewInit() {
const { position } = document.defaultView.getComputedStyle(this._elementRef.nativeElement);
if (position !== 'absolute' &&
position !== 'fixed' &&
(!this.rippleConfig || !this.rippleConfig.dontChangePositioning)) {
this._elementRef.nativeElement.style.position = 'relative';
}
}
createRipple(releaseEventName, releaseCallback, pageX, pageY) {
if (this.disabled ||
this._elementRef.nativeElement.hasAttribute('disabled') ||
this._elementRef.nativeElement.classList.contains('disabled')) {
return;
}
let release;
const cancelRippleIfNecessary = () => {
this._elementRef.nativeElement.removeEventListener("touchmove", cancelRippleIfNecessary);
window.removeEventListener(releaseEventName, cancelRippleIfNecessary);
if (release) {
release();
}
};
this._elementRef.nativeElement.addEventListener("touchmove", cancelRippleIfNecessary);
window.addEventListener(releaseEventName, cancelRippleIfNecessary);
const rippleWrapper = document.createElement('DIV');
rippleWrapper.classList.add('u-ripple-wrapper');
const ripple = document.createElement('DIV');
ripple.classList.add('u-ripple');
rippleWrapper.appendChild(ripple);
this._elementRef.nativeElement.insertAdjacentElement('afterbegin', rippleWrapper);
if (this.rippleConfig.size) {
RippleDirective._setElementSquareSizeAndCenter(rippleWrapper, this.rippleConfig.size);
}
if (this.rippleConfig.borderRadius) {
rippleWrapper.style.borderRadius = this.rippleConfig.borderRadius;
}
release = () => {
if (ripple.classList.contains('dismiss')) {
return;
}
ripple.classList.add('dismiss');
ripple.addEventListener('transitionend', () => {
this._elementRef.nativeElement.removeChild(rippleWrapper);
this._elementRef.nativeElement.removeEventListener('touchend', release);
this._elementRef.nativeElement.removeEventListener('mouseleave', release);
this._elementRef.nativeElement.removeEventListener('mouseup', release);
});
if (releaseCallback) {
releaseCallback();
releaseCallback = null;
}
};
this._elementRef.nativeElement.addEventListener('touchend', release);
this._elementRef.nativeElement.addEventListener('mouseleave', release);
this._elementRef.nativeElement.addEventListener('mouseup', release);
requestAnimationFrame(() => {
const clientRect = this._elementRef.nativeElement.getBoundingClientRect();
const largestDimensionSize = Math.max(rippleWrapper.clientWidth, rippleWrapper.clientHeight);
const rippleSize = this.rippleConfig.size || largestDimensionSize * 2;
RippleDirective._setElementSquareSizeAndCenter(ripple, rippleSize);
ripple.style.transitionDuration = `${1080 * Math.pow(rippleSize, 0.3)}ms, 750ms`;
const x = (pageX - clientRect.left) + ((rippleSize - this._elementRef.nativeElement.clientWidth) / 2);
const y = (pageY - clientRect.top) + ((rippleSize - this._elementRef.nativeElement.clientHeight) / 2);
ripple.style.transformOrigin = `${x}px ${y}px`;
ripple.classList.add('show');
});
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: RippleDirective, deps: [{ token: i0.ElementRef }, { token: DOCUMENT }], target: i0.ɵɵFactoryTarget.Directive }); }
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: RippleDirective, selector: "[uRipple]", inputs: { rippleConfig: "rippleConfig", disabled: ["rippleDisabled", "disabled"] }, host: { listeners: { "mousedown": "_mousedown($event)", "touchstart": "_touchstart($event)" } }, ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: RippleDirective, decorators: [{
type: Directive,
args: [{
selector: '[uRipple]',
standalone: false,
}]
}], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: undefined, decorators: [{
type: Inject,
args: [DOCUMENT]
}] }]; }, propDecorators: { rippleConfig: [{
type: Input
}], disabled: [{
type: Input,
args: ['rippleDisabled']
}], _mousedown: [{
type: HostListener,
args: ['mousedown', ['$event']]
}], _touchstart: [{
type: HostListener,
args: ['touchstart', ['$event']]
}] } });
class RippleModule {
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: RippleModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: RippleModule, declarations: [RippleDirective], exports: [RippleDirective] }); }
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: RippleModule }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: RippleModule, decorators: [{
type: NgModule,
args: [{
declarations: [RippleDirective],
exports: [RippleDirective]
}]
}] });
/**
* @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
*/
/** Coerces a data-bound value (typically a string) to a boolean. */
function coerceBooleanProperty(value) {
return value != null && `${value}` !== 'false';
}
const FORM_FIELD_DEFAULT_APPEARANCE = new InjectionToken('FORM_FIELD_DEFAULT_APPEARANCE');
class FormFieldComponent {
set labelWidth(width) {
this._elementRef.nativeElement.style.setProperty('--u-text-field-label-width', `${width}px`);
this._elementRef.nativeElement.style.setProperty('--u-text-field-label-half-width', `${width / 2}px`);
}
get removeMarginStyle() {
return this.removeMargin ? '0' : '';
}
get appearance() {
return this._appearance;
}
set appearance(value) {
this._appearance = value;
if (!value || value === 'default') {
value = this._defaultAppearance;
}
if (value.indexOf('search') > -1) {
this._appearanceClass = 'u-search-field';
return;
}
this._appearanceClass = `u-text-field-${value}`;
}
constructor(_elementRef, defaultAppearance) {
this._elementRef = _elementRef;
this._input = null;
this._hasLabel = false;
this.selectionField = false;
this.invalid = false;
this.removeMargin = false;
this.supportingText = null;
this.errorText = null;
this.activated = new EventEmitter();
this._defaultAppearance = defaultAppearance || 'box';
this.appearance = this._defaultAppearance;
_elementRef.nativeElement.classList.add('u-form-field');
}
click() {
if (!this._input?.disabled) {
this._input?.focus();
this.activated.next();
}
}
mouseDown(e) {
if (!this._input?.disabled) {
e.preventDefault();
}
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FormFieldComponent, deps: [{ token: i0.ElementRef }, { token: FORM_FIELD_DEFAULT_APPEARANCE, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: FormFieldComponent, selector: "u-form-field", inputs: { selectionField: "selectionField", invalid: "invalid", removeMargin: "removeMargin", supportingText: "supportingText", errorText: "errorText", appearance: "appearance" }, outputs: { activated: "activated" }, host: { listeners: { "mousedown": "mouseDown($event)" }, properties: { "class.u-form-field-selection": "this.selectionField", "style.margin-bottom": "this.removeMarginStyle" } }, ngImport: i0, template: "<div class=\"u-text-field\"\n tabindex=\"-1\"\n [ngClass]=\"_appearanceClass\"\n [class.u-text-field-hidden-label]=\"!_hasLabel\"\n [class.invalid]=\"invalid\"\n [class.disabled]=\"_input?.disabled\"\n [class.focus]=\"_input?.focused\"\n [class.empty]=\"_input?.empty\"\n (click)=\"click()\">\n <div\n uRipple\n [rippleDisabled]=\"_input?.disabled || !selectionField\"\n class=\"u-text-field-state\"></div>\n <ng-content></ng-content>\n\n</div>\n\n<ng-container *ngIf=\"invalid && (errorText || errorTextContainer.children.length); else supportingTextTemplate\">\n <div class=\"u-text-field-supporting-text\">{{errorText}}</div>\n</ng-container>\n<div class=\"u-text-field-supporting-text\"\n [class.d-none]=\"!invalid || !errorTextContainer.children.length\"\n #errorTextContainer>\n <ng-content select=\"[uErrorText]\"></ng-content>\n</div>\n\n<ng-template #supportingTextTemplate>\n <div\n *ngIf=\"supportingText\"\n class=\"u-text-field-supporting-text\">{{supportingText}}</div>\n <div class=\"u-text-field-supporting-text\"\n [class.d-none]=\"!supportingTextContainer.children.length\"\n #supportingTextContainer>\n <ng-content select=\"[uSupportingText]\"></ng-content>\n </div>\n</ng-template>\n", styles: [":host{display:block}.hide-helper-text{margin-top:0;max-height:0}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: RippleDirective, selector: "[uRipple]", inputs: ["rippleConfig", "rippleDisabled"] }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FormFieldComponent, decorators: [{
type: Component,
args: [{ selector: 'u-form-field', standalone: false, template: "<div class=\"u-text-field\"\n tabindex=\"-1\"\n [ngClass]=\"_appearanceClass\"\n [class.u-text-field-hidden-label]=\"!_hasLabel\"\n [class.invalid]=\"invalid\"\n [class.disabled]=\"_input?.disabled\"\n [class.focus]=\"_input?.focused\"\n [class.empty]=\"_input?.empty\"\n (click)=\"click()\">\n <div\n uRipple\n [rippleDisabled]=\"_input?.disabled || !selectionField\"\n class=\"u-text-field-state\"></div>\n <ng-content></ng-content>\n\n</div>\n\n<ng-container *ngIf=\"invalid && (errorText || errorTextContainer.children.length); else supportingTextTemplate\">\n <div class=\"u-text-field-supporting-text\">{{errorText}}</div>\n</ng-container>\n<div class=\"u-text-field-supporting-text\"\n [class.d-none]=\"!invalid || !errorTextContainer.children.length\"\n #errorTextContainer>\n <ng-content select=\"[uErrorText]\"></ng-content>\n</div>\n\n<ng-template #supportingTextTemplate>\n <div\n *ngIf=\"supportingText\"\n class=\"u-text-field-supporting-text\">{{supportingText}}</div>\n <div class=\"u-text-field-supporting-text\"\n [class.d-none]=\"!supportingTextContainer.children.length\"\n #supportingTextContainer>\n <ng-content select=\"[uSupportingText]\"></ng-content>\n </div>\n</ng-template>\n", styles: [":host{display:block}.hide-helper-text{margin-top:0;max-height:0}\n"] }]
}], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: undefined, decorators: [{
type: Optional
}, {
type: Inject,
args: [FORM_FIELD_DEFAULT_APPEARANCE]
}] }]; }, propDecorators: { selectionField: [{
type: HostBinding,
args: ['class.u-form-field-selection']
}, {
type: Input
}], removeMarginStyle: [{
type: HostBinding,
args: ['style.margin-bottom']
}], invalid: [{
type: Input
}], removeMargin: [{
type: Input
}], supportingText: [{
type: Input
}], errorText: [{
type: Input
}], activated: [{
type: Output
}], appearance: [{
type: Input
}], mouseDown: [{
type: HostListener,
args: ['mousedown', ['$event']]
}] } });
class TextInputBase {
get disabled() {
if (this.ngControl && this.ngControl.disabled !== null) {
return this.ngControl.disabled;
}
return this._disabled;
}
set disabled(value) {
this._disabled = (value === '') || value;
// Browsers may not fire the blur event if the input is disabled too quickly.
// Reset from here to ensure that the element doesn't become stuck.
if (this.focused) {
this.focused = false;
}
}
/** Whether the element is readonly. */
get readonly() { return this._readonly; }
set readonly(value) { this._readonly = coerceBooleanProperty(value); }
get empty() {
return !this._elementRef.nativeElement.value;
}
get _disabledAttribute() {
return this.disabled ? true : null;
}
constructor(ngControl, formField, _elementRef) {
this.ngControl = ngControl;
this._elementRef = _elementRef;
this.focused = false;
this._disabled = false;
this._readonly = false;
this._blur = () => this._focusChanged(false);
this._focus = () => this._focusChanged(true);
if (formField) {
formField._input = this;
}
}
focus() {
if (document.activeElement !== this._elementRef.nativeElement) {
this._elementRef.nativeElement.focus();
}
}
/** Callback for the cases where the focused state of the input changes. */
_focusChanged(focused) {
if (focused !== this.focused && (!this.readonly || !focused)) {
this.focused = focused;
}
}
mouseDown(e) {
e.stopPropagation();
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TextInputBase, deps: [{ token: i1$1.NgControl }, { token: FormFieldComponent }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: TextInputBase, inputs: { disabled: "disabled", readonly: "readonly" }, host: { listeners: { "blur": "_blur()", "focus": "_focus()", "mousedown": "mouseDown($event)" }, properties: { "attr.disabled": "this._disabledAttribute" } }, ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TextInputBase, decorators: [{
type: Directive
}], ctorParameters: function () { return [{ type: i1$1.NgControl }, { type: FormFieldComponent }, { type: i0.ElementRef }]; }, propDecorators: { disabled: [{
type: Input
}], readonly: [{
type: Input
}], _blur: [{
type: HostListener,
args: ['blur']
}], _focus: [{
type: HostListener,
args: ['focus']
}], _disabledAttribute: [{
type: HostBinding,
args: ['attr.disabled']
}], mouseDown: [{
type: HostListener,
args: ['mousedown', ['$event']]
}] } });
class TextInputDirective extends TextInputBase {
constructor(ngControl, formField, elementRef) {
super(ngControl, formField, elementRef);
this.ngControl = ngControl;
this.setInputClass = true;
elementRef.nativeElement.addEventListener('click', (e) => e.stopPropagation());
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TextInputDirective, deps: [{ token: i1$1.NgControl, optional: true, self: true }, { token: forwardRef(() => FormFieldComponent), optional: true }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: TextInputDirective, selector: "[uTextInput]", inputs: { setInputClass: "setInputClass" }, host: { properties: { "class.u-text-input": "this.setInputClass" } }, usesInheritance: true, ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TextInputDirective, decorators: [{
type: Directive,
args: [{
selector: '[uTextInput]',
standalone: false,
}]
}], ctorParameters: function () { return [{ type: i1$1.NgControl, decorators: [{
type: Optional
}, {
type: Self
}] }, { type: FormFieldComponent, decorators: [{
type: Optional
}, {
type: Inject,
args: [forwardRef(() => FormFieldComponent)]
}] }, { type: i0.ElementRef }]; }, propDecorators: { setInputClass: [{
type: Input
}, {
type: HostBinding,
args: ['class.u-text-input']
}] } });
class TextFieldModule {
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TextFieldModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: TextFieldModule, declarations: [TextInputDirective], imports: [CommonModule], exports: [TextInputDirective] }); }
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TextFieldModule, imports: [CommonModule] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TextFieldModule, decorators: [{
type: NgModule,
args: [{
imports: [
CommonModule
],
declarations: [
TextInputDirective
],
exports: [
TextInputDirective
]
}]
}] });
class ScrollableContainerWrapper {
constructor() {
this._innerScrollTop = new BehaviorSubject(null);
this.scrollTop = null;
this.scrollTop$ = this._innerScrollTop.pipe(distinctUntilChanged());
this._emitScroll = () => {
this.scrollTop = this._getScrollTop();
this._innerScrollTop.next(this.scrollTop);
};
}
_getScrollTop() {
if (typeof this._container.scrollY === 'number') {
return this._container.scrollY;
}
if (typeof this._container.scrollTop === 'number') {
return this._container.scrollTop;
}
if (this._container.body && typeof this._container.body.scrollTop === 'number') {
return this._container.body.scrollTop;
}
return null;
}
get container() {
return this._container;
}
set container(value) {
value = value || this.defaultTarget;
if (value === this._container) {
return;
}
if (this._container) {
this._container.removeEventListener('scroll', this._emitScroll);
}
this._container = value;
if (this._container) {
this._container.addEventListener('scroll', this._emitScroll);
}
this._emitScroll();
}
}
class ScrollBehavior {
constructor() {
this.scrollContainer = null;
this._scrollableWrapper = null;
}
_setScrollWrapper() {
this._scrollableWrapper = new ScrollableContainerWrapper();
this._scrollableWrapper.defaultTarget = this.defaultTarget;
this._scrollableWrapper.container = this.scrollContainer;
this._scrollableWrapper.scrollTop$.subscribe(this._processBehavior.bind(this));
}
ngAfterContentInit() {
this._setScrollWrapper();
}
ngOnChanges(changes) {
if (changes['scrollContainer'] && this._scrollableWrapper) {
this._scrollableWrapper.container = this.scrollContainer;
}
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ScrollBehavior, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: ScrollBehavior, inputs: { scrollContainer: "scrollContainer" }, usesOnChanges: true, ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ScrollBehavior, decorators: [{
type: Directive
}], propDecorators: { scrollContainer: [{
type: Input
}] } });
class DialogBodyDirective extends ScrollBehavior {
constructor(_elementRef) {
super();
this._processBehavior = () => {
if (!this.dialog || !this._scrollableWrapper) {
return;
}
const scrollTop = this._scrollableWrapper.scrollTop;
this.dialog.scrollTopDivider = !!scrollTop;
if (scrollTop === null) {
this.dialog.scrollBottomDivider = false;
return;
}
const scrollBottom = scrollTop + this._scrollableWrapper.container.offsetHeight;
this.dialog.scrollBottomDivider = scrollBottom !== this._scrollableWrapper.container.scrollHeight;
};
this.defaultTarget = _elementRef.nativeElement;
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DialogBodyDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: DialogBodyDirective, selector: "[uDialogBody]", usesInheritance: true, ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DialogBodyDirective, decorators: [{
type: Directive,
args: [{
selector: '[uDialogBody]'
}]
}], ctorParameters: function () { return [{ type: i0.ElementRef }]; } });
class AnimationEvents {
static { this._animationEndEvents = ['webkitAnimationEnd', 'oanimationend', 'msAnimationEnd', 'animationend']; }
static attachAnimationEndEvents(element, listener) {
AnimationEvents
._animationEndEvents
.forEach(eventName => {
element.addEventListener(eventName, listener);
});
}
}
const DIALOG_DEFAULT_OPTIONS = new InjectionToken('DIALOG_DEFAULT_OPTIONS');
const DefaultDialogConfig = {
closeOnBackdropClick: true,
closeOnEsc: true
};
class DialogBaseComponent {
set _contentChildBody(dialogBody) {
this.setDialogBody(dialogBody);
}
set _viewChildBody(dialogBody) {
this.setDialogBody(dialogBody);
}
constructor(_elementRef, defaultOptions) {
this._elementRef = _elementRef;
this._contentInitialized = false;
this._hiding = false;
this.show = false;
this.showChange = new EventEmitter();
this.afterClose = new EventEmitter();
this.closedFromBackdrop = new EventEmitter();
this.dialogBody = null;
this._tabIndex = -1;
this.scrollTopDivider = false;
this.scrollBottomDivider = false;
this.onAnimationEnd = (event) => {
this._elementRef.nativeElement.removeEventListener(event.type, this.onAnimationEnd);
this._hiding = false;
this.afterClose.emit();
};
this._dialogConfig = { ...DefaultDialogConfig, ...defaultOptions };
_elementRef.nativeElement.classList.add('u-dialog');
}
addAnimationEndEvents() {
AnimationEvents.attachAnimationEndEvents(this._elementRef.nativeElement, this.onAnimationEnd.bind(this));
}
setDialogBody(dialogBody) {
this.dialogBody = dialogBody;
if (!this.dialogBody) {
return;
}
this.dialogBody.dialog = this;
this.dialogBody._processBehavior();
}
backdropClick() {
if (this._dialogConfig.closeOnBackdropClick) {
this.close();
this.closedFromBackdrop.emit();
}
}
close() {
if (!this.show) {
return;
}
this.show = false;
this.showChange.emit(false);
this._hiding = true;
this.addAnimationEndEvents();
}
ngAfterContentInit() {
setTimeout(() => this._contentInitialized = true, 100);
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DialogBaseComponent, deps: [{ token: i0.ElementRef }, { token: DIALOG_DEFAULT_OPTIONS, optional: true }], target: i0.ɵɵFactoryTarget.Directive }); }
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: DialogBaseComponent, inputs: { show: "show" }, outputs: { showChange: "showChange", afterClose: "afterClose", closedFromBackdrop: "closedFromBackdrop" }, host: { properties: { "class.hide": "this._hiding", "class.show": "this.show", "tabindex": "this._tabIndex", "class.u-dialog-scroll-top-divider": "this.scrollTopDivider", "class.u-dialog-scroll-bottom-divider": "this.scrollBottomDivider" } }, queries: [{ propertyName: "_contentChildBody", first: true, predicate: DialogBodyDirective, descendants: true }], viewQueries: [{ propertyName: "_viewChildBody", first: true, predicate: DialogBodyDirective, descendants: true }], ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DialogBaseComponent, decorators: [{
type: Directive
}], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: undefined, decorators: [{
type: Optional
}, {
type: Inject,
args: [DIALOG_DEFAULT_OPTIONS]
}] }]; }, propDecorators: { _hiding: [{
type: HostBinding,
args: ['class.hide']
}], show: [{
type: HostBinding,
args: ['class.show']
}, {
type: Input
}], showChange: [{
type: Output
}], afterClose: [{
type: Output
}], closedFromBackdrop: [{
type: Output
}], _contentChildBody: [{
type: ContentChild,
args: [DialogBodyDirective]
}], _viewChildBody: [{
type: ViewChild,
args: [DialogBodyDirective]
}], _tabIndex: [{
type: HostBinding,
args: ['tabindex']
}], scrollTopDivider: [{
type: HostBinding,
args: ['class.u-dialog-scroll-top-divider']
}], scrollBottomDivider: [{
type: HostBinding,
args: ['class.u-dialog-scroll-bottom-divider']
}] } });
class DialogComponent extends DialogBaseComponent {
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DialogComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: DialogComponent, selector: "u-legacy-dialog", usesInheritance: true, ngImport: i0, template: "<div class=\"u-dialog-backdrop\" (click)=\"backdropClick()\"></div>\n<ng-content></ng-content>\n", styles: [""] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DialogComponent, decorators: [{
type: Component,
args: [{ selector: 'u-legacy-dialog', template: "<div class=\"u-dialog-backdrop\" (click)=\"backdropClick()\"></div>\n<ng-content></ng-content>\n" }]
}] });
class ProgressDialogComponent extends DialogComponent {
constructor(_elementRef) {
super(_elementRef, {
closeOnBackdropClick: false,
closeOnEsc: false
});
this.message = null;
_elementRef.nativeElement.classList.add('u-dialog-progress');
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ProgressDialogComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ProgressDialogComponent, selector: "ng-component", usesInheritance: true, ngImport: i0, template: "<div class=\"u-dialog-backdrop\"></div>\n<div class=\"u-dialog-content\">\n <div class=\"u-dialog-body\">\n <div class=\"preloader-wrapper\">\n <div class=\"spinner-layer\">\n <div class=\"circle-clipper left\">\n <div class=\"circle\"></div>\n </div>\n <div class=\"gap-patch\">\n <div class=\"circle\"></div>\n </div>\n <div class=\"circle-clipper right\">\n <div class=\"circle\"></div>\n </div>\n </div>\n </div>\n <div class=\"u-dialog-progress-message u-headline6 u-text-low-contrast u-text-nowrap\">{{message}}</div>\n </div>\n</div>\n" }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ProgressDialogComponent, decorators: [{
type: Component,
args: [{ template: "<div class=\"u-dialog-backdrop\"></div>\n<div class=\"u-dialog-content\">\n <div class=\"u-dialog-body\">\n <div class=\"preloader-wrapper\">\n <div class=\"spinner-layer\">\n <div class=\"circle-clipper left\">\n <div class=\"circle\"></div>\n </div>\n <div class=\"gap-patch\">\n <div class=\"circle\"></div>\n </div>\n <div class=\"circle-clipper right\">\n <div class=\"circle\"></div>\n </div>\n </div>\n </div>\n <div class=\"u-dialog-progress-message u-headline6 u-text-low-contrast u-text-nowrap\">{{message}}</div>\n </div>\n</div>\n" }]
}], ctorParameters: function () { return [{ type: i0.ElementRef }]; } });
class DialogInjector {
constructor(_parentInjector, _customTokens) {
this._parentInjector = _parentInjector;
this._customTokens = _customTokens;
}
get(token, notFoundValue) {
const value = this._customTokens.get(token);
if (typeof value !== 'undefined') {
return value;
}
return this._parentInjector.get(token, notFoundValue);
}
}
var Key;
(function (Key) {
Key[Key["Tab"] = 9] = "Tab";
Key[Key["Enter"] = 13] = "Enter";
Key[Key["Escape"] = 27] = "Escape";
Key[Key["Space"] = 32] = "Space";
Key[Key["PageUp"] = 33] = "PageUp";
Key[Key["PageDown"] = 34] = "PageDown";
Key[Key["End"] = 35] = "End";
Key[Key["Home"] = 36] = "Home";
Key[Key["ArrowLeft"] = 37] = "ArrowLeft";
Key[Key["ArrowUp"] = 38] = "ArrowUp";
Key[Key["ArrowRight"] = 39] = "ArrowRight";
Key[Key["ArrowDown"] = 40] = "ArrowDown";
})(Key || (Key = {}));
class DialogStackService {
static { this._dialogStack = []; }
constructor(_document) {
this._document = _document;
this._document.body.addEventListener('keydown', (e) => {
if (e.keyCode === Key.Escape) {
this.closeTopMostDialog();
}
});
}
removeDialog(dialog) {
const index = DialogStackService._dialogStack.indexOf(dialog);
if (index < 0) {
return;
}
DialogStackService._dialogStack.splice(index, 1);
}
addDialog(dialog) {
const index = DialogStackService._dialogStack.indexOf(dialog);
if (index < 0) {
return;
}
DialogStackService._dialogStack.unshift(dialog);
}
add(dialog) {
if (dialog.show) {
this.addDialog(dialog);
}
else {
dialog.showChange
.pipe(first())
.subscribe(show => {
if (show) {
this.addDialog(dialog);
}
});
}
dialog.afterClose
.pipe(first())
.subscribe(() => this.removeDialog(dialog));
DialogStackService._dialogStack.unshift(dialog);
}
closeTopMostDialog() {
for (const dialog of DialogStackService._dialogStack) {
if (dialog._dialogConfig && dialog._dialogConfig.closeOnEsc) {
dialog.close();
break;
}
}
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DialogStackService, deps: [{ token: DOCUMENT }], target: i0.ɵɵFactoryTarget.Injectable }); }
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DialogStackService, providedIn: 'root' }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DialogStackService, decorators: [{
type: Injectable,
args: [{ providedIn: 'root' }]
}], ctorParameters: function () { return [{ type: undefined, decorators: [{
type: Inject,
args: [DOCUMENT]
}] }]; } });
const DIALOG_DATA = new InjectionToken('DIALOG_DATA');
class DialogService {
constructor(_componentFactoryResolver, _appRef, _injector, _dialogStackService) {
this._componentFactoryResolver = _componentFactoryResolver;
this._appRef = _appRef;
this._injector = _injector;
this._dialogStackService = _dialogStackService;
}
_internalOpen(dialogType, customInjectionTokens) {
const dialogComponent = this._componentFactoryResolver.resolveComponentFactory(dialogType);
const dialogComponentRef = dialogComponent.create(new DialogInjector(this._injector, customInjectionTokens));
dialogComponentRef.instance.afterClose.subscribe(() => {
this._appRef.detachView(dialogComponentRef.hostView);
dialogComponentRef.destroy();
});
this._appRef.attachView(dialogComponentRef.hostView);
this._dialogStackService.add(dialogComponentRef.instance);
document
.querySelector('body')
.appendChild(dialogComponentRef.location.nativeElement);
return dialogComponentRef.instance;
}
open(dialogType, data) {
return this._internalOpen(dialogType, new WeakMap(data && [[DIALOG_DATA, data]]));
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DialogService, deps: [{ token: i0.ComponentFactoryResolver }, { token: i0.ApplicationRef }, { token: i0.Injector }, { token: DialogStackService }], target: i0.ɵɵFactoryTarget.Injectable }); }
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DialogService, providedIn: 'root' }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DialogService, decorators: [{
type: Injectable,
args: [{
providedIn: 'root'
}]
}], ctorParameters: function () { return [{ type: i0.ComponentFactoryResolver }, { type: i0.ApplicationRef }, { type: i0.Injector }, { type: DialogStackService }]; } });
const CONFIRM_DIALOG_DEFAULT_OPTIONS = new InjectionToken('CONFIRM_DIALOG_DEFAULT_OPTIONS');
const DefaultConfirmDialogConfig = {
...DefaultDialogConfig,
confirmButton: {
text: 'OK',
variant: 'text'
},
cancelButton: {
text: 'Cancel',
variant: 'text'
},
};
class ConfirmDialogConfig {
}
class ConfirmDialogComponent extends DialogComponent {
set message(value) {
this.safeMessage = this.sanitizer.sanitize(SecurityContext.HTML, value);
}
constructor(elementRef, sanitizer, confirmDialogConfig, defaultOptions) {
super(elementRef);
this.sanitizer = sanitizer;
this.safeMessage = null;
this._closed = false;
this.onCancel = new Subject();
this.onConfirm = new Subject();
this.confirmed = false;
this._confirmDialogConfig = DefaultConfirmDialogConfig;
this._confirmDialogConfig = this._assignConfig(this._confirmDialogConfig, defaultOptions);
this._confirmDialogConfig = this._assignConfig(this._confirmDialogConfig, confirmDialogConfig);
this._dialogConfig = this._confirmDialogConfig;
}
_assignConfig(baseConfig, partialConfig) {
if (partialConfig) {
baseConfig.confirmButton = { ...baseConfig.confirmButton, ...partialConfig.confirmButton };
baseConfig.cancelButton = { ...baseConfig.cancelButton, ...partialConfig.cancelButton };
delete partialConfig.confirmButton;
delete partialConfig.cancelButton;
}
return { ...baseConfig, ...partialConfig };
}
close() {
super.close();
this._closed = true;
}
_cancelClick() {
if (this._closed) {
return;
}
this.close();
this.onCancel.next();
}
_confirmClick() {
if (this._closed) {
return;
}
this.close();
this.confirmed = true;
this.onConfirm.next();
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ConfirmDialogComponent, deps: [{ token: i0.ElementRef }, { token: i1$2.DomSanitizer }, { token: ConfirmDialogConfig, optional: true }, { token: CONFIRM_DIALOG_DEFAULT_OPTIONS, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ConfirmDialogComponent, selector: "ng-component", viewQueries: [{ propertyName: "dialogBody", first: true, predicate: DialogBodyDirective, descendants: true }], usesInheritance: true, ngImport: i0, template: '', isInline: true }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ConfirmDialogComponent, decorators: [{
type: Component,
args: [{
template: '',
}]
}], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i1$2.DomSanitizer }, { type: ConfirmDialogConfig, decorators: [{
type: Optional
}] }, { type: ConfirmDialogConfig, decorators: [{
type: Optional
}, {
type: Inject,
args: [CONFIRM_DIALOG_DEFAULT_OPTIONS]
}] }]; }, propDecorators: { dialogBody: [{
type: ViewChild,
args: [DialogBodyDirective]
}] } });
class ProgressDialogService {
constructor(_dialogService) {
this._dialogService = _dialogService;
}
open(message = null) {
const progressDialog = this._dialogService.open(ProgressDialogComponent);
progressDialog.message = message;
progressDialog.show = true;
return progressDialog;
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ProgressDialogService, deps: [{ token: DialogService }], target: i0.ɵɵFactoryTarget.Injectable }); }
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ProgressDialogService, providedIn: 'root' }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ProgressDialogService, decorators: [{
type: Injectable,
args: [{ providedIn: 'root' }]
}], ctorParameters: function () { return [{ type: DialogService }]; } });
class DialogModule {
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DialogModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: DialogModule, declarations: [DialogComponent,
DialogBodyDirective,
ProgressDialogComponent], imports: [CommonModule], exports: [DialogComponent,
DialogBodyDirective] }); }
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DialogModule, imports: [CommonModule] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DialogModule, decorators: [{
type: NgModule,
args: [{
imports: [
CommonModule
],
declarations: [
DialogComponent,
DialogBodyDirective,
ProgressDialogComponent
],
exports: [
DialogComponent,
DialogBodyDirective
]
}]
}] });
function toInteger(value) {
return parseInt(`${value}`, 10);
}
function toString(value) {
return (value !== undefined && value !== null) ? `${value}` : '';
}
function getValueInRange(value, max, min = 0) {
return Math.max(Math.min(value, max), min);
}
function isString(value) {
return typeof value === 'string';
}
function isNumber(value) {
return !isNaN(toInteger(value));
}
function isInteger(value) {
return typeof value === 'number' && isFinite(value) && Math.floor(value) === value;
}
function isDefined(value) {
return value !== undefined && value !== null;
}
function padNumber(value) {
if (isNumber(value)) {
return `0${value}`.slice(-2);
}
else {
return '';
}
}
function regExpEscape(text) {
return text.replace(/[-[\]{}()*+?.,\\^$|#\s]/g, '\\$&');
}
function closest(element, selector) {
if (!selector) {
return null;
}
/*
* In certain browsers (e.g. Edge 44.18362.449.0) HTMLDocument does
* not support `Element.prototype.closest`. To emulate the correct behaviour
* we return null when the method is missing.
*
* Note that in evergreen browsers `closest(document.documentElement, 'html')`
* will return the document element whilst in Edge null will be returned. This
* compromise was deemed good enough.
*/
if (typeof element.closest === 'undefined') {
return null;
}
return element.closest(selector);
}
function runInZone(zone) {
return (source) => {
return new Observable(observer => {
const onNext = (value) => zone.run(() => observer.next(value));
const onError = (e) => zone.run(() => observer.error(e));
const onComplete = () => zone.run(() => observer.complete());
return source.subscribe(onNext, onError, onComplete);
});
};
}
/**
* A component that can be used inside a custom result template in order to highlight the term inside the text of the
* result
*/
class Highlight {
constructor() {
/**
* The CSS class of the span elements wrapping the term inside the result
*/
this.highlightClass = 'u-highlight';
}
ngOnChanges(changes) {
const resultStr = toString(this.result);
const resultLC = resultStr.toLowerCase();
const termLC = toString(this.term).toLowerCase();
let currentIdx = 0;
if (termLC.length > 0) {
this.parts = resultLC.split(new RegExp(`(${regExpEscape(termLC)})`)).map((part) => {
const originalPart = resultStr.substr(currentIdx, part.length);
currentIdx += part.length;
return originalPart;
});
}
else {
this.parts = [resultStr];
}
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: Highlight, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: Highlight, selector: "u-legacy-highlight", inputs: { highlightClass: "highlightClass", result: "result", term: "term" }, usesOnChanges: true, ngImport: i0, template: "<ng-template ngFor [ngForOf]=\"parts\" let-part let-isOdd=\"odd\"><span *ngIf=\"isOdd; else even\" [class]=\"highlightClass\">{{part}}</span><ng-template #even>{{part}}</ng-template></ng-template>", isInline: true, styles: [".u-highlight{font-weight:700}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: Highlight, decorators: [{
type: Component,
args: [{ selector: 'u-legacy-highlight', changeDetection: ChangeDetectionStrategy.OnPush, template: `<ng-template ngFor [ngForOf]="parts" let-part let-isOdd="odd">` +
`<span *ngIf="isOdd; else even" [class]="highlightClass">{{part}}</span><ng-template #even>{{part}}</ng-template>` +
`</ng-template>`, standalone: false, styles: [".u-highlight{font-weight:700}\n"] }]
}], propDecorators: { highlightClass: [{
type: Input
}], result: [{
type: Input
}], term: [{
type: Input
}] } });
class TypeaheadWindow {
constructor() {
this.activeIdx = 0;
/**
* The id for the typeahead window. The id should be unique and the same
* as the associated typeahead's id.
*/
this.id = null;
/*