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