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