Many resources are needed to download a project. Please understand that we have to compensate our server costs. Thank you in advance.
Project price only 1 $
You can buy this project and download/modify it how often you want.
static.layout-layout-module.js Maven / Gradle / Ivy
(window["webpackJsonp"] = window["webpackJsonp"] || []).push([["layout-layout-module"],{
/***/ "./node_modules/@angular/cdk/esm5/a11y.es5.js":
/*!****************************************************!*\
!*** ./node_modules/@angular/cdk/esm5/a11y.es5.js ***!
\****************************************************/
/*! exports provided: ARIA_DESCRIBER_PROVIDER_FACTORY, MESSAGES_CONTAINER_ID, CDK_DESCRIBEDBY_ID_PREFIX, CDK_DESCRIBEDBY_HOST_ATTRIBUTE, AriaDescriber, ARIA_DESCRIBER_PROVIDER, ActiveDescendantKeyManager, FocusKeyManager, ListKeyManager, FocusTrap, FocusTrapFactory, CdkTrapFocus, InteractivityChecker, LIVE_ANNOUNCER_PROVIDER_FACTORY, LiveAnnouncer, CdkAriaLive, LIVE_ANNOUNCER_PROVIDER, LIVE_ANNOUNCER_ELEMENT_TOKEN_FACTORY, LIVE_ANNOUNCER_ELEMENT_TOKEN, FOCUS_MONITOR_PROVIDER_FACTORY, TOUCH_BUFFER_MS, FocusMonitor, CdkMonitorFocus, FOCUS_MONITOR_PROVIDER, isFakeMousedownFromScreenReader, A11yModule */
/***/ (function(module, __webpack_exports__, __webpack_require__) {
"use strict";
__webpack_require__.r(__webpack_exports__);
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "ARIA_DESCRIBER_PROVIDER_FACTORY", function() { return ARIA_DESCRIBER_PROVIDER_FACTORY; });
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "MESSAGES_CONTAINER_ID", function() { return MESSAGES_CONTAINER_ID; });
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "CDK_DESCRIBEDBY_ID_PREFIX", function() { return CDK_DESCRIBEDBY_ID_PREFIX; });
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "CDK_DESCRIBEDBY_HOST_ATTRIBUTE", function() { return CDK_DESCRIBEDBY_HOST_ATTRIBUTE; });
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "AriaDescriber", function() { return AriaDescriber; });
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "ARIA_DESCRIBER_PROVIDER", function() { return ARIA_DESCRIBER_PROVIDER; });
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "ActiveDescendantKeyManager", function() { return ActiveDescendantKeyManager; });
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "FocusKeyManager", function() { return FocusKeyManager; });
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "ListKeyManager", function() { return ListKeyManager; });
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "FocusTrap", function() { return FocusTrap; });
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "FocusTrapFactory", function() { return FocusTrapFactory; });
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "CdkTrapFocus", function() { return CdkTrapFocus; });
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "InteractivityChecker", function() { return InteractivityChecker; });
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "LIVE_ANNOUNCER_PROVIDER_FACTORY", function() { return LIVE_ANNOUNCER_PROVIDER_FACTORY; });
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "LiveAnnouncer", function() { return LiveAnnouncer; });
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "CdkAriaLive", function() { return CdkAriaLive; });
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "LIVE_ANNOUNCER_PROVIDER", function() { return LIVE_ANNOUNCER_PROVIDER; });
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "LIVE_ANNOUNCER_ELEMENT_TOKEN_FACTORY", function() { return LIVE_ANNOUNCER_ELEMENT_TOKEN_FACTORY; });
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "LIVE_ANNOUNCER_ELEMENT_TOKEN", function() { return LIVE_ANNOUNCER_ELEMENT_TOKEN; });
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "FOCUS_MONITOR_PROVIDER_FACTORY", function() { return FOCUS_MONITOR_PROVIDER_FACTORY; });
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "TOUCH_BUFFER_MS", function() { return TOUCH_BUFFER_MS; });
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "FocusMonitor", function() { return FocusMonitor; });
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "CdkMonitorFocus", function() { return CdkMonitorFocus; });
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "FOCUS_MONITOR_PROVIDER", function() { return FOCUS_MONITOR_PROVIDER; });
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "isFakeMousedownFromScreenReader", function() { return isFakeMousedownFromScreenReader; });
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "A11yModule", function() { return A11yModule; });
/* harmony import */ var _angular_common__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @angular/common */ "./node_modules/@angular/common/fesm5/common.js");
/* harmony import */ var _angular_core__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! @angular/core */ "./node_modules/@angular/core/fesm5/core.js");
/* harmony import */ var rxjs__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! rxjs */ "./node_modules/rxjs/_esm5/index.js");
/* harmony import */ var _angular_cdk_keycodes__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! @angular/cdk/keycodes */ "./node_modules/@angular/cdk/esm5/keycodes.es5.js");
/* harmony import */ var rxjs_operators__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! rxjs/operators */ "./node_modules/rxjs/_esm5/operators/index.js");
/* harmony import */ var tslib__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! tslib */ "./node_modules/tslib/tslib.es6.js");
/* harmony import */ var _angular_cdk_platform__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! @angular/cdk/platform */ "./node_modules/@angular/cdk/esm5/platform.es5.js");
/* harmony import */ var _angular_cdk_coercion__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! @angular/cdk/coercion */ "./node_modules/@angular/cdk/esm5/coercion.es5.js");
/* harmony import */ var _angular_cdk_observers__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! @angular/cdk/observers */ "./node_modules/@angular/cdk/esm5/observers.es5.js");
/**
* @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
*/
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/**
* IDs are deliminated by an empty space, as per the spec.
* @type {?}
*/
var ID_DELIMINATOR = ' ';
/**
* Adds the given ID to the specified ARIA attribute on an element.
* Used for attributes such as aria-labelledby, aria-owns, etc.
* @param {?} el
* @param {?} attr
* @param {?} id
* @return {?}
*/
function addAriaReferencedId(el, attr, id) {
/** @type {?} */
var ids = getAriaReferenceIds(el, attr);
if (ids.some(function (existingId) { return existingId.trim() == id.trim(); })) {
return;
}
ids.push(id.trim());
el.setAttribute(attr, ids.join(ID_DELIMINATOR));
}
/**
* Removes the given ID from the specified ARIA attribute on an element.
* Used for attributes such as aria-labelledby, aria-owns, etc.
* @param {?} el
* @param {?} attr
* @param {?} id
* @return {?}
*/
function removeAriaReferencedId(el, attr, id) {
/** @type {?} */
var ids = getAriaReferenceIds(el, attr);
/** @type {?} */
var filteredIds = ids.filter(function (val) { return val != id.trim(); });
el.setAttribute(attr, filteredIds.join(ID_DELIMINATOR));
}
/**
* Gets the list of IDs referenced by the given ARIA attribute on an element.
* Used for attributes such as aria-labelledby, aria-owns, etc.
* @param {?} el
* @param {?} attr
* @return {?}
*/
function getAriaReferenceIds(el, attr) {
// Get string array of all individual ids (whitespace deliminated) in the attribute value
return (el.getAttribute(attr) || '').match(/\S+/g) || [];
}
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/**
* ID used for the body container where all messages are appended.
* @type {?}
*/
var MESSAGES_CONTAINER_ID = 'cdk-describedby-message-container';
/**
* ID prefix used for each created message element.
* @type {?}
*/
var CDK_DESCRIBEDBY_ID_PREFIX = 'cdk-describedby-message';
/**
* Attribute given to each host element that is described by a message element.
* @type {?}
*/
var CDK_DESCRIBEDBY_HOST_ATTRIBUTE = 'cdk-describedby-host';
/**
* Global incremental identifier for each registered message element.
* @type {?}
*/
var nextId = 0;
/**
* Global map of all registered message elements that have been placed into the document.
* @type {?}
*/
var messageRegistry = new Map();
/**
* Container for all registered messages.
* @type {?}
*/
var messagesContainer = null;
/**
* Utility that creates visually hidden elements with a message content. Useful for elements that
* want to use aria-describedby to further describe themselves without adding additional visual
* content.
* \@docs-private
*/
var AriaDescriber = /** @class */ (function () {
function AriaDescriber(_document) {
this._document = _document;
}
/**
* Adds to the host element an aria-describedby reference to a hidden element that contains
* the message. If the same message has already been registered, then it will reuse the created
* message element.
*/
/**
* Adds to the host element an aria-describedby reference to a hidden element that contains
* the message. If the same message has already been registered, then it will reuse the created
* message element.
* @param {?} hostElement
* @param {?} message
* @return {?}
*/
AriaDescriber.prototype.describe = /**
* Adds to the host element an aria-describedby reference to a hidden element that contains
* the message. If the same message has already been registered, then it will reuse the created
* message element.
* @param {?} hostElement
* @param {?} message
* @return {?}
*/
function (hostElement, message) {
if (!this._canBeDescribed(hostElement, message)) {
return;
}
if (!messageRegistry.has(message)) {
this._createMessageElement(message);
}
if (!this._isElementDescribedByMessage(hostElement, message)) {
this._addMessageReference(hostElement, message);
}
};
/** Removes the host element's aria-describedby reference to the message element. */
/**
* Removes the host element's aria-describedby reference to the message element.
* @param {?} hostElement
* @param {?} message
* @return {?}
*/
AriaDescriber.prototype.removeDescription = /**
* Removes the host element's aria-describedby reference to the message element.
* @param {?} hostElement
* @param {?} message
* @return {?}
*/
function (hostElement, message) {
if (!this._canBeDescribed(hostElement, message)) {
return;
}
if (this._isElementDescribedByMessage(hostElement, message)) {
this._removeMessageReference(hostElement, message);
}
/** @type {?} */
var registeredMessage = messageRegistry.get(message);
if (registeredMessage && registeredMessage.referenceCount === 0) {
this._deleteMessageElement(message);
}
if (messagesContainer && messagesContainer.childNodes.length === 0) {
this._deleteMessagesContainer();
}
};
/** Unregisters all created message elements and removes the message container. */
/**
* Unregisters all created message elements and removes the message container.
* @return {?}
*/
AriaDescriber.prototype.ngOnDestroy = /**
* Unregisters all created message elements and removes the message container.
* @return {?}
*/
function () {
/** @type {?} */
var describedElements = this._document.querySelectorAll("[" + CDK_DESCRIBEDBY_HOST_ATTRIBUTE + "]");
for (var i = 0; i < describedElements.length; i++) {
this._removeCdkDescribedByReferenceIds(describedElements[i]);
describedElements[i].removeAttribute(CDK_DESCRIBEDBY_HOST_ATTRIBUTE);
}
if (messagesContainer) {
this._deleteMessagesContainer();
}
messageRegistry.clear();
};
/**
* Creates a new element in the visually hidden message container element with the message
* as its content and adds it to the message registry.
*/
/**
* Creates a new element in the visually hidden message container element with the message
* as its content and adds it to the message registry.
* @private
* @param {?} message
* @return {?}
*/
AriaDescriber.prototype._createMessageElement = /**
* Creates a new element in the visually hidden message container element with the message
* as its content and adds it to the message registry.
* @private
* @param {?} message
* @return {?}
*/
function (message) {
/** @type {?} */
var messageElement = this._document.createElement('div');
messageElement.setAttribute('id', CDK_DESCRIBEDBY_ID_PREFIX + "-" + nextId++);
messageElement.appendChild((/** @type {?} */ (this._document.createTextNode(message))));
this._createMessagesContainer();
(/** @type {?} */ (messagesContainer)).appendChild(messageElement);
messageRegistry.set(message, { messageElement: messageElement, referenceCount: 0 });
};
/** Deletes the message element from the global messages container. */
/**
* Deletes the message element from the global messages container.
* @private
* @param {?} message
* @return {?}
*/
AriaDescriber.prototype._deleteMessageElement = /**
* Deletes the message element from the global messages container.
* @private
* @param {?} message
* @return {?}
*/
function (message) {
/** @type {?} */
var registeredMessage = messageRegistry.get(message);
/** @type {?} */
var messageElement = registeredMessage && registeredMessage.messageElement;
if (messagesContainer && messageElement) {
messagesContainer.removeChild(messageElement);
}
messageRegistry.delete(message);
};
/** Creates the global container for all aria-describedby messages. */
/**
* Creates the global container for all aria-describedby messages.
* @private
* @return {?}
*/
AriaDescriber.prototype._createMessagesContainer = /**
* Creates the global container for all aria-describedby messages.
* @private
* @return {?}
*/
function () {
if (!messagesContainer) {
/** @type {?} */
var preExistingContainer = this._document.getElementById(MESSAGES_CONTAINER_ID);
// When going from the server to the client, we may end up in a situation where there's
// already a container on the page, but we don't have a reference to it. Clear the
// old container so we don't get duplicates. Doing this, instead of emptying the previous
// container, should be slightly faster.
if (preExistingContainer) {
(/** @type {?} */ (preExistingContainer.parentNode)).removeChild(preExistingContainer);
}
messagesContainer = this._document.createElement('div');
messagesContainer.id = MESSAGES_CONTAINER_ID;
messagesContainer.setAttribute('aria-hidden', 'true');
messagesContainer.style.display = 'none';
this._document.body.appendChild(messagesContainer);
}
};
/** Deletes the global messages container. */
/**
* Deletes the global messages container.
* @private
* @return {?}
*/
AriaDescriber.prototype._deleteMessagesContainer = /**
* Deletes the global messages container.
* @private
* @return {?}
*/
function () {
if (messagesContainer && messagesContainer.parentNode) {
messagesContainer.parentNode.removeChild(messagesContainer);
messagesContainer = null;
}
};
/** Removes all cdk-describedby messages that are hosted through the element. */
/**
* Removes all cdk-describedby messages that are hosted through the element.
* @private
* @param {?} element
* @return {?}
*/
AriaDescriber.prototype._removeCdkDescribedByReferenceIds = /**
* Removes all cdk-describedby messages that are hosted through the element.
* @private
* @param {?} element
* @return {?}
*/
function (element) {
// Remove all aria-describedby reference IDs that are prefixed by CDK_DESCRIBEDBY_ID_PREFIX
/** @type {?} */
var originalReferenceIds = getAriaReferenceIds(element, 'aria-describedby')
.filter(function (id) { return id.indexOf(CDK_DESCRIBEDBY_ID_PREFIX) != 0; });
element.setAttribute('aria-describedby', originalReferenceIds.join(' '));
};
/**
* Adds a message reference to the element using aria-describedby and increments the registered
* message's reference count.
*/
/**
* Adds a message reference to the element using aria-describedby and increments the registered
* message's reference count.
* @private
* @param {?} element
* @param {?} message
* @return {?}
*/
AriaDescriber.prototype._addMessageReference = /**
* Adds a message reference to the element using aria-describedby and increments the registered
* message's reference count.
* @private
* @param {?} element
* @param {?} message
* @return {?}
*/
function (element, message) {
/** @type {?} */
var registeredMessage = (/** @type {?} */ (messageRegistry.get(message)));
// Add the aria-describedby reference and set the
// describedby_host attribute to mark the element.
addAriaReferencedId(element, 'aria-describedby', registeredMessage.messageElement.id);
element.setAttribute(CDK_DESCRIBEDBY_HOST_ATTRIBUTE, '');
registeredMessage.referenceCount++;
};
/**
* Removes a message reference from the element using aria-describedby
* and decrements the registered message's reference count.
*/
/**
* Removes a message reference from the element using aria-describedby
* and decrements the registered message's reference count.
* @private
* @param {?} element
* @param {?} message
* @return {?}
*/
AriaDescriber.prototype._removeMessageReference = /**
* Removes a message reference from the element using aria-describedby
* and decrements the registered message's reference count.
* @private
* @param {?} element
* @param {?} message
* @return {?}
*/
function (element, message) {
/** @type {?} */
var registeredMessage = (/** @type {?} */ (messageRegistry.get(message)));
registeredMessage.referenceCount--;
removeAriaReferencedId(element, 'aria-describedby', registeredMessage.messageElement.id);
element.removeAttribute(CDK_DESCRIBEDBY_HOST_ATTRIBUTE);
};
/** Returns true if the element has been described by the provided message ID. */
/**
* Returns true if the element has been described by the provided message ID.
* @private
* @param {?} element
* @param {?} message
* @return {?}
*/
AriaDescriber.prototype._isElementDescribedByMessage = /**
* Returns true if the element has been described by the provided message ID.
* @private
* @param {?} element
* @param {?} message
* @return {?}
*/
function (element, message) {
/** @type {?} */
var referenceIds = getAriaReferenceIds(element, 'aria-describedby');
/** @type {?} */
var registeredMessage = messageRegistry.get(message);
/** @type {?} */
var messageId = registeredMessage && registeredMessage.messageElement.id;
return !!messageId && referenceIds.indexOf(messageId) != -1;
};
/** Determines whether a message can be described on a particular element. */
/**
* Determines whether a message can be described on a particular element.
* @private
* @param {?} element
* @param {?} message
* @return {?}
*/
AriaDescriber.prototype._canBeDescribed = /**
* Determines whether a message can be described on a particular element.
* @private
* @param {?} element
* @param {?} message
* @return {?}
*/
function (element, message) {
return element.nodeType === this._document.ELEMENT_NODE && message != null &&
!!("" + message).trim();
};
AriaDescriber.decorators = [
{ type: _angular_core__WEBPACK_IMPORTED_MODULE_1__["Injectable"], args: [{ providedIn: 'root' },] },
];
/** @nocollapse */
AriaDescriber.ctorParameters = function () { return [
{ type: undefined, decorators: [{ type: _angular_core__WEBPACK_IMPORTED_MODULE_1__["Inject"], args: [_angular_common__WEBPACK_IMPORTED_MODULE_0__["DOCUMENT"],] }] }
]; };
/** @nocollapse */ AriaDescriber.ngInjectableDef = Object(_angular_core__WEBPACK_IMPORTED_MODULE_1__["defineInjectable"])({ factory: function AriaDescriber_Factory() { return new AriaDescriber(Object(_angular_core__WEBPACK_IMPORTED_MODULE_1__["inject"])(_angular_common__WEBPACK_IMPORTED_MODULE_0__["DOCUMENT"])); }, token: AriaDescriber, providedIn: "root" });
return AriaDescriber;
}());
/**
* \@docs-private \@deprecated \@breaking-change 8.0.0
* @param {?} parentDispatcher
* @param {?} _document
* @return {?}
*/
function ARIA_DESCRIBER_PROVIDER_FACTORY(parentDispatcher, _document) {
return parentDispatcher || new AriaDescriber(_document);
}
/**
* \@docs-private \@deprecated \@breaking-change 8.0.0
* @type {?}
*/
var ARIA_DESCRIBER_PROVIDER = {
// If there is already an AriaDescriber available, use that. Otherwise, provide a new one.
provide: AriaDescriber,
deps: [
[new _angular_core__WEBPACK_IMPORTED_MODULE_1__["Optional"](), new _angular_core__WEBPACK_IMPORTED_MODULE_1__["SkipSelf"](), AriaDescriber],
(/** @type {?} */ (_angular_common__WEBPACK_IMPORTED_MODULE_0__["DOCUMENT"]))
],
useFactory: ARIA_DESCRIBER_PROVIDER_FACTORY
};
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/**
* This class manages keyboard events for selectable lists. If you pass it a query list
* of items, it will set the active item correctly when arrow events occur.
* @template T
*/
var /**
* This class manages keyboard events for selectable lists. If you pass it a query list
* of items, it will set the active item correctly when arrow events occur.
* @template T
*/
ListKeyManager = /** @class */ (function () {
function ListKeyManager(_items) {
var _this = this;
this._items = _items;
this._activeItemIndex = -1;
this._activeItem = null;
this._wrap = false;
this._letterKeyStream = new rxjs__WEBPACK_IMPORTED_MODULE_2__["Subject"]();
this._typeaheadSubscription = rxjs__WEBPACK_IMPORTED_MODULE_2__["Subscription"].EMPTY;
this._vertical = true;
this._allowedModifierKeys = [];
/**
* Predicate function that can be used to check whether an item should be skipped
* by the key manager. By default, disabled items are skipped.
*/
this._skipPredicateFn = function (item) { return item.disabled; };
// Buffer for the letters that the user has pressed when the typeahead option is turned on.
this._pressedLetters = [];
/**
* Stream that emits any time the TAB key is pressed, so components can react
* when focus is shifted off of the list.
*/
this.tabOut = new rxjs__WEBPACK_IMPORTED_MODULE_2__["Subject"]();
/**
* Stream that emits whenever the active item of the list manager changes.
*/
this.change = new rxjs__WEBPACK_IMPORTED_MODULE_2__["Subject"]();
// We allow for the items to be an array because, in some cases, the consumer may
// not have access to a QueryList of the items they want to manage (e.g. when the
// items aren't being collected via `ViewChildren` or `ContentChildren`).
if (_items instanceof _angular_core__WEBPACK_IMPORTED_MODULE_1__["QueryList"]) {
_items.changes.subscribe(function (newItems) {
if (_this._activeItem) {
/** @type {?} */
var itemArray = newItems.toArray();
/** @type {?} */
var newIndex = itemArray.indexOf(_this._activeItem);
if (newIndex > -1 && newIndex !== _this._activeItemIndex) {
_this._activeItemIndex = newIndex;
}
}
});
}
}
/**
* Sets the predicate function that determines which items should be skipped by the
* list key manager.
* @param predicate Function that determines whether the given item should be skipped.
*/
/**
* Sets the predicate function that determines which items should be skipped by the
* list key manager.
* @template THIS
* @this {THIS}
* @param {?} predicate Function that determines whether the given item should be skipped.
* @return {THIS}
*/
ListKeyManager.prototype.skipPredicate = /**
* Sets the predicate function that determines which items should be skipped by the
* list key manager.
* @template THIS
* @this {THIS}
* @param {?} predicate Function that determines whether the given item should be skipped.
* @return {THIS}
*/
function (predicate) {
(/** @type {?} */ (this))._skipPredicateFn = predicate;
return (/** @type {?} */ (this));
};
/**
* Configures wrapping mode, which determines whether the active item will wrap to
* the other end of list when there are no more items in the given direction.
* @param shouldWrap Whether the list should wrap when reaching the end.
*/
/**
* Configures wrapping mode, which determines whether the active item will wrap to
* the other end of list when there are no more items in the given direction.
* @template THIS
* @this {THIS}
* @param {?=} shouldWrap Whether the list should wrap when reaching the end.
* @return {THIS}
*/
ListKeyManager.prototype.withWrap = /**
* Configures wrapping mode, which determines whether the active item will wrap to
* the other end of list when there are no more items in the given direction.
* @template THIS
* @this {THIS}
* @param {?=} shouldWrap Whether the list should wrap when reaching the end.
* @return {THIS}
*/
function (shouldWrap) {
if (shouldWrap === void 0) { shouldWrap = true; }
(/** @type {?} */ (this))._wrap = shouldWrap;
return (/** @type {?} */ (this));
};
/**
* Configures whether the key manager should be able to move the selection vertically.
* @param enabled Whether vertical selection should be enabled.
*/
/**
* Configures whether the key manager should be able to move the selection vertically.
* @template THIS
* @this {THIS}
* @param {?=} enabled Whether vertical selection should be enabled.
* @return {THIS}
*/
ListKeyManager.prototype.withVerticalOrientation = /**
* Configures whether the key manager should be able to move the selection vertically.
* @template THIS
* @this {THIS}
* @param {?=} enabled Whether vertical selection should be enabled.
* @return {THIS}
*/
function (enabled) {
if (enabled === void 0) { enabled = true; }
(/** @type {?} */ (this))._vertical = enabled;
return (/** @type {?} */ (this));
};
/**
* Configures the key manager to move the selection horizontally.
* Passing in `null` will disable horizontal movement.
* @param direction Direction in which the selection can be moved.
*/
/**
* Configures the key manager to move the selection horizontally.
* Passing in `null` will disable horizontal movement.
* @template THIS
* @this {THIS}
* @param {?} direction Direction in which the selection can be moved.
* @return {THIS}
*/
ListKeyManager.prototype.withHorizontalOrientation = /**
* Configures the key manager to move the selection horizontally.
* Passing in `null` will disable horizontal movement.
* @template THIS
* @this {THIS}
* @param {?} direction Direction in which the selection can be moved.
* @return {THIS}
*/
function (direction) {
(/** @type {?} */ (this))._horizontal = direction;
return (/** @type {?} */ (this));
};
/**
* Modifier keys which are allowed to be held down and whose default actions will be prevented
* as the user is pressing the arrow keys. Defaults to not allowing any modifier keys.
*/
/**
* Modifier keys which are allowed to be held down and whose default actions will be prevented
* as the user is pressing the arrow keys. Defaults to not allowing any modifier keys.
* @template THIS
* @this {THIS}
* @param {?} keys
* @return {THIS}
*/
ListKeyManager.prototype.withAllowedModifierKeys = /**
* Modifier keys which are allowed to be held down and whose default actions will be prevented
* as the user is pressing the arrow keys. Defaults to not allowing any modifier keys.
* @template THIS
* @this {THIS}
* @param {?} keys
* @return {THIS}
*/
function (keys) {
(/** @type {?} */ (this))._allowedModifierKeys = keys;
return (/** @type {?} */ (this));
};
/**
* Turns on typeahead mode which allows users to set the active item by typing.
* @param debounceInterval Time to wait after the last keystroke before setting the active item.
*/
/**
* Turns on typeahead mode which allows users to set the active item by typing.
* @template THIS
* @this {THIS}
* @param {?=} debounceInterval Time to wait after the last keystroke before setting the active item.
* @return {THIS}
*/
ListKeyManager.prototype.withTypeAhead = /**
* Turns on typeahead mode which allows users to set the active item by typing.
* @template THIS
* @this {THIS}
* @param {?=} debounceInterval Time to wait after the last keystroke before setting the active item.
* @return {THIS}
*/
function (debounceInterval) {
var _this = this;
if (debounceInterval === void 0) { debounceInterval = 200; }
if ((/** @type {?} */ (this))._items.length && (/** @type {?} */ (this))._items.some(function (item) { return typeof item.getLabel !== 'function'; })) {
throw Error('ListKeyManager items in typeahead mode must implement the `getLabel` method.');
}
(/** @type {?} */ (this))._typeaheadSubscription.unsubscribe();
// Debounce the presses of non-navigational keys, collect the ones that correspond to letters
// and convert those letters back into a string. Afterwards find the first item that starts
// with that string and select it.
(/** @type {?} */ (this))._typeaheadSubscription = (/** @type {?} */ (this))._letterKeyStream.pipe(Object(rxjs_operators__WEBPACK_IMPORTED_MODULE_4__["tap"])(function (keyCode) { return (/** @type {?} */ (_this))._pressedLetters.push(keyCode); }), Object(rxjs_operators__WEBPACK_IMPORTED_MODULE_4__["debounceTime"])(debounceInterval), Object(rxjs_operators__WEBPACK_IMPORTED_MODULE_4__["filter"])(function () { return (/** @type {?} */ (_this))._pressedLetters.length > 0; }), Object(rxjs_operators__WEBPACK_IMPORTED_MODULE_4__["map"])(function () { return (/** @type {?} */ (_this))._pressedLetters.join(''); })).subscribe(function (inputString) {
/** @type {?} */
var items = (/** @type {?} */ (_this))._getItemsArray();
// Start at 1 because we want to start searching at the item immediately
// following the current active item.
for (var i = 1; i < items.length + 1; i++) {
/** @type {?} */
var index = ((/** @type {?} */ (_this))._activeItemIndex + i) % items.length;
/** @type {?} */
var item = items[index];
if (!(/** @type {?} */ (_this))._skipPredicateFn(item) &&
(/** @type {?} */ (item.getLabel))().toUpperCase().trim().indexOf(inputString) === 0) {
(/** @type {?} */ (_this)).setActiveItem(index);
break;
}
}
(/** @type {?} */ (_this))._pressedLetters = [];
});
return (/** @type {?} */ (this));
};
/**
* @param {?} item
* @return {?}
*/
ListKeyManager.prototype.setActiveItem = /**
* @param {?} item
* @return {?}
*/
function (item) {
/** @type {?} */
var previousIndex = this._activeItemIndex;
this.updateActiveItem(item);
if (this._activeItemIndex !== previousIndex) {
this.change.next(this._activeItemIndex);
}
};
/**
* Sets the active item depending on the key event passed in.
* @param event Keyboard event to be used for determining which element should be active.
*/
/**
* Sets the active item depending on the key event passed in.
* @param {?} event Keyboard event to be used for determining which element should be active.
* @return {?}
*/
ListKeyManager.prototype.onKeydown = /**
* Sets the active item depending on the key event passed in.
* @param {?} event Keyboard event to be used for determining which element should be active.
* @return {?}
*/
function (event) {
var _this = this;
/** @type {?} */
var keyCode = event.keyCode;
/** @type {?} */
var modifiers = ['altKey', 'ctrlKey', 'metaKey', 'shiftKey'];
/** @type {?} */
var isModifierAllowed = modifiers.every(function (modifier) {
return !event[modifier] || _this._allowedModifierKeys.indexOf(modifier) > -1;
});
switch (keyCode) {
case _angular_cdk_keycodes__WEBPACK_IMPORTED_MODULE_3__["TAB"]:
this.tabOut.next();
return;
case _angular_cdk_keycodes__WEBPACK_IMPORTED_MODULE_3__["DOWN_ARROW"]:
if (this._vertical && isModifierAllowed) {
this.setNextItemActive();
break;
}
else {
return;
}
case _angular_cdk_keycodes__WEBPACK_IMPORTED_MODULE_3__["UP_ARROW"]:
if (this._vertical && isModifierAllowed) {
this.setPreviousItemActive();
break;
}
else {
return;
}
case _angular_cdk_keycodes__WEBPACK_IMPORTED_MODULE_3__["RIGHT_ARROW"]:
if (this._horizontal && isModifierAllowed) {
this._horizontal === 'rtl' ? this.setPreviousItemActive() : this.setNextItemActive();
break;
}
else {
return;
}
case _angular_cdk_keycodes__WEBPACK_IMPORTED_MODULE_3__["LEFT_ARROW"]:
if (this._horizontal && isModifierAllowed) {
this._horizontal === 'rtl' ? this.setNextItemActive() : this.setPreviousItemActive();
break;
}
else {
return;
}
default:
if (isModifierAllowed || Object(_angular_cdk_keycodes__WEBPACK_IMPORTED_MODULE_3__["hasModifierKey"])(event, 'shiftKey')) {
// Attempt to use the `event.key` which also maps it to the user's keyboard language,
// otherwise fall back to resolving alphanumeric characters via the keyCode.
if (event.key && event.key.length === 1) {
this._letterKeyStream.next(event.key.toLocaleUpperCase());
}
else if ((keyCode >= _angular_cdk_keycodes__WEBPACK_IMPORTED_MODULE_3__["A"] && keyCode <= _angular_cdk_keycodes__WEBPACK_IMPORTED_MODULE_3__["Z"]) || (keyCode >= _angular_cdk_keycodes__WEBPACK_IMPORTED_MODULE_3__["ZERO"] && keyCode <= _angular_cdk_keycodes__WEBPACK_IMPORTED_MODULE_3__["NINE"])) {
this._letterKeyStream.next(String.fromCharCode(keyCode));
}
}
// Note that we return here, in order to avoid preventing
// the default action of non-navigational keys.
return;
}
this._pressedLetters = [];
event.preventDefault();
};
Object.defineProperty(ListKeyManager.prototype, "activeItemIndex", {
/** Index of the currently active item. */
get: /**
* Index of the currently active item.
* @return {?}
*/
function () {
return this._activeItemIndex;
},
enumerable: true,
configurable: true
});
Object.defineProperty(ListKeyManager.prototype, "activeItem", {
/** The active item. */
get: /**
* The active item.
* @return {?}
*/
function () {
return this._activeItem;
},
enumerable: true,
configurable: true
});
/** Sets the active item to the first enabled item in the list. */
/**
* Sets the active item to the first enabled item in the list.
* @return {?}
*/
ListKeyManager.prototype.setFirstItemActive = /**
* Sets the active item to the first enabled item in the list.
* @return {?}
*/
function () {
this._setActiveItemByIndex(0, 1);
};
/** Sets the active item to the last enabled item in the list. */
/**
* Sets the active item to the last enabled item in the list.
* @return {?}
*/
ListKeyManager.prototype.setLastItemActive = /**
* Sets the active item to the last enabled item in the list.
* @return {?}
*/
function () {
this._setActiveItemByIndex(this._items.length - 1, -1);
};
/** Sets the active item to the next enabled item in the list. */
/**
* Sets the active item to the next enabled item in the list.
* @return {?}
*/
ListKeyManager.prototype.setNextItemActive = /**
* Sets the active item to the next enabled item in the list.
* @return {?}
*/
function () {
this._activeItemIndex < 0 ? this.setFirstItemActive() : this._setActiveItemByDelta(1);
};
/** Sets the active item to a previous enabled item in the list. */
/**
* Sets the active item to a previous enabled item in the list.
* @return {?}
*/
ListKeyManager.prototype.setPreviousItemActive = /**
* Sets the active item to a previous enabled item in the list.
* @return {?}
*/
function () {
this._activeItemIndex < 0 && this._wrap ? this.setLastItemActive()
: this._setActiveItemByDelta(-1);
};
/**
* @param {?} item
* @return {?}
*/
ListKeyManager.prototype.updateActiveItem = /**
* @param {?} item
* @return {?}
*/
function (item) {
/** @type {?} */
var itemArray = this._getItemsArray();
/** @type {?} */
var index = typeof item === 'number' ? item : itemArray.indexOf(item);
/** @type {?} */
var activeItem = itemArray[index];
// Explicitly check for `null` and `undefined` because other falsy values are valid.
this._activeItem = activeItem == null ? null : activeItem;
this._activeItemIndex = index;
};
/**
* Allows setting of the activeItemIndex without any other effects.
* @param index The new activeItemIndex.
* @deprecated Use `updateActiveItem` instead.
* @breaking-change 8.0.0
*/
/**
* Allows setting of the activeItemIndex without any other effects.
* @deprecated Use `updateActiveItem` instead.
* \@breaking-change 8.0.0
* @param {?} index The new activeItemIndex.
* @return {?}
*/
ListKeyManager.prototype.updateActiveItemIndex = /**
* Allows setting of the activeItemIndex without any other effects.
* @deprecated Use `updateActiveItem` instead.
* \@breaking-change 8.0.0
* @param {?} index The new activeItemIndex.
* @return {?}
*/
function (index) {
this.updateActiveItem(index);
};
/**
* This method sets the active item, given a list of items and the delta between the
* currently active item and the new active item. It will calculate differently
* depending on whether wrap mode is turned on.
*/
/**
* This method sets the active item, given a list of items and the delta between the
* currently active item and the new active item. It will calculate differently
* depending on whether wrap mode is turned on.
* @private
* @param {?} delta
* @return {?}
*/
ListKeyManager.prototype._setActiveItemByDelta = /**
* This method sets the active item, given a list of items and the delta between the
* currently active item and the new active item. It will calculate differently
* depending on whether wrap mode is turned on.
* @private
* @param {?} delta
* @return {?}
*/
function (delta) {
this._wrap ? this._setActiveInWrapMode(delta) : this._setActiveInDefaultMode(delta);
};
/**
* Sets the active item properly given "wrap" mode. In other words, it will continue to move
* down the list until it finds an item that is not disabled, and it will wrap if it
* encounters either end of the list.
*/
/**
* Sets the active item properly given "wrap" mode. In other words, it will continue to move
* down the list until it finds an item that is not disabled, and it will wrap if it
* encounters either end of the list.
* @private
* @param {?} delta
* @return {?}
*/
ListKeyManager.prototype._setActiveInWrapMode = /**
* Sets the active item properly given "wrap" mode. In other words, it will continue to move
* down the list until it finds an item that is not disabled, and it will wrap if it
* encounters either end of the list.
* @private
* @param {?} delta
* @return {?}
*/
function (delta) {
/** @type {?} */
var items = this._getItemsArray();
for (var i = 1; i <= items.length; i++) {
/** @type {?} */
var index = (this._activeItemIndex + (delta * i) + items.length) % items.length;
/** @type {?} */
var item = items[index];
if (!this._skipPredicateFn(item)) {
this.setActiveItem(index);
return;
}
}
};
/**
* Sets the active item properly given the default mode. In other words, it will
* continue to move down the list until it finds an item that is not disabled. If
* it encounters either end of the list, it will stop and not wrap.
*/
/**
* Sets the active item properly given the default mode. In other words, it will
* continue to move down the list until it finds an item that is not disabled. If
* it encounters either end of the list, it will stop and not wrap.
* @private
* @param {?} delta
* @return {?}
*/
ListKeyManager.prototype._setActiveInDefaultMode = /**
* Sets the active item properly given the default mode. In other words, it will
* continue to move down the list until it finds an item that is not disabled. If
* it encounters either end of the list, it will stop and not wrap.
* @private
* @param {?} delta
* @return {?}
*/
function (delta) {
this._setActiveItemByIndex(this._activeItemIndex + delta, delta);
};
/**
* Sets the active item to the first enabled item starting at the index specified. If the
* item is disabled, it will move in the fallbackDelta direction until it either
* finds an enabled item or encounters the end of the list.
*/
/**
* Sets the active item to the first enabled item starting at the index specified. If the
* item is disabled, it will move in the fallbackDelta direction until it either
* finds an enabled item or encounters the end of the list.
* @private
* @param {?} index
* @param {?} fallbackDelta
* @return {?}
*/
ListKeyManager.prototype._setActiveItemByIndex = /**
* Sets the active item to the first enabled item starting at the index specified. If the
* item is disabled, it will move in the fallbackDelta direction until it either
* finds an enabled item or encounters the end of the list.
* @private
* @param {?} index
* @param {?} fallbackDelta
* @return {?}
*/
function (index, fallbackDelta) {
/** @type {?} */
var items = this._getItemsArray();
if (!items[index]) {
return;
}
while (this._skipPredicateFn(items[index])) {
index += fallbackDelta;
if (!items[index]) {
return;
}
}
this.setActiveItem(index);
};
/** Returns the items as an array. */
/**
* Returns the items as an array.
* @private
* @return {?}
*/
ListKeyManager.prototype._getItemsArray = /**
* Returns the items as an array.
* @private
* @return {?}
*/
function () {
return this._items instanceof _angular_core__WEBPACK_IMPORTED_MODULE_1__["QueryList"] ? this._items.toArray() : this._items;
};
return ListKeyManager;
}());
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/**
* @template T
*/
var /**
* @template T
*/
ActiveDescendantKeyManager = /** @class */ (function (_super) {
Object(tslib__WEBPACK_IMPORTED_MODULE_5__["__extends"])(ActiveDescendantKeyManager, _super);
function ActiveDescendantKeyManager() {
return _super !== null && _super.apply(this, arguments) || this;
}
/**
* @param {?} index
* @return {?}
*/
ActiveDescendantKeyManager.prototype.setActiveItem = /**
* @param {?} index
* @return {?}
*/
function (index) {
if (this.activeItem) {
this.activeItem.setInactiveStyles();
}
_super.prototype.setActiveItem.call(this, index);
if (this.activeItem) {
this.activeItem.setActiveStyles();
}
};
return ActiveDescendantKeyManager;
}(ListKeyManager));
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/**
* @template T
*/
var /**
* @template T
*/
FocusKeyManager = /** @class */ (function (_super) {
Object(tslib__WEBPACK_IMPORTED_MODULE_5__["__extends"])(FocusKeyManager, _super);
function FocusKeyManager() {
var _this = _super !== null && _super.apply(this, arguments) || this;
_this._origin = 'program';
return _this;
}
/**
* Sets the focus origin that will be passed in to the items for any subsequent `focus` calls.
* @param origin Focus origin to be used when focusing items.
*/
/**
* Sets the focus origin that will be passed in to the items for any subsequent `focus` calls.
* @template THIS
* @this {THIS}
* @param {?} origin Focus origin to be used when focusing items.
* @return {THIS}
*/
FocusKeyManager.prototype.setFocusOrigin = /**
* Sets the focus origin that will be passed in to the items for any subsequent `focus` calls.
* @template THIS
* @this {THIS}
* @param {?} origin Focus origin to be used when focusing items.
* @return {THIS}
*/
function (origin) {
(/** @type {?} */ (this))._origin = origin;
return (/** @type {?} */ (this));
};
/**
* @param {?} item
* @return {?}
*/
FocusKeyManager.prototype.setActiveItem = /**
* @param {?} item
* @return {?}
*/
function (item) {
_super.prototype.setActiveItem.call(this, item);
if (this.activeItem) {
this.activeItem.focus(this._origin);
}
};
return FocusKeyManager;
}(ListKeyManager));
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
// The InteractivityChecker leans heavily on the ally.js accessibility utilities.
// Methods like `isTabbable` are only covering specific edge-cases for the browsers which are
// supported.
/**
* Utility for checking the interactivity of an element, such as whether is is focusable or
* tabbable.
*/
var InteractivityChecker = /** @class */ (function () {
function InteractivityChecker(_platform) {
this._platform = _platform;
}
/**
* Gets whether an element is disabled.
*
* @param element Element to be checked.
* @returns Whether the element is disabled.
*/
/**
* Gets whether an element is disabled.
*
* @param {?} element Element to be checked.
* @return {?} Whether the element is disabled.
*/
InteractivityChecker.prototype.isDisabled = /**
* Gets whether an element is disabled.
*
* @param {?} element Element to be checked.
* @return {?} Whether the element is disabled.
*/
function (element) {
// This does not capture some cases, such as a non-form control with a disabled attribute or
// a form control inside of a disabled form, but should capture the most common cases.
return element.hasAttribute('disabled');
};
/**
* Gets whether an element is visible for the purposes of interactivity.
*
* This will capture states like `display: none` and `visibility: hidden`, but not things like
* being clipped by an `overflow: hidden` parent or being outside the viewport.
*
* @returns Whether the element is visible.
*/
/**
* Gets whether an element is visible for the purposes of interactivity.
*
* This will capture states like `display: none` and `visibility: hidden`, but not things like
* being clipped by an `overflow: hidden` parent or being outside the viewport.
*
* @param {?} element
* @return {?} Whether the element is visible.
*/
InteractivityChecker.prototype.isVisible = /**
* Gets whether an element is visible for the purposes of interactivity.
*
* This will capture states like `display: none` and `visibility: hidden`, but not things like
* being clipped by an `overflow: hidden` parent or being outside the viewport.
*
* @param {?} element
* @return {?} Whether the element is visible.
*/
function (element) {
return hasGeometry(element) && getComputedStyle(element).visibility === 'visible';
};
/**
* Gets whether an element can be reached via Tab key.
* Assumes that the element has already been checked with isFocusable.
*
* @param element Element to be checked.
* @returns Whether the element is tabbable.
*/
/**
* Gets whether an element can be reached via Tab key.
* Assumes that the element has already been checked with isFocusable.
*
* @param {?} element Element to be checked.
* @return {?} Whether the element is tabbable.
*/
InteractivityChecker.prototype.isTabbable = /**
* Gets whether an element can be reached via Tab key.
* Assumes that the element has already been checked with isFocusable.
*
* @param {?} element Element to be checked.
* @return {?} Whether the element is tabbable.
*/
function (element) {
// Nothing is tabbable on the server 😎
if (!this._platform.isBrowser) {
return false;
}
/** @type {?} */
var frameElement = getFrameElement(getWindow(element));
if (frameElement) {
/** @type {?} */
var frameType = frameElement && frameElement.nodeName.toLowerCase();
// Frame elements inherit their tabindex onto all child elements.
if (getTabIndexValue(frameElement) === -1) {
return false;
}
// Webkit and Blink consider anything inside of an element as non-tabbable.
if ((this._platform.BLINK || this._platform.WEBKIT) && frameType === 'object') {
return false;
}
// Webkit and Blink disable tabbing to an element inside of an invisible frame.
if ((this._platform.BLINK || this._platform.WEBKIT) && !this.isVisible(frameElement)) {
return false;
}
}
/** @type {?} */
var nodeName = element.nodeName.toLowerCase();
/** @type {?} */
var tabIndexValue = getTabIndexValue(element);
if (element.hasAttribute('contenteditable')) {
return tabIndexValue !== -1;
}
if (nodeName === 'iframe') {
// The frames may be tabbable depending on content, but it's not possibly to reliably
// investigate the content of the frames.
return false;
}
if (nodeName === 'audio') {
if (!element.hasAttribute('controls')) {
// By default an element without the controls enabled is not tabbable.
return false;
}
else if (this._platform.BLINK) {
// In Blink elements are always tabbable.
return true;
}
}
if (nodeName === 'video') {
if (!element.hasAttribute('controls') && this._platform.TRIDENT) {
// In Trident a element without the controls enabled is not tabbable.
return false;
}
else if (this._platform.BLINK || this._platform.FIREFOX) {
// In Chrome and Firefox elements are always tabbable.
return true;
}
}
if (nodeName === 'object' && (this._platform.BLINK || this._platform.WEBKIT)) {
// In all Blink and WebKit based browsers elements are never tabbable.
return false;
}
// In iOS the browser only considers some specific elements as tabbable.
if (this._platform.WEBKIT && this._platform.IOS && !isPotentiallyTabbableIOS(element)) {
return false;
}
return element.tabIndex >= 0;
};
/**
* Gets whether an element can be focused by the user.
*
* @param element Element to be checked.
* @returns Whether the element is focusable.
*/
/**
* Gets whether an element can be focused by the user.
*
* @param {?} element Element to be checked.
* @return {?} Whether the element is focusable.
*/
InteractivityChecker.prototype.isFocusable = /**
* Gets whether an element can be focused by the user.
*
* @param {?} element Element to be checked.
* @return {?} Whether the element is focusable.
*/
function (element) {
// Perform checks in order of left to most expensive.
// Again, naive approach that does not capture many edge cases and browser quirks.
return isPotentiallyFocusable(element) && !this.isDisabled(element) && this.isVisible(element);
};
InteractivityChecker.decorators = [
{ type: _angular_core__WEBPACK_IMPORTED_MODULE_1__["Injectable"], args: [{ providedIn: 'root' },] },
];
/** @nocollapse */
InteractivityChecker.ctorParameters = function () { return [
{ type: _angular_cdk_platform__WEBPACK_IMPORTED_MODULE_6__["Platform"] }
]; };
/** @nocollapse */ InteractivityChecker.ngInjectableDef = Object(_angular_core__WEBPACK_IMPORTED_MODULE_1__["defineInjectable"])({ factory: function InteractivityChecker_Factory() { return new InteractivityChecker(Object(_angular_core__WEBPACK_IMPORTED_MODULE_1__["inject"])(_angular_cdk_platform__WEBPACK_IMPORTED_MODULE_6__["Platform"])); }, token: InteractivityChecker, providedIn: "root" });
return InteractivityChecker;
}());
/**
* Returns the frame element from a window object. Since browsers like MS Edge throw errors if
* the frameElement property is being accessed from a different host address, this property
* should be accessed carefully.
* @param {?} window
* @return {?}
*/
function getFrameElement(window) {
try {
return (/** @type {?} */ (window.frameElement));
}
catch (_a) {
return null;
}
}
/**
* Checks whether the specified element has any geometry / rectangles.
* @param {?} element
* @return {?}
*/
function hasGeometry(element) {
// Use logic from jQuery to check for an invisible element.
// See https://github.com/jquery/jquery/blob/master/src/css/hiddenVisibleSelectors.js#L12
return !!(element.offsetWidth || element.offsetHeight ||
(typeof element.getClientRects === 'function' && element.getClientRects().length));
}
/**
* Gets whether an element's
* @param {?} element
* @return {?}
*/
function isNativeFormElement(element) {
/** @type {?} */
var nodeName = element.nodeName.toLowerCase();
return nodeName === 'input' ||
nodeName === 'select' ||
nodeName === 'button' ||
nodeName === 'textarea';
}
/**
* Gets whether an element is an ``
// and attach a portal programmatically in the parent component. When Angular does the first CD
// round, it will fire the setter with empty string, causing the user's content to be cleared.
if (this.hasAttached() && !portal && !this._isInitialized) {
return;
}
if (this.hasAttached()) {
_super.prototype.detach.call(this);
}
if (portal) {
_super.prototype.attach.call(this, portal);
}
this._attachedPortal = portal;
},
enumerable: true,
configurable: true
});
Object.defineProperty(CdkPortalOutlet.prototype, "attachedRef", {
/** Component or view reference that is attached to the portal. */
get: /**
* Component or view reference that is attached to the portal.
* @return {?}
*/
function () {
return this._attachedRef;
},
enumerable: true,
configurable: true
});
/**
* @return {?}
*/
CdkPortalOutlet.prototype.ngOnInit = /**
* @return {?}
*/
function () {
this._isInitialized = true;
};
/**
* @return {?}
*/
CdkPortalOutlet.prototype.ngOnDestroy = /**
* @return {?}
*/
function () {
_super.prototype.dispose.call(this);
this._attachedPortal = null;
this._attachedRef = null;
};
/**
* Attach the given ComponentPortal to this PortalOutlet using the ComponentFactoryResolver.
*
* @param portal Portal to be attached to the portal outlet.
* @returns Reference to the created component.
*/
/**
* Attach the given ComponentPortal to this PortalOutlet using the ComponentFactoryResolver.
*
* @template T
* @param {?} portal Portal to be attached to the portal outlet.
* @return {?} Reference to the created component.
*/
CdkPortalOutlet.prototype.attachComponentPortal = /**
* Attach the given ComponentPortal to this PortalOutlet using the ComponentFactoryResolver.
*
* @template T
* @param {?} portal Portal to be attached to the portal outlet.
* @return {?} Reference to the created component.
*/
function (portal) {
portal.setAttachedHost(this);
// If the portal specifies an origin, use that as the logical location of the component
// in the application tree. Otherwise use the location of this PortalOutlet.
/** @type {?} */
var viewContainerRef = portal.viewContainerRef != null ?
portal.viewContainerRef :
this._viewContainerRef;
/** @type {?} */
var resolver = portal.componentFactoryResolver || this._componentFactoryResolver;
/** @type {?} */
var componentFactory = resolver.resolveComponentFactory(portal.component);
/** @type {?} */
var ref = viewContainerRef.createComponent(componentFactory, viewContainerRef.length, portal.injector || viewContainerRef.injector);
_super.prototype.setDisposeFn.call(this, function () { return ref.destroy(); });
this._attachedPortal = portal;
this._attachedRef = ref;
this.attached.emit(ref);
return ref;
};
/**
* Attach the given TemplatePortal to this PortlHost as an embedded View.
* @param portal Portal to be attached.
* @returns Reference to the created embedded view.
*/
/**
* Attach the given TemplatePortal to this PortlHost as an embedded View.
* @template C
* @param {?} portal Portal to be attached.
* @return {?} Reference to the created embedded view.
*/
CdkPortalOutlet.prototype.attachTemplatePortal = /**
* Attach the given TemplatePortal to this PortlHost as an embedded View.
* @template C
* @param {?} portal Portal to be attached.
* @return {?} Reference to the created embedded view.
*/
function (portal) {
var _this = this;
portal.setAttachedHost(this);
/** @type {?} */
var viewRef = this._viewContainerRef.createEmbeddedView(portal.templateRef, portal.context);
_super.prototype.setDisposeFn.call(this, function () { return _this._viewContainerRef.clear(); });
this._attachedPortal = portal;
this._attachedRef = viewRef;
this.attached.emit(viewRef);
return viewRef;
};
CdkPortalOutlet.decorators = [
{ type: _angular_core__WEBPACK_IMPORTED_MODULE_1__["Directive"], args: [{
selector: '[cdkPortalOutlet], [cdkPortalHost], [portalHost]',
exportAs: 'cdkPortalOutlet, cdkPortalHost',
inputs: ['portal: cdkPortalOutlet']
},] },
];
/** @nocollapse */
CdkPortalOutlet.ctorParameters = function () { return [
{ type: _angular_core__WEBPACK_IMPORTED_MODULE_1__["ComponentFactoryResolver"] },
{ type: _angular_core__WEBPACK_IMPORTED_MODULE_1__["ViewContainerRef"] }
]; };
CdkPortalOutlet.propDecorators = {
attached: [{ type: _angular_core__WEBPACK_IMPORTED_MODULE_1__["Output"] }]
};
return CdkPortalOutlet;
}(BasePortalOutlet));
var PortalModule = /** @class */ (function () {
function PortalModule() {
}
PortalModule.decorators = [
{ type: _angular_core__WEBPACK_IMPORTED_MODULE_1__["NgModule"], args: [{
exports: [CdkPortal, CdkPortalOutlet],
declarations: [CdkPortal, CdkPortalOutlet],
},] },
];
return PortalModule;
}());
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/**
* Custom injector to be used when providing custom
* injection tokens to components inside a portal.
* \@docs-private
*/
var /**
* Custom injector to be used when providing custom
* injection tokens to components inside a portal.
* \@docs-private
*/
PortalInjector = /** @class */ (function () {
function PortalInjector(_parentInjector, _customTokens) {
this._parentInjector = _parentInjector;
this._customTokens = _customTokens;
}
/**
* @param {?} token
* @param {?=} notFoundValue
* @return {?}
*/
PortalInjector.prototype.get = /**
* @param {?} token
* @param {?=} notFoundValue
* @return {?}
*/
function (token, notFoundValue) {
/** @type {?} */
var value = this._customTokens.get(token);
if (typeof value !== 'undefined') {
return value;
}
return this._parentInjector.get(token, notFoundValue);
};
return PortalInjector;
}());
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
//# sourceMappingURL=portal.es5.js.map
/***/ }),
/***/ "./node_modules/@angular/cdk/esm5/scrolling.es5.js":
/*!*********************************************************!*\
!*** ./node_modules/@angular/cdk/esm5/scrolling.es5.js ***!
\*********************************************************/
/*! exports provided: _fixedSizeVirtualScrollStrategyFactory, FixedSizeVirtualScrollStrategy, CdkFixedSizeVirtualScroll, SCROLL_DISPATCHER_PROVIDER_FACTORY, DEFAULT_SCROLL_TIME, ScrollDispatcher, SCROLL_DISPATCHER_PROVIDER, CdkScrollable, ScrollingModule, ScrollDispatchModule, VIEWPORT_RULER_PROVIDER_FACTORY, DEFAULT_RESIZE_TIME, ViewportRuler, VIEWPORT_RULER_PROVIDER, CdkVirtualForOf, VIRTUAL_SCROLL_STRATEGY, CdkVirtualScrollViewport */
/***/ (function(module, __webpack_exports__, __webpack_require__) {
"use strict";
__webpack_require__.r(__webpack_exports__);
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "_fixedSizeVirtualScrollStrategyFactory", function() { return _fixedSizeVirtualScrollStrategyFactory; });
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "FixedSizeVirtualScrollStrategy", function() { return FixedSizeVirtualScrollStrategy; });
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "CdkFixedSizeVirtualScroll", function() { return CdkFixedSizeVirtualScroll; });
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "SCROLL_DISPATCHER_PROVIDER_FACTORY", function() { return SCROLL_DISPATCHER_PROVIDER_FACTORY; });
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "DEFAULT_SCROLL_TIME", function() { return DEFAULT_SCROLL_TIME; });
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "ScrollDispatcher", function() { return ScrollDispatcher; });
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "SCROLL_DISPATCHER_PROVIDER", function() { return SCROLL_DISPATCHER_PROVIDER; });
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "CdkScrollable", function() { return CdkScrollable; });
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "ScrollingModule", function() { return ScrollingModule; });
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "ScrollDispatchModule", function() { return ScrollDispatchModule; });
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "VIEWPORT_RULER_PROVIDER_FACTORY", function() { return VIEWPORT_RULER_PROVIDER_FACTORY; });
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "DEFAULT_RESIZE_TIME", function() { return DEFAULT_RESIZE_TIME; });
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "ViewportRuler", function() { return ViewportRuler; });
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "VIEWPORT_RULER_PROVIDER", function() { return VIEWPORT_RULER_PROVIDER; });
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "CdkVirtualForOf", function() { return CdkVirtualForOf; });
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "VIRTUAL_SCROLL_STRATEGY", function() { return VIRTUAL_SCROLL_STRATEGY; });
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "CdkVirtualScrollViewport", function() { return CdkVirtualScrollViewport; });
/* harmony import */ var _angular_core__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @angular/core */ "./node_modules/@angular/core/fesm5/core.js");
/* harmony import */ var _angular_cdk_coercion__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! @angular/cdk/coercion */ "./node_modules/@angular/cdk/esm5/coercion.es5.js");
/* harmony import */ var rxjs__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! rxjs */ "./node_modules/rxjs/_esm5/index.js");
/* harmony import */ var rxjs_operators__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! rxjs/operators */ "./node_modules/rxjs/_esm5/operators/index.js");
/* harmony import */ var _angular_cdk_platform__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! @angular/cdk/platform */ "./node_modules/@angular/cdk/esm5/platform.es5.js");
/* harmony import */ var _angular_cdk_bidi__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! @angular/cdk/bidi */ "./node_modules/@angular/cdk/esm5/bidi.es5.js");
/* harmony import */ var tslib__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! tslib */ "./node_modules/tslib/tslib.es6.js");
/* harmony import */ var _angular_cdk_collections__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! @angular/cdk/collections */ "./node_modules/@angular/cdk/esm5/collections.es5.js");
/**
* @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
*/
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/**
* The injection token used to specify the virtual scrolling strategy.
* @type {?}
*/
var VIRTUAL_SCROLL_STRATEGY = new _angular_core__WEBPACK_IMPORTED_MODULE_0__["InjectionToken"]('VIRTUAL_SCROLL_STRATEGY');
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/**
* Virtual scrolling strategy for lists with items of known fixed size.
*/
var /**
* Virtual scrolling strategy for lists with items of known fixed size.
*/
FixedSizeVirtualScrollStrategy = /** @class */ (function () {
/**
* @param itemSize The size of the items in the virtually scrolling list.
* @param minBufferPx The minimum amount of buffer (in pixels) before needing to render more
* @param maxBufferPx The amount of buffer (in pixels) to render when rendering more.
*/
function FixedSizeVirtualScrollStrategy(itemSize, minBufferPx, maxBufferPx) {
this._scrolledIndexChange = new rxjs__WEBPACK_IMPORTED_MODULE_2__["Subject"]();
/**
* \@docs-private Implemented as part of VirtualScrollStrategy.
*/
this.scrolledIndexChange = this._scrolledIndexChange.pipe(Object(rxjs_operators__WEBPACK_IMPORTED_MODULE_3__["distinctUntilChanged"])());
/**
* The attached viewport.
*/
this._viewport = null;
this._itemSize = itemSize;
this._minBufferPx = minBufferPx;
this._maxBufferPx = maxBufferPx;
}
/**
* Attaches this scroll strategy to a viewport.
* @param viewport The viewport to attach this strategy to.
*/
/**
* Attaches this scroll strategy to a viewport.
* @param {?} viewport The viewport to attach this strategy to.
* @return {?}
*/
FixedSizeVirtualScrollStrategy.prototype.attach = /**
* Attaches this scroll strategy to a viewport.
* @param {?} viewport The viewport to attach this strategy to.
* @return {?}
*/
function (viewport) {
this._viewport = viewport;
this._updateTotalContentSize();
this._updateRenderedRange();
};
/** Detaches this scroll strategy from the currently attached viewport. */
/**
* Detaches this scroll strategy from the currently attached viewport.
* @return {?}
*/
FixedSizeVirtualScrollStrategy.prototype.detach = /**
* Detaches this scroll strategy from the currently attached viewport.
* @return {?}
*/
function () {
this._scrolledIndexChange.complete();
this._viewport = null;
};
/**
* Update the item size and buffer size.
* @param itemSize The size of the items in the virtually scrolling list.
* @param minBufferPx The minimum amount of buffer (in pixels) before needing to render more
* @param maxBufferPx The amount of buffer (in pixels) to render when rendering more.
*/
/**
* Update the item size and buffer size.
* @param {?} itemSize The size of the items in the virtually scrolling list.
* @param {?} minBufferPx The minimum amount of buffer (in pixels) before needing to render more
* @param {?} maxBufferPx The amount of buffer (in pixels) to render when rendering more.
* @return {?}
*/
FixedSizeVirtualScrollStrategy.prototype.updateItemAndBufferSize = /**
* Update the item size and buffer size.
* @param {?} itemSize The size of the items in the virtually scrolling list.
* @param {?} minBufferPx The minimum amount of buffer (in pixels) before needing to render more
* @param {?} maxBufferPx The amount of buffer (in pixels) to render when rendering more.
* @return {?}
*/
function (itemSize, minBufferPx, maxBufferPx) {
if (maxBufferPx < minBufferPx) {
throw Error('CDK virtual scroll: maxBufferPx must be greater than or equal to minBufferPx');
}
this._itemSize = itemSize;
this._minBufferPx = minBufferPx;
this._maxBufferPx = maxBufferPx;
this._updateTotalContentSize();
this._updateRenderedRange();
};
/** @docs-private Implemented as part of VirtualScrollStrategy. */
/**
* \@docs-private Implemented as part of VirtualScrollStrategy.
* @return {?}
*/
FixedSizeVirtualScrollStrategy.prototype.onContentScrolled = /**
* \@docs-private Implemented as part of VirtualScrollStrategy.
* @return {?}
*/
function () {
this._updateRenderedRange();
};
/** @docs-private Implemented as part of VirtualScrollStrategy. */
/**
* \@docs-private Implemented as part of VirtualScrollStrategy.
* @return {?}
*/
FixedSizeVirtualScrollStrategy.prototype.onDataLengthChanged = /**
* \@docs-private Implemented as part of VirtualScrollStrategy.
* @return {?}
*/
function () {
this._updateTotalContentSize();
this._updateRenderedRange();
};
/** @docs-private Implemented as part of VirtualScrollStrategy. */
/**
* \@docs-private Implemented as part of VirtualScrollStrategy.
* @return {?}
*/
FixedSizeVirtualScrollStrategy.prototype.onContentRendered = /**
* \@docs-private Implemented as part of VirtualScrollStrategy.
* @return {?}
*/
function () { };
/** @docs-private Implemented as part of VirtualScrollStrategy. */
/**
* \@docs-private Implemented as part of VirtualScrollStrategy.
* @return {?}
*/
FixedSizeVirtualScrollStrategy.prototype.onRenderedOffsetChanged = /**
* \@docs-private Implemented as part of VirtualScrollStrategy.
* @return {?}
*/
function () { };
/**
* Scroll to the offset for the given index.
* @param index The index of the element to scroll to.
* @param behavior The ScrollBehavior to use when scrolling.
*/
/**
* Scroll to the offset for the given index.
* @param {?} index The index of the element to scroll to.
* @param {?} behavior The ScrollBehavior to use when scrolling.
* @return {?}
*/
FixedSizeVirtualScrollStrategy.prototype.scrollToIndex = /**
* Scroll to the offset for the given index.
* @param {?} index The index of the element to scroll to.
* @param {?} behavior The ScrollBehavior to use when scrolling.
* @return {?}
*/
function (index, behavior) {
if (this._viewport) {
this._viewport.scrollToOffset(index * this._itemSize, behavior);
}
};
/** Update the viewport's total content size. */
/**
* Update the viewport's total content size.
* @private
* @return {?}
*/
FixedSizeVirtualScrollStrategy.prototype._updateTotalContentSize = /**
* Update the viewport's total content size.
* @private
* @return {?}
*/
function () {
if (!this._viewport) {
return;
}
this._viewport.setTotalContentSize(this._viewport.getDataLength() * this._itemSize);
};
/** Update the viewport's rendered range. */
/**
* Update the viewport's rendered range.
* @private
* @return {?}
*/
FixedSizeVirtualScrollStrategy.prototype._updateRenderedRange = /**
* Update the viewport's rendered range.
* @private
* @return {?}
*/
function () {
if (!this._viewport) {
return;
}
/** @type {?} */
var scrollOffset = this._viewport.measureScrollOffset();
/** @type {?} */
var firstVisibleIndex = scrollOffset / this._itemSize;
/** @type {?} */
var renderedRange = this._viewport.getRenderedRange();
/** @type {?} */
var newRange = { start: renderedRange.start, end: renderedRange.end };
/** @type {?} */
var viewportSize = this._viewport.getViewportSize();
/** @type {?} */
var dataLength = this._viewport.getDataLength();
/** @type {?} */
var startBuffer = scrollOffset - newRange.start * this._itemSize;
if (startBuffer < this._minBufferPx && newRange.start != 0) {
/** @type {?} */
var expandStart = Math.ceil((this._maxBufferPx - startBuffer) / this._itemSize);
newRange.start = Math.max(0, newRange.start - expandStart);
newRange.end = Math.min(dataLength, Math.ceil(firstVisibleIndex + (viewportSize + this._minBufferPx) / this._itemSize));
}
else {
/** @type {?} */
var endBuffer = newRange.end * this._itemSize - (scrollOffset + viewportSize);
if (endBuffer < this._minBufferPx && newRange.end != dataLength) {
/** @type {?} */
var expandEnd = Math.ceil((this._maxBufferPx - endBuffer) / this._itemSize);
if (expandEnd > 0) {
newRange.end = Math.min(dataLength, newRange.end + expandEnd);
newRange.start = Math.max(0, Math.floor(firstVisibleIndex - this._minBufferPx / this._itemSize));
}
}
}
this._viewport.setRenderedRange(newRange);
this._viewport.setRenderedContentOffset(this._itemSize * newRange.start);
this._scrolledIndexChange.next(Math.floor(firstVisibleIndex));
};
return FixedSizeVirtualScrollStrategy;
}());
/**
* Provider factory for `FixedSizeVirtualScrollStrategy` that simply extracts the already created
* `FixedSizeVirtualScrollStrategy` from the given directive.
* @param {?} fixedSizeDir The instance of `CdkFixedSizeVirtualScroll` to extract the
* `FixedSizeVirtualScrollStrategy` from.
* @return {?}
*/
function _fixedSizeVirtualScrollStrategyFactory(fixedSizeDir) {
return fixedSizeDir._scrollStrategy;
}
/**
* A virtual scroll strategy that supports fixed-size items.
*/
var CdkFixedSizeVirtualScroll = /** @class */ (function () {
function CdkFixedSizeVirtualScroll() {
this._itemSize = 20;
this._minBufferPx = 100;
this._maxBufferPx = 200;
/**
* The scroll strategy used by this directive.
*/
this._scrollStrategy = new FixedSizeVirtualScrollStrategy(this.itemSize, this.minBufferPx, this.maxBufferPx);
}
Object.defineProperty(CdkFixedSizeVirtualScroll.prototype, "itemSize", {
/** The size of the items in the list (in pixels). */
get: /**
* The size of the items in the list (in pixels).
* @return {?}
*/
function () { return this._itemSize; },
set: /**
* @param {?} value
* @return {?}
*/
function (value) { this._itemSize = Object(_angular_cdk_coercion__WEBPACK_IMPORTED_MODULE_1__["coerceNumberProperty"])(value); },
enumerable: true,
configurable: true
});
Object.defineProperty(CdkFixedSizeVirtualScroll.prototype, "minBufferPx", {
/**
* The minimum amount of buffer rendered beyond the viewport (in pixels).
* If the amount of buffer dips below this number, more items will be rendered. Defaults to 100px.
*/
get: /**
* The minimum amount of buffer rendered beyond the viewport (in pixels).
* If the amount of buffer dips below this number, more items will be rendered. Defaults to 100px.
* @return {?}
*/
function () { return this._minBufferPx; },
set: /**
* @param {?} value
* @return {?}
*/
function (value) { this._minBufferPx = Object(_angular_cdk_coercion__WEBPACK_IMPORTED_MODULE_1__["coerceNumberProperty"])(value); },
enumerable: true,
configurable: true
});
Object.defineProperty(CdkFixedSizeVirtualScroll.prototype, "maxBufferPx", {
/**
* The number of pixels worth of buffer to render for when rendering new items. Defaults to 200px.
*/
get: /**
* The number of pixels worth of buffer to render for when rendering new items. Defaults to 200px.
* @return {?}
*/
function () { return this._maxBufferPx; },
set: /**
* @param {?} value
* @return {?}
*/
function (value) { this._maxBufferPx = Object(_angular_cdk_coercion__WEBPACK_IMPORTED_MODULE_1__["coerceNumberProperty"])(value); },
enumerable: true,
configurable: true
});
/**
* @return {?}
*/
CdkFixedSizeVirtualScroll.prototype.ngOnChanges = /**
* @return {?}
*/
function () {
this._scrollStrategy.updateItemAndBufferSize(this.itemSize, this.minBufferPx, this.maxBufferPx);
};
CdkFixedSizeVirtualScroll.decorators = [
{ type: _angular_core__WEBPACK_IMPORTED_MODULE_0__["Directive"], args: [{
selector: 'cdk-virtual-scroll-viewport[itemSize]',
providers: [{
provide: VIRTUAL_SCROLL_STRATEGY,
useFactory: _fixedSizeVirtualScrollStrategyFactory,
deps: [Object(_angular_core__WEBPACK_IMPORTED_MODULE_0__["forwardRef"])(function () { return CdkFixedSizeVirtualScroll; })],
}],
},] },
];
CdkFixedSizeVirtualScroll.propDecorators = {
itemSize: [{ type: _angular_core__WEBPACK_IMPORTED_MODULE_0__["Input"] }],
minBufferPx: [{ type: _angular_core__WEBPACK_IMPORTED_MODULE_0__["Input"] }],
maxBufferPx: [{ type: _angular_core__WEBPACK_IMPORTED_MODULE_0__["Input"] }]
};
return CdkFixedSizeVirtualScroll;
}());
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/**
* Time in ms to throttle the scrolling events by default.
* @type {?}
*/
var DEFAULT_SCROLL_TIME = 20;
/**
* Service contained all registered Scrollable references and emits an event when any one of the
* Scrollable references emit a scrolled event.
*/
var ScrollDispatcher = /** @class */ (function () {
function ScrollDispatcher(_ngZone, _platform) {
this._ngZone = _ngZone;
this._platform = _platform;
/**
* Subject for notifying that a registered scrollable reference element has been scrolled.
*/
this._scrolled = new rxjs__WEBPACK_IMPORTED_MODULE_2__["Subject"]();
/**
* Keeps track of the global `scroll` and `resize` subscriptions.
*/
this._globalSubscription = null;
/**
* Keeps track of the amount of subscriptions to `scrolled`. Used for cleaning up afterwards.
*/
this._scrolledCount = 0;
/**
* Map of all the scrollable references that are registered with the service and their
* scroll event subscriptions.
*/
this.scrollContainers = new Map();
}
/**
* Registers a scrollable instance with the service and listens for its scrolled events. When the
* scrollable is scrolled, the service emits the event to its scrolled observable.
* @param scrollable Scrollable instance to be registered.
*/
/**
* Registers a scrollable instance with the service and listens for its scrolled events. When the
* scrollable is scrolled, the service emits the event to its scrolled observable.
* @param {?} scrollable Scrollable instance to be registered.
* @return {?}
*/
ScrollDispatcher.prototype.register = /**
* Registers a scrollable instance with the service and listens for its scrolled events. When the
* scrollable is scrolled, the service emits the event to its scrolled observable.
* @param {?} scrollable Scrollable instance to be registered.
* @return {?}
*/
function (scrollable) {
var _this = this;
if (!this.scrollContainers.has(scrollable)) {
this.scrollContainers.set(scrollable, scrollable.elementScrolled()
.subscribe(function () { return _this._scrolled.next(scrollable); }));
}
};
/**
* Deregisters a Scrollable reference and unsubscribes from its scroll event observable.
* @param scrollable Scrollable instance to be deregistered.
*/
/**
* Deregisters a Scrollable reference and unsubscribes from its scroll event observable.
* @param {?} scrollable Scrollable instance to be deregistered.
* @return {?}
*/
ScrollDispatcher.prototype.deregister = /**
* Deregisters a Scrollable reference and unsubscribes from its scroll event observable.
* @param {?} scrollable Scrollable instance to be deregistered.
* @return {?}
*/
function (scrollable) {
/** @type {?} */
var scrollableReference = this.scrollContainers.get(scrollable);
if (scrollableReference) {
scrollableReference.unsubscribe();
this.scrollContainers.delete(scrollable);
}
};
/**
* Returns an observable that emits an event whenever any of the registered Scrollable
* references (or window, document, or body) fire a scrolled event. Can provide a time in ms
* to override the default "throttle" time.
*
* **Note:** in order to avoid hitting change detection for every scroll event,
* all of the events emitted from this stream will be run outside the Angular zone.
* If you need to update any data bindings as a result of a scroll event, you have
* to run the callback using `NgZone.run`.
*/
/**
* Returns an observable that emits an event whenever any of the registered Scrollable
* references (or window, document, or body) fire a scrolled event. Can provide a time in ms
* to override the default "throttle" time.
*
* **Note:** in order to avoid hitting change detection for every scroll event,
* all of the events emitted from this stream will be run outside the Angular zone.
* If you need to update any data bindings as a result of a scroll event, you have
* to run the callback using `NgZone.run`.
* @param {?=} auditTimeInMs
* @return {?}
*/
ScrollDispatcher.prototype.scrolled = /**
* Returns an observable that emits an event whenever any of the registered Scrollable
* references (or window, document, or body) fire a scrolled event. Can provide a time in ms
* to override the default "throttle" time.
*
* **Note:** in order to avoid hitting change detection for every scroll event,
* all of the events emitted from this stream will be run outside the Angular zone.
* If you need to update any data bindings as a result of a scroll event, you have
* to run the callback using `NgZone.run`.
* @param {?=} auditTimeInMs
* @return {?}
*/
function (auditTimeInMs) {
var _this = this;
if (auditTimeInMs === void 0) { auditTimeInMs = DEFAULT_SCROLL_TIME; }
if (!this._platform.isBrowser) {
return Object(rxjs__WEBPACK_IMPORTED_MODULE_2__["of"])();
}
return new rxjs__WEBPACK_IMPORTED_MODULE_2__["Observable"](function (observer) {
if (!_this._globalSubscription) {
_this._addGlobalListener();
}
// In the case of a 0ms delay, use an observable without auditTime
// since it does add a perceptible delay in processing overhead.
/** @type {?} */
var subscription = auditTimeInMs > 0 ?
_this._scrolled.pipe(Object(rxjs_operators__WEBPACK_IMPORTED_MODULE_3__["auditTime"])(auditTimeInMs)).subscribe(observer) :
_this._scrolled.subscribe(observer);
_this._scrolledCount++;
return function () {
subscription.unsubscribe();
_this._scrolledCount--;
if (!_this._scrolledCount) {
_this._removeGlobalListener();
}
};
});
};
/**
* @return {?}
*/
ScrollDispatcher.prototype.ngOnDestroy = /**
* @return {?}
*/
function () {
var _this = this;
this._removeGlobalListener();
this.scrollContainers.forEach(function (_, container) { return _this.deregister(container); });
this._scrolled.complete();
};
/**
* Returns an observable that emits whenever any of the
* scrollable ancestors of an element are scrolled.
* @param elementRef Element whose ancestors to listen for.
* @param auditTimeInMs Time to throttle the scroll events.
*/
/**
* Returns an observable that emits whenever any of the
* scrollable ancestors of an element are scrolled.
* @param {?} elementRef Element whose ancestors to listen for.
* @param {?=} auditTimeInMs Time to throttle the scroll events.
* @return {?}
*/
ScrollDispatcher.prototype.ancestorScrolled = /**
* Returns an observable that emits whenever any of the
* scrollable ancestors of an element are scrolled.
* @param {?} elementRef Element whose ancestors to listen for.
* @param {?=} auditTimeInMs Time to throttle the scroll events.
* @return {?}
*/
function (elementRef, auditTimeInMs) {
/** @type {?} */
var ancestors = this.getAncestorScrollContainers(elementRef);
return this.scrolled(auditTimeInMs).pipe(Object(rxjs_operators__WEBPACK_IMPORTED_MODULE_3__["filter"])(function (target) {
return !target || ancestors.indexOf(target) > -1;
}));
};
/** Returns all registered Scrollables that contain the provided element. */
/**
* Returns all registered Scrollables that contain the provided element.
* @param {?} elementRef
* @return {?}
*/
ScrollDispatcher.prototype.getAncestorScrollContainers = /**
* Returns all registered Scrollables that contain the provided element.
* @param {?} elementRef
* @return {?}
*/
function (elementRef) {
var _this = this;
/** @type {?} */
var scrollingContainers = [];
this.scrollContainers.forEach(function (_subscription, scrollable) {
if (_this._scrollableContainsElement(scrollable, elementRef)) {
scrollingContainers.push(scrollable);
}
});
return scrollingContainers;
};
/** Returns true if the element is contained within the provided Scrollable. */
/**
* Returns true if the element is contained within the provided Scrollable.
* @private
* @param {?} scrollable
* @param {?} elementRef
* @return {?}
*/
ScrollDispatcher.prototype._scrollableContainsElement = /**
* Returns true if the element is contained within the provided Scrollable.
* @private
* @param {?} scrollable
* @param {?} elementRef
* @return {?}
*/
function (scrollable, elementRef) {
/** @type {?} */
var element = elementRef.nativeElement;
/** @type {?} */
var scrollableElement = scrollable.getElementRef().nativeElement;
// Traverse through the element parents until we reach null, checking if any of the elements
// are the scrollable's element.
do {
if (element == scrollableElement) {
return true;
}
} while (element = (/** @type {?} */ (element)).parentElement);
return false;
};
/** Sets up the global scroll listeners. */
/**
* Sets up the global scroll listeners.
* @private
* @return {?}
*/
ScrollDispatcher.prototype._addGlobalListener = /**
* Sets up the global scroll listeners.
* @private
* @return {?}
*/
function () {
var _this = this;
this._globalSubscription = this._ngZone.runOutsideAngular(function () {
return Object(rxjs__WEBPACK_IMPORTED_MODULE_2__["fromEvent"])(window.document, 'scroll').subscribe(function () { return _this._scrolled.next(); });
});
};
/** Cleans up the global scroll listener. */
/**
* Cleans up the global scroll listener.
* @private
* @return {?}
*/
ScrollDispatcher.prototype._removeGlobalListener = /**
* Cleans up the global scroll listener.
* @private
* @return {?}
*/
function () {
if (this._globalSubscription) {
this._globalSubscription.unsubscribe();
this._globalSubscription = null;
}
};
ScrollDispatcher.decorators = [
{ type: _angular_core__WEBPACK_IMPORTED_MODULE_0__["Injectable"], args: [{ providedIn: 'root' },] },
];
/** @nocollapse */
ScrollDispatcher.ctorParameters = function () { return [
{ type: _angular_core__WEBPACK_IMPORTED_MODULE_0__["NgZone"] },
{ type: _angular_cdk_platform__WEBPACK_IMPORTED_MODULE_4__["Platform"] }
]; };
/** @nocollapse */ ScrollDispatcher.ngInjectableDef = Object(_angular_core__WEBPACK_IMPORTED_MODULE_0__["defineInjectable"])({ factory: function ScrollDispatcher_Factory() { return new ScrollDispatcher(Object(_angular_core__WEBPACK_IMPORTED_MODULE_0__["inject"])(_angular_core__WEBPACK_IMPORTED_MODULE_0__["NgZone"]), Object(_angular_core__WEBPACK_IMPORTED_MODULE_0__["inject"])(_angular_cdk_platform__WEBPACK_IMPORTED_MODULE_4__["Platform"])); }, token: ScrollDispatcher, providedIn: "root" });
return ScrollDispatcher;
}());
/**
* \@docs-private \@deprecated \@breaking-change 8.0.0
* @param {?} parentDispatcher
* @param {?} ngZone
* @param {?} platform
* @return {?}
*/
function SCROLL_DISPATCHER_PROVIDER_FACTORY(parentDispatcher, ngZone, platform) {
return parentDispatcher || new ScrollDispatcher(ngZone, platform);
}
/**
* \@docs-private \@deprecated \@breaking-change 8.0.0
* @type {?}
*/
var SCROLL_DISPATCHER_PROVIDER = {
// If there is already a ScrollDispatcher available, use that. Otherwise, provide a new one.
provide: ScrollDispatcher,
deps: [[new _angular_core__WEBPACK_IMPORTED_MODULE_0__["Optional"](), new _angular_core__WEBPACK_IMPORTED_MODULE_0__["SkipSelf"](), ScrollDispatcher], _angular_core__WEBPACK_IMPORTED_MODULE_0__["NgZone"], _angular_cdk_platform__WEBPACK_IMPORTED_MODULE_4__["Platform"]],
useFactory: SCROLL_DISPATCHER_PROVIDER_FACTORY
};
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/**
* Sends an event when the directive's element is scrolled. Registers itself with the
* ScrollDispatcher service to include itself as part of its collection of scrolling events that it
* can be listened to through the service.
*/
var CdkScrollable = /** @class */ (function () {
function CdkScrollable(elementRef, scrollDispatcher, ngZone, dir) {
var _this = this;
this.elementRef = elementRef;
this.scrollDispatcher = scrollDispatcher;
this.ngZone = ngZone;
this.dir = dir;
this._destroyed = new rxjs__WEBPACK_IMPORTED_MODULE_2__["Subject"]();
this._elementScrolled = new rxjs__WEBPACK_IMPORTED_MODULE_2__["Observable"](function (observer) {
return _this.ngZone.runOutsideAngular(function () {
return Object(rxjs__WEBPACK_IMPORTED_MODULE_2__["fromEvent"])(_this.elementRef.nativeElement, 'scroll').pipe(Object(rxjs_operators__WEBPACK_IMPORTED_MODULE_3__["takeUntil"])(_this._destroyed))
.subscribe(observer);
});
});
}
/**
* @return {?}
*/
CdkScrollable.prototype.ngOnInit = /**
* @return {?}
*/
function () {
this.scrollDispatcher.register(this);
};
/**
* @return {?}
*/
CdkScrollable.prototype.ngOnDestroy = /**
* @return {?}
*/
function () {
this.scrollDispatcher.deregister(this);
this._destroyed.next();
this._destroyed.complete();
};
/** Returns observable that emits when a scroll event is fired on the host element. */
/**
* Returns observable that emits when a scroll event is fired on the host element.
* @return {?}
*/
CdkScrollable.prototype.elementScrolled = /**
* Returns observable that emits when a scroll event is fired on the host element.
* @return {?}
*/
function () {
return this._elementScrolled;
};
/** Gets the ElementRef for the viewport. */
/**
* Gets the ElementRef for the viewport.
* @return {?}
*/
CdkScrollable.prototype.getElementRef = /**
* Gets the ElementRef for the viewport.
* @return {?}
*/
function () {
return this.elementRef;
};
/**
* Scrolls to the specified offsets. This is a normalized version of the browser's native scrollTo
* method, since browsers are not consistent about what scrollLeft means in RTL. For this method
* left and right always refer to the left and right side of the scrolling container irrespective
* of the layout direction. start and end refer to left and right in an LTR context and vice-versa
* in an RTL context.
* @param options specified the offsets to scroll to.
*/
/**
* Scrolls to the specified offsets. This is a normalized version of the browser's native scrollTo
* method, since browsers are not consistent about what scrollLeft means in RTL. For this method
* left and right always refer to the left and right side of the scrolling container irrespective
* of the layout direction. start and end refer to left and right in an LTR context and vice-versa
* in an RTL context.
* @param {?} options specified the offsets to scroll to.
* @return {?}
*/
CdkScrollable.prototype.scrollTo = /**
* Scrolls to the specified offsets. This is a normalized version of the browser's native scrollTo
* method, since browsers are not consistent about what scrollLeft means in RTL. For this method
* left and right always refer to the left and right side of the scrolling container irrespective
* of the layout direction. start and end refer to left and right in an LTR context and vice-versa
* in an RTL context.
* @param {?} options specified the offsets to scroll to.
* @return {?}
*/
function (options) {
/** @type {?} */
var el = this.elementRef.nativeElement;
/** @type {?} */
var isRtl = this.dir && this.dir.value == 'rtl';
// Rewrite start & end offsets as right or left offsets.
options.left = options.left == null ? (isRtl ? options.end : options.start) : options.left;
options.right = options.right == null ? (isRtl ? options.start : options.end) : options.right;
// Rewrite the bottom offset as a top offset.
if (options.bottom != null) {
((/** @type {?} */ (options))).top =
el.scrollHeight - el.clientHeight - options.bottom;
}
// Rewrite the right offset as a left offset.
if (isRtl && Object(_angular_cdk_platform__WEBPACK_IMPORTED_MODULE_4__["getRtlScrollAxisType"])() != _angular_cdk_platform__WEBPACK_IMPORTED_MODULE_4__["RtlScrollAxisType"].NORMAL) {
if (options.left != null) {
((/** @type {?} */ (options))).right =
el.scrollWidth - el.clientWidth - options.left;
}
if (Object(_angular_cdk_platform__WEBPACK_IMPORTED_MODULE_4__["getRtlScrollAxisType"])() == _angular_cdk_platform__WEBPACK_IMPORTED_MODULE_4__["RtlScrollAxisType"].INVERTED) {
options.left = options.right;
}
else if (Object(_angular_cdk_platform__WEBPACK_IMPORTED_MODULE_4__["getRtlScrollAxisType"])() == _angular_cdk_platform__WEBPACK_IMPORTED_MODULE_4__["RtlScrollAxisType"].NEGATED) {
options.left = options.right ? -options.right : options.right;
}
}
else {
if (options.right != null) {
((/** @type {?} */ (options))).left =
el.scrollWidth - el.clientWidth - options.right;
}
}
this._applyScrollToOptions(options);
};
/**
* @private
* @param {?} options
* @return {?}
*/
CdkScrollable.prototype._applyScrollToOptions = /**
* @private
* @param {?} options
* @return {?}
*/
function (options) {
/** @type {?} */
var el = this.elementRef.nativeElement;
if (Object(_angular_cdk_platform__WEBPACK_IMPORTED_MODULE_4__["supportsScrollBehavior"])()) {
el.scrollTo(options);
}
else {
if (options.top != null) {
el.scrollTop = options.top;
}
if (options.left != null) {
el.scrollLeft = options.left;
}
}
};
/**
* Measures the scroll offset relative to the specified edge of the viewport. This method can be
* used instead of directly checking scrollLeft or scrollTop, since browsers are not consistent
* about what scrollLeft means in RTL. The values returned by this method are normalized such that
* left and right always refer to the left and right side of the scrolling container irrespective
* of the layout direction. start and end refer to left and right in an LTR context and vice-versa
* in an RTL context.
* @param from The edge to measure from.
*/
/**
* Measures the scroll offset relative to the specified edge of the viewport. This method can be
* used instead of directly checking scrollLeft or scrollTop, since browsers are not consistent
* about what scrollLeft means in RTL. The values returned by this method are normalized such that
* left and right always refer to the left and right side of the scrolling container irrespective
* of the layout direction. start and end refer to left and right in an LTR context and vice-versa
* in an RTL context.
* @param {?} from The edge to measure from.
* @return {?}
*/
CdkScrollable.prototype.measureScrollOffset = /**
* Measures the scroll offset relative to the specified edge of the viewport. This method can be
* used instead of directly checking scrollLeft or scrollTop, since browsers are not consistent
* about what scrollLeft means in RTL. The values returned by this method are normalized such that
* left and right always refer to the left and right side of the scrolling container irrespective
* of the layout direction. start and end refer to left and right in an LTR context and vice-versa
* in an RTL context.
* @param {?} from The edge to measure from.
* @return {?}
*/
function (from) {
/** @type {?} */
var LEFT = 'left';
/** @type {?} */
var RIGHT = 'right';
/** @type {?} */
var el = this.elementRef.nativeElement;
if (from == 'top') {
return el.scrollTop;
}
if (from == 'bottom') {
return el.scrollHeight - el.clientHeight - el.scrollTop;
}
// Rewrite start & end as left or right offsets.
/** @type {?} */
var isRtl = this.dir && this.dir.value == 'rtl';
if (from == 'start') {
from = isRtl ? RIGHT : LEFT;
}
else if (from == 'end') {
from = isRtl ? LEFT : RIGHT;
}
if (isRtl && Object(_angular_cdk_platform__WEBPACK_IMPORTED_MODULE_4__["getRtlScrollAxisType"])() == _angular_cdk_platform__WEBPACK_IMPORTED_MODULE_4__["RtlScrollAxisType"].INVERTED) {
// For INVERTED, scrollLeft is (scrollWidth - clientWidth) when scrolled all the way left and
// 0 when scrolled all the way right.
if (from == LEFT) {
return el.scrollWidth - el.clientWidth - el.scrollLeft;
}
else {
return el.scrollLeft;
}
}
else if (isRtl && Object(_angular_cdk_platform__WEBPACK_IMPORTED_MODULE_4__["getRtlScrollAxisType"])() == _angular_cdk_platform__WEBPACK_IMPORTED_MODULE_4__["RtlScrollAxisType"].NEGATED) {
// For NEGATED, scrollLeft is -(scrollWidth - clientWidth) when scrolled all the way left and
// 0 when scrolled all the way right.
if (from == LEFT) {
return el.scrollLeft + el.scrollWidth - el.clientWidth;
}
else {
return -el.scrollLeft;
}
}
else {
// For NORMAL, as well as non-RTL contexts, scrollLeft is 0 when scrolled all the way left and
// (scrollWidth - clientWidth) when scrolled all the way right.
if (from == LEFT) {
return el.scrollLeft;
}
else {
return el.scrollWidth - el.clientWidth - el.scrollLeft;
}
}
};
CdkScrollable.decorators = [
{ type: _angular_core__WEBPACK_IMPORTED_MODULE_0__["Directive"], args: [{
selector: '[cdk-scrollable], [cdkScrollable]'
},] },
];
/** @nocollapse */
CdkScrollable.ctorParameters = function () { return [
{ type: _angular_core__WEBPACK_IMPORTED_MODULE_0__["ElementRef"] },
{ type: ScrollDispatcher },
{ type: _angular_core__WEBPACK_IMPORTED_MODULE_0__["NgZone"] },
{ type: _angular_cdk_bidi__WEBPACK_IMPORTED_MODULE_5__["Directionality"], decorators: [{ type: _angular_core__WEBPACK_IMPORTED_MODULE_0__["Optional"] }] }
]; };
return CdkScrollable;
}());
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/**
* Checks if the given ranges are equal.
* @param {?} r1
* @param {?} r2
* @return {?}
*/
function rangesEqual(r1, r2) {
return r1.start == r2.start && r1.end == r2.end;
}
/**
* Scheduler to be used for scroll events. Needs to fall back to
* something that doesn't rely on requestAnimationFrame on environments
* that don't support it (e.g. server-side rendering).
* @type {?}
*/
var SCROLL_SCHEDULER = typeof requestAnimationFrame !== 'undefined' ? rxjs__WEBPACK_IMPORTED_MODULE_2__["animationFrameScheduler"] : rxjs__WEBPACK_IMPORTED_MODULE_2__["asapScheduler"];
/**
* A viewport that virtualizes it's scrolling with the help of `CdkVirtualForOf`.
*/
var CdkVirtualScrollViewport = /** @class */ (function (_super) {
Object(tslib__WEBPACK_IMPORTED_MODULE_6__["__extends"])(CdkVirtualScrollViewport, _super);
function CdkVirtualScrollViewport(elementRef, _changeDetectorRef, ngZone, _scrollStrategy, dir, scrollDispatcher) {
var _this = _super.call(this, elementRef, scrollDispatcher, ngZone, dir) || this;
_this.elementRef = elementRef;
_this._changeDetectorRef = _changeDetectorRef;
_this._scrollStrategy = _scrollStrategy;
/**
* Emits when the viewport is detached from a CdkVirtualForOf.
*/
_this._detachedSubject = new rxjs__WEBPACK_IMPORTED_MODULE_2__["Subject"]();
/**
* Emits when the rendered range changes.
*/
_this._renderedRangeSubject = new rxjs__WEBPACK_IMPORTED_MODULE_2__["Subject"]();
/**
* The direction the viewport scrolls.
*/
_this.orientation = 'vertical';
// Note: we don't use the typical EventEmitter here because we need to subscribe to the scroll
// strategy lazily (i.e. only if the user is actually listening to the events). We do this because
// depending on how the strategy calculates the scrolled index, it may come at a cost to
// performance.
/**
* Emits when the index of the first element visible in the viewport changes.
*/
_this.scrolledIndexChange = new rxjs__WEBPACK_IMPORTED_MODULE_2__["Observable"](function (observer) {
return _this._scrollStrategy.scrolledIndexChange.subscribe(function (index) {
return Promise.resolve().then(function () { return _this.ngZone.run(function () { return observer.next(index); }); });
});
});
/**
* A stream that emits whenever the rendered range changes.
*/
_this.renderedRangeStream = _this._renderedRangeSubject.asObservable();
/**
* The transform used to scale the spacer to the same size as all content, including content that
* is not currently rendered.
*/
_this._totalContentSizeTransform = '';
/**
* The total size of all content (in pixels), including content that is not currently rendered.
*/
_this._totalContentSize = 0;
/**
* The currently rendered range of indices.
*/
_this._renderedRange = { start: 0, end: 0 };
/**
* The length of the data bound to this viewport (in number of items).
*/
_this._dataLength = 0;
/**
* The size of the viewport (in pixels).
*/
_this._viewportSize = 0;
/**
* The last rendered content offset that was set.
*/
_this._renderedContentOffset = 0;
/**
* Whether the last rendered content offset was to the end of the content (and therefore needs to
* be rewritten as an offset to the start of the content).
*/
_this._renderedContentOffsetNeedsRewrite = false;
/**
* Whether there is a pending change detection cycle.
*/
_this._isChangeDetectionPending = false;
/**
* A list of functions to run after the next change detection cycle.
*/
_this._runAfterChangeDetection = [];
if (!_scrollStrategy) {
throw Error('Error: cdk-virtual-scroll-viewport requires the "itemSize" property to be set.');
}
return _this;
}
/**
* @return {?}
*/
CdkVirtualScrollViewport.prototype.ngOnInit = /**
* @return {?}
*/
function () {
var _this = this;
_super.prototype.ngOnInit.call(this);
// It's still too early to measure the viewport at this point. Deferring with a promise allows
// the Viewport to be rendered with the correct size before we measure. We run this outside the
// zone to avoid causing more change detection cycles. We handle the change detection loop
// ourselves instead.
this.ngZone.runOutsideAngular(function () { return Promise.resolve().then(function () {
_this._measureViewportSize();
_this._scrollStrategy.attach(_this);
_this.elementScrolled()
.pipe(
// Start off with a fake scroll event so we properly detect our initial position.
Object(rxjs_operators__WEBPACK_IMPORTED_MODULE_3__["startWith"])((/** @type {?} */ (null))),
// Collect multiple events into one until the next animation frame. This way if
// there are multiple scroll events in the same frame we only need to recheck
// our layout once.
Object(rxjs_operators__WEBPACK_IMPORTED_MODULE_3__["auditTime"])(0, SCROLL_SCHEDULER))
.subscribe(function () { return _this._scrollStrategy.onContentScrolled(); });
_this._markChangeDetectionNeeded();
}); });
};
/**
* @return {?}
*/
CdkVirtualScrollViewport.prototype.ngOnDestroy = /**
* @return {?}
*/
function () {
this.detach();
this._scrollStrategy.detach();
// Complete all subjects
this._renderedRangeSubject.complete();
this._detachedSubject.complete();
_super.prototype.ngOnDestroy.call(this);
};
/** Attaches a `CdkVirtualForOf` to this viewport. */
/**
* Attaches a `CdkVirtualForOf` to this viewport.
* @param {?} forOf
* @return {?}
*/
CdkVirtualScrollViewport.prototype.attach = /**
* Attaches a `CdkVirtualForOf` to this viewport.
* @param {?} forOf
* @return {?}
*/
function (forOf) {
var _this = this;
if (this._forOf) {
throw Error('CdkVirtualScrollViewport is already attached.');
}
// Subscribe to the data stream of the CdkVirtualForOf to keep track of when the data length
// changes. Run outside the zone to avoid triggering change detection, since we're managing the
// change detection loop ourselves.
this.ngZone.runOutsideAngular(function () {
_this._forOf = forOf;
_this._forOf.dataStream.pipe(Object(rxjs_operators__WEBPACK_IMPORTED_MODULE_3__["takeUntil"])(_this._detachedSubject)).subscribe(function (data) {
/** @type {?} */
var newLength = data.length;
if (newLength !== _this._dataLength) {
_this._dataLength = newLength;
_this._scrollStrategy.onDataLengthChanged();
}
_this._doChangeDetection();
});
});
};
/** Detaches the current `CdkVirtualForOf`. */
/**
* Detaches the current `CdkVirtualForOf`.
* @return {?}
*/
CdkVirtualScrollViewport.prototype.detach = /**
* Detaches the current `CdkVirtualForOf`.
* @return {?}
*/
function () {
this._forOf = null;
this._detachedSubject.next();
};
/** Gets the length of the data bound to this viewport (in number of items). */
/**
* Gets the length of the data bound to this viewport (in number of items).
* @return {?}
*/
CdkVirtualScrollViewport.prototype.getDataLength = /**
* Gets the length of the data bound to this viewport (in number of items).
* @return {?}
*/
function () {
return this._dataLength;
};
/** Gets the size of the viewport (in pixels). */
/**
* Gets the size of the viewport (in pixels).
* @return {?}
*/
CdkVirtualScrollViewport.prototype.getViewportSize = /**
* Gets the size of the viewport (in pixels).
* @return {?}
*/
function () {
return this._viewportSize;
};
// TODO(mmalerba): This is technically out of sync with what's really rendered until a render
// cycle happens. I'm being careful to only call it after the render cycle is complete and before
// setting it to something else, but its error prone and should probably be split into
// `pendingRange` and `renderedRange`, the latter reflecting whats actually in the DOM.
/** Get the current rendered range of items. */
// TODO(mmalerba): This is technically out of sync with what's really rendered until a render
// cycle happens. I'm being careful to only call it after the render cycle is complete and before
// setting it to something else, but its error prone and should probably be split into
// `pendingRange` and `renderedRange`, the latter reflecting whats actually in the DOM.
/**
* Get the current rendered range of items.
* @return {?}
*/
CdkVirtualScrollViewport.prototype.getRenderedRange =
// TODO(mmalerba): This is technically out of sync with what's really rendered until a render
// cycle happens. I'm being careful to only call it after the render cycle is complete and before
// setting it to something else, but its error prone and should probably be split into
// `pendingRange` and `renderedRange`, the latter reflecting whats actually in the DOM.
/**
* Get the current rendered range of items.
* @return {?}
*/
function () {
return this._renderedRange;
};
/**
* Sets the total size of all content (in pixels), including content that is not currently
* rendered.
*/
/**
* Sets the total size of all content (in pixels), including content that is not currently
* rendered.
* @param {?} size
* @return {?}
*/
CdkVirtualScrollViewport.prototype.setTotalContentSize = /**
* Sets the total size of all content (in pixels), including content that is not currently
* rendered.
* @param {?} size
* @return {?}
*/
function (size) {
if (this._totalContentSize !== size) {
this._totalContentSize = size;
/** @type {?} */
var axis = this.orientation == 'horizontal' ? 'X' : 'Y';
this._totalContentSizeTransform = "scale" + axis + "(" + this._totalContentSize + ")";
this._markChangeDetectionNeeded();
}
};
/** Sets the currently rendered range of indices. */
/**
* Sets the currently rendered range of indices.
* @param {?} range
* @return {?}
*/
CdkVirtualScrollViewport.prototype.setRenderedRange = /**
* Sets the currently rendered range of indices.
* @param {?} range
* @return {?}
*/
function (range) {
var _this = this;
if (!rangesEqual(this._renderedRange, range)) {
this._renderedRangeSubject.next(this._renderedRange = range);
this._markChangeDetectionNeeded(function () { return _this._scrollStrategy.onContentRendered(); });
}
};
/**
* Gets the offset from the start of the viewport to the start of the rendered data (in pixels).
*/
/**
* Gets the offset from the start of the viewport to the start of the rendered data (in pixels).
* @return {?}
*/
CdkVirtualScrollViewport.prototype.getOffsetToRenderedContentStart = /**
* Gets the offset from the start of the viewport to the start of the rendered data (in pixels).
* @return {?}
*/
function () {
return this._renderedContentOffsetNeedsRewrite ? null : this._renderedContentOffset;
};
/**
* Sets the offset from the start of the viewport to either the start or end of the rendered data
* (in pixels).
*/
/**
* Sets the offset from the start of the viewport to either the start or end of the rendered data
* (in pixels).
* @param {?} offset
* @param {?=} to
* @return {?}
*/
CdkVirtualScrollViewport.prototype.setRenderedContentOffset = /**
* Sets the offset from the start of the viewport to either the start or end of the rendered data
* (in pixels).
* @param {?} offset
* @param {?=} to
* @return {?}
*/
function (offset, to) {
var _this = this;
if (to === void 0) { to = 'to-start'; }
// For a horizontal viewport in a right-to-left language we need to translate along the x-axis
// in the negative direction.
/** @type {?} */
var isRtl = this.dir && this.dir.value == 'rtl';
/** @type {?} */
var isHorizontal = this.orientation == 'horizontal';
/** @type {?} */
var axis = isHorizontal ? 'X' : 'Y';
/** @type {?} */
var axisDirection = isHorizontal && isRtl ? -1 : 1;
/** @type {?} */
var transform = "translate" + axis + "(" + Number(axisDirection * offset) + "px)";
this._renderedContentOffset = offset;
if (to === 'to-end') {
transform += " translate" + axis + "(-100%)";
// The viewport should rewrite this as a `to-start` offset on the next render cycle. Otherwise
// elements will appear to expand in the wrong direction (e.g. `mat-expansion-panel` would
// expand upward).
this._renderedContentOffsetNeedsRewrite = true;
}
if (this._renderedContentTransform != transform) {
// We know this value is safe because we parse `offset` with `Number()` before passing it
// into the string.
this._renderedContentTransform = transform;
this._markChangeDetectionNeeded(function () {
if (_this._renderedContentOffsetNeedsRewrite) {
_this._renderedContentOffset -= _this.measureRenderedContentSize();
_this._renderedContentOffsetNeedsRewrite = false;
_this.setRenderedContentOffset(_this._renderedContentOffset);
}
else {
_this._scrollStrategy.onRenderedOffsetChanged();
}
});
}
};
/**
* Scrolls to the given offset from the start of the viewport. Please note that this is not always
* the same as setting `scrollTop` or `scrollLeft`. In a horizontal viewport with right-to-left
* direction, this would be the equivalent of setting a fictional `scrollRight` property.
* @param offset The offset to scroll to.
* @param behavior The ScrollBehavior to use when scrolling. Default is behavior is `auto`.
*/
/**
* Scrolls to the given offset from the start of the viewport. Please note that this is not always
* the same as setting `scrollTop` or `scrollLeft`. In a horizontal viewport with right-to-left
* direction, this would be the equivalent of setting a fictional `scrollRight` property.
* @param {?} offset The offset to scroll to.
* @param {?=} behavior The ScrollBehavior to use when scrolling. Default is behavior is `auto`.
* @return {?}
*/
CdkVirtualScrollViewport.prototype.scrollToOffset = /**
* Scrolls to the given offset from the start of the viewport. Please note that this is not always
* the same as setting `scrollTop` or `scrollLeft`. In a horizontal viewport with right-to-left
* direction, this would be the equivalent of setting a fictional `scrollRight` property.
* @param {?} offset The offset to scroll to.
* @param {?=} behavior The ScrollBehavior to use when scrolling. Default is behavior is `auto`.
* @return {?}
*/
function (offset, behavior) {
if (behavior === void 0) { behavior = 'auto'; }
/** @type {?} */
var options = { behavior: behavior };
if (this.orientation === 'horizontal') {
options.start = offset;
}
else {
options.top = offset;
}
this.scrollTo(options);
};
/**
* Scrolls to the offset for the given index.
* @param index The index of the element to scroll to.
* @param behavior The ScrollBehavior to use when scrolling. Default is behavior is `auto`.
*/
/**
* Scrolls to the offset for the given index.
* @param {?} index The index of the element to scroll to.
* @param {?=} behavior The ScrollBehavior to use when scrolling. Default is behavior is `auto`.
* @return {?}
*/
CdkVirtualScrollViewport.prototype.scrollToIndex = /**
* Scrolls to the offset for the given index.
* @param {?} index The index of the element to scroll to.
* @param {?=} behavior The ScrollBehavior to use when scrolling. Default is behavior is `auto`.
* @return {?}
*/
function (index, behavior) {
if (behavior === void 0) { behavior = 'auto'; }
this._scrollStrategy.scrollToIndex(index, behavior);
};
/**
* Gets the current scroll offset from the start of the viewport (in pixels).
* @param from The edge to measure the offset from. Defaults to 'top' in vertical mode and 'start'
* in horizontal mode.
*/
/**
* Gets the current scroll offset from the start of the viewport (in pixels).
* @param {?=} from The edge to measure the offset from. Defaults to 'top' in vertical mode and 'start'
* in horizontal mode.
* @return {?}
*/
CdkVirtualScrollViewport.prototype.measureScrollOffset = /**
* Gets the current scroll offset from the start of the viewport (in pixels).
* @param {?=} from The edge to measure the offset from. Defaults to 'top' in vertical mode and 'start'
* in horizontal mode.
* @return {?}
*/
function (from) {
return _super.prototype.measureScrollOffset.call(this, from ? from : this.orientation === 'horizontal' ? 'start' : 'top');
};
/** Measure the combined size of all of the rendered items. */
/**
* Measure the combined size of all of the rendered items.
* @return {?}
*/
CdkVirtualScrollViewport.prototype.measureRenderedContentSize = /**
* Measure the combined size of all of the rendered items.
* @return {?}
*/
function () {
/** @type {?} */
var contentEl = this._contentWrapper.nativeElement;
return this.orientation === 'horizontal' ? contentEl.offsetWidth : contentEl.offsetHeight;
};
/**
* Measure the total combined size of the given range. Throws if the range includes items that are
* not rendered.
*/
/**
* Measure the total combined size of the given range. Throws if the range includes items that are
* not rendered.
* @param {?} range
* @return {?}
*/
CdkVirtualScrollViewport.prototype.measureRangeSize = /**
* Measure the total combined size of the given range. Throws if the range includes items that are
* not rendered.
* @param {?} range
* @return {?}
*/
function (range) {
if (!this._forOf) {
return 0;
}
return this._forOf.measureRangeSize(range, this.orientation);
};
/** Update the viewport dimensions and re-render. */
/**
* Update the viewport dimensions and re-render.
* @return {?}
*/
CdkVirtualScrollViewport.prototype.checkViewportSize = /**
* Update the viewport dimensions and re-render.
* @return {?}
*/
function () {
// TODO: Cleanup later when add logic for handling content resize
this._measureViewportSize();
this._scrollStrategy.onDataLengthChanged();
};
/** Measure the viewport size. */
/**
* Measure the viewport size.
* @private
* @return {?}
*/
CdkVirtualScrollViewport.prototype._measureViewportSize = /**
* Measure the viewport size.
* @private
* @return {?}
*/
function () {
/** @type {?} */
var viewportEl = this.elementRef.nativeElement;
this._viewportSize = this.orientation === 'horizontal' ?
viewportEl.clientWidth : viewportEl.clientHeight;
};
/** Queue up change detection to run. */
/**
* Queue up change detection to run.
* @private
* @param {?=} runAfter
* @return {?}
*/
CdkVirtualScrollViewport.prototype._markChangeDetectionNeeded = /**
* Queue up change detection to run.
* @private
* @param {?=} runAfter
* @return {?}
*/
function (runAfter) {
var _this = this;
if (runAfter) {
this._runAfterChangeDetection.push(runAfter);
}
// Use a Promise to batch together calls to `_doChangeDetection`. This way if we set a bunch of
// properties sequentially we only have to run `_doChangeDetection` once at the end.
if (!this._isChangeDetectionPending) {
this._isChangeDetectionPending = true;
this.ngZone.runOutsideAngular(function () { return Promise.resolve().then(function () {
_this._doChangeDetection();
}); });
}
};
/** Run change detection. */
/**
* Run change detection.
* @private
* @return {?}
*/
CdkVirtualScrollViewport.prototype._doChangeDetection = /**
* Run change detection.
* @private
* @return {?}
*/
function () {
var _this = this;
this._isChangeDetectionPending = false;
// Apply changes to Angular bindings. Note: We must call `markForCheck` to run change detection
// from the root, since the repeated items are content projected in. Calling `detectChanges`
// instead does not properly check the projected content.
this.ngZone.run(function () { return _this._changeDetectorRef.markForCheck(); });
// Apply the content transform. The transform can't be set via an Angular binding because
// bypassSecurityTrustStyle is banned in Google. However the value is safe, it's composed of
// string literals, a variable that can only be 'X' or 'Y', and user input that is run through
// the `Number` function first to coerce it to a numeric value.
this._contentWrapper.nativeElement.style.transform = this._renderedContentTransform;
/** @type {?} */
var runAfterChangeDetection = this._runAfterChangeDetection;
this._runAfterChangeDetection = [];
for (var _i = 0, runAfterChangeDetection_1 = runAfterChangeDetection; _i < runAfterChangeDetection_1.length; _i++) {
var fn = runAfterChangeDetection_1[_i];
fn();
}
};
CdkVirtualScrollViewport.decorators = [
{ type: _angular_core__WEBPACK_IMPORTED_MODULE_0__["Component"], args: [{selector: 'cdk-virtual-scroll-viewport',
template: "
",
styles: ["cdk-virtual-scroll-viewport{display:block;position:relative;overflow:auto;contain:strict;transform:translateZ(0);will-change:scroll-position;-webkit-overflow-scrolling:touch}.cdk-virtual-scroll-content-wrapper{position:absolute;top:0;left:0;contain:content}[dir=rtl] .cdk-virtual-scroll-content-wrapper{right:0;left:auto}.cdk-virtual-scroll-orientation-horizontal .cdk-virtual-scroll-content-wrapper{min-height:100%}.cdk-virtual-scroll-orientation-horizontal .cdk-virtual-scroll-content-wrapper>dl:not([cdkVirtualFor]),.cdk-virtual-scroll-orientation-horizontal .cdk-virtual-scroll-content-wrapper>ol:not([cdkVirtualFor]),.cdk-virtual-scroll-orientation-horizontal .cdk-virtual-scroll-content-wrapper>table:not([cdkVirtualFor]),.cdk-virtual-scroll-orientation-horizontal .cdk-virtual-scroll-content-wrapper>ul:not([cdkVirtualFor]){padding-left:0;padding-right:0;margin-left:0;margin-right:0;border-left-width:0;border-right-width:0;outline:0}.cdk-virtual-scroll-orientation-vertical .cdk-virtual-scroll-content-wrapper{min-width:100%}.cdk-virtual-scroll-orientation-vertical .cdk-virtual-scroll-content-wrapper>dl:not([cdkVirtualFor]),.cdk-virtual-scroll-orientation-vertical .cdk-virtual-scroll-content-wrapper>ol:not([cdkVirtualFor]),.cdk-virtual-scroll-orientation-vertical .cdk-virtual-scroll-content-wrapper>table:not([cdkVirtualFor]),.cdk-virtual-scroll-orientation-vertical .cdk-virtual-scroll-content-wrapper>ul:not([cdkVirtualFor]){padding-top:0;padding-bottom:0;margin-top:0;margin-bottom:0;border-top-width:0;border-bottom-width:0;outline:0}.cdk-virtual-scroll-spacer{position:absolute;top:0;left:0;height:1px;width:1px;transform-origin:0 0}[dir=rtl] .cdk-virtual-scroll-spacer{right:0;left:auto;transform-origin:100% 0}"],
host: {
'class': 'cdk-virtual-scroll-viewport',
'[class.cdk-virtual-scroll-orientation-horizontal]': 'orientation === "horizontal"',
'[class.cdk-virtual-scroll-orientation-vertical]': 'orientation !== "horizontal"',
},
encapsulation: _angular_core__WEBPACK_IMPORTED_MODULE_0__["ViewEncapsulation"].None,
changeDetection: _angular_core__WEBPACK_IMPORTED_MODULE_0__["ChangeDetectionStrategy"].OnPush,
providers: [{
provide: CdkScrollable,
useExisting: CdkVirtualScrollViewport,
}]
},] },
];
/** @nocollapse */
CdkVirtualScrollViewport.ctorParameters = function () { return [
{ type: _angular_core__WEBPACK_IMPORTED_MODULE_0__["ElementRef"] },
{ type: _angular_core__WEBPACK_IMPORTED_MODULE_0__["ChangeDetectorRef"] },
{ type: _angular_core__WEBPACK_IMPORTED_MODULE_0__["NgZone"] },
{ type: undefined, decorators: [{ type: _angular_core__WEBPACK_IMPORTED_MODULE_0__["Optional"] }, { type: _angular_core__WEBPACK_IMPORTED_MODULE_0__["Inject"], args: [VIRTUAL_SCROLL_STRATEGY,] }] },
{ type: _angular_cdk_bidi__WEBPACK_IMPORTED_MODULE_5__["Directionality"], decorators: [{ type: _angular_core__WEBPACK_IMPORTED_MODULE_0__["Optional"] }] },
{ type: ScrollDispatcher }
]; };
CdkVirtualScrollViewport.propDecorators = {
orientation: [{ type: _angular_core__WEBPACK_IMPORTED_MODULE_0__["Input"] }],
scrolledIndexChange: [{ type: _angular_core__WEBPACK_IMPORTED_MODULE_0__["Output"] }],
_contentWrapper: [{ type: _angular_core__WEBPACK_IMPORTED_MODULE_0__["ViewChild"], args: ['contentWrapper',] }]
};
return CdkVirtualScrollViewport;
}(CdkScrollable));
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/**
* Helper to extract size from a DOM Node.
* @param {?} orientation
* @param {?} node
* @return {?}
*/
function getSize(orientation, node) {
/** @type {?} */
var el = (/** @type {?} */ (node));
if (!el.getBoundingClientRect) {
return 0;
}
/** @type {?} */
var rect = el.getBoundingClientRect();
return orientation == 'horizontal' ? rect.width : rect.height;
}
/**
* A directive similar to `ngForOf` to be used for rendering data inside a virtual scrolling
* container.
* @template T
*/
var CdkVirtualForOf = /** @class */ (function () {
function CdkVirtualForOf(_viewContainerRef, _template, _differs, _viewport, ngZone) {
var _this = this;
this._viewContainerRef = _viewContainerRef;
this._template = _template;
this._differs = _differs;
this._viewport = _viewport;
/**
* Emits when the rendered view of the data changes.
*/
this.viewChange = new rxjs__WEBPACK_IMPORTED_MODULE_2__["Subject"]();
/**
* Subject that emits when a new DataSource instance is given.
*/
this._dataSourceChanges = new rxjs__WEBPACK_IMPORTED_MODULE_2__["Subject"]();
/**
* The size of the cache used to store templates that are not being used for re-use later.
* Setting the cache size to `0` will disable caching. Defaults to 20 templates.
*/
this.cdkVirtualForTemplateCacheSize = 20;
/**
* Emits whenever the data in the current DataSource changes.
*/
this.dataStream = this._dataSourceChanges
.pipe(
// Start off with null `DataSource`.
Object(rxjs_operators__WEBPACK_IMPORTED_MODULE_3__["startWith"])((/** @type {?} */ (null))),
// Bundle up the previous and current data sources so we can work with both.
Object(rxjs_operators__WEBPACK_IMPORTED_MODULE_3__["pairwise"])(),
// Use `_changeDataSource` to disconnect from the previous data source and connect to the
// new one, passing back a stream of data changes which we run through `switchMap` to give
// us a data stream that emits the latest data from whatever the current `DataSource` is.
Object(rxjs_operators__WEBPACK_IMPORTED_MODULE_3__["switchMap"])(function (_a) {
var prev = _a[0], cur = _a[1];
return _this._changeDataSource(prev, cur);
}),
// Replay the last emitted data when someone subscribes.
Object(rxjs_operators__WEBPACK_IMPORTED_MODULE_3__["shareReplay"])(1));
/**
* The differ used to calculate changes to the data.
*/
this._differ = null;
/**
* The template cache used to hold on ot template instancess that have been stamped out, but don't
* currently need to be rendered. These instances will be reused in the future rather than
* stamping out brand new ones.
*/
this._templateCache = [];
/**
* Whether the rendered data should be updated during the next ngDoCheck cycle.
*/
this._needsUpdate = false;
this._destroyed = new rxjs__WEBPACK_IMPORTED_MODULE_2__["Subject"]();
this.dataStream.subscribe(function (data) {
_this._data = data;
_this._onRenderedDataChange();
});
this._viewport.renderedRangeStream.pipe(Object(rxjs_operators__WEBPACK_IMPORTED_MODULE_3__["takeUntil"])(this._destroyed)).subscribe(function (range) {
_this._renderedRange = range;
ngZone.run(function () { return _this.viewChange.next(_this._renderedRange); });
_this._onRenderedDataChange();
});
this._viewport.attach(this);
}
Object.defineProperty(CdkVirtualForOf.prototype, "cdkVirtualForOf", {
/** The DataSource to display. */
get: /**
* The DataSource to display.
* @return {?}
*/
function () {
return this._cdkVirtualForOf;
},
set: /**
* @param {?} value
* @return {?}
*/
function (value) {
this._cdkVirtualForOf = value;
/** @type {?} */
var ds = Object(_angular_cdk_collections__WEBPACK_IMPORTED_MODULE_7__["isDataSource"])(value) ? value :
// Slice the value if its an NgIterable to ensure we're working with an array.
new _angular_cdk_collections__WEBPACK_IMPORTED_MODULE_7__["ArrayDataSource"](value instanceof rxjs__WEBPACK_IMPORTED_MODULE_2__["Observable"] ? value : Array.prototype.slice.call(value || []));
this._dataSourceChanges.next(ds);
},
enumerable: true,
configurable: true
});
Object.defineProperty(CdkVirtualForOf.prototype, "cdkVirtualForTrackBy", {
/**
* The `TrackByFunction` to use for tracking changes. The `TrackByFunction` takes the index and
* the item and produces a value to be used as the item's identity when tracking changes.
*/
get: /**
* The `TrackByFunction` to use for tracking changes. The `TrackByFunction` takes the index and
* the item and produces a value to be used as the item's identity when tracking changes.
* @return {?}
*/
function () {
return this._cdkVirtualForTrackBy;
},
set: /**
* @param {?} fn
* @return {?}
*/
function (fn) {
var _this = this;
this._needsUpdate = true;
this._cdkVirtualForTrackBy = fn ?
function (index, item) { return fn(index + (_this._renderedRange ? _this._renderedRange.start : 0), item); } :
undefined;
},
enumerable: true,
configurable: true
});
Object.defineProperty(CdkVirtualForOf.prototype, "cdkVirtualForTemplate", {
/** The template used to stamp out new elements. */
set: /**
* The template used to stamp out new elements.
* @param {?} value
* @return {?}
*/
function (value) {
if (value) {
this._needsUpdate = true;
this._template = value;
}
},
enumerable: true,
configurable: true
});
/**
* Measures the combined size (width for horizontal orientation, height for vertical) of all items
* in the specified range. Throws an error if the range includes items that are not currently
* rendered.
*/
/**
* Measures the combined size (width for horizontal orientation, height for vertical) of all items
* in the specified range. Throws an error if the range includes items that are not currently
* rendered.
* @param {?} range
* @param {?} orientation
* @return {?}
*/
CdkVirtualForOf.prototype.measureRangeSize = /**
* Measures the combined size (width for horizontal orientation, height for vertical) of all items
* in the specified range. Throws an error if the range includes items that are not currently
* rendered.
* @param {?} range
* @param {?} orientation
* @return {?}
*/
function (range, orientation) {
if (range.start >= range.end) {
return 0;
}
if (range.start < this._renderedRange.start || range.end > this._renderedRange.end) {
throw Error("Error: attempted to measure an item that isn't rendered.");
}
// The index into the list of rendered views for the first item in the range.
/** @type {?} */
var renderedStartIndex = range.start - this._renderedRange.start;
// The length of the range we're measuring.
/** @type {?} */
var rangeLen = range.end - range.start;
// Loop over all root nodes for all items in the range and sum up their size.
/** @type {?} */
var totalSize = 0;
/** @type {?} */
var i = rangeLen;
while (i--) {
/** @type {?} */
var view = (/** @type {?} */ (this._viewContainerRef.get(i + renderedStartIndex)));
/** @type {?} */
var j = view ? view.rootNodes.length : 0;
while (j--) {
totalSize += getSize(orientation, (/** @type {?} */ (view)).rootNodes[j]);
}
}
return totalSize;
};
/**
* @return {?}
*/
CdkVirtualForOf.prototype.ngDoCheck = /**
* @return {?}
*/
function () {
if (this._differ && this._needsUpdate) {
// TODO(mmalerba): We should differentiate needs update due to scrolling and a new portion of
// this list being rendered (can use simpler algorithm) vs needs update due to data actually
// changing (need to do this diff).
/** @type {?} */
var changes = this._differ.diff(this._renderedItems);
if (!changes) {
this._updateContext();
}
else {
this._applyChanges(changes);
}
this._needsUpdate = false;
}
};
/**
* @return {?}
*/
CdkVirtualForOf.prototype.ngOnDestroy = /**
* @return {?}
*/
function () {
this._viewport.detach();
this._dataSourceChanges.complete();
this.viewChange.complete();
this._destroyed.next();
this._destroyed.complete();
for (var _i = 0, _a = this._templateCache; _i < _a.length; _i++) {
var view = _a[_i];
view.destroy();
}
};
/** React to scroll state changes in the viewport. */
/**
* React to scroll state changes in the viewport.
* @private
* @return {?}
*/
CdkVirtualForOf.prototype._onRenderedDataChange = /**
* React to scroll state changes in the viewport.
* @private
* @return {?}
*/
function () {
if (!this._renderedRange) {
return;
}
this._renderedItems = this._data.slice(this._renderedRange.start, this._renderedRange.end);
if (!this._differ) {
this._differ = this._differs.find(this._renderedItems).create(this.cdkVirtualForTrackBy);
}
this._needsUpdate = true;
};
/** Swap out one `DataSource` for another. */
/**
* Swap out one `DataSource` for another.
* @private
* @param {?} oldDs
* @param {?} newDs
* @return {?}
*/
CdkVirtualForOf.prototype._changeDataSource = /**
* Swap out one `DataSource` for another.
* @private
* @param {?} oldDs
* @param {?} newDs
* @return {?}
*/
function (oldDs, newDs) {
if (oldDs) {
oldDs.disconnect(this);
}
this._needsUpdate = true;
return newDs.connect(this);
};
/** Update the `CdkVirtualForOfContext` for all views. */
/**
* Update the `CdkVirtualForOfContext` for all views.
* @private
* @return {?}
*/
CdkVirtualForOf.prototype._updateContext = /**
* Update the `CdkVirtualForOfContext` for all views.
* @private
* @return {?}
*/
function () {
/** @type {?} */
var count = this._data.length;
/** @type {?} */
var i = this._viewContainerRef.length;
while (i--) {
/** @type {?} */
var view = (/** @type {?} */ (this._viewContainerRef.get(i)));
view.context.index = this._renderedRange.start + i;
view.context.count = count;
this._updateComputedContextProperties(view.context);
view.detectChanges();
}
};
/** Apply changes to the DOM. */
/**
* Apply changes to the DOM.
* @private
* @param {?} changes
* @return {?}
*/
CdkVirtualForOf.prototype._applyChanges = /**
* Apply changes to the DOM.
* @private
* @param {?} changes
* @return {?}
*/
function (changes) {
var _this = this;
// Rearrange the views to put them in the right location.
changes.forEachOperation(function (record, adjustedPreviousIndex, currentIndex) {
if (record.previousIndex == null) { // Item added.
// Item added.
/** @type {?} */
var view = _this._insertViewForNewItem((/** @type {?} */ (currentIndex)));
view.context.$implicit = record.item;
}
else if (currentIndex == null) { // Item removed.
_this._cacheView(_this._detachView((/** @type {?} */ (adjustedPreviousIndex))));
}
else { // Item moved.
// Item moved.
/** @type {?} */
var view = (/** @type {?} */ (_this._viewContainerRef.get((/** @type {?} */ (adjustedPreviousIndex)))));
_this._viewContainerRef.move(view, currentIndex);
view.context.$implicit = record.item;
}
});
// Update $implicit for any items that had an identity change.
changes.forEachIdentityChange(function (record) {
/** @type {?} */
var view = (/** @type {?} */ (_this._viewContainerRef.get((/** @type {?} */ (record.currentIndex)))));
view.context.$implicit = record.item;
});
// Update the context variables on all items.
/** @type {?} */
var count = this._data.length;
/** @type {?} */
var i = this._viewContainerRef.length;
while (i--) {
/** @type {?} */
var view = (/** @type {?} */ (this._viewContainerRef.get(i)));
view.context.index = this._renderedRange.start + i;
view.context.count = count;
this._updateComputedContextProperties(view.context);
}
};
/** Cache the given detached view. */
/**
* Cache the given detached view.
* @private
* @param {?} view
* @return {?}
*/
CdkVirtualForOf.prototype._cacheView = /**
* Cache the given detached view.
* @private
* @param {?} view
* @return {?}
*/
function (view) {
if (this._templateCache.length < this.cdkVirtualForTemplateCacheSize) {
this._templateCache.push(view);
}
else {
/** @type {?} */
var index = this._viewContainerRef.indexOf(view);
// It's very unlikely that the index will ever be -1, but just in case,
// destroy the view on its own, otherwise destroy it through the
// container to ensure that all the references are removed.
if (index === -1) {
view.destroy();
}
else {
this._viewContainerRef.remove(index);
}
}
};
/** Inserts a view for a new item, either from the cache or by creating a new one. */
/**
* Inserts a view for a new item, either from the cache or by creating a new one.
* @private
* @param {?} index
* @return {?}
*/
CdkVirtualForOf.prototype._insertViewForNewItem = /**
* Inserts a view for a new item, either from the cache or by creating a new one.
* @private
* @param {?} index
* @return {?}
*/
function (index) {
return this._insertViewFromCache(index) || this._createEmbeddedViewAt(index);
};
/** Update the computed properties on the `CdkVirtualForOfContext`. */
/**
* Update the computed properties on the `CdkVirtualForOfContext`.
* @private
* @param {?} context
* @return {?}
*/
CdkVirtualForOf.prototype._updateComputedContextProperties = /**
* Update the computed properties on the `CdkVirtualForOfContext`.
* @private
* @param {?} context
* @return {?}
*/
function (context) {
context.first = context.index === 0;
context.last = context.index === context.count - 1;
context.even = context.index % 2 === 0;
context.odd = !context.even;
};
/** Creates a new embedded view and moves it to the given index */
/**
* Creates a new embedded view and moves it to the given index
* @private
* @param {?} index
* @return {?}
*/
CdkVirtualForOf.prototype._createEmbeddedViewAt = /**
* Creates a new embedded view and moves it to the given index
* @private
* @param {?} index
* @return {?}
*/
function (index) {
/** @type {?} */
var view = this._viewContainerRef.createEmbeddedView(this._template, {
$implicit: (/** @type {?} */ (null)),
cdkVirtualForOf: this._cdkVirtualForOf,
index: -1,
count: -1,
first: false,
last: false,
odd: false,
even: false
});
if (index < this._viewContainerRef.length) {
this._viewContainerRef.move(view, index);
}
return view;
};
/** Inserts a recycled view from the cache at the given index. */
/**
* Inserts a recycled view from the cache at the given index.
* @private
* @param {?} index
* @return {?}
*/
CdkVirtualForOf.prototype._insertViewFromCache = /**
* Inserts a recycled view from the cache at the given index.
* @private
* @param {?} index
* @return {?}
*/
function (index) {
/** @type {?} */
var cachedView = this._templateCache.pop();
if (cachedView) {
this._viewContainerRef.insert(cachedView, index);
}
return cachedView || null;
};
/** Detaches the embedded view at the given index. */
/**
* Detaches the embedded view at the given index.
* @private
* @param {?} index
* @return {?}
*/
CdkVirtualForOf.prototype._detachView = /**
* Detaches the embedded view at the given index.
* @private
* @param {?} index
* @return {?}
*/
function (index) {
return (/** @type {?} */ (this._viewContainerRef.detach(index)));
};
CdkVirtualForOf.decorators = [
{ type: _angular_core__WEBPACK_IMPORTED_MODULE_0__["Directive"], args: [{
selector: '[cdkVirtualFor][cdkVirtualForOf]',
},] },
];
/** @nocollapse */
CdkVirtualForOf.ctorParameters = function () { return [
{ type: _angular_core__WEBPACK_IMPORTED_MODULE_0__["ViewContainerRef"] },
{ type: _angular_core__WEBPACK_IMPORTED_MODULE_0__["TemplateRef"] },
{ type: _angular_core__WEBPACK_IMPORTED_MODULE_0__["IterableDiffers"] },
{ type: CdkVirtualScrollViewport, decorators: [{ type: _angular_core__WEBPACK_IMPORTED_MODULE_0__["SkipSelf"] }] },
{ type: _angular_core__WEBPACK_IMPORTED_MODULE_0__["NgZone"] }
]; };
CdkVirtualForOf.propDecorators = {
cdkVirtualForOf: [{ type: _angular_core__WEBPACK_IMPORTED_MODULE_0__["Input"] }],
cdkVirtualForTrackBy: [{ type: _angular_core__WEBPACK_IMPORTED_MODULE_0__["Input"] }],
cdkVirtualForTemplate: [{ type: _angular_core__WEBPACK_IMPORTED_MODULE_0__["Input"] }],
cdkVirtualForTemplateCacheSize: [{ type: _angular_core__WEBPACK_IMPORTED_MODULE_0__["Input"] }]
};
return CdkVirtualForOf;
}());
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
var ScrollingModule = /** @class */ (function () {
function ScrollingModule() {
}
ScrollingModule.decorators = [
{ type: _angular_core__WEBPACK_IMPORTED_MODULE_0__["NgModule"], args: [{
imports: [_angular_cdk_bidi__WEBPACK_IMPORTED_MODULE_5__["BidiModule"], _angular_cdk_platform__WEBPACK_IMPORTED_MODULE_4__["PlatformModule"]],
exports: [
_angular_cdk_bidi__WEBPACK_IMPORTED_MODULE_5__["BidiModule"],
CdkFixedSizeVirtualScroll,
CdkScrollable,
CdkVirtualForOf,
CdkVirtualScrollViewport,
],
declarations: [
CdkFixedSizeVirtualScroll,
CdkScrollable,
CdkVirtualForOf,
CdkVirtualScrollViewport,
],
},] },
];
return ScrollingModule;
}());
/**
* @deprecated ScrollDispatchModule has been renamed to ScrollingModule.
* \@breaking-change 8.0.0 delete this alias
*/
var ScrollDispatchModule = /** @class */ (function () {
function ScrollDispatchModule() {
}
ScrollDispatchModule.decorators = [
{ type: _angular_core__WEBPACK_IMPORTED_MODULE_0__["NgModule"], args: [{
imports: [ScrollingModule],
exports: [ScrollingModule],
},] },
];
return ScrollDispatchModule;
}());
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/**
* Time in ms to throttle the resize events by default.
* @type {?}
*/
var DEFAULT_RESIZE_TIME = 20;
/**
* Simple utility for getting the bounds of the browser viewport.
* \@docs-private
*/
var ViewportRuler = /** @class */ (function () {
function ViewportRuler(_platform, ngZone) {
var _this = this;
this._platform = _platform;
ngZone.runOutsideAngular(function () {
_this._change = _platform.isBrowser ?
Object(rxjs__WEBPACK_IMPORTED_MODULE_2__["merge"])(Object(rxjs__WEBPACK_IMPORTED_MODULE_2__["fromEvent"])(window, 'resize'), Object(rxjs__WEBPACK_IMPORTED_MODULE_2__["fromEvent"])(window, 'orientationchange')) :
Object(rxjs__WEBPACK_IMPORTED_MODULE_2__["of"])();
// Note that we need to do the subscription inside `runOutsideAngular`
// since subscribing is what causes the event listener to be added.
_this._invalidateCache = _this.change().subscribe(function () { return _this._updateViewportSize(); });
});
}
/**
* @return {?}
*/
ViewportRuler.prototype.ngOnDestroy = /**
* @return {?}
*/
function () {
this._invalidateCache.unsubscribe();
};
/** Returns the viewport's width and height. */
/**
* Returns the viewport's width and height.
* @return {?}
*/
ViewportRuler.prototype.getViewportSize = /**
* Returns the viewport's width and height.
* @return {?}
*/
function () {
if (!this._viewportSize) {
this._updateViewportSize();
}
/** @type {?} */
var output = { width: this._viewportSize.width, height: this._viewportSize.height };
// If we're not on a browser, don't cache the size since it'll be mocked out anyway.
if (!this._platform.isBrowser) {
this._viewportSize = (/** @type {?} */ (null));
}
return output;
};
/** Gets a ClientRect for the viewport's bounds. */
/**
* Gets a ClientRect for the viewport's bounds.
* @return {?}
*/
ViewportRuler.prototype.getViewportRect = /**
* Gets a ClientRect for the viewport's bounds.
* @return {?}
*/
function () {
// Use the document element's bounding rect rather than the window scroll properties
// (e.g. pageYOffset, scrollY) due to in issue in Chrome and IE where window scroll
// properties and client coordinates (boundingClientRect, clientX/Y, etc.) are in different
// conceptual viewports. Under most circumstances these viewports are equivalent, but they
// can disagree when the page is pinch-zoomed (on devices that support touch).
// See https://bugs.chromium.org/p/chromium/issues/detail?id=489206#c4
// We use the documentElement instead of the body because, by default (without a css reset)
// browsers typically give the document body an 8px margin, which is not included in
// getBoundingClientRect().
/** @type {?} */
var scrollPosition = this.getViewportScrollPosition();
var _a = this.getViewportSize(), width = _a.width, height = _a.height;
return {
top: scrollPosition.top,
left: scrollPosition.left,
bottom: scrollPosition.top + height,
right: scrollPosition.left + width,
height: height,
width: width,
};
};
/** Gets the (top, left) scroll position of the viewport. */
/**
* Gets the (top, left) scroll position of the viewport.
* @return {?}
*/
ViewportRuler.prototype.getViewportScrollPosition = /**
* Gets the (top, left) scroll position of the viewport.
* @return {?}
*/
function () {
// While we can get a reference to the fake document
// during SSR, it doesn't have getBoundingClientRect.
if (!this._platform.isBrowser) {
return { top: 0, left: 0 };
}
// The top-left-corner of the viewport is determined by the scroll position of the document
// body, normally just (scrollLeft, scrollTop). However, Chrome and Firefox disagree about
// whether `document.body` or `document.documentElement` is the scrolled element, so reading
// `scrollTop` and `scrollLeft` is inconsistent. However, using the bounding rect of
// `document.documentElement` works consistently, where the `top` and `left` values will
// equal negative the scroll position.
/** @type {?} */
var documentElement = (/** @type {?} */ (document.documentElement));
/** @type {?} */
var documentRect = documentElement.getBoundingClientRect();
/** @type {?} */
var top = -documentRect.top || document.body.scrollTop || window.scrollY ||
documentElement.scrollTop || 0;
/** @type {?} */
var left = -documentRect.left || document.body.scrollLeft || window.scrollX ||
documentElement.scrollLeft || 0;
return { top: top, left: left };
};
/**
* Returns a stream that emits whenever the size of the viewport changes.
* @param throttleTime Time in milliseconds to throttle the stream.
*/
/**
* Returns a stream that emits whenever the size of the viewport changes.
* @param {?=} throttleTime Time in milliseconds to throttle the stream.
* @return {?}
*/
ViewportRuler.prototype.change = /**
* Returns a stream that emits whenever the size of the viewport changes.
* @param {?=} throttleTime Time in milliseconds to throttle the stream.
* @return {?}
*/
function (throttleTime) {
if (throttleTime === void 0) { throttleTime = DEFAULT_RESIZE_TIME; }
return throttleTime > 0 ? this._change.pipe(Object(rxjs_operators__WEBPACK_IMPORTED_MODULE_3__["auditTime"])(throttleTime)) : this._change;
};
/** Updates the cached viewport size. */
/**
* Updates the cached viewport size.
* @private
* @return {?}
*/
ViewportRuler.prototype._updateViewportSize = /**
* Updates the cached viewport size.
* @private
* @return {?}
*/
function () {
this._viewportSize = this._platform.isBrowser ?
{ width: window.innerWidth, height: window.innerHeight } :
{ width: 0, height: 0 };
};
ViewportRuler.decorators = [
{ type: _angular_core__WEBPACK_IMPORTED_MODULE_0__["Injectable"], args: [{ providedIn: 'root' },] },
];
/** @nocollapse */
ViewportRuler.ctorParameters = function () { return [
{ type: _angular_cdk_platform__WEBPACK_IMPORTED_MODULE_4__["Platform"] },
{ type: _angular_core__WEBPACK_IMPORTED_MODULE_0__["NgZone"] }
]; };
/** @nocollapse */ ViewportRuler.ngInjectableDef = Object(_angular_core__WEBPACK_IMPORTED_MODULE_0__["defineInjectable"])({ factory: function ViewportRuler_Factory() { return new ViewportRuler(Object(_angular_core__WEBPACK_IMPORTED_MODULE_0__["inject"])(_angular_cdk_platform__WEBPACK_IMPORTED_MODULE_4__["Platform"]), Object(_angular_core__WEBPACK_IMPORTED_MODULE_0__["inject"])(_angular_core__WEBPACK_IMPORTED_MODULE_0__["NgZone"])); }, token: ViewportRuler, providedIn: "root" });
return ViewportRuler;
}());
/**
* \@docs-private \@deprecated \@breaking-change 8.0.0
* @param {?} parentRuler
* @param {?} platform
* @param {?} ngZone
* @return {?}
*/
function VIEWPORT_RULER_PROVIDER_FACTORY(parentRuler, platform, ngZone) {
return parentRuler || new ViewportRuler(platform, ngZone);
}
/**
* \@docs-private \@deprecated \@breaking-change 8.0.0
* @type {?}
*/
var VIEWPORT_RULER_PROVIDER = {
// If there is already a ViewportRuler available, use that. Otherwise, provide a new one.
provide: ViewportRuler,
deps: [[new _angular_core__WEBPACK_IMPORTED_MODULE_0__["Optional"](), new _angular_core__WEBPACK_IMPORTED_MODULE_0__["SkipSelf"](), ViewportRuler], _angular_cdk_platform__WEBPACK_IMPORTED_MODULE_4__["Platform"], _angular_core__WEBPACK_IMPORTED_MODULE_0__["NgZone"]],
useFactory: VIEWPORT_RULER_PROVIDER_FACTORY
};
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
//# sourceMappingURL=scrolling.es5.js.map
/***/ }),
/***/ "./node_modules/@angular/cdk/esm5/stepper.es5.js":
/*!*******************************************************!*\
!*** ./node_modules/@angular/cdk/esm5/stepper.es5.js ***!
\*******************************************************/
/*! exports provided: StepperSelectionEvent, STEP_STATE, STEPPER_GLOBAL_OPTIONS, MAT_STEPPER_GLOBAL_OPTIONS, CdkStep, CdkStepper, CdkStepLabel, CdkStepperNext, CdkStepperPrevious, CdkStepperModule, CdkStepHeader */
/***/ (function(module, __webpack_exports__, __webpack_require__) {
"use strict";
__webpack_require__.r(__webpack_exports__);
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "StepperSelectionEvent", function() { return StepperSelectionEvent; });
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "STEP_STATE", function() { return STEP_STATE; });
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "STEPPER_GLOBAL_OPTIONS", function() { return STEPPER_GLOBAL_OPTIONS; });
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "MAT_STEPPER_GLOBAL_OPTIONS", function() { return MAT_STEPPER_GLOBAL_OPTIONS; });
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "CdkStep", function() { return CdkStep; });
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "CdkStepper", function() { return CdkStepper; });
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "CdkStepLabel", function() { return CdkStepLabel; });
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "CdkStepperNext", function() { return CdkStepperNext; });
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "CdkStepperPrevious", function() { return CdkStepperPrevious; });
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "CdkStepperModule", function() { return CdkStepperModule; });
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "CdkStepHeader", function() { return CdkStepHeader; });
/* harmony import */ var _angular_core__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @angular/core */ "./node_modules/@angular/core/fesm5/core.js");
/* harmony import */ var _angular_cdk_a11y__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! @angular/cdk/a11y */ "./node_modules/@angular/cdk/esm5/a11y.es5.js");
/* harmony import */ var _angular_cdk_bidi__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! @angular/cdk/bidi */ "./node_modules/@angular/cdk/esm5/bidi.es5.js");
/* harmony import */ var _angular_cdk_coercion__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! @angular/cdk/coercion */ "./node_modules/@angular/cdk/esm5/coercion.es5.js");
/* harmony import */ var _angular_cdk_keycodes__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! @angular/cdk/keycodes */ "./node_modules/@angular/cdk/esm5/keycodes.es5.js");
/* harmony import */ var _angular_common__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! @angular/common */ "./node_modules/@angular/common/fesm5/common.js");
/* harmony import */ var rxjs__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! rxjs */ "./node_modules/rxjs/_esm5/index.js");
/* harmony import */ var rxjs_operators__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! rxjs/operators */ "./node_modules/rxjs/_esm5/operators/index.js");
/**
* @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
*/
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
var CdkStepLabel = /** @class */ (function () {
function CdkStepLabel(/** @docs-private */ template) {
this.template = template;
}
CdkStepLabel.decorators = [
{ type: _angular_core__WEBPACK_IMPORTED_MODULE_0__["Directive"], args: [{
selector: '[cdkStepLabel]',
},] },
];
/** @nocollapse */
CdkStepLabel.ctorParameters = function () { return [
{ type: _angular_core__WEBPACK_IMPORTED_MODULE_0__["TemplateRef"] }
]; };
return CdkStepLabel;
}());
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
var CdkStepHeader = /** @class */ (function () {
function CdkStepHeader(_elementRef) {
this._elementRef = _elementRef;
}
/** Focuses the step header. */
/**
* Focuses the step header.
* @return {?}
*/
CdkStepHeader.prototype.focus = /**
* Focuses the step header.
* @return {?}
*/
function () {
this._elementRef.nativeElement.focus();
};
CdkStepHeader.decorators = [
{ type: _angular_core__WEBPACK_IMPORTED_MODULE_0__["Directive"], args: [{
selector: '[cdkStepHeader]',
host: {
'role': 'tab',
},
},] },
];
/** @nocollapse */
CdkStepHeader.ctorParameters = function () { return [
{ type: _angular_core__WEBPACK_IMPORTED_MODULE_0__["ElementRef"] }
]; };
return CdkStepHeader;
}());
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/**
* Used to generate unique ID for each stepper component.
* @type {?}
*/
var nextId = 0;
/**
* Change event emitted on selection changes.
*/
var /**
* Change event emitted on selection changes.
*/
StepperSelectionEvent = /** @class */ (function () {
function StepperSelectionEvent() {
}
return StepperSelectionEvent;
}());
/**
* Enum to represent the different states of the steps.
* @type {?}
*/
var STEP_STATE = {
NUMBER: 'number',
EDIT: 'edit',
DONE: 'done',
ERROR: 'error'
};
/**
* InjectionToken that can be used to specify the global stepper options.
* @type {?}
*/
var STEPPER_GLOBAL_OPTIONS = new _angular_core__WEBPACK_IMPORTED_MODULE_0__["InjectionToken"]('STEPPER_GLOBAL_OPTIONS');
/**
* InjectionToken that can be used to specify the global stepper options.
* @deprecated Use `STEPPER_GLOBAL_OPTIONS` instead.
* \@breaking-change 8.0.0.
* @type {?}
*/
var MAT_STEPPER_GLOBAL_OPTIONS = STEPPER_GLOBAL_OPTIONS;
var CdkStep = /** @class */ (function () {
/** @breaking-change 8.0.0 remove the `?` after `stepperOptions` */
function CdkStep(_stepper, stepperOptions) {
this._stepper = _stepper;
/**
* Whether user has seen the expanded step content or not.
*/
this.interacted = false;
this._editable = true;
this._optional = false;
this._customCompleted = null;
this._customError = null;
this._stepperOptions = stepperOptions ? stepperOptions : {};
this._displayDefaultIndicatorType = this._stepperOptions.displayDefaultIndicatorType !== false;
this._showError = !!this._stepperOptions.showError;
}
Object.defineProperty(CdkStep.prototype, "editable", {
/** Whether the user can return to this step once it has been marked as completed. */
get: /**
* Whether the user can return to this step once it has been marked as completed.
* @return {?}
*/
function () { return this._editable; },
set: /**
* @param {?} value
* @return {?}
*/
function (value) {
this._editable = Object(_angular_cdk_coercion__WEBPACK_IMPORTED_MODULE_3__["coerceBooleanProperty"])(value);
},
enumerable: true,
configurable: true
});
Object.defineProperty(CdkStep.prototype, "optional", {
/** Whether the completion of step is optional. */
get: /**
* Whether the completion of step is optional.
* @return {?}
*/
function () { return this._optional; },
set: /**
* @param {?} value
* @return {?}
*/
function (value) {
this._optional = Object(_angular_cdk_coercion__WEBPACK_IMPORTED_MODULE_3__["coerceBooleanProperty"])(value);
},
enumerable: true,
configurable: true
});
Object.defineProperty(CdkStep.prototype, "completed", {
/** Whether step is marked as completed. */
get: /**
* Whether step is marked as completed.
* @return {?}
*/
function () {
return this._customCompleted == null ? this._getDefaultCompleted() : this._customCompleted;
},
set: /**
* @param {?} value
* @return {?}
*/
function (value) {
this._customCompleted = Object(_angular_cdk_coercion__WEBPACK_IMPORTED_MODULE_3__["coerceBooleanProperty"])(value);
},
enumerable: true,
configurable: true
});
/**
* @private
* @return {?}
*/
CdkStep.prototype._getDefaultCompleted = /**
* @private
* @return {?}
*/
function () {
return this.stepControl ? this.stepControl.valid && this.interacted : this.interacted;
};
Object.defineProperty(CdkStep.prototype, "hasError", {
/** Whether step has an error. */
get: /**
* Whether step has an error.
* @return {?}
*/
function () {
return this._customError == null ? this._getDefaultError() : this._customError;
},
set: /**
* @param {?} value
* @return {?}
*/
function (value) {
this._customError = Object(_angular_cdk_coercion__WEBPACK_IMPORTED_MODULE_3__["coerceBooleanProperty"])(value);
},
enumerable: true,
configurable: true
});
/**
* @private
* @return {?}
*/
CdkStep.prototype._getDefaultError = /**
* @private
* @return {?}
*/
function () {
return this.stepControl && this.stepControl.invalid && this.interacted;
};
/** Selects this step component. */
/**
* Selects this step component.
* @return {?}
*/
CdkStep.prototype.select = /**
* Selects this step component.
* @return {?}
*/
function () {
this._stepper.selected = this;
};
/** Resets the step to its initial state. Note that this includes resetting form data. */
/**
* Resets the step to its initial state. Note that this includes resetting form data.
* @return {?}
*/
CdkStep.prototype.reset = /**
* Resets the step to its initial state. Note that this includes resetting form data.
* @return {?}
*/
function () {
this.interacted = false;
if (this._customCompleted != null) {
this._customCompleted = false;
}
if (this._customError != null) {
this._customError = false;
}
if (this.stepControl) {
this.stepControl.reset();
}
};
/**
* @return {?}
*/
CdkStep.prototype.ngOnChanges = /**
* @return {?}
*/
function () {
// Since basically all inputs of the MatStep get proxied through the view down to the
// underlying MatStepHeader, we have to make sure that change detection runs correctly.
this._stepper._stateChanged();
};
CdkStep.decorators = [
{ type: _angular_core__WEBPACK_IMPORTED_MODULE_0__["Component"], args: [{selector: 'cdk-step',
exportAs: 'cdkStep',
template: '
',
encapsulation: _angular_core__WEBPACK_IMPORTED_MODULE_0__["ViewEncapsulation"].None,
changeDetection: _angular_core__WEBPACK_IMPORTED_MODULE_0__["ChangeDetectionStrategy"].OnPush,
},] },
];
/** @nocollapse */
CdkStep.ctorParameters = function () { return [
{ type: CdkStepper, decorators: [{ type: _angular_core__WEBPACK_IMPORTED_MODULE_0__["Inject"], args: [Object(_angular_core__WEBPACK_IMPORTED_MODULE_0__["forwardRef"])(function () { return CdkStepper; }),] }] },
{ type: undefined, decorators: [{ type: _angular_core__WEBPACK_IMPORTED_MODULE_0__["Optional"] }, { type: _angular_core__WEBPACK_IMPORTED_MODULE_0__["Inject"], args: [STEPPER_GLOBAL_OPTIONS,] }] }
]; };
CdkStep.propDecorators = {
stepLabel: [{ type: _angular_core__WEBPACK_IMPORTED_MODULE_0__["ContentChild"], args: [CdkStepLabel,] }],
content: [{ type: _angular_core__WEBPACK_IMPORTED_MODULE_0__["ViewChild"], args: [_angular_core__WEBPACK_IMPORTED_MODULE_0__["TemplateRef"],] }],
stepControl: [{ type: _angular_core__WEBPACK_IMPORTED_MODULE_0__["Input"] }],
label: [{ type: _angular_core__WEBPACK_IMPORTED_MODULE_0__["Input"] }],
errorMessage: [{ type: _angular_core__WEBPACK_IMPORTED_MODULE_0__["Input"] }],
ariaLabel: [{ type: _angular_core__WEBPACK_IMPORTED_MODULE_0__["Input"], args: ['aria-label',] }],
ariaLabelledby: [{ type: _angular_core__WEBPACK_IMPORTED_MODULE_0__["Input"], args: ['aria-labelledby',] }],
state: [{ type: _angular_core__WEBPACK_IMPORTED_MODULE_0__["Input"] }],
editable: [{ type: _angular_core__WEBPACK_IMPORTED_MODULE_0__["Input"] }],
optional: [{ type: _angular_core__WEBPACK_IMPORTED_MODULE_0__["Input"] }],
completed: [{ type: _angular_core__WEBPACK_IMPORTED_MODULE_0__["Input"] }],
hasError: [{ type: _angular_core__WEBPACK_IMPORTED_MODULE_0__["Input"] }]
};
return CdkStep;
}());
var CdkStepper = /** @class */ (function () {
function CdkStepper(_dir, _changeDetectorRef, _elementRef, _document) {
this._dir = _dir;
this._changeDetectorRef = _changeDetectorRef;
this._elementRef = _elementRef;
/**
* Emits when the component is destroyed.
*/
this._destroyed = new rxjs__WEBPACK_IMPORTED_MODULE_6__["Subject"]();
this._linear = false;
this._selectedIndex = 0;
/**
* Event emitted when the selected step has changed.
*/
this.selectionChange = new _angular_core__WEBPACK_IMPORTED_MODULE_0__["EventEmitter"]();
this._orientation = 'horizontal';
this._groupId = nextId++;
this._document = _document;
}
Object.defineProperty(CdkStepper.prototype, "steps", {
/** The list of step components that the stepper is holding. */
get: /**
* The list of step components that the stepper is holding.
* @return {?}
*/
function () {
return this._steps;
},
enumerable: true,
configurable: true
});
Object.defineProperty(CdkStepper.prototype, "linear", {
/** Whether the validity of previous steps should be checked or not. */
get: /**
* Whether the validity of previous steps should be checked or not.
* @return {?}
*/
function () { return this._linear; },
set: /**
* @param {?} value
* @return {?}
*/
function (value) { this._linear = Object(_angular_cdk_coercion__WEBPACK_IMPORTED_MODULE_3__["coerceBooleanProperty"])(value); },
enumerable: true,
configurable: true
});
Object.defineProperty(CdkStepper.prototype, "selectedIndex", {
/** The index of the selected step. */
get: /**
* The index of the selected step.
* @return {?}
*/
function () { return this._selectedIndex; },
set: /**
* @param {?} index
* @return {?}
*/
function (index) {
/** @type {?} */
var newIndex = Object(_angular_cdk_coercion__WEBPACK_IMPORTED_MODULE_3__["coerceNumberProperty"])(index);
if (this.steps) {
// Ensure that the index can't be out of bounds.
if (newIndex < 0 || newIndex > this.steps.length - 1) {
throw Error('cdkStepper: Cannot assign out-of-bounds value to `selectedIndex`.');
}
if (this._selectedIndex != newIndex &&
!this._anyControlsInvalidOrPending(newIndex) &&
(newIndex >= this._selectedIndex || this.steps.toArray()[newIndex].editable)) {
this._updateSelectedItemIndex(index);
}
}
else {
this._selectedIndex = newIndex;
}
},
enumerable: true,
configurable: true
});
Object.defineProperty(CdkStepper.prototype, "selected", {
/** The step that is selected. */
get: /**
* The step that is selected.
* @return {?}
*/
function () {
// @breaking-change 8.0.0 Change return type to `CdkStep | undefined`.
return this.steps ? this.steps.toArray()[this.selectedIndex] : (/** @type {?} */ (undefined));
},
set: /**
* @param {?} step
* @return {?}
*/
function (step) {
this.selectedIndex = this.steps ? this.steps.toArray().indexOf(step) : -1;
},
enumerable: true,
configurable: true
});
/**
* @return {?}
*/
CdkStepper.prototype.ngAfterViewInit = /**
* @return {?}
*/
function () {
var _this = this;
// Note that while the step headers are content children by default, any components that
// extend this one might have them as view chidren. We initialize the keyboard handling in
// AfterViewInit so we're guaranteed for both view and content children to be defined.
this._keyManager = new _angular_cdk_a11y__WEBPACK_IMPORTED_MODULE_1__["FocusKeyManager"](this._stepHeader)
.withWrap()
.withVerticalOrientation(this._orientation === 'vertical');
(this._dir ? (/** @type {?} */ (this._dir.change)) : Object(rxjs__WEBPACK_IMPORTED_MODULE_6__["of"])())
.pipe(Object(rxjs_operators__WEBPACK_IMPORTED_MODULE_7__["startWith"])(this._layoutDirection()), Object(rxjs_operators__WEBPACK_IMPORTED_MODULE_7__["takeUntil"])(this._destroyed))
.subscribe(function (direction) { return _this._keyManager.withHorizontalOrientation(direction); });
this._keyManager.updateActiveItemIndex(this._selectedIndex);
this.steps.changes.pipe(Object(rxjs_operators__WEBPACK_IMPORTED_MODULE_7__["takeUntil"])(this._destroyed)).subscribe(function () {
if (!_this.selected) {
_this._selectedIndex = Math.max(_this._selectedIndex - 1, 0);
}
});
};
/**
* @return {?}
*/
CdkStepper.prototype.ngOnDestroy = /**
* @return {?}
*/
function () {
this._destroyed.next();
this._destroyed.complete();
};
/** Selects and focuses the next step in list. */
/**
* Selects and focuses the next step in list.
* @return {?}
*/
CdkStepper.prototype.next = /**
* Selects and focuses the next step in list.
* @return {?}
*/
function () {
this.selectedIndex = Math.min(this._selectedIndex + 1, this.steps.length - 1);
};
/** Selects and focuses the previous step in list. */
/**
* Selects and focuses the previous step in list.
* @return {?}
*/
CdkStepper.prototype.previous = /**
* Selects and focuses the previous step in list.
* @return {?}
*/
function () {
this.selectedIndex = Math.max(this._selectedIndex - 1, 0);
};
/** Resets the stepper to its initial state. Note that this includes clearing form data. */
/**
* Resets the stepper to its initial state. Note that this includes clearing form data.
* @return {?}
*/
CdkStepper.prototype.reset = /**
* Resets the stepper to its initial state. Note that this includes clearing form data.
* @return {?}
*/
function () {
this._updateSelectedItemIndex(0);
this.steps.forEach(function (step) { return step.reset(); });
this._stateChanged();
};
/** Returns a unique id for each step label element. */
/**
* Returns a unique id for each step label element.
* @param {?} i
* @return {?}
*/
CdkStepper.prototype._getStepLabelId = /**
* Returns a unique id for each step label element.
* @param {?} i
* @return {?}
*/
function (i) {
return "cdk-step-label-" + this._groupId + "-" + i;
};
/** Returns unique id for each step content element. */
/**
* Returns unique id for each step content element.
* @param {?} i
* @return {?}
*/
CdkStepper.prototype._getStepContentId = /**
* Returns unique id for each step content element.
* @param {?} i
* @return {?}
*/
function (i) {
return "cdk-step-content-" + this._groupId + "-" + i;
};
/** Marks the component to be change detected. */
/**
* Marks the component to be change detected.
* @return {?}
*/
CdkStepper.prototype._stateChanged = /**
* Marks the component to be change detected.
* @return {?}
*/
function () {
this._changeDetectorRef.markForCheck();
};
/** Returns position state of the step with the given index. */
/**
* Returns position state of the step with the given index.
* @param {?} index
* @return {?}
*/
CdkStepper.prototype._getAnimationDirection = /**
* Returns position state of the step with the given index.
* @param {?} index
* @return {?}
*/
function (index) {
/** @type {?} */
var position = index - this._selectedIndex;
if (position < 0) {
return this._layoutDirection() === 'rtl' ? 'next' : 'previous';
}
else if (position > 0) {
return this._layoutDirection() === 'rtl' ? 'previous' : 'next';
}
return 'current';
};
/** Returns the type of icon to be displayed. */
/**
* Returns the type of icon to be displayed.
* @param {?} index
* @param {?=} state
* @return {?}
*/
CdkStepper.prototype._getIndicatorType = /**
* Returns the type of icon to be displayed.
* @param {?} index
* @param {?=} state
* @return {?}
*/
function (index, state) {
if (state === void 0) { state = STEP_STATE.NUMBER; }
/** @type {?} */
var step = this.steps.toArray()[index];
/** @type {?} */
var isCurrentStep = this._isCurrentStep(index);
return step._displayDefaultIndicatorType
? this._getDefaultIndicatorLogic(step, isCurrentStep)
: this._getGuidelineLogic(step, isCurrentStep, state);
};
/**
* @private
* @param {?} step
* @param {?} isCurrentStep
* @return {?}
*/
CdkStepper.prototype._getDefaultIndicatorLogic = /**
* @private
* @param {?} step
* @param {?} isCurrentStep
* @return {?}
*/
function (step, isCurrentStep) {
if (step._showError && step.hasError && !isCurrentStep) {
return STEP_STATE.ERROR;
}
else if (!step.completed || isCurrentStep) {
return STEP_STATE.NUMBER;
}
else {
return step.editable ? STEP_STATE.EDIT : STEP_STATE.DONE;
}
};
/**
* @private
* @param {?} step
* @param {?} isCurrentStep
* @param {?=} state
* @return {?}
*/
CdkStepper.prototype._getGuidelineLogic = /**
* @private
* @param {?} step
* @param {?} isCurrentStep
* @param {?=} state
* @return {?}
*/
function (step, isCurrentStep, state) {
if (state === void 0) { state = STEP_STATE.NUMBER; }
if (step._showError && step.hasError && !isCurrentStep) {
return STEP_STATE.ERROR;
}
else if (step.completed && !isCurrentStep) {
return STEP_STATE.DONE;
}
else if (step.completed && isCurrentStep) {
return state;
}
else if (step.editable && isCurrentStep) {
return STEP_STATE.EDIT;
}
else {
return state;
}
};
/**
* @private
* @param {?} index
* @return {?}
*/
CdkStepper.prototype._isCurrentStep = /**
* @private
* @param {?} index
* @return {?}
*/
function (index) {
return this._selectedIndex === index;
};
/** Returns the index of the currently-focused step header. */
/**
* Returns the index of the currently-focused step header.
* @return {?}
*/
CdkStepper.prototype._getFocusIndex = /**
* Returns the index of the currently-focused step header.
* @return {?}
*/
function () {
return this._keyManager ? this._keyManager.activeItemIndex : this._selectedIndex;
};
/**
* @private
* @param {?} newIndex
* @return {?}
*/
CdkStepper.prototype._updateSelectedItemIndex = /**
* @private
* @param {?} newIndex
* @return {?}
*/
function (newIndex) {
/** @type {?} */
var stepsArray = this.steps.toArray();
this.selectionChange.emit({
selectedIndex: newIndex,
previouslySelectedIndex: this._selectedIndex,
selectedStep: stepsArray[newIndex],
previouslySelectedStep: stepsArray[this._selectedIndex],
});
// If focus is inside the stepper, move it to the next header, otherwise it may become
// lost when the active step content is hidden. We can't be more granular with the check
// (e.g. checking whether focus is inside the active step), because we don't have a
// reference to the elements that are rendering out the content.
this._containsFocus() ? this._keyManager.setActiveItem(newIndex) :
this._keyManager.updateActiveItemIndex(newIndex);
this._selectedIndex = newIndex;
this._stateChanged();
};
/**
* @param {?} event
* @return {?}
*/
CdkStepper.prototype._onKeydown = /**
* @param {?} event
* @return {?}
*/
function (event) {
/** @type {?} */
var hasModifier = Object(_angular_cdk_keycodes__WEBPACK_IMPORTED_MODULE_4__["hasModifierKey"])(event);
/** @type {?} */
var keyCode = event.keyCode;
/** @type {?} */
var manager = this._keyManager;
if (manager.activeItemIndex != null && !hasModifier &&
(keyCode === _angular_cdk_keycodes__WEBPACK_IMPORTED_MODULE_4__["SPACE"] || keyCode === _angular_cdk_keycodes__WEBPACK_IMPORTED_MODULE_4__["ENTER"])) {
this.selectedIndex = manager.activeItemIndex;
event.preventDefault();
}
else if (keyCode === _angular_cdk_keycodes__WEBPACK_IMPORTED_MODULE_4__["HOME"]) {
manager.setFirstItemActive();
event.preventDefault();
}
else if (keyCode === _angular_cdk_keycodes__WEBPACK_IMPORTED_MODULE_4__["END"]) {
manager.setLastItemActive();
event.preventDefault();
}
else {
manager.onKeydown(event);
}
};
/**
* @private
* @param {?} index
* @return {?}
*/
CdkStepper.prototype._anyControlsInvalidOrPending = /**
* @private
* @param {?} index
* @return {?}
*/
function (index) {
/** @type {?} */
var steps = this.steps.toArray();
steps[this._selectedIndex].interacted = true;
if (this._linear && index >= 0) {
return steps.slice(0, index).some(function (step) {
/** @type {?} */
var control = step.stepControl;
/** @type {?} */
var isIncomplete = control ?
(control.invalid || control.pending || !step.interacted) :
!step.completed;
return isIncomplete && !step.optional;
});
}
return false;
};
/**
* @private
* @return {?}
*/
CdkStepper.prototype._layoutDirection = /**
* @private
* @return {?}
*/
function () {
return this._dir && this._dir.value === 'rtl' ? 'rtl' : 'ltr';
};
/** Checks whether the stepper contains the focused element. */
/**
* Checks whether the stepper contains the focused element.
* @private
* @return {?}
*/
CdkStepper.prototype._containsFocus = /**
* Checks whether the stepper contains the focused element.
* @private
* @return {?}
*/
function () {
if (!this._document || !this._elementRef) {
return false;
}
/** @type {?} */
var stepperElement = this._elementRef.nativeElement;
/** @type {?} */
var focusedElement = this._document.activeElement;
return stepperElement === focusedElement || stepperElement.contains(focusedElement);
};
CdkStepper.decorators = [
{ type: _angular_core__WEBPACK_IMPORTED_MODULE_0__["Directive"], args: [{
selector: '[cdkStepper]',
exportAs: 'cdkStepper',
},] },
];
/** @nocollapse */
CdkStepper.ctorParameters = function () { return [
{ type: _angular_cdk_bidi__WEBPACK_IMPORTED_MODULE_2__["Directionality"], decorators: [{ type: _angular_core__WEBPACK_IMPORTED_MODULE_0__["Optional"] }] },
{ type: _angular_core__WEBPACK_IMPORTED_MODULE_0__["ChangeDetectorRef"] },
{ type: _angular_core__WEBPACK_IMPORTED_MODULE_0__["ElementRef"] },
{ type: undefined, decorators: [{ type: _angular_core__WEBPACK_IMPORTED_MODULE_0__["Inject"], args: [_angular_common__WEBPACK_IMPORTED_MODULE_5__["DOCUMENT"],] }] }
]; };
CdkStepper.propDecorators = {
_steps: [{ type: _angular_core__WEBPACK_IMPORTED_MODULE_0__["ContentChildren"], args: [CdkStep,] }],
_stepHeader: [{ type: _angular_core__WEBPACK_IMPORTED_MODULE_0__["ContentChildren"], args: [CdkStepHeader,] }],
linear: [{ type: _angular_core__WEBPACK_IMPORTED_MODULE_0__["Input"] }],
selectedIndex: [{ type: _angular_core__WEBPACK_IMPORTED_MODULE_0__["Input"] }],
selected: [{ type: _angular_core__WEBPACK_IMPORTED_MODULE_0__["Input"] }],
selectionChange: [{ type: _angular_core__WEBPACK_IMPORTED_MODULE_0__["Output"] }]
};
return CdkStepper;
}());
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/**
* Button that moves to the next step in a stepper workflow.
*/
var CdkStepperNext = /** @class */ (function () {
function CdkStepperNext(_stepper) {
this._stepper = _stepper;
/**
* Type of the next button. Defaults to "submit" if not specified.
*/
this.type = 'submit';
}
CdkStepperNext.decorators = [
{ type: _angular_core__WEBPACK_IMPORTED_MODULE_0__["Directive"], args: [{
selector: 'button[cdkStepperNext]',
host: {
'(click)': '_stepper.next()',
'[type]': 'type',
}
},] },
];
/** @nocollapse */
CdkStepperNext.ctorParameters = function () { return [
{ type: CdkStepper }
]; };
CdkStepperNext.propDecorators = {
type: [{ type: _angular_core__WEBPACK_IMPORTED_MODULE_0__["Input"] }]
};
return CdkStepperNext;
}());
/**
* Button that moves to the previous step in a stepper workflow.
*/
var CdkStepperPrevious = /** @class */ (function () {
function CdkStepperPrevious(_stepper) {
this._stepper = _stepper;
/**
* Type of the previous button. Defaults to "button" if not specified.
*/
this.type = 'button';
}
CdkStepperPrevious.decorators = [
{ type: _angular_core__WEBPACK_IMPORTED_MODULE_0__["Directive"], args: [{
selector: 'button[cdkStepperPrevious]',
host: {
'(click)': '_stepper.previous()',
'[type]': 'type',
}
},] },
];
/** @nocollapse */
CdkStepperPrevious.ctorParameters = function () { return [
{ type: CdkStepper }
]; };
CdkStepperPrevious.propDecorators = {
type: [{ type: _angular_core__WEBPACK_IMPORTED_MODULE_0__["Input"] }]
};
return CdkStepperPrevious;
}());
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
var CdkStepperModule = /** @class */ (function () {
function CdkStepperModule() {
}
CdkStepperModule.decorators = [
{ type: _angular_core__WEBPACK_IMPORTED_MODULE_0__["NgModule"], args: [{
imports: [_angular_cdk_bidi__WEBPACK_IMPORTED_MODULE_2__["BidiModule"], _angular_common__WEBPACK_IMPORTED_MODULE_5__["CommonModule"]],
exports: [
CdkStep,
CdkStepper,
CdkStepHeader,
CdkStepLabel,
CdkStepperNext,
CdkStepperPrevious,
],
declarations: [
CdkStep,
CdkStepper,
CdkStepHeader,
CdkStepLabel,
CdkStepperNext,
CdkStepperPrevious,
]
},] },
];
return CdkStepperModule;
}());
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
//# sourceMappingURL=stepper.es5.js.map
/***/ }),
/***/ "./node_modules/@angular/cdk/esm5/table.es5.js":
/*!*****************************************************!*\
!*** ./node_modules/@angular/cdk/esm5/table.es5.js ***!
\*****************************************************/
/*! exports provided: DataSource, DataRowOutlet, HeaderRowOutlet, FooterRowOutlet, CDK_TABLE_TEMPLATE, CdkTable, CdkCellDef, CdkHeaderCellDef, CdkFooterCellDef, CdkColumnDefBase, _CdkColumnDefBase, CdkColumnDef, BaseCdkCell, CdkHeaderCell, CdkFooterCell, CdkCell, CDK_ROW_TEMPLATE, BaseRowDef, CdkHeaderRowDefBase, _CdkHeaderRowDefBase, CdkHeaderRowDef, CdkFooterRowDefBase, _CdkFooterRowDefBase, CdkFooterRowDef, CdkRowDef, CdkCellOutlet, CdkHeaderRow, CdkFooterRow, CdkRow, CdkTableModule, STICKY_DIRECTIONS, StickyStyler, mixinHasStickyInput */
/***/ (function(module, __webpack_exports__, __webpack_require__) {
"use strict";
__webpack_require__.r(__webpack_exports__);
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "DataRowOutlet", function() { return DataRowOutlet; });
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "HeaderRowOutlet", function() { return HeaderRowOutlet; });
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "FooterRowOutlet", function() { return FooterRowOutlet; });
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "CDK_TABLE_TEMPLATE", function() { return CDK_TABLE_TEMPLATE; });
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "CdkTable", function() { return CdkTable; });
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "CdkCellDef", function() { return CdkCellDef; });
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "CdkHeaderCellDef", function() { return CdkHeaderCellDef; });
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "CdkFooterCellDef", function() { return CdkFooterCellDef; });
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "CdkColumnDefBase", function() { return CdkColumnDefBase; });
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "_CdkColumnDefBase", function() { return _CdkColumnDefBase; });
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "CdkColumnDef", function() { return CdkColumnDef; });
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "BaseCdkCell", function() { return BaseCdkCell; });
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "CdkHeaderCell", function() { return CdkHeaderCell; });
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "CdkFooterCell", function() { return CdkFooterCell; });
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "CdkCell", function() { return CdkCell; });
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "CDK_ROW_TEMPLATE", function() { return CDK_ROW_TEMPLATE; });
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "BaseRowDef", function() { return BaseRowDef; });
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "CdkHeaderRowDefBase", function() { return CdkHeaderRowDefBase; });
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "_CdkHeaderRowDefBase", function() { return _CdkHeaderRowDefBase; });
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "CdkHeaderRowDef", function() { return CdkHeaderRowDef; });
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "CdkFooterRowDefBase", function() { return CdkFooterRowDefBase; });
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "_CdkFooterRowDefBase", function() { return _CdkFooterRowDefBase; });
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "CdkFooterRowDef", function() { return CdkFooterRowDef; });
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "CdkRowDef", function() { return CdkRowDef; });
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "CdkCellOutlet", function() { return CdkCellOutlet; });
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "CdkHeaderRow", function() { return CdkHeaderRow; });
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "CdkFooterRow", function() { return CdkFooterRow; });
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "CdkRow", function() { return CdkRow; });
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "CdkTableModule", function() { return CdkTableModule; });
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "STICKY_DIRECTIONS", function() { return STICKY_DIRECTIONS; });
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "StickyStyler", function() { return StickyStyler; });
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "mixinHasStickyInput", function() { return mixinHasStickyInput; });
/* harmony import */ var tslib__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! tslib */ "./node_modules/tslib/tslib.es6.js");
/* harmony import */ var _angular_cdk_coercion__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! @angular/cdk/coercion */ "./node_modules/@angular/cdk/esm5/coercion.es5.js");
/* harmony import */ var _angular_core__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! @angular/core */ "./node_modules/@angular/core/fesm5/core.js");
/* harmony import */ var _angular_cdk_collections__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! @angular/cdk/collections */ "./node_modules/@angular/cdk/esm5/collections.es5.js");
/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "DataSource", function() { return _angular_cdk_collections__WEBPACK_IMPORTED_MODULE_3__["DataSource"]; });
/* harmony import */ var _angular_common__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! @angular/common */ "./node_modules/@angular/common/fesm5/common.js");
/* harmony import */ var rxjs__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! rxjs */ "./node_modules/rxjs/_esm5/index.js");
/* harmony import */ var rxjs_operators__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! rxjs/operators */ "./node_modules/rxjs/_esm5/operators/index.js");
/* harmony import */ var _angular_cdk_bidi__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! @angular/cdk/bidi */ "./node_modules/@angular/cdk/esm5/bidi.es5.js");
/* harmony import */ var _angular_cdk_platform__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! @angular/cdk/platform */ "./node_modules/@angular/cdk/esm5/platform.es5.js");
/**
* @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
*/
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/**
* Mixin to provide a directive with a function that checks if the sticky input has been
* changed since the last time the function was called. Essentially adds a dirty-check to the
* sticky value.
* \@docs-private
* @template T
* @param {?} base
* @return {?}
*/
function mixinHasStickyInput(base) {
return /** @class */ (function (_super) {
Object(tslib__WEBPACK_IMPORTED_MODULE_0__["__extends"])(class_1, _super);
function class_1() {
var args = [];
for (var _i = 0; _i < arguments.length; _i++) {
args[_i] = arguments[_i];
}
var _this = _super.apply(this, args) || this;
_this._sticky = false;
/**
* Whether the sticky input has changed since it was last checked.
*/
_this._hasStickyChanged = false;
return _this;
}
Object.defineProperty(class_1.prototype, "sticky", {
/** Whether sticky positioning should be applied. */
get: /**
* Whether sticky positioning should be applied.
* @return {?}
*/
function () { return this._sticky; },
set: /**
* @param {?} v
* @return {?}
*/
function (v) {
/** @type {?} */
var prevValue = this._sticky;
this._sticky = Object(_angular_cdk_coercion__WEBPACK_IMPORTED_MODULE_1__["coerceBooleanProperty"])(v);
this._hasStickyChanged = prevValue !== this._sticky;
},
enumerable: true,
configurable: true
});
/** Whether the sticky value has changed since this was last called. */
/**
* Whether the sticky value has changed since this was last called.
* @return {?}
*/
class_1.prototype.hasStickyChanged = /**
* Whether the sticky value has changed since this was last called.
* @return {?}
*/
function () {
/** @type {?} */
var hasStickyChanged = this._hasStickyChanged;
this._hasStickyChanged = false;
return hasStickyChanged;
};
/** Resets the dirty check for cases where the sticky state has been used without checking. */
/**
* Resets the dirty check for cases where the sticky state has been used without checking.
* @return {?}
*/
class_1.prototype.resetStickyChanged = /**
* Resets the dirty check for cases where the sticky state has been used without checking.
* @return {?}
*/
function () {
this._hasStickyChanged = false;
};
return class_1;
}(base));
}
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/**
* Cell definition for a CDK table.
* Captures the template of a column's data row cell as well as cell-specific properties.
*/
var CdkCellDef = /** @class */ (function () {
function CdkCellDef(/** @docs-private */ template) {
this.template = template;
}
CdkCellDef.decorators = [
{ type: _angular_core__WEBPACK_IMPORTED_MODULE_2__["Directive"], args: [{ selector: '[cdkCellDef]' },] },
];
/** @nocollapse */
CdkCellDef.ctorParameters = function () { return [
{ type: _angular_core__WEBPACK_IMPORTED_MODULE_2__["TemplateRef"] }
]; };
return CdkCellDef;
}());
/**
* Header cell definition for a CDK table.
* Captures the template of a column's header cell and as well as cell-specific properties.
*/
var CdkHeaderCellDef = /** @class */ (function () {
function CdkHeaderCellDef(/** @docs-private */ template) {
this.template = template;
}
CdkHeaderCellDef.decorators = [
{ type: _angular_core__WEBPACK_IMPORTED_MODULE_2__["Directive"], args: [{ selector: '[cdkHeaderCellDef]' },] },
];
/** @nocollapse */
CdkHeaderCellDef.ctorParameters = function () { return [
{ type: _angular_core__WEBPACK_IMPORTED_MODULE_2__["TemplateRef"] }
]; };
return CdkHeaderCellDef;
}());
/**
* Footer cell definition for a CDK table.
* Captures the template of a column's footer cell and as well as cell-specific properties.
*/
var CdkFooterCellDef = /** @class */ (function () {
function CdkFooterCellDef(/** @docs-private */ template) {
this.template = template;
}
CdkFooterCellDef.decorators = [
{ type: _angular_core__WEBPACK_IMPORTED_MODULE_2__["Directive"], args: [{ selector: '[cdkFooterCellDef]' },] },
];
/** @nocollapse */
CdkFooterCellDef.ctorParameters = function () { return [
{ type: _angular_core__WEBPACK_IMPORTED_MODULE_2__["TemplateRef"] }
]; };
return CdkFooterCellDef;
}());
// Boilerplate for applying mixins to CdkColumnDef.
/**
* \@docs-private
*/
var
// Boilerplate for applying mixins to CdkColumnDef.
/**
* \@docs-private
*/
CdkColumnDefBase = /** @class */ (function () {
function CdkColumnDefBase() {
}
return CdkColumnDefBase;
}());
/** @type {?} */
var _CdkColumnDefBase = mixinHasStickyInput(CdkColumnDefBase);
/**
* Column definition for the CDK table.
* Defines a set of cells available for a table column.
*/
var CdkColumnDef = /** @class */ (function (_super) {
Object(tslib__WEBPACK_IMPORTED_MODULE_0__["__extends"])(CdkColumnDef, _super);
function CdkColumnDef() {
var _this = _super !== null && _super.apply(this, arguments) || this;
_this._stickyEnd = false;
return _this;
}
Object.defineProperty(CdkColumnDef.prototype, "name", {
/** Unique name for this column. */
get: /**
* Unique name for this column.
* @return {?}
*/
function () { return this._name; },
set: /**
* @param {?} name
* @return {?}
*/
function (name) {
// If the directive is set without a name (updated programatically), then this setter will
// trigger with an empty string and should not overwrite the programatically set value.
if (!name) {
return;
}
this._name = name;
this.cssClassFriendlyName = name.replace(/[^a-z0-9_-]/ig, '-');
},
enumerable: true,
configurable: true
});
Object.defineProperty(CdkColumnDef.prototype, "stickyEnd", {
/**
* Whether this column should be sticky positioned on the end of the row. Should make sure
* that it mimics the `CanStick` mixin such that `_hasStickyChanged` is set to true if the value
* has been changed.
*/
get: /**
* Whether this column should be sticky positioned on the end of the row. Should make sure
* that it mimics the `CanStick` mixin such that `_hasStickyChanged` is set to true if the value
* has been changed.
* @return {?}
*/
function () { return this._stickyEnd; },
set: /**
* @param {?} v
* @return {?}
*/
function (v) {
/** @type {?} */
var prevValue = this._stickyEnd;
this._stickyEnd = Object(_angular_cdk_coercion__WEBPACK_IMPORTED_MODULE_1__["coerceBooleanProperty"])(v);
this._hasStickyChanged = prevValue !== this._stickyEnd;
},
enumerable: true,
configurable: true
});
CdkColumnDef.decorators = [
{ type: _angular_core__WEBPACK_IMPORTED_MODULE_2__["Directive"], args: [{
selector: '[cdkColumnDef]',
inputs: ['sticky'],
providers: [{
provide: 'MAT_SORT_HEADER_COLUMN_DEF',
useExisting: CdkColumnDef
}],
},] },
];
CdkColumnDef.propDecorators = {
name: [{ type: _angular_core__WEBPACK_IMPORTED_MODULE_2__["Input"], args: ['cdkColumnDef',] }],
stickyEnd: [{ type: _angular_core__WEBPACK_IMPORTED_MODULE_2__["Input"], args: ['stickyEnd',] }],
cell: [{ type: _angular_core__WEBPACK_IMPORTED_MODULE_2__["ContentChild"], args: [CdkCellDef,] }],
headerCell: [{ type: _angular_core__WEBPACK_IMPORTED_MODULE_2__["ContentChild"], args: [CdkHeaderCellDef,] }],
footerCell: [{ type: _angular_core__WEBPACK_IMPORTED_MODULE_2__["ContentChild"], args: [CdkFooterCellDef,] }]
};
return CdkColumnDef;
}(_CdkColumnDefBase));
/**
* Base class for the cells. Adds a CSS classname that identifies the column it renders in.
*/
var /**
* Base class for the cells. Adds a CSS classname that identifies the column it renders in.
*/
BaseCdkCell = /** @class */ (function () {
function BaseCdkCell(columnDef, elementRef) {
/** @type {?} */
var columnClassName = "cdk-column-" + columnDef.cssClassFriendlyName;
elementRef.nativeElement.classList.add(columnClassName);
}
return BaseCdkCell;
}());
/**
* Header cell template container that adds the right classes and role.
*/
var CdkHeaderCell = /** @class */ (function (_super) {
Object(tslib__WEBPACK_IMPORTED_MODULE_0__["__extends"])(CdkHeaderCell, _super);
function CdkHeaderCell(columnDef, elementRef) {
return _super.call(this, columnDef, elementRef) || this;
}
CdkHeaderCell.decorators = [
{ type: _angular_core__WEBPACK_IMPORTED_MODULE_2__["Directive"], args: [{
selector: 'cdk-header-cell, th[cdk-header-cell]',
host: {
'class': 'cdk-header-cell',
'role': 'columnheader',
},
},] },
];
/** @nocollapse */
CdkHeaderCell.ctorParameters = function () { return [
{ type: CdkColumnDef },
{ type: _angular_core__WEBPACK_IMPORTED_MODULE_2__["ElementRef"] }
]; };
return CdkHeaderCell;
}(BaseCdkCell));
/**
* Footer cell template container that adds the right classes and role.
*/
var CdkFooterCell = /** @class */ (function (_super) {
Object(tslib__WEBPACK_IMPORTED_MODULE_0__["__extends"])(CdkFooterCell, _super);
function CdkFooterCell(columnDef, elementRef) {
return _super.call(this, columnDef, elementRef) || this;
}
CdkFooterCell.decorators = [
{ type: _angular_core__WEBPACK_IMPORTED_MODULE_2__["Directive"], args: [{
selector: 'cdk-footer-cell, td[cdk-footer-cell]',
host: {
'class': 'cdk-footer-cell',
'role': 'gridcell',
},
},] },
];
/** @nocollapse */
CdkFooterCell.ctorParameters = function () { return [
{ type: CdkColumnDef },
{ type: _angular_core__WEBPACK_IMPORTED_MODULE_2__["ElementRef"] }
]; };
return CdkFooterCell;
}(BaseCdkCell));
/**
* Cell template container that adds the right classes and role.
*/
var CdkCell = /** @class */ (function (_super) {
Object(tslib__WEBPACK_IMPORTED_MODULE_0__["__extends"])(CdkCell, _super);
function CdkCell(columnDef, elementRef) {
return _super.call(this, columnDef, elementRef) || this;
}
CdkCell.decorators = [
{ type: _angular_core__WEBPACK_IMPORTED_MODULE_2__["Directive"], args: [{
selector: 'cdk-cell, td[cdk-cell]',
host: {
'class': 'cdk-cell',
'role': 'gridcell',
},
},] },
];
/** @nocollapse */
CdkCell.ctorParameters = function () { return [
{ type: CdkColumnDef },
{ type: _angular_core__WEBPACK_IMPORTED_MODULE_2__["ElementRef"] }
]; };
return CdkCell;
}(BaseCdkCell));
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/**
* The row template that can be used by the mat-table. Should not be used outside of the
* material library.
* @type {?}
*/
var CDK_ROW_TEMPLATE = "
";
/**
* Base class for the CdkHeaderRowDef and CdkRowDef that handles checking their columns inputs
* for changes and notifying the table.
* @abstract
*/
var /**
* Base class for the CdkHeaderRowDef and CdkRowDef that handles checking their columns inputs
* for changes and notifying the table.
* @abstract
*/
BaseRowDef = /** @class */ (function () {
function BaseRowDef(/** @docs-private */ template, _differs) {
this.template = template;
this._differs = _differs;
}
/**
* @param {?} changes
* @return {?}
*/
BaseRowDef.prototype.ngOnChanges = /**
* @param {?} changes
* @return {?}
*/
function (changes) {
// Create a new columns differ if one does not yet exist. Initialize it based on initial value
// of the columns property or an empty array if none is provided.
if (!this._columnsDiffer) {
/** @type {?} */
var columns = (changes['columns'] && changes['columns'].currentValue) || [];
this._columnsDiffer = this._differs.find(columns).create();
this._columnsDiffer.diff(columns);
}
};
/**
* Returns the difference between the current columns and the columns from the last diff, or null
* if there is no difference.
*/
/**
* Returns the difference between the current columns and the columns from the last diff, or null
* if there is no difference.
* @return {?}
*/
BaseRowDef.prototype.getColumnsDiff = /**
* Returns the difference between the current columns and the columns from the last diff, or null
* if there is no difference.
* @return {?}
*/
function () {
return this._columnsDiffer.diff(this.columns);
};
/** Gets this row def's relevant cell template from the provided column def. */
/**
* Gets this row def's relevant cell template from the provided column def.
* @param {?} column
* @return {?}
*/
BaseRowDef.prototype.extractCellTemplate = /**
* Gets this row def's relevant cell template from the provided column def.
* @param {?} column
* @return {?}
*/
function (column) {
if (this instanceof CdkHeaderRowDef) {
return column.headerCell.template;
}
if (this instanceof CdkFooterRowDef) {
return column.footerCell.template;
}
else {
return column.cell.template;
}
};
return BaseRowDef;
}());
// Boilerplate for applying mixins to CdkHeaderRowDef.
/**
* \@docs-private
*/
var
// Boilerplate for applying mixins to CdkHeaderRowDef.
/**
* \@docs-private
*/
CdkHeaderRowDefBase = /** @class */ (function (_super) {
Object(tslib__WEBPACK_IMPORTED_MODULE_0__["__extends"])(CdkHeaderRowDefBase, _super);
function CdkHeaderRowDefBase() {
return _super !== null && _super.apply(this, arguments) || this;
}
return CdkHeaderRowDefBase;
}(BaseRowDef));
/** @type {?} */
var _CdkHeaderRowDefBase = mixinHasStickyInput(CdkHeaderRowDefBase);
/**
* Header row definition for the CDK table.
* Captures the header row's template and other header properties such as the columns to display.
*/
var CdkHeaderRowDef = /** @class */ (function (_super) {
Object(tslib__WEBPACK_IMPORTED_MODULE_0__["__extends"])(CdkHeaderRowDef, _super);
function CdkHeaderRowDef(template, _differs) {
return _super.call(this, template, _differs) || this;
}
// Prerender fails to recognize that ngOnChanges in a part of this class through inheritance.
// Explicitly define it so that the method is called as part of the Angular lifecycle.
// Prerender fails to recognize that ngOnChanges in a part of this class through inheritance.
// Explicitly define it so that the method is called as part of the Angular lifecycle.
/**
* @param {?} changes
* @return {?}
*/
CdkHeaderRowDef.prototype.ngOnChanges =
// Prerender fails to recognize that ngOnChanges in a part of this class through inheritance.
// Explicitly define it so that the method is called as part of the Angular lifecycle.
/**
* @param {?} changes
* @return {?}
*/
function (changes) {
_super.prototype.ngOnChanges.call(this, changes);
};
CdkHeaderRowDef.decorators = [
{ type: _angular_core__WEBPACK_IMPORTED_MODULE_2__["Directive"], args: [{
selector: '[cdkHeaderRowDef]',
inputs: ['columns: cdkHeaderRowDef', 'sticky: cdkHeaderRowDefSticky'],
},] },
];
/** @nocollapse */
CdkHeaderRowDef.ctorParameters = function () { return [
{ type: _angular_core__WEBPACK_IMPORTED_MODULE_2__["TemplateRef"] },
{ type: _angular_core__WEBPACK_IMPORTED_MODULE_2__["IterableDiffers"] }
]; };
return CdkHeaderRowDef;
}(_CdkHeaderRowDefBase));
// Boilerplate for applying mixins to CdkFooterRowDef.
/**
* \@docs-private
*/
var
// Boilerplate for applying mixins to CdkFooterRowDef.
/**
* \@docs-private
*/
CdkFooterRowDefBase = /** @class */ (function (_super) {
Object(tslib__WEBPACK_IMPORTED_MODULE_0__["__extends"])(CdkFooterRowDefBase, _super);
function CdkFooterRowDefBase() {
return _super !== null && _super.apply(this, arguments) || this;
}
return CdkFooterRowDefBase;
}(BaseRowDef));
/** @type {?} */
var _CdkFooterRowDefBase = mixinHasStickyInput(CdkFooterRowDefBase);
/**
* Footer row definition for the CDK table.
* Captures the footer row's template and other footer properties such as the columns to display.
*/
var CdkFooterRowDef = /** @class */ (function (_super) {
Object(tslib__WEBPACK_IMPORTED_MODULE_0__["__extends"])(CdkFooterRowDef, _super);
function CdkFooterRowDef(template, _differs) {
return _super.call(this, template, _differs) || this;
}
// Prerender fails to recognize that ngOnChanges in a part of this class through inheritance.
// Explicitly define it so that the method is called as part of the Angular lifecycle.
// Prerender fails to recognize that ngOnChanges in a part of this class through inheritance.
// Explicitly define it so that the method is called as part of the Angular lifecycle.
/**
* @param {?} changes
* @return {?}
*/
CdkFooterRowDef.prototype.ngOnChanges =
// Prerender fails to recognize that ngOnChanges in a part of this class through inheritance.
// Explicitly define it so that the method is called as part of the Angular lifecycle.
/**
* @param {?} changes
* @return {?}
*/
function (changes) {
_super.prototype.ngOnChanges.call(this, changes);
};
CdkFooterRowDef.decorators = [
{ type: _angular_core__WEBPACK_IMPORTED_MODULE_2__["Directive"], args: [{
selector: '[cdkFooterRowDef]',
inputs: ['columns: cdkFooterRowDef', 'sticky: cdkFooterRowDefSticky'],
},] },
];
/** @nocollapse */
CdkFooterRowDef.ctorParameters = function () { return [
{ type: _angular_core__WEBPACK_IMPORTED_MODULE_2__["TemplateRef"] },
{ type: _angular_core__WEBPACK_IMPORTED_MODULE_2__["IterableDiffers"] }
]; };
return CdkFooterRowDef;
}(_CdkFooterRowDefBase));
/**
* Data row definition for the CDK table.
* Captures the header row's template and other row properties such as the columns to display and
* a when predicate that describes when this row should be used.
* @template T
*/
var CdkRowDef = /** @class */ (function (_super) {
Object(tslib__WEBPACK_IMPORTED_MODULE_0__["__extends"])(CdkRowDef, _super);
// TODO(andrewseguin): Add an input for providing a switch function to determine
// if this template should be used.
function CdkRowDef(template, _differs) {
return _super.call(this, template, _differs) || this;
}
CdkRowDef.decorators = [
{ type: _angular_core__WEBPACK_IMPORTED_MODULE_2__["Directive"], args: [{
selector: '[cdkRowDef]',
inputs: ['columns: cdkRowDefColumns', 'when: cdkRowDefWhen'],
},] },
];
/** @nocollapse */
CdkRowDef.ctorParameters = function () { return [
{ type: _angular_core__WEBPACK_IMPORTED_MODULE_2__["TemplateRef"] },
{ type: _angular_core__WEBPACK_IMPORTED_MODULE_2__["IterableDiffers"] }
]; };
return CdkRowDef;
}(BaseRowDef));
/**
* Outlet for rendering cells inside of a row or header row.
* \@docs-private
*/
var CdkCellOutlet = /** @class */ (function () {
function CdkCellOutlet(_viewContainer) {
this._viewContainer = _viewContainer;
CdkCellOutlet.mostRecentCellOutlet = this;
}
/**
* @return {?}
*/
CdkCellOutlet.prototype.ngOnDestroy = /**
* @return {?}
*/
function () {
// If this was the last outlet being rendered in the view, remove the reference
// from the static property after it has been destroyed to avoid leaking memory.
if (CdkCellOutlet.mostRecentCellOutlet === this) {
CdkCellOutlet.mostRecentCellOutlet = null;
}
};
/**
* Static property containing the latest constructed instance of this class.
* Used by the CDK table when each CdkHeaderRow and CdkRow component is created using
* createEmbeddedView. After one of these components are created, this property will provide
* a handle to provide that component's cells and context. After init, the CdkCellOutlet will
* construct the cells with the provided context.
*/
CdkCellOutlet.mostRecentCellOutlet = null;
CdkCellOutlet.decorators = [
{ type: _angular_core__WEBPACK_IMPORTED_MODULE_2__["Directive"], args: [{ selector: '[cdkCellOutlet]' },] },
];
/** @nocollapse */
CdkCellOutlet.ctorParameters = function () { return [
{ type: _angular_core__WEBPACK_IMPORTED_MODULE_2__["ViewContainerRef"] }
]; };
return CdkCellOutlet;
}());
/**
* Header template container that contains the cell outlet. Adds the right class and role.
*/
var CdkHeaderRow = /** @class */ (function () {
function CdkHeaderRow() {
}
CdkHeaderRow.decorators = [
{ type: _angular_core__WEBPACK_IMPORTED_MODULE_2__["Component"], args: [{selector: 'cdk-header-row, tr[cdk-header-row]',
template: CDK_ROW_TEMPLATE,
host: {
'class': 'cdk-header-row',
'role': 'row',
},
changeDetection: _angular_core__WEBPACK_IMPORTED_MODULE_2__["ChangeDetectionStrategy"].OnPush,
encapsulation: _angular_core__WEBPACK_IMPORTED_MODULE_2__["ViewEncapsulation"].None,
},] },
];
return CdkHeaderRow;
}());
/**
* Footer template container that contains the cell outlet. Adds the right class and role.
*/
var CdkFooterRow = /** @class */ (function () {
function CdkFooterRow() {
}
CdkFooterRow.decorators = [
{ type: _angular_core__WEBPACK_IMPORTED_MODULE_2__["Component"], args: [{selector: 'cdk-footer-row, tr[cdk-footer-row]',
template: CDK_ROW_TEMPLATE,
host: {
'class': 'cdk-footer-row',
'role': 'row',
},
changeDetection: _angular_core__WEBPACK_IMPORTED_MODULE_2__["ChangeDetectionStrategy"].OnPush,
encapsulation: _angular_core__WEBPACK_IMPORTED_MODULE_2__["ViewEncapsulation"].None,
},] },
];
return CdkFooterRow;
}());
/**
* Data row template container that contains the cell outlet. Adds the right class and role.
*/
var CdkRow = /** @class */ (function () {
function CdkRow() {
}
CdkRow.decorators = [
{ type: _angular_core__WEBPACK_IMPORTED_MODULE_2__["Component"], args: [{selector: 'cdk-row, tr[cdk-row]',
template: CDK_ROW_TEMPLATE,
host: {
'class': 'cdk-row',
'role': 'row',
},
changeDetection: _angular_core__WEBPACK_IMPORTED_MODULE_2__["ChangeDetectionStrategy"].OnPush,
encapsulation: _angular_core__WEBPACK_IMPORTED_MODULE_2__["ViewEncapsulation"].None,
},] },
];
return CdkRow;
}());
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/**
* Returns an error to be thrown when attempting to find an unexisting column.
* \@docs-private
* @param {?} id Id whose lookup failed.
* @return {?}
*/
function getTableUnknownColumnError(id) {
return Error("Could not find column with id \"" + id + "\".");
}
/**
* Returns an error to be thrown when two column definitions have the same name.
* \@docs-private
* @param {?} name
* @return {?}
*/
function getTableDuplicateColumnNameError(name) {
return Error("Duplicate column definition name provided: \"" + name + "\".");
}
/**
* Returns an error to be thrown when there are multiple rows that are missing a when function.
* \@docs-private
* @return {?}
*/
function getTableMultipleDefaultRowDefsError() {
return Error("There can only be one default row without a when predicate function.");
}
/**
* Returns an error to be thrown when there are no matching row defs for a particular set of data.
* \@docs-private
* @param {?} data
* @return {?}
*/
function getTableMissingMatchingRowDefError(data) {
return Error("Could not find a matching row definition for the" +
("provided row data: " + JSON.stringify(data)));
}
/**
* Returns an error to be thrown when there is no row definitions present in the content.
* \@docs-private
* @return {?}
*/
function getTableMissingRowDefsError() {
return Error('Missing definitions for header, footer, and row; ' +
'cannot determine which columns should be rendered.');
}
/**
* Returns an error to be thrown when the data source does not match the compatible types.
* \@docs-private
* @return {?}
*/
function getTableUnknownDataSourceError() {
return Error("Provided data source did not match an array, Observable, or DataSource");
}
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/**
* List of all possible directions that can be used for sticky positioning.
* \@docs-private
* @type {?}
*/
var STICKY_DIRECTIONS = ['top', 'bottom', 'left', 'right'];
/**
* Applies and removes sticky positioning styles to the `CdkTable` rows and columns cells.
* \@docs-private
*/
var /**
* Applies and removes sticky positioning styles to the `CdkTable` rows and columns cells.
* \@docs-private
*/
StickyStyler = /** @class */ (function () {
/**
* @param isNativeHtmlTable Whether the sticky logic should be based on a table
* that uses the native `
` element.
* @param stickCellCss The CSS class that will be applied to every row/cell that has
* sticky positioning applied.
* @param direction The directionality context of the table (ltr/rtl); affects column positioning
* by reversing left/right positions.
* @param _isBrowser Whether the table is currently being rendered on the server or the client.
*/
function StickyStyler(isNativeHtmlTable, stickCellCss, direction, _isBrowser) {
if (_isBrowser === void 0) { _isBrowser = true; }
this.isNativeHtmlTable = isNativeHtmlTable;
this.stickCellCss = stickCellCss;
this.direction = direction;
this._isBrowser = _isBrowser;
}
/**
* Clears the sticky positioning styles from the row and its cells by resetting the `position`
* style, setting the zIndex to 0, and unsetting each provided sticky direction.
* @param rows The list of rows that should be cleared from sticking in the provided directions
* @param stickyDirections The directions that should no longer be set as sticky on the rows.
*/
/**
* Clears the sticky positioning styles from the row and its cells by resetting the `position`
* style, setting the zIndex to 0, and unsetting each provided sticky direction.
* @param {?} rows The list of rows that should be cleared from sticking in the provided directions
* @param {?} stickyDirections The directions that should no longer be set as sticky on the rows.
* @return {?}
*/
StickyStyler.prototype.clearStickyPositioning = /**
* Clears the sticky positioning styles from the row and its cells by resetting the `position`
* style, setting the zIndex to 0, and unsetting each provided sticky direction.
* @param {?} rows The list of rows that should be cleared from sticking in the provided directions
* @param {?} stickyDirections The directions that should no longer be set as sticky on the rows.
* @return {?}
*/
function (rows, stickyDirections) {
for (var _i = 0, rows_1 = rows; _i < rows_1.length; _i++) {
var row = rows_1[_i];
// If the row isn't an element (e.g. if it's an `ng-container`),
// it won't have inline styles or `children` so we skip it.
if (row.nodeType !== row.ELEMENT_NODE) {
continue;
}
this._removeStickyStyle(row, stickyDirections);
for (var i = 0; i < row.children.length; i++) {
/** @type {?} */
var cell = (/** @type {?} */ (row.children[i]));
this._removeStickyStyle(cell, stickyDirections);
}
}
};
/**
* Applies sticky left and right positions to the cells of each row according to the sticky
* states of the rendered column definitions.
* @param rows The rows that should have its set of cells stuck according to the sticky states.
* @param stickyStartStates A list of boolean states where each state represents whether the cell
* in this index position should be stuck to the start of the row.
* @param stickyEndStates A list of boolean states where each state represents whether the cell
* in this index position should be stuck to the end of the row.
*/
/**
* Applies sticky left and right positions to the cells of each row according to the sticky
* states of the rendered column definitions.
* @param {?} rows The rows that should have its set of cells stuck according to the sticky states.
* @param {?} stickyStartStates A list of boolean states where each state represents whether the cell
* in this index position should be stuck to the start of the row.
* @param {?} stickyEndStates A list of boolean states where each state represents whether the cell
* in this index position should be stuck to the end of the row.
* @return {?}
*/
StickyStyler.prototype.updateStickyColumns = /**
* Applies sticky left and right positions to the cells of each row according to the sticky
* states of the rendered column definitions.
* @param {?} rows The rows that should have its set of cells stuck according to the sticky states.
* @param {?} stickyStartStates A list of boolean states where each state represents whether the cell
* in this index position should be stuck to the start of the row.
* @param {?} stickyEndStates A list of boolean states where each state represents whether the cell
* in this index position should be stuck to the end of the row.
* @return {?}
*/
function (rows, stickyStartStates, stickyEndStates) {
/** @type {?} */
var hasStickyColumns = stickyStartStates.some(function (state) { return state; }) || stickyEndStates.some(function (state) { return state; });
if (!rows.length || !hasStickyColumns || !this._isBrowser) {
return;
}
/** @type {?} */
var firstRow = rows[0];
/** @type {?} */
var numCells = firstRow.children.length;
/** @type {?} */
var cellWidths = this._getCellWidths(firstRow);
/** @type {?} */
var startPositions = this._getStickyStartColumnPositions(cellWidths, stickyStartStates);
/** @type {?} */
var endPositions = this._getStickyEndColumnPositions(cellWidths, stickyEndStates);
/** @type {?} */
var isRtl = this.direction === 'rtl';
for (var _i = 0, rows_2 = rows; _i < rows_2.length; _i++) {
var row = rows_2[_i];
for (var i = 0; i < numCells; i++) {
/** @type {?} */
var cell = (/** @type {?} */ (row.children[i]));
if (stickyStartStates[i]) {
this._addStickyStyle(cell, isRtl ? 'right' : 'left', startPositions[i]);
}
if (stickyEndStates[i]) {
this._addStickyStyle(cell, isRtl ? 'left' : 'right', endPositions[i]);
}
}
}
};
/**
* Applies sticky positioning to the row's cells if using the native table layout, and to the
* row itself otherwise.
* @param rowsToStick The list of rows that should be stuck according to their corresponding
* sticky state and to the provided top or bottom position.
* @param stickyStates A list of boolean states where each state represents whether the row
* should be stuck in the particular top or bottom position.
* @param position The position direction in which the row should be stuck if that row should be
* sticky.
*
*/
/**
* Applies sticky positioning to the row's cells if using the native table layout, and to the
* row itself otherwise.
* @param {?} rowsToStick The list of rows that should be stuck according to their corresponding
* sticky state and to the provided top or bottom position.
* @param {?} stickyStates A list of boolean states where each state represents whether the row
* should be stuck in the particular top or bottom position.
* @param {?} position The position direction in which the row should be stuck if that row should be
* sticky.
*
* @return {?}
*/
StickyStyler.prototype.stickRows = /**
* Applies sticky positioning to the row's cells if using the native table layout, and to the
* row itself otherwise.
* @param {?} rowsToStick The list of rows that should be stuck according to their corresponding
* sticky state and to the provided top or bottom position.
* @param {?} stickyStates A list of boolean states where each state represents whether the row
* should be stuck in the particular top or bottom position.
* @param {?} position The position direction in which the row should be stuck if that row should be
* sticky.
*
* @return {?}
*/
function (rowsToStick, stickyStates, position) {
// Since we can't measure the rows on the server, we can't stick the rows properly.
if (!this._isBrowser) {
return;
}
// If positioning the rows to the bottom, reverse their order when evaluating the sticky
// position such that the last row stuck will be "bottom: 0px" and so on.
/** @type {?} */
var rows = position === 'bottom' ? rowsToStick.reverse() : rowsToStick;
/** @type {?} */
var stickyHeight = 0;
for (var rowIndex = 0; rowIndex < rows.length; rowIndex++) {
if (!stickyStates[rowIndex]) {
continue;
}
/** @type {?} */
var row = rows[rowIndex];
if (this.isNativeHtmlTable) {
for (var j = 0; j < row.children.length; j++) {
/** @type {?} */
var cell = (/** @type {?} */ (row.children[j]));
this._addStickyStyle(cell, position, stickyHeight);
}
}
else {
// Flex does not respect the stick positioning on the cells, needs to be applied to the row.
// If this is applied on a native table, Safari causes the header to fly in wrong direction.
this._addStickyStyle(row, position, stickyHeight);
}
if (rowIndex === rows.length - 1) {
// prevent unnecessary reflow from getBoundingClientRect()
return;
}
stickyHeight += row.getBoundingClientRect().height;
}
};
/**
* When using the native table in Safari, sticky footer cells do not stick. The only way to stick
* footer rows is to apply sticky styling to the tfoot container. This should only be done if
* all footer rows are sticky. If not all footer rows are sticky, remove sticky positioning from
* the tfoot element.
*/
/**
* When using the native table in Safari, sticky footer cells do not stick. The only way to stick
* footer rows is to apply sticky styling to the tfoot container. This should only be done if
* all footer rows are sticky. If not all footer rows are sticky, remove sticky positioning from
* the tfoot element.
* @param {?} tableElement
* @param {?} stickyStates
* @return {?}
*/
StickyStyler.prototype.updateStickyFooterContainer = /**
* When using the native table in Safari, sticky footer cells do not stick. The only way to stick
* footer rows is to apply sticky styling to the tfoot container. This should only be done if
* all footer rows are sticky. If not all footer rows are sticky, remove sticky positioning from
* the tfoot element.
* @param {?} tableElement
* @param {?} stickyStates
* @return {?}
*/
function (tableElement, stickyStates) {
if (!this.isNativeHtmlTable) {
return;
}
/** @type {?} */
var tfoot = (/** @type {?} */ (tableElement.querySelector('tfoot')));
if (stickyStates.some(function (state) { return !state; })) {
this._removeStickyStyle(tfoot, ['bottom']);
}
else {
this._addStickyStyle(tfoot, 'bottom', 0);
}
};
/**
* Removes the sticky style on the element by removing the sticky cell CSS class, re-evaluating
* the zIndex, removing each of the provided sticky directions, and removing the
* sticky position if there are no more directions.
*/
/**
* Removes the sticky style on the element by removing the sticky cell CSS class, re-evaluating
* the zIndex, removing each of the provided sticky directions, and removing the
* sticky position if there are no more directions.
* @param {?} element
* @param {?} stickyDirections
* @return {?}
*/
StickyStyler.prototype._removeStickyStyle = /**
* Removes the sticky style on the element by removing the sticky cell CSS class, re-evaluating
* the zIndex, removing each of the provided sticky directions, and removing the
* sticky position if there are no more directions.
* @param {?} element
* @param {?} stickyDirections
* @return {?}
*/
function (element, stickyDirections) {
for (var _i = 0, stickyDirections_1 = stickyDirections; _i < stickyDirections_1.length; _i++) {
var dir = stickyDirections_1[_i];
element.style[dir] = '';
}
element.style.zIndex = this._getCalculatedZIndex(element);
// If the element no longer has any more sticky directions, remove sticky positioning and
// the sticky CSS class.
/** @type {?} */
var hasDirection = STICKY_DIRECTIONS.some(function (dir) { return !!element.style[dir]; });
if (!hasDirection) {
element.style.position = '';
element.classList.remove(this.stickCellCss);
}
};
/**
* Adds the sticky styling to the element by adding the sticky style class, changing position
* to be sticky (and -webkit-sticky), setting the appropriate zIndex, and adding a sticky
* direction and value.
*/
/**
* Adds the sticky styling to the element by adding the sticky style class, changing position
* to be sticky (and -webkit-sticky), setting the appropriate zIndex, and adding a sticky
* direction and value.
* @param {?} element
* @param {?} dir
* @param {?} dirValue
* @return {?}
*/
StickyStyler.prototype._addStickyStyle = /**
* Adds the sticky styling to the element by adding the sticky style class, changing position
* to be sticky (and -webkit-sticky), setting the appropriate zIndex, and adding a sticky
* direction and value.
* @param {?} element
* @param {?} dir
* @param {?} dirValue
* @return {?}
*/
function (element, dir, dirValue) {
element.classList.add(this.stickCellCss);
element.style[dir] = dirValue + "px";
element.style.cssText += 'position: -webkit-sticky; position: sticky; ';
element.style.zIndex = this._getCalculatedZIndex(element);
};
/**
* Calculate what the z-index should be for the element, depending on what directions (top,
* bottom, left, right) have been set. It should be true that elements with a top direction
* should have the highest index since these are elements like a table header. If any of those
* elements are also sticky in another direction, then they should appear above other elements
* that are only sticky top (e.g. a sticky column on a sticky header). Bottom-sticky elements
* (e.g. footer rows) should then be next in the ordering such that they are below the header
* but above any non-sticky elements. Finally, left/right sticky elements (e.g. sticky columns)
* should minimally increment so that they are above non-sticky elements but below top and bottom
* elements.
*/
/**
* Calculate what the z-index should be for the element, depending on what directions (top,
* bottom, left, right) have been set. It should be true that elements with a top direction
* should have the highest index since these are elements like a table header. If any of those
* elements are also sticky in another direction, then they should appear above other elements
* that are only sticky top (e.g. a sticky column on a sticky header). Bottom-sticky elements
* (e.g. footer rows) should then be next in the ordering such that they are below the header
* but above any non-sticky elements. Finally, left/right sticky elements (e.g. sticky columns)
* should minimally increment so that they are above non-sticky elements but below top and bottom
* elements.
* @param {?} element
* @return {?}
*/
StickyStyler.prototype._getCalculatedZIndex = /**
* Calculate what the z-index should be for the element, depending on what directions (top,
* bottom, left, right) have been set. It should be true that elements with a top direction
* should have the highest index since these are elements like a table header. If any of those
* elements are also sticky in another direction, then they should appear above other elements
* that are only sticky top (e.g. a sticky column on a sticky header). Bottom-sticky elements
* (e.g. footer rows) should then be next in the ordering such that they are below the header
* but above any non-sticky elements. Finally, left/right sticky elements (e.g. sticky columns)
* should minimally increment so that they are above non-sticky elements but below top and bottom
* elements.
* @param {?} element
* @return {?}
*/
function (element) {
/** @type {?} */
var zIndexIncrements = {
top: 100,
bottom: 10,
left: 1,
right: 1,
};
/** @type {?} */
var zIndex = 0;
for (var _i = 0, STICKY_DIRECTIONS_1 = STICKY_DIRECTIONS; _i < STICKY_DIRECTIONS_1.length; _i++) {
var dir = STICKY_DIRECTIONS_1[_i];
if (element.style[dir]) {
zIndex += zIndexIncrements[dir];
}
}
return zIndex ? "" + zIndex : '';
};
/** Gets the widths for each cell in the provided row. */
/**
* Gets the widths for each cell in the provided row.
* @param {?} row
* @return {?}
*/
StickyStyler.prototype._getCellWidths = /**
* Gets the widths for each cell in the provided row.
* @param {?} row
* @return {?}
*/
function (row) {
/** @type {?} */
var cellWidths = [];
/** @type {?} */
var firstRowCells = row.children;
for (var i = 0; i < firstRowCells.length; i++) {
/** @type {?} */
var cell = (/** @type {?} */ (firstRowCells[i]));
cellWidths.push(cell.getBoundingClientRect().width);
}
return cellWidths;
};
/**
* Determines the left and right positions of each sticky column cell, which will be the
* accumulation of all sticky column cell widths to the left and right, respectively.
* Non-sticky cells do not need to have a value set since their positions will not be applied.
*/
/**
* Determines the left and right positions of each sticky column cell, which will be the
* accumulation of all sticky column cell widths to the left and right, respectively.
* Non-sticky cells do not need to have a value set since their positions will not be applied.
* @param {?} widths
* @param {?} stickyStates
* @return {?}
*/
StickyStyler.prototype._getStickyStartColumnPositions = /**
* Determines the left and right positions of each sticky column cell, which will be the
* accumulation of all sticky column cell widths to the left and right, respectively.
* Non-sticky cells do not need to have a value set since their positions will not be applied.
* @param {?} widths
* @param {?} stickyStates
* @return {?}
*/
function (widths, stickyStates) {
/** @type {?} */
var positions = [];
/** @type {?} */
var nextPosition = 0;
for (var i = 0; i < widths.length; i++) {
if (stickyStates[i]) {
positions[i] = nextPosition;
nextPosition += widths[i];
}
}
return positions;
};
/**
* Determines the left and right positions of each sticky column cell, which will be the
* accumulation of all sticky column cell widths to the left and right, respectively.
* Non-sticky cells do not need to have a value set since their positions will not be applied.
*/
/**
* Determines the left and right positions of each sticky column cell, which will be the
* accumulation of all sticky column cell widths to the left and right, respectively.
* Non-sticky cells do not need to have a value set since their positions will not be applied.
* @param {?} widths
* @param {?} stickyStates
* @return {?}
*/
StickyStyler.prototype._getStickyEndColumnPositions = /**
* Determines the left and right positions of each sticky column cell, which will be the
* accumulation of all sticky column cell widths to the left and right, respectively.
* Non-sticky cells do not need to have a value set since their positions will not be applied.
* @param {?} widths
* @param {?} stickyStates
* @return {?}
*/
function (widths, stickyStates) {
/** @type {?} */
var positions = [];
/** @type {?} */
var nextPosition = 0;
for (var i = widths.length; i > 0; i--) {
if (stickyStates[i]) {
positions[i] = nextPosition;
nextPosition += widths[i];
}
}
return positions;
};
return StickyStyler;
}());
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/**
* Provides a handle for the table to grab the view container's ng-container to insert data rows.
* \@docs-private
*/
var DataRowOutlet = /** @class */ (function () {
function DataRowOutlet(viewContainer, elementRef) {
this.viewContainer = viewContainer;
this.elementRef = elementRef;
}
DataRowOutlet.decorators = [
{ type: _angular_core__WEBPACK_IMPORTED_MODULE_2__["Directive"], args: [{ selector: '[rowOutlet]' },] },
];
/** @nocollapse */
DataRowOutlet.ctorParameters = function () { return [
{ type: _angular_core__WEBPACK_IMPORTED_MODULE_2__["ViewContainerRef"] },
{ type: _angular_core__WEBPACK_IMPORTED_MODULE_2__["ElementRef"] }
]; };
return DataRowOutlet;
}());
/**
* Provides a handle for the table to grab the view container's ng-container to insert the header.
* \@docs-private
*/
var HeaderRowOutlet = /** @class */ (function () {
function HeaderRowOutlet(viewContainer, elementRef) {
this.viewContainer = viewContainer;
this.elementRef = elementRef;
}
HeaderRowOutlet.decorators = [
{ type: _angular_core__WEBPACK_IMPORTED_MODULE_2__["Directive"], args: [{ selector: '[headerRowOutlet]' },] },
];
/** @nocollapse */
HeaderRowOutlet.ctorParameters = function () { return [
{ type: _angular_core__WEBPACK_IMPORTED_MODULE_2__["ViewContainerRef"] },
{ type: _angular_core__WEBPACK_IMPORTED_MODULE_2__["ElementRef"] }
]; };
return HeaderRowOutlet;
}());
/**
* Provides a handle for the table to grab the view container's ng-container to insert the footer.
* \@docs-private
*/
var FooterRowOutlet = /** @class */ (function () {
function FooterRowOutlet(viewContainer, elementRef) {
this.viewContainer = viewContainer;
this.elementRef = elementRef;
}
FooterRowOutlet.decorators = [
{ type: _angular_core__WEBPACK_IMPORTED_MODULE_2__["Directive"], args: [{ selector: '[footerRowOutlet]' },] },
];
/** @nocollapse */
FooterRowOutlet.ctorParameters = function () { return [
{ type: _angular_core__WEBPACK_IMPORTED_MODULE_2__["ViewContainerRef"] },
{ type: _angular_core__WEBPACK_IMPORTED_MODULE_2__["ElementRef"] }
]; };
return FooterRowOutlet;
}());
/**
* The table template that can be used by the mat-table. Should not be used outside of the
* material library.
* \@docs-private
* @type {?}
*/
var CDK_TABLE_TEMPLATE =
// Note that according to MDN, the `caption` element has to be projected as the **first** element
// in the table. See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/caption
"\n ` object. With the two keys, the cache points to a `RenderRow` object that
* contains an array of created pairs. The array is necessary to handle cases where the data
* array contains multiple duplicate data objects and each instantiated `RenderRow` must be
* stored.
*/
this._cachedRenderRowsMap = new Map();
/**
* CSS class added to any row or cell that has sticky positioning applied. May be overriden by
* table subclasses.
*/
this.stickyCssClass = 'cdk-table-sticky';
this._multiTemplateDataRows = false;
// TODO(andrewseguin): Remove max value as the end index
// and instead calculate the view on init and scroll.
/**
* Stream containing the latest information on what rows are being displayed on screen.
* Can be used by the data source to as a heuristic of what data should be provided.
*
* \@docs-private
*/
this.viewChange = new rxjs__WEBPACK_IMPORTED_MODULE_5__["BehaviorSubject"]({ start: 0, end: Number.MAX_VALUE });
if (!role) {
this._elementRef.nativeElement.setAttribute('role', 'grid');
}
this._document = _document;
this._isNativeHtmlTable = this._elementRef.nativeElement.nodeName === 'TABLE';
}
Object.defineProperty(CdkTable.prototype, "trackBy", {
/**
* Tracking function that will be used to check the differences in data changes. Used similarly
* to `ngFor` `trackBy` function. Optimize row operations by identifying a row based on its data
* relative to the function to know if a row should be added/removed/moved.
* Accepts a function that takes two parameters, `index` and `item`.
*/
get: /**
* Tracking function that will be used to check the differences in data changes. Used similarly
* to `ngFor` `trackBy` function. Optimize row operations by identifying a row based on its data
* relative to the function to know if a row should be added/removed/moved.
* Accepts a function that takes two parameters, `index` and `item`.
* @return {?}
*/
function () { return this._trackByFn; },
set: /**
* @param {?} fn
* @return {?}
*/
function (fn) {
if (Object(_angular_core__WEBPACK_IMPORTED_MODULE_2__["isDevMode"])() &&
fn != null && typeof fn !== 'function' &&
(/** @type {?} */ (console)) && (/** @type {?} */ (console.warn))) {
console.warn("trackBy must be a function, but received " + JSON.stringify(fn) + ".");
}
this._trackByFn = fn;
},
enumerable: true,
configurable: true
});
Object.defineProperty(CdkTable.prototype, "dataSource", {
/**
* The table's source of data, which can be provided in three ways (in order of complexity):
* - Simple data array (each object represents one table row)
* - Stream that emits a data array each time the array changes
* - `DataSource` object that implements the connect/disconnect interface.
*
* If a data array is provided, the table must be notified when the array's objects are
* added, removed, or moved. This can be done by calling the `renderRows()` function which will
* render the diff since the last table render. If the data array reference is changed, the table
* will automatically trigger an update to the rows.
*
* When providing an Observable stream, the table will trigger an update automatically when the
* stream emits a new array of data.
*
* Finally, when providing a `DataSource` object, the table will use the Observable stream
* provided by the connect function and trigger updates when that stream emits new data array
* values. During the table's ngOnDestroy or when the data source is removed from the table, the
* table will call the DataSource's `disconnect` function (may be useful for cleaning up any
* subscriptions registered during the connect process).
*/
get: /**
* The table's source of data, which can be provided in three ways (in order of complexity):
* - Simple data array (each object represents one table row)
* - Stream that emits a data array each time the array changes
* - `DataSource` object that implements the connect/disconnect interface.
*
* If a data array is provided, the table must be notified when the array's objects are
* added, removed, or moved. This can be done by calling the `renderRows()` function which will
* render the diff since the last table render. If the data array reference is changed, the table
* will automatically trigger an update to the rows.
*
* When providing an Observable stream, the table will trigger an update automatically when the
* stream emits a new array of data.
*
* Finally, when providing a `DataSource` object, the table will use the Observable stream
* provided by the connect function and trigger updates when that stream emits new data array
* values. During the table's ngOnDestroy or when the data source is removed from the table, the
* table will call the DataSource's `disconnect` function (may be useful for cleaning up any
* subscriptions registered during the connect process).
* @return {?}
*/
function () { return this._dataSource; },
set: /**
* @param {?} dataSource
* @return {?}
*/
function (dataSource) {
if (this._dataSource !== dataSource) {
this._switchDataSource(dataSource);
}
},
enumerable: true,
configurable: true
});
Object.defineProperty(CdkTable.prototype, "multiTemplateDataRows", {
/**
* Whether to allow multiple rows per data object by evaluating which rows evaluate their 'when'
* predicate to true. If `multiTemplateDataRows` is false, which is the default value, then each
* dataobject will render the first row that evaluates its when predicate to true, in the order
* defined in the table, or otherwise the default row which does not have a when predicate.
*/
get: /**
* Whether to allow multiple rows per data object by evaluating which rows evaluate their 'when'
* predicate to true. If `multiTemplateDataRows` is false, which is the default value, then each
* dataobject will render the first row that evaluates its when predicate to true, in the order
* defined in the table, or otherwise the default row which does not have a when predicate.
* @return {?}
*/
function () { return this._multiTemplateDataRows; },
set: /**
* @param {?} v
* @return {?}
*/
function (v) {
this._multiTemplateDataRows = Object(_angular_cdk_coercion__WEBPACK_IMPORTED_MODULE_1__["coerceBooleanProperty"])(v);
if (this._rowOutlet.viewContainer.length) {
this._forceRenderDataRows();
}
},
enumerable: true,
configurable: true
});
/**
* @return {?}
*/
CdkTable.prototype.ngOnInit = /**
* @return {?}
*/
function () {
var _this = this;
this._setupStickyStyler();
if (this._isNativeHtmlTable) {
this._applyNativeTableSections();
}
// Set up the trackBy function so that it uses the `RenderRow` as its identity by default. If
// the user has provided a custom trackBy, return the result of that function as evaluated
// with the values of the `RenderRow`'s data and index.
this._dataDiffer = this._differs.find([]).create(function (_i, dataRow) {
return _this.trackBy ? _this.trackBy(dataRow.dataIndex, dataRow.data) : dataRow;
});
};
/**
* @return {?}
*/
CdkTable.prototype.ngAfterContentChecked = /**
* @return {?}
*/
function () {
// Cache the row and column definitions gathered by ContentChildren and programmatic injection.
this._cacheRowDefs();
this._cacheColumnDefs();
// Make sure that the user has at least added header, footer, or data row def.
if (!this._headerRowDefs.length && !this._footerRowDefs.length && !this._rowDefs.length) {
throw getTableMissingRowDefsError();
}
// Render updates if the list of columns have been changed for the header, row, or footer defs.
this._renderUpdatedColumns();
// If the header row definition has been changed, trigger a render to the header row.
if (this._headerRowDefChanged) {
this._forceRenderHeaderRows();
this._headerRowDefChanged = false;
}
// If the footer row definition has been changed, trigger a render to the footer row.
if (this._footerRowDefChanged) {
this._forceRenderFooterRows();
this._footerRowDefChanged = false;
}
// If there is a data source and row definitions, connect to the data source unless a
// connection has already been made.
if (this.dataSource && this._rowDefs.length > 0 && !this._renderChangeSubscription) {
this._observeRenderChanges();
}
this._checkStickyStates();
};
/**
* @return {?}
*/
CdkTable.prototype.ngOnDestroy = /**
* @return {?}
*/
function () {
this._rowOutlet.viewContainer.clear();
this._headerRowOutlet.viewContainer.clear();
this._footerRowOutlet.viewContainer.clear();
this._cachedRenderRowsMap.clear();
this._onDestroy.next();
this._onDestroy.complete();
if (Object(_angular_cdk_collections__WEBPACK_IMPORTED_MODULE_3__["isDataSource"])(this.dataSource)) {
this.dataSource.disconnect(this);
}
};
/**
* Renders rows based on the table's latest set of data, which was either provided directly as an
* input or retrieved through an Observable stream (directly or from a DataSource).
* Checks for differences in the data since the last diff to perform only the necessary
* changes (add/remove/move rows).
*
* If the table's data source is a DataSource or Observable, this will be invoked automatically
* each time the provided Observable stream emits a new data array. Otherwise if your data is
* an array, this function will need to be called to render any changes.
*/
/**
* Renders rows based on the table's latest set of data, which was either provided directly as an
* input or retrieved through an Observable stream (directly or from a DataSource).
* Checks for differences in the data since the last diff to perform only the necessary
* changes (add/remove/move rows).
*
* If the table's data source is a DataSource or Observable, this will be invoked automatically
* each time the provided Observable stream emits a new data array. Otherwise if your data is
* an array, this function will need to be called to render any changes.
* @return {?}
*/
CdkTable.prototype.renderRows = /**
* Renders rows based on the table's latest set of data, which was either provided directly as an
* input or retrieved through an Observable stream (directly or from a DataSource).
* Checks for differences in the data since the last diff to perform only the necessary
* changes (add/remove/move rows).
*
* If the table's data source is a DataSource or Observable, this will be invoked automatically
* each time the provided Observable stream emits a new data array. Otherwise if your data is
* an array, this function will need to be called to render any changes.
* @return {?}
*/
function () {
var _this = this;
this._renderRows = this._getAllRenderRows();
/** @type {?} */
var changes = this._dataDiffer.diff(this._renderRows);
if (!changes) {
return;
}
/** @type {?} */
var viewContainer = this._rowOutlet.viewContainer;
changes.forEachOperation(function (record, prevIndex, currentIndex) {
if (record.previousIndex == null) {
_this._insertRow(record.item, (/** @type {?} */ (currentIndex)));
}
else if (currentIndex == null) {
viewContainer.remove((/** @type {?} */ (prevIndex)));
}
else {
/** @type {?} */
var view = (/** @type {?} */ (viewContainer.get((/** @type {?} */ (prevIndex)))));
viewContainer.move((/** @type {?} */ (view)), currentIndex);
}
});
// Update the meta context of a row's context data (index, count, first, last, ...)
this._updateRowIndexContext();
// Update rows that did not get added/removed/moved but may have had their identity changed,
// e.g. if trackBy matched data on some property but the actual data reference changed.
changes.forEachIdentityChange(function (record) {
/** @type {?} */
var rowView = (/** @type {?} */ (viewContainer.get((/** @type {?} */ (record.currentIndex)))));
rowView.context.$implicit = record.item.data;
});
this.updateStickyColumnStyles();
};
/**
* Sets the header row definition to be used. Overrides the header row definition gathered by
* using `ContentChild`, if one exists. Sets a flag that will re-render the header row after the
* table's content is checked.
* @docs-private
* @deprecated Use `addHeaderRowDef` and `removeHeaderRowDef` instead
* @breaking-change 8.0.0
*/
/**
* Sets the header row definition to be used. Overrides the header row definition gathered by
* using `ContentChild`, if one exists. Sets a flag that will re-render the header row after the
* table's content is checked.
* \@docs-private
* @deprecated Use `addHeaderRowDef` and `removeHeaderRowDef` instead
* \@breaking-change 8.0.0
* @param {?} headerRowDef
* @return {?}
*/
CdkTable.prototype.setHeaderRowDef = /**
* Sets the header row definition to be used. Overrides the header row definition gathered by
* using `ContentChild`, if one exists. Sets a flag that will re-render the header row after the
* table's content is checked.
* \@docs-private
* @deprecated Use `addHeaderRowDef` and `removeHeaderRowDef` instead
* \@breaking-change 8.0.0
* @param {?} headerRowDef
* @return {?}
*/
function (headerRowDef) {
this._customHeaderRowDefs = new Set([headerRowDef]);
this._headerRowDefChanged = true;
};
/**
* Sets the footer row definition to be used. Overrides the footer row definition gathered by
* using `ContentChild`, if one exists. Sets a flag that will re-render the footer row after the
* table's content is checked.
* @docs-private
* @deprecated Use `addFooterRowDef` and `removeFooterRowDef` instead
* @breaking-change 8.0.0
*/
/**
* Sets the footer row definition to be used. Overrides the footer row definition gathered by
* using `ContentChild`, if one exists. Sets a flag that will re-render the footer row after the
* table's content is checked.
* \@docs-private
* @deprecated Use `addFooterRowDef` and `removeFooterRowDef` instead
* \@breaking-change 8.0.0
* @param {?} footerRowDef
* @return {?}
*/
CdkTable.prototype.setFooterRowDef = /**
* Sets the footer row definition to be used. Overrides the footer row definition gathered by
* using `ContentChild`, if one exists. Sets a flag that will re-render the footer row after the
* table's content is checked.
* \@docs-private
* @deprecated Use `addFooterRowDef` and `removeFooterRowDef` instead
* \@breaking-change 8.0.0
* @param {?} footerRowDef
* @return {?}
*/
function (footerRowDef) {
this._customFooterRowDefs = new Set([footerRowDef]);
this._footerRowDefChanged = true;
};
/** Adds a column definition that was not included as part of the content children. */
/**
* Adds a column definition that was not included as part of the content children.
* @param {?} columnDef
* @return {?}
*/
CdkTable.prototype.addColumnDef = /**
* Adds a column definition that was not included as part of the content children.
* @param {?} columnDef
* @return {?}
*/
function (columnDef) {
this._customColumnDefs.add(columnDef);
};
/** Removes a column definition that was not included as part of the content children. */
/**
* Removes a column definition that was not included as part of the content children.
* @param {?} columnDef
* @return {?}
*/
CdkTable.prototype.removeColumnDef = /**
* Removes a column definition that was not included as part of the content children.
* @param {?} columnDef
* @return {?}
*/
function (columnDef) {
this._customColumnDefs.delete(columnDef);
};
/** Adds a row definition that was not included as part of the content children. */
/**
* Adds a row definition that was not included as part of the content children.
* @param {?} rowDef
* @return {?}
*/
CdkTable.prototype.addRowDef = /**
* Adds a row definition that was not included as part of the content children.
* @param {?} rowDef
* @return {?}
*/
function (rowDef) {
this._customRowDefs.add(rowDef);
};
/** Removes a row definition that was not included as part of the content children. */
/**
* Removes a row definition that was not included as part of the content children.
* @param {?} rowDef
* @return {?}
*/
CdkTable.prototype.removeRowDef = /**
* Removes a row definition that was not included as part of the content children.
* @param {?} rowDef
* @return {?}
*/
function (rowDef) {
this._customRowDefs.delete(rowDef);
};
/** Adds a header row definition that was not included as part of the content children. */
/**
* Adds a header row definition that was not included as part of the content children.
* @param {?} headerRowDef
* @return {?}
*/
CdkTable.prototype.addHeaderRowDef = /**
* Adds a header row definition that was not included as part of the content children.
* @param {?} headerRowDef
* @return {?}
*/
function (headerRowDef) {
this._customHeaderRowDefs.add(headerRowDef);
this._headerRowDefChanged = true;
};
/** Removes a header row definition that was not included as part of the content children. */
/**
* Removes a header row definition that was not included as part of the content children.
* @param {?} headerRowDef
* @return {?}
*/
CdkTable.prototype.removeHeaderRowDef = /**
* Removes a header row definition that was not included as part of the content children.
* @param {?} headerRowDef
* @return {?}
*/
function (headerRowDef) {
this._customHeaderRowDefs.delete(headerRowDef);
this._headerRowDefChanged = true;
};
/** Adds a footer row definition that was not included as part of the content children. */
/**
* Adds a footer row definition that was not included as part of the content children.
* @param {?} footerRowDef
* @return {?}
*/
CdkTable.prototype.addFooterRowDef = /**
* Adds a footer row definition that was not included as part of the content children.
* @param {?} footerRowDef
* @return {?}
*/
function (footerRowDef) {
this._customFooterRowDefs.add(footerRowDef);
this._footerRowDefChanged = true;
};
/** Removes a footer row definition that was not included as part of the content children. */
/**
* Removes a footer row definition that was not included as part of the content children.
* @param {?} footerRowDef
* @return {?}
*/
CdkTable.prototype.removeFooterRowDef = /**
* Removes a footer row definition that was not included as part of the content children.
* @param {?} footerRowDef
* @return {?}
*/
function (footerRowDef) {
this._customFooterRowDefs.delete(footerRowDef);
this._footerRowDefChanged = true;
};
/**
* Updates the header sticky styles. First resets all applied styles with respect to the cells
* sticking to the top. Then, evaluating which cells need to be stuck to the top. This is
* automatically called when the header row changes its displayed set of columns, or if its
* sticky input changes. May be called manually for cases where the cell content changes outside
* of these events.
*/
/**
* Updates the header sticky styles. First resets all applied styles with respect to the cells
* sticking to the top. Then, evaluating which cells need to be stuck to the top. This is
* automatically called when the header row changes its displayed set of columns, or if its
* sticky input changes. May be called manually for cases where the cell content changes outside
* of these events.
* @return {?}
*/
CdkTable.prototype.updateStickyHeaderRowStyles = /**
* Updates the header sticky styles. First resets all applied styles with respect to the cells
* sticking to the top. Then, evaluating which cells need to be stuck to the top. This is
* automatically called when the header row changes its displayed set of columns, or if its
* sticky input changes. May be called manually for cases where the cell content changes outside
* of these events.
* @return {?}
*/
function () {
/** @type {?} */
var headerRows = this._getRenderedRows(this._headerRowOutlet);
/** @type {?} */
var tableElement = (/** @type {?} */ (this._elementRef.nativeElement));
// Hide the thead element if there are no header rows. This is necessary to satisfy
// overzealous a11y checkers that fail because the `rowgroup` element does not contain
// required child `row`.
/** @type {?} */
var thead = tableElement.querySelector('thead');
if (thead) {
thead.style.display = headerRows.length ? '' : 'none';
}
/** @type {?} */
var stickyStates = this._headerRowDefs.map(function (def) { return def.sticky; });
this._stickyStyler.clearStickyPositioning(headerRows, ['top']);
this._stickyStyler.stickRows(headerRows, stickyStates, 'top');
// Reset the dirty state of the sticky input change since it has been used.
this._headerRowDefs.forEach(function (def) { return def.resetStickyChanged(); });
};
/**
* Updates the footer sticky styles. First resets all applied styles with respect to the cells
* sticking to the bottom. Then, evaluating which cells need to be stuck to the bottom. This is
* automatically called when the footer row changes its displayed set of columns, or if its
* sticky input changes. May be called manually for cases where the cell content changes outside
* of these events.
*/
/**
* Updates the footer sticky styles. First resets all applied styles with respect to the cells
* sticking to the bottom. Then, evaluating which cells need to be stuck to the bottom. This is
* automatically called when the footer row changes its displayed set of columns, or if its
* sticky input changes. May be called manually for cases where the cell content changes outside
* of these events.
* @return {?}
*/
CdkTable.prototype.updateStickyFooterRowStyles = /**
* Updates the footer sticky styles. First resets all applied styles with respect to the cells
* sticking to the bottom. Then, evaluating which cells need to be stuck to the bottom. This is
* automatically called when the footer row changes its displayed set of columns, or if its
* sticky input changes. May be called manually for cases where the cell content changes outside
* of these events.
* @return {?}
*/
function () {
/** @type {?} */
var footerRows = this._getRenderedRows(this._footerRowOutlet);
/** @type {?} */
var tableElement = (/** @type {?} */ (this._elementRef.nativeElement));
// Hide the tfoot element if there are no footer rows. This is necessary to satisfy
// overzealous a11y checkers that fail because the `rowgroup` element does not contain
// required child `row`.
/** @type {?} */
var tfoot = tableElement.querySelector('tfoot');
if (tfoot) {
tfoot.style.display = footerRows.length ? '' : 'none';
}
/** @type {?} */
var stickyStates = this._footerRowDefs.map(function (def) { return def.sticky; });
this._stickyStyler.clearStickyPositioning(footerRows, ['bottom']);
this._stickyStyler.stickRows(footerRows, stickyStates, 'bottom');
this._stickyStyler.updateStickyFooterContainer(this._elementRef.nativeElement, stickyStates);
// Reset the dirty state of the sticky input change since it has been used.
this._footerRowDefs.forEach(function (def) { return def.resetStickyChanged(); });
};
/**
* Updates the column sticky styles. First resets all applied styles with respect to the cells
* sticking to the left and right. Then sticky styles are added for the left and right according
* to the column definitions for each cell in each row. This is automatically called when
* the data source provides a new set of data or when a column definition changes its sticky
* input. May be called manually for cases where the cell content changes outside of these events.
*/
/**
* Updates the column sticky styles. First resets all applied styles with respect to the cells
* sticking to the left and right. Then sticky styles are added for the left and right according
* to the column definitions for each cell in each row. This is automatically called when
* the data source provides a new set of data or when a column definition changes its sticky
* input. May be called manually for cases where the cell content changes outside of these events.
* @return {?}
*/
CdkTable.prototype.updateStickyColumnStyles = /**
* Updates the column sticky styles. First resets all applied styles with respect to the cells
* sticking to the left and right. Then sticky styles are added for the left and right according
* to the column definitions for each cell in each row. This is automatically called when
* the data source provides a new set of data or when a column definition changes its sticky
* input. May be called manually for cases where the cell content changes outside of these events.
* @return {?}
*/
function () {
var _this = this;
/** @type {?} */
var headerRows = this._getRenderedRows(this._headerRowOutlet);
/** @type {?} */
var dataRows = this._getRenderedRows(this._rowOutlet);
/** @type {?} */
var footerRows = this._getRenderedRows(this._footerRowOutlet);
// Clear the left and right positioning from all columns in the table across all rows since
// sticky columns span across all table sections (header, data, footer)
this._stickyStyler.clearStickyPositioning(headerRows.concat(dataRows, footerRows), ['left', 'right']);
// Update the sticky styles for each header row depending on the def's sticky state
headerRows.forEach(function (headerRow, i) {
_this._addStickyColumnStyles([headerRow], _this._headerRowDefs[i]);
});
// Update the sticky styles for each data row depending on its def's sticky state
this._rowDefs.forEach(function (rowDef) {
// Collect all the rows rendered with this row definition.
/** @type {?} */
var rows = [];
for (var i = 0; i < dataRows.length; i++) {
if (_this._renderRows[i].rowDef === rowDef) {
rows.push(dataRows[i]);
}
}
_this._addStickyColumnStyles(rows, rowDef);
});
// Update the sticky styles for each footer row depending on the def's sticky state
footerRows.forEach(function (footerRow, i) {
_this._addStickyColumnStyles([footerRow], _this._footerRowDefs[i]);
});
// Reset the dirty state of the sticky input change since it has been used.
Array.from(this._columnDefsByName.values()).forEach(function (def) { return def.resetStickyChanged(); });
};
/**
* Get the list of RenderRow objects to render according to the current list of data and defined
* row definitions. If the previous list already contained a particular pair, it should be reused
* so that the differ equates their references.
*/
/**
* Get the list of RenderRow objects to render according to the current list of data and defined
* row definitions. If the previous list already contained a particular pair, it should be reused
* so that the differ equates their references.
* @private
* @return {?}
*/
CdkTable.prototype._getAllRenderRows = /**
* Get the list of RenderRow objects to render according to the current list of data and defined
* row definitions. If the previous list already contained a particular pair, it should be reused
* so that the differ equates their references.
* @private
* @return {?}
*/
function () {
/** @type {?} */
var renderRows = [];
// Store the cache and create a new one. Any re-used RenderRow objects will be moved into the
// new cache while unused ones can be picked up by garbage collection.
/** @type {?} */
var prevCachedRenderRows = this._cachedRenderRowsMap;
this._cachedRenderRowsMap = new Map();
// For each data object, get the list of rows that should be rendered, represented by the
// respective `RenderRow` object which is the pair of `data` and `CdkRowDef`.
for (var i = 0; i < this._data.length; i++) {
/** @type {?} */
var data = this._data[i];
/** @type {?} */
var renderRowsForData = this._getRenderRowsForData(data, i, prevCachedRenderRows.get(data));
if (!this._cachedRenderRowsMap.has(data)) {
this._cachedRenderRowsMap.set(data, new WeakMap());
}
for (var j = 0; j < renderRowsForData.length; j++) {
/** @type {?} */
var renderRow = renderRowsForData[j];
/** @type {?} */
var cache = (/** @type {?} */ (this._cachedRenderRowsMap.get(renderRow.data)));
if (cache.has(renderRow.rowDef)) {
(/** @type {?} */ (cache.get(renderRow.rowDef))).push(renderRow);
}
else {
cache.set(renderRow.rowDef, [renderRow]);
}
renderRows.push(renderRow);
}
}
return renderRows;
};
/**
* Gets a list of `RenderRow` for the provided data object and any `CdkRowDef` objects that
* should be rendered for this data. Reuses the cached RenderRow objects if they match the same
* `(T, CdkRowDef)` pair.
*/
/**
* Gets a list of `RenderRow` for the provided data object and any `CdkRowDef` objects that
* should be rendered for this data. Reuses the cached RenderRow objects if they match the same
* `(T, CdkRowDef)` pair.
* @private
* @param {?} data
* @param {?} dataIndex
* @param {?=} cache
* @return {?}
*/
CdkTable.prototype._getRenderRowsForData = /**
* Gets a list of `RenderRow` for the provided data object and any `CdkRowDef` objects that
* should be rendered for this data. Reuses the cached RenderRow objects if they match the same
* `(T, CdkRowDef)` pair.
* @private
* @param {?} data
* @param {?} dataIndex
* @param {?=} cache
* @return {?}
*/
function (data, dataIndex, cache) {
/** @type {?} */
var rowDefs = this._getRowDefs(data, dataIndex);
return rowDefs.map(function (rowDef) {
/** @type {?} */
var cachedRenderRows = (cache && cache.has(rowDef)) ? (/** @type {?} */ (cache.get(rowDef))) : [];
if (cachedRenderRows.length) {
/** @type {?} */
var dataRow = (/** @type {?} */ (cachedRenderRows.shift()));
dataRow.dataIndex = dataIndex;
return dataRow;
}
else {
return { data: data, rowDef: rowDef, dataIndex: dataIndex };
}
});
};
/** Update the map containing the content's column definitions. */
/**
* Update the map containing the content's column definitions.
* @private
* @return {?}
*/
CdkTable.prototype._cacheColumnDefs = /**
* Update the map containing the content's column definitions.
* @private
* @return {?}
*/
function () {
var _this = this;
this._columnDefsByName.clear();
/** @type {?} */
var columnDefs = mergeQueryListAndSet(this._contentColumnDefs, this._customColumnDefs);
columnDefs.forEach(function (columnDef) {
if (_this._columnDefsByName.has(columnDef.name)) {
throw getTableDuplicateColumnNameError(columnDef.name);
}
_this._columnDefsByName.set(columnDef.name, columnDef);
});
};
/** Update the list of all available row definitions that can be used. */
/**
* Update the list of all available row definitions that can be used.
* @private
* @return {?}
*/
CdkTable.prototype._cacheRowDefs = /**
* Update the list of all available row definitions that can be used.
* @private
* @return {?}
*/
function () {
this._headerRowDefs =
mergeQueryListAndSet(this._contentHeaderRowDefs, this._customHeaderRowDefs);
this._footerRowDefs =
mergeQueryListAndSet(this._contentFooterRowDefs, this._customFooterRowDefs);
this._rowDefs =
mergeQueryListAndSet(this._contentRowDefs, this._customRowDefs);
// After all row definitions are determined, find the row definition to be considered default.
/** @type {?} */
var defaultRowDefs = this._rowDefs.filter(function (def) { return !def.when; });
if (!this.multiTemplateDataRows && defaultRowDefs.length > 1) {
throw getTableMultipleDefaultRowDefsError();
}
this._defaultRowDef = defaultRowDefs[0];
};
/**
* Check if the header, data, or footer rows have changed what columns they want to display or
* whether the sticky states have changed for the header or footer. If there is a diff, then
* re-render that section.
*/
/**
* Check if the header, data, or footer rows have changed what columns they want to display or
* whether the sticky states have changed for the header or footer. If there is a diff, then
* re-render that section.
* @private
* @return {?}
*/
CdkTable.prototype._renderUpdatedColumns = /**
* Check if the header, data, or footer rows have changed what columns they want to display or
* whether the sticky states have changed for the header or footer. If there is a diff, then
* re-render that section.
* @private
* @return {?}
*/
function () {
/** @type {?} */
var columnsDiffReducer = function (acc, def) { return acc || !!def.getColumnsDiff(); };
// Force re-render data rows if the list of column definitions have changed.
if (this._rowDefs.reduce(columnsDiffReducer, false)) {
this._forceRenderDataRows();
}
// Force re-render header/footer rows if the list of column definitions have changed..
if (this._headerRowDefs.reduce(columnsDiffReducer, false)) {
this._forceRenderHeaderRows();
}
if (this._footerRowDefs.reduce(columnsDiffReducer, false)) {
this._forceRenderFooterRows();
}
};
/**
* Switch to the provided data source by resetting the data and unsubscribing from the current
* render change subscription if one exists. If the data source is null, interpret this by
* clearing the row outlet. Otherwise start listening for new data.
*/
/**
* Switch to the provided data source by resetting the data and unsubscribing from the current
* render change subscription if one exists. If the data source is null, interpret this by
* clearing the row outlet. Otherwise start listening for new data.
* @private
* @param {?} dataSource
* @return {?}
*/
CdkTable.prototype._switchDataSource = /**
* Switch to the provided data source by resetting the data and unsubscribing from the current
* render change subscription if one exists. If the data source is null, interpret this by
* clearing the row outlet. Otherwise start listening for new data.
* @private
* @param {?} dataSource
* @return {?}
*/
function (dataSource) {
this._data = [];
if (Object(_angular_cdk_collections__WEBPACK_IMPORTED_MODULE_3__["isDataSource"])(this.dataSource)) {
this.dataSource.disconnect(this);
}
// Stop listening for data from the previous data source.
if (this._renderChangeSubscription) {
this._renderChangeSubscription.unsubscribe();
this._renderChangeSubscription = null;
}
if (!dataSource) {
if (this._dataDiffer) {
this._dataDiffer.diff([]);
}
this._rowOutlet.viewContainer.clear();
}
this._dataSource = dataSource;
};
/** Set up a subscription for the data provided by the data source. */
/**
* Set up a subscription for the data provided by the data source.
* @private
* @return {?}
*/
CdkTable.prototype._observeRenderChanges = /**
* Set up a subscription for the data provided by the data source.
* @private
* @return {?}
*/
function () {
var _this = this;
// If no data source has been set, there is nothing to observe for changes.
if (!this.dataSource) {
return;
}
/** @type {?} */
var dataStream;
if (Object(_angular_cdk_collections__WEBPACK_IMPORTED_MODULE_3__["isDataSource"])(this.dataSource)) {
dataStream = this.dataSource.connect(this);
}
else if (this.dataSource instanceof rxjs__WEBPACK_IMPORTED_MODULE_5__["Observable"]) {
dataStream = this.dataSource;
}
else if (Array.isArray(this.dataSource)) {
dataStream = Object(rxjs__WEBPACK_IMPORTED_MODULE_5__["of"])(this.dataSource);
}
if (dataStream === undefined) {
throw getTableUnknownDataSourceError();
}
this._renderChangeSubscription = dataStream
.pipe(Object(rxjs_operators__WEBPACK_IMPORTED_MODULE_6__["takeUntil"])(this._onDestroy))
.subscribe(function (data) {
_this._data = data || [];
_this.renderRows();
});
};
/**
* Clears any existing content in the header row outlet and creates a new embedded view
* in the outlet using the header row definition.
*/
/**
* Clears any existing content in the header row outlet and creates a new embedded view
* in the outlet using the header row definition.
* @private
* @return {?}
*/
CdkTable.prototype._forceRenderHeaderRows = /**
* Clears any existing content in the header row outlet and creates a new embedded view
* in the outlet using the header row definition.
* @private
* @return {?}
*/
function () {
var _this = this;
// Clear the header row outlet if any content exists.
if (this._headerRowOutlet.viewContainer.length > 0) {
this._headerRowOutlet.viewContainer.clear();
}
this._headerRowDefs.forEach(function (def, i) { return _this._renderRow(_this._headerRowOutlet, def, i); });
this.updateStickyHeaderRowStyles();
this.updateStickyColumnStyles();
};
/**
* Clears any existing content in the footer row outlet and creates a new embedded view
* in the outlet using the footer row definition.
*/
/**
* Clears any existing content in the footer row outlet and creates a new embedded view
* in the outlet using the footer row definition.
* @private
* @return {?}
*/
CdkTable.prototype._forceRenderFooterRows = /**
* Clears any existing content in the footer row outlet and creates a new embedded view
* in the outlet using the footer row definition.
* @private
* @return {?}
*/
function () {
var _this = this;
// Clear the footer row outlet if any content exists.
if (this._footerRowOutlet.viewContainer.length > 0) {
this._footerRowOutlet.viewContainer.clear();
}
this._footerRowDefs.forEach(function (def, i) { return _this._renderRow(_this._footerRowOutlet, def, i); });
this.updateStickyFooterRowStyles();
this.updateStickyColumnStyles();
};
/** Adds the sticky column styles for the rows according to the columns' stick states. */
/**
* Adds the sticky column styles for the rows according to the columns' stick states.
* @private
* @param {?} rows
* @param {?} rowDef
* @return {?}
*/
CdkTable.prototype._addStickyColumnStyles = /**
* Adds the sticky column styles for the rows according to the columns' stick states.
* @private
* @param {?} rows
* @param {?} rowDef
* @return {?}
*/
function (rows, rowDef) {
var _this = this;
/** @type {?} */
var columnDefs = Array.from(rowDef.columns || []).map(function (columnName) {
/** @type {?} */
var columnDef = _this._columnDefsByName.get(columnName);
if (!columnDef) {
throw getTableUnknownColumnError(columnName);
}
return (/** @type {?} */ (columnDef));
});
/** @type {?} */
var stickyStartStates = columnDefs.map(function (columnDef) { return columnDef.sticky; });
/** @type {?} */
var stickyEndStates = columnDefs.map(function (columnDef) { return columnDef.stickyEnd; });
this._stickyStyler.updateStickyColumns(rows, stickyStartStates, stickyEndStates);
};
/** Gets the list of rows that have been rendered in the row outlet. */
/**
* Gets the list of rows that have been rendered in the row outlet.
* @param {?} rowOutlet
* @return {?}
*/
CdkTable.prototype._getRenderedRows = /**
* Gets the list of rows that have been rendered in the row outlet.
* @param {?} rowOutlet
* @return {?}
*/
function (rowOutlet) {
/** @type {?} */
var renderedRows = [];
for (var i = 0; i < rowOutlet.viewContainer.length; i++) {
/** @type {?} */
var viewRef = ((/** @type {?} */ ((/** @type {?} */ (rowOutlet.viewContainer.get(i))))));
renderedRows.push(viewRef.rootNodes[0]);
}
return renderedRows;
};
/**
* Get the matching row definitions that should be used for this row data. If there is only
* one row definition, it is returned. Otherwise, find the row definitions that has a when
* predicate that returns true with the data. If none return true, return the default row
* definition.
*/
/**
* Get the matching row definitions that should be used for this row data. If there is only
* one row definition, it is returned. Otherwise, find the row definitions that has a when
* predicate that returns true with the data. If none return true, return the default row
* definition.
* @param {?} data
* @param {?} dataIndex
* @return {?}
*/
CdkTable.prototype._getRowDefs = /**
* Get the matching row definitions that should be used for this row data. If there is only
* one row definition, it is returned. Otherwise, find the row definitions that has a when
* predicate that returns true with the data. If none return true, return the default row
* definition.
* @param {?} data
* @param {?} dataIndex
* @return {?}
*/
function (data, dataIndex) {
if (this._rowDefs.length == 1) {
return [this._rowDefs[0]];
}
/** @type {?} */
var rowDefs = [];
if (this.multiTemplateDataRows) {
rowDefs = this._rowDefs.filter(function (def) { return !def.when || def.when(dataIndex, data); });
}
else {
/** @type {?} */
var rowDef = this._rowDefs.find(function (def) { return def.when && def.when(dataIndex, data); }) || this._defaultRowDef;
if (rowDef) {
rowDefs.push(rowDef);
}
}
if (!rowDefs.length) {
throw getTableMissingMatchingRowDefError(data);
}
return rowDefs;
};
/**
* Create the embedded view for the data row template and place it in the correct index location
* within the data row view container.
*/
/**
* Create the embedded view for the data row template and place it in the correct index location
* within the data row view container.
* @private
* @param {?} renderRow
* @param {?} renderIndex
* @return {?}
*/
CdkTable.prototype._insertRow = /**
* Create the embedded view for the data row template and place it in the correct index location
* within the data row view container.
* @private
* @param {?} renderRow
* @param {?} renderIndex
* @return {?}
*/
function (renderRow, renderIndex) {
/** @type {?} */
var rowDef = renderRow.rowDef;
/** @type {?} */
var context = { $implicit: renderRow.data };
this._renderRow(this._rowOutlet, rowDef, renderIndex, context);
};
/**
* Creates a new row template in the outlet and fills it with the set of cell templates.
* Optionally takes a context to provide to the row and cells, as well as an optional index
* of where to place the new row template in the outlet.
*/
/**
* Creates a new row template in the outlet and fills it with the set of cell templates.
* Optionally takes a context to provide to the row and cells, as well as an optional index
* of where to place the new row template in the outlet.
* @private
* @param {?} outlet
* @param {?} rowDef
* @param {?} index
* @param {?=} context
* @return {?}
*/
CdkTable.prototype._renderRow = /**
* Creates a new row template in the outlet and fills it with the set of cell templates.
* Optionally takes a context to provide to the row and cells, as well as an optional index
* of where to place the new row template in the outlet.
* @private
* @param {?} outlet
* @param {?} rowDef
* @param {?} index
* @param {?=} context
* @return {?}
*/
function (outlet, rowDef, index, context) {
if (context === void 0) { context = {}; }
// TODO(andrewseguin): enforce that one outlet was instantiated from createEmbeddedView
outlet.viewContainer.createEmbeddedView(rowDef.template, context, index);
for (var _a = 0, _b = this._getCellTemplates(rowDef); _a < _b.length; _a++) {
var cellTemplate = _b[_a];
if (CdkCellOutlet.mostRecentCellOutlet) {
CdkCellOutlet.mostRecentCellOutlet._viewContainer.createEmbeddedView(cellTemplate, context);
}
}
this._changeDetectorRef.markForCheck();
};
/**
* Updates the index-related context for each row to reflect any changes in the index of the rows,
* e.g. first/last/even/odd.
*/
/**
* Updates the index-related context for each row to reflect any changes in the index of the rows,
* e.g. first/last/even/odd.
* @private
* @return {?}
*/
CdkTable.prototype._updateRowIndexContext = /**
* Updates the index-related context for each row to reflect any changes in the index of the rows,
* e.g. first/last/even/odd.
* @private
* @return {?}
*/
function () {
/** @type {?} */
var viewContainer = this._rowOutlet.viewContainer;
for (var renderIndex = 0, count = viewContainer.length; renderIndex < count; renderIndex++) {
/** @type {?} */
var viewRef = (/** @type {?} */ (viewContainer.get(renderIndex)));
/** @type {?} */
var context = (/** @type {?} */ (viewRef.context));
context.count = count;
context.first = renderIndex === 0;
context.last = renderIndex === count - 1;
context.even = renderIndex % 2 === 0;
context.odd = !context.even;
if (this.multiTemplateDataRows) {
context.dataIndex = this._renderRows[renderIndex].dataIndex;
context.renderIndex = renderIndex;
}
else {
context.index = this._renderRows[renderIndex].dataIndex;
}
}
};
/** Gets the column definitions for the provided row def. */
/**
* Gets the column definitions for the provided row def.
* @private
* @param {?} rowDef
* @return {?}
*/
CdkTable.prototype._getCellTemplates = /**
* Gets the column definitions for the provided row def.
* @private
* @param {?} rowDef
* @return {?}
*/
function (rowDef) {
var _this = this;
if (!rowDef || !rowDef.columns) {
return [];
}
return Array.from(rowDef.columns, function (columnId) {
/** @type {?} */
var column = _this._columnDefsByName.get(columnId);
if (!column) {
throw getTableUnknownColumnError(columnId);
}
return rowDef.extractCellTemplate(column);
});
};
/** Adds native table sections (e.g. tbody) and moves the row outlets into them. */
/**
* Adds native table sections (e.g. tbody) and moves the row outlets into them.
* @private
* @return {?}
*/
CdkTable.prototype._applyNativeTableSections = /**
* Adds native table sections (e.g. tbody) and moves the row outlets into them.
* @private
* @return {?}
*/
function () {
// @breaking-change 8.0.0 remove the `|| document` once the `_document` is a required param.
/** @type {?} */
var documentRef = this._document || document;
/** @type {?} */
var documentFragment = documentRef.createDocumentFragment();
/** @type {?} */
var sections = [
{ tag: 'thead', outlet: this._headerRowOutlet },
{ tag: 'tbody', outlet: this._rowOutlet },
{ tag: 'tfoot', outlet: this._footerRowOutlet },
];
for (var _a = 0, sections_1 = sections; _a < sections_1.length; _a++) {
var section = sections_1[_a];
/** @type {?} */
var element = documentRef.createElement(section.tag);
element.setAttribute('role', 'rowgroup');
element.appendChild(section.outlet.elementRef.nativeElement);
documentFragment.appendChild(element);
}
// Use a DocumentFragment so we don't hit the DOM on each iteration.
this._elementRef.nativeElement.appendChild(documentFragment);
};
/**
* Forces a re-render of the data rows. Should be called in cases where there has been an input
* change that affects the evaluation of which rows should be rendered, e.g. toggling
* `multiTemplateDataRows` or adding/removing row definitions.
*/
/**
* Forces a re-render of the data rows. Should be called in cases where there has been an input
* change that affects the evaluation of which rows should be rendered, e.g. toggling
* `multiTemplateDataRows` or adding/removing row definitions.
* @private
* @return {?}
*/
CdkTable.prototype._forceRenderDataRows = /**
* Forces a re-render of the data rows. Should be called in cases where there has been an input
* change that affects the evaluation of which rows should be rendered, e.g. toggling
* `multiTemplateDataRows` or adding/removing row definitions.
* @private
* @return {?}
*/
function () {
this._dataDiffer.diff([]);
this._rowOutlet.viewContainer.clear();
this.renderRows();
this.updateStickyColumnStyles();
};
/**
* Checks if there has been a change in sticky states since last check and applies the correct
* sticky styles. Since checking resets the "dirty" state, this should only be performed once
* during a change detection and after the inputs are settled (after content check).
*/
/**
* Checks if there has been a change in sticky states since last check and applies the correct
* sticky styles. Since checking resets the "dirty" state, this should only be performed once
* during a change detection and after the inputs are settled (after content check).
* @private
* @return {?}
*/
CdkTable.prototype._checkStickyStates = /**
* Checks if there has been a change in sticky states since last check and applies the correct
* sticky styles. Since checking resets the "dirty" state, this should only be performed once
* during a change detection and after the inputs are settled (after content check).
* @private
* @return {?}
*/
function () {
/** @type {?} */
var stickyCheckReducer = function (acc, d) {
return acc || d.hasStickyChanged();
};
// Note that the check needs to occur for every definition since it notifies the definition
// that it can reset its dirty state. Using another operator like `some` may short-circuit
// remaining definitions and leave them in an unchecked state.
if (this._headerRowDefs.reduce(stickyCheckReducer, false)) {
this.updateStickyHeaderRowStyles();
}
if (this._footerRowDefs.reduce(stickyCheckReducer, false)) {
this.updateStickyFooterRowStyles();
}
if (Array.from(this._columnDefsByName.values()).reduce(stickyCheckReducer, false)) {
this.updateStickyColumnStyles();
}
};
/**
* Creates the sticky styler that will be used for sticky rows and columns. Listens
* for directionality changes and provides the latest direction to the styler. Re-applies column
* stickiness when directionality changes.
*/
/**
* Creates the sticky styler that will be used for sticky rows and columns. Listens
* for directionality changes and provides the latest direction to the styler. Re-applies column
* stickiness when directionality changes.
* @private
* @return {?}
*/
CdkTable.prototype._setupStickyStyler = /**
* Creates the sticky styler that will be used for sticky rows and columns. Listens
* for directionality changes and provides the latest direction to the styler. Re-applies column
* stickiness when directionality changes.
* @private
* @return {?}
*/
function () {
var _this = this;
/** @type {?} */
var direction = this._dir ? this._dir.value : 'ltr';
this._stickyStyler = new StickyStyler(this._isNativeHtmlTable,
// @breaking-change 8.0.0 remove the null check for `this._platform`.
this.stickyCssClass, direction, this._platform ? this._platform.isBrowser : true);
(this._dir ? this._dir.change : Object(rxjs__WEBPACK_IMPORTED_MODULE_5__["of"])())
.pipe(Object(rxjs_operators__WEBPACK_IMPORTED_MODULE_6__["takeUntil"])(this._onDestroy))
.subscribe(function (value) {
_this._stickyStyler.direction = value;
_this.updateStickyColumnStyles();
});
};
CdkTable.decorators = [
{ type: _angular_core__WEBPACK_IMPORTED_MODULE_2__["Component"], args: [{selector: 'cdk-table, table[cdk-table]',
exportAs: 'cdkTable',
template: CDK_TABLE_TEMPLATE,
host: {
'class': 'cdk-table',
},
encapsulation: _angular_core__WEBPACK_IMPORTED_MODULE_2__["ViewEncapsulation"].None,
changeDetection: _angular_core__WEBPACK_IMPORTED_MODULE_2__["ChangeDetectionStrategy"].OnPush,
},] },
];
/** @nocollapse */
CdkTable.ctorParameters = function () { return [
{ type: _angular_core__WEBPACK_IMPORTED_MODULE_2__["IterableDiffers"] },
{ type: _angular_core__WEBPACK_IMPORTED_MODULE_2__["ChangeDetectorRef"] },
{ type: _angular_core__WEBPACK_IMPORTED_MODULE_2__["ElementRef"] },
{ type: String, decorators: [{ type: _angular_core__WEBPACK_IMPORTED_MODULE_2__["Attribute"], args: ['role',] }] },
{ type: _angular_cdk_bidi__WEBPACK_IMPORTED_MODULE_7__["Directionality"], decorators: [{ type: _angular_core__WEBPACK_IMPORTED_MODULE_2__["Optional"] }] },
{ type: undefined, decorators: [{ type: _angular_core__WEBPACK_IMPORTED_MODULE_2__["Inject"], args: [_angular_common__WEBPACK_IMPORTED_MODULE_4__["DOCUMENT"],] }] },
{ type: _angular_cdk_platform__WEBPACK_IMPORTED_MODULE_8__["Platform"] }
]; };
CdkTable.propDecorators = {
trackBy: [{ type: _angular_core__WEBPACK_IMPORTED_MODULE_2__["Input"] }],
dataSource: [{ type: _angular_core__WEBPACK_IMPORTED_MODULE_2__["Input"] }],
multiTemplateDataRows: [{ type: _angular_core__WEBPACK_IMPORTED_MODULE_2__["Input"] }],
_rowOutlet: [{ type: _angular_core__WEBPACK_IMPORTED_MODULE_2__["ViewChild"], args: [DataRowOutlet,] }],
_headerRowOutlet: [{ type: _angular_core__WEBPACK_IMPORTED_MODULE_2__["ViewChild"], args: [HeaderRowOutlet,] }],
_footerRowOutlet: [{ type: _angular_core__WEBPACK_IMPORTED_MODULE_2__["ViewChild"], args: [FooterRowOutlet,] }],
_contentColumnDefs: [{ type: _angular_core__WEBPACK_IMPORTED_MODULE_2__["ContentChildren"], args: [CdkColumnDef,] }],
_contentRowDefs: [{ type: _angular_core__WEBPACK_IMPORTED_MODULE_2__["ContentChildren"], args: [CdkRowDef,] }],
_contentHeaderRowDefs: [{ type: _angular_core__WEBPACK_IMPORTED_MODULE_2__["ContentChildren"], args: [CdkHeaderRowDef,] }],
_contentFooterRowDefs: [{ type: _angular_core__WEBPACK_IMPORTED_MODULE_2__["ContentChildren"], args: [CdkFooterRowDef,] }]
};
return CdkTable;
}());
/**
* Utility function that gets a merged list of the entries in a QueryList and values of a Set.
* @template T
* @param {?} queryList
* @param {?} set
* @return {?}
*/
function mergeQueryListAndSet(queryList, set) {
return queryList.toArray().concat(Array.from(set));
}
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/** @type {?} */
var EXPORTED_DECLARATIONS = [
CdkTable,
CdkRowDef,
CdkCellDef,
CdkCellOutlet,
CdkHeaderCellDef,
CdkFooterCellDef,
CdkColumnDef,
CdkCell,
CdkRow,
CdkHeaderCell,
CdkFooterCell,
CdkHeaderRow,
CdkHeaderRowDef,
CdkFooterRow,
CdkFooterRowDef,
DataRowOutlet,
HeaderRowOutlet,
FooterRowOutlet,
];
var CdkTableModule = /** @class */ (function () {
function CdkTableModule() {
}
CdkTableModule.decorators = [
{ type: _angular_core__WEBPACK_IMPORTED_MODULE_2__["NgModule"], args: [{
imports: [_angular_common__WEBPACK_IMPORTED_MODULE_4__["CommonModule"]],
exports: EXPORTED_DECLARATIONS,
declarations: EXPORTED_DECLARATIONS
},] },
];
return CdkTableModule;
}());
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
//# sourceMappingURL=table.es5.js.map
/***/ }),
/***/ "./node_modules/@angular/cdk/esm5/text-field.es5.js":
/*!**********************************************************!*\
!*** ./node_modules/@angular/cdk/esm5/text-field.es5.js ***!
\**********************************************************/
/*! exports provided: AutofillMonitor, CdkAutofill, CdkTextareaAutosize, TextFieldModule */
/***/ (function(module, __webpack_exports__, __webpack_require__) {
"use strict";
__webpack_require__.r(__webpack_exports__);
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "AutofillMonitor", function() { return AutofillMonitor; });
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "CdkAutofill", function() { return CdkAutofill; });
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "CdkTextareaAutosize", function() { return CdkTextareaAutosize; });
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "TextFieldModule", function() { return TextFieldModule; });
/* harmony import */ var _angular_cdk_platform__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @angular/cdk/platform */ "./node_modules/@angular/cdk/esm5/platform.es5.js");
/* harmony import */ var _angular_core__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! @angular/core */ "./node_modules/@angular/core/fesm5/core.js");
/* harmony import */ var _angular_cdk_coercion__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! @angular/cdk/coercion */ "./node_modules/@angular/cdk/esm5/coercion.es5.js");
/* harmony import */ var rxjs__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! rxjs */ "./node_modules/rxjs/_esm5/index.js");
/* harmony import */ var rxjs_operators__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! rxjs/operators */ "./node_modules/rxjs/_esm5/operators/index.js");
/**
* @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
*/
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/**
* Options to pass to the animationstart listener.
* @type {?}
*/
var listenerOptions = Object(_angular_cdk_platform__WEBPACK_IMPORTED_MODULE_0__["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
*/
var AutofillMonitor = /** @class */ (function () {
function AutofillMonitor(_platform, _ngZone) {
this._platform = _platform;
this._ngZone = _ngZone;
this._monitoredElements = new Map();
}
/**
* @param {?} elementOrRef
* @return {?}
*/
AutofillMonitor.prototype.monitor = /**
* @param {?} elementOrRef
* @return {?}
*/
function (elementOrRef) {
var _this = this;
if (!this._platform.isBrowser) {
return rxjs__WEBPACK_IMPORTED_MODULE_3__["EMPTY"];
}
/** @type {?} */
var element = Object(_angular_cdk_coercion__WEBPACK_IMPORTED_MODULE_2__["coerceElement"])(elementOrRef);
/** @type {?} */
var info = this._monitoredElements.get(element);
if (info) {
return info.subject.asObservable();
}
/** @type {?} */
var result = new rxjs__WEBPACK_IMPORTED_MODULE_3__["Subject"]();
/** @type {?} */
var cssClass = 'cdk-text-field-autofilled';
/** @type {?} */
var listener = (/** @type {?} */ ((function (event) {
// 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(function () { return result.next({ target: (/** @type {?} */ (event.target)), isAutofilled: true }); });
}
else if (event.animationName === 'cdk-text-field-autofill-end' &&
element.classList.contains(cssClass)) {
element.classList.remove(cssClass);
_this._ngZone.run(function () { return result.next({ target: (/** @type {?} */ (event.target)), isAutofilled: false }); });
}
})));
this._ngZone.runOutsideAngular(function () {
element.addEventListener('animationstart', listener, listenerOptions);
element.classList.add('cdk-text-field-autofill-monitored');
});
this._monitoredElements.set(element, {
subject: result,
unlisten: function () {
element.removeEventListener('animationstart', listener, listenerOptions);
}
});
return result.asObservable();
};
/**
* @param {?} elementOrRef
* @return {?}
*/
AutofillMonitor.prototype.stopMonitoring = /**
* @param {?} elementOrRef
* @return {?}
*/
function (elementOrRef) {
/** @type {?} */
var element = Object(_angular_cdk_coercion__WEBPACK_IMPORTED_MODULE_2__["coerceElement"])(elementOrRef);
/** @type {?} */
var 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);
}
};
/**
* @return {?}
*/
AutofillMonitor.prototype.ngOnDestroy = /**
* @return {?}
*/
function () {
var _this = this;
this._monitoredElements.forEach(function (_info, element) { return _this.stopMonitoring(element); });
};
AutofillMonitor.decorators = [
{ type: _angular_core__WEBPACK_IMPORTED_MODULE_1__["Injectable"], args: [{ providedIn: 'root' },] },
];
/** @nocollapse */
AutofillMonitor.ctorParameters = function () { return [
{ type: _angular_cdk_platform__WEBPACK_IMPORTED_MODULE_0__["Platform"] },
{ type: _angular_core__WEBPACK_IMPORTED_MODULE_1__["NgZone"] }
]; };
/** @nocollapse */ AutofillMonitor.ngInjectableDef = Object(_angular_core__WEBPACK_IMPORTED_MODULE_1__["defineInjectable"])({ factory: function AutofillMonitor_Factory() { return new AutofillMonitor(Object(_angular_core__WEBPACK_IMPORTED_MODULE_1__["inject"])(_angular_cdk_platform__WEBPACK_IMPORTED_MODULE_0__["Platform"]), Object(_angular_core__WEBPACK_IMPORTED_MODULE_1__["inject"])(_angular_core__WEBPACK_IMPORTED_MODULE_1__["NgZone"])); }, token: AutofillMonitor, providedIn: "root" });
return AutofillMonitor;
}());
/**
* A directive that can be used to monitor the autofill state of an input.
*/
var CdkAutofill = /** @class */ (function () {
function CdkAutofill(_elementRef, _autofillMonitor) {
this._elementRef = _elementRef;
this._autofillMonitor = _autofillMonitor;
/**
* Emits when the autofill state of the element changes.
*/
this.cdkAutofill = new _angular_core__WEBPACK_IMPORTED_MODULE_1__["EventEmitter"]();
}
/**
* @return {?}
*/
CdkAutofill.prototype.ngOnInit = /**
* @return {?}
*/
function () {
var _this = this;
this._autofillMonitor
.monitor(this._elementRef)
.subscribe(function (event) { return _this.cdkAutofill.emit(event); });
};
/**
* @return {?}
*/
CdkAutofill.prototype.ngOnDestroy = /**
* @return {?}
*/
function () {
this._autofillMonitor.stopMonitoring(this._elementRef);
};
CdkAutofill.decorators = [
{ type: _angular_core__WEBPACK_IMPORTED_MODULE_1__["Directive"], args: [{
selector: '[cdkAutofill]',
},] },
];
/** @nocollapse */
CdkAutofill.ctorParameters = function () { return [
{ type: _angular_core__WEBPACK_IMPORTED_MODULE_1__["ElementRef"] },
{ type: AutofillMonitor }
]; };
CdkAutofill.propDecorators = {
cdkAutofill: [{ type: _angular_core__WEBPACK_IMPORTED_MODULE_1__["Output"] }]
};
return CdkAutofill;
}());
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/**
* Directive to automatically resize a textarea to fit its content.
*/
var CdkTextareaAutosize = /** @class */ (function () {
function CdkTextareaAutosize(_elementRef, _platform, _ngZone) {
this._elementRef = _elementRef;
this._platform = _platform;
this._ngZone = _ngZone;
this._destroyed = new rxjs__WEBPACK_IMPORTED_MODULE_3__["Subject"]();
this._enabled = true;
/**
* Value of minRows as of last resize. If the minRows has decreased, the
* height of the textarea needs to be recomputed to reflect the new minimum. The maxHeight
* does not have the same problem because it does not affect the textarea's scrollHeight.
*/
this._previousMinRows = -1;
this._textareaElement = (/** @type {?} */ (this._elementRef.nativeElement));
}
Object.defineProperty(CdkTextareaAutosize.prototype, "minRows", {
/** Minimum amount of rows in the textarea. */
get: /**
* Minimum amount of rows in the textarea.
* @return {?}
*/
function () { return this._minRows; },
set: /**
* @param {?} value
* @return {?}
*/
function (value) {
this._minRows = value;
this._setMinHeight();
},
enumerable: true,
configurable: true
});
Object.defineProperty(CdkTextareaAutosize.prototype, "maxRows", {
/** Maximum amount of rows in the textarea. */
get: /**
* Maximum amount of rows in the textarea.
* @return {?}
*/
function () { return this._maxRows; },
set: /**
* @param {?} value
* @return {?}
*/
function (value) {
this._maxRows = value;
this._setMaxHeight();
},
enumerable: true,
configurable: true
});
Object.defineProperty(CdkTextareaAutosize.prototype, "enabled", {
/** Whether autosizing is enabled or not */
get: /**
* Whether autosizing is enabled or not
* @return {?}
*/
function () { return this._enabled; },
set: /**
* @param {?} value
* @return {?}
*/
function (value) {
value = Object(_angular_cdk_coercion__WEBPACK_IMPORTED_MODULE_2__["coerceBooleanProperty"])(value);
// Only act if the actual value changed. This specifically helps to not run
// resizeToFitContent too early (i.e. before ngAfterViewInit)
if (this._enabled !== value) {
(this._enabled = value) ? this.resizeToFitContent(true) : this.reset();
}
},
enumerable: true,
configurable: true
});
/** Sets the minimum height of the textarea as determined by minRows. */
/**
* Sets the minimum height of the textarea as determined by minRows.
* @return {?}
*/
CdkTextareaAutosize.prototype._setMinHeight = /**
* Sets the minimum height of the textarea as determined by minRows.
* @return {?}
*/
function () {
/** @type {?} */
var minHeight = this.minRows && this._cachedLineHeight ?
this.minRows * this._cachedLineHeight + "px" : null;
if (minHeight) {
this._textareaElement.style.minHeight = minHeight;
}
};
/** Sets the maximum height of the textarea as determined by maxRows. */
/**
* Sets the maximum height of the textarea as determined by maxRows.
* @return {?}
*/
CdkTextareaAutosize.prototype._setMaxHeight = /**
* Sets the maximum height of the textarea as determined by maxRows.
* @return {?}
*/
function () {
/** @type {?} */
var maxHeight = this.maxRows && this._cachedLineHeight ?
this.maxRows * this._cachedLineHeight + "px" : null;
if (maxHeight) {
this._textareaElement.style.maxHeight = maxHeight;
}
};
/**
* @return {?}
*/
CdkTextareaAutosize.prototype.ngAfterViewInit = /**
* @return {?}
*/
function () {
var _this = this;
if (this._platform.isBrowser) {
// Remember the height which we started with in case autosizing is disabled
this._initialHeight = this._textareaElement.style.height;
this.resizeToFitContent();
this._ngZone.runOutsideAngular(function () {
Object(rxjs__WEBPACK_IMPORTED_MODULE_3__["fromEvent"])(window, 'resize')
.pipe(Object(rxjs_operators__WEBPACK_IMPORTED_MODULE_4__["auditTime"])(16), Object(rxjs_operators__WEBPACK_IMPORTED_MODULE_4__["takeUntil"])(_this._destroyed))
.subscribe(function () { return _this.resizeToFitContent(true); });
});
}
};
/**
* @return {?}
*/
CdkTextareaAutosize.prototype.ngOnDestroy = /**
* @return {?}
*/
function () {
this._destroyed.next();
this._destroyed.complete();
};
/**
* Cache the height of a single-row textarea if it has not already been cached.
*
* We need to know how large a single "row" of a textarea is in order to apply minRows and
* maxRows. For the initial version, we will assume that the height of a single line in the
* textarea does not ever change.
*/
/**
* Cache the height of a single-row textarea if it has not already been cached.
*
* We need to know how large a single "row" of a textarea is in order to apply minRows and
* maxRows. For the initial version, we will assume that the height of a single line in the
* textarea does not ever change.
* @private
* @return {?}
*/
CdkTextareaAutosize.prototype._cacheTextareaLineHeight = /**
* Cache the height of a single-row textarea if it has not already been cached.
*
* We need to know how large a single "row" of a textarea is in order to apply minRows and
* maxRows. For the initial version, we will assume that the height of a single line in the
* textarea does not ever change.
* @private
* @return {?}
*/
function () {
if (this._cachedLineHeight) {
return;
}
// Use a clone element because we have to override some styles.
/** @type {?} */
var textareaClone = (/** @type {?} */ (this._textareaElement.cloneNode(false)));
textareaClone.rows = 1;
// Use `position: absolute` so that this doesn't cause a browser layout and use
// `visibility: hidden` so that nothing is rendered. Clear any other styles that
// would affect the height.
textareaClone.style.position = 'absolute';
textareaClone.style.visibility = 'hidden';
textareaClone.style.border = 'none';
textareaClone.style.padding = '0';
textareaClone.style.height = '';
textareaClone.style.minHeight = '';
textareaClone.style.maxHeight = '';
// In Firefox it happens that textarea elements are always bigger than the specified amount
// of rows. This is because Firefox tries to add extra space for the horizontal scrollbar.
// As a workaround that removes the extra space for the scrollbar, we can just set overflow
// to hidden. This ensures that there is no invalid calculation of the line height.
// See Firefox bug report: https://bugzilla.mozilla.org/show_bug.cgi?id=33654
textareaClone.style.overflow = 'hidden';
(/** @type {?} */ (this._textareaElement.parentNode)).appendChild(textareaClone);
this._cachedLineHeight = textareaClone.clientHeight;
(/** @type {?} */ (this._textareaElement.parentNode)).removeChild(textareaClone);
// Min and max heights have to be re-calculated if the cached line height changes
this._setMinHeight();
this._setMaxHeight();
};
/**
* @return {?}
*/
CdkTextareaAutosize.prototype.ngDoCheck = /**
* @return {?}
*/
function () {
if (this._platform.isBrowser) {
this.resizeToFitContent();
}
};
/**
* Resize the textarea to fit its content.
* @param force Whether to force a height recalculation. By default the height will be
* recalculated only if the value changed since the last call.
*/
/**
* Resize the textarea to fit its content.
* @param {?=} force Whether to force a height recalculation. By default the height will be
* recalculated only if the value changed since the last call.
* @return {?}
*/
CdkTextareaAutosize.prototype.resizeToFitContent = /**
* Resize the textarea to fit its content.
* @param {?=} force Whether to force a height recalculation. By default the height will be
* recalculated only if the value changed since the last call.
* @return {?}
*/
function (force) {
var _this = this;
if (force === void 0) { force = false; }
// If autosizing is disabled, just skip everything else
if (!this._enabled) {
return;
}
this._cacheTextareaLineHeight();
// If we haven't determined the line-height yet, we know we're still hidden and there's no point
// in checking the height of the textarea.
if (!this._cachedLineHeight) {
return;
}
/** @type {?} */
var textarea = (/** @type {?} */ (this._elementRef.nativeElement));
/** @type {?} */
var value = textarea.value;
// Only resize if the value or minRows have changed since these calculations can be expensive.
if (!force && this._minRows === this._previousMinRows && value === this._previousValue) {
return;
}
/** @type {?} */
var placeholderText = textarea.placeholder;
// Reset the textarea height to auto in order to shrink back to its default size.
// Also temporarily force overflow:hidden, so scroll bars do not interfere with calculations.
// Long placeholders that are wider than the textarea width may lead to a bigger scrollHeight
// value. To ensure that the scrollHeight is not bigger than the content, the placeholders
// need to be removed temporarily.
textarea.classList.add('cdk-textarea-autosize-measuring');
textarea.placeholder = '';
// The cdk-textarea-autosize-measuring class includes a 2px padding to workaround an issue with
// Chrome, so we account for that extra space here by subtracting 4 (2px top + 2px bottom).
/** @type {?} */
var height = textarea.scrollHeight - 4;
// Use the scrollHeight to know how large the textarea *would* be if fit its entire value.
textarea.style.height = height + "px";
textarea.classList.remove('cdk-textarea-autosize-measuring');
textarea.placeholder = placeholderText;
this._ngZone.runOutsideAngular(function () {
if (typeof requestAnimationFrame !== 'undefined') {
requestAnimationFrame(function () { return _this._scrollToCaretPosition(textarea); });
}
else {
setTimeout(function () { return _this._scrollToCaretPosition(textarea); });
}
});
this._previousValue = value;
this._previousMinRows = this._minRows;
};
/**
* Resets the textarea to it's original size
*/
/**
* Resets the textarea to it's original size
* @return {?}
*/
CdkTextareaAutosize.prototype.reset = /**
* Resets the textarea to it's original size
* @return {?}
*/
function () {
// Do not try to change the textarea, if the initialHeight has not been determined yet
// This might potentially remove styles when reset() is called before ngAfterViewInit
if (this._initialHeight === undefined) {
return;
}
this._textareaElement.style.height = this._initialHeight;
};
/**
* @return {?}
*/
CdkTextareaAutosize.prototype._noopInputHandler = /**
* @return {?}
*/
function () {
// no-op handler that ensures we're running change detection on input events.
};
/**
* Scrolls a textarea to the caret position. On Firefox resizing the textarea will
* prevent it from scrolling to the caret position. We need to re-set the selection
* in order for it to scroll to the proper position.
*/
/**
* Scrolls a textarea to the caret position. On Firefox resizing the textarea will
* prevent it from scrolling to the caret position. We need to re-set the selection
* in order for it to scroll to the proper position.
* @private
* @param {?} textarea
* @return {?}
*/
CdkTextareaAutosize.prototype._scrollToCaretPosition = /**
* Scrolls a textarea to the caret position. On Firefox resizing the textarea will
* prevent it from scrolling to the caret position. We need to re-set the selection
* in order for it to scroll to the proper position.
* @private
* @param {?} textarea
* @return {?}
*/
function (textarea) {
var selectionStart = textarea.selectionStart, selectionEnd = textarea.selectionEnd;
// IE will throw an "Unspecified error" if we try to set the selection range after the
// element has been removed from the DOM. Assert that the directive hasn't been destroyed
// between the time we requested the animation frame and when it was executed.
// Also note that we have to assert that the textarea is focused before we set the
// selection range. Setting the selection range on a non-focused textarea will cause
// it to receive focus on IE and Edge.
if (!this._destroyed.isStopped && document.activeElement === textarea) {
textarea.setSelectionRange(selectionStart, selectionEnd);
}
};
CdkTextareaAutosize.decorators = [
{ type: _angular_core__WEBPACK_IMPORTED_MODULE_1__["Directive"], args: [{
selector: 'textarea[cdkTextareaAutosize]',
exportAs: 'cdkTextareaAutosize',
host: {
'class': 'cdk-textarea-autosize',
// Textarea elements that have the directive applied should have a single row by default.
// Browsers normally show two rows by default and therefore this limits the minRows binding.
'rows': '1',
'(input)': '_noopInputHandler()',
},
},] },
];
/** @nocollapse */
CdkTextareaAutosize.ctorParameters = function () { return [
{ type: _angular_core__WEBPACK_IMPORTED_MODULE_1__["ElementRef"] },
{ type: _angular_cdk_platform__WEBPACK_IMPORTED_MODULE_0__["Platform"] },
{ type: _angular_core__WEBPACK_IMPORTED_MODULE_1__["NgZone"] }
]; };
CdkTextareaAutosize.propDecorators = {
minRows: [{ type: _angular_core__WEBPACK_IMPORTED_MODULE_1__["Input"], args: ['cdkAutosizeMinRows',] }],
maxRows: [{ type: _angular_core__WEBPACK_IMPORTED_MODULE_1__["Input"], args: ['cdkAutosizeMaxRows',] }],
enabled: [{ type: _angular_core__WEBPACK_IMPORTED_MODULE_1__["Input"], args: ['cdkTextareaAutosize',] }]
};
return CdkTextareaAutosize;
}());
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
var TextFieldModule = /** @class */ (function () {
function TextFieldModule() {
}
TextFieldModule.decorators = [
{ type: _angular_core__WEBPACK_IMPORTED_MODULE_1__["NgModule"], args: [{
declarations: [CdkAutofill, CdkTextareaAutosize],
imports: [_angular_cdk_platform__WEBPACK_IMPORTED_MODULE_0__["PlatformModule"]],
exports: [CdkAutofill, CdkTextareaAutosize],
},] },
];
return TextFieldModule;
}());
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
//# sourceMappingURL=text-field.es5.js.map
/***/ }),
/***/ "./node_modules/@angular/cdk/esm5/tree.es5.js":
/*!****************************************************!*\
!*** ./node_modules/@angular/cdk/esm5/tree.es5.js ***!
\****************************************************/
/*! exports provided: BaseTreeControl, FlatTreeControl, NestedTreeControl, CdkNestedTreeNode, CdkTreeNodeOutletContext, CdkTreeNodeDef, CdkTreeNodePadding, CDK_TREE_NODE_OUTLET_NODE, CdkTreeNodeOutlet, CdkTree, CdkTreeNode, getTreeNoValidDataSourceError, getTreeMultipleDefaultNodeDefsError, getTreeMissingMatchingNodeDefError, getTreeControlMissingError, getTreeControlFunctionsMissingError, CdkTreeModule, CdkTreeNodeToggle */
/***/ (function(module, __webpack_exports__, __webpack_require__) {
"use strict";
__webpack_require__.r(__webpack_exports__);
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "BaseTreeControl", function() { return BaseTreeControl; });
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "FlatTreeControl", function() { return FlatTreeControl; });
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "NestedTreeControl", function() { return NestedTreeControl; });
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "CdkNestedTreeNode", function() { return CdkNestedTreeNode; });
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "CdkTreeNodeOutletContext", function() { return CdkTreeNodeOutletContext; });
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "CdkTreeNodeDef", function() { return CdkTreeNodeDef; });
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "CdkTreeNodePadding", function() { return CdkTreeNodePadding; });
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "CDK_TREE_NODE_OUTLET_NODE", function() { return CDK_TREE_NODE_OUTLET_NODE; });
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "CdkTreeNodeOutlet", function() { return CdkTreeNodeOutlet; });
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "CdkTree", function() { return CdkTree; });
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "CdkTreeNode", function() { return CdkTreeNode; });
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "getTreeNoValidDataSourceError", function() { return getTreeNoValidDataSourceError; });
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "getTreeMultipleDefaultNodeDefsError", function() { return getTreeMultipleDefaultNodeDefsError; });
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "getTreeMissingMatchingNodeDefError", function() { return getTreeMissingMatchingNodeDefError; });
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "getTreeControlMissingError", function() { return getTreeControlMissingError; });
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "getTreeControlFunctionsMissingError", function() { return getTreeControlFunctionsMissingError; });
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "CdkTreeModule", function() { return CdkTreeModule; });
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "CdkTreeNodeToggle", function() { return CdkTreeNodeToggle; });
/* harmony import */ var _angular_cdk_collections__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @angular/cdk/collections */ "./node_modules/@angular/cdk/esm5/collections.es5.js");
/* harmony import */ var tslib__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! tslib */ "./node_modules/tslib/tslib.es6.js");
/* harmony import */ var rxjs__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! rxjs */ "./node_modules/rxjs/_esm5/index.js");
/* harmony import */ var rxjs_operators__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! rxjs/operators */ "./node_modules/rxjs/_esm5/operators/index.js");
/* harmony import */ var _angular_core__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! @angular/core */ "./node_modules/@angular/core/fesm5/core.js");
/* harmony import */ var _angular_cdk_bidi__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! @angular/cdk/bidi */ "./node_modules/@angular/cdk/esm5/bidi.es5.js");
/* harmony import */ var _angular_cdk_coercion__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! @angular/cdk/coercion */ "./node_modules/@angular/cdk/esm5/coercion.es5.js");
/* harmony import */ var _angular_cdk_a11y__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! @angular/cdk/a11y */ "./node_modules/@angular/cdk/esm5/a11y.es5.js");
/* harmony import */ var _angular_common__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! @angular/common */ "./node_modules/@angular/common/fesm5/common.js");
/**
* @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
*/
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/**
* Base tree control. It has basic toggle/expand/collapse operations on a single data node.
* @abstract
* @template T
*/
var /**
* Base tree control. It has basic toggle/expand/collapse operations on a single data node.
* @abstract
* @template T
*/
BaseTreeControl = /** @class */ (function () {
function BaseTreeControl() {
/**
* A selection model with multi-selection to track expansion status.
*/
this.expansionModel = new _angular_cdk_collections__WEBPACK_IMPORTED_MODULE_0__["SelectionModel"](true);
}
/** Toggles one single data node's expanded/collapsed state. */
/**
* Toggles one single data node's expanded/collapsed state.
* @param {?} dataNode
* @return {?}
*/
BaseTreeControl.prototype.toggle = /**
* Toggles one single data node's expanded/collapsed state.
* @param {?} dataNode
* @return {?}
*/
function (dataNode) {
this.expansionModel.toggle(dataNode);
};
/** Expands one single data node. */
/**
* Expands one single data node.
* @param {?} dataNode
* @return {?}
*/
BaseTreeControl.prototype.expand = /**
* Expands one single data node.
* @param {?} dataNode
* @return {?}
*/
function (dataNode) {
this.expansionModel.select(dataNode);
};
/** Collapses one single data node. */
/**
* Collapses one single data node.
* @param {?} dataNode
* @return {?}
*/
BaseTreeControl.prototype.collapse = /**
* Collapses one single data node.
* @param {?} dataNode
* @return {?}
*/
function (dataNode) {
this.expansionModel.deselect(dataNode);
};
/** Whether a given data node is expanded or not. Returns true if the data node is expanded. */
/**
* Whether a given data node is expanded or not. Returns true if the data node is expanded.
* @param {?} dataNode
* @return {?}
*/
BaseTreeControl.prototype.isExpanded = /**
* Whether a given data node is expanded or not. Returns true if the data node is expanded.
* @param {?} dataNode
* @return {?}
*/
function (dataNode) {
return this.expansionModel.isSelected(dataNode);
};
/** Toggles a subtree rooted at `node` recursively. */
/**
* Toggles a subtree rooted at `node` recursively.
* @param {?} dataNode
* @return {?}
*/
BaseTreeControl.prototype.toggleDescendants = /**
* Toggles a subtree rooted at `node` recursively.
* @param {?} dataNode
* @return {?}
*/
function (dataNode) {
this.expansionModel.isSelected(dataNode)
? this.collapseDescendants(dataNode)
: this.expandDescendants(dataNode);
};
/** Collapse all dataNodes in the tree. */
/**
* Collapse all dataNodes in the tree.
* @return {?}
*/
BaseTreeControl.prototype.collapseAll = /**
* Collapse all dataNodes in the tree.
* @return {?}
*/
function () {
this.expansionModel.clear();
};
/** Expands a subtree rooted at given data node recursively. */
/**
* Expands a subtree rooted at given data node recursively.
* @param {?} dataNode
* @return {?}
*/
BaseTreeControl.prototype.expandDescendants = /**
* Expands a subtree rooted at given data node recursively.
* @param {?} dataNode
* @return {?}
*/
function (dataNode) {
var _a;
/** @type {?} */
var toBeProcessed = [dataNode];
toBeProcessed.push.apply(toBeProcessed, this.getDescendants(dataNode));
(_a = this.expansionModel).select.apply(_a, toBeProcessed);
};
/** Collapses a subtree rooted at given data node recursively. */
/**
* Collapses a subtree rooted at given data node recursively.
* @param {?} dataNode
* @return {?}
*/
BaseTreeControl.prototype.collapseDescendants = /**
* Collapses a subtree rooted at given data node recursively.
* @param {?} dataNode
* @return {?}
*/
function (dataNode) {
var _a;
/** @type {?} */
var toBeProcessed = [dataNode];
toBeProcessed.push.apply(toBeProcessed, this.getDescendants(dataNode));
(_a = this.expansionModel).deselect.apply(_a, toBeProcessed);
};
return BaseTreeControl;
}());
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/**
* Flat tree control. Able to expand/collapse a subtree recursively for flattened tree.
* @template T
*/
var /**
* Flat tree control. Able to expand/collapse a subtree recursively for flattened tree.
* @template T
*/
FlatTreeControl = /** @class */ (function (_super) {
Object(tslib__WEBPACK_IMPORTED_MODULE_1__["__extends"])(FlatTreeControl, _super);
/** Construct with flat tree data node functions getLevel and isExpandable. */
function FlatTreeControl(getLevel, isExpandable) {
var _this = _super.call(this) || this;
_this.getLevel = getLevel;
_this.isExpandable = isExpandable;
return _this;
}
/**
* Gets a list of the data node's subtree of descendent data nodes.
*
* To make this working, the `dataNodes` of the TreeControl must be flattened tree nodes
* with correct levels.
*/
/**
* Gets a list of the data node's subtree of descendent data nodes.
*
* To make this working, the `dataNodes` of the TreeControl must be flattened tree nodes
* with correct levels.
* @param {?} dataNode
* @return {?}
*/
FlatTreeControl.prototype.getDescendants = /**
* Gets a list of the data node's subtree of descendent data nodes.
*
* To make this working, the `dataNodes` of the TreeControl must be flattened tree nodes
* with correct levels.
* @param {?} dataNode
* @return {?}
*/
function (dataNode) {
/** @type {?} */
var startIndex = this.dataNodes.indexOf(dataNode);
/** @type {?} */
var results = [];
// Goes through flattened tree nodes in the `dataNodes` array, and get all descendants.
// The level of descendants of a tree node must be greater than the level of the given
// tree node.
// If we reach a node whose level is equal to the level of the tree node, we hit a sibling.
// If we reach a node whose level is greater than the level of the tree node, we hit a
// sibling of an ancestor.
for (var i = startIndex + 1; i < this.dataNodes.length && this.getLevel(dataNode) < this.getLevel(this.dataNodes[i]); i++) {
results.push(this.dataNodes[i]);
}
return results;
};
/**
* Expands all data nodes in the tree.
*
* To make this working, the `dataNodes` variable of the TreeControl must be set to all flattened
* data nodes of the tree.
*/
/**
* Expands all data nodes in the tree.
*
* To make this working, the `dataNodes` variable of the TreeControl must be set to all flattened
* data nodes of the tree.
* @return {?}
*/
FlatTreeControl.prototype.expandAll = /**
* Expands all data nodes in the tree.
*
* To make this working, the `dataNodes` variable of the TreeControl must be set to all flattened
* data nodes of the tree.
* @return {?}
*/
function () {
var _a;
(_a = this.expansionModel).select.apply(_a, this.dataNodes);
};
return FlatTreeControl;
}(BaseTreeControl));
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/**
* Nested tree control. Able to expand/collapse a subtree recursively for NestedNode type.
* @template T
*/
var /**
* Nested tree control. Able to expand/collapse a subtree recursively for NestedNode type.
* @template T
*/
NestedTreeControl = /** @class */ (function (_super) {
Object(tslib__WEBPACK_IMPORTED_MODULE_1__["__extends"])(NestedTreeControl, _super);
/** Construct with nested tree function getChildren. */
function NestedTreeControl(getChildren) {
var _this = _super.call(this) || this;
_this.getChildren = getChildren;
return _this;
}
/**
* Expands all dataNodes in the tree.
*
* To make this working, the `dataNodes` variable of the TreeControl must be set to all root level
* data nodes of the tree.
*/
/**
* Expands all dataNodes in the tree.
*
* To make this working, the `dataNodes` variable of the TreeControl must be set to all root level
* data nodes of the tree.
* @return {?}
*/
NestedTreeControl.prototype.expandAll = /**
* Expands all dataNodes in the tree.
*
* To make this working, the `dataNodes` variable of the TreeControl must be set to all root level
* data nodes of the tree.
* @return {?}
*/
function () {
var _this = this;
var _a;
this.expansionModel.clear();
/** @type {?} */
var allNodes = this.dataNodes.reduce(function (accumulator, dataNode) {
return accumulator.concat(_this.getDescendants(dataNode), [dataNode]);
}, []);
(_a = this.expansionModel).select.apply(_a, allNodes);
};
/** Gets a list of descendant dataNodes of a subtree rooted at given data node recursively. */
/**
* Gets a list of descendant dataNodes of a subtree rooted at given data node recursively.
* @param {?} dataNode
* @return {?}
*/
NestedTreeControl.prototype.getDescendants = /**
* Gets a list of descendant dataNodes of a subtree rooted at given data node recursively.
* @param {?} dataNode
* @return {?}
*/
function (dataNode) {
/** @type {?} */
var descendants = [];
this._getDescendants(descendants, dataNode);
// Remove the node itself
return descendants.splice(1);
};
/** A helper function to get descendants recursively. */
/**
* A helper function to get descendants recursively.
* @protected
* @param {?} descendants
* @param {?} dataNode
* @return {?}
*/
NestedTreeControl.prototype._getDescendants = /**
* A helper function to get descendants recursively.
* @protected
* @param {?} descendants
* @param {?} dataNode
* @return {?}
*/
function (descendants, dataNode) {
var _this = this;
descendants.push(dataNode);
/** @type {?} */
var childrenNodes = this.getChildren(dataNode);
if (Array.isArray(childrenNodes)) {
childrenNodes.forEach(function (child) { return _this._getDescendants(descendants, child); });
}
else if (childrenNodes instanceof rxjs__WEBPACK_IMPORTED_MODULE_2__["Observable"]) {
childrenNodes.pipe(Object(rxjs_operators__WEBPACK_IMPORTED_MODULE_3__["take"])(1), Object(rxjs_operators__WEBPACK_IMPORTED_MODULE_3__["filter"])(Boolean)).subscribe(function (children) {
children.forEach(function (child) { return _this._getDescendants(descendants, child); });
});
}
};
return NestedTreeControl;
}(BaseTreeControl));
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/**
* Injection token used to provide a `CdkTreeNode` to its outlet.
* Used primarily to avoid circular imports.
* \@docs-private
* @type {?}
*/
var CDK_TREE_NODE_OUTLET_NODE = new _angular_core__WEBPACK_IMPORTED_MODULE_4__["InjectionToken"]('CDK_TREE_NODE_OUTLET_NODE');
/**
* Outlet for nested CdkNode. Put `[cdkTreeNodeOutlet]` on a tag to place children dataNodes
* inside the outlet.
*/
var CdkTreeNodeOutlet = /** @class */ (function () {
function CdkTreeNodeOutlet(viewContainer, _node) {
this.viewContainer = viewContainer;
this._node = _node;
}
CdkTreeNodeOutlet.decorators = [
{ type: _angular_core__WEBPACK_IMPORTED_MODULE_4__["Directive"], args: [{
selector: '[cdkTreeNodeOutlet]'
},] },
];
/** @nocollapse */
CdkTreeNodeOutlet.ctorParameters = function () { return [
{ type: _angular_core__WEBPACK_IMPORTED_MODULE_4__["ViewContainerRef"] },
{ type: undefined, decorators: [{ type: _angular_core__WEBPACK_IMPORTED_MODULE_4__["Inject"], args: [CDK_TREE_NODE_OUTLET_NODE,] }, { type: _angular_core__WEBPACK_IMPORTED_MODULE_4__["Optional"] }] }
]; };
return CdkTreeNodeOutlet;
}());
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/**
* Context provided to the tree node component.
* @template T
*/
var /**
* Context provided to the tree node component.
* @template T
*/
CdkTreeNodeOutletContext = /** @class */ (function () {
function CdkTreeNodeOutletContext(data) {
this.$implicit = data;
}
return CdkTreeNodeOutletContext;
}());
/**
* Data node definition for the CdkTree.
* Captures the node's template and a when predicate that describes when this node should be used.
* @template T
*/
var CdkTreeNodeDef = /** @class */ (function () {
/** @docs-private */
function CdkTreeNodeDef(template) {
this.template = template;
}
CdkTreeNodeDef.decorators = [
{ type: _angular_core__WEBPACK_IMPORTED_MODULE_4__["Directive"], args: [{
selector: '[cdkTreeNodeDef]',
inputs: [
'when: cdkTreeNodeDefWhen'
],
},] },
];
/** @nocollapse */
CdkTreeNodeDef.ctorParameters = function () { return [
{ type: _angular_core__WEBPACK_IMPORTED_MODULE_4__["TemplateRef"] }
]; };
return CdkTreeNodeDef;
}());
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/**
* Returns an error to be thrown when there is no usable data.
* \@docs-private
* @return {?}
*/
function getTreeNoValidDataSourceError() {
return Error("A valid data source must be provided.");
}
/**
* Returns an error to be thrown when there are multiple nodes that are missing a when function.
* \@docs-private
* @return {?}
*/
function getTreeMultipleDefaultNodeDefsError() {
return Error("There can only be one default row without a when predicate function.");
}
/**
* Returns an error to be thrown when there are no matching node defs for a particular set of data.
* \@docs-private
* @return {?}
*/
function getTreeMissingMatchingNodeDefError() {
return Error("Could not find a matching node definition for the provided node data.");
}
/**
* Returns an error to be thrown when there are tree control.
* \@docs-private
* @return {?}
*/
function getTreeControlMissingError() {
return Error("Could not find a tree control for the tree.");
}
/**
* Returns an error to be thrown when tree control did not implement functions for flat/nested node.
* \@docs-private
* @return {?}
*/
function getTreeControlFunctionsMissingError() {
return Error("Could not find functions for nested/flat tree in tree control.");
}
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/**
* CDK tree component that connects with a data source to retrieve data of type `T` and renders
* dataNodes with hierarchy. Updates the dataNodes when new data is provided by the data source.
* @template T
*/
var CdkTree = /** @class */ (function () {
function CdkTree(_differs, _changeDetectorRef) {
this._differs = _differs;
this._changeDetectorRef = _changeDetectorRef;
/**
* Subject that emits when the component has been destroyed.
*/
this._onDestroy = new rxjs__WEBPACK_IMPORTED_MODULE_2__["Subject"]();
/**
* Level of nodes
*/
this._levels = new Map();
// TODO(tinayuangao): Setup a listener for scrolling, emit the calculated view to viewChange.
// Remove the MAX_VALUE in viewChange
/**
* Stream containing the latest information on what rows are being displayed on screen.
* Can be used by the data source to as a heuristic of what data should be provided.
*/
this.viewChange = new rxjs__WEBPACK_IMPORTED_MODULE_2__["BehaviorSubject"]({ start: 0, end: Number.MAX_VALUE });
}
Object.defineProperty(CdkTree.prototype, "dataSource", {
/**
* Provides a stream containing the latest data array to render. Influenced by the tree's
* stream of view window (what dataNodes are currently on screen).
* Data source can be an observable of data array, or a data array to render.
*/
get: /**
* Provides a stream containing the latest data array to render. Influenced by the tree's
* stream of view window (what dataNodes are currently on screen).
* Data source can be an observable of data array, or a data array to render.
* @return {?}
*/
function () { return this._dataSource; },
set: /**
* @param {?} dataSource
* @return {?}
*/
function (dataSource) {
if (this._dataSource !== dataSource) {
this._switchDataSource(dataSource);
}
},
enumerable: true,
configurable: true
});
/**
* @return {?}
*/
CdkTree.prototype.ngOnInit = /**
* @return {?}
*/
function () {
this._dataDiffer = this._differs.find([]).create(this.trackBy);
if (!this.treeControl) {
throw getTreeControlMissingError();
}
};
/**
* @return {?}
*/
CdkTree.prototype.ngOnDestroy = /**
* @return {?}
*/
function () {
this._nodeOutlet.viewContainer.clear();
this._onDestroy.next();
this._onDestroy.complete();
if (this._dataSource && typeof ((/** @type {?} */ (this._dataSource))).disconnect === 'function') {
((/** @type {?} */ (this.dataSource))).disconnect(this);
}
if (this._dataSubscription) {
this._dataSubscription.unsubscribe();
this._dataSubscription = null;
}
};
/**
* @return {?}
*/
CdkTree.prototype.ngAfterContentChecked = /**
* @return {?}
*/
function () {
/** @type {?} */
var defaultNodeDefs = this._nodeDefs.filter(function (def) { return !def.when; });
if (defaultNodeDefs.length > 1) {
throw getTreeMultipleDefaultNodeDefsError();
}
this._defaultNodeDef = defaultNodeDefs[0];
if (this.dataSource && this._nodeDefs && !this._dataSubscription) {
this._observeRenderChanges();
}
};
// TODO(tinayuangao): Work on keyboard traversal and actions, make sure it's working for RTL
// and nested trees.
/**
* Switch to the provided data source by resetting the data and unsubscribing from the current
* render change subscription if one exists. If the data source is null, interpret this by
* clearing the node outlet. Otherwise start listening for new data.
*/
// TODO(tinayuangao): Work on keyboard traversal and actions, make sure it's working for RTL
// and nested trees.
/**
* Switch to the provided data source by resetting the data and unsubscribing from the current
* render change subscription if one exists. If the data source is null, interpret this by
* clearing the node outlet. Otherwise start listening for new data.
* @private
* @param {?} dataSource
* @return {?}
*/
CdkTree.prototype._switchDataSource =
// TODO(tinayuangao): Work on keyboard traversal and actions, make sure it's working for RTL
// and nested trees.
/**
* Switch to the provided data source by resetting the data and unsubscribing from the current
* render change subscription if one exists. If the data source is null, interpret this by
* clearing the node outlet. Otherwise start listening for new data.
* @private
* @param {?} dataSource
* @return {?}
*/
function (dataSource) {
if (this._dataSource && typeof ((/** @type {?} */ (this._dataSource))).disconnect === 'function') {
((/** @type {?} */ (this.dataSource))).disconnect(this);
}
if (this._dataSubscription) {
this._dataSubscription.unsubscribe();
this._dataSubscription = null;
}
// Remove the all dataNodes if there is now no data source
if (!dataSource) {
this._nodeOutlet.viewContainer.clear();
}
this._dataSource = dataSource;
if (this._nodeDefs) {
this._observeRenderChanges();
}
};
/** Set up a subscription for the data provided by the data source. */
/**
* Set up a subscription for the data provided by the data source.
* @private
* @return {?}
*/
CdkTree.prototype._observeRenderChanges = /**
* Set up a subscription for the data provided by the data source.
* @private
* @return {?}
*/
function () {
var _this = this;
/** @type {?} */
var dataStream;
if (Object(_angular_cdk_collections__WEBPACK_IMPORTED_MODULE_0__["isDataSource"])(this._dataSource)) {
dataStream = this._dataSource.connect(this);
}
else if (this._dataSource instanceof rxjs__WEBPACK_IMPORTED_MODULE_2__["Observable"]) {
dataStream = this._dataSource;
}
else if (Array.isArray(this._dataSource)) {
dataStream = Object(rxjs__WEBPACK_IMPORTED_MODULE_2__["of"])(this._dataSource);
}
if (dataStream) {
this._dataSubscription = dataStream.pipe(Object(rxjs_operators__WEBPACK_IMPORTED_MODULE_3__["takeUntil"])(this._onDestroy))
.subscribe(function (data) { return _this.renderNodeChanges(data); });
}
else {
throw getTreeNoValidDataSourceError();
}
};
/** Check for changes made in the data and render each change (node added/removed/moved). */
/**
* Check for changes made in the data and render each change (node added/removed/moved).
* @param {?} data
* @param {?=} dataDiffer
* @param {?=} viewContainer
* @param {?=} parentData
* @return {?}
*/
CdkTree.prototype.renderNodeChanges = /**
* Check for changes made in the data and render each change (node added/removed/moved).
* @param {?} data
* @param {?=} dataDiffer
* @param {?=} viewContainer
* @param {?=} parentData
* @return {?}
*/
function (data, dataDiffer, viewContainer, parentData) {
var _this = this;
if (dataDiffer === void 0) { dataDiffer = this._dataDiffer; }
if (viewContainer === void 0) { viewContainer = this._nodeOutlet.viewContainer; }
/** @type {?} */
var changes = dataDiffer.diff(data);
if (!changes) {
return;
}
changes.forEachOperation(function (item, adjustedPreviousIndex, currentIndex) {
if (item.previousIndex == null) {
_this.insertNode(data[(/** @type {?} */ (currentIndex))], (/** @type {?} */ (currentIndex)), viewContainer, parentData);
}
else if (currentIndex == null) {
viewContainer.remove((/** @type {?} */ (adjustedPreviousIndex)));
_this._levels.delete(item.item);
}
else {
/** @type {?} */
var view = viewContainer.get((/** @type {?} */ (adjustedPreviousIndex)));
viewContainer.move((/** @type {?} */ (view)), currentIndex);
}
});
this._changeDetectorRef.detectChanges();
};
/**
* Finds the matching node definition that should be used for this node data. If there is only
* one node definition, it is returned. Otherwise, find the node definition that has a when
* predicate that returns true with the data. If none return true, return the default node
* definition.
*/
/**
* Finds the matching node definition that should be used for this node data. If there is only
* one node definition, it is returned. Otherwise, find the node definition that has a when
* predicate that returns true with the data. If none return true, return the default node
* definition.
* @param {?} data
* @param {?} i
* @return {?}
*/
CdkTree.prototype._getNodeDef = /**
* Finds the matching node definition that should be used for this node data. If there is only
* one node definition, it is returned. Otherwise, find the node definition that has a when
* predicate that returns true with the data. If none return true, return the default node
* definition.
* @param {?} data
* @param {?} i
* @return {?}
*/
function (data, i) {
if (this._nodeDefs.length === 1) {
return this._nodeDefs.first;
}
/** @type {?} */
var nodeDef = this._nodeDefs.find(function (def) { return def.when && def.when(i, data); }) || this._defaultNodeDef;
if (!nodeDef) {
throw getTreeMissingMatchingNodeDefError();
}
return nodeDef;
};
/**
* Create the embedded view for the data node template and place it in the correct index location
* within the data node view container.
*/
/**
* Create the embedded view for the data node template and place it in the correct index location
* within the data node view container.
* @param {?} nodeData
* @param {?} index
* @param {?=} viewContainer
* @param {?=} parentData
* @return {?}
*/
CdkTree.prototype.insertNode = /**
* Create the embedded view for the data node template and place it in the correct index location
* within the data node view container.
* @param {?} nodeData
* @param {?} index
* @param {?=} viewContainer
* @param {?=} parentData
* @return {?}
*/
function (nodeData, index, viewContainer, parentData) {
/** @type {?} */
var node = this._getNodeDef(nodeData, index);
// Node context that will be provided to created embedded view
/** @type {?} */
var context = new CdkTreeNodeOutletContext(nodeData);
// If the tree is flat tree, then use the `getLevel` function in flat tree control
// Otherwise, use the level of parent node.
if (this.treeControl.getLevel) {
context.level = this.treeControl.getLevel(nodeData);
}
else if (typeof parentData !== 'undefined' && this._levels.has(parentData)) {
context.level = (/** @type {?} */ (this._levels.get(parentData))) + 1;
}
else {
context.level = 0;
}
this._levels.set(nodeData, context.level);
// Use default tree nodeOutlet, or nested node's nodeOutlet
/** @type {?} */
var container = viewContainer ? viewContainer : this._nodeOutlet.viewContainer;
container.createEmbeddedView(node.template, context, index);
// Set the data to just created `CdkTreeNode`.
// The `CdkTreeNode` created from `createEmbeddedView` will be saved in static variable
// `mostRecentTreeNode`. We get it from static variable and pass the node data to it.
if (CdkTreeNode.mostRecentTreeNode) {
CdkTreeNode.mostRecentTreeNode.data = nodeData;
}
};
CdkTree.decorators = [
{ type: _angular_core__WEBPACK_IMPORTED_MODULE_4__["Component"], args: [{selector: 'cdk-tree',
exportAs: 'cdkTree',
template: "`. It works with nested tree.
* By using `cdk-nested-tree-node` component in tree node template, children of the parent node will
* be added in the `cdkTreeNodeOutlet` in tree node template.
* For example:
* ```html
*
* {{node.name}}
*
* ```
* The children of node will be automatically added to `cdkTreeNodeOutlet`, the result dom will be
* like this:
* ```html
*
* {{node.name}}
* {{child1.name}}
* {{child2.name}}
*
* ```
* @template T
*/
var CdkNestedTreeNode = /** @class */ (function (_super) {
Object(tslib__WEBPACK_IMPORTED_MODULE_1__["__extends"])(CdkNestedTreeNode, _super);
function CdkNestedTreeNode(_elementRef, _tree, _differs) {
var _this = _super.call(this, _elementRef, _tree) || this;
_this._elementRef = _elementRef;
_this._tree = _tree;
_this._differs = _differs;
return _this;
}
/**
* @return {?}
*/
CdkNestedTreeNode.prototype.ngAfterContentInit = /**
* @return {?}
*/
function () {
var _this = this;
this._dataDiffer = this._differs.find([]).create(this._tree.trackBy);
if (!this._tree.treeControl.getChildren) {
throw getTreeControlFunctionsMissingError();
}
/** @type {?} */
var childrenNodes = this._tree.treeControl.getChildren(this.data);
if (Array.isArray(childrenNodes)) {
this.updateChildrenNodes((/** @type {?} */ (childrenNodes)));
}
else if (childrenNodes instanceof rxjs__WEBPACK_IMPORTED_MODULE_2__["Observable"]) {
childrenNodes.pipe(Object(rxjs_operators__WEBPACK_IMPORTED_MODULE_3__["takeUntil"])(this._destroyed))
.subscribe(function (result) { return _this.updateChildrenNodes(result); });
}
this.nodeOutlet.changes.pipe(Object(rxjs_operators__WEBPACK_IMPORTED_MODULE_3__["takeUntil"])(this._destroyed))
.subscribe(function () { return _this.updateChildrenNodes(); });
};
/**
* @return {?}
*/
CdkNestedTreeNode.prototype.ngOnDestroy = /**
* @return {?}
*/
function () {
this._clear();
_super.prototype.ngOnDestroy.call(this);
};
/** Add children dataNodes to the NodeOutlet */
/**
* Add children dataNodes to the NodeOutlet
* @protected
* @param {?=} children
* @return {?}
*/
CdkNestedTreeNode.prototype.updateChildrenNodes = /**
* Add children dataNodes to the NodeOutlet
* @protected
* @param {?=} children
* @return {?}
*/
function (children) {
/** @type {?} */
var outlet = this._getNodeOutlet();
if (children) {
this._children = children;
}
if (outlet && this._children) {
/** @type {?} */
var viewContainer = outlet.viewContainer;
this._tree.renderNodeChanges(this._children, this._dataDiffer, viewContainer, this._data);
}
else {
// Reset the data differ if there's no children nodes displayed
this._dataDiffer.diff([]);
}
};
/** Clear the children dataNodes. */
/**
* Clear the children dataNodes.
* @protected
* @return {?}
*/
CdkNestedTreeNode.prototype._clear = /**
* Clear the children dataNodes.
* @protected
* @return {?}
*/
function () {
/** @type {?} */
var outlet = this._getNodeOutlet();
if (outlet) {
outlet.viewContainer.clear();
this._dataDiffer.diff([]);
}
};
/** Gets the outlet for the current node. */
/**
* Gets the outlet for the current node.
* @private
* @return {?}
*/
CdkNestedTreeNode.prototype._getNodeOutlet = /**
* Gets the outlet for the current node.
* @private
* @return {?}
*/
function () {
var _this = this;
/** @type {?} */
var outlets = this.nodeOutlet;
if (outlets) {
// Note that since we use `descendants: true` on the query, we have to ensure
// that we don't pick up the outlet of a child node by accident.
return outlets.find(function (outlet) { return !outlet._node || outlet._node === _this; });
}
};
CdkNestedTreeNode.decorators = [
{ type: _angular_core__WEBPACK_IMPORTED_MODULE_4__["Directive"], args: [{
selector: 'cdk-nested-tree-node',
exportAs: 'cdkNestedTreeNode',
host: {
'[attr.aria-expanded]': 'isExpanded',
'[attr.role]': 'role',
'class': 'cdk-tree-node cdk-nested-tree-node',
},
providers: [
{ provide: CdkTreeNode, useExisting: CdkNestedTreeNode },
{ provide: CDK_TREE_NODE_OUTLET_NODE, useExisting: CdkNestedTreeNode }
]
},] },
];
/** @nocollapse */
CdkNestedTreeNode.ctorParameters = function () { return [
{ type: _angular_core__WEBPACK_IMPORTED_MODULE_4__["ElementRef"] },
{ type: CdkTree },
{ type: _angular_core__WEBPACK_IMPORTED_MODULE_4__["IterableDiffers"] }
]; };
CdkNestedTreeNode.propDecorators = {
nodeOutlet: [{ type: _angular_core__WEBPACK_IMPORTED_MODULE_4__["ContentChildren"], args: [CdkTreeNodeOutlet, {
// We need to use `descendants: true`, because Ivy will no longer match
// indirect descendants if it's left as false.
descendants: true
},] }]
};
return CdkNestedTreeNode;
}(CdkTreeNode));
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/**
* Regex used to split a string on its CSS units.
* @type {?}
*/
var cssUnitPattern = /([A-Za-z%]+)$/;
/**
* Indent for the children tree dataNodes.
* This directive will add left-padding to the node to show hierarchy.
* @template T
*/
var CdkTreeNodePadding = /** @class */ (function () {
function CdkTreeNodePadding(_treeNode, _tree, _renderer, _element, _dir) {
var _this = this;
this._treeNode = _treeNode;
this._tree = _tree;
this._renderer = _renderer;
this._element = _element;
this._dir = _dir;
/**
* Subject that emits when the component has been destroyed.
*/
this._destroyed = new rxjs__WEBPACK_IMPORTED_MODULE_2__["Subject"]();
/**
* CSS units used for the indentation value.
*/
this.indentUnits = 'px';
this._indent = 40;
this._setPadding();
if (_dir) {
_dir.change.pipe(Object(rxjs_operators__WEBPACK_IMPORTED_MODULE_3__["takeUntil"])(this._destroyed)).subscribe(function () { return _this._setPadding(true); });
}
// In Ivy the indentation binding might be set before the tree node's data has been added,
// which means that we'll miss the first render. We have to subscribe to changes in the
// data to ensure that everything is up to date.
_treeNode._dataChanges.subscribe(function () { return _this._setPadding(); });
}
Object.defineProperty(CdkTreeNodePadding.prototype, "level", {
/** The level of depth of the tree node. The padding will be `level * indent` pixels. */
get: /**
* The level of depth of the tree node. The padding will be `level * indent` pixels.
* @return {?}
*/
function () { return this._level; },
set: /**
* @param {?} value
* @return {?}
*/
function (value) {
this._level = Object(_angular_cdk_coercion__WEBPACK_IMPORTED_MODULE_6__["coerceNumberProperty"])(value);
this._setPadding();
},
enumerable: true,
configurable: true
});
Object.defineProperty(CdkTreeNodePadding.prototype, "indent", {
/**
* The indent for each level. Can be a number or a CSS string.
* Default number 40px from material design menu sub-menu spec.
*/
get: /**
* The indent for each level. Can be a number or a CSS string.
* Default number 40px from material design menu sub-menu spec.
* @return {?}
*/
function () { return this._indent; },
set: /**
* @param {?} indent
* @return {?}
*/
function (indent) {
/** @type {?} */
var value = indent;
/** @type {?} */
var units = 'px';
if (typeof indent === 'string') {
/** @type {?} */
var parts = indent.split(cssUnitPattern);
value = parts[0];
units = parts[1] || units;
}
this.indentUnits = units;
this._indent = Object(_angular_cdk_coercion__WEBPACK_IMPORTED_MODULE_6__["coerceNumberProperty"])(value);
this._setPadding();
},
enumerable: true,
configurable: true
});
/**
* @return {?}
*/
CdkTreeNodePadding.prototype.ngOnDestroy = /**
* @return {?}
*/
function () {
this._destroyed.next();
this._destroyed.complete();
};
/** The padding indent value for the tree node. Returns a string with px numbers if not null. */
/**
* The padding indent value for the tree node. Returns a string with px numbers if not null.
* @return {?}
*/
CdkTreeNodePadding.prototype._paddingIndent = /**
* The padding indent value for the tree node. Returns a string with px numbers if not null.
* @return {?}
*/
function () {
/** @type {?} */
var nodeLevel = (this._treeNode.data && this._tree.treeControl.getLevel)
? this._tree.treeControl.getLevel(this._treeNode.data)
: null;
/** @type {?} */
var level = this._level || nodeLevel;
return level ? "" + level * this._indent + this.indentUnits : null;
};
/**
* @param {?=} forceChange
* @return {?}
*/
CdkTreeNodePadding.prototype._setPadding = /**
* @param {?=} forceChange
* @return {?}
*/
function (forceChange) {
if (forceChange === void 0) { forceChange = false; }
/** @type {?} */
var padding = this._paddingIndent();
if (padding !== this._currentPadding || forceChange) {
/** @type {?} */
var element = this._element.nativeElement;
/** @type {?} */
var paddingProp = this._dir && this._dir.value === 'rtl' ? 'paddingRight' : 'paddingLeft';
/** @type {?} */
var resetProp = paddingProp === 'paddingLeft' ? 'paddingRight' : 'paddingLeft';
this._renderer.setStyle(element, paddingProp, padding);
this._renderer.setStyle(element, resetProp, null);
this._currentPadding = padding;
}
};
CdkTreeNodePadding.decorators = [
{ type: _angular_core__WEBPACK_IMPORTED_MODULE_4__["Directive"], args: [{
selector: '[cdkTreeNodePadding]',
},] },
];
/** @nocollapse */
CdkTreeNodePadding.ctorParameters = function () { return [
{ type: CdkTreeNode },
{ type: CdkTree },
{ type: _angular_core__WEBPACK_IMPORTED_MODULE_4__["Renderer2"] },
{ type: _angular_core__WEBPACK_IMPORTED_MODULE_4__["ElementRef"] },
{ type: _angular_cdk_bidi__WEBPACK_IMPORTED_MODULE_5__["Directionality"], decorators: [{ type: _angular_core__WEBPACK_IMPORTED_MODULE_4__["Optional"] }] }
]; };
CdkTreeNodePadding.propDecorators = {
level: [{ type: _angular_core__WEBPACK_IMPORTED_MODULE_4__["Input"], args: ['cdkTreeNodePadding',] }],
indent: [{ type: _angular_core__WEBPACK_IMPORTED_MODULE_4__["Input"], args: ['cdkTreeNodePaddingIndent',] }]
};
return CdkTreeNodePadding;
}());
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/**
* Node toggle to expand/collapse the node.
* @template T
*/
var CdkTreeNodeToggle = /** @class */ (function () {
function CdkTreeNodeToggle(_tree, _treeNode) {
this._tree = _tree;
this._treeNode = _treeNode;
this._recursive = false;
}
Object.defineProperty(CdkTreeNodeToggle.prototype, "recursive", {
/** Whether expand/collapse the node recursively. */
get: /**
* Whether expand/collapse the node recursively.
* @return {?}
*/
function () { return this._recursive; },
set: /**
* @param {?} value
* @return {?}
*/
function (value) { this._recursive = Object(_angular_cdk_coercion__WEBPACK_IMPORTED_MODULE_6__["coerceBooleanProperty"])(value); },
enumerable: true,
configurable: true
});
// We have to use a `HostListener` here in order to support both Ivy and ViewEngine.
// In Ivy the `host` bindings will be merged when this class is extended, whereas in
// ViewEngine they're overwritten.
// TODO(crisbeto): we move this back into `host` once Ivy is turned on by default.
// tslint:disable-next-line:no-host-decorator-in-concrete
// We have to use a `HostListener` here in order to support both Ivy and ViewEngine.
// In Ivy the `host` bindings will be merged when this class is extended, whereas in
// ViewEngine they're overwritten.
// TODO(crisbeto): we move this back into `host` once Ivy is turned on by default.
// tslint:disable-next-line:no-host-decorator-in-concrete
/**
* @param {?} event
* @return {?}
*/
CdkTreeNodeToggle.prototype._toggle =
// We have to use a `HostListener` here in order to support both Ivy and ViewEngine.
// In Ivy the `host` bindings will be merged when this class is extended, whereas in
// ViewEngine they're overwritten.
// TODO(crisbeto): we move this back into `host` once Ivy is turned on by default.
// tslint:disable-next-line:no-host-decorator-in-concrete
/**
* @param {?} event
* @return {?}
*/
function (event) {
this.recursive
? this._tree.treeControl.toggleDescendants(this._treeNode.data)
: this._tree.treeControl.toggle(this._treeNode.data);
event.stopPropagation();
};
CdkTreeNodeToggle.decorators = [
{ type: _angular_core__WEBPACK_IMPORTED_MODULE_4__["Directive"], args: [{ selector: '[cdkTreeNodeToggle]' },] },
];
/** @nocollapse */
CdkTreeNodeToggle.ctorParameters = function () { return [
{ type: CdkTree },
{ type: CdkTreeNode }
]; };
CdkTreeNodeToggle.propDecorators = {
recursive: [{ type: _angular_core__WEBPACK_IMPORTED_MODULE_4__["Input"], args: ['cdkTreeNodeToggleRecursive',] }],
_toggle: [{ type: _angular_core__WEBPACK_IMPORTED_MODULE_4__["HostListener"], args: ['click', ['$event'],] }]
};
return CdkTreeNodeToggle;
}());
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/** @type {?} */
var EXPORTED_DECLARATIONS = [
CdkNestedTreeNode,
CdkTreeNodeDef,
CdkTreeNodePadding,
CdkTreeNodeToggle,
CdkTree,
CdkTreeNode,
CdkTreeNodeOutlet,
];
var CdkTreeModule = /** @class */ (function () {
function CdkTreeModule() {
}
CdkTreeModule.decorators = [
{ type: _angular_core__WEBPACK_IMPORTED_MODULE_4__["NgModule"], args: [{
imports: [_angular_common__WEBPACK_IMPORTED_MODULE_8__["CommonModule"]],
exports: EXPORTED_DECLARATIONS,
declarations: EXPORTED_DECLARATIONS,
providers: [_angular_cdk_a11y__WEBPACK_IMPORTED_MODULE_7__["FocusMonitor"], CdkTreeNodeDef]
},] },
];
return CdkTreeModule;
}());
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
//# sourceMappingURL=tree.es5.js.map
/***/ }),
/***/ "./node_modules/@angular/forms/fesm5/forms.js":
/*!****************************************************!*\
!*** ./node_modules/@angular/forms/fesm5/forms.js ***!
\****************************************************/
/*! exports provided: ɵangular_packages_forms_forms_bc, ɵangular_packages_forms_forms_bb, ɵangular_packages_forms_forms_z, ɵangular_packages_forms_forms_ba, ɵangular_packages_forms_forms_a, ɵangular_packages_forms_forms_b, ɵangular_packages_forms_forms_c, ɵangular_packages_forms_forms_d, ɵangular_packages_forms_forms_e, ɵangular_packages_forms_forms_f, ɵangular_packages_forms_forms_g, ɵangular_packages_forms_forms_h, ɵangular_packages_forms_forms_bh, ɵangular_packages_forms_forms_bd, ɵangular_packages_forms_forms_be, ɵangular_packages_forms_forms_i, ɵangular_packages_forms_forms_j, ɵangular_packages_forms_forms_bf, ɵangular_packages_forms_forms_bg, ɵangular_packages_forms_forms_k, ɵangular_packages_forms_forms_l, ɵangular_packages_forms_forms_m, ɵangular_packages_forms_forms_n, ɵangular_packages_forms_forms_p, ɵangular_packages_forms_forms_o, ɵangular_packages_forms_forms_q, ɵangular_packages_forms_forms_s, ɵangular_packages_forms_forms_r, ɵangular_packages_forms_forms_u, ɵangular_packages_forms_forms_v, ɵangular_packages_forms_forms_x, ɵangular_packages_forms_forms_w, ɵangular_packages_forms_forms_y, ɵangular_packages_forms_forms_t, AbstractControlDirective, AbstractFormGroupDirective, CheckboxControlValueAccessor, ControlContainer, NG_VALUE_ACCESSOR, COMPOSITION_BUFFER_MODE, DefaultValueAccessor, NgControl, NgControlStatus, NgControlStatusGroup, NgForm, NgFormSelectorWarning, NgModel, NgModelGroup, RadioControlValueAccessor, FormControlDirective, FormControlName, FormGroupDirective, FormArrayName, FormGroupName, NgSelectOption, SelectControlValueAccessor, SelectMultipleControlValueAccessor, CheckboxRequiredValidator, EmailValidator, MaxLengthValidator, MinLengthValidator, PatternValidator, RequiredValidator, FormBuilder, AbstractControl, FormArray, FormControl, FormGroup, NG_ASYNC_VALIDATORS, NG_VALIDATORS, Validators, VERSION, FormsModule, ReactiveFormsModule */
/***/ (function(module, __webpack_exports__, __webpack_require__) {
"use strict";
__webpack_require__.r(__webpack_exports__);
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "ɵangular_packages_forms_forms_bc", function() { return InternalFormsSharedModule; });
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "ɵangular_packages_forms_forms_bb", function() { return REACTIVE_DRIVEN_DIRECTIVES; });
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "ɵangular_packages_forms_forms_z", function() { return SHARED_FORM_DIRECTIVES; });
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "ɵangular_packages_forms_forms_ba", function() { return TEMPLATE_DRIVEN_DIRECTIVES; });
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "ɵangular_packages_forms_forms_a", function() { return CHECKBOX_VALUE_ACCESSOR; });
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "ɵangular_packages_forms_forms_b", function() { return DEFAULT_VALUE_ACCESSOR; });
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "ɵangular_packages_forms_forms_c", function() { return AbstractControlStatus; });
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "ɵangular_packages_forms_forms_d", function() { return ngControlStatusHost; });
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "ɵangular_packages_forms_forms_e", function() { return formDirectiveProvider; });
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "ɵangular_packages_forms_forms_f", function() { return NG_FORM_SELECTOR_WARNING; });
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "ɵangular_packages_forms_forms_g", function() { return formControlBinding; });
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "ɵangular_packages_forms_forms_h", function() { return modelGroupProvider; });
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "ɵangular_packages_forms_forms_bh", function() { return NgNoValidate; });
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "ɵangular_packages_forms_forms_bd", function() { return NUMBER_VALUE_ACCESSOR; });
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "ɵangular_packages_forms_forms_be", function() { return NumberValueAccessor; });
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "ɵangular_packages_forms_forms_i", function() { return RADIO_VALUE_ACCESSOR; });
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "ɵangular_packages_forms_forms_j", function() { return RadioControlRegistry; });
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "ɵangular_packages_forms_forms_bf", function() { return RANGE_VALUE_ACCESSOR; });
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "ɵangular_packages_forms_forms_bg", function() { return RangeValueAccessor; });
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "ɵangular_packages_forms_forms_k", function() { return NG_MODEL_WITH_FORM_CONTROL_WARNING; });
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "ɵangular_packages_forms_forms_l", function() { return formControlBinding$1; });
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "ɵangular_packages_forms_forms_m", function() { return controlNameBinding; });
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "ɵangular_packages_forms_forms_n", function() { return formDirectiveProvider$1; });
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "ɵangular_packages_forms_forms_p", function() { return formArrayNameProvider; });
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "ɵangular_packages_forms_forms_o", function() { return formGroupNameProvider; });
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "ɵangular_packages_forms_forms_q", function() { return SELECT_VALUE_ACCESSOR; });
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "ɵangular_packages_forms_forms_s", function() { return NgSelectMultipleOption; });
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "ɵangular_packages_forms_forms_r", function() { return SELECT_MULTIPLE_VALUE_ACCESSOR; });
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "ɵangular_packages_forms_forms_u", function() { return CHECKBOX_REQUIRED_VALIDATOR; });
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "ɵangular_packages_forms_forms_v", function() { return EMAIL_VALIDATOR; });
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "ɵangular_packages_forms_forms_x", function() { return MAX_LENGTH_VALIDATOR; });
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "ɵangular_packages_forms_forms_w", function() { return MIN_LENGTH_VALIDATOR; });
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "ɵangular_packages_forms_forms_y", function() { return PATTERN_VALIDATOR; });
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "ɵangular_packages_forms_forms_t", function() { return REQUIRED_VALIDATOR; });
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "AbstractControlDirective", function() { return AbstractControlDirective; });
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "AbstractFormGroupDirective", function() { return AbstractFormGroupDirective; });
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "CheckboxControlValueAccessor", function() { return CheckboxControlValueAccessor; });
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "ControlContainer", function() { return ControlContainer; });
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "NG_VALUE_ACCESSOR", function() { return NG_VALUE_ACCESSOR; });
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "COMPOSITION_BUFFER_MODE", function() { return COMPOSITION_BUFFER_MODE; });
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "DefaultValueAccessor", function() { return DefaultValueAccessor; });
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "NgControl", function() { return NgControl; });
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "NgControlStatus", function() { return NgControlStatus; });
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "NgControlStatusGroup", function() { return NgControlStatusGroup; });
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "NgForm", function() { return NgForm; });
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "NgFormSelectorWarning", function() { return NgFormSelectorWarning; });
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "NgModel", function() { return NgModel; });
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "NgModelGroup", function() { return NgModelGroup; });
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "RadioControlValueAccessor", function() { return RadioControlValueAccessor; });
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "FormControlDirective", function() { return FormControlDirective; });
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "FormControlName", function() { return FormControlName; });
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "FormGroupDirective", function() { return FormGroupDirective; });
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "FormArrayName", function() { return FormArrayName; });
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "FormGroupName", function() { return FormGroupName; });
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "NgSelectOption", function() { return NgSelectOption; });
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "SelectControlValueAccessor", function() { return SelectControlValueAccessor; });
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "SelectMultipleControlValueAccessor", function() { return SelectMultipleControlValueAccessor; });
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "CheckboxRequiredValidator", function() { return CheckboxRequiredValidator; });
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "EmailValidator", function() { return EmailValidator; });
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "MaxLengthValidator", function() { return MaxLengthValidator; });
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "MinLengthValidator", function() { return MinLengthValidator; });
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "PatternValidator", function() { return PatternValidator; });
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "RequiredValidator", function() { return RequiredValidator; });
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "FormBuilder", function() { return FormBuilder; });
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "AbstractControl", function() { return AbstractControl; });
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "FormArray", function() { return FormArray; });
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "FormControl", function() { return FormControl; });
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "FormGroup", function() { return FormGroup; });
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "NG_ASYNC_VALIDATORS", function() { return NG_ASYNC_VALIDATORS; });
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "NG_VALIDATORS", function() { return NG_VALIDATORS; });
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "Validators", function() { return Validators; });
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "VERSION", function() { return VERSION; });
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "FormsModule", function() { return FormsModule; });
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "ReactiveFormsModule", function() { return ReactiveFormsModule; });
/* harmony import */ var tslib__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! tslib */ "./node_modules/tslib/tslib.es6.js");
/* harmony import */ var _angular_core__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! @angular/core */ "./node_modules/@angular/core/fesm5/core.js");
/* harmony import */ var rxjs__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! rxjs */ "./node_modules/rxjs/_esm5/index.js");
/* harmony import */ var rxjs_operators__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! rxjs/operators */ "./node_modules/rxjs/_esm5/operators/index.js");
/* harmony import */ var _angular_platform_browser__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! @angular/platform-browser */ "./node_modules/@angular/platform-browser/fesm5/platform-browser.js");
/**
* @license Angular v7.2.15
* (c) 2010-2019 Google LLC. https://angular.io/
* License: MIT
*/
/**
* @license
* Copyright Google Inc. 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
*/
/**
* @description
* Base class for control directives.
*
* This class is only used internally in the `ReactiveFormsModule` and the `FormsModule`.
*
* @publicApi
*/
var AbstractControlDirective = /** @class */ (function () {
function AbstractControlDirective() {
}
Object.defineProperty(AbstractControlDirective.prototype, "value", {
/**
* @description
* Reports the value of the control if it is present, otherwise null.
*/
get: function () { return this.control ? this.control.value : null; },
enumerable: true,
configurable: true
});
Object.defineProperty(AbstractControlDirective.prototype, "valid", {
/**
* @description
* Reports whether the control is valid. A control is considered valid if no
* validation errors exist with the current value.
* If the control is not present, null is returned.
*/
get: function () { return this.control ? this.control.valid : null; },
enumerable: true,
configurable: true
});
Object.defineProperty(AbstractControlDirective.prototype, "invalid", {
/**
* @description
* Reports whether the control is invalid, meaning that an error exists in the input value.
* If the control is not present, null is returned.
*/
get: function () { return this.control ? this.control.invalid : null; },
enumerable: true,
configurable: true
});
Object.defineProperty(AbstractControlDirective.prototype, "pending", {
/**
* @description
* Reports whether a control is pending, meaning that that async validation is occurring and
* errors are not yet available for the input value. If the control is not present, null is
* returned.
*/
get: function () { return this.control ? this.control.pending : null; },
enumerable: true,
configurable: true
});
Object.defineProperty(AbstractControlDirective.prototype, "disabled", {
/**
* @description
* Reports whether the control is disabled, meaning that the control is disabled
* in the UI and is exempt from validation checks and excluded from aggregate
* values of ancestor controls. If the control is not present, null is returned.
*/
get: function () { return this.control ? this.control.disabled : null; },
enumerable: true,
configurable: true
});
Object.defineProperty(AbstractControlDirective.prototype, "enabled", {
/**
* @description
* Reports whether the control is enabled, meaning that the control is included in ancestor
* calculations of validity or value. If the control is not present, null is returned.
*/
get: function () { return this.control ? this.control.enabled : null; },
enumerable: true,
configurable: true
});
Object.defineProperty(AbstractControlDirective.prototype, "errors", {
/**
* @description
* Reports the control's validation errors. If the control is not present, null is returned.
*/
get: function () { return this.control ? this.control.errors : null; },
enumerable: true,
configurable: true
});
Object.defineProperty(AbstractControlDirective.prototype, "pristine", {
/**
* @description
* Reports whether the control is pristine, meaning that the user has not yet changed
* the value in the UI. If the control is not present, null is returned.
*/
get: function () { return this.control ? this.control.pristine : null; },
enumerable: true,
configurable: true
});
Object.defineProperty(AbstractControlDirective.prototype, "dirty", {
/**
* @description
* Reports whether the control is dirty, meaning that the user has changed
* the value in the UI. If the control is not present, null is returned.
*/
get: function () { return this.control ? this.control.dirty : null; },
enumerable: true,
configurable: true
});
Object.defineProperty(AbstractControlDirective.prototype, "touched", {
/**
* @description
* Reports whether the control is touched, meaning that the user has triggered
* a `blur` event on it. If the control is not present, null is returned.
*/
get: function () { return this.control ? this.control.touched : null; },
enumerable: true,
configurable: true
});
Object.defineProperty(AbstractControlDirective.prototype, "status", {
/**
* @description
* Reports the validation status of the control. Possible values include:
* 'VALID', 'INVALID', 'DISABLED', and 'PENDING'.
* If the control is not present, null is returned.
*/
get: function () { return this.control ? this.control.status : null; },
enumerable: true,
configurable: true
});
Object.defineProperty(AbstractControlDirective.prototype, "untouched", {
/**
* @description
* Reports whether the control is untouched, meaning that the user has not yet triggered
* a `blur` event on it. If the control is not present, null is returned.
*/
get: function () { return this.control ? this.control.untouched : null; },
enumerable: true,
configurable: true
});
Object.defineProperty(AbstractControlDirective.prototype, "statusChanges", {
/**
* @description
* Returns a multicasting observable that emits a validation status whenever it is
* calculated for the control. If the control is not present, null is returned.
*/
get: function () {
return this.control ? this.control.statusChanges : null;
},
enumerable: true,
configurable: true
});
Object.defineProperty(AbstractControlDirective.prototype, "valueChanges", {
/**
* @description
* Returns a multicasting observable of value changes for the control that emits every time the
* value of the control changes in the UI or programmatically.
* If the control is not present, null is returned.
*/
get: function () {
return this.control ? this.control.valueChanges : null;
},
enumerable: true,
configurable: true
});
Object.defineProperty(AbstractControlDirective.prototype, "path", {
/**
* @description
* Returns an array that represents the path from the top-level form to this control.
* Each index is the string name of the control on that level.
*/
get: function () { return null; },
enumerable: true,
configurable: true
});
/**
* @description
* Resets the control with the provided value if the control is present.
*/
AbstractControlDirective.prototype.reset = function (value) {
if (value === void 0) { value = undefined; }
if (this.control)
this.control.reset(value);
};
/**
* @description
* Reports whether the control with the given path has the error specified.
*
* @param errorCode The code of the error to check
* @param path A list of control names that designates how to move from the current control
* to the control that should be queried for errors.
*
* @usageNotes
* For example, for the following `FormGroup`:
*
* ```
* form = new FormGroup({
* address: new FormGroup({ street: new FormControl() })
* });
* ```
*
* The path to the 'street' control from the root form would be 'address' -> 'street'.
*
* It can be provided to this method in one of two formats:
*
* 1. An array of string control names, e.g. `['address', 'street']`
* 1. A period-delimited list of control names in one string, e.g. `'address.street'`
*
* If no path is given, this method checks for the error on the current control.
*
* @returns whether the given error is present in the control at the given path.
*
* If the control is not present, false is returned.
*/
AbstractControlDirective.prototype.hasError = function (errorCode, path) {
return this.control ? this.control.hasError(errorCode, path) : false;
};
/**
* @description
* Reports error data for the control with the given path.
*
* @param errorCode The code of the error to check
* @param path A list of control names that designates how to move from the current control
* to the control that should be queried for errors.
*
* @usageNotes
* For example, for the following `FormGroup`:
*
* ```
* form = new FormGroup({
* address: new FormGroup({ street: new FormControl() })
* });
* ```
*
* The path to the 'street' control from the root form would be 'address' -> 'street'.
*
* It can be provided to this method in one of two formats:
*
* 1. An array of string control names, e.g. `['address', 'street']`
* 1. A period-delimited list of control names in one string, e.g. `'address.street'`
*
* @returns error data for that particular error. If the control or error is not present,
* null is returned.
*/
AbstractControlDirective.prototype.getError = function (errorCode, path) {
return this.control ? this.control.getError(errorCode, path) : null;
};
return AbstractControlDirective;
}());
/**
* @license
* Copyright Google Inc. 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
*/
/**
* @description
* A base class for directives that contain multiple registered instances of `NgControl`.
* Only used by the forms module.
*
* @publicApi
*/
var ControlContainer = /** @class */ (function (_super) {
Object(tslib__WEBPACK_IMPORTED_MODULE_0__["__extends"])(ControlContainer, _super);
function ControlContainer() {
return _super !== null && _super.apply(this, arguments) || this;
}
Object.defineProperty(ControlContainer.prototype, "formDirective", {
/**
* @description
* The top-level form directive for the control.
*/
get: function () { return null; },
enumerable: true,
configurable: true
});
Object.defineProperty(ControlContainer.prototype, "path", {
/**
* @description
* The path to this group.
*/
get: function () { return null; },
enumerable: true,
configurable: true
});
return ControlContainer;
}(AbstractControlDirective));
/**
* @license
* Copyright Google Inc. 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
*/
function isEmptyInputValue(value) {
// we don't check for string here so it also works with arrays
return value == null || value.length === 0;
}
/**
* @description
* An `InjectionToken` for registering additional synchronous validators used with `AbstractControl`s.
*
* @see `NG_ASYNC_VALIDATORS`
*
* @usageNotes
*
* ### Providing a custom validator
*
* The following example registers a custom validator directive. Adding the validator to the
* existing collection of validators requires the `multi: true` option.
*
* ```typescript
* @Directive({
* selector: '[customValidator]',
* providers: [{provide: NG_VALIDATORS, useExisting: CustomValidatorDirective, multi: true}]
* })
* class CustomValidatorDirective implements Validator {
* validate(control: AbstractControl): ValidationErrors | null {
* return { 'custom': true };
* }
* }
* ```
*
* @publicApi
*/
var NG_VALIDATORS = new _angular_core__WEBPACK_IMPORTED_MODULE_1__["InjectionToken"]('NgValidators');
/**
* @description
* An `InjectionToken` for registering additional asynchronous validators used with `AbstractControl`s.
*
* @see `NG_VALIDATORS`
*
* @publicApi
*/
var NG_ASYNC_VALIDATORS = new _angular_core__WEBPACK_IMPORTED_MODULE_1__["InjectionToken"]('NgAsyncValidators');
var EMAIL_REGEXP = /^(?=.{1,254}$)(?=.{1,64}@)[-!#$%&'*+/0-9=?A-Z^_`a-z{|}~]+(\.[-!#$%&'*+/0-9=?A-Z^_`a-z{|}~]+)*@[A-Za-z0-9]([A-Za-z0-9-]{0,61}[A-Za-z0-9])?(\.[A-Za-z0-9]([A-Za-z0-9-]{0,61}[A-Za-z0-9])?)*$/;
/**
* @description
* Provides a set of built-in validators that can be used by form controls.
*
* A validator is a function that processes a `FormControl` or collection of
* controls and returns an error map or null. A null map means that validation has passed.
*
* @see [Form Validation](/guide/form-validation)
*
* @publicApi
*/
var Validators = /** @class */ (function () {
function Validators() {
}
/**
* @description
* Validator that requires the control's value to be greater than or equal to the provided number.
* The validator exists only as a function and not as a directive.
*
* @usageNotes
*
* ### Validate against a minimum of 3
*
* ```typescript
* const control = new FormControl(2, Validators.min(3));
*
* console.log(control.errors); // {min: {min: 3, actual: 2}}
* ```
*
* @returns A validator function that returns an error map with the
* `min` property if the validation check fails, otherwise `null`.
*
*/
Validators.min = function (min) {
return function (control) {
if (isEmptyInputValue(control.value) || isEmptyInputValue(min)) {
return null; // don't validate empty values to allow optional controls
}
var value = parseFloat(control.value);
// Controls with NaN values after parsing should be treated as not having a
// minimum, per the HTML forms spec: https://www.w3.org/TR/html5/forms.html#attr-input-min
return !isNaN(value) && value < min ? { 'min': { 'min': min, 'actual': control.value } } : null;
};
};
/**
* @description
* Validator that requires the control's value to be less than or equal to the provided number.
* The validator exists only as a function and not as a directive.
*
* @usageNotes
*
* ### Validate against a maximum of 15
*
* ```typescript
* const control = new FormControl(16, Validators.max(15));
*
* console.log(control.errors); // {max: {max: 15, actual: 16}}
* ```
*
* @returns A validator function that returns an error map with the
* `max` property if the validation check fails, otherwise `null`.
*
*/
Validators.max = function (max) {
return function (control) {
if (isEmptyInputValue(control.value) || isEmptyInputValue(max)) {
return null; // don't validate empty values to allow optional controls
}
var value = parseFloat(control.value);
// Controls with NaN values after parsing should be treated as not having a
// maximum, per the HTML forms spec: https://www.w3.org/TR/html5/forms.html#attr-input-max
return !isNaN(value) && value > max ? { 'max': { 'max': max, 'actual': control.value } } : null;
};
};
/**
* @description
* Validator that requires the control have a non-empty value.
*
* @usageNotes
*
* ### Validate that the field is non-empty
*
* ```typescript
* const control = new FormControl('', Validators.required);
*
* console.log(control.errors); // {required: true}
* ```
*
* @returns An error map with the `required` property
* if the validation check fails, otherwise `null`.
*
*/
Validators.required = function (control) {
return isEmptyInputValue(control.value) ? { 'required': true } : null;
};
/**
* @description
* Validator that requires the control's value be true. This validator is commonly
* used for required checkboxes.
*
* @usageNotes
*
* ### Validate that the field value is true
*
* ```typescript
* const control = new FormControl('', Validators.requiredTrue);
*
* console.log(control.errors); // {required: true}
* ```
*
* @returns An error map that contains the `required` property
* set to `true` if the validation check fails, otherwise `null`.
*/
Validators.requiredTrue = function (control) {
return control.value === true ? null : { 'required': true };
};
/**
* @description
* Validator that requires the control's value pass an email validation test.
*
* @usageNotes
*
* ### Validate that the field matches a valid email pattern
*
* ```typescript
* const control = new FormControl('bad@', Validators.email);
*
* console.log(control.errors); // {email: true}
* ```
*
* @returns An error map with the `email` property
* if the validation check fails, otherwise `null`.
*
*/
Validators.email = function (control) {
if (isEmptyInputValue(control.value)) {
return null; // don't validate empty values to allow optional controls
}
return EMAIL_REGEXP.test(control.value) ? null : { 'email': true };
};
/**
* @description
* Validator that requires the length of the control's value to be greater than or equal
* to the provided minimum length. This validator is also provided by default if you use the
* the HTML5 `minlength` attribute.
*
* @usageNotes
*
* ### Validate that the field has a minimum of 3 characters
*
* ```typescript
* const control = new FormControl('ng', Validators.minLength(3));
*
* console.log(control.errors); // {minlength: {requiredLength: 3, actualLength: 2}}
* ```
*
* ```html
* \n
\n\n In your class:\n\n this.myGroup = new FormGroup({\n firstName: new FormControl()\n });",
formGroupName: "\n \n\n In your class:\n\n this.myGroup = new FormGroup({\n person: new FormGroup({ firstName: new FormControl() })\n });",
formArrayName: "\n \n\n In your class:\n\n this.cityArray = new FormArray([new FormControl('SF')]);\n this.myGroup = new FormGroup({\n cities: this.cityArray\n });",
ngModelGroup: "\n ",
ngModelWithFormGroup: "\n \n
\n "
};
/**
* @license
* Copyright Google Inc. 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
*/
var ReactiveErrors = /** @class */ (function () {
function ReactiveErrors() {
}
ReactiveErrors.controlParentException = function () {
throw new Error("formControlName must be used with a parent formGroup directive. You'll want to add a formGroup\n directive and pass it an existing FormGroup instance (you can create one in your class).\n\n Example:\n\n " + FormErrorExamples.formControlName);
};
ReactiveErrors.ngModelGroupException = function () {
throw new Error("formControlName cannot be used with an ngModelGroup parent. It is only compatible with parents\n that also have a \"form\" prefix: formGroupName, formArrayName, or formGroup.\n\n Option 1: Update the parent to be formGroupName (reactive form strategy)\n\n " + FormErrorExamples.formGroupName + "\n\n Option 2: Use ngModel instead of formControlName (template-driven strategy)\n\n " + FormErrorExamples.ngModelGroup);
};
ReactiveErrors.missingFormException = function () {
throw new Error("formGroup expects a FormGroup instance. Please pass one in.\n\n Example:\n\n " + FormErrorExamples.formControlName);
};
ReactiveErrors.groupParentException = function () {
throw new Error("formGroupName must be used with a parent formGroup directive. You'll want to add a formGroup\n directive and pass it an existing FormGroup instance (you can create one in your class).\n\n Example:\n\n " + FormErrorExamples.formGroupName);
};
ReactiveErrors.arrayParentException = function () {
throw new Error("formArrayName must be used with a parent formGroup directive. You'll want to add a formGroup\n directive and pass it an existing FormGroup instance (you can create one in your class).\n\n Example:\n\n " + FormErrorExamples.formArrayName);
};
ReactiveErrors.disabledAttrWarning = function () {
console.warn("\n It looks like you're using the disabled attribute with a reactive form directive. If you set disabled to true\n when you set up this control in your component class, the disabled attribute will actually be set in the DOM for\n you. We recommend using this approach to avoid 'changed after checked' errors.\n \n Example: \n form = new FormGroup({\n first: new FormControl({value: 'Nancy', disabled: true}, Validators.required),\n last: new FormControl('Drew', Validators.required)\n });\n ");
};
ReactiveErrors.ngModelWarning = function (directiveName) {
console.warn("\n It looks like you're using ngModel on the same form field as " + directiveName + ". \n Support for using the ngModel input property and ngModelChange event with \n reactive form directives has been deprecated in Angular v6 and will be removed \n in Angular v7.\n \n For more information on this, see our API docs here:\n https://angular.io/api/forms/" + (directiveName === 'formControl' ? 'FormControlDirective'
: 'FormControlName') + "#use-with-ngmodel\n ");
};
return ReactiveErrors;
}());
/**
* @license
* Copyright Google Inc. 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
*/
var SELECT_VALUE_ACCESSOR = {
provide: NG_VALUE_ACCESSOR,
useExisting: Object(_angular_core__WEBPACK_IMPORTED_MODULE_1__["forwardRef"])(function () { return SelectControlValueAccessor; }),
multi: true
};
function _buildValueString(id, value) {
if (id == null)
return "" + value;
if (value && typeof value === 'object')
value = 'Object';
return (id + ": " + value).slice(0, 50);
}
function _extractId(valueString) {
return valueString.split(':')[0];
}
/**
* @description
* The `ControlValueAccessor` for writing select control values and listening to select control
* changes. The value accessor is used by the `FormControlDirective`, `FormControlName`, and
* `NgModel` directives.
*
* @usageNotes
*
* ### Using select controls in a reactive form
*
* The following examples show how to use a select control in a reactive form.
*
* {@example forms/ts/reactiveSelectControl/reactive_select_control_example.ts region='Component'}
*
* ### Using select controls in a template-driven form
*
* To use a select in a template-driven form, simply add an `ngModel` and a `name`
* attribute to the main `` tag.
*
* {@example forms/ts/selectControl/select_control_example.ts region='Component'}
*
* ### Customizing option selection
*
* Angular uses object identity to select option. It's possible for the identities of items
* to change while the data does not. This can happen, for example, if the items are produced
* from an RPC to the server, and that RPC is re-run. Even if the data hasn't changed, the
* second response will produce objects with different identities.
*
* To customize the default option comparison algorithm, `` supports `compareWith` input.
* `compareWith` takes a **function** which has two arguments: `option1` and `option2`.
* If `compareWith` is given, Angular selects option by the return value of the function.
*
* ```ts
* const selectedCountriesControl = new FormControl();
* ```
*
* ```
*
*
* {{country.name}}
*
*
*
* compareFn(c1: Country, c2: Country): boolean {
* return c1 && c2 ? c1.id === c2.id : c1 === c2;
* }
* ```
*
* **Note:** We listen to the 'change' event because 'input' events aren't fired
* for selects in Firefox and IE:
* https://bugzilla.mozilla.org/show_bug.cgi?id=1024350
* https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/4660045/
*
* @ngModule ReactiveFormsModule
* @ngModule FormsModule
* @publicApi
*/
var SelectControlValueAccessor = /** @class */ (function () {
function SelectControlValueAccessor(_renderer, _elementRef) {
this._renderer = _renderer;
this._elementRef = _elementRef;
/** @internal */
this._optionMap = new Map();
/** @internal */
this._idCounter = 0;
/**
* @description
* The registered callback function called when a change event occurs on the input element.
*/
this.onChange = function (_) { };
/**
* @description
* The registered callback function called when a blur event occurs on the input element.
*/
this.onTouched = function () { };
this._compareWith = _angular_core__WEBPACK_IMPORTED_MODULE_1__["ɵlooseIdentical"];
}
Object.defineProperty(SelectControlValueAccessor.prototype, "compareWith", {
/**
* @description
* Tracks the option comparison algorithm for tracking identities when
* checking for changes.
*/
set: function (fn) {
if (typeof fn !== 'function') {
throw new Error("compareWith must be a function, but received " + JSON.stringify(fn));
}
this._compareWith = fn;
},
enumerable: true,
configurable: true
});
/**
* Sets the "value" property on the input element. The "selectedIndex"
* property is also set if an ID is provided on the option element.
*
* @param value The checked value
*/
SelectControlValueAccessor.prototype.writeValue = function (value) {
this.value = value;
var id = this._getOptionId(value);
if (id == null) {
this._renderer.setProperty(this._elementRef.nativeElement, 'selectedIndex', -1);
}
var valueString = _buildValueString(id, value);
this._renderer.setProperty(this._elementRef.nativeElement, 'value', valueString);
};
/**
* @description
* Registers a function called when the control value changes.
*
* @param fn The callback function
*/
SelectControlValueAccessor.prototype.registerOnChange = function (fn) {
var _this = this;
this.onChange = function (valueString) {
_this.value = _this._getOptionValue(valueString);
fn(_this.value);
};
};
/**
* @description
* Registers a function called when the control is touched.
*
* @param fn The callback function
*/
SelectControlValueAccessor.prototype.registerOnTouched = function (fn) { this.onTouched = fn; };
/**
* Sets the "disabled" property on the select input element.
*
* @param isDisabled The disabled value
*/
SelectControlValueAccessor.prototype.setDisabledState = function (isDisabled) {
this._renderer.setProperty(this._elementRef.nativeElement, 'disabled', isDisabled);
};
/** @internal */
SelectControlValueAccessor.prototype._registerOption = function () { return (this._idCounter++).toString(); };
/** @internal */
SelectControlValueAccessor.prototype._getOptionId = function (value) {
var e_1, _a;
try {
for (var _b = Object(tslib__WEBPACK_IMPORTED_MODULE_0__["__values"])(Array.from(this._optionMap.keys())), _c = _b.next(); !_c.done; _c = _b.next()) {
var id = _c.value;
if (this._compareWith(this._optionMap.get(id), value))
return id;
}
}
catch (e_1_1) { e_1 = { error: e_1_1 }; }
finally {
try {
if (_c && !_c.done && (_a = _b.return)) _a.call(_b);
}
finally { if (e_1) throw e_1.error; }
}
return null;
};
/** @internal */
SelectControlValueAccessor.prototype._getOptionValue = function (valueString) {
var id = _extractId(valueString);
return this._optionMap.has(id) ? this._optionMap.get(id) : valueString;
};
Object(tslib__WEBPACK_IMPORTED_MODULE_0__["__decorate"])([
Object(_angular_core__WEBPACK_IMPORTED_MODULE_1__["Input"])(),
Object(tslib__WEBPACK_IMPORTED_MODULE_0__["__metadata"])("design:type", Function),
Object(tslib__WEBPACK_IMPORTED_MODULE_0__["__metadata"])("design:paramtypes", [Function])
], SelectControlValueAccessor.prototype, "compareWith", null);
SelectControlValueAccessor = Object(tslib__WEBPACK_IMPORTED_MODULE_0__["__decorate"])([
Object(_angular_core__WEBPACK_IMPORTED_MODULE_1__["Directive"])({
selector: 'select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]',
host: { '(change)': 'onChange($event.target.value)', '(blur)': 'onTouched()' },
providers: [SELECT_VALUE_ACCESSOR]
}),
Object(tslib__WEBPACK_IMPORTED_MODULE_0__["__metadata"])("design:paramtypes", [_angular_core__WEBPACK_IMPORTED_MODULE_1__["Renderer2"], _angular_core__WEBPACK_IMPORTED_MODULE_1__["ElementRef"]])
], SelectControlValueAccessor);
return SelectControlValueAccessor;
}());
/**
* @description
* Marks `` as dynamic, so Angular can be notified when options change.
*
* @see `SelectControlValueAccessor`
*
* @ngModule ReactiveFormsModule
* @ngModule FormsModule
* @publicApi
*/
var NgSelectOption = /** @class */ (function () {
function NgSelectOption(_element, _renderer, _select) {
this._element = _element;
this._renderer = _renderer;
this._select = _select;
if (this._select)
this.id = this._select._registerOption();
}
Object.defineProperty(NgSelectOption.prototype, "ngValue", {
/**
* @description
* Tracks the value bound to the option element. Unlike the value binding,
* ngValue supports binding to objects.
*/
set: function (value) {
if (this._select == null)
return;
this._select._optionMap.set(this.id, value);
this._setElementValue(_buildValueString(this.id, value));
this._select.writeValue(this._select.value);
},
enumerable: true,
configurable: true
});
Object.defineProperty(NgSelectOption.prototype, "value", {
/**
* @description
* Tracks simple string values bound to the option element.
* For objects, use the `ngValue` input binding.
*/
set: function (value) {
this._setElementValue(value);
if (this._select)
this._select.writeValue(this._select.value);
},
enumerable: true,
configurable: true
});
/** @internal */
NgSelectOption.prototype._setElementValue = function (value) {
this._renderer.setProperty(this._element.nativeElement, 'value', value);
};
/**
* @description
* Lifecycle method called before the directive's instance is destroyed. For internal use only.
*/
NgSelectOption.prototype.ngOnDestroy = function () {
if (this._select) {
this._select._optionMap.delete(this.id);
this._select.writeValue(this._select.value);
}
};
Object(tslib__WEBPACK_IMPORTED_MODULE_0__["__decorate"])([
Object(_angular_core__WEBPACK_IMPORTED_MODULE_1__["Input"])('ngValue'),
Object(tslib__WEBPACK_IMPORTED_MODULE_0__["__metadata"])("design:type", Object),
Object(tslib__WEBPACK_IMPORTED_MODULE_0__["__metadata"])("design:paramtypes", [Object])
], NgSelectOption.prototype, "ngValue", null);
Object(tslib__WEBPACK_IMPORTED_MODULE_0__["__decorate"])([
Object(_angular_core__WEBPACK_IMPORTED_MODULE_1__["Input"])('value'),
Object(tslib__WEBPACK_IMPORTED_MODULE_0__["__metadata"])("design:type", Object),
Object(tslib__WEBPACK_IMPORTED_MODULE_0__["__metadata"])("design:paramtypes", [Object])
], NgSelectOption.prototype, "value", null);
NgSelectOption = Object(tslib__WEBPACK_IMPORTED_MODULE_0__["__decorate"])([
Object(_angular_core__WEBPACK_IMPORTED_MODULE_1__["Directive"])({ selector: 'option' }),
Object(tslib__WEBPACK_IMPORTED_MODULE_0__["__param"])(2, Object(_angular_core__WEBPACK_IMPORTED_MODULE_1__["Optional"])()), Object(tslib__WEBPACK_IMPORTED_MODULE_0__["__param"])(2, Object(_angular_core__WEBPACK_IMPORTED_MODULE_1__["Host"])()),
Object(tslib__WEBPACK_IMPORTED_MODULE_0__["__metadata"])("design:paramtypes", [_angular_core__WEBPACK_IMPORTED_MODULE_1__["ElementRef"], _angular_core__WEBPACK_IMPORTED_MODULE_1__["Renderer2"],
SelectControlValueAccessor])
], NgSelectOption);
return NgSelectOption;
}());
/**
* @license
* Copyright Google Inc. 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
*/
var SELECT_MULTIPLE_VALUE_ACCESSOR = {
provide: NG_VALUE_ACCESSOR,
useExisting: Object(_angular_core__WEBPACK_IMPORTED_MODULE_1__["forwardRef"])(function () { return SelectMultipleControlValueAccessor; }),
multi: true
};
function _buildValueString$1(id, value) {
if (id == null)
return "" + value;
if (typeof value === 'string')
value = "'" + value + "'";
if (value && typeof value === 'object')
value = 'Object';
return (id + ": " + value).slice(0, 50);
}
function _extractId$1(valueString) {
return valueString.split(':')[0];
}
/**
* @description
* The `ControlValueAccessor` for writing multi-select control values and listening to multi-select control
* changes. The value accessor is used by the `FormControlDirective`, `FormControlName`, and `NgModel`
* directives.
*
* @see `SelectControlValueAccessor`
*
* @usageNotes
*
* ### Using a multi-select control
*
* The follow example shows you how to use a multi-select control with a reactive form.
*
* ```ts
* const countryControl = new FormControl();
* ```
*
* ```
*
*
* {{ country.name }}
*
*
* ```
*
* ### Customizing option selection
*
* To customize the default option comparison algorithm, `` supports `compareWith` input.
* See the `SelectControlValueAccessor` for usage.
*
* @ngModule ReactiveFormsModule
* @ngModule FormsModule
* @publicApi
*/
var SelectMultipleControlValueAccessor = /** @class */ (function () {
function SelectMultipleControlValueAccessor(_renderer, _elementRef) {
this._renderer = _renderer;
this._elementRef = _elementRef;
/** @internal */
this._optionMap = new Map();
/** @internal */
this._idCounter = 0;
/**
* @description
* The registered callback function called when a change event occurs on the input element.
*/
this.onChange = function (_) { };
/**
* @description
* The registered callback function called when a blur event occurs on the input element.
*/
this.onTouched = function () { };
this._compareWith = _angular_core__WEBPACK_IMPORTED_MODULE_1__["ɵlooseIdentical"];
}
Object.defineProperty(SelectMultipleControlValueAccessor.prototype, "compareWith", {
/**
* @description
* Tracks the option comparison algorithm for tracking identities when
* checking for changes.
*/
set: function (fn) {
if (typeof fn !== 'function') {
throw new Error("compareWith must be a function, but received " + JSON.stringify(fn));
}
this._compareWith = fn;
},
enumerable: true,
configurable: true
});
/**
* @description
* Sets the "value" property on one or of more
* of the select's options.
*
* @param value The value
*/
SelectMultipleControlValueAccessor.prototype.writeValue = function (value) {
var _this = this;
this.value = value;
var optionSelectedStateSetter;
if (Array.isArray(value)) {
// convert values to ids
var ids_1 = value.map(function (v) { return _this._getOptionId(v); });
optionSelectedStateSetter = function (opt, o) { opt._setSelected(ids_1.indexOf(o.toString()) > -1); };
}
else {
optionSelectedStateSetter = function (opt, o) { opt._setSelected(false); };
}
this._optionMap.forEach(optionSelectedStateSetter);
};
/**
* @description
* Registers a function called when the control value changes
* and writes an array of the selected options.
*
* @param fn The callback function
*/
SelectMultipleControlValueAccessor.prototype.registerOnChange = function (fn) {
var _this = this;
this.onChange = function (_) {
var selected = [];
if (_.hasOwnProperty('selectedOptions')) {
var options = _.selectedOptions;
for (var i = 0; i < options.length; i++) {
var opt = options.item(i);
var val = _this._getOptionValue(opt.value);
selected.push(val);
}
}
// Degrade on IE
else {
var options = _.options;
for (var i = 0; i < options.length; i++) {
var opt = options.item(i);
if (opt.selected) {
var val = _this._getOptionValue(opt.value);
selected.push(val);
}
}
}
_this.value = selected;
fn(selected);
};
};
/**
* @description
* Registers a function called when the control is touched.
*
* @param fn The callback function
*/
SelectMultipleControlValueAccessor.prototype.registerOnTouched = function (fn) { this.onTouched = fn; };
/**
* Sets the "disabled" property on the select input element.
*
* @param isDisabled The disabled value
*/
SelectMultipleControlValueAccessor.prototype.setDisabledState = function (isDisabled) {
this._renderer.setProperty(this._elementRef.nativeElement, 'disabled', isDisabled);
};
/** @internal */
SelectMultipleControlValueAccessor.prototype._registerOption = function (value) {
var id = (this._idCounter++).toString();
this._optionMap.set(id, value);
return id;
};
/** @internal */
SelectMultipleControlValueAccessor.prototype._getOptionId = function (value) {
var e_1, _a;
try {
for (var _b = Object(tslib__WEBPACK_IMPORTED_MODULE_0__["__values"])(Array.from(this._optionMap.keys())), _c = _b.next(); !_c.done; _c = _b.next()) {
var id = _c.value;
if (this._compareWith(this._optionMap.get(id)._value, value))
return id;
}
}
catch (e_1_1) { e_1 = { error: e_1_1 }; }
finally {
try {
if (_c && !_c.done && (_a = _b.return)) _a.call(_b);
}
finally { if (e_1) throw e_1.error; }
}
return null;
};
/** @internal */
SelectMultipleControlValueAccessor.prototype._getOptionValue = function (valueString) {
var id = _extractId$1(valueString);
return this._optionMap.has(id) ? this._optionMap.get(id)._value : valueString;
};
Object(tslib__WEBPACK_IMPORTED_MODULE_0__["__decorate"])([
Object(_angular_core__WEBPACK_IMPORTED_MODULE_1__["Input"])(),
Object(tslib__WEBPACK_IMPORTED_MODULE_0__["__metadata"])("design:type", Function),
Object(tslib__WEBPACK_IMPORTED_MODULE_0__["__metadata"])("design:paramtypes", [Function])
], SelectMultipleControlValueAccessor.prototype, "compareWith", null);
SelectMultipleControlValueAccessor = Object(tslib__WEBPACK_IMPORTED_MODULE_0__["__decorate"])([
Object(_angular_core__WEBPACK_IMPORTED_MODULE_1__["Directive"])({
selector: 'select[multiple][formControlName],select[multiple][formControl],select[multiple][ngModel]',
host: { '(change)': 'onChange($event.target)', '(blur)': 'onTouched()' },
providers: [SELECT_MULTIPLE_VALUE_ACCESSOR]
}),
Object(tslib__WEBPACK_IMPORTED_MODULE_0__["__metadata"])("design:paramtypes", [_angular_core__WEBPACK_IMPORTED_MODULE_1__["Renderer2"], _angular_core__WEBPACK_IMPORTED_MODULE_1__["ElementRef"]])
], SelectMultipleControlValueAccessor);
return SelectMultipleControlValueAccessor;
}());
/**
* @description
* Marks `` as dynamic, so Angular can be notified when options change.
*
* @see `SelectMultipleControlValueAccessor`
*
* @ngModule ReactiveFormsModule
* @ngModule FormsModule
* @publicApi
*/
var NgSelectMultipleOption = /** @class */ (function () {
function NgSelectMultipleOption(_element, _renderer, _select) {
this._element = _element;
this._renderer = _renderer;
this._select = _select;
if (this._select) {
this.id = this._select._registerOption(this);
}
}
Object.defineProperty(NgSelectMultipleOption.prototype, "ngValue", {
/**
* @description
* Tracks the value bound to the option element. Unlike the value binding,
* ngValue supports binding to objects.
*/
set: function (value) {
if (this._select == null)
return;
this._value = value;
this._setElementValue(_buildValueString$1(this.id, value));
this._select.writeValue(this._select.value);
},
enumerable: true,
configurable: true
});
Object.defineProperty(NgSelectMultipleOption.prototype, "value", {
/**
* @description
* Tracks simple string values bound to the option element.
* For objects, use the `ngValue` input binding.
*/
set: function (value) {
if (this._select) {
this._value = value;
this._setElementValue(_buildValueString$1(this.id, value));
this._select.writeValue(this._select.value);
}
else {
this._setElementValue(value);
}
},
enumerable: true,
configurable: true
});
/** @internal */
NgSelectMultipleOption.prototype._setElementValue = function (value) {
this._renderer.setProperty(this._element.nativeElement, 'value', value);
};
/** @internal */
NgSelectMultipleOption.prototype._setSelected = function (selected) {
this._renderer.setProperty(this._element.nativeElement, 'selected', selected);
};
/**
* @description
* Lifecycle method called before the directive's instance is destroyed. For internal use only.
*/
NgSelectMultipleOption.prototype.ngOnDestroy = function () {
if (this._select) {
this._select._optionMap.delete(this.id);
this._select.writeValue(this._select.value);
}
};
Object(tslib__WEBPACK_IMPORTED_MODULE_0__["__decorate"])([
Object(_angular_core__WEBPACK_IMPORTED_MODULE_1__["Input"])('ngValue'),
Object(tslib__WEBPACK_IMPORTED_MODULE_0__["__metadata"])("design:type", Object),
Object(tslib__WEBPACK_IMPORTED_MODULE_0__["__metadata"])("design:paramtypes", [Object])
], NgSelectMultipleOption.prototype, "ngValue", null);
Object(tslib__WEBPACK_IMPORTED_MODULE_0__["__decorate"])([
Object(_angular_core__WEBPACK_IMPORTED_MODULE_1__["Input"])('value'),
Object(tslib__WEBPACK_IMPORTED_MODULE_0__["__metadata"])("design:type", Object),
Object(tslib__WEBPACK_IMPORTED_MODULE_0__["__metadata"])("design:paramtypes", [Object])
], NgSelectMultipleOption.prototype, "value", null);
NgSelectMultipleOption = Object(tslib__WEBPACK_IMPORTED_MODULE_0__["__decorate"])([
Object(_angular_core__WEBPACK_IMPORTED_MODULE_1__["Directive"])({ selector: 'option' }),
Object(tslib__WEBPACK_IMPORTED_MODULE_0__["__param"])(2, Object(_angular_core__WEBPACK_IMPORTED_MODULE_1__["Optional"])()), Object(tslib__WEBPACK_IMPORTED_MODULE_0__["__param"])(2, Object(_angular_core__WEBPACK_IMPORTED_MODULE_1__["Host"])()),
Object(tslib__WEBPACK_IMPORTED_MODULE_0__["__metadata"])("design:paramtypes", [_angular_core__WEBPACK_IMPORTED_MODULE_1__["ElementRef"], _angular_core__WEBPACK_IMPORTED_MODULE_1__["Renderer2"],
SelectMultipleControlValueAccessor])
], NgSelectMultipleOption);
return NgSelectMultipleOption;
}());
/**
* @license
* Copyright Google Inc. 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
*/
function controlPath(name, parent) {
return Object(tslib__WEBPACK_IMPORTED_MODULE_0__["__spread"])(parent.path, [name]);
}
function setUpControl(control, dir) {
if (!control)
_throwError(dir, 'Cannot find control with');
if (!dir.valueAccessor)
_throwError(dir, 'No value accessor for form control with');
control.validator = Validators.compose([control.validator, dir.validator]);
control.asyncValidator = Validators.composeAsync([control.asyncValidator, dir.asyncValidator]);
dir.valueAccessor.writeValue(control.value);
setUpViewChangePipeline(control, dir);
setUpModelChangePipeline(control, dir);
setUpBlurPipeline(control, dir);
if (dir.valueAccessor.setDisabledState) {
control.registerOnDisabledChange(function (isDisabled) { dir.valueAccessor.setDisabledState(isDisabled); });
}
// re-run validation when validator binding changes, e.g. minlength=3 -> minlength=4
dir._rawValidators.forEach(function (validator) {
if (validator.registerOnValidatorChange)
validator.registerOnValidatorChange(function () { return control.updateValueAndValidity(); });
});
dir._rawAsyncValidators.forEach(function (validator) {
if (validator.registerOnValidatorChange)
validator.registerOnValidatorChange(function () { return control.updateValueAndValidity(); });
});
}
function cleanUpControl(control, dir) {
dir.valueAccessor.registerOnChange(function () { return _noControlError(dir); });
dir.valueAccessor.registerOnTouched(function () { return _noControlError(dir); });
dir._rawValidators.forEach(function (validator) {
if (validator.registerOnValidatorChange) {
validator.registerOnValidatorChange(null);
}
});
dir._rawAsyncValidators.forEach(function (validator) {
if (validator.registerOnValidatorChange) {
validator.registerOnValidatorChange(null);
}
});
if (control)
control._clearChangeFns();
}
function setUpViewChangePipeline(control, dir) {
dir.valueAccessor.registerOnChange(function (newValue) {
control._pendingValue = newValue;
control._pendingChange = true;
control._pendingDirty = true;
if (control.updateOn === 'change')
updateControl(control, dir);
});
}
function setUpBlurPipeline(control, dir) {
dir.valueAccessor.registerOnTouched(function () {
control._pendingTouched = true;
if (control.updateOn === 'blur' && control._pendingChange)
updateControl(control, dir);
if (control.updateOn !== 'submit')
control.markAsTouched();
});
}
function updateControl(control, dir) {
if (control._pendingDirty)
control.markAsDirty();
control.setValue(control._pendingValue, { emitModelToViewChange: false });
dir.viewToModelUpdate(control._pendingValue);
control._pendingChange = false;
}
function setUpModelChangePipeline(control, dir) {
control.registerOnChange(function (newValue, emitModelEvent) {
// control -> view
dir.valueAccessor.writeValue(newValue);
// control -> ngModel
if (emitModelEvent)
dir.viewToModelUpdate(newValue);
});
}
function setUpFormContainer(control, dir) {
if (control == null)
_throwError(dir, 'Cannot find control with');
control.validator = Validators.compose([control.validator, dir.validator]);
control.asyncValidator = Validators.composeAsync([control.asyncValidator, dir.asyncValidator]);
}
function _noControlError(dir) {
return _throwError(dir, 'There is no FormControl instance attached to form control element with');
}
function _throwError(dir, message) {
var messageEnd;
if (dir.path.length > 1) {
messageEnd = "path: '" + dir.path.join(' -> ') + "'";
}
else if (dir.path[0]) {
messageEnd = "name: '" + dir.path + "'";
}
else {
messageEnd = 'unspecified name attribute';
}
throw new Error(message + " " + messageEnd);
}
function composeValidators(validators) {
return validators != null ? Validators.compose(validators.map(normalizeValidator)) : null;
}
function composeAsyncValidators(validators) {
return validators != null ? Validators.composeAsync(validators.map(normalizeAsyncValidator)) :
null;
}
function isPropertyUpdated(changes, viewModel) {
if (!changes.hasOwnProperty('model'))
return false;
var change = changes['model'];
if (change.isFirstChange())
return true;
return !Object(_angular_core__WEBPACK_IMPORTED_MODULE_1__["ɵlooseIdentical"])(viewModel, change.currentValue);
}
var BUILTIN_ACCESSORS = [
CheckboxControlValueAccessor,
RangeValueAccessor,
NumberValueAccessor,
SelectControlValueAccessor,
SelectMultipleControlValueAccessor,
RadioControlValueAccessor,
];
function isBuiltInAccessor(valueAccessor) {
return BUILTIN_ACCESSORS.some(function (a) { return valueAccessor.constructor === a; });
}
function syncPendingControls(form, directives) {
form._syncPendingControls();
directives.forEach(function (dir) {
var control = dir.control;
if (control.updateOn === 'submit' && control._pendingChange) {
dir.viewToModelUpdate(control._pendingValue);
control._pendingChange = false;
}
});
}
// TODO: vsavkin remove it once https://github.com/angular/angular/issues/3011 is implemented
function selectValueAccessor(dir, valueAccessors) {
if (!valueAccessors)
return null;
if (!Array.isArray(valueAccessors))
_throwError(dir, 'Value accessor was not provided as an array for form control with');
var defaultAccessor = undefined;
var builtinAccessor = undefined;
var customAccessor = undefined;
valueAccessors.forEach(function (v) {
if (v.constructor === DefaultValueAccessor) {
defaultAccessor = v;
}
else if (isBuiltInAccessor(v)) {
if (builtinAccessor)
_throwError(dir, 'More than one built-in value accessor matches form control with');
builtinAccessor = v;
}
else {
if (customAccessor)
_throwError(dir, 'More than one custom value accessor matches form control with');
customAccessor = v;
}
});
if (customAccessor)
return customAccessor;
if (builtinAccessor)
return builtinAccessor;
if (defaultAccessor)
return defaultAccessor;
_throwError(dir, 'No valid value accessor for form control with');
return null;
}
function removeDir(list, el) {
var index = list.indexOf(el);
if (index > -1)
list.splice(index, 1);
}
// TODO(kara): remove after deprecation period
function _ngModelWarning(name, type, instance, warningConfig) {
if (!Object(_angular_core__WEBPACK_IMPORTED_MODULE_1__["isDevMode"])() || warningConfig === 'never')
return;
if (((warningConfig === null || warningConfig === 'once') && !type._ngModelWarningSentOnce) ||
(warningConfig === 'always' && !instance._ngModelWarningSent)) {
ReactiveErrors.ngModelWarning(name);
type._ngModelWarningSentOnce = true;
instance._ngModelWarningSent = true;
}
}
/**
* @license
* Copyright Google Inc. 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
*/
/**
* @description
* A base class for code shared between the `NgModelGroup` and `FormGroupName` directives.
*
* @publicApi
*/
var AbstractFormGroupDirective = /** @class */ (function (_super) {
Object(tslib__WEBPACK_IMPORTED_MODULE_0__["__extends"])(AbstractFormGroupDirective, _super);
function AbstractFormGroupDirective() {
return _super !== null && _super.apply(this, arguments) || this;
}
/**
* @description
* An internal callback method triggered on the instance after the inputs are set.
* Registers the group with its parent group.
*/
AbstractFormGroupDirective.prototype.ngOnInit = function () {
this._checkParentType();
this.formDirective.addFormGroup(this);
};
/**
* @description
* An internal callback method triggered before the instance is destroyed.
* Removes the group from its parent group.
*/
AbstractFormGroupDirective.prototype.ngOnDestroy = function () {
if (this.formDirective) {
this.formDirective.removeFormGroup(this);
}
};
Object.defineProperty(AbstractFormGroupDirective.prototype, "control", {
/**
* @description
* The `FormGroup` bound to this directive.
*/
get: function () { return this.formDirective.getFormGroup(this); },
enumerable: true,
configurable: true
});
Object.defineProperty(AbstractFormGroupDirective.prototype, "path", {
/**
* @description
* The path to this group from the top-level directive.
*/
get: function () { return controlPath(this.name, this._parent); },
enumerable: true,
configurable: true
});
Object.defineProperty(AbstractFormGroupDirective.prototype, "formDirective", {
/**
* @description
* The top-level directive for this group if present, otherwise null.
*/
get: function () { return this._parent ? this._parent.formDirective : null; },
enumerable: true,
configurable: true
});
Object.defineProperty(AbstractFormGroupDirective.prototype, "validator", {
/**
* @description
* The synchronous validators registered with this group.
*/
get: function () { return composeValidators(this._validators); },
enumerable: true,
configurable: true
});
Object.defineProperty(AbstractFormGroupDirective.prototype, "asyncValidator", {
/**
* @description
* The async validators registered with this group.
*/
get: function () {
return composeAsyncValidators(this._asyncValidators);
},
enumerable: true,
configurable: true
});
/** @internal */
AbstractFormGroupDirective.prototype._checkParentType = function () { };
return AbstractFormGroupDirective;
}(ControlContainer));
/**
* @license
* Copyright Google Inc. 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
*/
var AbstractControlStatus = /** @class */ (function () {
function AbstractControlStatus(cd) {
this._cd = cd;
}
Object.defineProperty(AbstractControlStatus.prototype, "ngClassUntouched", {
get: function () { return this._cd.control ? this._cd.control.untouched : false; },
enumerable: true,
configurable: true
});
Object.defineProperty(AbstractControlStatus.prototype, "ngClassTouched", {
get: function () { return this._cd.control ? this._cd.control.touched : false; },
enumerable: true,
configurable: true
});
Object.defineProperty(AbstractControlStatus.prototype, "ngClassPristine", {
get: function () { return this._cd.control ? this._cd.control.pristine : false; },
enumerable: true,
configurable: true
});
Object.defineProperty(AbstractControlStatus.prototype, "ngClassDirty", {
get: function () { return this._cd.control ? this._cd.control.dirty : false; },
enumerable: true,
configurable: true
});
Object.defineProperty(AbstractControlStatus.prototype, "ngClassValid", {
get: function () { return this._cd.control ? this._cd.control.valid : false; },
enumerable: true,
configurable: true
});
Object.defineProperty(AbstractControlStatus.prototype, "ngClassInvalid", {
get: function () { return this._cd.control ? this._cd.control.invalid : false; },
enumerable: true,
configurable: true
});
Object.defineProperty(AbstractControlStatus.prototype, "ngClassPending", {
get: function () { return this._cd.control ? this._cd.control.pending : false; },
enumerable: true,
configurable: true
});
return AbstractControlStatus;
}());
var ngControlStatusHost = {
'[class.ng-untouched]': 'ngClassUntouched',
'[class.ng-touched]': 'ngClassTouched',
'[class.ng-pristine]': 'ngClassPristine',
'[class.ng-dirty]': 'ngClassDirty',
'[class.ng-valid]': 'ngClassValid',
'[class.ng-invalid]': 'ngClassInvalid',
'[class.ng-pending]': 'ngClassPending',
};
/**
* @description
* Directive automatically applied to Angular form controls that sets CSS classes
* based on control status.
*
* @usageNotes
*
* ### CSS classes applied
*
* The following classes are applied as the properties become true:
*
* * ng-valid
* * ng-invalid
* * ng-pending
* * ng-pristine
* * ng-dirty
* * ng-untouched
* * ng-touched
*
* @ngModule ReactiveFormsModule
* @ngModule FormsModule
* @publicApi
*/
var NgControlStatus = /** @class */ (function (_super) {
Object(tslib__WEBPACK_IMPORTED_MODULE_0__["__extends"])(NgControlStatus, _super);
function NgControlStatus(cd) {
return _super.call(this, cd) || this;
}
NgControlStatus = Object(tslib__WEBPACK_IMPORTED_MODULE_0__["__decorate"])([
Object(_angular_core__WEBPACK_IMPORTED_MODULE_1__["Directive"])({ selector: '[formControlName],[ngModel],[formControl]', host: ngControlStatusHost }),
Object(tslib__WEBPACK_IMPORTED_MODULE_0__["__param"])(0, Object(_angular_core__WEBPACK_IMPORTED_MODULE_1__["Self"])()),
Object(tslib__WEBPACK_IMPORTED_MODULE_0__["__metadata"])("design:paramtypes", [NgControl])
], NgControlStatus);
return NgControlStatus;
}(AbstractControlStatus));
/**
* @description
* Directive automatically applied to Angular form groups that sets CSS classes
* based on control status (valid/invalid/dirty/etc).
*
* @see `NgControlStatus`
*
* @ngModule ReactiveFormsModule
* @ngModule FormsModule
* @publicApi
*/
var NgControlStatusGroup = /** @class */ (function (_super) {
Object(tslib__WEBPACK_IMPORTED_MODULE_0__["__extends"])(NgControlStatusGroup, _super);
function NgControlStatusGroup(cd) {
return _super.call(this, cd) || this;
}
NgControlStatusGroup = Object(tslib__WEBPACK_IMPORTED_MODULE_0__["__decorate"])([
Object(_angular_core__WEBPACK_IMPORTED_MODULE_1__["Directive"])({
selector: '[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]',
host: ngControlStatusHost
}),
Object(tslib__WEBPACK_IMPORTED_MODULE_0__["__param"])(0, Object(_angular_core__WEBPACK_IMPORTED_MODULE_1__["Self"])()),
Object(tslib__WEBPACK_IMPORTED_MODULE_0__["__metadata"])("design:paramtypes", [ControlContainer])
], NgControlStatusGroup);
return NgControlStatusGroup;
}(AbstractControlStatus));
/**
* @license
* Copyright Google Inc. 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
*/
/**
* Reports that a FormControl is valid, meaning that no errors exist in the input value.
*
* @see `status`
*/
var VALID = 'VALID';
/**
* Reports that a FormControl is invalid, meaning that an error exists in the input value.
*
* @see `status`
*/
var INVALID = 'INVALID';
/**
* Reports that a FormControl is pending, meaning that that async validation is occurring and
* errors are not yet available for the input value.
*
* @see `markAsPending`
* @see `status`
*/
var PENDING = 'PENDING';
/**
* Reports that a FormControl is disabled, meaning that the control is exempt from ancestor
* calculations of validity or value.
*
* @see `markAsDisabled`
* @see `status`
*/
var DISABLED = 'DISABLED';
function _find(control, path, delimiter) {
if (path == null)
return null;
if (!(path instanceof Array)) {
path = path.split(delimiter);
}
if (path instanceof Array && (path.length === 0))
return null;
return path.reduce(function (v, name) {
if (v instanceof FormGroup) {
return v.controls.hasOwnProperty(name) ? v.controls[name] : null;
}
if (v instanceof FormArray) {
return v.at(name) || null;
}
return null;
}, control);
}
function coerceToValidator(validatorOrOpts) {
var validator = (isOptionsObj(validatorOrOpts) ? validatorOrOpts.validators :
validatorOrOpts);
return Array.isArray(validator) ? composeValidators(validator) : validator || null;
}
function coerceToAsyncValidator(asyncValidator, validatorOrOpts) {
var origAsyncValidator = (isOptionsObj(validatorOrOpts) ? validatorOrOpts.asyncValidators :
asyncValidator);
return Array.isArray(origAsyncValidator) ? composeAsyncValidators(origAsyncValidator) :
origAsyncValidator || null;
}
function isOptionsObj(validatorOrOpts) {
return validatorOrOpts != null && !Array.isArray(validatorOrOpts) &&
typeof validatorOrOpts === 'object';
}
/**
* This is the base class for `FormControl`, `FormGroup`, and `FormArray`.
*
* It provides some of the shared behavior that all controls and groups of controls have, like
* running validators, calculating status, and resetting state. It also defines the properties
* that are shared between all sub-classes, like `value`, `valid`, and `dirty`. It shouldn't be
* instantiated directly.
*
* @see [Forms Guide](/guide/forms)
* @see [Reactive Forms Guide](/guide/reactive-forms)
* @see [Dynamic Forms Guide](/guide/dynamic-form)
*
* @publicApi
*/
var AbstractControl = /** @class */ (function () {
/**
* Initialize the AbstractControl instance.
*
* @param validator The function that determines the synchronous validity of this control.
* @param asyncValidator The function that determines the asynchronous validity of this
* control.
*/
function AbstractControl(validator, asyncValidator) {
this.validator = validator;
this.asyncValidator = asyncValidator;
/** @internal */
this._onCollectionChange = function () { };
/**
* A control is `pristine` if the user has not yet changed
* the value in the UI.
*
* @returns True if the user has not yet changed the value in the UI; compare `dirty`.
* Programmatic changes to a control's value do not mark it dirty.
*/
this.pristine = true;
/**
* True if the control is marked as `touched`.
*
* A control is marked `touched` once the user has triggered
* a `blur` event on it.
*/
this.touched = false;
/** @internal */
this._onDisabledChange = [];
}
Object.defineProperty(AbstractControl.prototype, "parent", {
/**
* The parent control.
*/
get: function () { return this._parent; },
enumerable: true,
configurable: true
});
Object.defineProperty(AbstractControl.prototype, "valid", {
/**
* A control is `valid` when its `status` is `VALID`.
*
* @see {@link AbstractControl.status}
*
* @returns True if the control has passed all of its validation tests,
* false otherwise.
*/
get: function () { return this.status === VALID; },
enumerable: true,
configurable: true
});
Object.defineProperty(AbstractControl.prototype, "invalid", {
/**
* A control is `invalid` when its `status` is `INVALID`.
*
* @see {@link AbstractControl.status}
*
* @returns True if this control has failed one or more of its validation checks,
* false otherwise.
*/
get: function () { return this.status === INVALID; },
enumerable: true,
configurable: true
});
Object.defineProperty(AbstractControl.prototype, "pending", {
/**
* A control is `pending` when its `status` is `PENDING`.
*
* @see {@link AbstractControl.status}
*
* @returns True if this control is in the process of conducting a validation check,
* false otherwise.
*/
get: function () { return this.status == PENDING; },
enumerable: true,
configurable: true
});
Object.defineProperty(AbstractControl.prototype, "disabled", {
/**
* A control is `disabled` when its `status` is `DISABLED`.
*
* Disabled controls are exempt from validation checks and
* are not included in the aggregate value of their ancestor
* controls.
*
* @see {@link AbstractControl.status}
*
* @returns True if the control is disabled, false otherwise.
*/
get: function () { return this.status === DISABLED; },
enumerable: true,
configurable: true
});
Object.defineProperty(AbstractControl.prototype, "enabled", {
/**
* A control is `enabled` as long as its `status` is not `DISABLED`.
*
* @returns True if the control has any status other than 'DISABLED',
* false if the status is 'DISABLED'.
*
* @see {@link AbstractControl.status}
*
*/
get: function () { return this.status !== DISABLED; },
enumerable: true,
configurable: true
});
Object.defineProperty(AbstractControl.prototype, "dirty", {
/**
* A control is `dirty` if the user has changed the value
* in the UI.
*
* @returns True if the user has changed the value of this control in the UI; compare `pristine`.
* Programmatic changes to a control's value do not mark it dirty.
*/
get: function () { return !this.pristine; },
enumerable: true,
configurable: true
});
Object.defineProperty(AbstractControl.prototype, "untouched", {
/**
* True if the control has not been marked as touched
*
* A control is `untouched` if the user has not yet triggered
* a `blur` event on it.
*/
get: function () { return !this.touched; },
enumerable: true,
configurable: true
});
Object.defineProperty(AbstractControl.prototype, "updateOn", {
/**
* Reports the update strategy of the `AbstractControl` (meaning
* the event on which the control updates itself).
* Possible values: `'change'` | `'blur'` | `'submit'`
* Default value: `'change'`
*/
get: function () {
return this._updateOn ? this._updateOn : (this.parent ? this.parent.updateOn : 'change');
},
enumerable: true,
configurable: true
});
/**
* Sets the synchronous validators that are active on this control. Calling
* this overwrites any existing sync validators.
*/
AbstractControl.prototype.setValidators = function (newValidator) {
this.validator = coerceToValidator(newValidator);
};
/**
* Sets the async validators that are active on this control. Calling this
* overwrites any existing async validators.
*/
AbstractControl.prototype.setAsyncValidators = function (newValidator) {
this.asyncValidator = coerceToAsyncValidator(newValidator);
};
/**
* Empties out the sync validator list.
*/
AbstractControl.prototype.clearValidators = function () { this.validator = null; };
/**
* Empties out the async validator list.
*/
AbstractControl.prototype.clearAsyncValidators = function () { this.asyncValidator = null; };
/**
* Marks the control as `touched`. A control is touched by focus and
* blur events that do not change the value.
*
* @see `markAsUntouched()`
* @see `markAsDirty()`
* @see `markAsPristine()`
*
* @param opts Configuration options that determine how the control propagates changes
* and emits events events after marking is applied.
* * `onlySelf`: When true, mark only this control. When false or not supplied,
* marks all direct ancestors. Default is false.
*/
AbstractControl.prototype.markAsTouched = function (opts) {
if (opts === void 0) { opts = {}; }
this.touched = true;
if (this._parent && !opts.onlySelf) {
this._parent.markAsTouched(opts);
}
};
/**
* Marks the control as `untouched`.
*
* If the control has any children, also marks all children as `untouched`
* and recalculates the `touched` status of all parent controls.
*
* @see `markAsTouched()`
* @see `markAsDirty()`
* @see `markAsPristine()`
*
* @param opts Configuration options that determine how the control propagates changes
* and emits events after the marking is applied.
* * `onlySelf`: When true, mark only this control. When false or not supplied,
* marks all direct ancestors. Default is false.
*/
AbstractControl.prototype.markAsUntouched = function (opts) {
if (opts === void 0) { opts = {}; }
this.touched = false;
this._pendingTouched = false;
this._forEachChild(function (control) { control.markAsUntouched({ onlySelf: true }); });
if (this._parent && !opts.onlySelf) {
this._parent._updateTouched(opts);
}
};
/**
* Marks the control as `dirty`. A control becomes dirty when
* the control's value is changed through the UI; compare `markAsTouched`.
*
* @see `markAsTouched()`
* @see `markAsUntouched()`
* @see `markAsPristine()`
*
* @param opts Configuration options that determine how the control propagates changes
* and emits events after marking is applied.
* * `onlySelf`: When true, mark only this control. When false or not supplied,
* marks all direct ancestors. Default is false.
*/
AbstractControl.prototype.markAsDirty = function (opts) {
if (opts === void 0) { opts = {}; }
this.pristine = false;
if (this._parent && !opts.onlySelf) {
this._parent.markAsDirty(opts);
}
};
/**
* Marks the control as `pristine`.
*
* If the control has any children, marks all children as `pristine`,
* and recalculates the `pristine` status of all parent
* controls.
*
* @see `markAsTouched()`
* @see `markAsUntouched()`
* @see `markAsDirty()`
*
* @param opts Configuration options that determine how the control emits events after
* marking is applied.
* * `onlySelf`: When true, mark only this control. When false or not supplied,
* marks all direct ancestors. Default is false..
*/
AbstractControl.prototype.markAsPristine = function (opts) {
if (opts === void 0) { opts = {}; }
this.pristine = true;
this._pendingDirty = false;
this._forEachChild(function (control) { control.markAsPristine({ onlySelf: true }); });
if (this._parent && !opts.onlySelf) {
this._parent._updatePristine(opts);
}
};
/**
* Marks the control as `pending`.
*
* A control is pending while the control performs async validation.
*
* @see {@link AbstractControl.status}
*
* @param opts Configuration options that determine how the control propagates changes and
* emits events after marking is applied.
* * `onlySelf`: When true, mark only this control. When false or not supplied,
* marks all direct ancestors. Default is false..
* * `emitEvent`: When true or not supplied (the default), the `statusChanges`
* observable emits an event with the latest status the control is marked pending.
* When false, no events are emitted.
*
*/
AbstractControl.prototype.markAsPending = function (opts) {
if (opts === void 0) { opts = {}; }
this.status = PENDING;
if (opts.emitEvent !== false) {
this.statusChanges.emit(this.status);
}
if (this._parent && !opts.onlySelf) {
this._parent.markAsPending(opts);
}
};
/**
* Disables the control. This means the control is exempt from validation checks and
* excluded from the aggregate value of any parent. Its status is `DISABLED`.
*
* If the control has children, all children are also disabled.
*
* @see {@link AbstractControl.status}
*
* @param opts Configuration options that determine how the control propagates
* changes and emits events after the control is disabled.
* * `onlySelf`: When true, mark only this control. When false or not supplied,
* marks all direct ancestors. Default is false..
* * `emitEvent`: When true or not supplied (the default), both the `statusChanges` and
* `valueChanges`
* observables emit events with the latest status and value when the control is disabled.
* When false, no events are emitted.
*/
AbstractControl.prototype.disable = function (opts) {
if (opts === void 0) { opts = {}; }
this.status = DISABLED;
this.errors = null;
this._forEachChild(function (control) { control.disable(Object(tslib__WEBPACK_IMPORTED_MODULE_0__["__assign"])({}, opts, { onlySelf: true })); });
this._updateValue();
if (opts.emitEvent !== false) {
this.valueChanges.emit(this.value);
this.statusChanges.emit(this.status);
}
this._updateAncestors(opts);
this._onDisabledChange.forEach(function (changeFn) { return changeFn(true); });
};
/**
* Enables the control. This means the control is included in validation checks and
* the aggregate value of its parent. Its status recalculates based on its value and
* its validators.
*
* By default, if the control has children, all children are enabled.
*
* @see {@link AbstractControl.status}
*
* @param opts Configure options that control how the control propagates changes and
* emits events when marked as untouched
* * `onlySelf`: When true, mark only this control. When false or not supplied,
* marks all direct ancestors. Default is false..
* * `emitEvent`: When true or not supplied (the default), both the `statusChanges` and
* `valueChanges`
* observables emit events with the latest status and value when the control is enabled.
* When false, no events are emitted.
*/
AbstractControl.prototype.enable = function (opts) {
if (opts === void 0) { opts = {}; }
this.status = VALID;
this._forEachChild(function (control) { control.enable(Object(tslib__WEBPACK_IMPORTED_MODULE_0__["__assign"])({}, opts, { onlySelf: true })); });
this.updateValueAndValidity({ onlySelf: true, emitEvent: opts.emitEvent });
this._updateAncestors(opts);
this._onDisabledChange.forEach(function (changeFn) { return changeFn(false); });
};
AbstractControl.prototype._updateAncestors = function (opts) {
if (this._parent && !opts.onlySelf) {
this._parent.updateValueAndValidity(opts);
this._parent._updatePristine();
this._parent._updateTouched();
}
};
/**
* @param parent Sets the parent of the control
*/
AbstractControl.prototype.setParent = function (parent) { this._parent = parent; };
/**
* Recalculates the value and validation status of the control.
*
* By default, it also updates the value and validity of its ancestors.
*
* @param opts Configuration options determine how the control propagates changes and emits events
* after updates and validity checks are applied.
* * `onlySelf`: When true, only update this control. When false or not supplied,
* update all direct ancestors. Default is false..
* * `emitEvent`: When true or not supplied (the default), both the `statusChanges` and
* `valueChanges`
* observables emit events with the latest status and value when the control is updated.
* When false, no events are emitted.
*/
AbstractControl.prototype.updateValueAndValidity = function (opts) {
if (opts === void 0) { opts = {}; }
this._setInitialStatus();
this._updateValue();
if (this.enabled) {
this._cancelExistingSubscription();
this.errors = this._runValidator();
this.status = this._calculateStatus();
if (this.status === VALID || this.status === PENDING) {
this._runAsyncValidator(opts.emitEvent);
}
}
if (opts.emitEvent !== false) {
this.valueChanges.emit(this.value);
this.statusChanges.emit(this.status);
}
if (this._parent && !opts.onlySelf) {
this._parent.updateValueAndValidity(opts);
}
};
/** @internal */
AbstractControl.prototype._updateTreeValidity = function (opts) {
if (opts === void 0) { opts = { emitEvent: true }; }
this._forEachChild(function (ctrl) { return ctrl._updateTreeValidity(opts); });
this.updateValueAndValidity({ onlySelf: true, emitEvent: opts.emitEvent });
};
AbstractControl.prototype._setInitialStatus = function () {
this.status = this._allControlsDisabled() ? DISABLED : VALID;
};
AbstractControl.prototype._runValidator = function () {
return this.validator ? this.validator(this) : null;
};
AbstractControl.prototype._runAsyncValidator = function (emitEvent) {
var _this = this;
if (this.asyncValidator) {
this.status = PENDING;
var obs = toObservable(this.asyncValidator(this));
this._asyncValidationSubscription =
obs.subscribe(function (errors) { return _this.setErrors(errors, { emitEvent: emitEvent }); });
}
};
AbstractControl.prototype._cancelExistingSubscription = function () {
if (this._asyncValidationSubscription) {
this._asyncValidationSubscription.unsubscribe();
}
};
/**
* Sets errors on a form control when running validations manually, rather than automatically.
*
* Calling `setErrors` also updates the validity of the parent control.
*
* @usageNotes
* ### Manually set the errors for a control
*
* ```
* const login = new FormControl('someLogin');
* login.setErrors({
* notUnique: true
* });
*
* expect(login.valid).toEqual(false);
* expect(login.errors).toEqual({ notUnique: true });
*
* login.setValue('someOtherLogin');
*
* expect(login.valid).toEqual(true);
* ```
*/
AbstractControl.prototype.setErrors = function (errors, opts) {
if (opts === void 0) { opts = {}; }
this.errors = errors;
this._updateControlsErrors(opts.emitEvent !== false);
};
/**
* Retrieves a child control given the control's name or path.
*
* @param path A dot-delimited string or array of string/number values that define the path to the
* control.
*
* @usageNotes
* ### Retrieve a nested control
*
* For example, to get a `name` control nested within a `person` sub-group:
*
* * `this.form.get('person.name');`
*
* -OR-
*
* * `this.form.get(['person', 'name']);`
*/
AbstractControl.prototype.get = function (path) { return _find(this, path, '.'); };
/**
* @description
* Reports error data for the control with the given path.
*
* @param errorCode The code of the error to check
* @param path A list of control names that designates how to move from the current control
* to the control that should be queried for errors.
*
* @usageNotes
* For example, for the following `FormGroup`:
*
* ```
* form = new FormGroup({
* address: new FormGroup({ street: new FormControl() })
* });
* ```
*
* The path to the 'street' control from the root form would be 'address' -> 'street'.
*
* It can be provided to this method in one of two formats:
*
* 1. An array of string control names, e.g. `['address', 'street']`
* 1. A period-delimited list of control names in one string, e.g. `'address.street'`
*
* @returns error data for that particular error. If the control or error is not present,
* null is returned.
*/
AbstractControl.prototype.getError = function (errorCode, path) {
var control = path ? this.get(path) : this;
return control && control.errors ? control.errors[errorCode] : null;
};
/**
* @description
* Reports whether the control with the given path has the error specified.
*
* @param errorCode The code of the error to check
* @param path A list of control names that designates how to move from the current control
* to the control that should be queried for errors.
*
* @usageNotes
* For example, for the following `FormGroup`:
*
* ```
* form = new FormGroup({
* address: new FormGroup({ street: new FormControl() })
* });
* ```
*
* The path to the 'street' control from the root form would be 'address' -> 'street'.
*
* It can be provided to this method in one of two formats:
*
* 1. An array of string control names, e.g. `['address', 'street']`
* 1. A period-delimited list of control names in one string, e.g. `'address.street'`
*
* If no path is given, this method checks for the error on the current control.
*
* @returns whether the given error is present in the control at the given path.
*
* If the control is not present, false is returned.
*/
AbstractControl.prototype.hasError = function (errorCode, path) {
return !!this.getError(errorCode, path);
};
Object.defineProperty(AbstractControl.prototype, "root", {
/**
* Retrieves the top-level ancestor of this control.
*/
get: function () {
var x = this;
while (x._parent) {
x = x._parent;
}
return x;
},
enumerable: true,
configurable: true
});
/** @internal */
AbstractControl.prototype._updateControlsErrors = function (emitEvent) {
this.status = this._calculateStatus();
if (emitEvent) {
this.statusChanges.emit(this.status);
}
if (this._parent) {
this._parent._updateControlsErrors(emitEvent);
}
};
/** @internal */
AbstractControl.prototype._initObservables = function () {
this.valueChanges = new _angular_core__WEBPACK_IMPORTED_MODULE_1__["EventEmitter"]();
this.statusChanges = new _angular_core__WEBPACK_IMPORTED_MODULE_1__["EventEmitter"]();
};
AbstractControl.prototype._calculateStatus = function () {
if (this._allControlsDisabled())
return DISABLED;
if (this.errors)
return INVALID;
if (this._anyControlsHaveStatus(PENDING))
return PENDING;
if (this._anyControlsHaveStatus(INVALID))
return INVALID;
return VALID;
};
/** @internal */
AbstractControl.prototype._anyControlsHaveStatus = function (status) {
return this._anyControls(function (control) { return control.status === status; });
};
/** @internal */
AbstractControl.prototype._anyControlsDirty = function () {
return this._anyControls(function (control) { return control.dirty; });
};
/** @internal */
AbstractControl.prototype._anyControlsTouched = function () {
return this._anyControls(function (control) { return control.touched; });
};
/** @internal */
AbstractControl.prototype._updatePristine = function (opts) {
if (opts === void 0) { opts = {}; }
this.pristine = !this._anyControlsDirty();
if (this._parent && !opts.onlySelf) {
this._parent._updatePristine(opts);
}
};
/** @internal */
AbstractControl.prototype._updateTouched = function (opts) {
if (opts === void 0) { opts = {}; }
this.touched = this._anyControlsTouched();
if (this._parent && !opts.onlySelf) {
this._parent._updateTouched(opts);
}
};
/** @internal */
AbstractControl.prototype._isBoxedValue = function (formState) {
return typeof formState === 'object' && formState !== null &&
Object.keys(formState).length === 2 && 'value' in formState && 'disabled' in formState;
};
/** @internal */
AbstractControl.prototype._registerOnCollectionChange = function (fn) { this._onCollectionChange = fn; };
/** @internal */
AbstractControl.prototype._setUpdateStrategy = function (opts) {
if (isOptionsObj(opts) && opts.updateOn != null) {
this._updateOn = opts.updateOn;
}
};
return AbstractControl;
}());
/**
* Tracks the value and validation status of an individual form control.
*
* This is one of the three fundamental building blocks of Angular forms, along with
* `FormGroup` and `FormArray`. It extends the `AbstractControl` class that
* implements most of the base functionality for accessing the value, validation status,
* user interactions and events.
*
* @see `AbstractControl`
* @see [Reactive Forms Guide](guide/reactive-forms)
* @see [Usage Notes](#usage-notes)
*
* @usageNotes
*
* ### Initializing Form Controls
*
* Instantiate a `FormControl`, with an initial value.
*
* ```ts
* const control = new FormControl('some value');
* console.log(control.value); // 'some value'
*```
*
* The following example initializes the control with a form state object. The `value`
* and `disabled` keys are required in this case.
*
* ```ts
* const control = new FormControl({ value: 'n/a', disabled: true });
* console.log(control.value); // 'n/a'
* console.log(control.status); // 'DISABLED'
* ```
*
* The following example initializes the control with a sync validator.
*
* ```ts
* const control = new FormControl('', Validators.required);
* console.log(control.value); // ''
* console.log(control.status); // 'INVALID'
* ```
*
* The following example initializes the control using an options object.
*
* ```ts
* const control = new FormControl('', {
* validators: Validators.required,
* asyncValidators: myAsyncValidator
* });
* ```
*
* ### Configure the control to update on a blur event
*
* Set the `updateOn` option to `'blur'` to update on the blur `event`.
*
* ```ts
* const control = new FormControl('', { updateOn: 'blur' });
* ```
*
* ### Configure the control to update on a submit event
*
* Set the `updateOn` option to `'submit'` to update on a submit `event`.
*
* ```ts
* const control = new FormControl('', { updateOn: 'submit' });
* ```
*
* ### Reset the control back to an initial value
*
* You reset to a specific form state by passing through a standalone
* value or a form state object that contains both a value and a disabled state
* (these are the only two properties that cannot be calculated).
*
* ```ts
* const control = new FormControl('Nancy');
*
* console.log(control.value); // 'Nancy'
*
* control.reset('Drew');
*
* console.log(control.value); // 'Drew'
* ```
*
* ### Reset the control back to an initial value and disabled
*
* ```
* const control = new FormControl('Nancy');
*
* console.log(control.value); // 'Nancy'
* console.log(control.status); // 'VALID'
*
* control.reset({ value: 'Drew', disabled: true });
*
* console.log(control.value); // 'Drew'
* console.log(control.status); // 'DISABLED'
* ```
*
* @publicApi
*/
var FormControl = /** @class */ (function (_super) {
Object(tslib__WEBPACK_IMPORTED_MODULE_0__["__extends"])(FormControl, _super);
/**
* Creates a new `FormControl` instance.
*
* @param formState Initializes the control with an initial value,
* or an object that defines the initial value and disabled state.
*
* @param validatorOrOpts A synchronous validator function, or an array of
* such functions, or an `AbstractControlOptions` object that contains validation functions
* and a validation trigger.
*
* @param asyncValidator A single async validator or array of async validator functions
*
*/
function FormControl(formState, validatorOrOpts, asyncValidator) {
if (formState === void 0) { formState = null; }
var _this = _super.call(this, coerceToValidator(validatorOrOpts), coerceToAsyncValidator(asyncValidator, validatorOrOpts)) || this;
/** @internal */
_this._onChange = [];
_this._applyFormState(formState);
_this._setUpdateStrategy(validatorOrOpts);
_this.updateValueAndValidity({ onlySelf: true, emitEvent: false });
_this._initObservables();
return _this;
}
/**
* Sets a new value for the form control.
*
* @param value The new value for the control.
* @param options Configuration options that determine how the control propagates changes
* and emits events when the value changes.
* The configuration options are passed to the {@link AbstractControl#updateValueAndValidity
* updateValueAndValidity} method.
*
* * `onlySelf`: When true, each change only affects this control, and not its parent. Default is
* false.
* * `emitEvent`: When true or not supplied (the default), both the `statusChanges` and
* `valueChanges`
* observables emit events with the latest status and value when the control value is updated.
* When false, no events are emitted.
* * `emitModelToViewChange`: When true or not supplied (the default), each change triggers an
* `onChange` event to
* update the view.
* * `emitViewToModelChange`: When true or not supplied (the default), each change triggers an
* `ngModelChange`
* event to update the model.
*
*/
FormControl.prototype.setValue = function (value, options) {
var _this = this;
if (options === void 0) { options = {}; }
this.value = this._pendingValue = value;
if (this._onChange.length && options.emitModelToViewChange !== false) {
this._onChange.forEach(function (changeFn) { return changeFn(_this.value, options.emitViewToModelChange !== false); });
}
this.updateValueAndValidity(options);
};
/**
* Patches the value of a control.
*
* This function is functionally the same as {@link FormControl#setValue setValue} at this level.
* It exists for symmetry with {@link FormGroup#patchValue patchValue} on `FormGroups` and
* `FormArrays`, where it does behave differently.
*
* @see `setValue` for options
*/
FormControl.prototype.patchValue = function (value, options) {
if (options === void 0) { options = {}; }
this.setValue(value, options);
};
/**
* Resets the form control, marking it `pristine` and `untouched`, and setting
* the value to null.
*
* @param formState Resets the control with an initial value,
* or an object that defines the initial value and disabled state.
*
* @param options Configuration options that determine how the control propagates changes
* and emits events after the value changes.
*
* * `onlySelf`: When true, each change only affects this control, and not its parent. Default is
* false.
* * `emitEvent`: When true or not supplied (the default), both the `statusChanges` and
* `valueChanges`
* observables emit events with the latest status and value when the control is reset.
* When false, no events are emitted.
*
*/
FormControl.prototype.reset = function (formState, options) {
if (formState === void 0) { formState = null; }
if (options === void 0) { options = {}; }
this._applyFormState(formState);
this.markAsPristine(options);
this.markAsUntouched(options);
this.setValue(this.value, options);
this._pendingChange = false;
};
/**
* @internal
*/
FormControl.prototype._updateValue = function () { };
/**
* @internal
*/
FormControl.prototype._anyControls = function (condition) { return false; };
/**
* @internal
*/
FormControl.prototype._allControlsDisabled = function () { return this.disabled; };
/**
* Register a listener for change events.
*
* @param fn The method that is called when the value changes
*/
FormControl.prototype.registerOnChange = function (fn) { this._onChange.push(fn); };
/**
* @internal
*/
FormControl.prototype._clearChangeFns = function () {
this._onChange = [];
this._onDisabledChange = [];
this._onCollectionChange = function () { };
};
/**
* Register a listener for disabled events.
*
* @param fn The method that is called when the disabled status changes.
*/
FormControl.prototype.registerOnDisabledChange = function (fn) {
this._onDisabledChange.push(fn);
};
/**
* @internal
*/
FormControl.prototype._forEachChild = function (cb) { };
/** @internal */
FormControl.prototype._syncPendingControls = function () {
if (this.updateOn === 'submit') {
if (this._pendingDirty)
this.markAsDirty();
if (this._pendingTouched)
this.markAsTouched();
if (this._pendingChange) {
this.setValue(this._pendingValue, { onlySelf: true, emitModelToViewChange: false });
return true;
}
}
return false;
};
FormControl.prototype._applyFormState = function (formState) {
if (this._isBoxedValue(formState)) {
this.value = this._pendingValue = formState.value;
formState.disabled ? this.disable({ onlySelf: true, emitEvent: false }) :
this.enable({ onlySelf: true, emitEvent: false });
}
else {
this.value = this._pendingValue = formState;
}
};
return FormControl;
}(AbstractControl));
/**
* Tracks the value and validity state of a group of `FormControl` instances.
*
* A `FormGroup` aggregates the values of each child `FormControl` into one object,
* with each control name as the key. It calculates its status by reducing the status values
* of its children. For example, if one of the controls in a group is invalid, the entire
* group becomes invalid.
*
* `FormGroup` is one of the three fundamental building blocks used to define forms in Angular,
* along with `FormControl` and `FormArray`.
*
* When instantiating a `FormGroup`, pass in a collection of child controls as the first
* argument. The key for each child registers the name for the control.
*
* @usageNotes
*
* ### Create a form group with 2 controls
*
* ```
* const form = new FormGroup({
* first: new FormControl('Nancy', Validators.minLength(2)),
* last: new FormControl('Drew'),
* });
*
* console.log(form.value); // {first: 'Nancy', last; 'Drew'}
* console.log(form.status); // 'VALID'
* ```
*
* ### Create a form group with a group-level validator
*
* You include group-level validators as the second arg, or group-level async
* validators as the third arg. These come in handy when you want to perform validation
* that considers the value of more than one child control.
*
* ```
* const form = new FormGroup({
* password: new FormControl('', Validators.minLength(2)),
* passwordConfirm: new FormControl('', Validators.minLength(2)),
* }, passwordMatchValidator);
*
*
* function passwordMatchValidator(g: FormGroup) {
* return g.get('password').value === g.get('passwordConfirm').value
* ? null : {'mismatch': true};
* }
* ```
*
* Like `FormControl` instances, you choose to pass in
* validators and async validators as part of an options object.
*
* ```
* const form = new FormGroup({
* password: new FormControl('')
* passwordConfirm: new FormControl('')
* }, { validators: passwordMatchValidator, asyncValidators: otherValidator });
* ```
*
* ### Set the updateOn property for all controls in a form group
*
* The options object is used to set a default value for each child
* control's `updateOn` property. If you set `updateOn` to `'blur'` at the
* group level, all child controls default to 'blur', unless the child
* has explicitly specified a different `updateOn` value.
*
* ```ts
* const c = new FormGroup({
* one: new FormControl()
* }, { updateOn: 'blur' });
* ```
*
* @publicApi
*/
var FormGroup = /** @class */ (function (_super) {
Object(tslib__WEBPACK_IMPORTED_MODULE_0__["__extends"])(FormGroup, _super);
/**
* Creates a new `FormGroup` instance.
*
* @param controls A collection of child controls. The key for each child is the name
* under which it is registered.
*
* @param validatorOrOpts A synchronous validator function, or an array of
* such functions, or an `AbstractControlOptions` object that contains validation functions
* and a validation trigger.
*
* @param asyncValidator A single async validator or array of async validator functions
*
*/
function FormGroup(controls, validatorOrOpts, asyncValidator) {
var _this = _super.call(this, coerceToValidator(validatorOrOpts), coerceToAsyncValidator(asyncValidator, validatorOrOpts)) || this;
_this.controls = controls;
_this._initObservables();
_this._setUpdateStrategy(validatorOrOpts);
_this._setUpControls();
_this.updateValueAndValidity({ onlySelf: true, emitEvent: false });
return _this;
}
/**
* Registers a control with the group's list of controls.
*
* This method does not update the value or validity of the control.
* Use {@link FormGroup#addControl addControl} instead.
*
* @param name The control name to register in the collection
* @param control Provides the control for the given name
*/
FormGroup.prototype.registerControl = function (name, control) {
if (this.controls[name])
return this.controls[name];
this.controls[name] = control;
control.setParent(this);
control._registerOnCollectionChange(this._onCollectionChange);
return control;
};
/**
* Add a control to this group.
*
* This method also updates the value and validity of the control.
*
* @param name The control name to add to the collection
* @param control Provides the control for the given name
*/
FormGroup.prototype.addControl = function (name, control) {
this.registerControl(name, control);
this.updateValueAndValidity();
this._onCollectionChange();
};
/**
* Remove a control from this group.
*
* @param name The control name to remove from the collection
*/
FormGroup.prototype.removeControl = function (name) {
if (this.controls[name])
this.controls[name]._registerOnCollectionChange(function () { });
delete (this.controls[name]);
this.updateValueAndValidity();
this._onCollectionChange();
};
/**
* Replace an existing control.
*
* @param name The control name to replace in the collection
* @param control Provides the control for the given name
*/
FormGroup.prototype.setControl = function (name, control) {
if (this.controls[name])
this.controls[name]._registerOnCollectionChange(function () { });
delete (this.controls[name]);
if (control)
this.registerControl(name, control);
this.updateValueAndValidity();
this._onCollectionChange();
};
/**
* Check whether there is an enabled control with the given name in the group.
*
* Reports false for disabled controls. If you'd like to check for existence in the group
* only, use {@link AbstractControl#get get} instead.
*
* @param name The control name to check for existence in the collection
*
* @returns false for disabled controls, true otherwise.
*/
FormGroup.prototype.contains = function (controlName) {
return this.controls.hasOwnProperty(controlName) && this.controls[controlName].enabled;
};
/**
* Sets the value of the `FormGroup`. It accepts an object that matches
* the structure of the group, with control names as keys.
*
* @usageNotes
* ### Set the complete value for the form group
*
* ```
* const form = new FormGroup({
* first: new FormControl(),
* last: new FormControl()
* });
*
* console.log(form.value); // {first: null, last: null}
*
* form.setValue({first: 'Nancy', last: 'Drew'});
* console.log(form.value); // {first: 'Nancy', last: 'Drew'}
* ```
*
* @throws When strict checks fail, such as setting the value of a control
* that doesn't exist or if you excluding the value of a control.
*
* @param value The new value for the control that matches the structure of the group.
* @param options Configuration options that determine how the control propagates changes
* and emits events after the value changes.
* The configuration options are passed to the {@link AbstractControl#updateValueAndValidity
* updateValueAndValidity} method.
*
* * `onlySelf`: When true, each change only affects this control, and not its parent. Default is
* false.
* * `emitEvent`: When true or not supplied (the default), both the `statusChanges` and
* `valueChanges`
* observables emit events with the latest status and value when the control value is updated.
* When false, no events are emitted.
*/
FormGroup.prototype.setValue = function (value, options) {
var _this = this;
if (options === void 0) { options = {}; }
this._checkAllValuesPresent(value);
Object.keys(value).forEach(function (name) {
_this._throwIfControlMissing(name);
_this.controls[name].setValue(value[name], { onlySelf: true, emitEvent: options.emitEvent });
});
this.updateValueAndValidity(options);
};
/**
* Patches the value of the `FormGroup`. It accepts an object with control
* names as keys, and does its best to match the values to the correct controls
* in the group.
*
* It accepts both super-sets and sub-sets of the group without throwing an error.
*
* @usageNotes
* ### Patch the value for a form group
*
* ```
* const form = new FormGroup({
* first: new FormControl(),
* last: new FormControl()
* });
* console.log(form.value); // {first: null, last: null}
*
* form.patchValue({first: 'Nancy'});
* console.log(form.value); // {first: 'Nancy', last: null}
* ```
*
* @param value The object that matches the structure of the group.
* @param options Configuration options that determine how the control propagates changes and
* emits events after the value is patched.
* * `onlySelf`: When true, each change only affects this control and not its parent. Default is
* true.
* * `emitEvent`: When true or not supplied (the default), both the `statusChanges` and
* `valueChanges`
* observables emit events with the latest status and value when the control value is updated.
* When false, no events are emitted.
* The configuration options are passed to the {@link AbstractControl#updateValueAndValidity
* updateValueAndValidity} method.
*/
FormGroup.prototype.patchValue = function (value, options) {
var _this = this;
if (options === void 0) { options = {}; }
Object.keys(value).forEach(function (name) {
if (_this.controls[name]) {
_this.controls[name].patchValue(value[name], { onlySelf: true, emitEvent: options.emitEvent });
}
});
this.updateValueAndValidity(options);
};
/**
* Resets the `FormGroup`, marks all descendants are marked `pristine` and `untouched`, and
* the value of all descendants to null.
*
* You reset to a specific form state by passing in a map of states
* that matches the structure of your form, with control names as keys. The state
* is a standalone value or a form state object with both a value and a disabled
* status.
*
* @param formState Resets the control with an initial value,
* or an object that defines the initial value and disabled state.
*
* @param options Configuration options that determine how the control propagates changes
* and emits events when the group is reset.
* * `onlySelf`: When true, each change only affects this control, and not its parent. Default is
* false.
* * `emitEvent`: When true or not supplied (the default), both the `statusChanges` and
* `valueChanges`
* observables emit events with the latest status and value when the control is reset.
* When false, no events are emitted.
* The configuration options are passed to the {@link AbstractControl#updateValueAndValidity
* updateValueAndValidity} method.
*
* @usageNotes
*
* ### Reset the form group values
*
* ```ts
* const form = new FormGroup({
* first: new FormControl('first name'),
* last: new FormControl('last name')
* });
*
* console.log(form.value); // {first: 'first name', last: 'last name'}
*
* form.reset({ first: 'name', last: 'last name' });
*
* console.log(form.value); // {first: 'name', last: 'last name'}
* ```
*
* ### Reset the form group values and disabled status
*
* ```
* const form = new FormGroup({
* first: new FormControl('first name'),
* last: new FormControl('last name')
* });
*
* form.reset({
* first: {value: 'name', disabled: true},
* last: 'last'
* });
*
* console.log(this.form.value); // {first: 'name', last: 'last name'}
* console.log(this.form.get('first').status); // 'DISABLED'
* ```
*/
FormGroup.prototype.reset = function (value, options) {
if (value === void 0) { value = {}; }
if (options === void 0) { options = {}; }
this._forEachChild(function (control, name) {
control.reset(value[name], { onlySelf: true, emitEvent: options.emitEvent });
});
this.updateValueAndValidity(options);
this._updatePristine(options);
this._updateTouched(options);
};
/**
* The aggregate value of the `FormGroup`, including any disabled controls.
*
* Retrieves all values regardless of disabled status.
* The `value` property is the best way to get the value of the group, because
* it excludes disabled controls in the `FormGroup`.
*/
FormGroup.prototype.getRawValue = function () {
return this._reduceChildren({}, function (acc, control, name) {
acc[name] = control instanceof FormControl ? control.value : control.getRawValue();
return acc;
});
};
/** @internal */
FormGroup.prototype._syncPendingControls = function () {
var subtreeUpdated = this._reduceChildren(false, function (updated, child) {
return child._syncPendingControls() ? true : updated;
});
if (subtreeUpdated)
this.updateValueAndValidity({ onlySelf: true });
return subtreeUpdated;
};
/** @internal */
FormGroup.prototype._throwIfControlMissing = function (name) {
if (!Object.keys(this.controls).length) {
throw new Error("\n There are no form controls registered with this group yet. If you're using ngModel,\n you may want to check next tick (e.g. use setTimeout).\n ");
}
if (!this.controls[name]) {
throw new Error("Cannot find form control with name: " + name + ".");
}
};
/** @internal */
FormGroup.prototype._forEachChild = function (cb) {
var _this = this;
Object.keys(this.controls).forEach(function (k) { return cb(_this.controls[k], k); });
};
/** @internal */
FormGroup.prototype._setUpControls = function () {
var _this = this;
this._forEachChild(function (control) {
control.setParent(_this);
control._registerOnCollectionChange(_this._onCollectionChange);
});
};
/** @internal */
FormGroup.prototype._updateValue = function () { this.value = this._reduceValue(); };
/** @internal */
FormGroup.prototype._anyControls = function (condition) {
var _this = this;
var res = false;
this._forEachChild(function (control, name) {
res = res || (_this.contains(name) && condition(control));
});
return res;
};
/** @internal */
FormGroup.prototype._reduceValue = function () {
var _this = this;
return this._reduceChildren({}, function (acc, control, name) {
if (control.enabled || _this.disabled) {
acc[name] = control.value;
}
return acc;
});
};
/** @internal */
FormGroup.prototype._reduceChildren = function (initValue, fn) {
var res = initValue;
this._forEachChild(function (control, name) { res = fn(res, control, name); });
return res;
};
/** @internal */
FormGroup.prototype._allControlsDisabled = function () {
var e_1, _a;
try {
for (var _b = Object(tslib__WEBPACK_IMPORTED_MODULE_0__["__values"])(Object.keys(this.controls)), _c = _b.next(); !_c.done; _c = _b.next()) {
var controlName = _c.value;
if (this.controls[controlName].enabled) {
return false;
}
}
}
catch (e_1_1) { e_1 = { error: e_1_1 }; }
finally {
try {
if (_c && !_c.done && (_a = _b.return)) _a.call(_b);
}
finally { if (e_1) throw e_1.error; }
}
return Object.keys(this.controls).length > 0 || this.disabled;
};
/** @internal */
FormGroup.prototype._checkAllValuesPresent = function (value) {
this._forEachChild(function (control, name) {
if (value[name] === undefined) {
throw new Error("Must supply a value for form control with name: '" + name + "'.");
}
});
};
return FormGroup;
}(AbstractControl));
/**
* Tracks the value and validity state of an array of `FormControl`,
* `FormGroup` or `FormArray` instances.
*
* A `FormArray` aggregates the values of each child `FormControl` into an array.
* It calculates its status by reducing the status values of its children. For example, if one of
* the controls in a `FormArray` is invalid, the entire array becomes invalid.
*
* `FormArray` is one of the three fundamental building blocks used to define forms in Angular,
* along with `FormControl` and `FormGroup`.
*
* @usageNotes
*
* ### Create an array of form controls
*
* ```
* const arr = new FormArray([
* new FormControl('Nancy', Validators.minLength(2)),
* new FormControl('Drew'),
* ]);
*
* console.log(arr.value); // ['Nancy', 'Drew']
* console.log(arr.status); // 'VALID'
* ```
*
* ### Create a form array with array-level validators
*
* You include array-level validators and async validators. These come in handy
* when you want to perform validation that considers the value of more than one child
* control.
*
* The two types of validators are passed in separately as the second and third arg
* respectively, or together as part of an options object.
*
* ```
* const arr = new FormArray([
* new FormControl('Nancy'),
* new FormControl('Drew')
* ], {validators: myValidator, asyncValidators: myAsyncValidator});
* ```
*
* ### Set the updateOn property for all controls in a form array
*
* The options object is used to set a default value for each child
* control's `updateOn` property. If you set `updateOn` to `'blur'` at the
* array level, all child controls default to 'blur', unless the child
* has explicitly specified a different `updateOn` value.
*
* ```ts
* const arr = new FormArray([
* new FormControl()
* ], {updateOn: 'blur'});
* ```
*
* ### Adding or removing controls from a form array
*
* To change the controls in the array, use the `push`, `insert`, or `removeAt` methods
* in `FormArray` itself. These methods ensure the controls are properly tracked in the
* form's hierarchy. Do not modify the array of `AbstractControl`s used to instantiate
* the `FormArray` directly, as that result in strange and unexpected behavior such
* as broken change detection.
*
* @publicApi
*/
var FormArray = /** @class */ (function (_super) {
Object(tslib__WEBPACK_IMPORTED_MODULE_0__["__extends"])(FormArray, _super);
/**
* Creates a new `FormArray` instance.
*
* @param controls An array of child controls. Each child control is given an index
* where it is registered.
*
* @param validatorOrOpts A synchronous validator function, or an array of
* such functions, or an `AbstractControlOptions` object that contains validation functions
* and a validation trigger.
*
* @param asyncValidator A single async validator or array of async validator functions
*
*/
function FormArray(controls, validatorOrOpts, asyncValidator) {
var _this = _super.call(this, coerceToValidator(validatorOrOpts), coerceToAsyncValidator(asyncValidator, validatorOrOpts)) || this;
_this.controls = controls;
_this._initObservables();
_this._setUpdateStrategy(validatorOrOpts);
_this._setUpControls();
_this.updateValueAndValidity({ onlySelf: true, emitEvent: false });
return _this;
}
/**
* Get the `AbstractControl` at the given `index` in the array.
*
* @param index Index in the array to retrieve the control
*/
FormArray.prototype.at = function (index) { return this.controls[index]; };
/**
* Insert a new `AbstractControl` at the end of the array.
*
* @param control Form control to be inserted
*/
FormArray.prototype.push = function (control) {
this.controls.push(control);
this._registerControl(control);
this.updateValueAndValidity();
this._onCollectionChange();
};
/**
* Insert a new `AbstractControl` at the given `index` in the array.
*
* @param index Index in the array to insert the control
* @param control Form control to be inserted
*/
FormArray.prototype.insert = function (index, control) {
this.controls.splice(index, 0, control);
this._registerControl(control);
this.updateValueAndValidity();
};
/**
* Remove the control at the given `index` in the array.
*
* @param index Index in the array to remove the control
*/
FormArray.prototype.removeAt = function (index) {
if (this.controls[index])
this.controls[index]._registerOnCollectionChange(function () { });
this.controls.splice(index, 1);
this.updateValueAndValidity();
};
/**
* Replace an existing control.
*
* @param index Index in the array to replace the control
* @param control The `AbstractControl` control to replace the existing control
*/
FormArray.prototype.setControl = function (index, control) {
if (this.controls[index])
this.controls[index]._registerOnCollectionChange(function () { });
this.controls.splice(index, 1);
if (control) {
this.controls.splice(index, 0, control);
this._registerControl(control);
}
this.updateValueAndValidity();
this._onCollectionChange();
};
Object.defineProperty(FormArray.prototype, "length", {
/**
* Length of the control array.
*/
get: function () { return this.controls.length; },
enumerable: true,
configurable: true
});
/**
* Sets the value of the `FormArray`. It accepts an array that matches
* the structure of the control.
*
* This method performs strict checks, and throws an error if you try
* to set the value of a control that doesn't exist or if you exclude the
* value of a control.
*
* @usageNotes
* ### Set the values for the controls in the form array
*
* ```
* const arr = new FormArray([
* new FormControl(),
* new FormControl()
* ]);
* console.log(arr.value); // [null, null]
*
* arr.setValue(['Nancy', 'Drew']);
* console.log(arr.value); // ['Nancy', 'Drew']
* ```
*
* @param value Array of values for the controls
* @param options Configure options that determine how the control propagates changes and
* emits events after the value changes
*
* * `onlySelf`: When true, each change only affects this control, and not its parent. Default
* is false.
* * `emitEvent`: When true or not supplied (the default), both the `statusChanges` and
* `valueChanges`
* observables emit events with the latest status and value when the control value is updated.
* When false, no events are emitted.
* The configuration options are passed to the {@link AbstractControl#updateValueAndValidity
* updateValueAndValidity} method.
*/
FormArray.prototype.setValue = function (value, options) {
var _this = this;
if (options === void 0) { options = {}; }
this._checkAllValuesPresent(value);
value.forEach(function (newValue, index) {
_this._throwIfControlMissing(index);
_this.at(index).setValue(newValue, { onlySelf: true, emitEvent: options.emitEvent });
});
this.updateValueAndValidity(options);
};
/**
* Patches the value of the `FormArray`. It accepts an array that matches the
* structure of the control, and does its best to match the values to the correct
* controls in the group.
*
* It accepts both super-sets and sub-sets of the array without throwing an error.
*
* @usageNotes
* ### Patch the values for controls in a form array
*
* ```
* const arr = new FormArray([
* new FormControl(),
* new FormControl()
* ]);
* console.log(arr.value); // [null, null]
*
* arr.patchValue(['Nancy']);
* console.log(arr.value); // ['Nancy', null]
* ```
*
* @param value Array of latest values for the controls
* @param options Configure options that determine how the control propagates changes and
* emits events after the value changes
*
* * `onlySelf`: When true, each change only affects this control, and not its parent. Default
* is false.
* * `emitEvent`: When true or not supplied (the default), both the `statusChanges` and
* `valueChanges`
* observables emit events with the latest status and value when the control value is updated.
* When false, no events are emitted.
* The configuration options are passed to the {@link AbstractControl#updateValueAndValidity
* updateValueAndValidity} method.
*/
FormArray.prototype.patchValue = function (value, options) {
var _this = this;
if (options === void 0) { options = {}; }
value.forEach(function (newValue, index) {
if (_this.at(index)) {
_this.at(index).patchValue(newValue, { onlySelf: true, emitEvent: options.emitEvent });
}
});
this.updateValueAndValidity(options);
};
/**
* Resets the `FormArray` and all descendants are marked `pristine` and `untouched`, and the
* value of all descendants to null or null maps.
*
* You reset to a specific form state by passing in an array of states
* that matches the structure of the control. The state is a standalone value
* or a form state object with both a value and a disabled status.
*
* @usageNotes
* ### Reset the values in a form array
*
* ```ts
* const arr = new FormArray([
* new FormControl(),
* new FormControl()
* ]);
* arr.reset(['name', 'last name']);
*
* console.log(this.arr.value); // ['name', 'last name']
* ```
*
* ### Reset the values in a form array and the disabled status for the first control
*
* ```
* this.arr.reset([
* {value: 'name', disabled: true},
* 'last'
* ]);
*
* console.log(this.arr.value); // ['name', 'last name']
* console.log(this.arr.get(0).status); // 'DISABLED'
* ```
*
* @param value Array of values for the controls
* @param options Configure options that determine how the control propagates changes and
* emits events after the value changes
*
* * `onlySelf`: When true, each change only affects this control, and not its parent. Default
* is false.
* * `emitEvent`: When true or not supplied (the default), both the `statusChanges` and
* `valueChanges`
* observables emit events with the latest status and value when the control is reset.
* When false, no events are emitted.
* The configuration options are passed to the {@link AbstractControl#updateValueAndValidity
* updateValueAndValidity} method.
*/
FormArray.prototype.reset = function (value, options) {
if (value === void 0) { value = []; }
if (options === void 0) { options = {}; }
this._forEachChild(function (control, index) {
control.reset(value[index], { onlySelf: true, emitEvent: options.emitEvent });
});
this.updateValueAndValidity(options);
this._updatePristine(options);
this._updateTouched(options);
};
/**
* The aggregate value of the array, including any disabled controls.
*
* Reports all values regardless of disabled status.
* For enabled controls only, the `value` property is the best way to get the value of the array.
*/
FormArray.prototype.getRawValue = function () {
return this.controls.map(function (control) {
return control instanceof FormControl ? control.value : control.getRawValue();
});
};
/** @internal */
FormArray.prototype._syncPendingControls = function () {
var subtreeUpdated = this.controls.reduce(function (updated, child) {
return child._syncPendingControls() ? true : updated;
}, false);
if (subtreeUpdated)
this.updateValueAndValidity({ onlySelf: true });
return subtreeUpdated;
};
/** @internal */
FormArray.prototype._throwIfControlMissing = function (index) {
if (!this.controls.length) {
throw new Error("\n There are no form controls registered with this array yet. If you're using ngModel,\n you may want to check next tick (e.g. use setTimeout).\n ");
}
if (!this.at(index)) {
throw new Error("Cannot find form control at index " + index);
}
};
/** @internal */
FormArray.prototype._forEachChild = function (cb) {
this.controls.forEach(function (control, index) { cb(control, index); });
};
/** @internal */
FormArray.prototype._updateValue = function () {
var _this = this;
this.value =
this.controls.filter(function (control) { return control.enabled || _this.disabled; })
.map(function (control) { return control.value; });
};
/** @internal */
FormArray.prototype._anyControls = function (condition) {
return this.controls.some(function (control) { return control.enabled && condition(control); });
};
/** @internal */
FormArray.prototype._setUpControls = function () {
var _this = this;
this._forEachChild(function (control) { return _this._registerControl(control); });
};
/** @internal */
FormArray.prototype._checkAllValuesPresent = function (value) {
this._forEachChild(function (control, i) {
if (value[i] === undefined) {
throw new Error("Must supply a value for form control at index: " + i + ".");
}
});
};
/** @internal */
FormArray.prototype._allControlsDisabled = function () {
var e_2, _a;
try {
for (var _b = Object(tslib__WEBPACK_IMPORTED_MODULE_0__["__values"])(this.controls), _c = _b.next(); !_c.done; _c = _b.next()) {
var control = _c.value;
if (control.enabled)
return false;
}
}
catch (e_2_1) { e_2 = { error: e_2_1 }; }
finally {
try {
if (_c && !_c.done && (_a = _b.return)) _a.call(_b);
}
finally { if (e_2) throw e_2.error; }
}
return this.controls.length > 0 || this.disabled;
};
FormArray.prototype._registerControl = function (control) {
control.setParent(this);
control._registerOnCollectionChange(this._onCollectionChange);
};
return FormArray;
}(AbstractControl));
/**
* @license
* Copyright Google Inc. 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
*/
var formDirectiveProvider = {
provide: ControlContainer,
useExisting: Object(_angular_core__WEBPACK_IMPORTED_MODULE_1__["forwardRef"])(function () { return NgForm; })
};
var resolvedPromise = Promise.resolve(null);
/**
* @description
* Creates a top-level `FormGroup` instance and binds it to a form
* to track aggregate form value and validation status.
*
* As soon as you import the `FormsModule`, this directive becomes active by default on
* all `
