@aurelia-mdc-web/all 9.2.2-au2 → 9.3.0-au2

package/dist/text-field/mdc-text-field.html

@@ -0,0 +1,29 @@
+<template class="
+    mdc-text-field
+    ${textarea ? 'mdc-text-field--textarea' : ''}
+    ${endAligned ? 'mdc-text-field--end-aligned' : ''}
+    ${ltrText ? 'mdc-text-field--ltr-text' : ''}
+    ${label ? '' : 'mdc-text-field--no-label'}
+    mdc-text-field--${outlined ? 'outlined' : 'filled'}
+    ${leadingIcon_ ? 'mdc-text-field--with-leading-icon' : ''}
+    ${trailingIcon_ ? 'mdc-text-field--with-trailing-icon' : ''}
+  " mdc-ripple="no-class.bind: true; input.bind: input_">
+  <span class="mdc-text-field__ripple"></span>
+  <au-slot name="leading-icon"></au-slot>
+  <span class="mdc-text-field__affix mdc-text-field__affix--prefix" if.bind="prefix && !textarea">${prefix}</span>
+  <mdc-notched-outline if.bind="outlined" component.ref="outline_">
+    <mdc-floating-label if.bind="label" id.bind="id" component.ref="label_">${label}</mdc-floating-label>
+  </mdc-notched-outline>
+  <input if.bind="!textarea" class="mdc-text-field__input" type="text" aria-labelledby.bind="id" ref="input_"
+    focus.trigger="onFocus()" input.trigger="onInput($event)" change.trigger="onChange($event)" blur.trigger="onBlur()"
+    placeholder.bind="placeholder" keyup.trigger="onKeyup($event)">
+  <span if.bind="textarea" class="mdc-text-field__resizer">
+    <textarea class="mdc-text-field__input" aria-labelledby.bind="id" ref="input_"
+      focus.trigger="onFocus()" input.trigger="onInput($event)" change.trigger="onChange($event)"
+      blur.trigger="onBlur()" keyup.trigger="onKeyup($event)"></textarea>
+  </span>
+  <span class="mdc-text-field__affix mdc-text-field__affix--suffix" if.bind="suffix && !textarea">${suffix}</span>
+  <au-slot name="trailing-icon"></au-slot>
+  <mdc-floating-label if.bind="label && !outlined" id.bind="id" component.ref="label_">${label}</mdc-floating-label>
+  <mdc-line-ripple if.bind="!outlined" component.ref="lineRipple_"></mdc-line-ripple>
+</template>

package/dist/text-field/mdc-text-field.js

