@limetech/lime-elements 35.0.0-next.9 → 35.0.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/checkbox.template-b6c6562c.js +43 -0
- package/dist/cjs/{component-f7ef9087.js → component-66df95e7.js} +190 -132
- package/dist/cjs/{component-f532119f.js → component-67144c1c.js} +47 -3
- package/dist/cjs/{component-ed21410d.js → component-ae3bfacf.js} +367 -235
- package/dist/cjs/{component-2faaa141.js → component-cf490570.js} +213 -143
- package/dist/cjs/{component-10dbdd60.js → component-dd795ff0.js} +7 -5
- package/dist/cjs/{dateFormatter-26eac73a.js → dateFormatter-34b77ead.js} +37 -31
- package/dist/cjs/{index-e63a89d7.js → index-2a28697b.js} +27 -1
- package/dist/cjs/lime-elements.cjs.js +3 -3
- package/dist/cjs/limel-badge.cjs.entry.js +4 -4
- package/dist/cjs/limel-banner.cjs.entry.js +2 -2
- package/dist/cjs/limel-button-group.cjs.entry.js +3 -3
- package/dist/cjs/limel-button.cjs.entry.js +3 -3
- package/dist/cjs/limel-checkbox.cjs.entry.js +136 -90
- package/dist/cjs/limel-chip-set.cjs.entry.js +235 -191
- package/dist/cjs/limel-circular-progress.cjs.entry.js +3 -3
- package/dist/cjs/limel-code-editor.cjs.entry.js +50 -23
- package/dist/cjs/limel-collapsible-section.cjs.entry.js +2 -2
- package/dist/cjs/limel-color-picker-palette_2.cjs.entry.js +3 -3
- package/dist/cjs/limel-color-picker.cjs.entry.js +2 -2
- package/dist/cjs/limel-config.cjs.entry.js +2 -2
- package/dist/cjs/limel-date-picker.cjs.entry.js +8 -8
- package/dist/cjs/limel-dialog.cjs.entry.js +9 -10
- package/dist/cjs/limel-file.cjs.entry.js +11 -9
- package/dist/cjs/limel-flatpickr-adapter.cjs.entry.js +971 -657
- package/dist/cjs/limel-flex-container.cjs.entry.js +6 -2
- package/dist/cjs/limel-form.cjs.entry.js +423 -449
- package/dist/cjs/limel-grid.cjs.entry.js +2 -2
- package/dist/cjs/limel-header.cjs.entry.js +2 -2
- package/dist/cjs/limel-icon-button.cjs.entry.js +6 -6
- package/dist/cjs/limel-icon.cjs.entry.js +2 -2
- package/dist/cjs/limel-input-field.cjs.entry.js +12 -10
- package/dist/cjs/limel-linear-progress.cjs.entry.js +4 -4
- package/dist/cjs/limel-list_3.cjs.entry.js +154 -91
- package/dist/cjs/limel-menu-list.cjs.entry.js +87 -74
- package/dist/cjs/limel-menu.cjs.entry.js +2 -2
- package/dist/cjs/limel-picker.cjs.entry.js +4 -7
- package/dist/cjs/limel-popover-surface.cjs.entry.js +3 -3
- package/dist/cjs/limel-progress-flow-item.cjs.entry.js +2 -2
- package/dist/cjs/limel-progress-flow.cjs.entry.js +2 -2
- package/dist/cjs/limel-select.cjs.entry.js +6 -6
- package/dist/cjs/limel-slider.cjs.entry.js +34 -7
- package/dist/cjs/limel-snackbar.cjs.entry.js +79 -73
- package/dist/cjs/limel-spinner.cjs.entry.js +2 -2
- package/dist/cjs/limel-switch.cjs.entry.js +498 -202
- package/dist/cjs/limel-tab-bar.cjs.entry.js +263 -186
- package/dist/cjs/limel-tab-panel.cjs.entry.js +2 -2
- package/dist/cjs/limel-table.cjs.entry.js +73 -13
- package/dist/cjs/limel-tooltip_2.cjs.entry.js +3 -3
- package/dist/cjs/loader.cjs.js +3 -3
- package/dist/cjs/{moment-d287c0ed.js → moment-5c6581b7.js} +94 -79
- package/dist/collection/collection-manifest.json +2 -2
- package/dist/collection/components/badge/badge.css +9 -15
- package/dist/collection/components/badge/badge.js +2 -2
- package/dist/collection/components/button/button.css +333 -145
- package/dist/collection/components/button-group/button-group.css +30 -5
- package/dist/collection/components/checkbox/checkbox.css +71 -20
- package/dist/collection/components/checkbox/checkbox.js +5 -4
- package/dist/collection/components/checkbox/checkbox.template.js +24 -20
- package/dist/collection/components/chip-set/chip-set.css +367 -34
- package/dist/collection/components/circular-progress/circular-progress.css +2 -2
- package/dist/collection/components/code-editor/code-editor.css +8 -13
- package/dist/collection/components/date-picker/flatpickr-adapter/flatpickr-adapter.css +1 -1
- package/dist/collection/components/dialog/dialog.css +153 -109
- package/dist/collection/components/dialog/dialog.js +7 -0
- package/dist/collection/components/file/icon-background-colors.js +2 -1
- package/dist/collection/components/file/icon-fill-colors.js +2 -1
- package/dist/collection/components/file/icons.js +1 -1
- package/dist/collection/components/flex-container/flex-container.js +10 -0
- package/dist/collection/components/form/fields/schema-field.js +0 -1
- package/dist/collection/components/form/form.css +5 -1
- package/dist/collection/components/form/form.js +34 -0
- package/dist/collection/components/form/form.types.js +0 -1
- package/dist/collection/components/form/templates/common.js +4 -1
- package/dist/collection/components/icon-button/icon-button.css +116 -59
- package/dist/collection/components/icon-button/icon-button.js +1 -0
- package/dist/collection/components/input-field/input-field.css +344 -29
- package/dist/collection/components/input-field/input-field.js +5 -3
- package/dist/collection/components/linear-progress/linear-progress.css +14 -2
- package/dist/collection/components/list/list-renderer.js +1 -4
- package/dist/collection/components/list/list.css +938 -93
- package/dist/collection/components/list/list.js +13 -6
- package/dist/collection/components/menu-list/menu-list-renderer.js +1 -4
- package/dist/collection/components/menu-list/menu-list.css +938 -93
- package/dist/collection/components/menu-surface/menu-surface.css +31 -7
- package/dist/collection/components/picker/picker.js +4 -6
- package/dist/collection/components/popover-surface/popover-surface.css +1 -0
- package/dist/collection/components/select/select.css +424 -17
- package/dist/collection/components/select/select.template.js +1 -1
- package/dist/collection/components/slider/slider.css +49 -2
- package/dist/collection/components/snackbar/snackbar.css +588 -301
- package/dist/collection/components/switch/switch.css +592 -222
- package/dist/collection/components/switch/switch.js +18 -12
- package/dist/collection/components/tab-bar/tab-bar.css +77 -48
- package/dist/collection/components/table/table.css +219 -165
- package/dist/collection/components/table/table.js +99 -15
- package/dist/collection/components/table/table.types.js +0 -1
- package/dist/collection/style/functions.scss +3 -1
- package/dist/collection/style/internal/lime-theme.scss +30 -31
- package/dist/collection/style/internal/lime-typography.scss +55 -56
- package/dist/esm/checkbox.template-2f1bbc98.js +41 -0
- package/dist/esm/{component-89e0ce26.js → component-19eb6e2b.js} +7 -5
- package/dist/esm/{component-2630c3d7.js → component-288691f3.js} +367 -235
- package/dist/esm/{component-d682c974.js → component-410aad5a.js} +44 -4
- package/dist/esm/{component-429e92ee.js → component-5b4ac85a.js} +213 -143
- package/dist/esm/{component-834d85a1.js → component-fffa3419.js} +190 -132
- package/dist/esm/{dateFormatter-c9b41548.js → dateFormatter-ed618478.js} +37 -31
- package/dist/esm/{index-2316f345.js → index-11cd0b60.js} +27 -1
- package/dist/esm/lime-elements.js +3 -3
- package/dist/esm/limel-badge.entry.js +4 -4
- package/dist/esm/limel-banner.entry.js +2 -2
- package/dist/esm/limel-button-group.entry.js +3 -3
- package/dist/esm/limel-button.entry.js +3 -3
- package/dist/esm/limel-checkbox.entry.js +136 -90
- package/dist/esm/limel-chip-set.entry.js +235 -191
- package/dist/esm/limel-circular-progress.entry.js +3 -3
- package/dist/esm/limel-code-editor.entry.js +50 -23
- package/dist/esm/limel-collapsible-section.entry.js +2 -2
- package/dist/esm/limel-color-picker-palette_2.entry.js +3 -3
- package/dist/esm/limel-color-picker.entry.js +2 -2
- package/dist/esm/limel-config.entry.js +2 -2
- package/dist/esm/limel-date-picker.entry.js +8 -8
- package/dist/esm/limel-dialog.entry.js +9 -10
- package/dist/esm/limel-file.entry.js +11 -9
- package/dist/esm/limel-flatpickr-adapter.entry.js +971 -657
- package/dist/esm/limel-flex-container.entry.js +6 -2
- package/dist/esm/limel-form.entry.js +424 -450
- package/dist/esm/limel-grid.entry.js +2 -2
- package/dist/esm/limel-header.entry.js +2 -2
- package/dist/esm/limel-icon-button.entry.js +6 -6
- package/dist/esm/limel-icon.entry.js +2 -2
- package/dist/esm/limel-input-field.entry.js +12 -10
- package/dist/esm/limel-linear-progress.entry.js +4 -4
- package/dist/esm/limel-list_3.entry.js +154 -91
- package/dist/esm/limel-menu-list.entry.js +87 -74
- package/dist/esm/limel-menu.entry.js +2 -2
- package/dist/esm/limel-picker.entry.js +4 -7
- package/dist/esm/limel-popover-surface.entry.js +3 -3
- package/dist/esm/limel-progress-flow-item.entry.js +2 -2
- package/dist/esm/limel-progress-flow.entry.js +2 -2
- package/dist/esm/limel-select.entry.js +6 -6
- package/dist/esm/limel-slider.entry.js +34 -7
- package/dist/esm/limel-snackbar.entry.js +79 -73
- package/dist/esm/limel-spinner.entry.js +2 -2
- package/dist/esm/limel-switch.entry.js +498 -202
- package/dist/esm/limel-tab-bar.entry.js +263 -186
- package/dist/esm/limel-tab-panel.entry.js +2 -2
- package/dist/esm/limel-table.entry.js +73 -13
- package/dist/esm/limel-tooltip_2.entry.js +3 -3
- package/dist/esm/loader.js +3 -3
- package/dist/esm/{moment-8dadd938.js → moment-29c213b7.js} +94 -79
- package/dist/esm/polyfills/css-shim.js +1 -1
- package/dist/lime-elements/lime-elements.esm.js +1 -1
- package/dist/lime-elements/p-04b5bc13.entry.js +82 -0
- package/dist/lime-elements/p-101af376.entry.js +1 -0
- package/dist/lime-elements/p-1c284626.js +73 -0
- package/dist/lime-elements/p-1ede893b.js +1 -0
- package/dist/lime-elements/p-2639edf9.entry.js +73 -0
- package/dist/lime-elements/p-2da6e2a3.entry.js +1 -0
- package/dist/lime-elements/p-2ff40ce6.js +3 -0
- package/dist/lime-elements/{p-887d5bda.entry.js → p-358706b6.entry.js} +1 -1
- package/dist/lime-elements/p-36ecbd03.entry.js +1 -0
- package/dist/lime-elements/p-404e1465.entry.js +1 -0
- package/dist/lime-elements/p-42b67933.entry.js +1 -0
- package/dist/lime-elements/p-440454ed.entry.js +1 -0
- package/dist/lime-elements/{p-076bd4dc.js → p-48d4ef20.js} +3 -3
- package/dist/lime-elements/p-53e01330.entry.js +1 -0
- package/dist/lime-elements/p-5908c21d.entry.js +1 -0
- package/dist/lime-elements/p-5b7a8c61.entry.js +20 -0
- package/dist/lime-elements/p-63e25a0a.entry.js +1 -0
- package/dist/lime-elements/p-6e7809a6.entry.js +1 -0
- package/dist/lime-elements/p-705334c1.entry.js +1 -0
- package/dist/lime-elements/p-716a6acd.entry.js +16 -0
- package/dist/lime-elements/p-71efe2ca.entry.js +37 -0
- package/dist/lime-elements/{p-e1928c0e.js → p-72e03943.js} +1 -1
- package/dist/lime-elements/p-80327bb8.entry.js +16 -0
- package/dist/lime-elements/p-83ea517b.entry.js +1 -0
- package/dist/lime-elements/p-87a1e1cb.entry.js +1 -0
- package/dist/lime-elements/{p-8ad5e143.entry.js → p-94899019.entry.js} +1 -1
- package/dist/lime-elements/p-95f275ab.entry.js +1 -0
- package/dist/lime-elements/p-96f4b892.entry.js +131 -0
- package/dist/lime-elements/p-97d6c4a6.entry.js +1 -0
- package/dist/lime-elements/p-a465084b.entry.js +82 -0
- package/dist/lime-elements/p-a5af84a7.entry.js +1 -0
- package/dist/lime-elements/p-b91dc1ef.entry.js +1 -0
- package/dist/lime-elements/p-bd8c9384.entry.js +1 -0
- package/dist/lime-elements/p-c4b38454.entry.js +1 -0
- package/dist/lime-elements/p-c7953a05.entry.js +82 -0
- package/dist/lime-elements/p-c80acfb2.entry.js +59 -0
- package/dist/lime-elements/p-cbc43682.js +81 -0
- package/dist/lime-elements/{p-ace9affc.js → p-d0a7de87.js} +2 -2
- package/dist/lime-elements/p-d1ee4501.entry.js +37 -0
- package/dist/lime-elements/p-d74fa89e.entry.js +1 -0
- package/dist/lime-elements/p-da962c64.entry.js +1 -0
- package/dist/lime-elements/p-dfba92de.js +126 -0
- package/dist/lime-elements/p-dfbe015e.entry.js +1 -0
- package/dist/lime-elements/p-e83dddcd.entry.js +126 -0
- package/dist/lime-elements/p-e98d76e8.entry.js +59 -0
- package/dist/lime-elements/{p-92146da6.js → p-e9a95b8f.js} +1 -1
- package/dist/lime-elements/p-eae8c615.entry.js +1 -0
- package/dist/lime-elements/p-ed65468d.entry.js +1 -0
- package/dist/lime-elements/p-f0c9dadd.entry.js +1 -0
- package/dist/lime-elements/style/functions.scss +3 -1
- package/dist/lime-elements/style/internal/lime-theme.scss +30 -31
- package/dist/lime-elements/style/internal/lime-typography.scss +55 -56
- package/dist/types/components/badge/badge.d.ts +1 -1
- package/dist/types/components/checkbox/checkbox.d.ts +3 -2
- package/dist/types/components/checkbox/checkbox.template.d.ts +1 -0
- package/dist/types/components/dialog/dialog.d.ts +7 -0
- package/dist/types/components/flex-container/flex-container.d.ts +7 -0
- package/dist/types/components/form/fields/array-field.d.ts +0 -1
- package/dist/types/components/form/fields/object-field.d.ts +2 -2
- package/dist/types/components/form/form.d.ts +8 -1
- package/dist/types/components/form/form.types.d.ts +6 -0
- package/dist/types/components/picker/picker.d.ts +2 -1
- package/dist/types/components/switch/switch.d.ts +2 -2
- package/dist/types/components/table/table.d.ts +10 -1
- package/dist/types/components/table/table.types.d.ts +13 -0
- package/dist/types/components.d.ts +20 -4
- package/dist/types/stencil-public-runtime.d.ts +6 -4
- package/package.json +30 -43
- package/dist/cjs/checkbox.template-50eb8b76.js +0 -39
- package/dist/esm/checkbox.template-50f7c07b.js +0 -37
- package/dist/lime-elements/p-041ae00c.entry.js +0 -1
- package/dist/lime-elements/p-0ce9165f.entry.js +0 -1
- package/dist/lime-elements/p-0fd208f3.entry.js +0 -82
- package/dist/lime-elements/p-143705b1.entry.js +0 -1
- package/dist/lime-elements/p-1876a96a.entry.js +0 -1
- package/dist/lime-elements/p-1fb5340d.entry.js +0 -1
- package/dist/lime-elements/p-250f55be.js +0 -1
- package/dist/lime-elements/p-29f054cc.entry.js +0 -37
- package/dist/lime-elements/p-31fecf5d.entry.js +0 -1
- package/dist/lime-elements/p-34c7872e.entry.js +0 -1
- package/dist/lime-elements/p-3ae6bb75.entry.js +0 -82
- package/dist/lime-elements/p-3ae6dfba.entry.js +0 -73
- package/dist/lime-elements/p-468e940e.entry.js +0 -16
- package/dist/lime-elements/p-4932c029.entry.js +0 -1
- package/dist/lime-elements/p-4b5af81b.entry.js +0 -1
- package/dist/lime-elements/p-510bb5a4.entry.js +0 -1
- package/dist/lime-elements/p-58cbe99d.entry.js +0 -1
- package/dist/lime-elements/p-597cbe05.entry.js +0 -1
- package/dist/lime-elements/p-6003f817.entry.js +0 -1
- package/dist/lime-elements/p-668795a7.js +0 -73
- package/dist/lime-elements/p-714fde78.entry.js +0 -1
- package/dist/lime-elements/p-7476efe0.entry.js +0 -1
- package/dist/lime-elements/p-8a2c1038.entry.js +0 -16
- package/dist/lime-elements/p-902347b9.js +0 -81
- package/dist/lime-elements/p-90c6fa15.js +0 -126
- package/dist/lime-elements/p-90f3e17c.entry.js +0 -37
- package/dist/lime-elements/p-a2cf74c1.entry.js +0 -1
- package/dist/lime-elements/p-a397bab7.js +0 -3
- package/dist/lime-elements/p-a4c532a7.entry.js +0 -1
- package/dist/lime-elements/p-be56ffab.entry.js +0 -1
- package/dist/lime-elements/p-c306c953.entry.js +0 -1
- package/dist/lime-elements/p-c35874db.entry.js +0 -1
- package/dist/lime-elements/p-c8c8a946.entry.js +0 -59
- package/dist/lime-elements/p-ca664c9f.entry.js +0 -1
- package/dist/lime-elements/p-d2c74396.entry.js +0 -1
- package/dist/lime-elements/p-d48ad9f7.entry.js +0 -126
- package/dist/lime-elements/p-d93a3b07.entry.js +0 -16
- package/dist/lime-elements/p-df8faeb4.entry.js +0 -59
- package/dist/lime-elements/p-dfe0a58b.entry.js +0 -1
- package/dist/lime-elements/p-e275f502.entry.js +0 -37
- package/dist/lime-elements/p-e881e98d.entry.js +0 -1
- package/dist/lime-elements/p-f2c706b8.entry.js +0 -131
- package/dist/lime-elements/p-fc30b8e3.entry.js +0 -1
|
@@ -1,7 +1,7 @@
|
|
|
1
|
-
import { M as MDCFoundation, a as MDCComponent } from './component-
|
|
2
|
-
import { a as applyPassive, M as MDCRipple, b as MDCRippleFoundation } from './component-
|
|
1
|
+
import { M as MDCFoundation, a as MDCComponent } from './component-410aad5a.js';
|
|
2
|
+
import { a as applyPassive, M as MDCRipple, b as MDCRippleFoundation } from './component-5b4ac85a.js';
|
|
3
3
|
import { m as matches } from './ponyfill-30263d5e.js';
|
|
4
|
-
import { M as MDCFloatingLabelFoundation, a as MDCFloatingLabel } from './component-
|
|
4
|
+
import { M as MDCFloatingLabelFoundation, a as MDCFloatingLabel } from './component-19eb6e2b.js';
|
|
5
5
|
|
|
6
6
|
/*! *****************************************************************************
|
|
7
7
|
Copyright (c) Microsoft Corporation.
|
|
@@ -43,7 +43,19 @@ var __assign$2 = function() {
|
|
|
43
43
|
return t;
|
|
44
44
|
};
|
|
45
45
|
return __assign$2.apply(this, arguments);
|
|
46
|
-
};
|
|
46
|
+
};
|
|
47
|
+
|
|
48
|
+
function __values(o) {
|
|
49
|
+
var s = typeof Symbol === "function" && Symbol.iterator, m = s && o[s], i = 0;
|
|
50
|
+
if (m) return m.call(o);
|
|
51
|
+
if (o && typeof o.length === "number") return {
|
|
52
|
+
next: function () {
|
|
53
|
+
if (o && i >= o.length) o = void 0;
|
|
54
|
+
return { value: o && o[i++], done: !o };
|
|
55
|
+
}
|
|
56
|
+
};
|
|
57
|
+
throw new TypeError(s ? "Object is not iterable." : "Symbol.iterator is not defined.");
|
|
58
|
+
}
|
|
47
59
|
|
|
48
60
|
/*! *****************************************************************************
|
|
49
61
|
Copyright (c) Microsoft Corporation.
|
|
@@ -140,7 +152,9 @@ var MDCLineRippleFoundation = /** @class */ (function (_super) {
|
|
|
140
152
|
__extends$1(MDCLineRippleFoundation, _super);
|
|
141
153
|
function MDCLineRippleFoundation(adapter) {
|
|
142
154
|
var _this = _super.call(this, __assign$1(__assign$1({}, MDCLineRippleFoundation.defaultAdapter), adapter)) || this;
|
|
143
|
-
_this.
|
|
155
|
+
_this.transitionEndHandler = function (evt) {
|
|
156
|
+
_this.handleTransitionEnd(evt);
|
|
157
|
+
};
|
|
144
158
|
return _this;
|
|
145
159
|
}
|
|
146
160
|
Object.defineProperty(MDCLineRippleFoundation, "cssClasses", {
|
|
@@ -170,10 +184,10 @@ var MDCLineRippleFoundation = /** @class */ (function (_super) {
|
|
|
170
184
|
configurable: true
|
|
171
185
|
});
|
|
172
186
|
MDCLineRippleFoundation.prototype.init = function () {
|
|
173
|
-
this.adapter.registerEventHandler('transitionend', this.
|
|
187
|
+
this.adapter.registerEventHandler('transitionend', this.transitionEndHandler);
|
|
174
188
|
};
|
|
175
189
|
MDCLineRippleFoundation.prototype.destroy = function () {
|
|
176
|
-
this.adapter.deregisterEventHandler('transitionend', this.
|
|
190
|
+
this.adapter.deregisterEventHandler('transitionend', this.transitionEndHandler);
|
|
177
191
|
};
|
|
178
192
|
MDCLineRippleFoundation.prototype.activate = function () {
|
|
179
193
|
this.adapter.removeClass(cssClasses$5.LINE_RIPPLE_DEACTIVATING);
|
|
@@ -462,7 +476,7 @@ var MDCNotchedOutline = /** @class */ (function (_super) {
|
|
|
462
476
|
return new MDCNotchedOutline(root);
|
|
463
477
|
};
|
|
464
478
|
MDCNotchedOutline.prototype.initialSyncWithDOM = function () {
|
|
465
|
-
this.
|
|
479
|
+
this.notchElement =
|
|
466
480
|
this.root.querySelector(strings$4.NOTCH_ELEMENT_SELECTOR);
|
|
467
481
|
var label = this.root.querySelector('.' + MDCFloatingLabelFoundation.cssClasses.ROOT);
|
|
468
482
|
if (label) {
|
|
@@ -498,10 +512,10 @@ var MDCNotchedOutline = /** @class */ (function (_super) {
|
|
|
498
512
|
addClass: function (className) { return _this.root.classList.add(className); },
|
|
499
513
|
removeClass: function (className) { return _this.root.classList.remove(className); },
|
|
500
514
|
setNotchWidthProperty: function (width) {
|
|
501
|
-
|
|
515
|
+
_this.notchElement.style.setProperty('width', width + 'px');
|
|
502
516
|
},
|
|
503
517
|
removeNotchWidthProperty: function () {
|
|
504
|
-
|
|
518
|
+
_this.notchElement.style.removeProperty('width');
|
|
505
519
|
},
|
|
506
520
|
};
|
|
507
521
|
// tslint:enable:object-literal-sort-keys
|
|
@@ -697,22 +711,37 @@ var cssClasses$2 = {
|
|
|
697
711
|
TEXTAREA: 'mdc-text-field--textarea',
|
|
698
712
|
WITH_LEADING_ICON: 'mdc-text-field--with-leading-icon',
|
|
699
713
|
WITH_TRAILING_ICON: 'mdc-text-field--with-trailing-icon',
|
|
714
|
+
WITH_INTERNAL_COUNTER: 'mdc-text-field--with-internal-counter',
|
|
700
715
|
};
|
|
701
716
|
var numbers = {
|
|
702
717
|
LABEL_SCALE: 0.75,
|
|
703
718
|
};
|
|
704
719
|
/**
|
|
705
|
-
* Whitelist based off of
|
|
720
|
+
* Whitelist based off of
|
|
721
|
+
* https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation
|
|
706
722
|
* under the "Validation-related attributes" section.
|
|
707
723
|
*/
|
|
708
724
|
var VALIDATION_ATTR_WHITELIST = [
|
|
709
|
-
'pattern',
|
|
725
|
+
'pattern',
|
|
726
|
+
'min',
|
|
727
|
+
'max',
|
|
728
|
+
'required',
|
|
729
|
+
'step',
|
|
730
|
+
'minlength',
|
|
731
|
+
'maxlength',
|
|
710
732
|
];
|
|
711
733
|
/**
|
|
712
|
-
* Label should always float for these types as they show some UI even if value
|
|
734
|
+
* Label should always float for these types as they show some UI even if value
|
|
735
|
+
* is empty.
|
|
713
736
|
*/
|
|
714
737
|
var ALWAYS_FLOAT_TYPES = [
|
|
715
|
-
'color',
|
|
738
|
+
'color',
|
|
739
|
+
'date',
|
|
740
|
+
'datetime-local',
|
|
741
|
+
'month',
|
|
742
|
+
'range',
|
|
743
|
+
'time',
|
|
744
|
+
'week',
|
|
716
745
|
];
|
|
717
746
|
|
|
718
747
|
/**
|
|
@@ -748,22 +777,32 @@ var MDCTextFieldFoundation = /** @class */ (function (_super) {
|
|
|
748
777
|
function MDCTextFieldFoundation(adapter, foundationMap) {
|
|
749
778
|
if (foundationMap === void 0) { foundationMap = {}; }
|
|
750
779
|
var _this = _super.call(this, __assign$2(__assign$2({}, MDCTextFieldFoundation.defaultAdapter), adapter)) || this;
|
|
751
|
-
_this.
|
|
752
|
-
_this.
|
|
753
|
-
_this.
|
|
754
|
-
_this.
|
|
755
|
-
_this.
|
|
756
|
-
_this.
|
|
757
|
-
_this.
|
|
758
|
-
_this.
|
|
759
|
-
_this.
|
|
760
|
-
_this.
|
|
761
|
-
|
|
762
|
-
|
|
763
|
-
_this.
|
|
764
|
-
|
|
765
|
-
|
|
766
|
-
|
|
780
|
+
_this.isFocused = false;
|
|
781
|
+
_this.receivedUserInput = false;
|
|
782
|
+
_this.valid = true;
|
|
783
|
+
_this.useNativeValidation = true;
|
|
784
|
+
_this.validateOnValueChange = true;
|
|
785
|
+
_this.helperText = foundationMap.helperText;
|
|
786
|
+
_this.characterCounter = foundationMap.characterCounter;
|
|
787
|
+
_this.leadingIcon = foundationMap.leadingIcon;
|
|
788
|
+
_this.trailingIcon = foundationMap.trailingIcon;
|
|
789
|
+
_this.inputFocusHandler = function () {
|
|
790
|
+
_this.activateFocus();
|
|
791
|
+
};
|
|
792
|
+
_this.inputBlurHandler = function () {
|
|
793
|
+
_this.deactivateFocus();
|
|
794
|
+
};
|
|
795
|
+
_this.inputInputHandler = function () {
|
|
796
|
+
_this.handleInput();
|
|
797
|
+
};
|
|
798
|
+
_this.setPointerXOffset = function (evt) {
|
|
799
|
+
_this.setTransformOrigin(evt);
|
|
800
|
+
};
|
|
801
|
+
_this.textFieldInteractionHandler = function () {
|
|
802
|
+
_this.handleTextFieldInteraction();
|
|
803
|
+
};
|
|
804
|
+
_this.validationAttributeChangeHandler = function (attributesList) {
|
|
805
|
+
_this.handleValidationAttributeChange(attributesList);
|
|
767
806
|
};
|
|
768
807
|
return _this;
|
|
769
808
|
}
|
|
@@ -788,9 +827,9 @@ var MDCTextFieldFoundation = /** @class */ (function (_super) {
|
|
|
788
827
|
enumerable: false,
|
|
789
828
|
configurable: true
|
|
790
829
|
});
|
|
791
|
-
Object.defineProperty(MDCTextFieldFoundation.prototype, "
|
|
830
|
+
Object.defineProperty(MDCTextFieldFoundation.prototype, "shouldAlwaysFloat", {
|
|
792
831
|
get: function () {
|
|
793
|
-
var type = this.
|
|
832
|
+
var type = this.getNativeInput().type;
|
|
794
833
|
return ALWAYS_FLOAT_TYPES.indexOf(type) >= 0;
|
|
795
834
|
},
|
|
796
835
|
enumerable: false,
|
|
@@ -798,15 +837,15 @@ var MDCTextFieldFoundation = /** @class */ (function (_super) {
|
|
|
798
837
|
});
|
|
799
838
|
Object.defineProperty(MDCTextFieldFoundation.prototype, "shouldFloat", {
|
|
800
839
|
get: function () {
|
|
801
|
-
return this.
|
|
802
|
-
this.
|
|
840
|
+
return this.shouldAlwaysFloat || this.isFocused || !!this.getValue() ||
|
|
841
|
+
this.isBadInput();
|
|
803
842
|
},
|
|
804
843
|
enumerable: false,
|
|
805
844
|
configurable: true
|
|
806
845
|
});
|
|
807
846
|
Object.defineProperty(MDCTextFieldFoundation.prototype, "shouldShake", {
|
|
808
847
|
get: function () {
|
|
809
|
-
return !this.
|
|
848
|
+
return !this.isFocused && !this.isValid() && !!this.getValue();
|
|
810
849
|
},
|
|
811
850
|
enumerable: false,
|
|
812
851
|
configurable: true
|
|
@@ -852,43 +891,83 @@ var MDCTextFieldFoundation = /** @class */ (function (_super) {
|
|
|
852
891
|
configurable: true
|
|
853
892
|
});
|
|
854
893
|
MDCTextFieldFoundation.prototype.init = function () {
|
|
855
|
-
var
|
|
856
|
-
if (this.adapter.hasLabel() && this.
|
|
894
|
+
var e_1, _a, e_2, _b;
|
|
895
|
+
if (this.adapter.hasLabel() && this.getNativeInput().required) {
|
|
857
896
|
this.adapter.setLabelRequired(true);
|
|
858
897
|
}
|
|
859
898
|
if (this.adapter.isFocused()) {
|
|
860
|
-
this.
|
|
899
|
+
this.inputFocusHandler();
|
|
861
900
|
}
|
|
862
901
|
else if (this.adapter.hasLabel() && this.shouldFloat) {
|
|
863
902
|
this.notchOutline(true);
|
|
864
903
|
this.adapter.floatLabel(true);
|
|
865
|
-
this.
|
|
904
|
+
this.styleFloating(true);
|
|
866
905
|
}
|
|
867
|
-
this.adapter.registerInputInteractionHandler('focus', this.
|
|
868
|
-
this.adapter.registerInputInteractionHandler('blur', this.
|
|
869
|
-
this.adapter.registerInputInteractionHandler('input', this.
|
|
870
|
-
|
|
871
|
-
|
|
872
|
-
|
|
873
|
-
|
|
874
|
-
|
|
875
|
-
}
|
|
876
|
-
|
|
877
|
-
|
|
878
|
-
|
|
906
|
+
this.adapter.registerInputInteractionHandler('focus', this.inputFocusHandler);
|
|
907
|
+
this.adapter.registerInputInteractionHandler('blur', this.inputBlurHandler);
|
|
908
|
+
this.adapter.registerInputInteractionHandler('input', this.inputInputHandler);
|
|
909
|
+
try {
|
|
910
|
+
for (var POINTERDOWN_EVENTS_1 = __values(POINTERDOWN_EVENTS), POINTERDOWN_EVENTS_1_1 = POINTERDOWN_EVENTS_1.next(); !POINTERDOWN_EVENTS_1_1.done; POINTERDOWN_EVENTS_1_1 = POINTERDOWN_EVENTS_1.next()) {
|
|
911
|
+
var evtType = POINTERDOWN_EVENTS_1_1.value;
|
|
912
|
+
this.adapter.registerInputInteractionHandler(evtType, this.setPointerXOffset);
|
|
913
|
+
}
|
|
914
|
+
}
|
|
915
|
+
catch (e_1_1) { e_1 = { error: e_1_1 }; }
|
|
916
|
+
finally {
|
|
917
|
+
try {
|
|
918
|
+
if (POINTERDOWN_EVENTS_1_1 && !POINTERDOWN_EVENTS_1_1.done && (_a = POINTERDOWN_EVENTS_1.return)) _a.call(POINTERDOWN_EVENTS_1);
|
|
919
|
+
}
|
|
920
|
+
finally { if (e_1) throw e_1.error; }
|
|
921
|
+
}
|
|
922
|
+
try {
|
|
923
|
+
for (var INTERACTION_EVENTS_1 = __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()) {
|
|
924
|
+
var evtType = INTERACTION_EVENTS_1_1.value;
|
|
925
|
+
this.adapter.registerTextFieldInteractionHandler(evtType, this.textFieldInteractionHandler);
|
|
926
|
+
}
|
|
927
|
+
}
|
|
928
|
+
catch (e_2_1) { e_2 = { error: e_2_1 }; }
|
|
929
|
+
finally {
|
|
930
|
+
try {
|
|
931
|
+
if (INTERACTION_EVENTS_1_1 && !INTERACTION_EVENTS_1_1.done && (_b = INTERACTION_EVENTS_1.return)) _b.call(INTERACTION_EVENTS_1);
|
|
932
|
+
}
|
|
933
|
+
finally { if (e_2) throw e_2.error; }
|
|
934
|
+
}
|
|
935
|
+
this.validationObserver =
|
|
936
|
+
this.adapter.registerValidationAttributeChangeHandler(this.validationAttributeChangeHandler);
|
|
937
|
+
this.setcharacterCounter(this.getValue().length);
|
|
879
938
|
};
|
|
880
939
|
MDCTextFieldFoundation.prototype.destroy = function () {
|
|
881
|
-
var
|
|
882
|
-
this.adapter.deregisterInputInteractionHandler('focus', this.
|
|
883
|
-
this.adapter.deregisterInputInteractionHandler('blur', this.
|
|
884
|
-
this.adapter.deregisterInputInteractionHandler('input', this.
|
|
885
|
-
|
|
886
|
-
|
|
887
|
-
|
|
888
|
-
|
|
889
|
-
|
|
890
|
-
}
|
|
891
|
-
|
|
940
|
+
var e_3, _a, e_4, _b;
|
|
941
|
+
this.adapter.deregisterInputInteractionHandler('focus', this.inputFocusHandler);
|
|
942
|
+
this.adapter.deregisterInputInteractionHandler('blur', this.inputBlurHandler);
|
|
943
|
+
this.adapter.deregisterInputInteractionHandler('input', this.inputInputHandler);
|
|
944
|
+
try {
|
|
945
|
+
for (var POINTERDOWN_EVENTS_2 = __values(POINTERDOWN_EVENTS), POINTERDOWN_EVENTS_2_1 = POINTERDOWN_EVENTS_2.next(); !POINTERDOWN_EVENTS_2_1.done; POINTERDOWN_EVENTS_2_1 = POINTERDOWN_EVENTS_2.next()) {
|
|
946
|
+
var evtType = POINTERDOWN_EVENTS_2_1.value;
|
|
947
|
+
this.adapter.deregisterInputInteractionHandler(evtType, this.setPointerXOffset);
|
|
948
|
+
}
|
|
949
|
+
}
|
|
950
|
+
catch (e_3_1) { e_3 = { error: e_3_1 }; }
|
|
951
|
+
finally {
|
|
952
|
+
try {
|
|
953
|
+
if (POINTERDOWN_EVENTS_2_1 && !POINTERDOWN_EVENTS_2_1.done && (_a = POINTERDOWN_EVENTS_2.return)) _a.call(POINTERDOWN_EVENTS_2);
|
|
954
|
+
}
|
|
955
|
+
finally { if (e_3) throw e_3.error; }
|
|
956
|
+
}
|
|
957
|
+
try {
|
|
958
|
+
for (var INTERACTION_EVENTS_2 = __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()) {
|
|
959
|
+
var evtType = INTERACTION_EVENTS_2_1.value;
|
|
960
|
+
this.adapter.deregisterTextFieldInteractionHandler(evtType, this.textFieldInteractionHandler);
|
|
961
|
+
}
|
|
962
|
+
}
|
|
963
|
+
catch (e_4_1) { e_4 = { error: e_4_1 }; }
|
|
964
|
+
finally {
|
|
965
|
+
try {
|
|
966
|
+
if (INTERACTION_EVENTS_2_1 && !INTERACTION_EVENTS_2_1.done && (_b = INTERACTION_EVENTS_2.return)) _b.call(INTERACTION_EVENTS_2);
|
|
967
|
+
}
|
|
968
|
+
finally { if (e_4) throw e_4.error; }
|
|
969
|
+
}
|
|
970
|
+
this.adapter.deregisterValidationAttributeChangeHandler(this.validationObserver);
|
|
892
971
|
};
|
|
893
972
|
/**
|
|
894
973
|
* Handles user interactions with the Text Field.
|
|
@@ -898,7 +977,7 @@ var MDCTextFieldFoundation = /** @class */ (function (_super) {
|
|
|
898
977
|
if (nativeInput && nativeInput.disabled) {
|
|
899
978
|
return;
|
|
900
979
|
}
|
|
901
|
-
this.
|
|
980
|
+
this.receivedUserInput = true;
|
|
902
981
|
};
|
|
903
982
|
/**
|
|
904
983
|
* Handles validation attribute changes
|
|
@@ -907,14 +986,14 @@ var MDCTextFieldFoundation = /** @class */ (function (_super) {
|
|
|
907
986
|
var _this = this;
|
|
908
987
|
attributesList.some(function (attributeName) {
|
|
909
988
|
if (VALIDATION_ATTR_WHITELIST.indexOf(attributeName) > -1) {
|
|
910
|
-
_this.
|
|
911
|
-
_this.adapter.setLabelRequired(_this.
|
|
989
|
+
_this.styleValidity(true);
|
|
990
|
+
_this.adapter.setLabelRequired(_this.getNativeInput().required);
|
|
912
991
|
return true;
|
|
913
992
|
}
|
|
914
993
|
return false;
|
|
915
994
|
});
|
|
916
995
|
if (attributesList.indexOf('maxlength') > -1) {
|
|
917
|
-
this.
|
|
996
|
+
this.setcharacterCounter(this.getValue().length);
|
|
918
997
|
}
|
|
919
998
|
};
|
|
920
999
|
/**
|
|
@@ -936,19 +1015,19 @@ var MDCTextFieldFoundation = /** @class */ (function (_super) {
|
|
|
936
1015
|
* Activates the text field focus state.
|
|
937
1016
|
*/
|
|
938
1017
|
MDCTextFieldFoundation.prototype.activateFocus = function () {
|
|
939
|
-
this.
|
|
940
|
-
this.
|
|
1018
|
+
this.isFocused = true;
|
|
1019
|
+
this.styleFocused(this.isFocused);
|
|
941
1020
|
this.adapter.activateLineRipple();
|
|
942
1021
|
if (this.adapter.hasLabel()) {
|
|
943
1022
|
this.notchOutline(this.shouldFloat);
|
|
944
1023
|
this.adapter.floatLabel(this.shouldFloat);
|
|
945
|
-
this.
|
|
1024
|
+
this.styleFloating(this.shouldFloat);
|
|
946
1025
|
this.adapter.shakeLabel(this.shouldShake);
|
|
947
1026
|
}
|
|
948
|
-
if (this.
|
|
949
|
-
(this.
|
|
950
|
-
!this.
|
|
951
|
-
this.
|
|
1027
|
+
if (this.helperText &&
|
|
1028
|
+
(this.helperText.isPersistent() || !this.helperText.isValidation() ||
|
|
1029
|
+
!this.valid)) {
|
|
1030
|
+
this.helperText.showToScreenReader();
|
|
952
1031
|
}
|
|
953
1032
|
};
|
|
954
1033
|
/**
|
|
@@ -970,14 +1049,14 @@ var MDCTextFieldFoundation = /** @class */ (function (_super) {
|
|
|
970
1049
|
*/
|
|
971
1050
|
MDCTextFieldFoundation.prototype.handleInput = function () {
|
|
972
1051
|
this.autoCompleteFocus();
|
|
973
|
-
this.
|
|
1052
|
+
this.setcharacterCounter(this.getValue().length);
|
|
974
1053
|
};
|
|
975
1054
|
/**
|
|
976
1055
|
* Activates the Text Field's focus state in cases when the input value
|
|
977
1056
|
* changes without user input (e.g. programmatically).
|
|
978
1057
|
*/
|
|
979
1058
|
MDCTextFieldFoundation.prototype.autoCompleteFocus = function () {
|
|
980
|
-
if (!this.
|
|
1059
|
+
if (!this.receivedUserInput) {
|
|
981
1060
|
this.activateFocus();
|
|
982
1061
|
}
|
|
983
1062
|
};
|
|
@@ -985,23 +1064,23 @@ var MDCTextFieldFoundation = /** @class */ (function (_super) {
|
|
|
985
1064
|
* Deactivates the Text Field's focus state.
|
|
986
1065
|
*/
|
|
987
1066
|
MDCTextFieldFoundation.prototype.deactivateFocus = function () {
|
|
988
|
-
this.
|
|
1067
|
+
this.isFocused = false;
|
|
989
1068
|
this.adapter.deactivateLineRipple();
|
|
990
1069
|
var isValid = this.isValid();
|
|
991
|
-
this.
|
|
992
|
-
this.
|
|
1070
|
+
this.styleValidity(isValid);
|
|
1071
|
+
this.styleFocused(this.isFocused);
|
|
993
1072
|
if (this.adapter.hasLabel()) {
|
|
994
1073
|
this.notchOutline(this.shouldFloat);
|
|
995
1074
|
this.adapter.floatLabel(this.shouldFloat);
|
|
996
|
-
this.
|
|
1075
|
+
this.styleFloating(this.shouldFloat);
|
|
997
1076
|
this.adapter.shakeLabel(this.shouldShake);
|
|
998
1077
|
}
|
|
999
1078
|
if (!this.shouldFloat) {
|
|
1000
|
-
this.
|
|
1079
|
+
this.receivedUserInput = false;
|
|
1001
1080
|
}
|
|
1002
1081
|
};
|
|
1003
1082
|
MDCTextFieldFoundation.prototype.getValue = function () {
|
|
1004
|
-
return this.
|
|
1083
|
+
return this.getNativeInput().value;
|
|
1005
1084
|
};
|
|
1006
1085
|
/**
|
|
1007
1086
|
* @param value The value to set on the input Element.
|
|
@@ -1010,18 +1089,18 @@ var MDCTextFieldFoundation = /** @class */ (function (_super) {
|
|
|
1010
1089
|
// Prevent Safari from moving the caret to the end of the input when the
|
|
1011
1090
|
// value has not changed.
|
|
1012
1091
|
if (this.getValue() !== value) {
|
|
1013
|
-
this.
|
|
1092
|
+
this.getNativeInput().value = value;
|
|
1014
1093
|
}
|
|
1015
|
-
this.
|
|
1016
|
-
if (this.
|
|
1094
|
+
this.setcharacterCounter(value.length);
|
|
1095
|
+
if (this.validateOnValueChange) {
|
|
1017
1096
|
var isValid = this.isValid();
|
|
1018
|
-
this.
|
|
1097
|
+
this.styleValidity(isValid);
|
|
1019
1098
|
}
|
|
1020
1099
|
if (this.adapter.hasLabel()) {
|
|
1021
1100
|
this.notchOutline(this.shouldFloat);
|
|
1022
1101
|
this.adapter.floatLabel(this.shouldFloat);
|
|
1023
|
-
this.
|
|
1024
|
-
if (this.
|
|
1102
|
+
this.styleFloating(this.shouldFloat);
|
|
1103
|
+
if (this.validateOnValueChange) {
|
|
1025
1104
|
this.adapter.shakeLabel(this.shouldShake);
|
|
1026
1105
|
}
|
|
1027
1106
|
}
|
|
@@ -1031,16 +1110,15 @@ var MDCTextFieldFoundation = /** @class */ (function (_super) {
|
|
|
1031
1110
|
* native validity check.
|
|
1032
1111
|
*/
|
|
1033
1112
|
MDCTextFieldFoundation.prototype.isValid = function () {
|
|
1034
|
-
return this.
|
|
1035
|
-
this.isValid_;
|
|
1113
|
+
return this.useNativeValidation ? this.isNativeInputValid() : this.valid;
|
|
1036
1114
|
};
|
|
1037
1115
|
/**
|
|
1038
1116
|
* @param isValid Sets the custom validity state of the Text Field.
|
|
1039
1117
|
*/
|
|
1040
1118
|
MDCTextFieldFoundation.prototype.setValid = function (isValid) {
|
|
1041
|
-
this.
|
|
1042
|
-
this.
|
|
1043
|
-
var shouldShake = !isValid && !this.
|
|
1119
|
+
this.valid = isValid;
|
|
1120
|
+
this.styleValidity(isValid);
|
|
1121
|
+
var shouldShake = !isValid && !this.isFocused && !!this.getValue();
|
|
1044
1122
|
if (this.adapter.hasLabel()) {
|
|
1045
1123
|
this.adapter.shakeLabel(shouldShake);
|
|
1046
1124
|
}
|
|
@@ -1050,14 +1128,14 @@ var MDCTextFieldFoundation = /** @class */ (function (_super) {
|
|
|
1050
1128
|
* value change.
|
|
1051
1129
|
*/
|
|
1052
1130
|
MDCTextFieldFoundation.prototype.setValidateOnValueChange = function (shouldValidate) {
|
|
1053
|
-
this.
|
|
1131
|
+
this.validateOnValueChange = shouldValidate;
|
|
1054
1132
|
};
|
|
1055
1133
|
/**
|
|
1056
1134
|
* @return Whether or not validity should be updated on value change. `true`
|
|
1057
1135
|
* by default.
|
|
1058
1136
|
*/
|
|
1059
1137
|
MDCTextFieldFoundation.prototype.getValidateOnValueChange = function () {
|
|
1060
|
-
return this.
|
|
1138
|
+
return this.validateOnValueChange;
|
|
1061
1139
|
};
|
|
1062
1140
|
/**
|
|
1063
1141
|
* Enables or disables the use of native validation. Use this for custom
|
|
@@ -1066,90 +1144,90 @@ var MDCTextFieldFoundation = /** @class */ (function (_super) {
|
|
|
1066
1144
|
* validation.
|
|
1067
1145
|
*/
|
|
1068
1146
|
MDCTextFieldFoundation.prototype.setUseNativeValidation = function (useNativeValidation) {
|
|
1069
|
-
this.
|
|
1147
|
+
this.useNativeValidation = useNativeValidation;
|
|
1070
1148
|
};
|
|
1071
1149
|
MDCTextFieldFoundation.prototype.isDisabled = function () {
|
|
1072
|
-
return this.
|
|
1150
|
+
return this.getNativeInput().disabled;
|
|
1073
1151
|
};
|
|
1074
1152
|
/**
|
|
1075
1153
|
* @param disabled Sets the text-field disabled or enabled.
|
|
1076
1154
|
*/
|
|
1077
1155
|
MDCTextFieldFoundation.prototype.setDisabled = function (disabled) {
|
|
1078
|
-
this.
|
|
1079
|
-
this.
|
|
1156
|
+
this.getNativeInput().disabled = disabled;
|
|
1157
|
+
this.styleDisabled(disabled);
|
|
1080
1158
|
};
|
|
1081
1159
|
/**
|
|
1082
1160
|
* @param content Sets the content of the helper text.
|
|
1083
1161
|
*/
|
|
1084
1162
|
MDCTextFieldFoundation.prototype.setHelperTextContent = function (content) {
|
|
1085
|
-
if (this.
|
|
1086
|
-
this.
|
|
1163
|
+
if (this.helperText) {
|
|
1164
|
+
this.helperText.setContent(content);
|
|
1087
1165
|
}
|
|
1088
1166
|
};
|
|
1089
1167
|
/**
|
|
1090
1168
|
* Sets the aria label of the leading icon.
|
|
1091
1169
|
*/
|
|
1092
1170
|
MDCTextFieldFoundation.prototype.setLeadingIconAriaLabel = function (label) {
|
|
1093
|
-
if (this.
|
|
1094
|
-
this.
|
|
1171
|
+
if (this.leadingIcon) {
|
|
1172
|
+
this.leadingIcon.setAriaLabel(label);
|
|
1095
1173
|
}
|
|
1096
1174
|
};
|
|
1097
1175
|
/**
|
|
1098
1176
|
* Sets the text content of the leading icon.
|
|
1099
1177
|
*/
|
|
1100
1178
|
MDCTextFieldFoundation.prototype.setLeadingIconContent = function (content) {
|
|
1101
|
-
if (this.
|
|
1102
|
-
this.
|
|
1179
|
+
if (this.leadingIcon) {
|
|
1180
|
+
this.leadingIcon.setContent(content);
|
|
1103
1181
|
}
|
|
1104
1182
|
};
|
|
1105
1183
|
/**
|
|
1106
1184
|
* Sets the aria label of the trailing icon.
|
|
1107
1185
|
*/
|
|
1108
1186
|
MDCTextFieldFoundation.prototype.setTrailingIconAriaLabel = function (label) {
|
|
1109
|
-
if (this.
|
|
1110
|
-
this.
|
|
1187
|
+
if (this.trailingIcon) {
|
|
1188
|
+
this.trailingIcon.setAriaLabel(label);
|
|
1111
1189
|
}
|
|
1112
1190
|
};
|
|
1113
1191
|
/**
|
|
1114
1192
|
* Sets the text content of the trailing icon.
|
|
1115
1193
|
*/
|
|
1116
1194
|
MDCTextFieldFoundation.prototype.setTrailingIconContent = function (content) {
|
|
1117
|
-
if (this.
|
|
1118
|
-
this.
|
|
1195
|
+
if (this.trailingIcon) {
|
|
1196
|
+
this.trailingIcon.setContent(content);
|
|
1119
1197
|
}
|
|
1120
1198
|
};
|
|
1121
1199
|
/**
|
|
1122
1200
|
* Sets character counter values that shows characters used and the total
|
|
1123
1201
|
* character limit.
|
|
1124
1202
|
*/
|
|
1125
|
-
MDCTextFieldFoundation.prototype.
|
|
1126
|
-
if (!this.
|
|
1203
|
+
MDCTextFieldFoundation.prototype.setcharacterCounter = function (currentLength) {
|
|
1204
|
+
if (!this.characterCounter) {
|
|
1127
1205
|
return;
|
|
1128
1206
|
}
|
|
1129
|
-
var maxLength = this.
|
|
1207
|
+
var maxLength = this.getNativeInput().maxLength;
|
|
1130
1208
|
if (maxLength === -1) {
|
|
1131
1209
|
throw new Error('MDCTextFieldFoundation: Expected maxlength html property on text input or textarea.');
|
|
1132
1210
|
}
|
|
1133
|
-
this.
|
|
1211
|
+
this.characterCounter.setCounterValue(currentLength, maxLength);
|
|
1134
1212
|
};
|
|
1135
1213
|
/**
|
|
1136
1214
|
* @return True if the Text Field input fails in converting the user-supplied
|
|
1137
1215
|
* value.
|
|
1138
1216
|
*/
|
|
1139
|
-
MDCTextFieldFoundation.prototype.
|
|
1217
|
+
MDCTextFieldFoundation.prototype.isBadInput = function () {
|
|
1140
1218
|
// The badInput property is not supported in IE 11 💩.
|
|
1141
|
-
return this.
|
|
1219
|
+
return this.getNativeInput().validity.badInput || false;
|
|
1142
1220
|
};
|
|
1143
1221
|
/**
|
|
1144
1222
|
* @return The result of native validity checking (ValidityState.valid).
|
|
1145
1223
|
*/
|
|
1146
|
-
MDCTextFieldFoundation.prototype.
|
|
1147
|
-
return this.
|
|
1224
|
+
MDCTextFieldFoundation.prototype.isNativeInputValid = function () {
|
|
1225
|
+
return this.getNativeInput().validity.valid;
|
|
1148
1226
|
};
|
|
1149
1227
|
/**
|
|
1150
1228
|
* Styles the component based on the validity state.
|
|
1151
1229
|
*/
|
|
1152
|
-
MDCTextFieldFoundation.prototype.
|
|
1230
|
+
MDCTextFieldFoundation.prototype.styleValidity = function (isValid) {
|
|
1153
1231
|
var INVALID = MDCTextFieldFoundation.cssClasses.INVALID;
|
|
1154
1232
|
if (isValid) {
|
|
1155
1233
|
this.adapter.removeClass(INVALID);
|
|
@@ -1157,16 +1235,16 @@ var MDCTextFieldFoundation = /** @class */ (function (_super) {
|
|
|
1157
1235
|
else {
|
|
1158
1236
|
this.adapter.addClass(INVALID);
|
|
1159
1237
|
}
|
|
1160
|
-
if (this.
|
|
1161
|
-
this.
|
|
1238
|
+
if (this.helperText) {
|
|
1239
|
+
this.helperText.setValidity(isValid);
|
|
1162
1240
|
// We dynamically set or unset aria-describedby for validation helper text
|
|
1163
1241
|
// only, based on whether the field is valid
|
|
1164
|
-
var helperTextValidation = this.
|
|
1242
|
+
var helperTextValidation = this.helperText.isValidation();
|
|
1165
1243
|
if (!helperTextValidation) {
|
|
1166
1244
|
return;
|
|
1167
1245
|
}
|
|
1168
|
-
var helperTextVisible = this.
|
|
1169
|
-
var helperTextId = this.
|
|
1246
|
+
var helperTextVisible = this.helperText.isVisible();
|
|
1247
|
+
var helperTextId = this.helperText.getId();
|
|
1170
1248
|
if (helperTextVisible && helperTextId) {
|
|
1171
1249
|
this.adapter.setInputAttr(strings$2.ARIA_DESCRIBEDBY, helperTextId);
|
|
1172
1250
|
}
|
|
@@ -1178,7 +1256,7 @@ var MDCTextFieldFoundation = /** @class */ (function (_super) {
|
|
|
1178
1256
|
/**
|
|
1179
1257
|
* Styles the component based on the focused state.
|
|
1180
1258
|
*/
|
|
1181
|
-
MDCTextFieldFoundation.prototype.
|
|
1259
|
+
MDCTextFieldFoundation.prototype.styleFocused = function (isFocused) {
|
|
1182
1260
|
var FOCUSED = MDCTextFieldFoundation.cssClasses.FOCUSED;
|
|
1183
1261
|
if (isFocused) {
|
|
1184
1262
|
this.adapter.addClass(FOCUSED);
|
|
@@ -1190,7 +1268,7 @@ var MDCTextFieldFoundation = /** @class */ (function (_super) {
|
|
|
1190
1268
|
/**
|
|
1191
1269
|
* Styles the component based on the disabled state.
|
|
1192
1270
|
*/
|
|
1193
|
-
MDCTextFieldFoundation.prototype.
|
|
1271
|
+
MDCTextFieldFoundation.prototype.styleDisabled = function (isDisabled) {
|
|
1194
1272
|
var _a = MDCTextFieldFoundation.cssClasses, DISABLED = _a.DISABLED, INVALID = _a.INVALID;
|
|
1195
1273
|
if (isDisabled) {
|
|
1196
1274
|
this.adapter.addClass(DISABLED);
|
|
@@ -1199,17 +1277,17 @@ var MDCTextFieldFoundation = /** @class */ (function (_super) {
|
|
|
1199
1277
|
else {
|
|
1200
1278
|
this.adapter.removeClass(DISABLED);
|
|
1201
1279
|
}
|
|
1202
|
-
if (this.
|
|
1203
|
-
this.
|
|
1280
|
+
if (this.leadingIcon) {
|
|
1281
|
+
this.leadingIcon.setDisabled(isDisabled);
|
|
1204
1282
|
}
|
|
1205
|
-
if (this.
|
|
1206
|
-
this.
|
|
1283
|
+
if (this.trailingIcon) {
|
|
1284
|
+
this.trailingIcon.setDisabled(isDisabled);
|
|
1207
1285
|
}
|
|
1208
1286
|
};
|
|
1209
1287
|
/**
|
|
1210
1288
|
* Styles the component based on the label floating state.
|
|
1211
1289
|
*/
|
|
1212
|
-
MDCTextFieldFoundation.prototype.
|
|
1290
|
+
MDCTextFieldFoundation.prototype.styleFloating = function (isFloating) {
|
|
1213
1291
|
var LABEL_FLOATING = MDCTextFieldFoundation.cssClasses.LABEL_FLOATING;
|
|
1214
1292
|
if (isFloating) {
|
|
1215
1293
|
this.adapter.addClass(LABEL_FLOATING);
|
|
@@ -1222,7 +1300,7 @@ var MDCTextFieldFoundation = /** @class */ (function (_super) {
|
|
|
1222
1300
|
* @return The native text input element from the host environment, or an
|
|
1223
1301
|
* object with the same shape for unit tests.
|
|
1224
1302
|
*/
|
|
1225
|
-
MDCTextFieldFoundation.prototype.
|
|
1303
|
+
MDCTextFieldFoundation.prototype.getNativeInput = function () {
|
|
1226
1304
|
// this.adapter may be undefined in foundation unit tests. This happens when
|
|
1227
1305
|
// testdouble is creating a mock object and invokes the
|
|
1228
1306
|
// shouldShake/shouldFloat getters (which in turn call getValue(), which
|
|
@@ -1396,21 +1474,35 @@ var MDCTextFieldHelperTextFoundation = /** @class */ (function (_super) {
|
|
|
1396
1474
|
var validationMsgNeedsDisplay = helperTextIsValidationMsg && !inputIsValid;
|
|
1397
1475
|
if (validationMsgNeedsDisplay) {
|
|
1398
1476
|
this.showToScreenReader();
|
|
1399
|
-
|
|
1477
|
+
// If role is already alert, refresh it to trigger another announcement
|
|
1478
|
+
// from screenreader.
|
|
1479
|
+
if (this.adapter.getAttr(strings$1.ROLE) === 'alert') {
|
|
1480
|
+
this.refreshAlertRole();
|
|
1481
|
+
}
|
|
1482
|
+
else {
|
|
1483
|
+
this.adapter.setAttr(strings$1.ROLE, 'alert');
|
|
1484
|
+
}
|
|
1400
1485
|
}
|
|
1401
1486
|
else {
|
|
1402
1487
|
this.adapter.removeAttr(strings$1.ROLE);
|
|
1403
1488
|
}
|
|
1404
1489
|
if (!helperTextIsPersistent && !validationMsgNeedsDisplay) {
|
|
1405
|
-
this.
|
|
1490
|
+
this.hide();
|
|
1406
1491
|
}
|
|
1407
1492
|
};
|
|
1408
1493
|
/**
|
|
1409
1494
|
* Hides the help text from screen readers.
|
|
1410
1495
|
*/
|
|
1411
|
-
MDCTextFieldHelperTextFoundation.prototype.
|
|
1496
|
+
MDCTextFieldHelperTextFoundation.prototype.hide = function () {
|
|
1412
1497
|
this.adapter.setAttr(strings$1.ARIA_HIDDEN, 'true');
|
|
1413
1498
|
};
|
|
1499
|
+
MDCTextFieldHelperTextFoundation.prototype.refreshAlertRole = function () {
|
|
1500
|
+
var _this = this;
|
|
1501
|
+
this.adapter.removeAttr(strings$1.ROLE);
|
|
1502
|
+
requestAnimationFrame(function () {
|
|
1503
|
+
_this.adapter.setAttr(strings$1.ROLE, 'alert');
|
|
1504
|
+
});
|
|
1505
|
+
};
|
|
1414
1506
|
return MDCTextFieldHelperTextFoundation;
|
|
1415
1507
|
}(MDCFoundation));
|
|
1416
1508
|
|
|
@@ -1531,8 +1623,10 @@ var MDCTextFieldIconFoundation = /** @class */ (function (_super) {
|
|
|
1531
1623
|
__extends$2(MDCTextFieldIconFoundation, _super);
|
|
1532
1624
|
function MDCTextFieldIconFoundation(adapter) {
|
|
1533
1625
|
var _this = _super.call(this, __assign$2(__assign$2({}, MDCTextFieldIconFoundation.defaultAdapter), adapter)) || this;
|
|
1534
|
-
_this.
|
|
1535
|
-
_this.
|
|
1626
|
+
_this.savedTabIndex = null;
|
|
1627
|
+
_this.interactionHandler = function (evt) {
|
|
1628
|
+
_this.handleInteraction(evt);
|
|
1629
|
+
};
|
|
1536
1630
|
return _this;
|
|
1537
1631
|
}
|
|
1538
1632
|
Object.defineProperty(MDCTextFieldIconFoundation, "strings", {
|
|
@@ -1570,20 +1664,40 @@ var MDCTextFieldIconFoundation = /** @class */ (function (_super) {
|
|
|
1570
1664
|
configurable: true
|
|
1571
1665
|
});
|
|
1572
1666
|
MDCTextFieldIconFoundation.prototype.init = function () {
|
|
1573
|
-
var
|
|
1574
|
-
this.
|
|
1575
|
-
|
|
1576
|
-
|
|
1577
|
-
|
|
1667
|
+
var e_1, _a;
|
|
1668
|
+
this.savedTabIndex = this.adapter.getAttr('tabindex');
|
|
1669
|
+
try {
|
|
1670
|
+
for (var INTERACTION_EVENTS_1 = __values(INTERACTION_EVENTS), INTERACTION_EVENTS_1_1 = INTERACTION_EVENTS_1.next(); !INTERACTION_EVENTS_1_1.done; INTERACTION_EVENTS_1_1 = INTERACTION_EVENTS_1.next()) {
|
|
1671
|
+
var evtType = INTERACTION_EVENTS_1_1.value;
|
|
1672
|
+
this.adapter.registerInteractionHandler(evtType, this.interactionHandler);
|
|
1673
|
+
}
|
|
1674
|
+
}
|
|
1675
|
+
catch (e_1_1) { e_1 = { error: e_1_1 }; }
|
|
1676
|
+
finally {
|
|
1677
|
+
try {
|
|
1678
|
+
if (INTERACTION_EVENTS_1_1 && !INTERACTION_EVENTS_1_1.done && (_a = INTERACTION_EVENTS_1.return)) _a.call(INTERACTION_EVENTS_1);
|
|
1679
|
+
}
|
|
1680
|
+
finally { if (e_1) throw e_1.error; }
|
|
1681
|
+
}
|
|
1578
1682
|
};
|
|
1579
1683
|
MDCTextFieldIconFoundation.prototype.destroy = function () {
|
|
1580
|
-
var
|
|
1581
|
-
|
|
1582
|
-
|
|
1583
|
-
|
|
1684
|
+
var e_2, _a;
|
|
1685
|
+
try {
|
|
1686
|
+
for (var INTERACTION_EVENTS_2 = __values(INTERACTION_EVENTS), INTERACTION_EVENTS_2_1 = INTERACTION_EVENTS_2.next(); !INTERACTION_EVENTS_2_1.done; INTERACTION_EVENTS_2_1 = INTERACTION_EVENTS_2.next()) {
|
|
1687
|
+
var evtType = INTERACTION_EVENTS_2_1.value;
|
|
1688
|
+
this.adapter.deregisterInteractionHandler(evtType, this.interactionHandler);
|
|
1689
|
+
}
|
|
1690
|
+
}
|
|
1691
|
+
catch (e_2_1) { e_2 = { error: e_2_1 }; }
|
|
1692
|
+
finally {
|
|
1693
|
+
try {
|
|
1694
|
+
if (INTERACTION_EVENTS_2_1 && !INTERACTION_EVENTS_2_1.done && (_a = INTERACTION_EVENTS_2.return)) _a.call(INTERACTION_EVENTS_2);
|
|
1695
|
+
}
|
|
1696
|
+
finally { if (e_2) throw e_2.error; }
|
|
1697
|
+
}
|
|
1584
1698
|
};
|
|
1585
1699
|
MDCTextFieldIconFoundation.prototype.setDisabled = function (disabled) {
|
|
1586
|
-
if (!this.
|
|
1700
|
+
if (!this.savedTabIndex) {
|
|
1587
1701
|
return;
|
|
1588
1702
|
}
|
|
1589
1703
|
if (disabled) {
|
|
@@ -1591,7 +1705,7 @@ var MDCTextFieldIconFoundation = /** @class */ (function (_super) {
|
|
|
1591
1705
|
this.adapter.removeAttr('role');
|
|
1592
1706
|
}
|
|
1593
1707
|
else {
|
|
1594
|
-
this.adapter.setAttr('tabindex', this.
|
|
1708
|
+
this.adapter.setAttr('tabindex', this.savedTabIndex);
|
|
1595
1709
|
this.adapter.setAttr('role', strings.ICON_ROLE);
|
|
1596
1710
|
}
|
|
1597
1711
|
};
|
|
@@ -1705,24 +1819,30 @@ var MDCTextField = /** @class */ (function (_super) {
|
|
|
1705
1819
|
MDCTextField.prototype.initialize = function (rippleFactory, lineRippleFactory, helperTextFactory, characterCounterFactory, iconFactory, labelFactory, outlineFactory) {
|
|
1706
1820
|
if (rippleFactory === void 0) { rippleFactory = function (el, foundation) { return new MDCRipple(el, foundation); }; }
|
|
1707
1821
|
if (lineRippleFactory === void 0) { lineRippleFactory = function (el) { return new MDCLineRipple(el); }; }
|
|
1708
|
-
if (helperTextFactory === void 0) { helperTextFactory = function (el) {
|
|
1709
|
-
|
|
1822
|
+
if (helperTextFactory === void 0) { helperTextFactory = function (el) {
|
|
1823
|
+
return new MDCTextFieldHelperText(el);
|
|
1824
|
+
}; }
|
|
1825
|
+
if (characterCounterFactory === void 0) { characterCounterFactory = function (el) {
|
|
1826
|
+
return new MDCTextFieldCharacterCounter(el);
|
|
1827
|
+
}; }
|
|
1710
1828
|
if (iconFactory === void 0) { iconFactory = function (el) { return new MDCTextFieldIcon(el); }; }
|
|
1711
1829
|
if (labelFactory === void 0) { labelFactory = function (el) { return new MDCFloatingLabel(el); }; }
|
|
1712
1830
|
if (outlineFactory === void 0) { outlineFactory = function (el) { return new MDCNotchedOutline(el); }; }
|
|
1713
|
-
this.
|
|
1831
|
+
this.input =
|
|
1832
|
+
this.root.querySelector(strings$2.INPUT_SELECTOR);
|
|
1714
1833
|
var labelElement = this.root.querySelector(strings$2.LABEL_SELECTOR);
|
|
1715
|
-
this.
|
|
1834
|
+
this.label = labelElement ? labelFactory(labelElement) : null;
|
|
1716
1835
|
var lineRippleElement = this.root.querySelector(strings$2.LINE_RIPPLE_SELECTOR);
|
|
1717
|
-
this.
|
|
1836
|
+
this.lineRipple =
|
|
1837
|
+
lineRippleElement ? lineRippleFactory(lineRippleElement) : null;
|
|
1718
1838
|
var outlineElement = this.root.querySelector(strings$2.OUTLINE_SELECTOR);
|
|
1719
|
-
this.
|
|
1839
|
+
this.outline = outlineElement ? outlineFactory(outlineElement) : null;
|
|
1720
1840
|
// Helper text
|
|
1721
1841
|
var helperTextStrings = MDCTextFieldHelperTextFoundation.strings;
|
|
1722
1842
|
var nextElementSibling = this.root.nextElementSibling;
|
|
1723
1843
|
var hasHelperLine = (nextElementSibling && nextElementSibling.classList.contains(cssClasses$2.HELPER_LINE));
|
|
1724
1844
|
var helperTextEl = hasHelperLine && nextElementSibling && nextElementSibling.querySelector(helperTextStrings.ROOT_SELECTOR);
|
|
1725
|
-
this.
|
|
1845
|
+
this.helperText = helperTextEl ? helperTextFactory(helperTextEl) : null;
|
|
1726
1846
|
// Character counter
|
|
1727
1847
|
var characterCounterStrings = MDCTextFieldCharacterCounterFoundation.strings;
|
|
1728
1848
|
var characterCounterEl = this.root.querySelector(characterCounterStrings.ROOT_SELECTOR);
|
|
@@ -1730,42 +1850,43 @@ var MDCTextField = /** @class */ (function (_super) {
|
|
|
1730
1850
|
if (!characterCounterEl && hasHelperLine && nextElementSibling) {
|
|
1731
1851
|
characterCounterEl = nextElementSibling.querySelector(characterCounterStrings.ROOT_SELECTOR);
|
|
1732
1852
|
}
|
|
1733
|
-
this.
|
|
1853
|
+
this.characterCounter =
|
|
1854
|
+
characterCounterEl ? characterCounterFactory(characterCounterEl) : null;
|
|
1734
1855
|
// Leading icon
|
|
1735
1856
|
var leadingIconEl = this.root.querySelector(strings$2.LEADING_ICON_SELECTOR);
|
|
1736
|
-
this.
|
|
1857
|
+
this.leadingIcon = leadingIconEl ? iconFactory(leadingIconEl) : null;
|
|
1737
1858
|
// Trailing icon
|
|
1738
1859
|
var trailingIconEl = this.root.querySelector(strings$2.TRAILING_ICON_SELECTOR);
|
|
1739
|
-
this.
|
|
1860
|
+
this.trailingIcon = trailingIconEl ? iconFactory(trailingIconEl) : null;
|
|
1740
1861
|
// Prefix and Suffix
|
|
1741
|
-
this.
|
|
1742
|
-
this.
|
|
1743
|
-
this.ripple = this.
|
|
1862
|
+
this.prefix = this.root.querySelector(strings$2.PREFIX_SELECTOR);
|
|
1863
|
+
this.suffix = this.root.querySelector(strings$2.SUFFIX_SELECTOR);
|
|
1864
|
+
this.ripple = this.createRipple(rippleFactory);
|
|
1744
1865
|
};
|
|
1745
1866
|
MDCTextField.prototype.destroy = function () {
|
|
1746
1867
|
if (this.ripple) {
|
|
1747
1868
|
this.ripple.destroy();
|
|
1748
1869
|
}
|
|
1749
|
-
if (this.
|
|
1750
|
-
this.
|
|
1870
|
+
if (this.lineRipple) {
|
|
1871
|
+
this.lineRipple.destroy();
|
|
1751
1872
|
}
|
|
1752
|
-
if (this.
|
|
1753
|
-
this.
|
|
1873
|
+
if (this.helperText) {
|
|
1874
|
+
this.helperText.destroy();
|
|
1754
1875
|
}
|
|
1755
|
-
if (this.
|
|
1756
|
-
this.
|
|
1876
|
+
if (this.characterCounter) {
|
|
1877
|
+
this.characterCounter.destroy();
|
|
1757
1878
|
}
|
|
1758
|
-
if (this.
|
|
1759
|
-
this.
|
|
1879
|
+
if (this.leadingIcon) {
|
|
1880
|
+
this.leadingIcon.destroy();
|
|
1760
1881
|
}
|
|
1761
|
-
if (this.
|
|
1762
|
-
this.
|
|
1882
|
+
if (this.trailingIcon) {
|
|
1883
|
+
this.trailingIcon.destroy();
|
|
1763
1884
|
}
|
|
1764
|
-
if (this.
|
|
1765
|
-
this.
|
|
1885
|
+
if (this.label) {
|
|
1886
|
+
this.label.destroy();
|
|
1766
1887
|
}
|
|
1767
|
-
if (this.
|
|
1768
|
-
this.
|
|
1888
|
+
if (this.outline) {
|
|
1889
|
+
this.outline.destroy();
|
|
1769
1890
|
}
|
|
1770
1891
|
_super.prototype.destroy.call(this);
|
|
1771
1892
|
};
|
|
@@ -1774,7 +1895,7 @@ var MDCTextField = /** @class */ (function (_super) {
|
|
|
1774
1895
|
* state.
|
|
1775
1896
|
*/
|
|
1776
1897
|
MDCTextField.prototype.initialSyncWithDOM = function () {
|
|
1777
|
-
this.disabled = this.
|
|
1898
|
+
this.disabled = this.input.disabled;
|
|
1778
1899
|
};
|
|
1779
1900
|
Object.defineProperty(MDCTextField.prototype, "value", {
|
|
1780
1901
|
get: function () {
|
|
@@ -1817,46 +1938,46 @@ var MDCTextField = /** @class */ (function (_super) {
|
|
|
1817
1938
|
});
|
|
1818
1939
|
Object.defineProperty(MDCTextField.prototype, "required", {
|
|
1819
1940
|
get: function () {
|
|
1820
|
-
return this.
|
|
1941
|
+
return this.input.required;
|
|
1821
1942
|
},
|
|
1822
1943
|
/**
|
|
1823
1944
|
* @param required Sets the Text Field to required.
|
|
1824
1945
|
*/
|
|
1825
1946
|
set: function (required) {
|
|
1826
|
-
this.
|
|
1947
|
+
this.input.required = required;
|
|
1827
1948
|
},
|
|
1828
1949
|
enumerable: false,
|
|
1829
1950
|
configurable: true
|
|
1830
1951
|
});
|
|
1831
1952
|
Object.defineProperty(MDCTextField.prototype, "pattern", {
|
|
1832
1953
|
get: function () {
|
|
1833
|
-
return this.
|
|
1954
|
+
return this.input.pattern;
|
|
1834
1955
|
},
|
|
1835
1956
|
/**
|
|
1836
1957
|
* @param pattern Sets the input element's validation pattern.
|
|
1837
1958
|
*/
|
|
1838
1959
|
set: function (pattern) {
|
|
1839
|
-
this.
|
|
1960
|
+
this.input.pattern = pattern;
|
|
1840
1961
|
},
|
|
1841
1962
|
enumerable: false,
|
|
1842
1963
|
configurable: true
|
|
1843
1964
|
});
|
|
1844
1965
|
Object.defineProperty(MDCTextField.prototype, "minLength", {
|
|
1845
1966
|
get: function () {
|
|
1846
|
-
return this.
|
|
1967
|
+
return this.input.minLength;
|
|
1847
1968
|
},
|
|
1848
1969
|
/**
|
|
1849
1970
|
* @param minLength Sets the input element's minLength.
|
|
1850
1971
|
*/
|
|
1851
1972
|
set: function (minLength) {
|
|
1852
|
-
this.
|
|
1973
|
+
this.input.minLength = minLength;
|
|
1853
1974
|
},
|
|
1854
1975
|
enumerable: false,
|
|
1855
1976
|
configurable: true
|
|
1856
1977
|
});
|
|
1857
1978
|
Object.defineProperty(MDCTextField.prototype, "maxLength", {
|
|
1858
1979
|
get: function () {
|
|
1859
|
-
return this.
|
|
1980
|
+
return this.input.maxLength;
|
|
1860
1981
|
},
|
|
1861
1982
|
/**
|
|
1862
1983
|
* @param maxLength Sets the input element's maxLength.
|
|
@@ -1864,10 +1985,10 @@ var MDCTextField = /** @class */ (function (_super) {
|
|
|
1864
1985
|
set: function (maxLength) {
|
|
1865
1986
|
// Chrome throws exception if maxLength is set to a value less than zero
|
|
1866
1987
|
if (maxLength < 0) {
|
|
1867
|
-
this.
|
|
1988
|
+
this.input.removeAttribute('maxLength');
|
|
1868
1989
|
}
|
|
1869
1990
|
else {
|
|
1870
|
-
this.
|
|
1991
|
+
this.input.maxLength = maxLength;
|
|
1871
1992
|
}
|
|
1872
1993
|
},
|
|
1873
1994
|
enumerable: false,
|
|
@@ -1875,39 +1996,39 @@ var MDCTextField = /** @class */ (function (_super) {
|
|
|
1875
1996
|
});
|
|
1876
1997
|
Object.defineProperty(MDCTextField.prototype, "min", {
|
|
1877
1998
|
get: function () {
|
|
1878
|
-
return this.
|
|
1999
|
+
return this.input.min;
|
|
1879
2000
|
},
|
|
1880
2001
|
/**
|
|
1881
2002
|
* @param min Sets the input element's min.
|
|
1882
2003
|
*/
|
|
1883
2004
|
set: function (min) {
|
|
1884
|
-
this.
|
|
2005
|
+
this.input.min = min;
|
|
1885
2006
|
},
|
|
1886
2007
|
enumerable: false,
|
|
1887
2008
|
configurable: true
|
|
1888
2009
|
});
|
|
1889
2010
|
Object.defineProperty(MDCTextField.prototype, "max", {
|
|
1890
2011
|
get: function () {
|
|
1891
|
-
return this.
|
|
2012
|
+
return this.input.max;
|
|
1892
2013
|
},
|
|
1893
2014
|
/**
|
|
1894
2015
|
* @param max Sets the input element's max.
|
|
1895
2016
|
*/
|
|
1896
2017
|
set: function (max) {
|
|
1897
|
-
this.
|
|
2018
|
+
this.input.max = max;
|
|
1898
2019
|
},
|
|
1899
2020
|
enumerable: false,
|
|
1900
2021
|
configurable: true
|
|
1901
2022
|
});
|
|
1902
2023
|
Object.defineProperty(MDCTextField.prototype, "step", {
|
|
1903
2024
|
get: function () {
|
|
1904
|
-
return this.
|
|
2025
|
+
return this.input.step;
|
|
1905
2026
|
},
|
|
1906
2027
|
/**
|
|
1907
2028
|
* @param step Sets the input element's step.
|
|
1908
2029
|
*/
|
|
1909
2030
|
set: function (step) {
|
|
1910
|
-
this.
|
|
2031
|
+
this.input.step = step;
|
|
1911
2032
|
},
|
|
1912
2033
|
enumerable: false,
|
|
1913
2034
|
configurable: true
|
|
@@ -1978,14 +2099,14 @@ var MDCTextField = /** @class */ (function (_super) {
|
|
|
1978
2099
|
* Gets the text content of the prefix, or null if it does not exist.
|
|
1979
2100
|
*/
|
|
1980
2101
|
get: function () {
|
|
1981
|
-
return this.
|
|
2102
|
+
return this.prefix ? this.prefix.textContent : null;
|
|
1982
2103
|
},
|
|
1983
2104
|
/**
|
|
1984
2105
|
* Sets the text content of the prefix, if it exists.
|
|
1985
2106
|
*/
|
|
1986
2107
|
set: function (prefixText) {
|
|
1987
|
-
if (this.
|
|
1988
|
-
this.
|
|
2108
|
+
if (this.prefix) {
|
|
2109
|
+
this.prefix.textContent = prefixText;
|
|
1989
2110
|
}
|
|
1990
2111
|
},
|
|
1991
2112
|
enumerable: false,
|
|
@@ -1996,14 +2117,14 @@ var MDCTextField = /** @class */ (function (_super) {
|
|
|
1996
2117
|
* Gets the text content of the suffix, or null if it does not exist.
|
|
1997
2118
|
*/
|
|
1998
2119
|
get: function () {
|
|
1999
|
-
return this.
|
|
2120
|
+
return this.suffix ? this.suffix.textContent : null;
|
|
2000
2121
|
},
|
|
2001
2122
|
/**
|
|
2002
2123
|
* Sets the text content of the suffix, if it exists.
|
|
2003
2124
|
*/
|
|
2004
2125
|
set: function (suffixText) {
|
|
2005
|
-
if (this.
|
|
2006
|
-
this.
|
|
2126
|
+
if (this.suffix) {
|
|
2127
|
+
this.suffix.textContent = suffixText;
|
|
2007
2128
|
}
|
|
2008
2129
|
},
|
|
2009
2130
|
enumerable: false,
|
|
@@ -2013,7 +2134,7 @@ var MDCTextField = /** @class */ (function (_super) {
|
|
|
2013
2134
|
* Focuses the input element.
|
|
2014
2135
|
*/
|
|
2015
2136
|
MDCTextField.prototype.focus = function () {
|
|
2016
|
-
this.
|
|
2137
|
+
this.input.focus();
|
|
2017
2138
|
};
|
|
2018
2139
|
/**
|
|
2019
2140
|
* Recomputes the outline SVG path for the outline element.
|
|
@@ -2026,11 +2147,11 @@ var MDCTextField = /** @class */ (function (_super) {
|
|
|
2026
2147
|
// DO NOT INLINE this variable. For backward compatibility, foundations take a Partial<MDCFooAdapter>.
|
|
2027
2148
|
// To ensure we don't accidentally omit any methods, we need a separate, strongly typed adapter variable.
|
|
2028
2149
|
// tslint:disable:object-literal-sort-keys Methods should be in the same order as the adapter interface.
|
|
2029
|
-
var adapter = __assign$2(__assign$2(__assign$2(__assign$2(__assign$2({}, this.
|
|
2150
|
+
var adapter = __assign$2(__assign$2(__assign$2(__assign$2(__assign$2({}, this.getRootAdapterMethods()), this.getInputAdapterMethods()), this.getLabelAdapterMethods()), this.getLineRippleAdapterMethods()), this.getOutlineAdapterMethods());
|
|
2030
2151
|
// tslint:enable:object-literal-sort-keys
|
|
2031
|
-
return new MDCTextFieldFoundation(adapter, this.
|
|
2152
|
+
return new MDCTextFieldFoundation(adapter, this.getFoundationMap());
|
|
2032
2153
|
};
|
|
2033
|
-
MDCTextField.prototype.
|
|
2154
|
+
MDCTextField.prototype.getRootAdapterMethods = function () {
|
|
2034
2155
|
var _this = this;
|
|
2035
2156
|
// tslint:disable:object-literal-sort-keys Methods should be in the same order as the adapter interface.
|
|
2036
2157
|
return {
|
|
@@ -2051,7 +2172,7 @@ var MDCTextField = /** @class */ (function (_super) {
|
|
|
2051
2172
|
};
|
|
2052
2173
|
var observer = new MutationObserver(function (mutationsList) { return handler(getAttributesList(mutationsList)); });
|
|
2053
2174
|
var config = { attributes: true };
|
|
2054
|
-
observer.observe(_this.
|
|
2175
|
+
observer.observe(_this.input, config);
|
|
2055
2176
|
return observer;
|
|
2056
2177
|
},
|
|
2057
2178
|
deregisterValidationAttributeChangeHandler: function (observer) {
|
|
@@ -2060,84 +2181,93 @@ var MDCTextField = /** @class */ (function (_super) {
|
|
|
2060
2181
|
};
|
|
2061
2182
|
// tslint:enable:object-literal-sort-keys
|
|
2062
2183
|
};
|
|
2063
|
-
MDCTextField.prototype.
|
|
2184
|
+
MDCTextField.prototype.getInputAdapterMethods = function () {
|
|
2064
2185
|
var _this = this;
|
|
2065
2186
|
// tslint:disable:object-literal-sort-keys Methods should be in the same order as the adapter interface.
|
|
2066
2187
|
return {
|
|
2067
|
-
getNativeInput: function () { return _this.
|
|
2188
|
+
getNativeInput: function () { return _this.input; },
|
|
2068
2189
|
setInputAttr: function (attr, value) {
|
|
2069
|
-
_this.
|
|
2190
|
+
_this.input.setAttribute(attr, value);
|
|
2070
2191
|
},
|
|
2071
2192
|
removeInputAttr: function (attr) {
|
|
2072
|
-
_this.
|
|
2193
|
+
_this.input.removeAttribute(attr);
|
|
2073
2194
|
},
|
|
2074
|
-
isFocused: function () { return document.activeElement === _this.
|
|
2195
|
+
isFocused: function () { return document.activeElement === _this.input; },
|
|
2075
2196
|
registerInputInteractionHandler: function (evtType, handler) {
|
|
2076
|
-
_this.
|
|
2197
|
+
_this.input.addEventListener(evtType, handler, applyPassive());
|
|
2077
2198
|
},
|
|
2078
2199
|
deregisterInputInteractionHandler: function (evtType, handler) {
|
|
2079
|
-
_this.
|
|
2200
|
+
_this.input.removeEventListener(evtType, handler, applyPassive());
|
|
2080
2201
|
},
|
|
2081
2202
|
};
|
|
2082
2203
|
// tslint:enable:object-literal-sort-keys
|
|
2083
2204
|
};
|
|
2084
|
-
MDCTextField.prototype.
|
|
2205
|
+
MDCTextField.prototype.getLabelAdapterMethods = function () {
|
|
2085
2206
|
var _this = this;
|
|
2086
2207
|
return {
|
|
2087
|
-
floatLabel: function (shouldFloat) {
|
|
2088
|
-
|
|
2089
|
-
|
|
2090
|
-
|
|
2091
|
-
|
|
2208
|
+
floatLabel: function (shouldFloat) {
|
|
2209
|
+
_this.label && _this.label.float(shouldFloat);
|
|
2210
|
+
},
|
|
2211
|
+
getLabelWidth: function () { return _this.label ? _this.label.getWidth() : 0; },
|
|
2212
|
+
hasLabel: function () { return Boolean(_this.label); },
|
|
2213
|
+
shakeLabel: function (shouldShake) {
|
|
2214
|
+
_this.label && _this.label.shake(shouldShake);
|
|
2215
|
+
},
|
|
2216
|
+
setLabelRequired: function (isRequired) {
|
|
2217
|
+
_this.label && _this.label.setRequired(isRequired);
|
|
2218
|
+
},
|
|
2092
2219
|
};
|
|
2093
2220
|
};
|
|
2094
|
-
MDCTextField.prototype.
|
|
2221
|
+
MDCTextField.prototype.getLineRippleAdapterMethods = function () {
|
|
2095
2222
|
var _this = this;
|
|
2096
2223
|
return {
|
|
2097
2224
|
activateLineRipple: function () {
|
|
2098
|
-
if (_this.
|
|
2099
|
-
_this.
|
|
2225
|
+
if (_this.lineRipple) {
|
|
2226
|
+
_this.lineRipple.activate();
|
|
2100
2227
|
}
|
|
2101
2228
|
},
|
|
2102
2229
|
deactivateLineRipple: function () {
|
|
2103
|
-
if (_this.
|
|
2104
|
-
_this.
|
|
2230
|
+
if (_this.lineRipple) {
|
|
2231
|
+
_this.lineRipple.deactivate();
|
|
2105
2232
|
}
|
|
2106
2233
|
},
|
|
2107
2234
|
setLineRippleTransformOrigin: function (normalizedX) {
|
|
2108
|
-
if (_this.
|
|
2109
|
-
_this.
|
|
2235
|
+
if (_this.lineRipple) {
|
|
2236
|
+
_this.lineRipple.setRippleCenter(normalizedX);
|
|
2110
2237
|
}
|
|
2111
2238
|
},
|
|
2112
2239
|
};
|
|
2113
2240
|
};
|
|
2114
|
-
MDCTextField.prototype.
|
|
2241
|
+
MDCTextField.prototype.getOutlineAdapterMethods = function () {
|
|
2115
2242
|
var _this = this;
|
|
2116
2243
|
return {
|
|
2117
|
-
closeOutline: function () {
|
|
2118
|
-
|
|
2119
|
-
|
|
2244
|
+
closeOutline: function () {
|
|
2245
|
+
_this.outline && _this.outline.closeNotch();
|
|
2246
|
+
},
|
|
2247
|
+
hasOutline: function () { return Boolean(_this.outline); },
|
|
2248
|
+
notchOutline: function (labelWidth) {
|
|
2249
|
+
_this.outline && _this.outline.notch(labelWidth);
|
|
2250
|
+
},
|
|
2120
2251
|
};
|
|
2121
2252
|
};
|
|
2122
2253
|
/**
|
|
2123
2254
|
* @return A map of all subcomponents to subfoundations.
|
|
2124
2255
|
*/
|
|
2125
|
-
MDCTextField.prototype.
|
|
2256
|
+
MDCTextField.prototype.getFoundationMap = function () {
|
|
2126
2257
|
return {
|
|
2127
|
-
characterCounter: this.
|
|
2128
|
-
this.
|
|
2258
|
+
characterCounter: this.characterCounter ?
|
|
2259
|
+
this.characterCounter.foundationForTextField :
|
|
2129
2260
|
undefined,
|
|
2130
|
-
helperText: this.
|
|
2261
|
+
helperText: this.helperText ? this.helperText.foundationForTextField :
|
|
2131
2262
|
undefined,
|
|
2132
|
-
leadingIcon: this.
|
|
2133
|
-
this.leadingIcon_.foundationForTextField :
|
|
2263
|
+
leadingIcon: this.leadingIcon ? this.leadingIcon.foundationForTextField :
|
|
2134
2264
|
undefined,
|
|
2135
|
-
trailingIcon: this.
|
|
2136
|
-
this.
|
|
2265
|
+
trailingIcon: this.trailingIcon ?
|
|
2266
|
+
this.trailingIcon.foundationForTextField :
|
|
2137
2267
|
undefined,
|
|
2138
2268
|
};
|
|
2139
2269
|
};
|
|
2140
|
-
MDCTextField.prototype.
|
|
2270
|
+
MDCTextField.prototype.createRipple = function (rippleFactory) {
|
|
2141
2271
|
var _this = this;
|
|
2142
2272
|
var isTextArea = this.root.classList.contains(cssClasses$2.TEXTAREA);
|
|
2143
2273
|
var isOutlined = this.root.classList.contains(cssClasses$2.OUTLINED);
|
|
@@ -2147,8 +2277,10 @@ var MDCTextField = /** @class */ (function (_super) {
|
|
|
2147
2277
|
// DO NOT INLINE this variable. For backward compatibility, foundations take a Partial<MDCFooAdapter>.
|
|
2148
2278
|
// To ensure we don't accidentally omit any methods, we need a separate, strongly typed adapter variable.
|
|
2149
2279
|
// tslint:disable:object-literal-sort-keys Methods should be in the same order as the adapter interface.
|
|
2150
|
-
var adapter = __assign$2(__assign$2({}, MDCRipple.createAdapter(this)), { isSurfaceActive: function () { return matches(_this.
|
|
2151
|
-
|
|
2280
|
+
var adapter = __assign$2(__assign$2({}, MDCRipple.createAdapter(this)), { isSurfaceActive: function () { return matches(_this.input, ':active'); }, registerInteractionHandler: function (evtType, handler) {
|
|
2281
|
+
_this.input.addEventListener(evtType, handler, applyPassive());
|
|
2282
|
+
}, deregisterInteractionHandler: function (evtType, handler) {
|
|
2283
|
+
_this.input.removeEventListener(evtType, handler, applyPassive());
|
|
2152
2284
|
} });
|
|
2153
2285
|
// tslint:enable:object-literal-sort-keys
|
|
2154
2286
|
return rippleFactory(this.root, new MDCRippleFoundation(adapter));
|