UNPKG

@limetech/lime-elements

Version:
1,169 lines (1,157 loc) • 92.5 kB
'use strict'; const ponyfill = require('./ponyfill-63966294.js'); const component$1 = require('./component-a8e11c4c.js'); const component = require('./component-3f00c197.js'); /** * @license * Copyright 2018 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. */ var cssClasses$5 = { LINE_RIPPLE_ACTIVE: 'mdc-line-ripple--active', LINE_RIPPLE_DEACTIVATING: 'mdc-line-ripple--deactivating', }; /** * @license * Copyright 2018 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. */ var MDCLineRippleFoundation = /** @class */ (function (_super) { ponyfill.__extends(MDCLineRippleFoundation, _super); function MDCLineRippleFoundation(adapter) { var _this = _super.call(this, ponyfill.__assign(ponyfill.__assign({}, MDCLineRippleFoundation.defaultAdapter), adapter)) || this; _this.transitionEndHandler = function (evt) { _this.handleTransitionEnd(evt); }; return _this; } Object.defineProperty(MDCLineRippleFoundation, "cssClasses", { get: function () { return cssClasses$5; }, enumerable: false, configurable: true }); Object.defineProperty(MDCLineRippleFoundation, "defaultAdapter", { /** * See {@link MDCLineRippleAdapter} for typing information on parameters and return types. */ get: function () { // tslint:disable:object-literal-sort-keys Methods should be in the same order as the adapter interface. return { addClass: function () { return undefined; }, removeClass: function () { return undefined; }, hasClass: function () { return false; }, setStyle: function () { return undefined; }, registerEventHandler: function () { return undefined; }, deregisterEventHandler: function () { return undefined; }, }; // tslint:enable:object-literal-sort-keys }, enumerable: false, configurable: true }); MDCLineRippleFoundation.prototype.init = function () { this.adapter.registerEventHandler('transitionend', this.transitionEndHandler); }; MDCLineRippleFoundation.prototype.destroy = function () { this.adapter.deregisterEventHandler('transitionend', this.transitionEndHandler); }; MDCLineRippleFoundation.prototype.activate = function () { this.adapter.removeClass(cssClasses$5.LINE_RIPPLE_DEACTIVATING); this.adapter.addClass(cssClasses$5.LINE_RIPPLE_ACTIVE); }; MDCLineRippleFoundation.prototype.setRippleCenter = function (xCoordinate) { this.adapter.setStyle('transform-origin', xCoordinate + "px center"); }; MDCLineRippleFoundation.prototype.deactivate = function () { this.adapter.addClass(cssClasses$5.LINE_RIPPLE_DEACTIVATING); }; MDCLineRippleFoundation.prototype.handleTransitionEnd = function (evt) { // Wait for the line ripple to be either transparent or opaque // before emitting the animation end event var isDeactivating = this.adapter.hasClass(cssClasses$5.LINE_RIPPLE_DEACTIVATING); if (evt.propertyName === 'opacity') { if (isDeactivating) { this.adapter.removeClass(cssClasses$5.LINE_RIPPLE_ACTIVE); this.adapter.removeClass(cssClasses$5.LINE_RIPPLE_DEACTIVATING); } } }; return MDCLineRippleFoundation; }(ponyfill.MDCFoundation)); /** * @license * Copyright 2018 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. */ var MDCLineRipple = /** @class */ (function (_super) { ponyfill.__extends(MDCLineRipple, _super); function MDCLineRipple() { return _super !== null && _super.apply(this, arguments) || this; } MDCLineRipple.attachTo = function (root) { return new MDCLineRipple(root); }; /** * Activates the line ripple */ MDCLineRipple.prototype.activate = function () { this.foundation.activate(); }; /** * Deactivates the line ripple */ MDCLineRipple.prototype.deactivate = function () { this.foundation.deactivate(); }; /** * Sets the transform origin given a user's click location. * The `rippleCenter` is the x-coordinate of the middle of the ripple. */ MDCLineRipple.prototype.setRippleCenter = function (xCoordinate) { this.foundation.setRippleCenter(xCoordinate); }; MDCLineRipple.prototype.getDefaultFoundation = function () { var _this = this; // 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 = { 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); }, setStyle: function (propertyName, value) { return _this.root.style.setProperty(propertyName, value); }, registerEventHandler: function (evtType, handler) { return _this.listen(evtType, handler); }, deregisterEventHandler: function (evtType, handler) { return _this.unlisten(evtType, handler); }, }; // tslint:enable:object-literal-sort-keys return new MDCLineRippleFoundation(adapter); }; return MDCLineRipple; }(ponyfill.MDCComponent)); /** * @license * Copyright 2018 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. */ var strings$4 = { NOTCH_ELEMENT_SELECTOR: '.mdc-notched-outline__notch', }; var numbers$1 = { // This should stay in sync with $mdc-notched-outline-padding * 2. NOTCH_ELEMENT_PADDING: 8, }; var cssClasses$4 = { NO_LABEL: 'mdc-notched-outline--no-label', OUTLINE_NOTCHED: 'mdc-notched-outline--notched', OUTLINE_UPGRADED: 'mdc-notched-outline--upgraded', }; /** * @license * Copyright 2017 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. */ var MDCNotchedOutlineFoundation = /** @class */ (function (_super) { ponyfill.__extends(MDCNotchedOutlineFoundation, _super); function MDCNotchedOutlineFoundation(adapter) { return _super.call(this, ponyfill.__assign(ponyfill.__assign({}, MDCNotchedOutlineFoundation.defaultAdapter), adapter)) || this; } Object.defineProperty(MDCNotchedOutlineFoundation, "strings", { get: function () { return strings$4; }, enumerable: false, configurable: true }); Object.defineProperty(MDCNotchedOutlineFoundation, "cssClasses", { get: function () { return cssClasses$4; }, enumerable: false, configurable: true }); Object.defineProperty(MDCNotchedOutlineFoundation, "numbers", { get: function () { return numbers$1; }, enumerable: false, configurable: true }); Object.defineProperty(MDCNotchedOutlineFoundation, "defaultAdapter", { /** * See {@link MDCNotchedOutlineAdapter} for typing information on parameters and return types. */ get: function () { // tslint:disable:object-literal-sort-keys Methods should be in the same order as the adapter interface. return { addClass: function () { return undefined; }, removeClass: function () { return undefined; }, setNotchWidthProperty: function () { return undefined; }, removeNotchWidthProperty: function () { return undefined; }, }; // tslint:enable:object-literal-sort-keys }, enumerable: false, configurable: true }); /** * Adds the outline notched selector and updates the notch width calculated based off of notchWidth. */ MDCNotchedOutlineFoundation.prototype.notch = function (notchWidth) { var OUTLINE_NOTCHED = MDCNotchedOutlineFoundation.cssClasses.OUTLINE_NOTCHED; if (notchWidth > 0) { notchWidth += numbers$1.NOTCH_ELEMENT_PADDING; // Add padding from left/right. } this.adapter.setNotchWidthProperty(notchWidth); this.adapter.addClass(OUTLINE_NOTCHED); }; /** * Removes notched outline selector to close the notch in the outline. */ MDCNotchedOutlineFoundation.prototype.closeNotch = function () { var OUTLINE_NOTCHED = MDCNotchedOutlineFoundation.cssClasses.OUTLINE_NOTCHED; this.adapter.removeClass(OUTLINE_NOTCHED); this.adapter.removeNotchWidthProperty(); }; return MDCNotchedOutlineFoundation; }(ponyfill.MDCFoundation)); /** * @license * Copyright 2017 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. */ var MDCNotchedOutline = /** @class */ (function (_super) { ponyfill.__extends(MDCNotchedOutline, _super); function MDCNotchedOutline() { return _super !== null && _super.apply(this, arguments) || this; } MDCNotchedOutline.attachTo = function (root) { return new MDCNotchedOutline(root); }; MDCNotchedOutline.prototype.initialSyncWithDOM = function () { this.notchElement = this.root.querySelector(strings$4.NOTCH_ELEMENT_SELECTOR); var label = this.root.querySelector('.' + component.MDCFloatingLabelFoundation.cssClasses.ROOT); if (label) { label.style.transitionDuration = '0s'; this.root.classList.add(cssClasses$4.OUTLINE_UPGRADED); requestAnimationFrame(function () { label.style.transitionDuration = ''; }); } else { this.root.classList.add(cssClasses$4.NO_LABEL); } }; /** * Updates classes and styles to open the notch to the specified width. * @param notchWidth The notch width in the outline. */ MDCNotchedOutline.prototype.notch = function (notchWidth) { this.foundation.notch(notchWidth); }; /** * Updates classes and styles to close the notch. */ MDCNotchedOutline.prototype.closeNotch = function () { this.foundation.closeNotch(); }; MDCNotchedOutline.prototype.getDefaultFoundation = function () { var _this = this; // 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 = { addClass: function (className) { return _this.root.classList.add(className); }, removeClass: function (className) { return _this.root.classList.remove(className); }, setNotchWidthProperty: function (width) { _this.notchElement.style.setProperty('width', width + 'px'); }, removeNotchWidthProperty: function () { _this.notchElement.style.removeProperty('width'); }, }; // tslint:enable:object-literal-sort-keys return new MDCNotchedOutlineFoundation(adapter); }; return MDCNotchedOutline; }(ponyfill.MDCComponent)); /** * @license * Copyright 2019 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. */ var cssClasses$3 = { ROOT: 'mdc-text-field-character-counter', }; var strings$3 = { ROOT_SELECTOR: "." + cssClasses$3.ROOT, }; /** * @license * Copyright 2019 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. */ var MDCTextFieldCharacterCounterFoundation = /** @class */ (function (_super) { ponyfill.__extends(MDCTextFieldCharacterCounterFoundation, _super); function MDCTextFieldCharacterCounterFoundation(adapter) { return _super.call(this, ponyfill.__assign(ponyfill.__assign({}, MDCTextFieldCharacterCounterFoundation.defaultAdapter), adapter)) || this; } Object.defineProperty(MDCTextFieldCharacterCounterFoundation, "cssClasses", { get: function () { return cssClasses$3; }, enumerable: false, configurable: true }); Object.defineProperty(MDCTextFieldCharacterCounterFoundation, "strings", { get: function () { return strings$3; }, enumerable: false, configurable: true }); Object.defineProperty(MDCTextFieldCharacterCounterFoundation, "defaultAdapter", { /** * See {@link MDCTextFieldCharacterCounterAdapter} for typing information on parameters and return types. */ get: function () { return { setContent: function () { return undefined; }, }; }, enumerable: false, configurable: true }); MDCTextFieldCharacterCounterFoundation.prototype.setCounterValue = function (currentLength, maxLength) { currentLength = Math.min(currentLength, maxLength); this.adapter.setContent(currentLength + " / " + maxLength); }; return MDCTextFieldCharacterCounterFoundation; }(ponyfill.MDCFoundation)); /** * @license * Copyright 2019 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. */ var MDCTextFieldCharacterCounter = /** @class */ (function (_super) { ponyfill.__extends(MDCTextFieldCharacterCounter, _super); function MDCTextFieldCharacterCounter() { return _super !== null && _super.apply(this, arguments) || this; } MDCTextFieldCharacterCounter.attachTo = function (root) { return new MDCTextFieldCharacterCounter(root); }; Object.defineProperty(MDCTextFieldCharacterCounter.prototype, "foundationForTextField", { // Provided for access by MDCTextField component get: function () { return this.foundation; }, enumerable: false, configurable: true }); MDCTextFieldCharacterCounter.prototype.getDefaultFoundation = function () { var _this = this; // 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. var adapter = { setContent: function (content) { _this.root.textContent = content; }, }; return new MDCTextFieldCharacterCounterFoundation(adapter); }; return MDCTextFieldCharacterCounter; }(ponyfill.MDCComponent)); /** * @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. */ var strings$2 = { ARIA_CONTROLS: 'aria-controls', ARIA_DESCRIBEDBY: 'aria-describedby', INPUT_SELECTOR: '.mdc-text-field__input', LABEL_SELECTOR: '.mdc-floating-label', LEADING_ICON_SELECTOR: '.mdc-text-field__icon--leading', LINE_RIPPLE_SELECTOR: '.mdc-line-ripple', OUTLINE_SELECTOR: '.mdc-notched-outline', PREFIX_SELECTOR: '.mdc-text-field__affix--prefix', SUFFIX_SELECTOR: '.mdc-text-field__affix--suffix', TRAILING_ICON_SELECTOR: '.mdc-text-field__icon--trailing' }; var cssClasses$2 = { DISABLED: 'mdc-text-field--disabled', FOCUSED: 'mdc-text-field--focused', HELPER_LINE: 'mdc-text-field-helper-line', INVALID: 'mdc-text-field--invalid', LABEL_FLOATING: 'mdc-text-field--label-floating', NO_LABEL: 'mdc-text-field--no-label', OUTLINED: 'mdc-text-field--outlined', ROOT: 'mdc-text-field', TEXTAREA: 'mdc-text-field--textarea', WITH_LEADING_ICON: 'mdc-text-field--with-leading-icon', WITH_TRAILING_ICON: 'mdc-text-field--with-trailing-icon', WITH_INTERNAL_COUNTER: 'mdc-text-field--with-internal-counter', }; var numbers = { LABEL_SCALE: 0.75, }; /** * Whitelist based off of * https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation * under the "Validation-related attributes" section. */ var VALIDATION_ATTR_WHITELIST = [ 'pattern', 'min', 'max', 'required', 'step', 'minlength', 'maxlength', ]; /** * Label should always float for these types as they show some UI even if value * is empty. */ var ALWAYS_FLOAT_TYPES = [ 'color', 'date', 'datetime-local', 'month', 'range', 'time', 'week', ]; /** * @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. */ var POINTERDOWN_EVENTS = ['mousedown', 'touchstart']; var INTERACTION_EVENTS$1 = ['click', 'keydown']; var MDCTextFieldFoundation = /** @class */ (function (_super) { ponyfill.__extends(MDCTextFieldFoundation, _super); /** * @param adapter * @param foundationMap Map from subcomponent names to their subfoundations. */ function MDCTextFieldFoundation(adapter, foundationMap) { if (foundationMap === void 0) { foundationMap = {}; } var _this = _super.call(this, ponyfill.__assign(ponyfill.__assign({}, MDCTextFieldFoundation.defaultAdapter), adapter)) || this; _this.isFocused = false; _this.receivedUserInput = false; _this.valid = true; _this.useNativeValidation = true; _this.validateOnValueChange = true; _this.helperText = foundationMap.helperText; _this.characterCounter = foundationMap.characterCounter; _this.leadingIcon = foundationMap.leadingIcon; _this.trailingIcon = foundationMap.trailingIcon; _this.inputFocusHandler = function () { _this.activateFocus(); }; _this.inputBlurHandler = function () { _this.deactivateFocus(); }; _this.inputInputHandler = function () { _this.handleInput(); }; _this.setPointerXOffset = function (evt) { _this.setTransformOrigin(evt); }; _this.textFieldInteractionHandler = function () { _this.handleTextFieldInteraction(); }; _this.validationAttributeChangeHandler = function (attributesList) { _this.handleValidationAttributeChange(attributesList); }; return _this; } Object.defineProperty(MDCTextFieldFoundation, "cssClasses", { get: function () { return cssClasses$2; }, enumerable: false, configurable: true }); Object.defineProperty(MDCTextFieldFoundation, "strings", { get: function () { return strings$2; }, enumerable: false, configurable: true }); Object.defineProperty(MDCTextFieldFoundation, "numbers", { get: function () { return numbers; }, enumerable: false, configurable: true }); Object.defineProperty(MDCTextFieldFoundation.prototype, "shouldAlwaysFloat", { get: function () { var type = this.getNativeInput().type; return ALWAYS_FLOAT_TYPES.indexOf(type) >= 0; }, enumerable: false, configurable: true }); Object.defineProperty(MDCTextFieldFoundation.prototype, "shouldFloat", { get: function () { return this.shouldAlwaysFloat || this.isFocused || !!this.getValue() || this.isBadInput(); }, enumerable: false, configurable: true }); Object.defineProperty(MDCTextFieldFoundation.prototype, "shouldShake", { get: function () { return !this.isFocused && !this.isValid() && !!this.getValue(); }, enumerable: false, configurable: true }); Object.defineProperty(MDCTextFieldFoundation, "defaultAdapter", { /** * See {@link MDCTextFieldAdapter} for typing information on parameters and * return types. */ get: function () { // tslint:disable:object-literal-sort-keys Methods should be in the same order as the adapter interface. return { addClass: function () { return undefined; }, removeClass: function () { return undefined; }, hasClass: function () { return true; }, setInputAttr: function () { return undefined; }, removeInputAttr: function () { return undefined; }, registerTextFieldInteractionHandler: function () { return undefined; }, deregisterTextFieldInteractionHandler: function () { return undefined; }, registerInputInteractionHandler: function () { return undefined; }, deregisterInputInteractionHandler: function () { return undefined; }, registerValidationAttributeChangeHandler: function () { return new MutationObserver(function () { return undefined; }); }, deregisterValidationAttributeChangeHandler: function () { return undefined; }, getNativeInput: function () { return null; }, isFocused: function () { return false; }, activateLineRipple: function () { return undefined; }, deactivateLineRipple: function () { return undefined; }, setLineRippleTransformOrigin: function () { return undefined; }, shakeLabel: function () { return undefined; }, floatLabel: function () { return undefined; }, setLabelRequired: function () { return undefined; }, hasLabel: function () { return false; }, getLabelWidth: function () { return 0; }, hasOutline: function () { return false; }, notchOutline: function () { return undefined; }, closeOutline: function () { return undefined; }, }; // tslint:enable:object-literal-sort-keys }, enumerable: false, configurable: true }); MDCTextFieldFoundation.prototype.init = function () { var e_1, _a, e_2, _b; if (this.adapter.hasLabel() && this.getNativeInput().required) { this.adapter.setLabelRequired(true); } if (this.adapter.isFocused()) { this.inputFocusHandler(); } else if (this.adapter.hasLabel() && this.shouldFloat) { this.notchOutline(true); this.adapter.floatLabel(true); this.styleFloating(true); } this.adapter.registerInputInteractionHandler('focus', this.inputFocusHandler); this.adapter.registerInputInteractionHandler('blur', this.inputBlurHandler); this.adapter.registerInputInteractionHandler('input', this.inputInputHandler); try { for (var POINTERDOWN_EVENTS_1 = ponyfill.__values(POINTERDOWN_EVENTS), POINTERDOWN_EVENTS_1_1 = POINTERDOWN_EVENTS_1.next(); !POINTERDOWN_EVENTS_1_1.done; POINTERDOWN_EVENTS_1_1 = POINTERDOWN_EVENTS_1.next()) { var evtType = POINTERDOWN_EVENTS_1_1.value; this.adapter.registerInputInteractionHandler(evtType, this.setPointerXOffset); } } catch (e_1_1) { e_1 = { error: e_1_1 }; } finally { try { if (POINTERDOWN_EVENTS_1_1 && !POINTERDOWN_EVENTS_1_1.done && (_a = POINTERDOWN_EVENTS_1.return)) _a.call(POINTERDOWN_EVENTS_1); } finally { if (e_1) throw e_1.error; } } try { for (var INTERACTION_EVENTS_1 = ponyfill.__values(INTERACTION_EVENTS$1), INTERACTION_EVENTS_1_1 = INTERACTION_EVENTS_1.next(); !INTERACTION_EVENTS_1_1.done; INTERACTION_EVENTS_1_1 = INTERACTION_EVENTS_1.next()) { var evtType = INTERACTION_EVENTS_1_1.value; this.adapter.registerTextFieldInteractionHandler(evtType, this.textFieldInteractionHandler); } } catch (e_2_1) { e_2 = { error: e_2_1 }; } finally { try { if (INTERACTION_EVENTS_1_1 && !INTERACTION_EVENTS_1_1.done && (_b = INTERACTION_EVENTS_1.return)) _b.call(INTERACTION_EVENTS_1); } finally { if (e_2) throw e_2.error; } } this.validationObserver = this.adapter.registerValidationAttributeChangeHandler(this.validationAttributeChangeHandler); this.setcharacterCounter(this.getValue().length); }; MDCTextFieldFoundation.prototype.destroy = function () { var e_3, _a, e_4, _b; this.adapter.deregisterInputInteractionHandler('focus', this.inputFocusHandler); this.adapter.deregisterInputInteractionHandler('blur', this.inputBlurHandler); this.adapter.deregisterInputInteractionHandler('input', this.inputInputHandler); try { for (var POINTERDOWN_EVENTS_2 = ponyfill.__values(POINTERDOWN_EVENTS), POINTERDOWN_EVENTS_2_1 = POINTERDOWN_EVENTS_2.next(); !POINTERDOWN_EVENTS_2_1.done; POINTERDOWN_EVENTS_2_1 = POINTERDOWN_EVENTS_2.next()) { var evtType = POINTERDOWN_EVENTS_2_1.value; this.adapter.deregisterInputInteractionHandler(evtType, this.setPointerXOffset); } } catch (e_3_1) { e_3 = { error: e_3_1 }; } finally { try { if (POINTERDOWN_EVENTS_2_1 && !POINTERDOWN_EVENTS_2_1.done && (_a = POINTERDOWN_EVENTS_2.return)) _a.call(POINTERDOWN_EVENTS_2); } finally { if (e_3) throw e_3.error; } } try { for (var INTERACTION_EVENTS_2 = ponyfill.__values(INTERACTION_EVENTS$1), INTERACTION_EVENTS_2_1 = INTERACTION_EVENTS_2.next(); !INTERACTION_EVENTS_2_1.done; INTERACTION_EVENTS_2_1 = INTERACTION_EVENTS_2.next()) { var evtType = INTERACTION_EVENTS_2_1.value; this.adapter.deregisterTextFieldInteractionHandler(evtType, this.textFieldInteractionHandler); } } catch (e_4_1) { e_4 = { error: e_4_1 }; } finally { try { if (INTERACTION_EVENTS_2_1 && !INTERACTION_EVENTS_2_1.done && (_b = INTERACTION_EVENTS_2.return)) _b.call(INTERACTION_EVENTS_2); } finally { if (e_4) throw e_4.error; } } this.adapter.deregisterValidationAttributeChangeHandler(this.validationObserver); }; /** * Handles user interactions with the Text Field. */ MDCTextFieldFoundation.prototype.handleTextFieldInteraction = function () { var nativeInput = this.adapter.getNativeInput(); if (nativeInput && nativeInput.disabled) { return; } this.receivedUserInput = true; }; /** * Handles validation attribute changes */ MDCTextFieldFoundation.prototype.handleValidationAttributeChange = function (attributesList) { var _this = this; attributesList.some(function (attributeName) { if (VALIDATION_ATTR_WHITELIST.indexOf(attributeName) > -1) { _this.styleValidity(true); _this.adapter.setLabelRequired(_this.getNativeInput().required); return true; } return false; }); if (attributesList.indexOf('maxlength') > -1) { this.setcharacterCounter(this.getValue().length); } }; /** * Opens/closes the notched outline. */ MDCTextFieldFoundation.prototype.notchOutline = function (openNotch) { if (!this.adapter.hasOutline() || !this.adapter.hasLabel()) { return; } if (openNotch) { var labelWidth = this.adapter.getLabelWidth() * numbers.LABEL_SCALE; this.adapter.notchOutline(labelWidth); } else { this.adapter.closeOutline(); } }; /** * Activates the text field focus state. */ MDCTextFieldFoundation.prototype.activateFocus = function () { this.isFocused = true; this.styleFocused(this.isFocused); this.adapter.activateLineRipple(); if (this.adapter.hasLabel()) { this.notchOutline(this.shouldFloat); this.adapter.floatLabel(this.shouldFloat); this.styleFloating(this.shouldFloat); this.adapter.shakeLabel(this.shouldShake); } if (this.helperText && (this.helperText.isPersistent() || !this.helperText.isValidation() || !this.valid)) { this.helperText.showToScreenReader(); } }; /** * Sets the line ripple's transform origin, so that the line ripple activate * animation will animate out from the user's click location. */ MDCTextFieldFoundation.prototype.setTransformOrigin = function (evt) { if (this.isDisabled() || this.adapter.hasOutline()) { return; } var touches = evt.touches; var targetEvent = touches ? touches[0] : evt; var targetClientRect = targetEvent.target.getBoundingClientRect(); var normalizedX = targetEvent.clientX - targetClientRect.left; this.adapter.setLineRippleTransformOrigin(normalizedX); }; /** * Handles input change of text input and text area. */ MDCTextFieldFoundation.prototype.handleInput = function () { this.autoCompleteFocus(); this.setcharacterCounter(this.getValue().length); }; /** * Activates the Text Field's focus state in cases when the input value * changes without user input (e.g. programmatically). */ MDCTextFieldFoundation.prototype.autoCompleteFocus = function () { if (!this.receivedUserInput) { this.activateFocus(); } }; /** * Deactivates the Text Field's focus state. */ MDCTextFieldFoundation.prototype.deactivateFocus = function () { this.isFocused = false; this.adapter.deactivateLineRipple(); var isValid = this.isValid(); this.styleValidity(isValid); this.styleFocused(this.isFocused); if (this.adapter.hasLabel()) { this.notchOutline(this.shouldFloat); this.adapter.floatLabel(this.shouldFloat); this.styleFloating(this.shouldFloat); this.adapter.shakeLabel(this.shouldShake); } if (!this.shouldFloat) { this.receivedUserInput = false; } }; MDCTextFieldFoundation.prototype.getValue = function () { return this.getNativeInput().value; }; /** * @param value The value to set on the input Element. */ MDCTextFieldFoundation.prototype.setValue = function (value) { // Prevent Safari from moving the caret to the end of the input when the // value has not changed. if (this.getValue() !== value) { this.getNativeInput().value = value; } this.setcharacterCounter(value.length); if (this.validateOnValueChange) { var isValid = this.isValid(); this.styleValidity(isValid); } if (this.adapter.hasLabel()) { this.notchOutline(this.shouldFloat); this.adapter.floatLabel(this.shouldFloat); this.styleFloating(this.shouldFloat); if (this.validateOnValueChange) { this.adapter.shakeLabel(this.shouldShake); } } }; /** * @return The custom validity state, if set; otherwise, the result of a * native validity check. */ MDCTextFieldFoundation.prototype.isValid = function () { return this.useNativeValidation ? this.isNativeInputValid() : this.valid; }; /** * @param isValid Sets the custom validity state of the Text Field. */ MDCTextFieldFoundation.prototype.setValid = function (isValid) { this.valid = isValid; this.styleValidity(isValid); var shouldShake = !isValid && !this.isFocused && !!this.getValue(); if (this.adapter.hasLabel()) { this.adapter.shakeLabel(shouldShake); } }; /** * @param shouldValidate Whether or not validity should be updated on * value change. */ MDCTextFieldFoundation.prototype.setValidateOnValueChange = function (shouldValidate) { this.validateOnValueChange = shouldValidate; }; /** * @return Whether or not validity should be updated on value change. `true` * by default. */ MDCTextFieldFoundation.prototype.getValidateOnValueChange = function () { return this.validateOnValueChange; }; /** * Enables or disables the use of native validation. Use this for custom * validation. * @param useNativeValidation Set this to false to ignore native input * validation. */ MDCTextFieldFoundation.prototype.setUseNativeValidation = function (useNativeValidation) { this.useNativeValidation = useNativeValidation; }; MDCTextFieldFoundation.prototype.isDisabled = function () { return this.getNativeInput().disabled; }; /** * @param disabled Sets the text-field disabled or enabled. */ MDCTextFieldFoundation.prototype.setDisabled = function (disabled) { this.getNativeInput().disabled = disabled; this.styleDisabled(disabled); }; /** * @param content Sets the content of the helper text. */ MDCTextFieldFoundation.prototype.setHelperTextContent = function (content) { if (this.helperText) { this.helperText.setContent(content); } }; /** * Sets the aria label of the leading icon. */ MDCTextFieldFoundation.prototype.setLeadingIconAriaLabel = function (label) { if (this.leadingIcon) { this.leadingIcon.setAriaLabel(label); } }; /** * Sets the text content of the leading icon. */ MDCTextFieldFoundation.prototype.setLeadingIconContent = function (content) { if (this.leadingIcon) { this.leadingIcon.setContent(content); } }; /** * Sets the aria label of the trailing icon. */ MDCTextFieldFoundation.prototype.setTrailingIconAriaLabel = function (label) { if (this.trailingIcon) { this.trailingIcon.setAriaLabel(label); } }; /** * Sets the text content of the trailing icon. */ MDCTextFieldFoundation.prototype.setTrailingIconContent = function (content) { if (this.trailingIcon) { this.trailingIcon.setContent(content); } }; /** * Sets character counter values that shows characters used and the total * character limit. */ MDCTextFieldFoundation.prototype.setcharacterCounter = function (currentLength) { if (!this.characterCounter) { return; } var maxLength = this.getNativeInput().maxLength; if (maxLength === -1) { throw new Error('MDCTextFieldFoundation: Expected maxlength html property on text input or textarea.'); } this.characterCounter.setCounterValue(currentLength, maxLength); }; /** * @return True if the Text Field input fails in converting the user-supplied * value. */ MDCTextFieldFoundation.prototype.isBadInput = function () { // The badInput property is not supported in IE 11 💩. return this.getNativeInput().validity.badInput || false; }; /** * @return The result of native validity checking (ValidityState.valid). */ MDCTextFieldFoundation.prototype.isNativeInputValid = function () { return this.getNativeInput().validity.valid; }; /** * Styles the component based on the validity state. */ MDCTextFieldFoundation.prototype.styleValidity = function (isValid) { var INVALID = MDCTextFieldFoundation.cssClasses.INVALID; if (isValid) { this.adapter.removeClass(INVALID); } else { this.adapter.addClass(INVALID); } if (this.helperText) { this.helperText.setValidity(isValid); // We dynamically set or unset aria-describedby for validation helper text // only, based on whether the field is valid var helperTextValidation = this.helperText.isValidation(); if (!helperTextValidation) { return; } var helperTextVisible = this.helperText.isVisible(); var helperTextId = this.helperText.getId(); if (helperTextVisible && helperTextId) { this.adapter.setInputAttr(strings$2.ARIA_DESCRIBEDBY, helperTextId); } else { this.adapter.removeInputAttr(strings$2.ARIA_DESCRIBEDBY); } } }; /** * Styles the component based on the focused state. */ MDCTextFieldFoundation.prototype.styleFocused = function (isFocused) { var FOCUSED = MDCTextFieldFoundation.cssClasses.FOCUSED; if (isFocused) { this.adapter.addClass(FOCUSED); } else { this.adapter.removeClass(FOCUSED); } }; /** * Styles the component based on the disabled state. */ MDCTextFieldFoundation.prototype.styleDisabled = function (isDisabled) { var _a = MDCTextFieldFoundation.cssClasses, DISABLED = _a.DISABLED, INVALID = _a.INVALID; if (isDisabled) { this.adapter.addClass(DISABLED); this.adapter.removeClass(INVALID); } else { this.adapter.removeClass(DISABLED); } if (this.leadingIcon) { this.leadingIcon.setDisabled(isDisabled); } if (this.trailingIcon) { this.trailingIcon.setDisabled(isDisabled); } }; /** * Styles the component based on the label floating state. */ MDCTextFieldFoundation.prototype.styleFloating = function (isFloating) { var LABEL_FLOATING = MDCTextFieldFoundation.cssClasses.LABEL_FLOATING; if (isFloating) { this.adapter.addClass(LABEL_FLOATING); } else { this.adapter.removeClass(LABEL_FLOATING); } }; /** * @return The native text input element from the host environment, or an * object with the same shape for unit tests. */ MDCTextFieldFoundation.prototype.getNativeInput = function () { // this.adapter may be undefined in foundation unit tests. This happens when // testdouble is creating a mock object and invokes the //