@@ -0,0 +1,581 @@
+import { __esDecorate, __runInitializers } from "tslib";
+import { inject, customElement, bindable } from 'aurelia';
+import { MDCTextFieldFoundation, cssClasses, helperTextStrings, characterCountStrings } from '@material/textfield';
+import { applyPassive } from '@material/dom/events';
+import { MdcComponent, booleanAttr, number } from '../base';
+import { mdcIconStrings } from './mdc-text-field-icon';
+import { processContent, IPlatform, CustomAttribute, CustomElement } from '@aurelia/runtime-html';
+import { MdcDefaultTextFieldConfiguration } from './mdc-default-text-field-configuration';
+import template from './mdc-text-field.html?raw';
+let textFieldId = 0;
+const leadingIconSelector = '.mdc-text-field__icon--leading';
+const trailingIconSelector = '.mdc-text-field__icon--trailing';
+let MdcTextField = (() => {
+    let _classDecorators = [inject(Element, IPlatform, MdcDefaultTextFieldConfiguration), customElement({ name: 'mdc-text-field', template }), processContent(function processContent(node) {
+            const element = node;
+            // move icons to slots - this allows omitting slot specification
+            const leadingIcon = element.querySelector(`[${mdcIconStrings.ATTRIBUTE}][${mdcIconStrings.LEADING}]`);
+            leadingIcon?.setAttribute('au-slot', 'leading-icon');
+            const trailingIcon = element.querySelector(`[${mdcIconStrings.ATTRIBUTE}][${mdcIconStrings.TRAILING}]`);
+            trailingIcon?.setAttribute('au-slot', 'trailing-icon');
+        })];
+    let _classDescriptor;
+    let _classExtraInitializers = [];
+    let _classThis;
+    let _classSuper = MdcComponent;
+    let _label_decorators;
+    let _label_initializers = [];
+    let _label_extraInitializers = [];
+    let _textarea_decorators;
+    let _textarea_initializers = [];
+    let _textarea_extraInitializers = [];
+    let _endAligned_decorators;
+    let _endAligned_initializers = [];
+    let _endAligned_extraInitializers = [];
+    let _ltrText_decorators;
+    let _ltrText_initializers = [];
+    let _ltrText_extraInitializers = [];
+    let _outlined_decorators;
+    let _outlined_initializers = [];
+    let _outlined_extraInitializers = [];
+    let _prefix_decorators;
+    let _prefix_initializers = [];
+    let _prefix_extraInitializers = [];
+    let _suffix_decorators;
+    let _suffix_initializers = [];
+    let _suffix_extraInitializers = [];
+    let _required_decorators;
+    let _required_initializers = [];
+    let _required_extraInitializers = [];
+    let _disabled_decorators;
+    let _disabled_initializers = [];
+    let _disabled_extraInitializers = [];
+    let _readonly_decorators;
+    let _readonly_initializers = [];
+    let _readonly_extraInitializers = [];
+    let _blurOnEnter_decorators;
+    let _blurOnEnter_initializers = [];
+    let _blurOnEnter_extraInitializers = [];
+    let _maxlength_decorators;
+    let _maxlength_initializers = [];
+    let _maxlength_extraInitializers = [];
+    let _rows_decorators;
+    let _rows_initializers = [];
+    let _rows_extraInitializers = [];
+    let _cols_decorators;
+    let _cols_initializers = [];
+    let _cols_extraInitializers = [];
+    let _max_decorators;
+    let _max_initializers = [];
+    let _max_extraInitializers = [];
+    let _min_decorators;
+    let _min_initializers = [];
+    let _min_extraInitializers = [];
+    let _step_decorators;
+    let _step_initializers = [];
+    let _step_extraInitializers = [];
+    let _autocomplete_decorators;
+    let _autocomplete_initializers = [];
+    let _autocomplete_extraInitializers = [];
+    let _tabindex_decorators;
+    let _tabindex_initializers = [];
+    let _tabindex_extraInitializers = [];
+    let _type_decorators;
+    let _type_initializers = [];
+    let _type_extraInitializers = [];
+    let _name_decorators;
+    let _name_initializers = [];
+    let _name_extraInitializers = [];
+    let _placeholder_decorators;
+    let _placeholder_initializers = [];
+    let _placeholder_extraInitializers = [];
+    var MdcTextField = class extends _classSuper {
+        static { _classThis = this; }
+        static {
+            const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
+            _label_decorators = [bindable()];
+            _textarea_decorators = [bindable({ set: booleanAttr })];
+            _endAligned_decorators = [bindable({ set: booleanAttr })];
+            _ltrText_decorators = [bindable({ set: booleanAttr })];
+            _outlined_decorators = [bindable({ set: booleanAttr })];
+            _prefix_decorators = [bindable()];
+            _suffix_decorators = [bindable()];
+            _required_decorators = [bindable({ set: booleanAttr })];
+            _disabled_decorators = [bindable({ set: booleanAttr })];
+            _readonly_decorators = [bindable({ set: booleanAttr })];
+            _blurOnEnter_decorators = [bindable({ set: booleanAttr })];
+            _maxlength_decorators = [bindable()];
+            _rows_decorators = [bindable()];
+            _cols_decorators = [bindable()];
+            _max_decorators = [bindable()];
+            _min_decorators = [bindable()];
+            _step_decorators = [bindable()];
+            _autocomplete_decorators = [bindable()];
+            _tabindex_decorators = [bindable({ set: number })];
+            _type_decorators = [bindable()];
+            _name_decorators = [bindable()];
+            _placeholder_decorators = [bindable()];
+            __esDecorate(null, null, _label_decorators, { kind: "field", name: "label", static: false, private: false, access: { has: obj => "label" in obj, get: obj => obj.label, set: (obj, value) => { obj.label = value; } }, metadata: _metadata }, _label_initializers, _label_extraInitializers);
+            __esDecorate(null, null, _textarea_decorators, { kind: "field", name: "textarea", static: false, private: false, access: { has: obj => "textarea" in obj, get: obj => obj.textarea, set: (obj, value) => { obj.textarea = value; } }, metadata: _metadata }, _textarea_initializers, _textarea_extraInitializers);
+            __esDecorate(null, null, _endAligned_decorators, { kind: "field", name: "endAligned", static: false, private: false, access: { has: obj => "endAligned" in obj, get: obj => obj.endAligned, set: (obj, value) => { obj.endAligned = value; } }, metadata: _metadata }, _endAligned_initializers, _endAligned_extraInitializers);
+            __esDecorate(null, null, _ltrText_decorators, { kind: "field", name: "ltrText", static: false, private: false, access: { has: obj => "ltrText" in obj, get: obj => obj.ltrText, set: (obj, value) => { obj.ltrText = value; } }, metadata: _metadata }, _ltrText_initializers, _ltrText_extraInitializers);
+            __esDecorate(null, null, _outlined_decorators, { kind: "field", name: "outlined", static: false, private: false, access: { has: obj => "outlined" in obj, get: obj => obj.outlined, set: (obj, value) => { obj.outlined = value; } }, metadata: _metadata }, _outlined_initializers, _outlined_extraInitializers);
+            __esDecorate(null, null, _prefix_decorators, { kind: "field", name: "prefix", static: false, private: false, access: { has: obj => "prefix" in obj, get: obj => obj.prefix, set: (obj, value) => { obj.prefix = value; } }, metadata: _metadata }, _prefix_initializers, _prefix_extraInitializers);
+            __esDecorate(null, null, _suffix_decorators, { kind: "field", name: "suffix", static: false, private: false, access: { has: obj => "suffix" in obj, get: obj => obj.suffix, set: (obj, value) => { obj.suffix = value; } }, metadata: _metadata }, _suffix_initializers, _suffix_extraInitializers);
+            __esDecorate(null, null, _required_decorators, { kind: "field", name: "required", static: false, private: false, access: { has: obj => "required" in obj, get: obj => obj.required, set: (obj, value) => { obj.required = value; } }, metadata: _metadata }, _required_initializers, _required_extraInitializers);
+            __esDecorate(null, null, _disabled_decorators, { kind: "field", name: "disabled", static: false, private: false, access: { has: obj => "disabled" in obj, get: obj => obj.disabled, set: (obj, value) => { obj.disabled = value; } }, metadata: _metadata }, _disabled_initializers, _disabled_extraInitializers);
+            __esDecorate(null, null, _readonly_decorators, { kind: "field", name: "readonly", static: false, private: false, access: { has: obj => "readonly" in obj, get: obj => obj.readonly, set: (obj, value) => { obj.readonly = value; } }, metadata: _metadata }, _readonly_initializers, _readonly_extraInitializers);
+            __esDecorate(null, null, _blurOnEnter_decorators, { kind: "field", name: "blurOnEnter", static: false, private: false, access: { has: obj => "blurOnEnter" in obj, get: obj => obj.blurOnEnter, set: (obj, value) => { obj.blurOnEnter = value; } }, metadata: _metadata }, _blurOnEnter_initializers, _blurOnEnter_extraInitializers);
+            __esDecorate(null, null, _maxlength_decorators, { kind: "field", name: "maxlength", static: false, private: false, access: { has: obj => "maxlength" in obj, get: obj => obj.maxlength, set: (obj, value) => { obj.maxlength = value; } }, metadata: _metadata }, _maxlength_initializers, _maxlength_extraInitializers);
+            __esDecorate(null, null, _rows_decorators, { kind: "field", name: "rows", static: false, private: false, access: { has: obj => "rows" in obj, get: obj => obj.rows, set: (obj, value) => { obj.rows = value; } }, metadata: _metadata }, _rows_initializers, _rows_extraInitializers);
+            __esDecorate(null, null, _cols_decorators, { kind: "field", name: "cols", static: false, private: false, access: { has: obj => "cols" in obj, get: obj => obj.cols, set: (obj, value) => { obj.cols = value; } }, metadata: _metadata }, _cols_initializers, _cols_extraInitializers);
+            __esDecorate(null, null, _max_decorators, { kind: "field", name: "max", static: false, private: false, access: { has: obj => "max" in obj, get: obj => obj.max, set: (obj, value) => { obj.max = value; } }, metadata: _metadata }, _max_initializers, _max_extraInitializers);
+            __esDecorate(null, null, _min_decorators, { kind: "field", name: "min", static: false, private: false, access: { has: obj => "min" in obj, get: obj => obj.min, set: (obj, value) => { obj.min = value; } }, metadata: _metadata }, _min_initializers, _min_extraInitializers);
+            __esDecorate(null, null, _step_decorators, { kind: "field", name: "step", static: false, private: false, access: { has: obj => "step" in obj, get: obj => obj.step, set: (obj, value) => { obj.step = value; } }, metadata: _metadata }, _step_initializers, _step_extraInitializers);
+            __esDecorate(null, null, _autocomplete_decorators, { kind: "field", name: "autocomplete", static: false, private: false, access: { has: obj => "autocomplete" in obj, get: obj => obj.autocomplete, set: (obj, value) => { obj.autocomplete = value; } }, metadata: _metadata }, _autocomplete_initializers, _autocomplete_extraInitializers);
+            __esDecorate(null, null, _tabindex_decorators, { kind: "field", name: "tabindex", static: false, private: false, access: { has: obj => "tabindex" in obj, get: obj => obj.tabindex, set: (obj, value) => { obj.tabindex = value; } }, metadata: _metadata }, _tabindex_initializers, _tabindex_extraInitializers);
+            __esDecorate(null, null, _type_decorators, { kind: "field", name: "type", static: false, private: false, access: { has: obj => "type" in obj, get: obj => obj.type, set: (obj, value) => { obj.type = value; } }, metadata: _metadata }, _type_initializers, _type_extraInitializers);
+            __esDecorate(null, null, _name_decorators, { kind: "field", name: "name", static: false, private: false, access: { has: obj => "name" in obj, get: obj => obj.name, set: (obj, value) => { obj.name = value; } }, metadata: _metadata }, _name_initializers, _name_extraInitializers);
+            __esDecorate(null, null, _placeholder_decorators, { kind: "field", name: "placeholder", static: false, private: false, access: { has: obj => "placeholder" in obj, get: obj => obj.placeholder, set: (obj, value) => { obj.placeholder = value; } }, metadata: _metadata }, _placeholder_initializers, _placeholder_extraInitializers);
+            __esDecorate(null, _classDescriptor = { value: _classThis }, _classDecorators, { kind: "class", name: _classThis.name, metadata: _metadata }, null, _classExtraInitializers);
+            MdcTextField = _classThis = _classDescriptor.value;
+            if (_metadata) Object.defineProperty(_classThis, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
+            __runInitializers(_classThis, _classExtraInitializers);
+        }
+        platform;
+        defaultConfiguration;
+        constructor(root, platform, defaultConfiguration) {
+            super(root);
+            this.platform = platform;
+            this.defaultConfiguration = defaultConfiguration;
+            this.outlined = this.defaultConfiguration.outlined;
+            defineMdcTextFieldElementApis(this.root);
+        }
+        id = `mdc-text-field-${++textFieldId}`;
+        id1 = `mdc-text-field-${textFieldId}`;
+        input_;
+        label_ = undefined;
+        lineRipple_;
+        outline_; // assigned in html
+        helperText_;
+        characterCounter_;
+        errors = new Map();
+        leadingIcon_;
+        trailingIcon_;
+        mutationObserver = new MutationObserver(mutations => this.mutated(mutations));
+        label = __runInitializers(this, _label_initializers, void 0);
+        labelChanged() {
+            this.platform.domQueue.queueTask(() => {
+                if (this.foundation) {
+                    const openNotch = this.foundation.shouldFloat;
+                    this.foundation.notchOutline(openNotch);
+                }
+            });
+        }
+        textarea = (__runInitializers(this, _label_extraInitializers), __runInitializers(this, _textarea_initializers, void 0));
+        endAligned = (__runInitializers(this, _textarea_extraInitializers), __runInitializers(this, _endAligned_initializers, void 0));
+        ltrText = (__runInitializers(this, _endAligned_extraInitializers), __runInitializers(this, _ltrText_initializers, void 0));
+        outlined = (__runInitializers(this, _ltrText_extraInitializers), __runInitializers(this, _outlined_initializers, void 0));
+        prefix = (__runInitializers(this, _outlined_extraInitializers), __runInitializers(this, _prefix_initializers, void 0));
+        suffix = (__runInitializers(this, _prefix_extraInitializers), __runInitializers(this, _suffix_initializers, void 0));
+        required = (__runInitializers(this, _suffix_extraInitializers), __runInitializers(this, _required_initializers, void 0));
+        requiredChanged() {
+            if (this.required !== undefined) {
+                this.input_.required = this.required;
+                this.foundation?.setUseNativeValidation(true);
+            }
+        }
+        disabled = (__runInitializers(this, _required_extraInitializers), __runInitializers(this, _disabled_initializers, void 0));
+        disabledChanged() {
+            this.input_.disabled = this.disabled;
+            this.foundation?.setDisabled(this.disabled);
+        }
+        readonly = (__runInitializers(this, _disabled_extraInitializers), __runInitializers(this, _readonly_initializers, void 0));
+        readonlyChanged() {
+            this.input_.readOnly = this.readonly;
+        }
+        /** Makes the element blur on Enter key press */
+        blurOnEnter = (__runInitializers(this, _readonly_extraInitializers), __runInitializers(this, _blurOnEnter_initializers, void 0));
+        maxlength = (__runInitializers(this, _blurOnEnter_extraInitializers), __runInitializers(this, _maxlength_initializers, void 0));
+        maxlengthChanged() {
+            if (this.maxlength) {
+                this.input_.setAttribute('maxlength', this.maxlength);
+            }
+            else {
+                this.input_.removeAttribute('maxlength');
+            }
+        }
+        rows = (__runInitializers(this, _maxlength_extraInitializers), __runInitializers(this, _rows_initializers, void 0));
+        rowsChanged() {
+            if (this.rows) {
+                this.input_.setAttribute('rows', this.rows);
+            }
+            else {
+                this.input_.removeAttribute('rows');
+            }
+        }
+        cols = (__runInitializers(this, _rows_extraInitializers), __runInitializers(this, _cols_initializers, void 0));
+        colsChanged() {
+            if (this.rows) {
+                this.input_.setAttribute('cols', this.cols);
+            }
+            else {
+                this.input_.removeAttribute('cols');
+            }
+        }
+        max = (__runInitializers(this, _cols_extraInitializers), __runInitializers(this, _max_initializers, void 0));
+        maxChanged() {
+            if (this.max === undefined) {
+                this.input_.removeAttribute('max');
+            }
+            else {
+                this.input_.max = this.max;
+            }
+        }
+        min = (__runInitializers(this, _max_extraInitializers), __runInitializers(this, _min_initializers, void 0));
+        minChanged() {
+            if (this.min === undefined) {
+                this.input_.removeAttribute('min');
+            }
+            else {
+                this.input_.min = this.min;
+            }
+        }
+        step = (__runInitializers(this, _min_extraInitializers), __runInitializers(this, _step_initializers, void 0));
+        stepChanged() {
+            if (this.step === undefined) {
+                this.input_.removeAttribute('step');
+            }
+            else {
+                this.input_.step = this.step;
+            }
+        }
+        autocomplete = (__runInitializers(this, _step_extraInitializers), __runInitializers(this, _autocomplete_initializers, void 0));
+        autocompleteChanged() {
+            if (this.autocomplete === undefined) {
+                this.input_.removeAttribute('autocomplete');
+            }
+            else {
+                this.input_.autocomplete = this.autocomplete;
+            }
+        }
+        tabindex = (__runInitializers(this, _autocomplete_extraInitializers), __runInitializers(this, _tabindex_initializers, void 0));
+        tabindexChanged() {
+            if (isNaN(this.tabindex)) {
+                this.input_.removeAttribute('tabindex');
+            }
+            else {
+                this.input_.tabIndex = this.tabindex;
+            }
+        }
+        type = (__runInitializers(this, _tabindex_extraInitializers), __runInitializers(this, _type_initializers, void 0));
+        typeChanged() {
+            if (!this.textarea) {
+                if (this.type === undefined) {
+                    this.input_.removeAttribute('type');
+                }
+                else {
+                    this.input_.type = this.type;
+                }
+            }
+        }
+        name = (__runInitializers(this, _type_extraInitializers), __runInitializers(this, _name_initializers, void 0));
+        nameChanged() {
+            if (this.name === undefined) {
+                this.input_.removeAttribute('name');
+            }
+            else {
+                this.input_.name = this.name;
+            }
+        }
+        placeholder = (__runInitializers(this, _name_extraInitializers), __runInitializers(this, _placeholder_initializers, ' ')); // non empty placeholder solves the issue of misplaced labels in Safari
+        initialValue = __runInitializers(this, _placeholder_extraInitializers);
+        get value() {
+            if (this.foundation) {
+                return this.foundation.getValue();
+            }
+            else {
+                return this.initialValue;
+            }
+        }
+        set value(value) {
+            if (this.foundation) {
+                if (this.foundation.getValue() !== value) {
+                    this.foundation.setValue(value === null || value === undefined ? '' : value.toString());
+                }
+            }
+            else {
+                this.initialValue = value;
+            }
+        }
+        addError(error) {
+            this.errors.set(error, true);
+            this.valid = false;
+        }
+        removeError(error) {
+            this.errors.delete(error);
+            this.valid = this.errors.size === 0;
+        }
+        get valid() {
+            return this.foundation?.isValid() ?? true;
+        }
+        set valid(value) {
+            this.foundation?.setUseNativeValidation(false);
+            this.foundation?.setValid(value);
+        }
+        renderErrors() {
+            const helperLine = this.root.nextElementSibling;
+            if (helperLine?.tagName === 'MDC-TEXT-FIELD-HELPER-LINE') {
+                CustomElement.for(helperLine).viewModel.errors = Array.from(this.errors.keys())
+                    .filter(x => x.message !== null).map(x => x.message);
+            }
+        }
+        async attaching() {
+            const nextSibling = this.root.nextElementSibling;
+            if (nextSibling?.tagName === cssClasses.HELPER_LINE.toUpperCase()) {
+                await CustomElement.for(nextSibling).viewModel.attachedPromise;
+                const helperTextEl = nextSibling.querySelector(helperTextStrings.ROOT_SELECTOR);
+                this.helperText_ = helperTextEl ? CustomElement.for(nextSibling).viewModel : undefined;
+                const characterCounterEl = nextSibling.querySelector(characterCountStrings.ROOT_SELECTOR);
+                this.characterCounter_ = characterCounterEl ? CustomElement.for(characterCounterEl).viewModel : undefined;
+            }
+        }
+        beforeFoundationCreated() {
+            this.maxlengthChanged();
+            this.typeChanged();
+            this.mutationObserver.observe(this.root, { subtree: true, childList: true });
+            this.leadingIconChanged();
+            this.trailingIconChanged();
+        }
+        mutated(mutations) {
+            if (mutations.find(x => [...Array.from(x.addedNodes), ...Array.from(x.removedNodes)].find(y => y instanceof HTMLElement && y.matches(leadingIconSelector)))) {
+                this.leadingIconChanged();
+            }
+            if (mutations.find(x => [...Array.from(x.addedNodes), ...Array.from(x.removedNodes)].find(y => y instanceof HTMLElement && y.matches(trailingIconSelector)))) {
+                this.trailingIconChanged();
+            }
+        }
+        trailingIconChanged() {
+            const el = this.root.querySelector(trailingIconSelector);
+            this.trailingIcon_ = el ? CustomAttribute.for(el, mdcIconStrings.ATTRIBUTE)?.viewModel : undefined;
+        }
+        leadingIconChanged() {
+            const el = this.root.querySelector(leadingIconSelector);
+            this.leadingIcon_ = el ? CustomAttribute.for(el, mdcIconStrings.ATTRIBUTE)?.viewModel : undefined;
+        }
+        destroy() {
+            this.mutationObserver.disconnect();
+        }
+        initialSyncWithDOM() {
+            this.value = this.initialValue;
+            this.errors = new Map();
+            this.valid = true;
+            this.requiredChanged();
+            this.disabledChanged();
+            this.readonlyChanged();
+            this.tabindexChanged();
+            this.rowsChanged();
+            this.colsChanged();
+            this.minChanged();
+            this.maxChanged();
+            this.stepChanged();
+            this.autocompleteChanged();
+            this.nameChanged();
+            // handle the case when attribute value was set, not bound, in html
+            if (this.root.hasAttribute('value')) {
+                this.value = this.root.getAttribute('value') ?? '';
+            }
+        }
+        getDefaultFoundation() {
+            const adapter = {
+                ...this.getRootAdapterMethods_(),
+                ...this.getInputAdapterMethods_(),
+                ...this.getLabelAdapterMethods_(),
+                ...this.getLineRippleAdapterMethods_(),
+                ...this.getOutlineAdapterMethods_(),
+            };
+            return new MDCTextFieldFoundation(adapter, this.getFoundationMap_());
+        }
+        getRootAdapterMethods_() {
+            return {
+                addClass: (className) => this.root.classList.add(className),
+                removeClass: (className) => this.root.classList.remove(className),
+                hasClass: (className) => this.root.classList.contains(className),
+                registerTextFieldInteractionHandler: (evtType, handler) => this.listen(evtType, handler),
+                deregisterTextFieldInteractionHandler: (evtType, handler) => this.unlisten(evtType, handler),
+                registerValidationAttributeChangeHandler: (handler) => {
+                    const getAttributesList = (mutationsList) => {
+                        return mutationsList
+                            .map((mutation) => mutation.attributeName)
+                            .filter((attributeName) => attributeName);
+                    };
+                    const observer = new MutationObserver((mutationsList) => handler(getAttributesList(mutationsList)));
+                    const config = { attributes: true };
+                    observer.observe(this.input_, config);
+                    return observer;
+                },
+                deregisterValidationAttributeChangeHandler: (observer) => observer.disconnect(),
+            };
+        }
+        getInputAdapterMethods_() {
+            return {
+                getNativeInput: () => this.input_,
+                setInputAttr: (attr, value) => {
+                    this.input_.setAttribute(attr, value);
+                },
+                removeInputAttr: (attr) => {
+                    this.input_.removeAttribute(attr);
+                },
+                isFocused: () => document.activeElement === this.input_,
+                registerInputInteractionHandler: (evtType, handler) => this.input_.addEventListener(evtType, handler, applyPassive()),
+                deregisterInputInteractionHandler: (evtType, handler) => this.input_?.removeEventListener(evtType, handler, applyPassive()),
+            };
+        }
+        getLabelAdapterMethods_() {
+            return {
+                floatLabel: (shouldFloat) => this.label_?.float(shouldFloat),
+                getLabelWidth: () => this.label_ ? this.label_.getWidth() : 0,
+                hasLabel: () => Boolean(this.label_),
+                shakeLabel: (shouldShake) => this.label_?.shake(shouldShake),
+                setLabelRequired: (isRequired) => this.label_?.setRequired(isRequired),
+            };
+        }
+        getLineRippleAdapterMethods_() {
+            return {
+                activateLineRipple: () => this.lineRipple_?.activate(),
+                deactivateLineRipple: () => this.lineRipple_?.deactivate(),
+                setLineRippleTransformOrigin: (normalizedX) => this.lineRipple_?.setRippleCenter(normalizedX)
+            };
+        }
+        getOutlineAdapterMethods_() {
+            return {
+                closeOutline: () => this.outline_?.closeNotch(),
+                hasOutline: () => Boolean(this.outline_),
+                notchOutline: (labelWidth) => this.outline_?.notch(labelWidth),
+            };
+        }
+        /**
+         * @return A map of all subcomponents to subfoundations.
+         */
+        getFoundationMap_() {
+            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,
+            };
+        }
+        onInput(evt) {
+            const value = evt.target.value;
+            this.value = value;
+        }
+        onFocus() {
+            this.foundation?.activateFocus();
+            this.emit('focus', {}, true);
+        }
+        onChange(evt) {
+            const value = evt.target.value;
+            this.value = value;
+        }
+        onBlur() {
+            this.foundation?.deactivateFocus();
+            this.emit('blur', {}, true);
+        }
+        focus() {
+            this.input_.focus();
+        }
+        blur() {
+            this.input_.blur();
+        }
+        onKeyup(e) {
+            if (this.blurOnEnter && e.keyCode === 13) {
+                this.blur();
+            }
+            return true;
+        }
+    };
+    return MdcTextField = _classThis;
+})();
+export { MdcTextField };
+function defineMdcTextFieldElementApis(element) {
+    Object.defineProperties(element, {
+        tagName: {
+            get() {
+                return 'MDC-TEXT-FIELD';
+            }
+        },
+        value: {
+            get() {
+                return CustomElement.for(this).viewModel.value;
+            },
+            set(value) {
+                CustomElement.for(this).viewModel.value = value;
+            },
+            configurable: true
+        },
+        disabled: {
+            get() {
+                return CustomElement.for(this).viewModel.disabled;
+            },
+            set(value) {
+                CustomElement.for(this).viewModel.disabled = value;
+            },
+            configurable: true
+        },
+        readOnly: {
+            get() {
+                return CustomElement.for(this).viewModel.readonly;
+            },
+            set(value) {
+                CustomElement.for(this).viewModel.readonly = value;
+            },
+            configurable: true
+        },
+        valid: {
+            get() {
+                return CustomElement.for(this).viewModel.valid;
+            },
+            set(value) {
+                CustomElement.for(this).viewModel.valid = value;
+            },
+            configurable: true
+        },
+        addError: {
+            value(error) {
+                CustomElement.for(this).viewModel.addError(error);
+            },
+            configurable: true
+        },
+        removeError: {
+            value(error) {
+                CustomElement.for(this).viewModel.removeError(error);
+            },
+            configurable: true
+        },
+        renderErrors: {
+            value() {
+                CustomElement.for(this).viewModel.renderErrors();
+            },
+            configurable: true
+        },
+        focus: {
+            value() {
+                CustomElement.for(this).viewModel.focus();
+            },
+            configurable: true
+        },
+        blur: {
+            value() {
+                CustomElement.for(this).viewModel.blur();
+            },
+            configurable: true
+        },
+        isFocused: {
+            get() {
+                return document.activeElement === CustomElement.for(this).viewModel.input_;
+            },
+            configurable: true
+        }
+    });
+}
+//# sourceMappingURL=mdc-text-field.js.map