519 lines
21 KiB
JavaScript
519 lines
21 KiB
JavaScript
/**
|
|
* @license
|
|
* Copyright 2016 Google Inc.
|
|
*
|
|
* Permission is hereby granted, free of charge, to any person obtaining a copy
|
|
* of this software and associated documentation files (the "Software"), to deal
|
|
* in the Software without restriction, including without limitation the rights
|
|
* to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
|
* copies of the Software, and to permit persons to whom the Software is
|
|
* furnished to do so, subject to the following conditions:
|
|
*
|
|
* The above copyright notice and this permission notice shall be included in
|
|
* all copies or substantial portions of the Software.
|
|
*
|
|
* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
|
* IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
|
* FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
|
* AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
|
* LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
|
* OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
|
|
* THE SOFTWARE.
|
|
*/
|
|
import { __assign, __extends } from "tslib";
|
|
import { MDCComponent } from '@material/base/component';
|
|
import { applyPassive } from '@material/dom/events';
|
|
import * as ponyfill from '@material/dom/ponyfill';
|
|
import { MDCFloatingLabel } from '@material/floating-label/component';
|
|
import { MDCLineRipple } from '@material/line-ripple/component';
|
|
import { MDCNotchedOutline } from '@material/notched-outline/component';
|
|
import { MDCRipple } from '@material/ripple/component';
|
|
import { MDCRippleFoundation } from '@material/ripple/foundation';
|
|
import { MDCTextFieldCharacterCounter } from './character-counter/component';
|
|
import { MDCTextFieldCharacterCounterFoundation } from './character-counter/foundation';
|
|
import { cssClasses, strings } from './constants';
|
|
import { MDCTextFieldFoundation } from './foundation';
|
|
import { MDCTextFieldHelperText } from './helper-text/component';
|
|
import { MDCTextFieldHelperTextFoundation } from './helper-text/foundation';
|
|
import { MDCTextFieldIcon } from './icon/component';
|
|
var MDCTextField = /** @class */ (function (_super) {
|
|
__extends(MDCTextField, _super);
|
|
function MDCTextField() {
|
|
return _super !== null && _super.apply(this, arguments) || this;
|
|
}
|
|
MDCTextField.attachTo = function (root) {
|
|
return new MDCTextField(root);
|
|
};
|
|
MDCTextField.prototype.initialize = function (rippleFactory, lineRippleFactory, helperTextFactory, characterCounterFactory, iconFactory, labelFactory, outlineFactory) {
|
|
if (rippleFactory === void 0) { rippleFactory = function (el, foundation) { return new MDCRipple(el, foundation); }; }
|
|
if (lineRippleFactory === void 0) { lineRippleFactory = function (el) { return new MDCLineRipple(el); }; }
|
|
if (helperTextFactory === void 0) { helperTextFactory = function (el) {
|
|
return new MDCTextFieldHelperText(el);
|
|
}; }
|
|
if (characterCounterFactory === void 0) { characterCounterFactory = function (el) {
|
|
return new MDCTextFieldCharacterCounter(el);
|
|
}; }
|
|
if (iconFactory === void 0) { iconFactory = function (el) { return new MDCTextFieldIcon(el); }; }
|
|
if (labelFactory === void 0) { labelFactory = function (el) { return new MDCFloatingLabel(el); }; }
|
|
if (outlineFactory === void 0) { outlineFactory = function (el) { return new MDCNotchedOutline(el); }; }
|
|
this.input =
|
|
this.root.querySelector(strings.INPUT_SELECTOR);
|
|
var labelElement = this.root.querySelector(strings.LABEL_SELECTOR);
|
|
this.label = labelElement ? labelFactory(labelElement) : null;
|
|
var lineRippleElement = this.root.querySelector(strings.LINE_RIPPLE_SELECTOR);
|
|
this.lineRipple =
|
|
lineRippleElement ? lineRippleFactory(lineRippleElement) : null;
|
|
var outlineElement = this.root.querySelector(strings.OUTLINE_SELECTOR);
|
|
this.outline = outlineElement ? outlineFactory(outlineElement) : null;
|
|
// Helper text
|
|
var helperTextStrings = MDCTextFieldHelperTextFoundation.strings;
|
|
var nextElementSibling = this.root.nextElementSibling;
|
|
var hasHelperLine = (nextElementSibling && nextElementSibling.classList.contains(cssClasses.HELPER_LINE));
|
|
var helperTextEl = hasHelperLine && nextElementSibling && nextElementSibling.querySelector(helperTextStrings.ROOT_SELECTOR);
|
|
this.helperText = helperTextEl ? helperTextFactory(helperTextEl) : null;
|
|
// Character counter
|
|
var characterCounterStrings = MDCTextFieldCharacterCounterFoundation.strings;
|
|
var characterCounterEl = this.root.querySelector(characterCounterStrings.ROOT_SELECTOR);
|
|
// If character counter is not found in root element search in sibling element.
|
|
if (!characterCounterEl && hasHelperLine && nextElementSibling) {
|
|
characterCounterEl = nextElementSibling.querySelector(characterCounterStrings.ROOT_SELECTOR);
|
|
}
|
|
this.characterCounter =
|
|
characterCounterEl ? characterCounterFactory(characterCounterEl) : null;
|
|
// Leading icon
|
|
var leadingIconEl = this.root.querySelector(strings.LEADING_ICON_SELECTOR);
|
|
this.leadingIcon = leadingIconEl ? iconFactory(leadingIconEl) : null;
|
|
// Trailing icon
|
|
var trailingIconEl = this.root.querySelector(strings.TRAILING_ICON_SELECTOR);
|
|
this.trailingIcon = trailingIconEl ? iconFactory(trailingIconEl) : null;
|
|
// Prefix and Suffix
|
|
this.prefix = this.root.querySelector(strings.PREFIX_SELECTOR);
|
|
this.suffix = this.root.querySelector(strings.SUFFIX_SELECTOR);
|
|
this.ripple = this.createRipple(rippleFactory);
|
|
};
|
|
MDCTextField.prototype.destroy = function () {
|
|
if (this.ripple) {
|
|
this.ripple.destroy();
|
|
}
|
|
if (this.lineRipple) {
|
|
this.lineRipple.destroy();
|
|
}
|
|
if (this.helperText) {
|
|
this.helperText.destroy();
|
|
}
|
|
if (this.characterCounter) {
|
|
this.characterCounter.destroy();
|
|
}
|
|
if (this.leadingIcon) {
|
|
this.leadingIcon.destroy();
|
|
}
|
|
if (this.trailingIcon) {
|
|
this.trailingIcon.destroy();
|
|
}
|
|
if (this.label) {
|
|
this.label.destroy();
|
|
}
|
|
if (this.outline) {
|
|
this.outline.destroy();
|
|
}
|
|
_super.prototype.destroy.call(this);
|
|
};
|
|
/**
|
|
* Initializes the Text Field's internal state based on the environment's
|
|
* state.
|
|
*/
|
|
MDCTextField.prototype.initialSyncWithDOM = function () {
|
|
this.disabled = this.input.disabled;
|
|
};
|
|
Object.defineProperty(MDCTextField.prototype, "value", {
|
|
get: function () {
|
|
return this.foundation.getValue();
|
|
},
|
|
/**
|
|
* @param value The value to set on the input.
|
|
*/
|
|
set: function (value) {
|
|
this.foundation.setValue(value);
|
|
},
|
|
enumerable: false,
|
|
configurable: true
|
|
});
|
|
Object.defineProperty(MDCTextField.prototype, "disabled", {
|
|
get: function () {
|
|
return this.foundation.isDisabled();
|
|
},
|
|
/**
|
|
* @param disabled Sets the Text Field disabled or enabled.
|
|
*/
|
|
set: function (disabled) {
|
|
this.foundation.setDisabled(disabled);
|
|
},
|
|
enumerable: false,
|
|
configurable: true
|
|
});
|
|
Object.defineProperty(MDCTextField.prototype, "valid", {
|
|
get: function () {
|
|
return this.foundation.isValid();
|
|
},
|
|
/**
|
|
* @param valid Sets the Text Field valid or invalid.
|
|
*/
|
|
set: function (valid) {
|
|
this.foundation.setValid(valid);
|
|
},
|
|
enumerable: false,
|
|
configurable: true
|
|
});
|
|
Object.defineProperty(MDCTextField.prototype, "required", {
|
|
get: function () {
|
|
return this.input.required;
|
|
},
|
|
/**
|
|
* @param required Sets the Text Field to required.
|
|
*/
|
|
set: function (required) {
|
|
this.input.required = required;
|
|
},
|
|
enumerable: false,
|
|
configurable: true
|
|
});
|
|
Object.defineProperty(MDCTextField.prototype, "pattern", {
|
|
get: function () {
|
|
return this.input.pattern;
|
|
},
|
|
/**
|
|
* @param pattern Sets the input element's validation pattern.
|
|
*/
|
|
set: function (pattern) {
|
|
this.input.pattern = pattern;
|
|
},
|
|
enumerable: false,
|
|
configurable: true
|
|
});
|
|
Object.defineProperty(MDCTextField.prototype, "minLength", {
|
|
get: function () {
|
|
return this.input.minLength;
|
|
},
|
|
/**
|
|
* @param minLength Sets the input element's minLength.
|
|
*/
|
|
set: function (minLength) {
|
|
this.input.minLength = minLength;
|
|
},
|
|
enumerable: false,
|
|
configurable: true
|
|
});
|
|
Object.defineProperty(MDCTextField.prototype, "maxLength", {
|
|
get: function () {
|
|
return this.input.maxLength;
|
|
},
|
|
/**
|
|
* @param maxLength Sets the input element's maxLength.
|
|
*/
|
|
set: function (maxLength) {
|
|
// Chrome throws exception if maxLength is set to a value less than zero
|
|
if (maxLength < 0) {
|
|
this.input.removeAttribute('maxLength');
|
|
}
|
|
else {
|
|
this.input.maxLength = maxLength;
|
|
}
|
|
},
|
|
enumerable: false,
|
|
configurable: true
|
|
});
|
|
Object.defineProperty(MDCTextField.prototype, "min", {
|
|
get: function () {
|
|
return this.input.min;
|
|
},
|
|
/**
|
|
* @param min Sets the input element's min.
|
|
*/
|
|
set: function (min) {
|
|
this.input.min = min;
|
|
},
|
|
enumerable: false,
|
|
configurable: true
|
|
});
|
|
Object.defineProperty(MDCTextField.prototype, "max", {
|
|
get: function () {
|
|
return this.input.max;
|
|
},
|
|
/**
|
|
* @param max Sets the input element's max.
|
|
*/
|
|
set: function (max) {
|
|
this.input.max = max;
|
|
},
|
|
enumerable: false,
|
|
configurable: true
|
|
});
|
|
Object.defineProperty(MDCTextField.prototype, "step", {
|
|
get: function () {
|
|
return this.input.step;
|
|
},
|
|
/**
|
|
* @param step Sets the input element's step.
|
|
*/
|
|
set: function (step) {
|
|
this.input.step = step;
|
|
},
|
|
enumerable: false,
|
|
configurable: true
|
|
});
|
|
Object.defineProperty(MDCTextField.prototype, "helperTextContent", {
|
|
/**
|
|
* Sets the helper text element content.
|
|
*/
|
|
set: function (content) {
|
|
this.foundation.setHelperTextContent(content);
|
|
},
|
|
enumerable: false,
|
|
configurable: true
|
|
});
|
|
Object.defineProperty(MDCTextField.prototype, "leadingIconAriaLabel", {
|
|
/**
|
|
* Sets the aria label of the leading icon.
|
|
*/
|
|
set: function (label) {
|
|
this.foundation.setLeadingIconAriaLabel(label);
|
|
},
|
|
enumerable: false,
|
|
configurable: true
|
|
});
|
|
Object.defineProperty(MDCTextField.prototype, "leadingIconContent", {
|
|
/**
|
|
* Sets the text content of the leading icon.
|
|
*/
|
|
set: function (content) {
|
|
this.foundation.setLeadingIconContent(content);
|
|
},
|
|
enumerable: false,
|
|
configurable: true
|
|
});
|
|
Object.defineProperty(MDCTextField.prototype, "trailingIconAriaLabel", {
|
|
/**
|
|
* Sets the aria label of the trailing icon.
|
|
*/
|
|
set: function (label) {
|
|
this.foundation.setTrailingIconAriaLabel(label);
|
|
},
|
|
enumerable: false,
|
|
configurable: true
|
|
});
|
|
Object.defineProperty(MDCTextField.prototype, "trailingIconContent", {
|
|
/**
|
|
* Sets the text content of the trailing icon.
|
|
*/
|
|
set: function (content) {
|
|
this.foundation.setTrailingIconContent(content);
|
|
},
|
|
enumerable: false,
|
|
configurable: true
|
|
});
|
|
Object.defineProperty(MDCTextField.prototype, "useNativeValidation", {
|
|
/**
|
|
* Enables or disables the use of native validation. Use this for custom validation.
|
|
* @param useNativeValidation Set this to false to ignore native input validation.
|
|
*/
|
|
set: function (useNativeValidation) {
|
|
this.foundation.setUseNativeValidation(useNativeValidation);
|
|
},
|
|
enumerable: false,
|
|
configurable: true
|
|
});
|
|
Object.defineProperty(MDCTextField.prototype, "prefixText", {
|
|
/**
|
|
* Gets the text content of the prefix, or null if it does not exist.
|
|
*/
|
|
get: function () {
|
|
return this.prefix ? this.prefix.textContent : null;
|
|
},
|
|
/**
|
|
* Sets the text content of the prefix, if it exists.
|
|
*/
|
|
set: function (prefixText) {
|
|
if (this.prefix) {
|
|
this.prefix.textContent = prefixText;
|
|
}
|
|
},
|
|
enumerable: false,
|
|
configurable: true
|
|
});
|
|
Object.defineProperty(MDCTextField.prototype, "suffixText", {
|
|
/**
|
|
* Gets the text content of the suffix, or null if it does not exist.
|
|
*/
|
|
get: function () {
|
|
return this.suffix ? this.suffix.textContent : null;
|
|
},
|
|
/**
|
|
* Sets the text content of the suffix, if it exists.
|
|
*/
|
|
set: function (suffixText) {
|
|
if (this.suffix) {
|
|
this.suffix.textContent = suffixText;
|
|
}
|
|
},
|
|
enumerable: false,
|
|
configurable: true
|
|
});
|
|
/**
|
|
* Focuses the input element.
|
|
*/
|
|
MDCTextField.prototype.focus = function () {
|
|
this.input.focus();
|
|
};
|
|
/**
|
|
* Recomputes the outline SVG path for the outline element.
|
|
*/
|
|
MDCTextField.prototype.layout = function () {
|
|
var openNotch = this.foundation.shouldFloat;
|
|
this.foundation.notchOutline(openNotch);
|
|
};
|
|
MDCTextField.prototype.getDefaultFoundation = function () {
|
|
// DO NOT INLINE this variable. For backward compatibility, foundations take a Partial<MDCFooAdapter>.
|
|
// To ensure we don't accidentally omit any methods, we need a separate, strongly typed adapter variable.
|
|
// tslint:disable:object-literal-sort-keys Methods should be in the same order as the adapter interface.
|
|
var adapter = __assign(__assign(__assign(__assign(__assign({}, this.getRootAdapterMethods()), this.getInputAdapterMethods()), this.getLabelAdapterMethods()), this.getLineRippleAdapterMethods()), this.getOutlineAdapterMethods());
|
|
// tslint:enable:object-literal-sort-keys
|
|
return new MDCTextFieldFoundation(adapter, this.getFoundationMap());
|
|
};
|
|
MDCTextField.prototype.getRootAdapterMethods = function () {
|
|
var _this = this;
|
|
// tslint:disable:object-literal-sort-keys Methods should be in the same order as the adapter interface.
|
|
return {
|
|
addClass: function (className) { return _this.root.classList.add(className); },
|
|
removeClass: function (className) { return _this.root.classList.remove(className); },
|
|
hasClass: function (className) { return _this.root.classList.contains(className); },
|
|
registerTextFieldInteractionHandler: function (evtType, handler) {
|
|
_this.listen(evtType, handler);
|
|
},
|
|
deregisterTextFieldInteractionHandler: function (evtType, handler) {
|
|
_this.unlisten(evtType, handler);
|
|
},
|
|
registerValidationAttributeChangeHandler: function (handler) {
|
|
var getAttributesList = function (mutationsList) {
|
|
return mutationsList
|
|
.map(function (mutation) { return mutation.attributeName; })
|
|
.filter(function (attributeName) { return attributeName; });
|
|
};
|
|
var observer = new MutationObserver(function (mutationsList) { return handler(getAttributesList(mutationsList)); });
|
|
var config = { attributes: true };
|
|
observer.observe(_this.input, config);
|
|
return observer;
|
|
},
|
|
deregisterValidationAttributeChangeHandler: function (observer) {
|
|
observer.disconnect();
|
|
},
|
|
};
|
|
// tslint:enable:object-literal-sort-keys
|
|
};
|
|
MDCTextField.prototype.getInputAdapterMethods = function () {
|
|
var _this = this;
|
|
// tslint:disable:object-literal-sort-keys Methods should be in the same order as the adapter interface.
|
|
return {
|
|
getNativeInput: function () { return _this.input; },
|
|
setInputAttr: function (attr, value) {
|
|
_this.input.setAttribute(attr, value);
|
|
},
|
|
removeInputAttr: function (attr) {
|
|
_this.input.removeAttribute(attr);
|
|
},
|
|
isFocused: function () { return document.activeElement === _this.input; },
|
|
registerInputInteractionHandler: function (evtType, handler) {
|
|
_this.input.addEventListener(evtType, handler, applyPassive());
|
|
},
|
|
deregisterInputInteractionHandler: function (evtType, handler) {
|
|
_this.input.removeEventListener(evtType, handler, applyPassive());
|
|
},
|
|
};
|
|
// tslint:enable:object-literal-sort-keys
|
|
};
|
|
MDCTextField.prototype.getLabelAdapterMethods = function () {
|
|
var _this = this;
|
|
return {
|
|
floatLabel: function (shouldFloat) {
|
|
_this.label && _this.label.float(shouldFloat);
|
|
},
|
|
getLabelWidth: function () { return _this.label ? _this.label.getWidth() : 0; },
|
|
hasLabel: function () { return Boolean(_this.label); },
|
|
shakeLabel: function (shouldShake) {
|
|
_this.label && _this.label.shake(shouldShake);
|
|
},
|
|
setLabelRequired: function (isRequired) {
|
|
_this.label && _this.label.setRequired(isRequired);
|
|
},
|
|
};
|
|
};
|
|
MDCTextField.prototype.getLineRippleAdapterMethods = function () {
|
|
var _this = this;
|
|
return {
|
|
activateLineRipple: function () {
|
|
if (_this.lineRipple) {
|
|
_this.lineRipple.activate();
|
|
}
|
|
},
|
|
deactivateLineRipple: function () {
|
|
if (_this.lineRipple) {
|
|
_this.lineRipple.deactivate();
|
|
}
|
|
},
|
|
setLineRippleTransformOrigin: function (normalizedX) {
|
|
if (_this.lineRipple) {
|
|
_this.lineRipple.setRippleCenter(normalizedX);
|
|
}
|
|
},
|
|
};
|
|
};
|
|
MDCTextField.prototype.getOutlineAdapterMethods = function () {
|
|
var _this = this;
|
|
return {
|
|
closeOutline: function () {
|
|
_this.outline && _this.outline.closeNotch();
|
|
},
|
|
hasOutline: function () { return Boolean(_this.outline); },
|
|
notchOutline: function (labelWidth) {
|
|
_this.outline && _this.outline.notch(labelWidth);
|
|
},
|
|
};
|
|
};
|
|
/**
|
|
* @return A map of all subcomponents to subfoundations.
|
|
*/
|
|
MDCTextField.prototype.getFoundationMap = function () {
|
|
return {
|
|
characterCounter: this.characterCounter ?
|
|
this.characterCounter.foundationForTextField :
|
|
undefined,
|
|
helperText: this.helperText ? this.helperText.foundationForTextField :
|
|
undefined,
|
|
leadingIcon: this.leadingIcon ? this.leadingIcon.foundationForTextField :
|
|
undefined,
|
|
trailingIcon: this.trailingIcon ?
|
|
this.trailingIcon.foundationForTextField :
|
|
undefined,
|
|
};
|
|
};
|
|
MDCTextField.prototype.createRipple = function (rippleFactory) {
|
|
var _this = this;
|
|
var isTextArea = this.root.classList.contains(cssClasses.TEXTAREA);
|
|
var isOutlined = this.root.classList.contains(cssClasses.OUTLINED);
|
|
if (isTextArea || isOutlined) {
|
|
return null;
|
|
}
|
|
// DO NOT INLINE this variable. For backward compatibility, foundations take a Partial<MDCFooAdapter>.
|
|
// To ensure we don't accidentally omit any methods, we need a separate, strongly typed adapter variable.
|
|
// tslint:disable:object-literal-sort-keys Methods should be in the same order as the adapter interface.
|
|
var adapter = __assign(__assign({}, MDCRipple.createAdapter(this)), { isSurfaceActive: function () { return ponyfill.matches(_this.input, ':active'); }, registerInteractionHandler: function (evtType, handler) {
|
|
_this.input.addEventListener(evtType, handler, applyPassive());
|
|
}, deregisterInteractionHandler: function (evtType, handler) {
|
|
_this.input.removeEventListener(evtType, handler, applyPassive());
|
|
} });
|
|
// tslint:enable:object-literal-sort-keys
|
|
return rippleFactory(this.root, new MDCRippleFoundation(adapter));
|
|
};
|
|
return MDCTextField;
|
|
}(MDCComponent));
|
|
export { MDCTextField };
|
|
//# sourceMappingURL=component.js.map
|