@angular-mdc/web
Version:
1,429 lines (1,389 loc) • 54.6 kB
JavaScript
/**
* @license
* Copyright (c) Dominic Carretto
*
* Use of this source code is governed by an MIT-style license that can be
* found in the LICENSE file at https://github.com/trimox/angular-mdc-web/blob/master/LICENSE
*/
(function (global, factory) {
typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('@angular/common'), require('@angular-mdc/web/floating-label'), require('@angular-mdc/web/line-ripple'), require('@angular-mdc/web/notched-outline'), require('@angular-mdc/web/form-field'), require('@angular-mdc/web/menu'), require('@angular-mdc/web/list'), require('@angular/forms'), require('@angular/cdk/coercion'), require('@angular/cdk/platform'), require('rxjs'), require('rxjs/operators'), require('@angular-mdc/web/base'), require('@angular-mdc/web/ripple'), require('@material/ripple'), require('@material/select')) :
typeof define === 'function' && define.amd ? define('@angular-mdc/web/select', ['exports', '@angular/core', '@angular/common', '@angular-mdc/web/floating-label', '@angular-mdc/web/line-ripple', '@angular-mdc/web/notched-outline', '@angular-mdc/web/form-field', '@angular-mdc/web/menu', '@angular-mdc/web/list', '@angular/forms', '@angular/cdk/coercion', '@angular/cdk/platform', 'rxjs', 'rxjs/operators', '@angular-mdc/web/base', '@angular-mdc/web/ripple', '@material/ripple', '@material/select'], factory) :
(global = global || self, factory((global.ng = global.ng || {}, global.ng.web = global.ng.web || {}, global.ng.web.select = {}), global.ng.core, global.ng.common, global.ng.web.floatingLabel, global.ng.web.lineRipple, global.ng.web.notchedOutline, global.ng.web.formField, global.ng.web.menu, global.ng.web.list, global.ng.forms, global.ng.cdk.coercion, global.ng.cdk.platform, global.rxjs, global.rxjs.operators, global.ng.web.base, global.ng.web.ripple, global.mdc.ripple, global.mdc.select));
}(this, (function (exports, core, common, floatingLabel, lineRipple, notchedOutline, formField, menu, list, forms, coercion, platform, rxjs, operators, base, ripple, ripple$1, select) { 'use strict';
/*! *****************************************************************************
Copyright (c) Microsoft Corporation. All rights reserved.
Licensed under the Apache License, Version 2.0 (the "License"); you may not use
this file except in compliance with the License. You may obtain a copy of the
License at http://www.apache.org/licenses/LICENSE-2.0
THIS CODE IS PROVIDED ON AN *AS IS* BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
KIND, EITHER EXPRESS OR IMPLIED, INCLUDING WITHOUT LIMITATION ANY IMPLIED
WARRANTIES OR CONDITIONS OF TITLE, FITNESS FOR A PARTICULAR PURPOSE,
MERCHANTABLITY OR NON-INFRINGEMENT.
See the Apache Version 2.0 License for specific language governing permissions
and limitations under the License.
***************************************************************************** */
/* global Reflect, Promise */
var _extendStatics = function extendStatics(d, b) {
_extendStatics = Object.setPrototypeOf || {
__proto__: []
} instanceof Array && function (d, b) {
d.__proto__ = b;
} || function (d, b) {
for (var p in b) {
if (b.hasOwnProperty(p)) d[p] = b[p];
}
};
return _extendStatics(d, b);
};
function __extends(d, b) {
_extendStatics(d, b);
function __() {
this.constructor = d;
}
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
}
var _assign = function __assign() {
_assign = Object.assign || function __assign(t) {
for (var s, i = 1, n = arguments.length; i < n; i++) {
s = arguments[i];
for (var p in s) {
if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
}
}
return t;
};
return _assign.apply(this, arguments);
};
function __awaiter(thisArg, _arguments, P, generator) {
function adopt(value) {
return value instanceof P ? value : new P(function (resolve) {
resolve(value);
});
}
return new (P || (P = Promise))(function (resolve, reject) {
function fulfilled(value) {
try {
step(generator.next(value));
} catch (e) {
reject(e);
}
}
function rejected(value) {
try {
step(generator["throw"](value));
} catch (e) {
reject(e);
}
}
function step(result) {
result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected);
}
step((generator = generator.apply(thisArg, _arguments || [])).next());
});
}
function __generator(thisArg, body) {
var _ = {
label: 0,
sent: function sent() {
if (t[0] & 1) throw t[1];
return t[1];
},
trys: [],
ops: []
},
f,
y,
t,
g;
return g = {
next: verb(0),
"throw": verb(1),
"return": verb(2)
}, typeof Symbol === "function" && (g[Symbol.iterator] = function () {
return this;
}), g;
function verb(n) {
return function (v) {
return step([n, v]);
};
}
function step(op) {
if (f) throw new TypeError("Generator is already executing.");
while (_) {
try {
if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
if (y = 0, t) op = [op[0] & 2, t.value];
switch (op[0]) {
case 0:
case 1:
t = op;
break;
case 4:
_.label++;
return {
value: op[1],
done: false
};
case 5:
_.label++;
y = op[1];
op = [0];
continue;
case 7:
op = _.ops.pop();
_.trys.pop();
continue;
default:
if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) {
_ = 0;
continue;
}
if (op[0] === 3 && (!t || op[1] > t[0] && op[1] < t[3])) {
_.label = op[1];
break;
}
if (op[0] === 6 && _.label < t[1]) {
_.label = t[1];
t = op;
break;
}
if (t && _.label < t[2]) {
_.label = t[2];
_.ops.push(op);
break;
}
if (t[2]) _.ops.pop();
_.trys.pop();
continue;
}
op = body.call(thisArg, _);
} catch (e) {
op = [6, e];
y = 0;
} finally {
f = t = 0;
}
}
if (op[0] & 5) throw op[1];
return {
value: op[0] ? op[1] : void 0,
done: true
};
}
}
/**
* @fileoverview added by tsickle
* Generated from: select/select-directives.ts
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
var MdcSelectIcon = /** @class */ (function () {
function MdcSelectIcon() {
}
MdcSelectIcon.decorators = [
{ type: core.Directive, args: [{
selector: '[mdcSelectIcon]',
exportAs: 'mdcSelectIcon',
host: { 'class': 'mdc-select__icon' }
},] },
];
return MdcSelectIcon;
}());
var MdcSelectAnchor = /** @class */ (function () {
function MdcSelectAnchor(elementRef) {
this.elementRef = elementRef;
}
Object.defineProperty(MdcSelectAnchor.prototype, "root", {
get: /**
* @return {?}
*/
function () {
return this.elementRef.nativeElement;
},
enumerable: true,
configurable: true
});
MdcSelectAnchor.decorators = [
{ type: core.Directive, args: [{
selector: '[mdcSelectAnchor]',
exportAs: 'mdcSelectAnchor',
host: { 'class': 'mdc-select__anchor' }
},] },
];
/** @nocollapse */
MdcSelectAnchor.ctorParameters = function () { return [
{ type: core.ElementRef }
]; };
return MdcSelectAnchor;
}());
var MdcSelectedText = /** @class */ (function () {
function MdcSelectedText(elementRef) {
this.elementRef = elementRef;
}
Object.defineProperty(MdcSelectedText.prototype, "root", {
get: /**
* @return {?}
*/
function () {
return this.elementRef.nativeElement;
},
enumerable: true,
configurable: true
});
MdcSelectedText.decorators = [
{ type: core.Directive, args: [{
selector: '[mdcSelectedText]',
exportAs: 'mdcSelectedText',
host: {
'class': 'mdc-select__selected-text',
'role': 'button',
'aria-haspopup': 'listbox',
'[attr.aria-labelledby]': 'ariaLabelledby',
'[attr.aria-required]': 'ariaRequired'
}
},] },
];
/** @nocollapse */
MdcSelectedText.ctorParameters = function () { return [
{ type: core.ElementRef }
]; };
MdcSelectedText.propDecorators = {
ariaLabelledby: [{ type: core.Input }],
ariaRequired: [{ type: core.Input }]
};
return MdcSelectedText;
}());
/**
* @fileoverview added by tsickle
* Generated from: select/select.ts
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/**
* Injection token that can be used to configure the default options for all
* mdc-select usage within an app.
* @type {?}
*/
var MDC_SELECT_DEFAULT_OPTIONS = new core.InjectionToken('MDC_SELECT_DEFAULT_OPTIONS');
var MdcSelectBase = /** @class */ (function (_super) {
__extends(MdcSelectBase, _super);
function MdcSelectBase(_elementRef, _defaultErrorStateMatcher, _parentForm, _parentFormGroup, ngControl) {
var _this = _super.call(this, _elementRef) || this;
_this._elementRef = _elementRef;
_this._defaultErrorStateMatcher = _defaultErrorStateMatcher;
_this._parentForm = _parentForm;
_this._parentFormGroup = _parentFormGroup;
_this.ngControl = ngControl;
return _this;
}
return MdcSelectBase;
}(base.MDCComponent));
/** @type {?} */
var _MdcSelectMixinBase = formField.mixinErrorState(MdcSelectBase);
var MdcSelectChange = /** @class */ (function () {
function MdcSelectChange(source, index, value) {
this.source = source;
this.index = index;
this.value = value;
}
return MdcSelectChange;
}());
/** @type {?} */
var nextUniqueId = 0;
var MdcSelect = /** @class */ (function (_super) {
__extends(MdcSelect, _super);
function MdcSelect(_platform, _changeDetectorRef, elementRef, _defaultErrorStateMatcher, _parentFormField, _ripple, ngControl, _parentForm, _parentFormGroup, _defaults) {
var _this = _super.call(this, elementRef, _defaultErrorStateMatcher, _parentForm, _parentFormGroup, ngControl) || this;
_this._platform = _platform;
_this._changeDetectorRef = _changeDetectorRef;
_this.elementRef = elementRef;
_this._defaultErrorStateMatcher = _defaultErrorStateMatcher;
_this._parentFormField = _parentFormField;
_this._ripple = _ripple;
_this.ngControl = ngControl;
_this._defaults = _defaults;
/**
* Emits whenever the component is destroyed.
*/
_this._destroyed = new rxjs.Subject();
_this._uniqueId = "mdc-select-" + ++nextUniqueId;
_this._initialized = false;
_this.id = _this._uniqueId;
_this._disabled = false;
_this._floatLabel = true;
_this._outlined = false;
_this._required = false;
_this.compareWith = (/**
* @param {?} a1
* @param {?} a2
* @return {?}
*/
function (a1, a2) { return a1 === a2; });
/**
* Event emitted when the selected value has been changed by the user.
*/
_this.selectionChange = new core.EventEmitter();
/**
* Event that emits whenever the raw value of the select changes. This is here primarily
* to facilitate the two-way binding for the `value` input.
*/
_this.valueChange = new core.EventEmitter();
_this.blur = new core.EventEmitter();
_this._onFocus = new core.EventEmitter();
/**
* View to model callback called when value changes
*/
_this._onChange = (/**
* @return {?}
*/
function () { });
/**
* View to model callback called when select has been touched
*/
_this._onTouched = (/**
* @return {?}
*/
function () { });
_this._root = _this.elementRef.nativeElement;
if (_this.ngControl) {
// Note: we provide the value accessor through here, instead of
// the `providers` to avoid running into a circular import.
_this.ngControl.valueAccessor = _this;
}
if (_this._parentFormField) {
_parentFormField.elementRef.nativeElement.classList.add('ngx-form-field-select');
}
// Force setter to be called in case id was not specified.
_this.id = _this.id;
_this._setDefaultGlobalOptions();
return _this;
}
Object.defineProperty(MdcSelect.prototype, "disabled", {
get: /**
* @return {?}
*/
function () {
return this._disabled;
},
set: /**
* @param {?} value
* @return {?}
*/
function (value) {
this.setDisabledState(value);
},
enumerable: true,
configurable: true
});
Object.defineProperty(MdcSelect.prototype, "floatLabel", {
get: /**
* @return {?}
*/
function () {
return this._floatLabel;
},
set: /**
* @param {?} value
* @return {?}
*/
function (value) {
/** @type {?} */
var newValue = coercion.coerceBooleanProperty(value);
if (newValue !== this._floatLabel) {
this._floatLabel = newValue;
this.layout();
}
},
enumerable: true,
configurable: true
});
Object.defineProperty(MdcSelect.prototype, "outlined", {
get: /**
* @return {?}
*/
function () {
return this._outlined;
},
set: /**
* @param {?} value
* @return {?}
*/
function (value) {
/** @type {?} */
var newValue = coercion.coerceBooleanProperty(value);
this._outlined = newValue;
this.layout();
},
enumerable: true,
configurable: true
});
Object.defineProperty(MdcSelect.prototype, "required", {
get: /**
* @return {?}
*/
function () {
return this._required;
},
set: /**
* @param {?} value
* @return {?}
*/
function (value) {
/** @type {?} */
var newValue = coercion.coerceBooleanProperty(value);
if (newValue !== this._required) {
this._required = newValue;
if (this._initialized && !this._required) {
this.valid = true;
this._changeDetectorRef.markForCheck();
}
}
},
enumerable: true,
configurable: true
});
Object.defineProperty(MdcSelect.prototype, "valid", {
get: /**
* @return {?}
*/
function () {
return this._valid;
},
set: /**
* @param {?} value
* @return {?}
*/
function (value) {
var _a;
/** @type {?} */
var newValue = coercion.coerceBooleanProperty(value);
this._valid = newValue;
(_a = this._foundation) === null || _a === void 0 ? void 0 : _a.setValid(this._valid);
},
enumerable: true,
configurable: true
});
Object.defineProperty(MdcSelect.prototype, "value", {
/** Value of the select */
get: /**
* Value of the select
* @return {?}
*/
function () {
return this._value;
},
set: /**
* @param {?} newValue
* @return {?}
*/
function (newValue) {
if (newValue !== this._value) {
this.setSelectionByValue(newValue);
}
},
enumerable: true,
configurable: true
});
Object.defineProperty(MdcSelect.prototype, "helperText", {
get: /**
* @return {?}
*/
function () {
return this._helperText;
},
set: /**
* @param {?} helperText
* @return {?}
*/
function (helperText) {
var _a;
this._helperText = helperText;
(_a = this.helperText) === null || _a === void 0 ? void 0 : _a.init();
},
enumerable: true,
configurable: true
});
Object.defineProperty(MdcSelect.prototype, "_hasPlaceholder", {
get: /**
* @return {?}
*/
function () {
return this.placeholder ? this.placeholder.length > 0 : false;
},
enumerable: true,
configurable: true
});
/**
* @return {?}
*/
MdcSelect.prototype.getDefaultFoundation = /**
* @return {?}
*/
function () {
// Do not initialize foundation until ngAfterViewInit runs
if (!this._initialized) {
return undefined;
}
/** @type {?} */
var adapter = _assign(_assign(_assign(_assign({}, this._getSelectAdapterMethods()), this._getCommonAdapterMethods()), this._getOutlineAdapterMethods()), this._getLabelAdapterMethods());
return new select.MDCSelectFoundation(adapter, this._getFoundationMap());
};
/**
* @private
* @return {?}
*/
MdcSelect.prototype._getSelectAdapterMethods = /**
* @private
* @return {?}
*/
function () {
var _this = this;
return {
getSelectedMenuItem: (/**
* @return {?}
*/
function () {
return (/** @type {?} */ (_this._menu)).elementRef.nativeElement.querySelector(select.strings.SELECTED_ITEM_SELECTOR);
}),
getMenuItemAttr: (/**
* @param {?} menuItem
* @param {?} attr
* @return {?}
*/
function (menuItem, attr) { return menuItem.getAttribute(attr); }),
setSelectedText: (/**
* @param {?} text
* @return {?}
*/
function (text) { return _this._selectedText.root.textContent = text; }),
isSelectedTextFocused: (/**
* @return {?}
*/
function () { return _this._platform.isBrowser ?
document.activeElement === _this._selectedText.root : false; }),
getSelectedTextAttr: (/**
* @param {?} attr
* @return {?}
*/
function (attr) { return _this._selectedText.root.getAttribute(attr); }),
setSelectedTextAttr: (/**
* @param {?} attr
* @param {?} value
* @return {?}
*/
function (attr, value) { return _this._selectedText.root.setAttribute(attr, value); }),
openMenu: (/**
* @return {?}
*/
function () { return _this._menu.open = true; }),
closeMenu: (/**
* @return {?}
*/
function () { return _this._menu.open = false; }),
getAnchorElement: (/**
* @return {?}
*/
function () { return _this._selectAnchor.root; }),
setMenuAnchorElement: (/**
* @param {?} anchorEl
* @return {?}
*/
function (anchorEl) { return _this._menu.anchorElement = anchorEl; }),
setMenuAnchorCorner: (/**
* @param {?} anchorCorner
* @return {?}
*/
function (anchorCorner) { return _this._menu.anchorCorner = anchorCorner; }),
setMenuWrapFocus: (/**
* @param {?} wrapFocus
* @return {?}
*/
function (wrapFocus) { return _this._menu.wrapFocus = wrapFocus; }),
setAttributeAtIndex: (/**
* @param {?} index
* @param {?} attributeName
* @param {?} attributeValue
* @return {?}
*/
function (index, attributeName, attributeValue) {
return (/** @type {?} */ (_this._menu._list)).items.toArray()[index].getListItemElement().setAttribute(attributeName, attributeValue);
}),
removeAttributeAtIndex: (/**
* @param {?} index
* @param {?} attributeName
* @return {?}
*/
function (index, attributeName) {
return (/** @type {?} */ (_this._menu._list)).items.toArray()[index].getListItemElement().removeAttribute(attributeName);
}),
focusMenuItemAtIndex: (/**
* @param {?} index
* @return {?}
*/
function (index) { return (/** @type {?} */ (_this._menu._list)).items.toArray()[index].focus(); }),
getMenuItemCount: (/**
* @return {?}
*/
function () { return (/** @type {?} */ (_this._menu._list)).items.length; }),
getMenuItemValues: (/**
* @return {?}
*/
function () { var _a; return _a = (/** @type {?} */ (_this._menu._list)).items.map((/**
* @param {?} el
* @return {?}
*/
function (el) {
return el.getListItemElement().getAttribute(select.strings.VALUE_ATTR) || '';
})), (_a !== null && _a !== void 0 ? _a : []); }),
getMenuItemTextAtIndex: (/**
* @param {?} index
* @return {?}
*/
function (index) { var _a; return _a = (/** @type {?} */ (_this._menu._list)).items.toArray()[index].getListItemElement().textContent, (_a !== null && _a !== void 0 ? _a : ''); }),
addClassAtIndex: (/**
* @param {?} index
* @param {?} className
* @return {?}
*/
function (index, className) {
return (/** @type {?} */ (_this._menu._list)).items.toArray()[index].getListItemElement().classList.add(className);
}),
removeClassAtIndex: (/**
* @param {?} index
* @param {?} className
* @return {?}
*/
function (index, className) {
return (/** @type {?} */ (_this._menu._list)).items.toArray()[index].getListItemElement().classList.remove(className);
})
};
};
/**
* @private
* @return {?}
*/
MdcSelect.prototype._getCommonAdapterMethods = /**
* @private
* @return {?}
*/
function () {
var _this = this;
return {
addClass: (/**
* @param {?} className
* @return {?}
*/
function (className) { return _this._root.classList.add(className); }),
removeClass: (/**
* @param {?} className
* @return {?}
*/
function (className) { return _this._root.classList.remove(className); }),
hasClass: (/**
* @param {?} className
* @return {?}
*/
function (className) { return _this._root.classList.contains(className); }),
setRippleCenter: (/**
* @param {?} normalizedX
* @return {?}
*/
function (normalizedX) { var _a; return (_a = _this._lineRipple) === null || _a === void 0 ? void 0 : _a.setRippleCenter(normalizedX); }),
activateBottomLine: (/**
* @return {?}
*/
function () { var _a; return (_a = _this._lineRipple) === null || _a === void 0 ? void 0 : _a.activate(); }),
deactivateBottomLine: (/**
* @return {?}
*/
function () { var _a; return (_a = _this._lineRipple) === null || _a === void 0 ? void 0 : _a.deactivate(); }),
notifyChange: (/**
* @return {?}
*/
function () { })
};
};
/**
* @private
* @return {?}
*/
MdcSelect.prototype._getOutlineAdapterMethods = /**
* @private
* @return {?}
*/
function () {
var _this = this;
return {
hasOutline: (/**
* @return {?}
*/
function () { return !!_this._notchedOutline; }),
notchOutline: (/**
* @param {?} labelWidth
* @return {?}
*/
function (labelWidth) { var _a; return (_a = _this._notchedOutline) === null || _a === void 0 ? void 0 : _a.notch(labelWidth); }),
closeOutline: (/**
* @return {?}
*/
function () { var _a; return (_a = _this._notchedOutline) === null || _a === void 0 ? void 0 : _a.closeNotch(); })
};
};
/**
* @private
* @return {?}
*/
MdcSelect.prototype._getLabelAdapterMethods = /**
* @private
* @return {?}
*/
function () {
var _this = this;
return {
hasLabel: (/**
* @return {?}
*/
function () { return _this._hasPlaceholder; }),
floatLabel: (/**
* @param {?} shouldFloat
* @return {?}
*/
function (shouldFloat) { return _this._getFloatingLabel().float(shouldFloat); }),
getLabelWidth: (/**
* @return {?}
*/
function () { var _a; return (_a = _this._getFloatingLabel()) === null || _a === void 0 ? void 0 : _a.getWidth(); })
};
};
/** Returns a map of all subcomponents to subfoundations.*/
/**
* Returns a map of all subcomponents to subfoundations.
* @private
* @return {?}
*/
MdcSelect.prototype._getFoundationMap = /**
* Returns a map of all subcomponents to subfoundations.
* @private
* @return {?}
*/
function () {
var _a;
return {
helperText: (_a = this._helperText) === null || _a === void 0 ? void 0 : _a.foundation
};
};
/**
* @return {?}
*/
MdcSelect.prototype.ngAfterViewInit = /**
* @return {?}
*/
function () {
var _this = this;
this._initialized = true;
this._asyncBuildFoundation()
.then((/**
* @return {?}
*/
function () {
_this._selectBuilder();
}));
this._initializeSelection();
this._subscribeToMenuEvents();
};
/**
* @return {?}
*/
MdcSelect.prototype.ngOnDestroy = /**
* @return {?}
*/
function () {
this.destroy();
};
/** Override MdcSelectBase destroy method */
/**
* Override MdcSelectBase destroy method
* @return {?}
*/
MdcSelect.prototype.destroy = /**
* Override MdcSelectBase destroy method
* @return {?}
*/
function () {
var _a;
this._destroyed.next();
this._destroyed.complete();
(_a = this._lineRipple) === null || _a === void 0 ? void 0 : _a.destroy();
this._ripple.destroy();
this._foundation.destroy();
};
/**
* @return {?}
*/
MdcSelect.prototype.ngDoCheck = /**
* @return {?}
*/
function () {
if (this.ngControl) {
// We need to re-evaluate this on every change detection cycle, because there are some
// error triggers that we can't subscribe to (e.g. parent form submissions). This means
// that whatever logic is in here has to be super lean or we risk destroying the performance.
this.updateErrorState();
}
};
/**
* @param {?} value
* @return {?}
*/
MdcSelect.prototype.writeValue = /**
* @param {?} value
* @return {?}
*/
function (value) {
if (this._initialized) {
this.setSelectionByValue(value, false);
}
};
/**
* @param {?} fn
* @return {?}
*/
MdcSelect.prototype.registerOnChange = /**
* @param {?} fn
* @return {?}
*/
function (fn) {
this._onChange = fn;
};
/**
* @param {?} fn
* @return {?}
*/
MdcSelect.prototype.registerOnTouched = /**
* @param {?} fn
* @return {?}
*/
function (fn) {
this._onTouched = fn;
};
/**
* @return {?}
*/
MdcSelect.prototype.onFocus = /**
* @return {?}
*/
function () {
if (!this.disabled) {
this._foundation.handleFocus();
this._onFocus.emit(true);
}
};
/**
* @return {?}
*/
MdcSelect.prototype.onBlur = /**
* @return {?}
*/
function () {
this._foundation.handleBlur();
};
/**
* @param {?} evt
* @return {?}
*/
MdcSelect.prototype.onClick = /**
* @param {?} evt
* @return {?}
*/
function (evt) {
this._foundation.handleClick(this._getNormalizedXCoordinate(evt));
};
/**
* @param {?} evt
* @return {?}
*/
MdcSelect.prototype.onKeydown = /**
* @param {?} evt
* @return {?}
*/
function (evt) {
this._foundation.handleKeydown(evt);
};
/**
* @return {?}
*/
MdcSelect.prototype.getSelectedIndex = /**
* @return {?}
*/
function () {
var _a, _b;
return _b = (_a = this._foundation) === null || _a === void 0 ? void 0 : _a.getSelectedIndex(), (_b !== null && _b !== void 0 ? _b : -1);
};
/**
* @return {?}
*/
MdcSelect.prototype.focus = /**
* @return {?}
*/
function () {
this._selectedText.root.focus();
};
/**
* @param {?} index
* @return {?}
*/
MdcSelect.prototype.setSelectedIndex = /**
* @param {?} index
* @return {?}
*/
function (index) {
var _a, _b;
this.setSelectionByValue((_b = (_a = this._menu._list) === null || _a === void 0 ? void 0 : _a.getListItemByIndex(index)) === null || _b === void 0 ? void 0 : _b.value, true, index);
};
/**
* @param {?} value
* @param {?=} isUserInput
* @param {?=} index
* @return {?}
*/
MdcSelect.prototype.setSelectionByValue = /**
* @param {?} value
* @param {?=} isUserInput
* @param {?=} index
* @return {?}
*/
function (value, isUserInput, index) {
if (isUserInput === void 0) { isUserInput = true; }
var _a;
if (!this._value && !value) {
return;
}
if (!index) {
index = (_a = this._menu._list) === null || _a === void 0 ? void 0 : _a.getListItemIndexByValue(value);
}
this._value = value;
this._foundation.setSelectedIndex((index !== null && index !== void 0 ? index : -1), this._menu.closeSurfaceOnSelection);
if (isUserInput) {
this._onChange(this._value);
this.selectionChange.emit(new MdcSelectChange(this, this.getSelectedIndex(), value));
}
this.valueChange.emit({
index: this.getSelectedIndex(),
value: this._value
});
this._foundation.handleChange();
this._changeDetectorRef.markForCheck();
};
// Implemented as part of ControlValueAccessor.
// Implemented as part of ControlValueAccessor.
/**
* @param {?} disabled
* @return {?}
*/
MdcSelect.prototype.setDisabledState =
// Implemented as part of ControlValueAccessor.
/**
* @param {?} disabled
* @return {?}
*/
function (disabled) {
var _a;
this._disabled = coercion.coerceBooleanProperty(disabled);
(_a = this._foundation) === null || _a === void 0 ? void 0 : _a.setDisabled(this._disabled);
this._changeDetectorRef.markForCheck();
};
Object.defineProperty(MdcSelect.prototype, "_hasValue", {
get: /**
* @return {?}
*/
function () {
var _a;
return ((_a = this._value) === null || _a === void 0 ? void 0 : _a.length) > 0;
},
enumerable: true,
configurable: true
});
/** Initialize Select internal state based on the environment state */
/**
* Initialize Select internal state based on the environment state
* @private
* @return {?}
*/
MdcSelect.prototype.layout = /**
* Initialize Select internal state based on the environment state
* @private
* @return {?}
*/
function () {
var _this = this;
if (this._initialized) {
this._asyncBuildFoundation().then((/**
* @return {?}
*/
function () {
_this._selectBuilder();
_this._foundation.layout();
}));
}
};
/**
* @private
* @return {?}
*/
MdcSelect.prototype._initializeSelection = /**
* @private
* @return {?}
*/
function () {
var _this = this;
// Defer setting the value in order to avoid the "Expression
// has changed after it was checked" errors from Angular.
Promise.resolve().then((/**
* @return {?}
*/
function () {
var _a, _b;
/** @type {?} */
var value = (_b = (_a = _this.ngControl) === null || _a === void 0 ? void 0 : _a.value, (_b !== null && _b !== void 0 ? _b : _this._value));
if (value) {
_this.setSelectionByValue(value, false);
}
}));
};
/** Set the default options. */
/**
* Set the default options.
* @private
* @return {?}
*/
MdcSelect.prototype._setDefaultGlobalOptions = /**
* Set the default options.
* @private
* @return {?}
*/
function () {
if (this._defaults) {
if (this._defaults.outlined != null) {
this.outlined = this._defaults.outlined;
}
}
};
/**
* @return {?}
*/
MdcSelect.prototype._asyncBuildFoundation = /**
* @return {?}
*/
function () {
return __awaiter(this, void 0, void 0, function () {
return __generator(this, function (_a) {
this._foundation = this.getDefaultFoundation();
return [2 /*return*/];
});
});
};
/**
* @return {?}
*/
MdcSelect.prototype._asyncInitFoundation = /**
* @return {?}
*/
function () {
return __awaiter(this, void 0, void 0, function () {
return __generator(this, function (_a) {
this._foundation.init();
return [2 /*return*/];
});
});
};
/**
* @private
* @return {?}
*/
MdcSelect.prototype._selectBuilder = /**
* @private
* @return {?}
*/
function () {
var _this = this;
this._changeDetectorRef.detectChanges();
// initialize after running a detectChanges()
this._asyncInitFoundation()
.then((/**
* @return {?}
*/
function () {
if (!_this.outlined) {
_this._ripple = _this._createRipple();
_this._ripple.init();
}
_this._menu.wrapFocus = false;
_this._menu.elementRef.nativeElement.setAttribute('role', 'listbox');
_this._menu.elementRef.nativeElement.classList.add('mdc-select__menu');
if (_this._menu._list) {
_this._menu._list.useSelectedClass = true;
_this._menu._list.singleSelection = true;
}
}));
};
/**
* @private
* @return {?}
*/
MdcSelect.prototype._subscribeToMenuEvents = /**
* @private
* @return {?}
*/
function () {
var _this = this;
// When the list items change, re-subscribe
(/** @type {?} */ (this._menu._list)).items.changes.pipe(operators.takeUntil(this._destroyed))
.subscribe((/**
* @return {?}
*/
function () { return _this._initializeSelection(); }));
// Subscribe to menu opened event
this._menu.opened.pipe(operators.takeUntil(this._destroyed))
.subscribe((/**
* @return {?}
*/
function () { return _this._foundation.handleMenuOpened(); }));
// Subscribe to menu closed event
this._menu.closed.pipe(operators.takeUntil(this._destroyed))
.subscribe((/**
* @return {?}
*/
function () {
_this._foundation.handleMenuClosed();
_this._blur();
}));
// Subscribe to list-item action event
this._menu.selected.pipe(operators.takeUntil(this._destroyed))
.subscribe((/**
* @param {?} evt
* @return {?}
*/
function (evt) { return _this.setSelectedIndex(evt.index); }));
};
/**
* @private
* @return {?}
*/
MdcSelect.prototype._blur = /**
* @private
* @return {?}
*/
function () {
this._onTouched();
this.blur.emit(this.value);
this._onFocus.emit(false);
};
/**
* @private
* @return {?}
*/
MdcSelect.prototype._getFloatingLabel = /**
* @private
* @return {?}
*/
function () {
var _a;
return _a = this._floatingLabel, (_a !== null && _a !== void 0 ? _a : (/** @type {?} */ (this._notchedOutline)).floatingLabel);
};
/**
* Calculates where the line ripple should start based on the x coordinate within the component.
*/
/**
* Calculates where the line ripple should start based on the x coordinate within the component.
* @private
* @param {?} evt
* @return {?}
*/
MdcSelect.prototype._getNormalizedXCoordinate = /**
* Calculates where the line ripple should start based on the x coordinate within the component.
* @private
* @param {?} evt
* @return {?}
*/
function (evt) {
/** @type {?} */
var targetClientRect = ((/** @type {?} */ (evt.target))).getBoundingClientRect();
if (evt instanceof MouseEvent) {
return evt.clientX - targetClientRect.left;
}
/** @type {?} */
var clientX = evt.touches[0] && evt.touches[0].clientX;
return clientX - targetClientRect.left;
};
/**
* @private
* @return {?}
*/
MdcSelect.prototype._createRipple = /**
* @private
* @return {?}
*/
function () {
var _this = this;
/** @type {?} */
var adapter = _assign(_assign({}, ripple.MdcRipple.createAdapter({ _root: this._selectAnchor.root })), { registerInteractionHandler: (/**
* @param {?} evtType
* @param {?} handler
* @return {?}
*/
function (evtType, handler) {
return _this._selectedText.root.addEventListener(evtType, handler);
}), deregisterInteractionHandler: (/**
* @param {?} evtType
* @param {?} handler
* @return {?}
*/
function (evtType, handler) {
return _this._selectedText.root.removeEventListener(evtType, handler);
}) });
return new ripple.MdcRipple(this._selectAnchor.elementRef, new ripple$1.MDCRippleFoundation(adapter));
};
MdcSelect.decorators = [
{ type: core.Component, args: [{selector: 'mdc-select',
exportAs: 'mdcSelect',
host: {
'[id]': 'id',
'class': 'mdc-select',
'[class.mdc-select--disabled]': 'disabled',
'[class.mdc-select--outlined]': 'outlined',
'[class.mdc-select--required]': 'required',
'[class.mdc-select--no-label]': '!_hasPlaceholder',
'[class.mdc-select--with-leading-icon]': 'leadingIcon',
'[class.mdc-select--invalid]': 'errorState'
},
template: "\n <div mdcSelectAnchor>\n <ng-content select=\"mdc-icon\"></ng-content>\n <i class=\"mdc-select__dropdown-icon\"></i>\n <div mdcSelectedText\n [tabindex]=\"disabled ? '-1' : '0'\"\n (focus)=\"onFocus()\"\n (blur)=\"onBlur()\"\n (keydown)=\"onKeydown($event)\"\n (click)=\"onClick($event)\"\n [ariaRequired]=\"required\"\n [ariaLabelledby]=\"id\"></div>\n <label mdcFloatingLabel *ngIf=\"!outlined\" [for]=\"id\">{{placeholder}}</label>\n <mdc-line-ripple *ngIf=\"!outlined\"></mdc-line-ripple>\n <mdc-notched-outline *ngIf=\"outlined\" [label]=\"placeholder\" [for]=\"id\"></mdc-notched-outline>\n </div>\n <ng-content select=\"mdc-menu\"></ng-content>\n ",
providers: [
ripple.MdcRipple,
{ provide: formField.MdcFormFieldControl, useExisting: MdcSelect }
],
encapsulation: core.ViewEncapsulation.None,
changeDetection: core.ChangeDetectionStrategy.OnPush
},] },
];
/** @nocollapse */
MdcSelect.ctorParameters = function () { return [
{ type: platform.Platform },
{ type: core.ChangeDetectorRef },
{ type: core.ElementRef },
{ type: formField.ErrorStateMatcher },
{ type: formField.MdcFormField, decorators: [{ type: core.Optional }] },
{ type: ripple.MdcRipple, decorators: [{ type: core.Optional }] },
{ type: forms.NgControl, decorators: [{ type: core.Self }, { type: core.Optional }] },
{ type: forms.NgForm, decorators: [{ type: core.Optional }] },
{ type: forms.FormGroupDirective, decorators: [{ type: core.Optional }] },
{ type: undefined, decorators: [{ type: core.Optional }, { type: core.Inject, args: [MDC_SELECT_DEFAULT_OPTIONS,] }] }
]; };
MdcSelect.propDecorators = {
id: [{ type: core.Input }],
name: [{ type: core.Input }],
placeholder: [{ type: core.Input }],
disabled: [{ type: core.Input }],
floatLabel: [{ type: core.Input }],
outlined: [{ type: core.Input }],
required: [{ type: core.Input }],
valid: [{ type: core.Input }],
compareWith: [{ type: core.Input }],
value: [{ type: core.Input }],
helperText: [{ type: core.Input }],
errorStateMatcher: [{ type: core.Input }],
selectionChange: [{ type: core.Output }],
valueChange: [{ type: core.Output }],
blur: [{ type: core.Output }],
_onFocus: [{ type: core.Output, args: ['focus',] }],
_floatingLabel: [{ type: core.ViewChild, args: [floatingLabel.MdcFloatingLabel, { static: false },] }],
_lineRipple: [{ type: core.ViewChild, args: [lineRipple.MdcLineRipple, { static: false },] }],
_notchedOutline: [{ type: core.ViewChild, args: [notchedOutline.MdcNotchedOutline, { static: false },] }],
_selectAnchor: [{ type: core.ViewChild, args: [MdcSelectAnchor, { static: false },] }],
_selectedText: [{ type: core.ViewChild, args: [MdcSelectedText, { static: false },] }],
_menu: [{ type: core.ContentChild, args: [menu.MdcMenu, { static: false },] }],
leadingIcon: [{ type: core.ContentChild, args: [MdcSelectIcon, { static: false },] }]
};
return MdcSelect;
}(_MdcSelectMixinBase));
/**
* @fileoverview added by tsickle
* Generated from: select/select-helper-text.ts
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
var MDCSelectHelperText = /** @class */ (function (_super) {
__extends(MDCSelectHelperText, _super);
function MDCSelectHelperText(elementRef) {
var _this = _super.call(this, elementRef) || this;
_this.elementRef = elementRef;
_this._persistent = false;
_this._validation = false;
return _this;
}
Object.defineProperty(MDCSelectHelperText.prototype, "persistent", {
get: /**
* @return {?}
*/
function () {
return this._persistent;
},
set: /**
* @param {?} value
* @return {?}
*/
function (value) {
this._persistent = coercion.coerceBooleanProperty(value);
this._foundation.setPersistent(this._persistent);
},
enumerable: true,
configurable: true
});
Object.defineProperty(MDCSelectHelperText.prototype, "validation", {
get: /**
* @return {?}
*/
function () {
return this._validation;
},
set: /**
* @param {?} value
* @return {?}
*/
function (value) {
this._validation = coercion.coerceBooleanProperty(value);
this._foundation.setValidation(this._validation);
},
enumerable: true,
configurable: true
});
Object.defineProperty(MDCSelectHelperText.prototype, "foundation", {
get: /**
* @return {?}
*/
function () {
return this._foundation;
},
enumerable: true,
configurable: true
});
/**
* @return {?}
*/
MDCSelectHelperText.prototype.getDefaultFoundation = /**
* @return {?}
*/
function () {
var _this = this;
/** @type {?} */
var adapter = {
addClass: (/**
* @param {?} className
* @return {?}
*/
function (className) { return _this.elementRef.nativeElement.classList.add(className); }),
removeClass: (/**
* @param {?} className
* @return {?}
*/
function (className) { return _this.elementRef.nativeElement.classList.remove(className); }),
hasClass: (/**
* @param {?} className
* @return {?}
*/