@limetech/lime-elements 35.0.0-next.7 → 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 +78 -17
- 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 +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/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 +937 -90
- 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 +937 -90
- 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 +104 -19
- 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 +78 -17
- 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-cd619c16.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-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-8707d77b.entry.js +0 -73
- 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-98d50f52.entry.js +0 -1
- 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-a93f4190.entry.js +0 -82
- package/dist/lime-elements/p-be56ffab.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,4 +1,4 @@
|
|
|
1
|
-
import { M as MDCFoundation, a as MDCComponent } from './component-
|
|
1
|
+
import { M as MDCFoundation, a as MDCComponent } from './component-410aad5a.js';
|
|
2
2
|
import { m as matches } from './ponyfill-30263d5e.js';
|
|
3
3
|
|
|
4
4
|
/**
|
|
@@ -97,7 +97,19 @@ var __assign = function() {
|
|
|
97
97
|
return t;
|
|
98
98
|
};
|
|
99
99
|
return __assign.apply(this, arguments);
|
|
100
|
-
};
|
|
100
|
+
};
|
|
101
|
+
|
|
102
|
+
function __values(o) {
|
|
103
|
+
var s = typeof Symbol === "function" && Symbol.iterator, m = s && o[s], i = 0;
|
|
104
|
+
if (m) return m.call(o);
|
|
105
|
+
if (o && typeof o.length === "number") return {
|
|
106
|
+
next: function () {
|
|
107
|
+
if (o && i >= o.length) o = void 0;
|
|
108
|
+
return { value: o && o[i++], done: !o };
|
|
109
|
+
}
|
|
110
|
+
};
|
|
111
|
+
throw new TypeError(s ? "Object is not iterable." : "Symbol.iterator is not defined.");
|
|
112
|
+
}
|
|
101
113
|
|
|
102
114
|
/**
|
|
103
115
|
* @license
|
|
@@ -234,25 +246,35 @@ var MDCRippleFoundation = /** @class */ (function (_super) {
|
|
|
234
246
|
__extends(MDCRippleFoundation, _super);
|
|
235
247
|
function MDCRippleFoundation(adapter) {
|
|
236
248
|
var _this = _super.call(this, __assign(__assign({}, MDCRippleFoundation.defaultAdapter), adapter)) || this;
|
|
237
|
-
_this.
|
|
238
|
-
_this.
|
|
239
|
-
_this.
|
|
240
|
-
_this.
|
|
241
|
-
_this.
|
|
242
|
-
_this.
|
|
243
|
-
_this.
|
|
244
|
-
_this.
|
|
245
|
-
_this.
|
|
246
|
-
_this.
|
|
247
|
-
_this.
|
|
248
|
-
_this.
|
|
249
|
-
_this.
|
|
249
|
+
_this.activationAnimationHasEnded = false;
|
|
250
|
+
_this.activationTimer = 0;
|
|
251
|
+
_this.fgDeactivationRemovalTimer = 0;
|
|
252
|
+
_this.fgScale = '0';
|
|
253
|
+
_this.frame = { width: 0, height: 0 };
|
|
254
|
+
_this.initialSize = 0;
|
|
255
|
+
_this.layoutFrame = 0;
|
|
256
|
+
_this.maxRadius = 0;
|
|
257
|
+
_this.unboundedCoords = { left: 0, top: 0 };
|
|
258
|
+
_this.activationState = _this.defaultActivationState();
|
|
259
|
+
_this.activationTimerCallback = function () {
|
|
260
|
+
_this.activationAnimationHasEnded = true;
|
|
261
|
+
_this.runDeactivationUXLogicIfReady();
|
|
262
|
+
};
|
|
263
|
+
_this.activateHandler = function (e) {
|
|
264
|
+
_this.activateImpl(e);
|
|
265
|
+
};
|
|
266
|
+
_this.deactivateHandler = function () {
|
|
267
|
+
_this.deactivateImpl();
|
|
268
|
+
};
|
|
269
|
+
_this.focusHandler = function () {
|
|
270
|
+
_this.handleFocus();
|
|
271
|
+
};
|
|
272
|
+
_this.blurHandler = function () {
|
|
273
|
+
_this.handleBlur();
|
|
274
|
+
};
|
|
275
|
+
_this.resizeHandler = function () {
|
|
276
|
+
_this.layout();
|
|
250
277
|
};
|
|
251
|
-
_this.activateHandler_ = function (e) { return _this.activate_(e); };
|
|
252
|
-
_this.deactivateHandler_ = function () { return _this.deactivate_(); };
|
|
253
|
-
_this.focusHandler_ = function () { return _this.handleFocus(); };
|
|
254
|
-
_this.blurHandler_ = function () { return _this.handleBlur(); };
|
|
255
|
-
_this.resizeHandler_ = function () { return _this.layout(); };
|
|
256
278
|
return _this;
|
|
257
279
|
}
|
|
258
280
|
Object.defineProperty(MDCRippleFoundation, "cssClasses", {
|
|
@@ -281,7 +303,9 @@ var MDCRippleFoundation = /** @class */ (function (_super) {
|
|
|
281
303
|
return {
|
|
282
304
|
addClass: function () { return undefined; },
|
|
283
305
|
browserSupportsCssVars: function () { return true; },
|
|
284
|
-
computeBoundingRect: function () {
|
|
306
|
+
computeBoundingRect: function () {
|
|
307
|
+
return ({ top: 0, right: 0, bottom: 0, left: 0, width: 0, height: 0 });
|
|
308
|
+
},
|
|
285
309
|
containsEventTarget: function () { return true; },
|
|
286
310
|
deregisterDocumentInteractionHandler: function () { return undefined; },
|
|
287
311
|
deregisterInteractionHandler: function () { return undefined; },
|
|
@@ -302,8 +326,8 @@ var MDCRippleFoundation = /** @class */ (function (_super) {
|
|
|
302
326
|
});
|
|
303
327
|
MDCRippleFoundation.prototype.init = function () {
|
|
304
328
|
var _this = this;
|
|
305
|
-
var supportsPressRipple = this.
|
|
306
|
-
this.
|
|
329
|
+
var supportsPressRipple = this.supportsPressRipple();
|
|
330
|
+
this.registerRootHandlers(supportsPressRipple);
|
|
307
331
|
if (supportsPressRipple) {
|
|
308
332
|
var _a = MDCRippleFoundation.cssClasses, ROOT_1 = _a.ROOT, UNBOUNDED_1 = _a.UNBOUNDED;
|
|
309
333
|
requestAnimationFrame(function () {
|
|
@@ -311,51 +335,51 @@ var MDCRippleFoundation = /** @class */ (function (_super) {
|
|
|
311
335
|
if (_this.adapter.isUnbounded()) {
|
|
312
336
|
_this.adapter.addClass(UNBOUNDED_1);
|
|
313
337
|
// Unbounded ripples need layout logic applied immediately to set coordinates for both shade and ripple
|
|
314
|
-
_this.
|
|
338
|
+
_this.layoutInternal();
|
|
315
339
|
}
|
|
316
340
|
});
|
|
317
341
|
}
|
|
318
342
|
};
|
|
319
343
|
MDCRippleFoundation.prototype.destroy = function () {
|
|
320
344
|
var _this = this;
|
|
321
|
-
if (this.
|
|
322
|
-
if (this.
|
|
323
|
-
clearTimeout(this.
|
|
324
|
-
this.
|
|
345
|
+
if (this.supportsPressRipple()) {
|
|
346
|
+
if (this.activationTimer) {
|
|
347
|
+
clearTimeout(this.activationTimer);
|
|
348
|
+
this.activationTimer = 0;
|
|
325
349
|
this.adapter.removeClass(MDCRippleFoundation.cssClasses.FG_ACTIVATION);
|
|
326
350
|
}
|
|
327
|
-
if (this.
|
|
328
|
-
clearTimeout(this.
|
|
329
|
-
this.
|
|
351
|
+
if (this.fgDeactivationRemovalTimer) {
|
|
352
|
+
clearTimeout(this.fgDeactivationRemovalTimer);
|
|
353
|
+
this.fgDeactivationRemovalTimer = 0;
|
|
330
354
|
this.adapter.removeClass(MDCRippleFoundation.cssClasses.FG_DEACTIVATION);
|
|
331
355
|
}
|
|
332
356
|
var _a = MDCRippleFoundation.cssClasses, ROOT_2 = _a.ROOT, UNBOUNDED_2 = _a.UNBOUNDED;
|
|
333
357
|
requestAnimationFrame(function () {
|
|
334
358
|
_this.adapter.removeClass(ROOT_2);
|
|
335
359
|
_this.adapter.removeClass(UNBOUNDED_2);
|
|
336
|
-
_this.
|
|
360
|
+
_this.removeCssVars();
|
|
337
361
|
});
|
|
338
362
|
}
|
|
339
|
-
this.
|
|
340
|
-
this.
|
|
363
|
+
this.deregisterRootHandlers();
|
|
364
|
+
this.deregisterDeactivationHandlers();
|
|
341
365
|
};
|
|
342
366
|
/**
|
|
343
367
|
* @param evt Optional event containing position information.
|
|
344
368
|
*/
|
|
345
369
|
MDCRippleFoundation.prototype.activate = function (evt) {
|
|
346
|
-
this.
|
|
370
|
+
this.activateImpl(evt);
|
|
347
371
|
};
|
|
348
372
|
MDCRippleFoundation.prototype.deactivate = function () {
|
|
349
|
-
this.
|
|
373
|
+
this.deactivateImpl();
|
|
350
374
|
};
|
|
351
375
|
MDCRippleFoundation.prototype.layout = function () {
|
|
352
376
|
var _this = this;
|
|
353
|
-
if (this.
|
|
354
|
-
cancelAnimationFrame(this.
|
|
377
|
+
if (this.layoutFrame) {
|
|
378
|
+
cancelAnimationFrame(this.layoutFrame);
|
|
355
379
|
}
|
|
356
|
-
this.
|
|
357
|
-
_this.
|
|
358
|
-
_this.
|
|
380
|
+
this.layoutFrame = requestAnimationFrame(function () {
|
|
381
|
+
_this.layoutInternal();
|
|
382
|
+
_this.layoutFrame = 0;
|
|
359
383
|
});
|
|
360
384
|
};
|
|
361
385
|
MDCRippleFoundation.prototype.setUnbounded = function (unbounded) {
|
|
@@ -381,10 +405,10 @@ var MDCRippleFoundation = /** @class */ (function (_super) {
|
|
|
381
405
|
* client-side feature-detection may happen too early, such as when components are rendered on the server
|
|
382
406
|
* and then initialized at mount time on the client.
|
|
383
407
|
*/
|
|
384
|
-
MDCRippleFoundation.prototype.
|
|
408
|
+
MDCRippleFoundation.prototype.supportsPressRipple = function () {
|
|
385
409
|
return this.adapter.browserSupportsCssVars();
|
|
386
410
|
};
|
|
387
|
-
MDCRippleFoundation.prototype.
|
|
411
|
+
MDCRippleFoundation.prototype.defaultActivationState = function () {
|
|
388
412
|
return {
|
|
389
413
|
activationEvent: undefined,
|
|
390
414
|
hasDeactivationUXRun: false,
|
|
@@ -397,49 +421,89 @@ var MDCRippleFoundation = /** @class */ (function (_super) {
|
|
|
397
421
|
/**
|
|
398
422
|
* supportsPressRipple Passed from init to save a redundant function call
|
|
399
423
|
*/
|
|
400
|
-
MDCRippleFoundation.prototype.
|
|
401
|
-
var
|
|
424
|
+
MDCRippleFoundation.prototype.registerRootHandlers = function (supportsPressRipple) {
|
|
425
|
+
var e_1, _a;
|
|
402
426
|
if (supportsPressRipple) {
|
|
403
|
-
|
|
404
|
-
|
|
405
|
-
|
|
427
|
+
try {
|
|
428
|
+
for (var ACTIVATION_EVENT_TYPES_1 = __values(ACTIVATION_EVENT_TYPES), ACTIVATION_EVENT_TYPES_1_1 = ACTIVATION_EVENT_TYPES_1.next(); !ACTIVATION_EVENT_TYPES_1_1.done; ACTIVATION_EVENT_TYPES_1_1 = ACTIVATION_EVENT_TYPES_1.next()) {
|
|
429
|
+
var evtType = ACTIVATION_EVENT_TYPES_1_1.value;
|
|
430
|
+
this.adapter.registerInteractionHandler(evtType, this.activateHandler);
|
|
431
|
+
}
|
|
432
|
+
}
|
|
433
|
+
catch (e_1_1) { e_1 = { error: e_1_1 }; }
|
|
434
|
+
finally {
|
|
435
|
+
try {
|
|
436
|
+
if (ACTIVATION_EVENT_TYPES_1_1 && !ACTIVATION_EVENT_TYPES_1_1.done && (_a = ACTIVATION_EVENT_TYPES_1.return)) _a.call(ACTIVATION_EVENT_TYPES_1);
|
|
437
|
+
}
|
|
438
|
+
finally { if (e_1) throw e_1.error; }
|
|
439
|
+
}
|
|
406
440
|
if (this.adapter.isUnbounded()) {
|
|
407
|
-
this.adapter.registerResizeHandler(this.
|
|
441
|
+
this.adapter.registerResizeHandler(this.resizeHandler);
|
|
408
442
|
}
|
|
409
443
|
}
|
|
410
|
-
this.adapter.registerInteractionHandler('focus', this.
|
|
411
|
-
this.adapter.registerInteractionHandler('blur', this.
|
|
444
|
+
this.adapter.registerInteractionHandler('focus', this.focusHandler);
|
|
445
|
+
this.adapter.registerInteractionHandler('blur', this.blurHandler);
|
|
412
446
|
};
|
|
413
|
-
MDCRippleFoundation.prototype.
|
|
414
|
-
var
|
|
447
|
+
MDCRippleFoundation.prototype.registerDeactivationHandlers = function (evt) {
|
|
448
|
+
var e_2, _a;
|
|
415
449
|
if (evt.type === 'keydown') {
|
|
416
|
-
this.adapter.registerInteractionHandler('keyup', this.
|
|
450
|
+
this.adapter.registerInteractionHandler('keyup', this.deactivateHandler);
|
|
417
451
|
}
|
|
418
452
|
else {
|
|
419
|
-
|
|
420
|
-
|
|
421
|
-
|
|
453
|
+
try {
|
|
454
|
+
for (var POINTER_DEACTIVATION_EVENT_TYPES_1 = __values(POINTER_DEACTIVATION_EVENT_TYPES), POINTER_DEACTIVATION_EVENT_TYPES_1_1 = POINTER_DEACTIVATION_EVENT_TYPES_1.next(); !POINTER_DEACTIVATION_EVENT_TYPES_1_1.done; POINTER_DEACTIVATION_EVENT_TYPES_1_1 = POINTER_DEACTIVATION_EVENT_TYPES_1.next()) {
|
|
455
|
+
var evtType = POINTER_DEACTIVATION_EVENT_TYPES_1_1.value;
|
|
456
|
+
this.adapter.registerDocumentInteractionHandler(evtType, this.deactivateHandler);
|
|
457
|
+
}
|
|
458
|
+
}
|
|
459
|
+
catch (e_2_1) { e_2 = { error: e_2_1 }; }
|
|
460
|
+
finally {
|
|
461
|
+
try {
|
|
462
|
+
if (POINTER_DEACTIVATION_EVENT_TYPES_1_1 && !POINTER_DEACTIVATION_EVENT_TYPES_1_1.done && (_a = POINTER_DEACTIVATION_EVENT_TYPES_1.return)) _a.call(POINTER_DEACTIVATION_EVENT_TYPES_1);
|
|
463
|
+
}
|
|
464
|
+
finally { if (e_2) throw e_2.error; }
|
|
465
|
+
}
|
|
422
466
|
}
|
|
423
467
|
};
|
|
424
|
-
MDCRippleFoundation.prototype.
|
|
425
|
-
var
|
|
426
|
-
|
|
427
|
-
|
|
428
|
-
|
|
429
|
-
|
|
430
|
-
|
|
468
|
+
MDCRippleFoundation.prototype.deregisterRootHandlers = function () {
|
|
469
|
+
var e_3, _a;
|
|
470
|
+
try {
|
|
471
|
+
for (var ACTIVATION_EVENT_TYPES_2 = __values(ACTIVATION_EVENT_TYPES), ACTIVATION_EVENT_TYPES_2_1 = ACTIVATION_EVENT_TYPES_2.next(); !ACTIVATION_EVENT_TYPES_2_1.done; ACTIVATION_EVENT_TYPES_2_1 = ACTIVATION_EVENT_TYPES_2.next()) {
|
|
472
|
+
var evtType = ACTIVATION_EVENT_TYPES_2_1.value;
|
|
473
|
+
this.adapter.deregisterInteractionHandler(evtType, this.activateHandler);
|
|
474
|
+
}
|
|
475
|
+
}
|
|
476
|
+
catch (e_3_1) { e_3 = { error: e_3_1 }; }
|
|
477
|
+
finally {
|
|
478
|
+
try {
|
|
479
|
+
if (ACTIVATION_EVENT_TYPES_2_1 && !ACTIVATION_EVENT_TYPES_2_1.done && (_a = ACTIVATION_EVENT_TYPES_2.return)) _a.call(ACTIVATION_EVENT_TYPES_2);
|
|
480
|
+
}
|
|
481
|
+
finally { if (e_3) throw e_3.error; }
|
|
482
|
+
}
|
|
483
|
+
this.adapter.deregisterInteractionHandler('focus', this.focusHandler);
|
|
484
|
+
this.adapter.deregisterInteractionHandler('blur', this.blurHandler);
|
|
431
485
|
if (this.adapter.isUnbounded()) {
|
|
432
|
-
this.adapter.deregisterResizeHandler(this.
|
|
486
|
+
this.adapter.deregisterResizeHandler(this.resizeHandler);
|
|
433
487
|
}
|
|
434
488
|
};
|
|
435
|
-
MDCRippleFoundation.prototype.
|
|
436
|
-
var
|
|
437
|
-
this.adapter.deregisterInteractionHandler('keyup', this.
|
|
438
|
-
|
|
439
|
-
|
|
440
|
-
|
|
489
|
+
MDCRippleFoundation.prototype.deregisterDeactivationHandlers = function () {
|
|
490
|
+
var e_4, _a;
|
|
491
|
+
this.adapter.deregisterInteractionHandler('keyup', this.deactivateHandler);
|
|
492
|
+
try {
|
|
493
|
+
for (var POINTER_DEACTIVATION_EVENT_TYPES_2 = __values(POINTER_DEACTIVATION_EVENT_TYPES), POINTER_DEACTIVATION_EVENT_TYPES_2_1 = POINTER_DEACTIVATION_EVENT_TYPES_2.next(); !POINTER_DEACTIVATION_EVENT_TYPES_2_1.done; POINTER_DEACTIVATION_EVENT_TYPES_2_1 = POINTER_DEACTIVATION_EVENT_TYPES_2.next()) {
|
|
494
|
+
var evtType = POINTER_DEACTIVATION_EVENT_TYPES_2_1.value;
|
|
495
|
+
this.adapter.deregisterDocumentInteractionHandler(evtType, this.deactivateHandler);
|
|
496
|
+
}
|
|
497
|
+
}
|
|
498
|
+
catch (e_4_1) { e_4 = { error: e_4_1 }; }
|
|
499
|
+
finally {
|
|
500
|
+
try {
|
|
501
|
+
if (POINTER_DEACTIVATION_EVENT_TYPES_2_1 && !POINTER_DEACTIVATION_EVENT_TYPES_2_1.done && (_a = POINTER_DEACTIVATION_EVENT_TYPES_2.return)) _a.call(POINTER_DEACTIVATION_EVENT_TYPES_2);
|
|
502
|
+
}
|
|
503
|
+
finally { if (e_4) throw e_4.error; }
|
|
504
|
+
}
|
|
441
505
|
};
|
|
442
|
-
MDCRippleFoundation.prototype.
|
|
506
|
+
MDCRippleFoundation.prototype.removeCssVars = function () {
|
|
443
507
|
var _this = this;
|
|
444
508
|
var rippleStrings = MDCRippleFoundation.strings;
|
|
445
509
|
var keys = Object.keys(rippleStrings);
|
|
@@ -449,17 +513,17 @@ var MDCRippleFoundation = /** @class */ (function (_super) {
|
|
|
449
513
|
}
|
|
450
514
|
});
|
|
451
515
|
};
|
|
452
|
-
MDCRippleFoundation.prototype.
|
|
516
|
+
MDCRippleFoundation.prototype.activateImpl = function (evt) {
|
|
453
517
|
var _this = this;
|
|
454
518
|
if (this.adapter.isSurfaceDisabled()) {
|
|
455
519
|
return;
|
|
456
520
|
}
|
|
457
|
-
var activationState = this.
|
|
521
|
+
var activationState = this.activationState;
|
|
458
522
|
if (activationState.isActivated) {
|
|
459
523
|
return;
|
|
460
524
|
}
|
|
461
525
|
// Avoid reacting to follow-on events fired by touch device after an already-processed user interaction
|
|
462
|
-
var previousActivationEvent = this.
|
|
526
|
+
var previousActivationEvent = this.previousActivationEvent;
|
|
463
527
|
var isSameInteraction = previousActivationEvent && evt !== undefined && previousActivationEvent.type !== evt.type;
|
|
464
528
|
if (isSameInteraction) {
|
|
465
529
|
return;
|
|
@@ -473,16 +537,16 @@ var MDCRippleFoundation = /** @class */ (function (_super) {
|
|
|
473
537
|
activatedTargets.some(function (target) { return _this.adapter.containsEventTarget(target); });
|
|
474
538
|
if (hasActivatedChild) {
|
|
475
539
|
// Immediately reset activation state, while preserving logic that prevents touch follow-on events
|
|
476
|
-
this.
|
|
540
|
+
this.resetActivationState();
|
|
477
541
|
return;
|
|
478
542
|
}
|
|
479
543
|
if (evt !== undefined) {
|
|
480
544
|
activatedTargets.push(evt.target);
|
|
481
|
-
this.
|
|
545
|
+
this.registerDeactivationHandlers(evt);
|
|
482
546
|
}
|
|
483
|
-
activationState.wasElementMadeActive = this.
|
|
547
|
+
activationState.wasElementMadeActive = this.checkElementMadeActive(evt);
|
|
484
548
|
if (activationState.wasElementMadeActive) {
|
|
485
|
-
this.
|
|
549
|
+
this.animateActivation();
|
|
486
550
|
}
|
|
487
551
|
requestAnimationFrame(function () {
|
|
488
552
|
// Reset array on next frame after the current event has had a chance to bubble to prevent ancestor ripples
|
|
@@ -496,130 +560,134 @@ var MDCRippleFoundation = /** @class */ (function (_super) {
|
|
|
496
560
|
// - https://bugzilla.mozilla.org/show_bug.cgi?id=1293741
|
|
497
561
|
// We try first outside rAF to support Edge, which does not exhibit this problem, but will crash if a CSS
|
|
498
562
|
// variable is set within a rAF callback for a submit button interaction (#2241).
|
|
499
|
-
activationState.wasElementMadeActive = _this.
|
|
563
|
+
activationState.wasElementMadeActive = _this.checkElementMadeActive(evt);
|
|
500
564
|
if (activationState.wasElementMadeActive) {
|
|
501
|
-
_this.
|
|
565
|
+
_this.animateActivation();
|
|
502
566
|
}
|
|
503
567
|
}
|
|
504
568
|
if (!activationState.wasElementMadeActive) {
|
|
505
569
|
// Reset activation state immediately if element was not made active.
|
|
506
|
-
_this.
|
|
570
|
+
_this.activationState = _this.defaultActivationState();
|
|
507
571
|
}
|
|
508
572
|
});
|
|
509
573
|
};
|
|
510
|
-
MDCRippleFoundation.prototype.
|
|
574
|
+
MDCRippleFoundation.prototype.checkElementMadeActive = function (evt) {
|
|
511
575
|
return (evt !== undefined && evt.type === 'keydown') ?
|
|
512
576
|
this.adapter.isSurfaceActive() :
|
|
513
577
|
true;
|
|
514
578
|
};
|
|
515
|
-
MDCRippleFoundation.prototype.
|
|
579
|
+
MDCRippleFoundation.prototype.animateActivation = function () {
|
|
516
580
|
var _this = this;
|
|
517
581
|
var _a = MDCRippleFoundation.strings, VAR_FG_TRANSLATE_START = _a.VAR_FG_TRANSLATE_START, VAR_FG_TRANSLATE_END = _a.VAR_FG_TRANSLATE_END;
|
|
518
582
|
var _b = MDCRippleFoundation.cssClasses, FG_DEACTIVATION = _b.FG_DEACTIVATION, FG_ACTIVATION = _b.FG_ACTIVATION;
|
|
519
583
|
var DEACTIVATION_TIMEOUT_MS = MDCRippleFoundation.numbers.DEACTIVATION_TIMEOUT_MS;
|
|
520
|
-
this.
|
|
584
|
+
this.layoutInternal();
|
|
521
585
|
var translateStart = '';
|
|
522
586
|
var translateEnd = '';
|
|
523
587
|
if (!this.adapter.isUnbounded()) {
|
|
524
|
-
var _c = this.
|
|
588
|
+
var _c = this.getFgTranslationCoordinates(), startPoint = _c.startPoint, endPoint = _c.endPoint;
|
|
525
589
|
translateStart = startPoint.x + "px, " + startPoint.y + "px";
|
|
526
590
|
translateEnd = endPoint.x + "px, " + endPoint.y + "px";
|
|
527
591
|
}
|
|
528
592
|
this.adapter.updateCssVariable(VAR_FG_TRANSLATE_START, translateStart);
|
|
529
593
|
this.adapter.updateCssVariable(VAR_FG_TRANSLATE_END, translateEnd);
|
|
530
594
|
// Cancel any ongoing activation/deactivation animations
|
|
531
|
-
clearTimeout(this.
|
|
532
|
-
clearTimeout(this.
|
|
533
|
-
this.
|
|
595
|
+
clearTimeout(this.activationTimer);
|
|
596
|
+
clearTimeout(this.fgDeactivationRemovalTimer);
|
|
597
|
+
this.rmBoundedActivationClasses();
|
|
534
598
|
this.adapter.removeClass(FG_DEACTIVATION);
|
|
535
599
|
// Force layout in order to re-trigger the animation.
|
|
536
600
|
this.adapter.computeBoundingRect();
|
|
537
601
|
this.adapter.addClass(FG_ACTIVATION);
|
|
538
|
-
this.
|
|
602
|
+
this.activationTimer = setTimeout(function () {
|
|
603
|
+
_this.activationTimerCallback();
|
|
604
|
+
}, DEACTIVATION_TIMEOUT_MS);
|
|
539
605
|
};
|
|
540
|
-
MDCRippleFoundation.prototype.
|
|
541
|
-
var _a = this.
|
|
606
|
+
MDCRippleFoundation.prototype.getFgTranslationCoordinates = function () {
|
|
607
|
+
var _a = this.activationState, activationEvent = _a.activationEvent, wasActivatedByPointer = _a.wasActivatedByPointer;
|
|
542
608
|
var startPoint;
|
|
543
609
|
if (wasActivatedByPointer) {
|
|
544
610
|
startPoint = getNormalizedEventCoords(activationEvent, this.adapter.getWindowPageOffset(), this.adapter.computeBoundingRect());
|
|
545
611
|
}
|
|
546
612
|
else {
|
|
547
613
|
startPoint = {
|
|
548
|
-
x: this.
|
|
549
|
-
y: this.
|
|
614
|
+
x: this.frame.width / 2,
|
|
615
|
+
y: this.frame.height / 2,
|
|
550
616
|
};
|
|
551
617
|
}
|
|
552
618
|
// Center the element around the start point.
|
|
553
619
|
startPoint = {
|
|
554
|
-
x: startPoint.x - (this.
|
|
555
|
-
y: startPoint.y - (this.
|
|
620
|
+
x: startPoint.x - (this.initialSize / 2),
|
|
621
|
+
y: startPoint.y - (this.initialSize / 2),
|
|
556
622
|
};
|
|
557
623
|
var endPoint = {
|
|
558
|
-
x: (this.
|
|
559
|
-
y: (this.
|
|
624
|
+
x: (this.frame.width / 2) - (this.initialSize / 2),
|
|
625
|
+
y: (this.frame.height / 2) - (this.initialSize / 2),
|
|
560
626
|
};
|
|
561
627
|
return { startPoint: startPoint, endPoint: endPoint };
|
|
562
628
|
};
|
|
563
|
-
MDCRippleFoundation.prototype.
|
|
629
|
+
MDCRippleFoundation.prototype.runDeactivationUXLogicIfReady = function () {
|
|
564
630
|
var _this = this;
|
|
565
631
|
// This method is called both when a pointing device is released, and when the activation animation ends.
|
|
566
632
|
// The deactivation animation should only run after both of those occur.
|
|
567
633
|
var FG_DEACTIVATION = MDCRippleFoundation.cssClasses.FG_DEACTIVATION;
|
|
568
|
-
var _a = this.
|
|
634
|
+
var _a = this.activationState, hasDeactivationUXRun = _a.hasDeactivationUXRun, isActivated = _a.isActivated;
|
|
569
635
|
var activationHasEnded = hasDeactivationUXRun || !isActivated;
|
|
570
|
-
if (activationHasEnded && this.
|
|
571
|
-
this.
|
|
636
|
+
if (activationHasEnded && this.activationAnimationHasEnded) {
|
|
637
|
+
this.rmBoundedActivationClasses();
|
|
572
638
|
this.adapter.addClass(FG_DEACTIVATION);
|
|
573
|
-
this.
|
|
639
|
+
this.fgDeactivationRemovalTimer = setTimeout(function () {
|
|
574
640
|
_this.adapter.removeClass(FG_DEACTIVATION);
|
|
575
641
|
}, numbers.FG_DEACTIVATION_MS);
|
|
576
642
|
}
|
|
577
643
|
};
|
|
578
|
-
MDCRippleFoundation.prototype.
|
|
644
|
+
MDCRippleFoundation.prototype.rmBoundedActivationClasses = function () {
|
|
579
645
|
var FG_ACTIVATION = MDCRippleFoundation.cssClasses.FG_ACTIVATION;
|
|
580
646
|
this.adapter.removeClass(FG_ACTIVATION);
|
|
581
|
-
this.
|
|
647
|
+
this.activationAnimationHasEnded = false;
|
|
582
648
|
this.adapter.computeBoundingRect();
|
|
583
649
|
};
|
|
584
|
-
MDCRippleFoundation.prototype.
|
|
650
|
+
MDCRippleFoundation.prototype.resetActivationState = function () {
|
|
585
651
|
var _this = this;
|
|
586
|
-
this.
|
|
587
|
-
this.
|
|
652
|
+
this.previousActivationEvent = this.activationState.activationEvent;
|
|
653
|
+
this.activationState = this.defaultActivationState();
|
|
588
654
|
// Touch devices may fire additional events for the same interaction within a short time.
|
|
589
655
|
// Store the previous event until it's safe to assume that subsequent events are for new interactions.
|
|
590
|
-
setTimeout(function () { return _this.
|
|
656
|
+
setTimeout(function () { return _this.previousActivationEvent = undefined; }, MDCRippleFoundation.numbers.TAP_DELAY_MS);
|
|
591
657
|
};
|
|
592
|
-
MDCRippleFoundation.prototype.
|
|
658
|
+
MDCRippleFoundation.prototype.deactivateImpl = function () {
|
|
593
659
|
var _this = this;
|
|
594
|
-
var activationState = this.
|
|
660
|
+
var activationState = this.activationState;
|
|
595
661
|
// This can happen in scenarios such as when you have a keyup event that blurs the element.
|
|
596
662
|
if (!activationState.isActivated) {
|
|
597
663
|
return;
|
|
598
664
|
}
|
|
599
665
|
var state = __assign({}, activationState);
|
|
600
666
|
if (activationState.isProgrammatic) {
|
|
601
|
-
requestAnimationFrame(function () {
|
|
602
|
-
|
|
667
|
+
requestAnimationFrame(function () {
|
|
668
|
+
_this.animateDeactivation(state);
|
|
669
|
+
});
|
|
670
|
+
this.resetActivationState();
|
|
603
671
|
}
|
|
604
672
|
else {
|
|
605
|
-
this.
|
|
673
|
+
this.deregisterDeactivationHandlers();
|
|
606
674
|
requestAnimationFrame(function () {
|
|
607
|
-
_this.
|
|
608
|
-
_this.
|
|
609
|
-
_this.
|
|
675
|
+
_this.activationState.hasDeactivationUXRun = true;
|
|
676
|
+
_this.animateDeactivation(state);
|
|
677
|
+
_this.resetActivationState();
|
|
610
678
|
});
|
|
611
679
|
}
|
|
612
680
|
};
|
|
613
|
-
MDCRippleFoundation.prototype.
|
|
681
|
+
MDCRippleFoundation.prototype.animateDeactivation = function (_a) {
|
|
614
682
|
var wasActivatedByPointer = _a.wasActivatedByPointer, wasElementMadeActive = _a.wasElementMadeActive;
|
|
615
683
|
if (wasActivatedByPointer || wasElementMadeActive) {
|
|
616
|
-
this.
|
|
684
|
+
this.runDeactivationUXLogicIfReady();
|
|
617
685
|
}
|
|
618
686
|
};
|
|
619
|
-
MDCRippleFoundation.prototype.
|
|
687
|
+
MDCRippleFoundation.prototype.layoutInternal = function () {
|
|
620
688
|
var _this = this;
|
|
621
|
-
this.
|
|
622
|
-
var maxDim = Math.max(this.
|
|
689
|
+
this.frame = this.adapter.computeBoundingRect();
|
|
690
|
+
var maxDim = Math.max(this.frame.height, this.frame.width);
|
|
623
691
|
// Surface diameter is treated differently for unbounded vs. bounded ripples.
|
|
624
692
|
// Unbounded ripple diameter is calculated smaller since the surface is expected to already be padded appropriately
|
|
625
693
|
// to extend the hitbox, and the ripple is expected to meet the edges of the padded hitbox (which is typically
|
|
@@ -627,33 +695,33 @@ var MDCRippleFoundation = /** @class */ (function (_super) {
|
|
|
627
695
|
// (calculated based on the diagonal plus a constant padding), and are clipped at the surface's border via
|
|
628
696
|
// `overflow: hidden`.
|
|
629
697
|
var getBoundedRadius = function () {
|
|
630
|
-
var hypotenuse = Math.sqrt(Math.pow(_this.
|
|
698
|
+
var hypotenuse = Math.sqrt(Math.pow(_this.frame.width, 2) + Math.pow(_this.frame.height, 2));
|
|
631
699
|
return hypotenuse + MDCRippleFoundation.numbers.PADDING;
|
|
632
700
|
};
|
|
633
|
-
this.
|
|
701
|
+
this.maxRadius = this.adapter.isUnbounded() ? maxDim : getBoundedRadius();
|
|
634
702
|
// Ripple is sized as a fraction of the largest dimension of the surface, then scales up using a CSS scale transform
|
|
635
703
|
var initialSize = Math.floor(maxDim * MDCRippleFoundation.numbers.INITIAL_ORIGIN_SCALE);
|
|
636
704
|
// Unbounded ripple size should always be even number to equally center align.
|
|
637
705
|
if (this.adapter.isUnbounded() && initialSize % 2 !== 0) {
|
|
638
|
-
this.
|
|
706
|
+
this.initialSize = initialSize - 1;
|
|
639
707
|
}
|
|
640
708
|
else {
|
|
641
|
-
this.
|
|
709
|
+
this.initialSize = initialSize;
|
|
642
710
|
}
|
|
643
|
-
this.
|
|
644
|
-
this.
|
|
711
|
+
this.fgScale = "" + this.maxRadius / this.initialSize;
|
|
712
|
+
this.updateLayoutCssVars();
|
|
645
713
|
};
|
|
646
|
-
MDCRippleFoundation.prototype.
|
|
714
|
+
MDCRippleFoundation.prototype.updateLayoutCssVars = function () {
|
|
647
715
|
var _a = MDCRippleFoundation.strings, VAR_FG_SIZE = _a.VAR_FG_SIZE, VAR_LEFT = _a.VAR_LEFT, VAR_TOP = _a.VAR_TOP, VAR_FG_SCALE = _a.VAR_FG_SCALE;
|
|
648
|
-
this.adapter.updateCssVariable(VAR_FG_SIZE, this.
|
|
649
|
-
this.adapter.updateCssVariable(VAR_FG_SCALE, this.
|
|
716
|
+
this.adapter.updateCssVariable(VAR_FG_SIZE, this.initialSize + "px");
|
|
717
|
+
this.adapter.updateCssVariable(VAR_FG_SCALE, this.fgScale);
|
|
650
718
|
if (this.adapter.isUnbounded()) {
|
|
651
|
-
this.
|
|
652
|
-
left: Math.round((this.
|
|
653
|
-
top: Math.round((this.
|
|
719
|
+
this.unboundedCoords = {
|
|
720
|
+
left: Math.round((this.frame.width / 2) - (this.initialSize / 2)),
|
|
721
|
+
top: Math.round((this.frame.height / 2) - (this.initialSize / 2)),
|
|
654
722
|
};
|
|
655
|
-
this.adapter.updateCssVariable(VAR_LEFT, this.
|
|
656
|
-
this.adapter.updateCssVariable(VAR_TOP, this.
|
|
723
|
+
this.adapter.updateCssVariable(VAR_LEFT, this.unboundedCoords.left + "px");
|
|
724
|
+
this.adapter.updateCssVariable(VAR_TOP, this.unboundedCoords.top + "px");
|
|
657
725
|
}
|
|
658
726
|
};
|
|
659
727
|
return MDCRippleFoundation;
|
|
@@ -689,7 +757,9 @@ var MDCRipple = /** @class */ (function (_super) {
|
|
|
689
757
|
return _this;
|
|
690
758
|
}
|
|
691
759
|
MDCRipple.attachTo = function (root, opts) {
|
|
692
|
-
if (opts === void 0) { opts = {
|
|
760
|
+
if (opts === void 0) { opts = {
|
|
761
|
+
isUnbounded: undefined
|
|
762
|
+
}; }
|
|
693
763
|
var ripple = new MDCRipple(root);
|
|
694
764
|
// Only override unbounded behavior if option is explicitly specified
|
|
695
765
|
if (opts.isUnbounded !== undefined) {
|
|
@@ -737,11 +807,11 @@ var MDCRipple = /** @class */ (function (_super) {
|
|
|
737
807
|
};
|
|
738
808
|
Object.defineProperty(MDCRipple.prototype, "unbounded", {
|
|
739
809
|
get: function () {
|
|
740
|
-
return Boolean(this.
|
|
810
|
+
return Boolean(this.isUnbounded);
|
|
741
811
|
},
|
|
742
812
|
set: function (unbounded) {
|
|
743
|
-
this.
|
|
744
|
-
this.
|
|
813
|
+
this.isUnbounded = Boolean(unbounded);
|
|
814
|
+
this.setUnbounded();
|
|
745
815
|
},
|
|
746
816
|
enumerable: false,
|
|
747
817
|
configurable: true
|
|
@@ -760,7 +830,7 @@ var MDCRipple = /** @class */ (function (_super) {
|
|
|
760
830
|
};
|
|
761
831
|
MDCRipple.prototype.initialSyncWithDOM = function () {
|
|
762
832
|
var root = this.root;
|
|
763
|
-
this.
|
|
833
|
+
this.isUnbounded = 'mdcRippleIsUnbounded' in root.dataset;
|
|
764
834
|
};
|
|
765
835
|
/**
|
|
766
836
|
* Closure Compiler throws an access control error when directly accessing a
|
|
@@ -768,8 +838,8 @@ var MDCRipple = /** @class */ (function (_super) {
|
|
|
768
838
|
* By accessing the protected property inside a method, we solve that problem.
|
|
769
839
|
* That's why this function exists.
|
|
770
840
|
*/
|
|
771
|
-
MDCRipple.prototype.
|
|
772
|
-
this.foundation.setUnbounded(Boolean(this.
|
|
841
|
+
MDCRipple.prototype.setUnbounded = function () {
|
|
842
|
+
this.foundation.setUnbounded(Boolean(this.isUnbounded));
|
|
773
843
|
};
|
|
774
844
|
return MDCRipple;
|
|
775
845
|
}(MDCComponent));
|