@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
|
@@ -2,10 +2,10 @@
|
|
|
2
2
|
|
|
3
3
|
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
4
|
|
|
5
|
-
const index = require('./index-
|
|
5
|
+
const index = require('./index-2a28697b.js');
|
|
6
6
|
const isEqual = require('./isEqual-e3b9c27c.js');
|
|
7
|
-
const component = require('./component-
|
|
8
|
-
const component$1 = require('./component-
|
|
7
|
+
const component = require('./component-67144c1c.js');
|
|
8
|
+
const component$1 = require('./component-cf490570.js');
|
|
9
9
|
const ponyfill = require('./ponyfill-98ca4766.js');
|
|
10
10
|
const _arrayIncludesWith = require('./_arrayIncludesWith-36a6fafb.js');
|
|
11
11
|
require('./eq-9a943b00.js');
|
|
@@ -141,7 +141,19 @@ var __assign$3 = function() {
|
|
|
141
141
|
return t;
|
|
142
142
|
};
|
|
143
143
|
return __assign$3.apply(this, arguments);
|
|
144
|
-
};
|
|
144
|
+
};
|
|
145
|
+
|
|
146
|
+
function __values(o) {
|
|
147
|
+
var s = typeof Symbol === "function" && Symbol.iterator, m = s && o[s], i = 0;
|
|
148
|
+
if (m) return m.call(o);
|
|
149
|
+
if (o && typeof o.length === "number") return {
|
|
150
|
+
next: function () {
|
|
151
|
+
if (o && i >= o.length) o = void 0;
|
|
152
|
+
return { value: o && o[i++], done: !o };
|
|
153
|
+
}
|
|
154
|
+
};
|
|
155
|
+
throw new TypeError(s ? "Object is not iterable." : "Symbol.iterator is not defined.");
|
|
156
|
+
}
|
|
145
157
|
|
|
146
158
|
/*! *****************************************************************************
|
|
147
159
|
Copyright (c) Microsoft Corporation.
|
|
@@ -292,14 +304,14 @@ var MDCTabScrollerRTLDefault = /** @class */ (function (_super) {
|
|
|
292
304
|
}
|
|
293
305
|
MDCTabScrollerRTLDefault.prototype.getScrollPositionRTL = function () {
|
|
294
306
|
var currentScrollLeft = this.adapter.getScrollAreaScrollLeft();
|
|
295
|
-
var right = this.
|
|
307
|
+
var right = this.calculateScrollEdges().right;
|
|
296
308
|
// Scroll values on most browsers are ints instead of floats so we round
|
|
297
309
|
return Math.round(right - currentScrollLeft);
|
|
298
310
|
};
|
|
299
311
|
MDCTabScrollerRTLDefault.prototype.scrollToRTL = function (scrollX) {
|
|
300
|
-
var edges = this.
|
|
312
|
+
var edges = this.calculateScrollEdges();
|
|
301
313
|
var currentScrollLeft = this.adapter.getScrollAreaScrollLeft();
|
|
302
|
-
var clampedScrollLeft = this.
|
|
314
|
+
var clampedScrollLeft = this.clampScrollValue(edges.right - scrollX);
|
|
303
315
|
return {
|
|
304
316
|
finalScrollPosition: clampedScrollLeft,
|
|
305
317
|
scrollDelta: clampedScrollLeft - currentScrollLeft,
|
|
@@ -307,7 +319,7 @@ var MDCTabScrollerRTLDefault = /** @class */ (function (_super) {
|
|
|
307
319
|
};
|
|
308
320
|
MDCTabScrollerRTLDefault.prototype.incrementScrollRTL = function (scrollX) {
|
|
309
321
|
var currentScrollLeft = this.adapter.getScrollAreaScrollLeft();
|
|
310
|
-
var clampedScrollLeft = this.
|
|
322
|
+
var clampedScrollLeft = this.clampScrollValue(currentScrollLeft - scrollX);
|
|
311
323
|
return {
|
|
312
324
|
finalScrollPosition: clampedScrollLeft,
|
|
313
325
|
scrollDelta: clampedScrollLeft - currentScrollLeft,
|
|
@@ -316,7 +328,7 @@ var MDCTabScrollerRTLDefault = /** @class */ (function (_super) {
|
|
|
316
328
|
MDCTabScrollerRTLDefault.prototype.getAnimatingScrollPosition = function (scrollX) {
|
|
317
329
|
return scrollX;
|
|
318
330
|
};
|
|
319
|
-
MDCTabScrollerRTLDefault.prototype.
|
|
331
|
+
MDCTabScrollerRTLDefault.prototype.calculateScrollEdges = function () {
|
|
320
332
|
var contentWidth = this.adapter.getScrollContentOffsetWidth();
|
|
321
333
|
var rootWidth = this.adapter.getScrollAreaOffsetWidth();
|
|
322
334
|
return {
|
|
@@ -324,8 +336,8 @@ var MDCTabScrollerRTLDefault = /** @class */ (function (_super) {
|
|
|
324
336
|
right: contentWidth - rootWidth,
|
|
325
337
|
};
|
|
326
338
|
};
|
|
327
|
-
MDCTabScrollerRTLDefault.prototype.
|
|
328
|
-
var edges = this.
|
|
339
|
+
MDCTabScrollerRTLDefault.prototype.clampScrollValue = function (scrollX) {
|
|
340
|
+
var edges = this.calculateScrollEdges();
|
|
329
341
|
return Math.min(Math.max(edges.left, scrollX), edges.right);
|
|
330
342
|
};
|
|
331
343
|
return MDCTabScrollerRTLDefault;
|
|
@@ -364,7 +376,7 @@ var MDCTabScrollerRTLNegative = /** @class */ (function (_super) {
|
|
|
364
376
|
};
|
|
365
377
|
MDCTabScrollerRTLNegative.prototype.scrollToRTL = function (scrollX) {
|
|
366
378
|
var currentScrollLeft = this.adapter.getScrollAreaScrollLeft();
|
|
367
|
-
var clampedScrollLeft = this.
|
|
379
|
+
var clampedScrollLeft = this.clampScrollValue(-scrollX);
|
|
368
380
|
return {
|
|
369
381
|
finalScrollPosition: clampedScrollLeft,
|
|
370
382
|
scrollDelta: clampedScrollLeft - currentScrollLeft,
|
|
@@ -372,7 +384,7 @@ var MDCTabScrollerRTLNegative = /** @class */ (function (_super) {
|
|
|
372
384
|
};
|
|
373
385
|
MDCTabScrollerRTLNegative.prototype.incrementScrollRTL = function (scrollX) {
|
|
374
386
|
var currentScrollLeft = this.adapter.getScrollAreaScrollLeft();
|
|
375
|
-
var clampedScrollLeft = this.
|
|
387
|
+
var clampedScrollLeft = this.clampScrollValue(currentScrollLeft - scrollX);
|
|
376
388
|
return {
|
|
377
389
|
finalScrollPosition: clampedScrollLeft,
|
|
378
390
|
scrollDelta: clampedScrollLeft - currentScrollLeft,
|
|
@@ -381,7 +393,7 @@ var MDCTabScrollerRTLNegative = /** @class */ (function (_super) {
|
|
|
381
393
|
MDCTabScrollerRTLNegative.prototype.getAnimatingScrollPosition = function (scrollX, translateX) {
|
|
382
394
|
return scrollX - translateX;
|
|
383
395
|
};
|
|
384
|
-
MDCTabScrollerRTLNegative.prototype.
|
|
396
|
+
MDCTabScrollerRTLNegative.prototype.calculateScrollEdges = function () {
|
|
385
397
|
var contentWidth = this.adapter.getScrollContentOffsetWidth();
|
|
386
398
|
var rootWidth = this.adapter.getScrollAreaOffsetWidth();
|
|
387
399
|
return {
|
|
@@ -389,8 +401,8 @@ var MDCTabScrollerRTLNegative = /** @class */ (function (_super) {
|
|
|
389
401
|
right: 0,
|
|
390
402
|
};
|
|
391
403
|
};
|
|
392
|
-
MDCTabScrollerRTLNegative.prototype.
|
|
393
|
-
var edges = this.
|
|
404
|
+
MDCTabScrollerRTLNegative.prototype.clampScrollValue = function (scrollX) {
|
|
405
|
+
var edges = this.calculateScrollEdges();
|
|
394
406
|
return Math.max(Math.min(edges.right, scrollX), edges.left);
|
|
395
407
|
};
|
|
396
408
|
return MDCTabScrollerRTLNegative;
|
|
@@ -430,7 +442,7 @@ var MDCTabScrollerRTLReverse = /** @class */ (function (_super) {
|
|
|
430
442
|
};
|
|
431
443
|
MDCTabScrollerRTLReverse.prototype.scrollToRTL = function (scrollX) {
|
|
432
444
|
var currentScrollLeft = this.adapter.getScrollAreaScrollLeft();
|
|
433
|
-
var clampedScrollLeft = this.
|
|
445
|
+
var clampedScrollLeft = this.clampScrollValue(scrollX);
|
|
434
446
|
return {
|
|
435
447
|
finalScrollPosition: clampedScrollLeft,
|
|
436
448
|
scrollDelta: currentScrollLeft - clampedScrollLeft,
|
|
@@ -438,7 +450,7 @@ var MDCTabScrollerRTLReverse = /** @class */ (function (_super) {
|
|
|
438
450
|
};
|
|
439
451
|
MDCTabScrollerRTLReverse.prototype.incrementScrollRTL = function (scrollX) {
|
|
440
452
|
var currentScrollLeft = this.adapter.getScrollAreaScrollLeft();
|
|
441
|
-
var clampedScrollLeft = this.
|
|
453
|
+
var clampedScrollLeft = this.clampScrollValue(currentScrollLeft + scrollX);
|
|
442
454
|
return {
|
|
443
455
|
finalScrollPosition: clampedScrollLeft,
|
|
444
456
|
scrollDelta: currentScrollLeft - clampedScrollLeft,
|
|
@@ -447,7 +459,7 @@ var MDCTabScrollerRTLReverse = /** @class */ (function (_super) {
|
|
|
447
459
|
MDCTabScrollerRTLReverse.prototype.getAnimatingScrollPosition = function (scrollX, translateX) {
|
|
448
460
|
return scrollX + translateX;
|
|
449
461
|
};
|
|
450
|
-
MDCTabScrollerRTLReverse.prototype.
|
|
462
|
+
MDCTabScrollerRTLReverse.prototype.calculateScrollEdges = function () {
|
|
451
463
|
var contentWidth = this.adapter.getScrollContentOffsetWidth();
|
|
452
464
|
var rootWidth = this.adapter.getScrollAreaOffsetWidth();
|
|
453
465
|
return {
|
|
@@ -455,8 +467,8 @@ var MDCTabScrollerRTLReverse = /** @class */ (function (_super) {
|
|
|
455
467
|
right: 0,
|
|
456
468
|
};
|
|
457
469
|
};
|
|
458
|
-
MDCTabScrollerRTLReverse.prototype.
|
|
459
|
-
var edges = this.
|
|
470
|
+
MDCTabScrollerRTLReverse.prototype.clampScrollValue = function (scrollX) {
|
|
471
|
+
var edges = this.calculateScrollEdges();
|
|
460
472
|
return Math.min(Math.max(edges.right, scrollX), edges.left);
|
|
461
473
|
};
|
|
462
474
|
return MDCTabScrollerRTLReverse;
|
|
@@ -491,7 +503,7 @@ var MDCTabScrollerFoundation = /** @class */ (function (_super) {
|
|
|
491
503
|
/**
|
|
492
504
|
* Controls whether we should handle the transitionend and interaction events during the animation.
|
|
493
505
|
*/
|
|
494
|
-
_this.
|
|
506
|
+
_this.isAnimating = false;
|
|
495
507
|
return _this;
|
|
496
508
|
}
|
|
497
509
|
Object.defineProperty(MDCTabScrollerFoundation, "cssClasses", {
|
|
@@ -523,8 +535,12 @@ var MDCTabScrollerFoundation = /** @class */ (function (_super) {
|
|
|
523
535
|
getScrollAreaScrollLeft: function () { return 0; },
|
|
524
536
|
getScrollContentOffsetWidth: function () { return 0; },
|
|
525
537
|
getScrollAreaOffsetWidth: function () { return 0; },
|
|
526
|
-
computeScrollAreaClientRect: function () {
|
|
527
|
-
|
|
538
|
+
computeScrollAreaClientRect: function () {
|
|
539
|
+
return ({ top: 0, right: 0, bottom: 0, left: 0, width: 0, height: 0 });
|
|
540
|
+
},
|
|
541
|
+
computeScrollContentClientRect: function () {
|
|
542
|
+
return ({ top: 0, right: 0, bottom: 0, left: 0, width: 0, height: 0 });
|
|
543
|
+
},
|
|
528
544
|
computeHorizontalScrollbarHeight: function () { return 0; },
|
|
529
545
|
};
|
|
530
546
|
// tslint:enable:object-literal-sort-keys
|
|
@@ -543,10 +559,10 @@ var MDCTabScrollerFoundation = /** @class */ (function (_super) {
|
|
|
543
559
|
* Computes the current visual scroll position
|
|
544
560
|
*/
|
|
545
561
|
MDCTabScrollerFoundation.prototype.getScrollPosition = function () {
|
|
546
|
-
if (this.
|
|
547
|
-
return this.
|
|
562
|
+
if (this.isRTL()) {
|
|
563
|
+
return this.computeCurrentScrollPositionRTL();
|
|
548
564
|
}
|
|
549
|
-
var currentTranslateX = this.
|
|
565
|
+
var currentTranslateX = this.calculateCurrentTranslateX();
|
|
550
566
|
var scrollLeft = this.adapter.getScrollAreaScrollLeft();
|
|
551
567
|
return scrollLeft - currentTranslateX;
|
|
552
568
|
};
|
|
@@ -555,11 +571,11 @@ var MDCTabScrollerFoundation = /** @class */ (function (_super) {
|
|
|
555
571
|
*/
|
|
556
572
|
MDCTabScrollerFoundation.prototype.handleInteraction = function () {
|
|
557
573
|
// Early exit if we aren't animating
|
|
558
|
-
if (!this.
|
|
574
|
+
if (!this.isAnimating) {
|
|
559
575
|
return;
|
|
560
576
|
}
|
|
561
577
|
// Prevent other event listeners from handling this event
|
|
562
|
-
this.
|
|
578
|
+
this.stopScrollAnimation();
|
|
563
579
|
};
|
|
564
580
|
/**
|
|
565
581
|
* Handles the transitionend event
|
|
@@ -567,11 +583,11 @@ var MDCTabScrollerFoundation = /** @class */ (function (_super) {
|
|
|
567
583
|
MDCTabScrollerFoundation.prototype.handleTransitionEnd = function (evt) {
|
|
568
584
|
// Early exit if we aren't animating or the event was triggered by a different element.
|
|
569
585
|
var evtTarget = evt.target;
|
|
570
|
-
if (!this.
|
|
586
|
+
if (!this.isAnimating ||
|
|
571
587
|
!this.adapter.eventTargetMatchesSelector(evtTarget, MDCTabScrollerFoundation.strings.CONTENT_SELECTOR)) {
|
|
572
588
|
return;
|
|
573
589
|
}
|
|
574
|
-
this.
|
|
590
|
+
this.isAnimating = false;
|
|
575
591
|
this.adapter.removeClass(MDCTabScrollerFoundation.cssClasses.ANIMATING);
|
|
576
592
|
};
|
|
577
593
|
/**
|
|
@@ -583,7 +599,7 @@ var MDCTabScrollerFoundation = /** @class */ (function (_super) {
|
|
|
583
599
|
if (scrollXIncrement === 0) {
|
|
584
600
|
return;
|
|
585
601
|
}
|
|
586
|
-
this.
|
|
602
|
+
this.animate(this.getIncrementScrollOperation(scrollXIncrement));
|
|
587
603
|
};
|
|
588
604
|
/**
|
|
589
605
|
* Increment the scroll value by the scrollXIncrement without animation.
|
|
@@ -594,35 +610,36 @@ var MDCTabScrollerFoundation = /** @class */ (function (_super) {
|
|
|
594
610
|
if (scrollXIncrement === 0) {
|
|
595
611
|
return;
|
|
596
612
|
}
|
|
597
|
-
var operation = this.
|
|
613
|
+
var operation = this.getIncrementScrollOperation(scrollXIncrement);
|
|
598
614
|
if (operation.scrollDelta === 0) {
|
|
599
615
|
return;
|
|
600
616
|
}
|
|
601
|
-
this.
|
|
617
|
+
this.stopScrollAnimation();
|
|
602
618
|
this.adapter.setScrollAreaScrollLeft(operation.finalScrollPosition);
|
|
603
619
|
};
|
|
604
620
|
/**
|
|
605
621
|
* Scrolls to the given scrollX value
|
|
606
622
|
*/
|
|
607
623
|
MDCTabScrollerFoundation.prototype.scrollTo = function (scrollX) {
|
|
608
|
-
if (this.
|
|
609
|
-
|
|
624
|
+
if (this.isRTL()) {
|
|
625
|
+
this.scrollToImplRTL(scrollX);
|
|
626
|
+
return;
|
|
610
627
|
}
|
|
611
|
-
this.
|
|
628
|
+
this.scrollToImpl(scrollX);
|
|
612
629
|
};
|
|
613
630
|
/**
|
|
614
631
|
* @return Browser-specific {@link MDCTabScrollerRTL} instance.
|
|
615
632
|
*/
|
|
616
633
|
MDCTabScrollerFoundation.prototype.getRTLScroller = function () {
|
|
617
|
-
if (!this.
|
|
618
|
-
this.
|
|
634
|
+
if (!this.rtlScrollerInstance) {
|
|
635
|
+
this.rtlScrollerInstance = this.rtlScrollerFactory();
|
|
619
636
|
}
|
|
620
|
-
return this.
|
|
637
|
+
return this.rtlScrollerInstance;
|
|
621
638
|
};
|
|
622
639
|
/**
|
|
623
640
|
* @return translateX value from a CSS matrix transform function string.
|
|
624
641
|
*/
|
|
625
|
-
MDCTabScrollerFoundation.prototype.
|
|
642
|
+
MDCTabScrollerFoundation.prototype.calculateCurrentTranslateX = function () {
|
|
626
643
|
var transformValue = this.adapter.getScrollContentStyleValue('transform');
|
|
627
644
|
// Early exit if no transform is present
|
|
628
645
|
if (transformValue === 'none') {
|
|
@@ -646,15 +663,15 @@ var MDCTabScrollerFoundation = /** @class */ (function (_super) {
|
|
|
646
663
|
* Calculates a safe scroll value that is > 0 and < the max scroll value
|
|
647
664
|
* @param scrollX The distance to scroll
|
|
648
665
|
*/
|
|
649
|
-
MDCTabScrollerFoundation.prototype.
|
|
650
|
-
var edges = this.
|
|
666
|
+
MDCTabScrollerFoundation.prototype.clampScrollValue = function (scrollX) {
|
|
667
|
+
var edges = this.calculateScrollEdges();
|
|
651
668
|
return Math.min(Math.max(edges.left, scrollX), edges.right);
|
|
652
669
|
};
|
|
653
|
-
MDCTabScrollerFoundation.prototype.
|
|
654
|
-
var translateX = this.
|
|
670
|
+
MDCTabScrollerFoundation.prototype.computeCurrentScrollPositionRTL = function () {
|
|
671
|
+
var translateX = this.calculateCurrentTranslateX();
|
|
655
672
|
return this.getRTLScroller().getScrollPositionRTL(translateX);
|
|
656
673
|
};
|
|
657
|
-
MDCTabScrollerFoundation.prototype.
|
|
674
|
+
MDCTabScrollerFoundation.prototype.calculateScrollEdges = function () {
|
|
658
675
|
var contentWidth = this.adapter.getScrollContentOffsetWidth();
|
|
659
676
|
var rootWidth = this.adapter.getScrollAreaOffsetWidth();
|
|
660
677
|
return {
|
|
@@ -666,11 +683,11 @@ var MDCTabScrollerFoundation = /** @class */ (function (_super) {
|
|
|
666
683
|
* Internal scroll method
|
|
667
684
|
* @param scrollX The new scroll position
|
|
668
685
|
*/
|
|
669
|
-
MDCTabScrollerFoundation.prototype.
|
|
686
|
+
MDCTabScrollerFoundation.prototype.scrollToImpl = function (scrollX) {
|
|
670
687
|
var currentScrollX = this.getScrollPosition();
|
|
671
|
-
var safeScrollX = this.
|
|
688
|
+
var safeScrollX = this.clampScrollValue(scrollX);
|
|
672
689
|
var scrollDelta = safeScrollX - currentScrollX;
|
|
673
|
-
this.
|
|
690
|
+
this.animate({
|
|
674
691
|
finalScrollPosition: safeScrollX,
|
|
675
692
|
scrollDelta: scrollDelta,
|
|
676
693
|
});
|
|
@@ -679,22 +696,22 @@ var MDCTabScrollerFoundation = /** @class */ (function (_super) {
|
|
|
679
696
|
* Internal RTL scroll method
|
|
680
697
|
* @param scrollX The new scroll position
|
|
681
698
|
*/
|
|
682
|
-
MDCTabScrollerFoundation.prototype.
|
|
699
|
+
MDCTabScrollerFoundation.prototype.scrollToImplRTL = function (scrollX) {
|
|
683
700
|
var animation = this.getRTLScroller().scrollToRTL(scrollX);
|
|
684
|
-
this.
|
|
701
|
+
this.animate(animation);
|
|
685
702
|
};
|
|
686
703
|
/**
|
|
687
704
|
* Internal method to compute the increment scroll operation values.
|
|
688
705
|
* @param scrollX The desired scroll position increment
|
|
689
706
|
* @return MDCTabScrollerAnimation with the sanitized values for performing the scroll operation.
|
|
690
707
|
*/
|
|
691
|
-
MDCTabScrollerFoundation.prototype.
|
|
692
|
-
if (this.
|
|
708
|
+
MDCTabScrollerFoundation.prototype.getIncrementScrollOperation = function (scrollX) {
|
|
709
|
+
if (this.isRTL()) {
|
|
693
710
|
return this.getRTLScroller().incrementScrollRTL(scrollX);
|
|
694
711
|
}
|
|
695
712
|
var currentScrollX = this.getScrollPosition();
|
|
696
713
|
var targetScrollX = scrollX + currentScrollX;
|
|
697
|
-
var safeScrollX = this.
|
|
714
|
+
var safeScrollX = this.clampScrollValue(targetScrollX);
|
|
698
715
|
var scrollDelta = safeScrollX - currentScrollX;
|
|
699
716
|
return {
|
|
700
717
|
finalScrollPosition: safeScrollX,
|
|
@@ -705,13 +722,13 @@ var MDCTabScrollerFoundation = /** @class */ (function (_super) {
|
|
|
705
722
|
* Animates the tab scrolling
|
|
706
723
|
* @param animation The animation to apply
|
|
707
724
|
*/
|
|
708
|
-
MDCTabScrollerFoundation.prototype.
|
|
725
|
+
MDCTabScrollerFoundation.prototype.animate = function (animation) {
|
|
709
726
|
var _this = this;
|
|
710
727
|
// Early exit if translateX is 0, which means there's no animation to perform
|
|
711
728
|
if (animation.scrollDelta === 0) {
|
|
712
729
|
return;
|
|
713
730
|
}
|
|
714
|
-
this.
|
|
731
|
+
this.stopScrollAnimation();
|
|
715
732
|
// This animation uses the FLIP approach.
|
|
716
733
|
// Read more here: https://aerotwist.com/blog/flip-your-animations/
|
|
717
734
|
this.adapter.setScrollAreaScrollLeft(animation.finalScrollPosition);
|
|
@@ -722,14 +739,14 @@ var MDCTabScrollerFoundation = /** @class */ (function (_super) {
|
|
|
722
739
|
_this.adapter.addClass(MDCTabScrollerFoundation.cssClasses.ANIMATING);
|
|
723
740
|
_this.adapter.setScrollContentStyleProperty('transform', 'none');
|
|
724
741
|
});
|
|
725
|
-
this.
|
|
742
|
+
this.isAnimating = true;
|
|
726
743
|
};
|
|
727
744
|
/**
|
|
728
745
|
* Stops scroll animation
|
|
729
746
|
*/
|
|
730
|
-
MDCTabScrollerFoundation.prototype.
|
|
731
|
-
this.
|
|
732
|
-
var currentScrollPosition = this.
|
|
747
|
+
MDCTabScrollerFoundation.prototype.stopScrollAnimation = function () {
|
|
748
|
+
this.isAnimating = false;
|
|
749
|
+
var currentScrollPosition = this.getAnimatingScrollPosition();
|
|
733
750
|
this.adapter.removeClass(MDCTabScrollerFoundation.cssClasses.ANIMATING);
|
|
734
751
|
this.adapter.setScrollContentStyleProperty('transform', 'translateX(0px)');
|
|
735
752
|
this.adapter.setScrollAreaScrollLeft(currentScrollPosition);
|
|
@@ -737,10 +754,10 @@ var MDCTabScrollerFoundation = /** @class */ (function (_super) {
|
|
|
737
754
|
/**
|
|
738
755
|
* Gets the current scroll position during animation
|
|
739
756
|
*/
|
|
740
|
-
MDCTabScrollerFoundation.prototype.
|
|
741
|
-
var currentTranslateX = this.
|
|
757
|
+
MDCTabScrollerFoundation.prototype.getAnimatingScrollPosition = function () {
|
|
758
|
+
var currentTranslateX = this.calculateCurrentTranslateX();
|
|
742
759
|
var scrollLeft = this.adapter.getScrollAreaScrollLeft();
|
|
743
|
-
if (this.
|
|
760
|
+
if (this.isRTL()) {
|
|
744
761
|
return this.getRTLScroller().getAnimatingScrollPosition(scrollLeft, currentTranslateX);
|
|
745
762
|
}
|
|
746
763
|
return scrollLeft - currentTranslateX;
|
|
@@ -748,7 +765,7 @@ var MDCTabScrollerFoundation = /** @class */ (function (_super) {
|
|
|
748
765
|
/**
|
|
749
766
|
* Determines the RTL Scroller to use
|
|
750
767
|
*/
|
|
751
|
-
MDCTabScrollerFoundation.prototype.
|
|
768
|
+
MDCTabScrollerFoundation.prototype.rtlScrollerFactory = function () {
|
|
752
769
|
// Browsers have three different implementations of scrollLeft in RTL mode,
|
|
753
770
|
// dependent on the browser. The behavior is based off the max LTR
|
|
754
771
|
// scrollLeft value and 0.
|
|
@@ -791,7 +808,7 @@ var MDCTabScrollerFoundation = /** @class */ (function (_super) {
|
|
|
791
808
|
}
|
|
792
809
|
return new MDCTabScrollerRTLDefault(this.adapter);
|
|
793
810
|
};
|
|
794
|
-
MDCTabScrollerFoundation.prototype.
|
|
811
|
+
MDCTabScrollerFoundation.prototype.isRTL = function () {
|
|
795
812
|
return this.adapter.getScrollContentStyleValue('direction') === 'rtl';
|
|
796
813
|
};
|
|
797
814
|
return MDCTabScrollerFoundation;
|
|
@@ -873,29 +890,34 @@ var MDCTabScroller = /** @class */ (function (_super) {
|
|
|
873
890
|
MDCTabScroller.attachTo = function (root) {
|
|
874
891
|
return new MDCTabScroller(root);
|
|
875
892
|
};
|
|
893
|
+
// initialSyncWithDOM()
|
|
876
894
|
MDCTabScroller.prototype.initialize = function () {
|
|
877
|
-
this.
|
|
878
|
-
this.
|
|
895
|
+
this.area = this.root.querySelector(MDCTabScrollerFoundation.strings.AREA_SELECTOR);
|
|
896
|
+
this.content = this.root.querySelector(MDCTabScrollerFoundation.strings.CONTENT_SELECTOR);
|
|
879
897
|
};
|
|
880
898
|
MDCTabScroller.prototype.initialSyncWithDOM = function () {
|
|
881
899
|
var _this = this;
|
|
882
|
-
this.
|
|
883
|
-
|
|
884
|
-
|
|
885
|
-
this.
|
|
886
|
-
|
|
887
|
-
|
|
888
|
-
this.
|
|
889
|
-
this.
|
|
900
|
+
this.handleInteraction = function () {
|
|
901
|
+
_this.foundation.handleInteraction();
|
|
902
|
+
};
|
|
903
|
+
this.handleTransitionEnd = function (evt) {
|
|
904
|
+
_this.foundation.handleTransitionEnd(evt);
|
|
905
|
+
};
|
|
906
|
+
this.area.addEventListener('wheel', this.handleInteraction, component$1.applyPassive());
|
|
907
|
+
this.area.addEventListener('touchstart', this.handleInteraction, component$1.applyPassive());
|
|
908
|
+
this.area.addEventListener('pointerdown', this.handleInteraction, component$1.applyPassive());
|
|
909
|
+
this.area.addEventListener('mousedown', this.handleInteraction, component$1.applyPassive());
|
|
910
|
+
this.area.addEventListener('keydown', this.handleInteraction, component$1.applyPassive());
|
|
911
|
+
this.content.addEventListener('transitionend', this.handleTransitionEnd);
|
|
890
912
|
};
|
|
891
913
|
MDCTabScroller.prototype.destroy = function () {
|
|
892
914
|
_super.prototype.destroy.call(this);
|
|
893
|
-
this.
|
|
894
|
-
this.
|
|
895
|
-
this.
|
|
896
|
-
this.
|
|
897
|
-
this.
|
|
898
|
-
this.
|
|
915
|
+
this.area.removeEventListener('wheel', this.handleInteraction, component$1.applyPassive());
|
|
916
|
+
this.area.removeEventListener('touchstart', this.handleInteraction, component$1.applyPassive());
|
|
917
|
+
this.area.removeEventListener('pointerdown', this.handleInteraction, component$1.applyPassive());
|
|
918
|
+
this.area.removeEventListener('mousedown', this.handleInteraction, component$1.applyPassive());
|
|
919
|
+
this.area.removeEventListener('keydown', this.handleInteraction, component$1.applyPassive());
|
|
920
|
+
this.content.removeEventListener('transitionend', this.handleTransitionEnd);
|
|
899
921
|
};
|
|
900
922
|
MDCTabScroller.prototype.getDefaultFoundation = function () {
|
|
901
923
|
var _this = this;
|
|
@@ -906,25 +928,31 @@ var MDCTabScroller = /** @class */ (function (_super) {
|
|
|
906
928
|
eventTargetMatchesSelector: function (evtTarget, selector) {
|
|
907
929
|
return ponyfill.matches(evtTarget, selector);
|
|
908
930
|
},
|
|
909
|
-
addClass: function (className) {
|
|
910
|
-
|
|
911
|
-
|
|
931
|
+
addClass: function (className) {
|
|
932
|
+
_this.root.classList.add(className);
|
|
933
|
+
},
|
|
934
|
+
removeClass: function (className) {
|
|
935
|
+
_this.root.classList.remove(className);
|
|
936
|
+
},
|
|
937
|
+
addScrollAreaClass: function (className) {
|
|
938
|
+
_this.area.classList.add(className);
|
|
939
|
+
},
|
|
912
940
|
setScrollAreaStyleProperty: function (prop, value) {
|
|
913
|
-
|
|
941
|
+
_this.area.style.setProperty(prop, value);
|
|
914
942
|
},
|
|
915
943
|
setScrollContentStyleProperty: function (prop, value) {
|
|
916
|
-
|
|
944
|
+
_this.content.style.setProperty(prop, value);
|
|
917
945
|
},
|
|
918
946
|
getScrollContentStyleValue: function (propName) {
|
|
919
|
-
return window.getComputedStyle(_this.
|
|
947
|
+
return window.getComputedStyle(_this.content).getPropertyValue(propName);
|
|
920
948
|
},
|
|
921
|
-
setScrollAreaScrollLeft: function (scrollX) { return _this.
|
|
922
|
-
getScrollAreaScrollLeft: function () { return _this.
|
|
923
|
-
getScrollContentOffsetWidth: function () { return _this.
|
|
924
|
-
getScrollAreaOffsetWidth: function () { return _this.
|
|
925
|
-
computeScrollAreaClientRect: function () { return _this.
|
|
949
|
+
setScrollAreaScrollLeft: function (scrollX) { return _this.area.scrollLeft = scrollX; },
|
|
950
|
+
getScrollAreaScrollLeft: function () { return _this.area.scrollLeft; },
|
|
951
|
+
getScrollContentOffsetWidth: function () { return _this.content.offsetWidth; },
|
|
952
|
+
getScrollAreaOffsetWidth: function () { return _this.area.offsetWidth; },
|
|
953
|
+
computeScrollAreaClientRect: function () { return _this.area.getBoundingClientRect(); },
|
|
926
954
|
computeScrollContentClientRect: function () {
|
|
927
|
-
return _this.
|
|
955
|
+
return _this.content.getBoundingClientRect();
|
|
928
956
|
},
|
|
929
957
|
computeHorizontalScrollbarHeight: function () {
|
|
930
958
|
return computeHorizontalScrollbarHeight(document);
|
|
@@ -943,7 +971,7 @@ var MDCTabScroller = /** @class */ (function (_super) {
|
|
|
943
971
|
* Returns the width of the scroll content
|
|
944
972
|
*/
|
|
945
973
|
MDCTabScroller.prototype.getScrollContentWidth = function () {
|
|
946
|
-
return this.
|
|
974
|
+
return this.content.offsetWidth;
|
|
947
975
|
};
|
|
948
976
|
/**
|
|
949
977
|
* Increments the scroll value by the given amount
|
|
@@ -1124,7 +1152,9 @@ var MDCTabIndicatorFoundation = /** @class */ (function (_super) {
|
|
|
1124
1152
|
return {
|
|
1125
1153
|
addClass: function () { return undefined; },
|
|
1126
1154
|
removeClass: function () { return undefined; },
|
|
1127
|
-
computeContentClientRect: function () {
|
|
1155
|
+
computeContentClientRect: function () {
|
|
1156
|
+
return ({ top: 0, right: 0, bottom: 0, left: 0, width: 0, height: 0 });
|
|
1157
|
+
},
|
|
1128
1158
|
setContentStyleProperty: function () { return undefined; },
|
|
1129
1159
|
};
|
|
1130
1160
|
// tslint:enable:object-literal-sort-keys
|
|
@@ -1261,7 +1291,7 @@ var MDCTabIndicator = /** @class */ (function (_super) {
|
|
|
1261
1291
|
return new MDCTabIndicator(root);
|
|
1262
1292
|
};
|
|
1263
1293
|
MDCTabIndicator.prototype.initialize = function () {
|
|
1264
|
-
this.
|
|
1294
|
+
this.content = this.root.querySelector(MDCTabIndicatorFoundation.strings.CONTENT_SELECTOR);
|
|
1265
1295
|
};
|
|
1266
1296
|
MDCTabIndicator.prototype.computeContentClientRect = function () {
|
|
1267
1297
|
return this.foundation.computeContentClientRect();
|
|
@@ -1274,9 +1304,9 @@ var MDCTabIndicator = /** @class */ (function (_super) {
|
|
|
1274
1304
|
var adapter = {
|
|
1275
1305
|
addClass: function (className) { return _this.root.classList.add(className); },
|
|
1276
1306
|
removeClass: function (className) { return _this.root.classList.remove(className); },
|
|
1277
|
-
computeContentClientRect: function () { return _this.
|
|
1307
|
+
computeContentClientRect: function () { return _this.content.getBoundingClientRect(); },
|
|
1278
1308
|
setContentStyleProperty: function (prop, value) {
|
|
1279
|
-
|
|
1309
|
+
_this.content.style.setProperty(prop, value);
|
|
1280
1310
|
},
|
|
1281
1311
|
};
|
|
1282
1312
|
// tslint:enable:object-literal-sort-keys
|
|
@@ -1355,7 +1385,7 @@ var MDCTabFoundation = /** @class */ (function (_super) {
|
|
|
1355
1385
|
__extends$1(MDCTabFoundation, _super);
|
|
1356
1386
|
function MDCTabFoundation(adapter) {
|
|
1357
1387
|
var _this = _super.call(this, __assign$1(__assign$1({}, MDCTabFoundation.defaultAdapter), adapter)) || this;
|
|
1358
|
-
_this.
|
|
1388
|
+
_this.focusOnActivate = true;
|
|
1359
1389
|
return _this;
|
|
1360
1390
|
}
|
|
1361
1391
|
Object.defineProperty(MDCTabFoundation, "cssClasses", {
|
|
@@ -1406,7 +1436,7 @@ var MDCTabFoundation = /** @class */ (function (_super) {
|
|
|
1406
1436
|
* Sets whether the tab should focus itself when activated
|
|
1407
1437
|
*/
|
|
1408
1438
|
MDCTabFoundation.prototype.setFocusOnActivate = function (focusOnActivate) {
|
|
1409
|
-
this.
|
|
1439
|
+
this.focusOnActivate = focusOnActivate;
|
|
1410
1440
|
};
|
|
1411
1441
|
/**
|
|
1412
1442
|
* Activates the Tab
|
|
@@ -1416,7 +1446,7 @@ var MDCTabFoundation = /** @class */ (function (_super) {
|
|
|
1416
1446
|
this.adapter.setAttr(strings$2.ARIA_SELECTED, 'true');
|
|
1417
1447
|
this.adapter.setAttr(strings$2.TABINDEX, '0');
|
|
1418
1448
|
this.adapter.activateIndicator(previousIndicatorClientRect);
|
|
1419
|
-
if (this.
|
|
1449
|
+
if (this.focusOnActivate) {
|
|
1420
1450
|
this.adapter.focus();
|
|
1421
1451
|
}
|
|
1422
1452
|
};
|
|
@@ -1486,19 +1516,21 @@ var MDCTab = /** @class */ (function (_super) {
|
|
|
1486
1516
|
if (tabIndicatorFactory === void 0) { tabIndicatorFactory = function (el) { return new MDCTabIndicator(el); }; }
|
|
1487
1517
|
this.id = this.root.id;
|
|
1488
1518
|
var rippleFoundation = new component$1.MDCRippleFoundation(component$1.MDCRipple.createAdapter(this));
|
|
1489
|
-
this.
|
|
1519
|
+
this.ripple = rippleFactory(this.root, rippleFoundation);
|
|
1490
1520
|
var tabIndicatorElement = this.root.querySelector(MDCTabFoundation.strings.TAB_INDICATOR_SELECTOR);
|
|
1491
|
-
this.
|
|
1492
|
-
this.
|
|
1521
|
+
this.tabIndicator = tabIndicatorFactory(tabIndicatorElement);
|
|
1522
|
+
this.content = this.root.querySelector(MDCTabFoundation.strings.CONTENT_SELECTOR);
|
|
1493
1523
|
};
|
|
1494
1524
|
MDCTab.prototype.initialSyncWithDOM = function () {
|
|
1495
1525
|
var _this = this;
|
|
1496
|
-
this.
|
|
1497
|
-
|
|
1526
|
+
this.handleClick = function () {
|
|
1527
|
+
_this.foundation.handleClick();
|
|
1528
|
+
};
|
|
1529
|
+
this.listen('click', this.handleClick);
|
|
1498
1530
|
};
|
|
1499
1531
|
MDCTab.prototype.destroy = function () {
|
|
1500
|
-
this.unlisten('click', this.
|
|
1501
|
-
this.
|
|
1532
|
+
this.unlisten('click', this.handleClick);
|
|
1533
|
+
this.ripple.destroy();
|
|
1502
1534
|
_super.prototype.destroy.call(this);
|
|
1503
1535
|
};
|
|
1504
1536
|
MDCTab.prototype.getDefaultFoundation = function () {
|
|
@@ -1512,14 +1544,16 @@ var MDCTab = /** @class */ (function (_super) {
|
|
|
1512
1544
|
removeClass: function (className) { return _this.root.classList.remove(className); },
|
|
1513
1545
|
hasClass: function (className) { return _this.root.classList.contains(className); },
|
|
1514
1546
|
activateIndicator: function (previousIndicatorClientRect) {
|
|
1515
|
-
|
|
1547
|
+
_this.tabIndicator.activate(previousIndicatorClientRect);
|
|
1548
|
+
},
|
|
1549
|
+
deactivateIndicator: function () {
|
|
1550
|
+
_this.tabIndicator.deactivate();
|
|
1516
1551
|
},
|
|
1517
|
-
deactivateIndicator: function () { return _this.tabIndicator_.deactivate(); },
|
|
1518
1552
|
notifyInteracted: function () { return _this.emit(MDCTabFoundation.strings.INTERACTED_EVENT, { tabId: _this.id }, true /* bubble */); },
|
|
1519
1553
|
getOffsetLeft: function () { return _this.root.offsetLeft; },
|
|
1520
1554
|
getOffsetWidth: function () { return _this.root.offsetWidth; },
|
|
1521
|
-
getContentOffsetLeft: function () { return _this.
|
|
1522
|
-
getContentOffsetWidth: function () { return _this.
|
|
1555
|
+
getContentOffsetLeft: function () { return _this.content.offsetLeft; },
|
|
1556
|
+
getContentOffsetWidth: function () { return _this.content.offsetWidth; },
|
|
1523
1557
|
focus: function () { return _this.root.focus(); },
|
|
1524
1558
|
};
|
|
1525
1559
|
// tslint:enable:object-literal-sort-keys
|
|
@@ -1558,7 +1592,7 @@ var MDCTab = /** @class */ (function (_super) {
|
|
|
1558
1592
|
* Returns the indicator's client rect
|
|
1559
1593
|
*/
|
|
1560
1594
|
MDCTab.prototype.computeIndicatorClientRect = function () {
|
|
1561
|
-
return this.
|
|
1595
|
+
return this.tabIndicator.computeContentClientRect();
|
|
1562
1596
|
};
|
|
1563
1597
|
MDCTab.prototype.computeDimensions = function () {
|
|
1564
1598
|
return this.foundation.computeDimensions();
|
|
@@ -1657,7 +1691,7 @@ var MDCTabBarFoundation = /** @class */ (function (_super) {
|
|
|
1657
1691
|
__extends$3(MDCTabBarFoundation, _super);
|
|
1658
1692
|
function MDCTabBarFoundation(adapter) {
|
|
1659
1693
|
var _this = _super.call(this, __assign$3(__assign$3({}, MDCTabBarFoundation.defaultAdapter), adapter)) || this;
|
|
1660
|
-
_this.
|
|
1694
|
+
_this.useAutomaticActivation = false;
|
|
1661
1695
|
return _this;
|
|
1662
1696
|
}
|
|
1663
1697
|
Object.defineProperty(MDCTabBarFoundation, "strings", {
|
|
@@ -1688,8 +1722,12 @@ var MDCTabBarFoundation = /** @class */ (function (_super) {
|
|
|
1688
1722
|
activateTabAtIndex: function () { return undefined; },
|
|
1689
1723
|
deactivateTabAtIndex: function () { return undefined; },
|
|
1690
1724
|
focusTabAtIndex: function () { return undefined; },
|
|
1691
|
-
getTabIndicatorClientRectAtIndex: function () {
|
|
1692
|
-
|
|
1725
|
+
getTabIndicatorClientRectAtIndex: function () {
|
|
1726
|
+
return ({ top: 0, right: 0, bottom: 0, left: 0, width: 0, height: 0 });
|
|
1727
|
+
},
|
|
1728
|
+
getTabDimensionsAtIndex: function () {
|
|
1729
|
+
return ({ rootLeft: 0, rootRight: 0, contentLeft: 0, contentRight: 0 });
|
|
1730
|
+
},
|
|
1693
1731
|
getPreviousActiveTabIndex: function () { return -1; },
|
|
1694
1732
|
getFocusedTabIndex: function () { return -1; },
|
|
1695
1733
|
getIndexOfTabById: function () { return -1; },
|
|
@@ -1706,11 +1744,11 @@ var MDCTabBarFoundation = /** @class */ (function (_super) {
|
|
|
1706
1744
|
* See https://www.w3.org/TR/wai-aria-practices/#tabpanel for examples.
|
|
1707
1745
|
*/
|
|
1708
1746
|
MDCTabBarFoundation.prototype.setUseAutomaticActivation = function (useAutomaticActivation) {
|
|
1709
|
-
this.
|
|
1747
|
+
this.useAutomaticActivation = useAutomaticActivation;
|
|
1710
1748
|
};
|
|
1711
1749
|
MDCTabBarFoundation.prototype.activateTab = function (index) {
|
|
1712
1750
|
var previousActiveIndex = this.adapter.getPreviousActiveTabIndex();
|
|
1713
|
-
if (!this.
|
|
1751
|
+
if (!this.indexIsInRange(index) || index === previousActiveIndex) {
|
|
1714
1752
|
return;
|
|
1715
1753
|
}
|
|
1716
1754
|
var previousClientRect;
|
|
@@ -1725,30 +1763,30 @@ var MDCTabBarFoundation = /** @class */ (function (_super) {
|
|
|
1725
1763
|
};
|
|
1726
1764
|
MDCTabBarFoundation.prototype.handleKeyDown = function (evt) {
|
|
1727
1765
|
// Get the key from the event
|
|
1728
|
-
var key = this.
|
|
1766
|
+
var key = this.getKeyFromEvent(evt);
|
|
1729
1767
|
// Early exit if the event key isn't one of the keyboard navigation keys
|
|
1730
1768
|
if (key === undefined) {
|
|
1731
1769
|
return;
|
|
1732
1770
|
}
|
|
1733
1771
|
// Prevent default behavior for movement keys, but not for activation keys, since :active is used to apply ripple
|
|
1734
|
-
if (!this.
|
|
1772
|
+
if (!this.isActivationKey(key)) {
|
|
1735
1773
|
evt.preventDefault();
|
|
1736
1774
|
}
|
|
1737
|
-
if (this.
|
|
1738
|
-
if (this.
|
|
1775
|
+
if (this.useAutomaticActivation) {
|
|
1776
|
+
if (this.isActivationKey(key)) {
|
|
1739
1777
|
return;
|
|
1740
1778
|
}
|
|
1741
|
-
var index = this.
|
|
1779
|
+
var index = this.determineTargetFromKey(this.adapter.getPreviousActiveTabIndex(), key);
|
|
1742
1780
|
this.adapter.setActiveTab(index);
|
|
1743
1781
|
this.scrollIntoView(index);
|
|
1744
1782
|
}
|
|
1745
1783
|
else {
|
|
1746
1784
|
var focusedTabIndex = this.adapter.getFocusedTabIndex();
|
|
1747
|
-
if (this.
|
|
1785
|
+
if (this.isActivationKey(key)) {
|
|
1748
1786
|
this.adapter.setActiveTab(focusedTabIndex);
|
|
1749
1787
|
}
|
|
1750
1788
|
else {
|
|
1751
|
-
var index = this.
|
|
1789
|
+
var index = this.determineTargetFromKey(focusedTabIndex, key);
|
|
1752
1790
|
this.adapter.focusTabAtIndex(index);
|
|
1753
1791
|
this.scrollIntoView(index);
|
|
1754
1792
|
}
|
|
@@ -1766,30 +1804,33 @@ var MDCTabBarFoundation = /** @class */ (function (_super) {
|
|
|
1766
1804
|
*/
|
|
1767
1805
|
MDCTabBarFoundation.prototype.scrollIntoView = function (index) {
|
|
1768
1806
|
// Early exit if the index is out of range
|
|
1769
|
-
if (!this.
|
|
1807
|
+
if (!this.indexIsInRange(index)) {
|
|
1770
1808
|
return;
|
|
1771
1809
|
}
|
|
1772
1810
|
// Always scroll to 0 if scrolling to the 0th index
|
|
1773
1811
|
if (index === 0) {
|
|
1774
|
-
|
|
1812
|
+
this.adapter.scrollTo(0);
|
|
1813
|
+
return;
|
|
1775
1814
|
}
|
|
1776
1815
|
// Always scroll to the max value if scrolling to the Nth index
|
|
1777
1816
|
// MDCTabScroller.scrollTo() will never scroll past the max possible value
|
|
1778
1817
|
if (index === this.adapter.getTabListLength() - 1) {
|
|
1779
|
-
|
|
1818
|
+
this.adapter.scrollTo(this.adapter.getScrollContentWidth());
|
|
1819
|
+
return;
|
|
1780
1820
|
}
|
|
1781
|
-
if (this.
|
|
1782
|
-
|
|
1821
|
+
if (this.isRTL()) {
|
|
1822
|
+
this.scrollIntoViewImplRTL(index);
|
|
1823
|
+
return;
|
|
1783
1824
|
}
|
|
1784
|
-
this.
|
|
1825
|
+
this.scrollIntoViewImpl(index);
|
|
1785
1826
|
};
|
|
1786
1827
|
/**
|
|
1787
1828
|
* Private method for determining the index of the destination tab based on what key was pressed
|
|
1788
1829
|
* @param origin The original index from which to determine the destination
|
|
1789
1830
|
* @param key The name of the key
|
|
1790
1831
|
*/
|
|
1791
|
-
MDCTabBarFoundation.prototype.
|
|
1792
|
-
var isRTL = this.
|
|
1832
|
+
MDCTabBarFoundation.prototype.determineTargetFromKey = function (origin, key) {
|
|
1833
|
+
var isRTL = this.isRTL();
|
|
1793
1834
|
var maxIndex = this.adapter.getTabListLength() - 1;
|
|
1794
1835
|
var shouldGoToEnd = key === strings$1.END_KEY;
|
|
1795
1836
|
var shouldDecrement = key === strings$1.ARROW_LEFT_KEY && !isRTL || key === strings$1.ARROW_RIGHT_KEY && isRTL;
|
|
@@ -1822,7 +1863,7 @@ var MDCTabBarFoundation = /** @class */ (function (_super) {
|
|
|
1822
1863
|
* @param scrollPosition The current scroll position
|
|
1823
1864
|
* @param barWidth The width of the Tab Bar
|
|
1824
1865
|
*/
|
|
1825
|
-
MDCTabBarFoundation.prototype.
|
|
1866
|
+
MDCTabBarFoundation.prototype.calculateScrollIncrement = function (index, nextIndex, scrollPosition, barWidth) {
|
|
1826
1867
|
var nextTabDimensions = this.adapter.getTabDimensionsAtIndex(nextIndex);
|
|
1827
1868
|
var relativeContentLeft = nextTabDimensions.contentLeft - scrollPosition - barWidth;
|
|
1828
1869
|
var relativeContentRight = nextTabDimensions.contentRight - scrollPosition;
|
|
@@ -1841,7 +1882,7 @@ var MDCTabBarFoundation = /** @class */ (function (_super) {
|
|
|
1841
1882
|
* @param barWidth The width of the Tab Bar
|
|
1842
1883
|
* @param scrollContentWidth The width of the scroll content
|
|
1843
1884
|
*/
|
|
1844
|
-
MDCTabBarFoundation.prototype.
|
|
1885
|
+
MDCTabBarFoundation.prototype.calculateScrollIncrementRTL = function (index, nextIndex, scrollPosition, barWidth, scrollContentWidth) {
|
|
1845
1886
|
var nextTabDimensions = this.adapter.getTabDimensionsAtIndex(nextIndex);
|
|
1846
1887
|
var relativeContentLeft = scrollContentWidth - nextTabDimensions.contentLeft - scrollPosition;
|
|
1847
1888
|
var relativeContentRight = scrollContentWidth - nextTabDimensions.contentRight - scrollPosition - barWidth;
|
|
@@ -1859,7 +1900,7 @@ var MDCTabBarFoundation = /** @class */ (function (_super) {
|
|
|
1859
1900
|
* @param scrollPosition The current scroll position
|
|
1860
1901
|
* @param barWidth The width of the tab bar
|
|
1861
1902
|
*/
|
|
1862
|
-
MDCTabBarFoundation.prototype.
|
|
1903
|
+
MDCTabBarFoundation.prototype.findAdjacentTabIndexClosestToEdge = function (index, tabDimensions, scrollPosition, barWidth) {
|
|
1863
1904
|
/**
|
|
1864
1905
|
* Tabs are laid out in the Tab Scroller like this:
|
|
1865
1906
|
*
|
|
@@ -1905,7 +1946,7 @@ var MDCTabBarFoundation = /** @class */ (function (_super) {
|
|
|
1905
1946
|
* @param barWidth The width of the tab bar
|
|
1906
1947
|
* @param scrollContentWidth The width of the scroller content
|
|
1907
1948
|
*/
|
|
1908
|
-
MDCTabBarFoundation.prototype.
|
|
1949
|
+
MDCTabBarFoundation.prototype.findAdjacentTabIndexClosestToEdgeRTL = function (index, tabDimensions, scrollPosition, barWidth, scrollContentWidth) {
|
|
1909
1950
|
var rootLeft = scrollContentWidth - tabDimensions.rootLeft - barWidth - scrollPosition;
|
|
1910
1951
|
var rootRight = scrollContentWidth - tabDimensions.rootRight - scrollPosition;
|
|
1911
1952
|
var rootDelta = rootLeft + rootRight;
|
|
@@ -1923,57 +1964,57 @@ var MDCTabBarFoundation = /** @class */ (function (_super) {
|
|
|
1923
1964
|
* Returns the key associated with a keydown event
|
|
1924
1965
|
* @param evt The keydown event
|
|
1925
1966
|
*/
|
|
1926
|
-
MDCTabBarFoundation.prototype.
|
|
1967
|
+
MDCTabBarFoundation.prototype.getKeyFromEvent = function (evt) {
|
|
1927
1968
|
if (ACCEPTABLE_KEYS.has(evt.key)) {
|
|
1928
1969
|
return evt.key;
|
|
1929
1970
|
}
|
|
1930
1971
|
return KEYCODE_MAP.get(evt.keyCode);
|
|
1931
1972
|
};
|
|
1932
|
-
MDCTabBarFoundation.prototype.
|
|
1973
|
+
MDCTabBarFoundation.prototype.isActivationKey = function (key) {
|
|
1933
1974
|
return key === strings$1.SPACE_KEY || key === strings$1.ENTER_KEY;
|
|
1934
1975
|
};
|
|
1935
1976
|
/**
|
|
1936
1977
|
* Returns whether a given index is inclusively between the ends
|
|
1937
1978
|
* @param index The index to test
|
|
1938
1979
|
*/
|
|
1939
|
-
MDCTabBarFoundation.prototype.
|
|
1980
|
+
MDCTabBarFoundation.prototype.indexIsInRange = function (index) {
|
|
1940
1981
|
return index >= 0 && index < this.adapter.getTabListLength();
|
|
1941
1982
|
};
|
|
1942
1983
|
/**
|
|
1943
1984
|
* Returns the view's RTL property
|
|
1944
1985
|
*/
|
|
1945
|
-
MDCTabBarFoundation.prototype.
|
|
1986
|
+
MDCTabBarFoundation.prototype.isRTL = function () {
|
|
1946
1987
|
return this.adapter.isRTL();
|
|
1947
1988
|
};
|
|
1948
1989
|
/**
|
|
1949
1990
|
* Scrolls the tab at the given index into view for left-to-right user agents.
|
|
1950
1991
|
* @param index The index of the tab to scroll into view
|
|
1951
1992
|
*/
|
|
1952
|
-
MDCTabBarFoundation.prototype.
|
|
1993
|
+
MDCTabBarFoundation.prototype.scrollIntoViewImpl = function (index) {
|
|
1953
1994
|
var scrollPosition = this.adapter.getScrollPosition();
|
|
1954
1995
|
var barWidth = this.adapter.getOffsetWidth();
|
|
1955
1996
|
var tabDimensions = this.adapter.getTabDimensionsAtIndex(index);
|
|
1956
|
-
var nextIndex = this.
|
|
1957
|
-
if (!this.
|
|
1997
|
+
var nextIndex = this.findAdjacentTabIndexClosestToEdge(index, tabDimensions, scrollPosition, barWidth);
|
|
1998
|
+
if (!this.indexIsInRange(nextIndex)) {
|
|
1958
1999
|
return;
|
|
1959
2000
|
}
|
|
1960
|
-
var scrollIncrement = this.
|
|
2001
|
+
var scrollIncrement = this.calculateScrollIncrement(index, nextIndex, scrollPosition, barWidth);
|
|
1961
2002
|
this.adapter.incrementScroll(scrollIncrement);
|
|
1962
2003
|
};
|
|
1963
2004
|
/**
|
|
1964
2005
|
* Scrolls the tab at the given index into view in RTL
|
|
1965
2006
|
* @param index The tab index to make visible
|
|
1966
2007
|
*/
|
|
1967
|
-
MDCTabBarFoundation.prototype.
|
|
2008
|
+
MDCTabBarFoundation.prototype.scrollIntoViewImplRTL = function (index) {
|
|
1968
2009
|
var scrollPosition = this.adapter.getScrollPosition();
|
|
1969
2010
|
var barWidth = this.adapter.getOffsetWidth();
|
|
1970
2011
|
var tabDimensions = this.adapter.getTabDimensionsAtIndex(index);
|
|
1971
2012
|
var scrollWidth = this.adapter.getScrollContentWidth();
|
|
1972
|
-
var nextIndex = this.
|
|
1973
|
-
if (!this.
|
|
2013
|
+
var nextIndex = this.findAdjacentTabIndexClosestToEdgeRTL(index, tabDimensions, scrollPosition, barWidth, scrollWidth);
|
|
2014
|
+
if (!this.indexIsInRange(nextIndex)) {
|
|
1974
2015
|
return;
|
|
1975
2016
|
}
|
|
1976
|
-
var scrollIncrement = this.
|
|
2017
|
+
var scrollIncrement = this.calculateScrollIncrementRTL(index, nextIndex, scrollPosition, barWidth, scrollWidth);
|
|
1977
2018
|
this.adapter.incrementScroll(scrollIncrement);
|
|
1978
2019
|
};
|
|
1979
2020
|
return MDCTabBarFoundation;
|
|
@@ -2013,7 +2054,20 @@ var MDCTabBar = /** @class */ (function (_super) {
|
|
|
2013
2054
|
};
|
|
2014
2055
|
Object.defineProperty(MDCTabBar.prototype, "focusOnActivate", {
|
|
2015
2056
|
set: function (focusOnActivate) {
|
|
2016
|
-
|
|
2057
|
+
var e_1, _a;
|
|
2058
|
+
try {
|
|
2059
|
+
for (var _b = __values(this.tabList), _c = _b.next(); !_c.done; _c = _b.next()) {
|
|
2060
|
+
var tab = _c.value;
|
|
2061
|
+
tab.focusOnActivate = focusOnActivate;
|
|
2062
|
+
}
|
|
2063
|
+
}
|
|
2064
|
+
catch (e_1_1) { e_1 = { error: e_1_1 }; }
|
|
2065
|
+
finally {
|
|
2066
|
+
try {
|
|
2067
|
+
if (_c && !_c.done && (_a = _b.return)) _a.call(_b);
|
|
2068
|
+
}
|
|
2069
|
+
finally { if (e_1) throw e_1.error; }
|
|
2070
|
+
}
|
|
2017
2071
|
},
|
|
2018
2072
|
enumerable: false,
|
|
2019
2073
|
configurable: true
|
|
@@ -2028,31 +2082,46 @@ var MDCTabBar = /** @class */ (function (_super) {
|
|
|
2028
2082
|
MDCTabBar.prototype.initialize = function (tabFactory, tabScrollerFactory) {
|
|
2029
2083
|
if (tabFactory === void 0) { tabFactory = function (el) { return new MDCTab(el); }; }
|
|
2030
2084
|
if (tabScrollerFactory === void 0) { tabScrollerFactory = function (el) { return new MDCTabScroller(el); }; }
|
|
2031
|
-
this.
|
|
2032
|
-
this.
|
|
2085
|
+
this.tabList = this.instantiateTabs(tabFactory);
|
|
2086
|
+
this.tabScroller = this.instantiatetabScroller(tabScrollerFactory);
|
|
2033
2087
|
};
|
|
2034
2088
|
MDCTabBar.prototype.initialSyncWithDOM = function () {
|
|
2035
2089
|
var _this = this;
|
|
2036
|
-
this.
|
|
2037
|
-
|
|
2090
|
+
this.handleTabInteraction = function (evt) {
|
|
2091
|
+
_this.foundation.handleTabInteraction(evt);
|
|
2092
|
+
};
|
|
2093
|
+
this.handleKeyDown = function (evt) {
|
|
2094
|
+
_this.foundation.handleKeyDown(evt);
|
|
2038
2095
|
};
|
|
2039
|
-
this.
|
|
2040
|
-
this.listen(
|
|
2041
|
-
|
|
2042
|
-
|
|
2043
|
-
if (this.tabList_[i].active) {
|
|
2096
|
+
this.listen(MDCTabFoundation.strings.INTERACTED_EVENT, this.handleTabInteraction);
|
|
2097
|
+
this.listen('keydown', this.handleKeyDown);
|
|
2098
|
+
for (var i = 0; i < this.tabList.length; i++) {
|
|
2099
|
+
if (this.tabList[i].active) {
|
|
2044
2100
|
this.scrollIntoView(i);
|
|
2045
2101
|
break;
|
|
2046
2102
|
}
|
|
2047
2103
|
}
|
|
2048
2104
|
};
|
|
2049
2105
|
MDCTabBar.prototype.destroy = function () {
|
|
2106
|
+
var e_2, _a;
|
|
2050
2107
|
_super.prototype.destroy.call(this);
|
|
2051
|
-
this.unlisten(MDCTabFoundation.strings.INTERACTED_EVENT, this.
|
|
2052
|
-
this.unlisten('keydown', this.
|
|
2053
|
-
|
|
2054
|
-
|
|
2055
|
-
|
|
2108
|
+
this.unlisten(MDCTabFoundation.strings.INTERACTED_EVENT, this.handleTabInteraction);
|
|
2109
|
+
this.unlisten('keydown', this.handleKeyDown);
|
|
2110
|
+
try {
|
|
2111
|
+
for (var _b = __values(this.tabList), _c = _b.next(); !_c.done; _c = _b.next()) {
|
|
2112
|
+
var tab = _c.value;
|
|
2113
|
+
tab.destroy();
|
|
2114
|
+
}
|
|
2115
|
+
}
|
|
2116
|
+
catch (e_2_1) { e_2 = { error: e_2_1 }; }
|
|
2117
|
+
finally {
|
|
2118
|
+
try {
|
|
2119
|
+
if (_c && !_c.done && (_a = _b.return)) _a.call(_b);
|
|
2120
|
+
}
|
|
2121
|
+
finally { if (e_2) throw e_2.error; }
|
|
2122
|
+
}
|
|
2123
|
+
if (this.tabScroller) {
|
|
2124
|
+
this.tabScroller.destroy();
|
|
2056
2125
|
}
|
|
2057
2126
|
};
|
|
2058
2127
|
MDCTabBar.prototype.getDefaultFoundation = function () {
|
|
@@ -2061,48 +2130,56 @@ var MDCTabBar = /** @class */ (function (_super) {
|
|
|
2061
2130
|
// To ensure we don't accidentally omit any methods, we need a separate, strongly typed adapter variable.
|
|
2062
2131
|
// tslint:disable:object-literal-sort-keys Methods should be in the same order as the adapter interface.
|
|
2063
2132
|
var adapter = {
|
|
2064
|
-
scrollTo: function (scrollX) {
|
|
2133
|
+
scrollTo: function (scrollX) {
|
|
2134
|
+
_this.tabScroller.scrollTo(scrollX);
|
|
2135
|
+
},
|
|
2065
2136
|
incrementScroll: function (scrollXIncrement) {
|
|
2066
|
-
|
|
2137
|
+
_this.tabScroller.incrementScroll(scrollXIncrement);
|
|
2067
2138
|
},
|
|
2068
|
-
getScrollPosition: function () { return _this.
|
|
2069
|
-
getScrollContentWidth: function () { return _this.
|
|
2139
|
+
getScrollPosition: function () { return _this.tabScroller.getScrollPosition(); },
|
|
2140
|
+
getScrollContentWidth: function () { return _this.tabScroller.getScrollContentWidth(); },
|
|
2070
2141
|
getOffsetWidth: function () { return _this.root.offsetWidth; },
|
|
2071
2142
|
isRTL: function () { return window.getComputedStyle(_this.root).getPropertyValue('direction') === 'rtl'; },
|
|
2072
|
-
setActiveTab: function (index) {
|
|
2143
|
+
setActiveTab: function (index) {
|
|
2144
|
+
_this.foundation.activateTab(index);
|
|
2145
|
+
},
|
|
2073
2146
|
activateTabAtIndex: function (index, clientRect) {
|
|
2074
|
-
|
|
2147
|
+
_this.tabList[index].activate(clientRect);
|
|
2148
|
+
},
|
|
2149
|
+
deactivateTabAtIndex: function (index) {
|
|
2150
|
+
_this.tabList[index].deactivate();
|
|
2151
|
+
},
|
|
2152
|
+
focusTabAtIndex: function (index) {
|
|
2153
|
+
_this.tabList[index].focus();
|
|
2075
2154
|
},
|
|
2076
|
-
deactivateTabAtIndex: function (index) { return _this.tabList_[index].deactivate(); },
|
|
2077
|
-
focusTabAtIndex: function (index) { return _this.tabList_[index].focus(); },
|
|
2078
2155
|
getTabIndicatorClientRectAtIndex: function (index) {
|
|
2079
|
-
return _this.
|
|
2156
|
+
return _this.tabList[index].computeIndicatorClientRect();
|
|
2080
2157
|
},
|
|
2081
2158
|
getTabDimensionsAtIndex: function (index) {
|
|
2082
|
-
return _this.
|
|
2159
|
+
return _this.tabList[index].computeDimensions();
|
|
2083
2160
|
},
|
|
2084
2161
|
getPreviousActiveTabIndex: function () {
|
|
2085
|
-
for (var i = 0; i < _this.
|
|
2086
|
-
if (_this.
|
|
2162
|
+
for (var i = 0; i < _this.tabList.length; i++) {
|
|
2163
|
+
if (_this.tabList[i].active) {
|
|
2087
2164
|
return i;
|
|
2088
2165
|
}
|
|
2089
2166
|
}
|
|
2090
2167
|
return -1;
|
|
2091
2168
|
},
|
|
2092
2169
|
getFocusedTabIndex: function () {
|
|
2093
|
-
var tabElements = _this.
|
|
2170
|
+
var tabElements = _this.getTabElements();
|
|
2094
2171
|
var activeElement = document.activeElement;
|
|
2095
2172
|
return tabElements.indexOf(activeElement);
|
|
2096
2173
|
},
|
|
2097
2174
|
getIndexOfTabById: function (id) {
|
|
2098
|
-
for (var i = 0; i < _this.
|
|
2099
|
-
if (_this.
|
|
2175
|
+
for (var i = 0; i < _this.tabList.length; i++) {
|
|
2176
|
+
if (_this.tabList[i].id === id) {
|
|
2100
2177
|
return i;
|
|
2101
2178
|
}
|
|
2102
2179
|
}
|
|
2103
2180
|
return -1;
|
|
2104
2181
|
},
|
|
2105
|
-
getTabListLength: function () { return _this.
|
|
2182
|
+
getTabListLength: function () { return _this.tabList.length; },
|
|
2106
2183
|
notifyTabActivated: function (index) { return _this.emit(strings.TAB_ACTIVATED_EVENT, { index: index }, true); },
|
|
2107
2184
|
};
|
|
2108
2185
|
// tslint:enable:object-literal-sort-keys
|
|
@@ -2125,14 +2202,14 @@ var MDCTabBar = /** @class */ (function (_super) {
|
|
|
2125
2202
|
/**
|
|
2126
2203
|
* Returns all the tab elements in a nice clean array
|
|
2127
2204
|
*/
|
|
2128
|
-
MDCTabBar.prototype.
|
|
2205
|
+
MDCTabBar.prototype.getTabElements = function () {
|
|
2129
2206
|
return [].slice.call(this.root.querySelectorAll(strings.TAB_SELECTOR));
|
|
2130
2207
|
};
|
|
2131
2208
|
/**
|
|
2132
2209
|
* Instantiates tab components on all child tab elements
|
|
2133
2210
|
*/
|
|
2134
|
-
MDCTabBar.prototype.
|
|
2135
|
-
return this.
|
|
2211
|
+
MDCTabBar.prototype.instantiateTabs = function (tabFactory) {
|
|
2212
|
+
return this.getTabElements().map(function (el) {
|
|
2136
2213
|
el.id = el.id || "mdc-tab-" + ++tabIdCounter;
|
|
2137
2214
|
return tabFactory(el);
|
|
2138
2215
|
});
|
|
@@ -2140,7 +2217,7 @@ var MDCTabBar = /** @class */ (function (_super) {
|
|
|
2140
2217
|
/**
|
|
2141
2218
|
* Instantiates tab scroller component on the child tab scroller element
|
|
2142
2219
|
*/
|
|
2143
|
-
MDCTabBar.prototype.
|
|
2220
|
+
MDCTabBar.prototype.instantiatetabScroller = function (tabScrollerFactory) {
|
|
2144
2221
|
var tabScrollerElement = this.root.querySelector(strings.TAB_SCROLLER_SELECTOR);
|
|
2145
2222
|
if (tabScrollerElement) {
|
|
2146
2223
|
return tabScrollerFactory(tabScrollerElement);
|
|
@@ -2168,12 +2245,12 @@ function setActiveTab(tabs, index) {
|
|
|
2168
2245
|
return result;
|
|
2169
2246
|
}
|
|
2170
2247
|
|
|
2171
|
-
const tabBarCss = ":host{--mdc-theme-primary:var(\n --lime-primary-color,\n rgb(var(--color-teal-default))\n );--mdc-theme-secondary:var(\n --lime-secondary-color,\n rgb(var(--contrast-1100))\n );--mdc-theme-on-primary:var(\n --lime-on-primary-color,\n rgb(var(--contrast-100))\n );--mdc-theme-on-secondary:var(\n --lime-on-secondary-color,\n rgb(var(--contrast-100))\n );--mdc-theme-text-disabled-on-background:var(\n --lime-text-disabled-on-background-color,\n rgba(var(--contrast-1700), 0.38)\n );--mdc-theme-text-primary-on-background:var(\n --lime-text-primary-on-background-color,\n rgba(var(--contrast-1700), 0.87)\n );--mdc-theme-text-secondary-on-background:var(\n --lime-text-secondary-on-background-color,\n rgba(var(--contrast-1700), 0.54)\n );--lime-error-text-color:rgb(var(--color-red-darker));--mdc-theme-surface:var(\n --lime-surface-background-color,\n rgb(var(--contrast-100))\n );--mdc-theme-on-surface:var(\n --lime-on-surface-color,\n var(--lime-text-primary-on-background-color)\n )}.mdc-tab-bar{width:100%}.mdc-tab{height:48px}.mdc-tab--stacked{height:72px}.mdc-tab-scroller{overflow-y:hidden}.mdc-tab-scroller.mdc-tab-scroller--animating .mdc-tab-scroller__scroll-content{transition:250ms transform cubic-bezier(0.4, 0, 0.2, 1)}.mdc-tab-scroller__test{position:absolute;top:-9999px;width:100px;height:100px;overflow-x:scroll}.mdc-tab-scroller__scroll-area{-webkit-overflow-scrolling:touch;display:flex;overflow-x:hidden}.mdc-tab-scroller__scroll-area::-webkit-scrollbar,.mdc-tab-scroller__test::-webkit-scrollbar{display:none}.mdc-tab-scroller__scroll-area--scroll{overflow-x:scroll}.mdc-tab-scroller__scroll-content{position:relative;display:flex;flex:1 0 auto;transform:none;will-change:transform}.mdc-tab-scroller--align-start .mdc-tab-scroller__scroll-content{justify-content:flex-start}.mdc-tab-scroller--align-end .mdc-tab-scroller__scroll-content{justify-content:flex-end}.mdc-tab-scroller--align-center .mdc-tab-scroller__scroll-content{justify-content:center}.mdc-tab-scroller--animating .mdc-tab-scroller__scroll-area{-webkit-overflow-scrolling:auto}.mdc-tab-indicator{display:flex;position:absolute;top:0;left:0;justify-content:center;width:100%;height:100%;pointer-events:none;z-index:1}.mdc-tab-indicator .mdc-tab-indicator__content--underline{border-color:#26a69a;border-color:var(--mdc-theme-primary, #26a69a)}.mdc-tab-indicator .mdc-tab-indicator__content--icon{color:#575756;color:var(--mdc-theme-secondary, #575756)}.mdc-tab-indicator .mdc-tab-indicator__content--underline{border-top-width:2px}.mdc-tab-indicator .mdc-tab-indicator__content--icon{height:34px;font-size:34px}.mdc-tab-indicator__content{transform-origin:left;opacity:0}.mdc-tab-indicator__content--underline{align-self:flex-end;box-sizing:border-box;width:100%;border-top-style:solid}.mdc-tab-indicator__content--icon{align-self:center;margin:0 auto}.mdc-tab-indicator--active .mdc-tab-indicator__content{opacity:1}.mdc-tab-indicator .mdc-tab-indicator__content{transition:250ms transform cubic-bezier(0.4, 0, 0.2, 1)}.mdc-tab-indicator--no-transition .mdc-tab-indicator__content{transition:none}.mdc-tab-indicator--fade .mdc-tab-indicator__content{transition:150ms opacity linear}.mdc-tab-indicator--active.mdc-tab-indicator--fade .mdc-tab-indicator__content{transition-delay:100ms}.mdc-tab{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-family:Roboto, sans-serif;font-family:var(--mdc-typography-button-font-family, var(--mdc-typography-font-family, Roboto, sans-serif));font-size:0.875rem;font-size:var(--mdc-typography-button-font-size, 0.875rem);line-height:2.25rem;line-height:var(--mdc-typography-button-line-height, 2.25rem);font-weight:500;font-weight:var(--mdc-typography-button-font-weight, 500);letter-spacing:0.0892857143em;letter-spacing:var(--mdc-typography-button-letter-spacing, 0.0892857143em);text-decoration:none;text-decoration:var(--mdc-typography-button-text-decoration, none);text-transform:none;text-transform:var(--mdc-typography-button-text-transform, none);padding-right:24px;padding-left:24px;min-width:90px;position:relative;display:flex;flex:1 0 auto;justify-content:center;box-sizing:border-box;margin:0;padding-top:0;padding-bottom:0;border:none;outline:none;background:none;text-align:center;white-space:nowrap;cursor:pointer;-webkit-appearance:none;z-index:1}.mdc-tab .mdc-tab__text-label{color:rgba(0, 0, 0, 0.6)}.mdc-tab .mdc-tab__icon{color:rgba(0, 0, 0, 0.54);fill:currentColor}.mdc-tab::-moz-focus-inner{padding:0;border:0}.mdc-tab--min-width{flex:0 1 auto}.mdc-tab__content{position:relative;display:flex;align-items:center;justify-content:center;height:inherit;pointer-events:none}.mdc-tab__text-label{transition:150ms color linear;display:inline-block;line-height:1;z-index:2}.mdc-tab__icon{transition:150ms color linear;width:24px;height:24px;font-size:24px;z-index:2}.mdc-tab--stacked .mdc-tab__content{flex-direction:column;align-items:center;justify-content:center}.mdc-tab--stacked .mdc-tab__text-label{padding-top:6px;padding-bottom:4px}.mdc-tab--active .mdc-tab__text-label{color:#26a69a;color:var(--mdc-theme-primary, #26a69a)}.mdc-tab--active .mdc-tab__icon{color:#26a69a;color:var(--mdc-theme-primary, #26a69a);fill:currentColor}.mdc-tab--active .mdc-tab__text-label,.mdc-tab--active .mdc-tab__icon{transition-delay:100ms}.mdc-tab:not(.mdc-tab--stacked) .mdc-tab__icon+.mdc-tab__text-label{padding-left:8px;padding-right:0}[dir=rtl] .mdc-tab:not(.mdc-tab--stacked) .mdc-tab__icon+.mdc-tab__text-label,.mdc-tab:not(.mdc-tab--stacked) .mdc-tab__icon+.mdc-tab__text-label[dir=rtl]{padding-left:0;padding-right:8px}@keyframes mdc-ripple-fg-radius-in{from{animation-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transform:translate(var(--mdc-ripple-fg-translate-start, 0)) scale(1)}to{transform:translate(var(--mdc-ripple-fg-translate-end, 0)) scale(var(--mdc-ripple-fg-scale, 1))}}@keyframes mdc-ripple-fg-opacity-in{from{animation-timing-function:linear;opacity:0}to{opacity:var(--mdc-ripple-fg-opacity, 0)}}@keyframes mdc-ripple-fg-opacity-out{from{animation-timing-function:linear;opacity:var(--mdc-ripple-fg-opacity, 0)}to{opacity:0}}.mdc-tab{--mdc-ripple-fg-size:0;--mdc-ripple-left:0;--mdc-ripple-top:0;--mdc-ripple-fg-scale:1;--mdc-ripple-fg-translate-end:0;--mdc-ripple-fg-translate-start:0;-webkit-tap-highlight-color:rgba(0, 0, 0, 0)}.mdc-tab .mdc-tab__ripple::before,.mdc-tab .mdc-tab__ripple::after{position:absolute;border-radius:50%;opacity:0;pointer-events:none;content:\"\"}.mdc-tab .mdc-tab__ripple::before{transition:opacity 15ms linear, background-color 15ms linear;z-index:1;z-index:var(--mdc-ripple-z-index, 1)}.mdc-tab .mdc-tab__ripple::after{z-index:0;z-index:var(--mdc-ripple-z-index, 0)}.mdc-tab.mdc-ripple-upgraded .mdc-tab__ripple::before{transform:scale(var(--mdc-ripple-fg-scale, 1))}.mdc-tab.mdc-ripple-upgraded .mdc-tab__ripple::after{top:0;left:0;transform:scale(0);transform-origin:center center}.mdc-tab.mdc-ripple-upgraded--unbounded .mdc-tab__ripple::after{top:var(--mdc-ripple-top, 0);left:var(--mdc-ripple-left, 0)}.mdc-tab.mdc-ripple-upgraded--foreground-activation .mdc-tab__ripple::after{animation:mdc-ripple-fg-radius-in 225ms forwards, mdc-ripple-fg-opacity-in 75ms forwards}.mdc-tab.mdc-ripple-upgraded--foreground-deactivation .mdc-tab__ripple::after{animation:mdc-ripple-fg-opacity-out 150ms;transform:translate(var(--mdc-ripple-fg-translate-end, 0)) scale(var(--mdc-ripple-fg-scale, 1))}.mdc-tab .mdc-tab__ripple::before,.mdc-tab .mdc-tab__ripple::after{top:calc(50% - 100%);left:calc(50% - 100%);width:200%;height:200%}.mdc-tab.mdc-ripple-upgraded .mdc-tab__ripple::after{width:var(--mdc-ripple-fg-size, 100%);height:var(--mdc-ripple-fg-size, 100%)}.mdc-tab .mdc-tab__ripple::before,.mdc-tab .mdc-tab__ripple::after{background-color:#26a69a;background-color:var(--mdc-ripple-color, var(--mdc-theme-primary, #26a69a))}.mdc-tab:hover .mdc-tab__ripple::before,.mdc-tab.mdc-ripple-surface--hover .mdc-tab__ripple::before{opacity:0.08;opacity:var(--mdc-ripple-hover-opacity, 0.08)}.mdc-tab.mdc-ripple-upgraded--background-focused .mdc-tab__ripple::before,.mdc-tab:not(.mdc-ripple-upgraded):focus .mdc-tab__ripple::before{transition-duration:75ms;opacity:0.24;opacity:var(--mdc-ripple-focus-opacity, 0.24)}.mdc-tab:not(.mdc-ripple-upgraded) .mdc-tab__ripple::after{transition:opacity 150ms linear}.mdc-tab:not(.mdc-ripple-upgraded):active .mdc-tab__ripple::after{transition-duration:75ms;opacity:0.24;opacity:var(--mdc-ripple-press-opacity, 0.24)}.mdc-tab.mdc-ripple-upgraded{--mdc-ripple-fg-opacity:var(--mdc-ripple-press-opacity, 0.24)}.mdc-tab__ripple{position:absolute;top:0;left:0;width:100%;height:100%;overflow:hidden;will-change:transform, opacity}.scroll-fade,.scroll-button{position:absolute;transition-property:transform;transition-duration:0.3s;transition-timing-function:ease-out}.scroll-fade{top:0;height:100%;width:4.0625rem;pointer-events:none}.scroll-fade.left{transform:translate3d(-4.0625rem, 0, 0);left:0;background:linear-gradient(270deg, rgba(var(--contrast-300), 0) 0%, rgba(var(--contrast-300), 0.8) 40%, rgba(var(--contrast-300), 0.8) 100%)}.scroll-fade.right{transform:translate3d(4.0625rem, 0, 0);right:0;background:linear-gradient(90deg, rgba(var(--contrast-300), 0) 0%, rgba(var(--contrast-300), 0.8) 40%, rgba(var(--contrast-300), 0.8) 100%)}.scroll-button{--icon-background-color:rgb(var(--contrast-100));top:0.25rem}.scroll-button.left{transform:translate3d(-4.0625rem, 0, 0);left:0.25rem}.scroll-button.right{transform:translate3d(4.0625rem, 0, 0);right:0.25rem}.scroll-button:hover{transform:translate3d(0, 0, 0)}.mdc-tab-scroller{position:relative;overflow:hidden}.mdc-tab-scroller.can-scroll-left .scroll-fade.left,.mdc-tab-scroller.can-scroll-left .scroll-button.left,.mdc-tab-scroller.can-scroll-right .scroll-fade.right,.mdc-tab-scroller.can-scroll-right .scroll-button.right{transform:translate3d(0, 0, 0)}.mdc-tab-scroller.can-scroll-left:not(.can-scroll-right) .scroll-button.right,.mdc-tab-scroller.can-scroll-right:not(.can-scroll-left) .scroll-button.left{opacity:0.5;transition-delay:0.5s}.lime-hide-scrollbars{scrollbar-width:none;-ms-overflow-style:none}.mdc-tab-scroller__scroll-content{padding:0.5rem 0.75rem 0 0.75rem;background-color:rgb(var(--contrast-300))}:host{display:block;position:relative}:host(.has-tabs-with-equal-width) .mdc-tab{flex:1 0 auto}.mdc-tab__icon{margin-right:0.5rem}.mdc-tab-indicator .mdc-tab-indicator__content{border:none}.mdc-tab--active .mdc-ripple-upgraded--background-focused:before{background-color:transparent;transition:background-color 1s ease}.mdc-tab__ripple{box-sizing:border-box;border-radius:0.625rem;border-style:solid;border-color:transparent;border-width:0.25rem;opacity:0.7}.mdc-tab__ripple:before,.mdc-tab__ripple:after{transition:background-color 0.5s ease}.mdc-tab{border-radius:0;letter-spacing:normal}.mdc-tab{background-color:transparent;flex:0 0 auto}.mdc-tab:not(.mdc-tab--active):after{content:\"\";display:block;background-color:rgb(var(--contrast-600));width:0.125rem;height:1rem;margin:auto;position:absolute;top:0;bottom:0;border-radius:1rem;right:-0.125rem}.mdc-tab:not(.mdc-tab--active):last-of-type:after{display:none}.mdc-tab--active{border-radius:0.625rem 0.625rem 0 0;background-color:rgb(var(--contrast-100));z-index:2}.mdc-tab--active:before,.mdc-tab--active:after{content:\"\";display:block;width:0.75rem;height:0.75rem;position:absolute;bottom:0;background-color:rgb(var(--contrast-100));-webkit-mask-image:url(\"data:image/svg+xml; utf8, <svg xmlns='http://www.w3.org/2000/svg' fill-rule='evenodd' stroke-linejoin='round' stroke-miterlimit='2' clip-rule='evenodd' viewBox='0 0 50 50'><defs/><path d='M0 0c0 27.594 22.406 50 50 50H0V0z'/></svg>\");mask-image:url(\"data:image/svg+xml; utf8, <svg xmlns='http://www.w3.org/2000/svg' fill-rule='evenodd' stroke-linejoin='round' stroke-miterlimit='2' clip-rule='evenodd' viewBox='0 0 50 50'><defs/><path d='M0 0c0 27.594 22.406 50 50 50H0V0z'/></svg>\")}.mdc-tab--active:before{left:-0.75rem;transform:rotateY(180deg)}.mdc-tab--active:after{right:-0.75rem}";
|
|
2248
|
+
const tabBarCss = ":host{--mdc-theme-primary:var(\n --lime-primary-color,\n rgb(var(--color-teal-default))\n );--mdc-theme-secondary:var(\n --lime-secondary-color,\n rgb(var(--contrast-1100))\n );--mdc-theme-on-primary:var(\n --lime-on-primary-color,\n rgb(var(--contrast-100))\n );--mdc-theme-on-secondary:var(\n --lime-on-secondary-color,\n rgb(var(--contrast-100))\n );--mdc-theme-text-disabled-on-background:var(\n --lime-text-disabled-on-background-color,\n rgba(var(--contrast-1700), 0.38)\n );--mdc-theme-text-primary-on-background:var(\n --lime-text-primary-on-background-color,\n rgba(var(--contrast-1700), 0.87)\n );--mdc-theme-text-secondary-on-background:var(\n --lime-text-secondary-on-background-color,\n rgba(var(--contrast-1700), 0.54)\n );--lime-error-text-color:rgb(var(--color-red-darker));--mdc-theme-surface:var(\n --lime-surface-background-color,\n rgb(var(--contrast-100))\n );--mdc-theme-on-surface:var(\n --lime-on-surface-color,\n var(--lime-text-primary-on-background-color)\n )}.mdc-tab-bar{width:100%}.mdc-tab{height:48px}.mdc-tab--stacked{height:72px}.mdc-tab-scroller{overflow-y:hidden}.mdc-tab-scroller.mdc-tab-scroller--animating .mdc-tab-scroller__scroll-content{transition:250ms transform cubic-bezier(0.4, 0, 0.2, 1)}.mdc-tab-scroller__test{position:absolute;top:-9999px;width:100px;height:100px;overflow-x:scroll}.mdc-tab-scroller__scroll-area{-webkit-overflow-scrolling:touch;display:flex;overflow-x:hidden}.mdc-tab-scroller__scroll-area::-webkit-scrollbar,.mdc-tab-scroller__test::-webkit-scrollbar{display:none}.mdc-tab-scroller__scroll-area--scroll{overflow-x:scroll}.mdc-tab-scroller__scroll-content{position:relative;display:flex;flex:1 0 auto;transform:none;will-change:transform}.mdc-tab-scroller--align-start .mdc-tab-scroller__scroll-content{justify-content:flex-start}.mdc-tab-scroller--align-end .mdc-tab-scroller__scroll-content{justify-content:flex-end}.mdc-tab-scroller--align-center .mdc-tab-scroller__scroll-content{justify-content:center}.mdc-tab-scroller--animating .mdc-tab-scroller__scroll-area{-webkit-overflow-scrolling:auto}.mdc-tab-indicator .mdc-tab-indicator__content--underline{border-color:#26a69a;border-color:var(--mdc-theme-primary, #26a69a)}.mdc-tab-indicator .mdc-tab-indicator__content--icon{color:#575756;color:var(--mdc-theme-secondary, #575756)}.mdc-tab-indicator .mdc-tab-indicator__content--underline{border-top-width:2px}.mdc-tab-indicator .mdc-tab-indicator__content--icon{height:34px;font-size:34px}.mdc-tab-indicator{display:flex;position:absolute;top:0;left:0;justify-content:center;width:100%;height:100%;pointer-events:none;z-index:1}.mdc-tab-indicator__content{transform-origin:left;opacity:0}.mdc-tab-indicator__content--underline{align-self:flex-end;box-sizing:border-box;width:100%;border-top-style:solid}.mdc-tab-indicator__content--icon{align-self:center;margin:0 auto}.mdc-tab-indicator--active .mdc-tab-indicator__content{opacity:1}.mdc-tab-indicator .mdc-tab-indicator__content{transition:250ms transform cubic-bezier(0.4, 0, 0.2, 1)}.mdc-tab-indicator--no-transition .mdc-tab-indicator__content{transition:none}.mdc-tab-indicator--fade .mdc-tab-indicator__content{transition:150ms opacity linear}.mdc-tab-indicator--active.mdc-tab-indicator--fade .mdc-tab-indicator__content{transition-delay:100ms}.mdc-tab{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-family:Roboto, sans-serif;font-family:var(--mdc-typography-button-font-family, var(--mdc-typography-font-family, Roboto, sans-serif));font-size:0.875rem;font-size:var(--mdc-typography-button-font-size, 0.875rem);line-height:2.25rem;line-height:var(--mdc-typography-button-line-height, 2.25rem);font-weight:500;font-weight:var(--mdc-typography-button-font-weight, 500);letter-spacing:0.0892857143em;letter-spacing:var(--mdc-typography-button-letter-spacing, 0.0892857143em);text-decoration:none;text-decoration:var(--mdc-typography-button-text-decoration, none);text-transform:none;text-transform:var(--mdc-typography-button-text-transform, none);position:relative}.mdc-tab .mdc-tab__text-label{color:rgba(0, 0, 0, 0.6)}.mdc-tab .mdc-tab__icon{color:rgba(0, 0, 0, 0.54);fill:currentColor}.mdc-tab__content{position:relative}.mdc-tab__icon{width:24px;height:24px;font-size:24px}.mdc-tab--active .mdc-tab__text-label{color:#26a69a;color:var(--mdc-theme-primary, #26a69a)}.mdc-tab--active .mdc-tab__icon{color:#26a69a;color:var(--mdc-theme-primary, #26a69a);fill:currentColor}.mdc-tab{background:none}.mdc-tab{min-width:90px;padding-right:24px;padding-left:24px;display:flex;flex:1 0 auto;justify-content:center;box-sizing:border-box;margin:0;padding-top:0;padding-bottom:0;border:none;outline:none;text-align:center;white-space:nowrap;cursor:pointer;-webkit-appearance:none;z-index:1}.mdc-tab::-moz-focus-inner{padding:0;border:0}.mdc-tab--min-width{flex:0 1 auto}.mdc-tab__content{display:flex;align-items:center;justify-content:center;height:inherit;pointer-events:none}.mdc-tab__text-label{transition:150ms color linear;display:inline-block;line-height:1;z-index:2}.mdc-tab__icon{transition:150ms color linear;z-index:2}.mdc-tab--stacked .mdc-tab__content{flex-direction:column;align-items:center;justify-content:center}.mdc-tab--stacked .mdc-tab__text-label{padding-top:6px;padding-bottom:4px}.mdc-tab--active .mdc-tab__text-label,.mdc-tab--active .mdc-tab__icon{transition-delay:100ms}.mdc-tab:not(.mdc-tab--stacked) .mdc-tab__icon+.mdc-tab__text-label{padding-left:8px;padding-right:0}[dir=rtl] .mdc-tab:not(.mdc-tab--stacked) .mdc-tab__icon+.mdc-tab__text-label,.mdc-tab:not(.mdc-tab--stacked) .mdc-tab__icon+.mdc-tab__text-label[dir=rtl]{padding-left:0;padding-right:8px;}@keyframes mdc-ripple-fg-radius-in{from{animation-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transform:translate(var(--mdc-ripple-fg-translate-start, 0)) scale(1)}to{transform:translate(var(--mdc-ripple-fg-translate-end, 0)) scale(var(--mdc-ripple-fg-scale, 1))}}@keyframes mdc-ripple-fg-opacity-in{from{animation-timing-function:linear;opacity:0}to{opacity:var(--mdc-ripple-fg-opacity, 0)}}@keyframes mdc-ripple-fg-opacity-out{from{animation-timing-function:linear;opacity:var(--mdc-ripple-fg-opacity, 0)}to{opacity:0}}.mdc-tab{--mdc-ripple-fg-size:0;--mdc-ripple-left:0;--mdc-ripple-top:0;--mdc-ripple-fg-scale:1;--mdc-ripple-fg-translate-end:0;--mdc-ripple-fg-translate-start:0;-webkit-tap-highlight-color:rgba(0, 0, 0, 0)}.mdc-tab .mdc-tab__ripple::before,.mdc-tab .mdc-tab__ripple::after{position:absolute;border-radius:50%;opacity:0;pointer-events:none;content:\"\"}.mdc-tab .mdc-tab__ripple::before{transition:opacity 15ms linear, background-color 15ms linear;z-index:1;z-index:var(--mdc-ripple-z-index, 1)}.mdc-tab .mdc-tab__ripple::after{z-index:0;z-index:var(--mdc-ripple-z-index, 0)}.mdc-tab.mdc-ripple-upgraded .mdc-tab__ripple::before{transform:scale(var(--mdc-ripple-fg-scale, 1))}.mdc-tab.mdc-ripple-upgraded .mdc-tab__ripple::after{top:0;left:0;transform:scale(0);transform-origin:center center}.mdc-tab.mdc-ripple-upgraded--unbounded .mdc-tab__ripple::after{top:var(--mdc-ripple-top, 0);left:var(--mdc-ripple-left, 0)}.mdc-tab.mdc-ripple-upgraded--foreground-activation .mdc-tab__ripple::after{animation:mdc-ripple-fg-radius-in 225ms forwards, mdc-ripple-fg-opacity-in 75ms forwards}.mdc-tab.mdc-ripple-upgraded--foreground-deactivation .mdc-tab__ripple::after{animation:mdc-ripple-fg-opacity-out 150ms;transform:translate(var(--mdc-ripple-fg-translate-end, 0)) scale(var(--mdc-ripple-fg-scale, 1))}.mdc-tab .mdc-tab__ripple::before,.mdc-tab .mdc-tab__ripple::after{top:calc(50% - 100%);left:calc(50% - 100%);width:200%;height:200%}.mdc-tab.mdc-ripple-upgraded .mdc-tab__ripple::after{width:var(--mdc-ripple-fg-size, 100%);height:var(--mdc-ripple-fg-size, 100%)}.mdc-tab .mdc-tab__ripple::before,.mdc-tab .mdc-tab__ripple::after{background-color:#26a69a;background-color:var(--mdc-ripple-color, var(--mdc-theme-primary, #26a69a))}.mdc-tab:hover .mdc-tab__ripple::before,.mdc-tab.mdc-ripple-surface--hover .mdc-tab__ripple::before{opacity:0.08;opacity:var(--mdc-ripple-hover-opacity, 0.08)}.mdc-tab.mdc-ripple-upgraded--background-focused .mdc-tab__ripple::before,.mdc-tab:not(.mdc-ripple-upgraded):focus .mdc-tab__ripple::before{transition-duration:75ms;opacity:0.24;opacity:var(--mdc-ripple-focus-opacity, 0.24)}.mdc-tab:not(.mdc-ripple-upgraded) .mdc-tab__ripple::after{transition:opacity 150ms linear}.mdc-tab:not(.mdc-ripple-upgraded):active .mdc-tab__ripple::after{transition-duration:75ms;opacity:0.24;opacity:var(--mdc-ripple-press-opacity, 0.24)}.mdc-tab.mdc-ripple-upgraded{--mdc-ripple-fg-opacity:var(--mdc-ripple-press-opacity, 0.24)}.mdc-tab__ripple{position:absolute;top:0;left:0;width:100%;height:100%;overflow:hidden;will-change:transform, opacity}.scroll-fade,.scroll-button{position:absolute;transition-property:transform;transition-duration:0.3s;transition-timing-function:ease-out}.scroll-fade{top:0;height:100%;width:4.0625rem;pointer-events:none}.scroll-fade.left{transform:translate3d(-4.0625rem, 0, 0);left:0;background:linear-gradient(270deg, rgba(var(--contrast-300), 0) 0%, rgba(var(--contrast-300), 0.8) 40%, rgba(var(--contrast-300), 0.8) 100%)}.scroll-fade.right{transform:translate3d(4.0625rem, 0, 0);right:0;background:linear-gradient(90deg, rgba(var(--contrast-300), 0) 0%, rgba(var(--contrast-300), 0.8) 40%, rgba(var(--contrast-300), 0.8) 100%)}.scroll-button{--icon-background-color:rgb(var(--contrast-100));top:0.25rem}.scroll-button.left{transform:translate3d(-4.0625rem, 0, 0);left:0.25rem}.scroll-button.right{transform:translate3d(4.0625rem, 0, 0);right:0.25rem}.scroll-button:hover{transform:translate3d(0, 0, 0)}.mdc-tab-scroller{position:relative;overflow:hidden}.mdc-tab-scroller.can-scroll-left .scroll-fade.left,.mdc-tab-scroller.can-scroll-left .scroll-button.left,.mdc-tab-scroller.can-scroll-right .scroll-fade.right,.mdc-tab-scroller.can-scroll-right .scroll-button.right{transform:translate3d(0, 0, 0)}.mdc-tab-scroller.can-scroll-left:not(.can-scroll-right) .scroll-button.right,.mdc-tab-scroller.can-scroll-right:not(.can-scroll-left) .scroll-button.left{opacity:0.5;transition-delay:0.5s}.lime-hide-scrollbars{scrollbar-width:none;-ms-overflow-style:none}.mdc-tab-scroller__scroll-content{padding:0.5rem 0.75rem 0 0.75rem;background-color:rgb(var(--contrast-300))}:host{display:block;position:relative}:host(.has-tabs-with-equal-width) .mdc-tab{flex:1 0 auto}.mdc-tab-indicator .mdc-tab-indicator__content{border:none}.mdc-tab__ripple{box-sizing:border-box;border-radius:0.625rem;border-style:solid;border-color:transparent;border-width:0.25rem;opacity:0.7}.mdc-tab__ripple:before,.mdc-tab__ripple:after{transition:background-color 0.5s ease}.mdc-tab{border-radius:0;letter-spacing:normal;padding-right:1.25rem;padding-left:1.25rem;min-width:2.5rem;background-color:transparent;flex:0 0 auto}.mdc-tab:not(.mdc-tab--active){--badge-background-color:rgb(var(--contrast-600))}.mdc-tab:not(.mdc-tab--active):after{content:\"\";display:block;background-color:rgb(var(--contrast-600));width:0.125rem;height:1rem;margin:auto;position:absolute;top:0;bottom:0;border-radius:1rem;right:-0.125rem}.mdc-tab:not(.mdc-tab--active):last-of-type:after{display:none}.mdc-tab--active{border-radius:0.625rem 0.625rem 0 0;background-color:rgb(var(--contrast-100));z-index:2}.mdc-tab--active:before,.mdc-tab--active:after{content:\"\";display:block;width:0.75rem;height:0.75rem;position:absolute;bottom:0;background-color:rgb(var(--contrast-100));-webkit-mask-image:url(\"data:image/svg+xml; utf8, <svg xmlns='http://www.w3.org/2000/svg' fill-rule='evenodd' stroke-linejoin='round' stroke-miterlimit='2' clip-rule='evenodd' viewBox='0 0 50 50'><defs/><path d='M0 0c0 27.594 22.406 50 50 50H0V0z'/></svg>\");mask-image:url(\"data:image/svg+xml; utf8, <svg xmlns='http://www.w3.org/2000/svg' fill-rule='evenodd' stroke-linejoin='round' stroke-miterlimit='2' clip-rule='evenodd' viewBox='0 0 50 50'><defs/><path d='M0 0c0 27.594 22.406 50 50 50H0V0z'/></svg>\")}.mdc-tab--active:before{left:-0.75rem;transform:rotateY(180deg)}.mdc-tab--active:after{right:-0.75rem}.mdc-tab--active .mdc-ripple-upgraded--background-focused:before{background-color:transparent;transition:background-color 1s ease}.mdc-tab__content{gap:0.375rem}.mdc-tab__text-label{padding-left:0 !important}";
|
|
2172
2249
|
|
|
2173
2250
|
const { TAB_ACTIVATED_EVENT } = strings$1;
|
|
2174
2251
|
const SCROLL_DISTANCE_ON_CLICK_PX = 150;
|
|
2175
2252
|
const HIDE_SCROLL_BUTTONS_WHEN_SCROLLED_LESS_THAN_PX = 40;
|
|
2176
|
-
|
|
2253
|
+
const TabBar = class {
|
|
2177
2254
|
constructor(hostRef) {
|
|
2178
2255
|
index.registerInstance(this, hostRef);
|
|
2179
2256
|
this.changeTab = index.createEvent(this, "changeTab", 7);
|