@vaadin/component-base 24.0.0-alpha1 → 24.0.0-alpha11

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.
Files changed (65) hide show
  1. package/index.d.ts +0 -1
  2. package/index.js +0 -1
  3. package/package.json +2 -2
  4. package/src/a11y-announcer.d.ts +1 -1
  5. package/src/a11y-announcer.js +1 -1
  6. package/src/active-mixin.d.ts +1 -1
  7. package/src/active-mixin.js +1 -1
  8. package/src/browser-utils.js +7 -7
  9. package/src/controller-mixin.d.ts +1 -1
  10. package/src/controller-mixin.js +1 -1
  11. package/src/delegate-focus-mixin.d.ts +48 -0
  12. package/src/delegate-focus-mixin.js +228 -0
  13. package/src/delegate-state-mixin.d.ts +20 -0
  14. package/src/delegate-state-mixin.js +125 -0
  15. package/src/dir-mixin.d.ts +2 -4
  16. package/src/dir-mixin.js +7 -29
  17. package/src/dir-utils.d.ts +19 -0
  18. package/src/dir-utils.js +36 -0
  19. package/src/disabled-mixin.d.ts +1 -1
  20. package/src/disabled-mixin.js +1 -1
  21. package/src/dom-utils.d.ts +1 -1
  22. package/src/dom-utils.js +1 -1
  23. package/src/element-mixin.d.ts +1 -1
  24. package/src/element-mixin.js +11 -5
  25. package/src/focus-mixin.d.ts +1 -1
  26. package/src/focus-mixin.js +1 -1
  27. package/src/focus-trap-controller.d.ts +1 -1
  28. package/src/focus-trap-controller.js +22 -22
  29. package/src/focus-utils.d.ts +1 -1
  30. package/src/focus-utils.js +1 -1
  31. package/src/gestures.js +1 -1
  32. package/src/iron-list-core.js +32 -12
  33. package/src/keyboard-direction-mixin.d.ts +1 -1
  34. package/src/keyboard-direction-mixin.js +12 -12
  35. package/src/keyboard-mixin.d.ts +1 -1
  36. package/src/keyboard-mixin.js +1 -1
  37. package/src/list-mixin.d.ts +50 -0
  38. package/src/list-mixin.js +343 -0
  39. package/src/media-query-controller.d.ts +1 -1
  40. package/src/media-query-controller.js +1 -1
  41. package/src/overflow-controller.d.ts +1 -1
  42. package/src/overflow-controller.js +3 -3
  43. package/src/overlay-class-mixin.d.ts +33 -0
  44. package/src/overlay-class-mixin.js +79 -0
  45. package/src/polylit-mixin.d.ts +1 -1
  46. package/src/polylit-mixin.js +9 -4
  47. package/src/resize-mixin.d.ts +1 -1
  48. package/src/resize-mixin.js +11 -21
  49. package/src/slot-child-observe-controller.d.ts +28 -0
  50. package/src/slot-child-observe-controller.js +176 -0
  51. package/src/slot-controller.d.ts +33 -5
  52. package/src/slot-controller.js +103 -40
  53. package/src/tabindex-mixin.d.ts +1 -1
  54. package/src/tabindex-mixin.js +1 -1
  55. package/src/templates.js +1 -1
  56. package/src/tooltip-controller.d.ts +1 -1
  57. package/src/tooltip-controller.js +1 -1
  58. package/src/unique-id-utils.d.ts +1 -1
  59. package/src/unique-id-utils.js +1 -1
  60. package/src/virtualizer-iron-list-adapter.js +67 -9
  61. package/src/virtualizer.js +18 -18
  62. package/src/dir-helper.d.ts +0 -42
  63. package/src/dir-helper.js +0 -93
  64. package/src/slot-mixin.d.ts +0 -18
  65. package/src/slot-mixin.js +0 -60
@@ -15,6 +15,24 @@ export class Virtualizer {
15
15
  this.__adapter = new IronListAdapter(config);
16
16
  }
17
17
 
18
+ /**
19
+ * Gets the index of the first visible item in the viewport.
20
+ *
21
+ * @return {number}
22
+ */
23
+ get firstVisibleIndex() {
24
+ return this.__adapter.adjustedFirstVisibleIndex;
25
+ }
26
+
27
+ /**
28
+ * Gets the index of the last visible item in the viewport.
29
+ *
30
+ * @return {number}
31
+ */
32
+ get lastVisibleIndex() {
33
+ return this.__adapter.adjustedLastVisibleIndex;
34
+ }
35
+
18
36
  /**
19
37
  * The size of the virtualizer
20
38
  * @return {number | undefined} The size of the virtualizer
@@ -62,22 +80,4 @@ export class Virtualizer {
62
80
  flush() {
63
81
  this.__adapter.flush();
64
82
  }
65
-
66
- /**
67
- * Gets the index of the first visible item in the viewport.
68
- *
69
- * @return {number}
70
- */
71
- get firstVisibleIndex() {
72
- return this.__adapter.adjustedFirstVisibleIndex;
73
- }
74
-
75
- /**
76
- * Gets the index of the last visible item in the viewport.
77
- *
78
- * @return {number}
79
- */
80
- get lastVisibleIndex() {
81
- return this.__adapter.adjustedLastVisibleIndex;
82
- }
83
83
  }
@@ -1,42 +0,0 @@
1
- /**
2
- * @license
3
- * Copyright (c) 2021 - 2022 Vaadin Ltd.
4
- * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
5
- */
6
-
7
- /**
8
- * Helper that provides a set of functions for RTL.
9
- */
10
- declare class DirHelper {
11
- /**
12
- * Get the scroll type in the current browser view.
13
- *
14
- * @returns the scroll type. Possible values are `default|reverse|negative`
15
- */
16
- static detectScrollType(): string;
17
-
18
- /**
19
- * Get the scrollLeft value of the element relative to the direction
20
- *
21
- * @param scrollType type of the scroll detected with `detectScrollType`
22
- * @param direction current direction of the element
23
- * @returns the scrollLeft value.
24
- */
25
- static getNormalizedScrollLeft(scrollType: string, direction: string, element: Element | null): number;
26
-
27
- /**
28
- * Set the scrollLeft value of the element relative to the direction
29
- *
30
- * @param scrollType type of the scroll detected with `detectScrollType`
31
- * @param direction current direction of the element
32
- * @param scrollLeft the scrollLeft value to be set
33
- */
34
- static setNormalizedScrollLeft(
35
- scrollType: string,
36
- direction: string,
37
- element: Element | null,
38
- scrollLeft: number,
39
- ): void;
40
- }
41
-
42
- export { DirHelper };
package/src/dir-helper.js DELETED
@@ -1,93 +0,0 @@
1
- /**
2
- * @license
3
- * Copyright (c) 2021 - 2022 Vaadin Ltd.
4
- * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
5
- */
6
-
7
- /**
8
- * Helper that provides a set of functions for RTL.
9
- */
10
- class DirHelper {
11
- /**
12
- * Get the scroll type in the current browser view.
13
- *
14
- * @return {string} the scroll type. Possible values are `default|reverse|negative`
15
- */
16
- static detectScrollType() {
17
- const dummy = document.createElement('div');
18
- dummy.textContent = 'ABCD';
19
- dummy.dir = 'rtl';
20
- dummy.style.fontSize = '14px';
21
- dummy.style.width = '4px';
22
- dummy.style.height = '1px';
23
- dummy.style.position = 'absolute';
24
- dummy.style.top = '-1000px';
25
- dummy.style.overflow = 'scroll';
26
- document.body.appendChild(dummy);
27
-
28
- let cachedType = 'reverse';
29
- if (dummy.scrollLeft > 0) {
30
- cachedType = 'default';
31
- } else {
32
- dummy.scrollLeft = 2;
33
- if (dummy.scrollLeft < 2) {
34
- cachedType = 'negative';
35
- }
36
- }
37
- document.body.removeChild(dummy);
38
- return cachedType;
39
- }
40
-
41
- /**
42
- * Get the scrollLeft value of the element relative to the direction
43
- *
44
- * @param {string} scrollType type of the scroll detected with `detectScrollType`
45
- * @param {string} direction current direction of the element
46
- * @param {Element} element
47
- * @return {number} the scrollLeft value.
48
- */
49
- static getNormalizedScrollLeft(scrollType, direction, element) {
50
- const { scrollLeft } = element;
51
- if (direction !== 'rtl' || !scrollType) {
52
- return scrollLeft;
53
- }
54
-
55
- switch (scrollType) {
56
- case 'negative':
57
- return element.scrollWidth - element.clientWidth + scrollLeft;
58
- case 'reverse':
59
- return element.scrollWidth - element.clientWidth - scrollLeft;
60
- default:
61
- return scrollLeft;
62
- }
63
- }
64
-
65
- /**
66
- * Set the scrollLeft value of the element relative to the direction
67
- *
68
- * @param {string} scrollType type of the scroll detected with `detectScrollType`
69
- * @param {string} direction current direction of the element
70
- * @param {Element} element
71
- * @param {number} scrollLeft the scrollLeft value to be set
72
- */
73
- static setNormalizedScrollLeft(scrollType, direction, element, scrollLeft) {
74
- if (direction !== 'rtl' || !scrollType) {
75
- element.scrollLeft = scrollLeft;
76
- return;
77
- }
78
-
79
- switch (scrollType) {
80
- case 'negative':
81
- element.scrollLeft = element.clientWidth - element.scrollWidth + scrollLeft;
82
- break;
83
- case 'reverse':
84
- element.scrollLeft = element.scrollWidth - element.clientWidth - scrollLeft;
85
- break;
86
- default:
87
- element.scrollLeft = scrollLeft;
88
- break;
89
- }
90
- }
91
- }
92
-
93
- export { DirHelper };
@@ -1,18 +0,0 @@
1
- /**
2
- * @license
3
- * Copyright (c) 2021 - 2022 Vaadin Ltd.
4
- * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
5
- */
6
- import type { Constructor } from '@open-wc/dedupe-mixin';
7
-
8
- /**
9
- * A mixin to provide content for named slots defined by component.
10
- */
11
- export declare function SlotMixin<T extends Constructor<HTMLElement>>(base: T): Constructor<SlotMixinClass> & T;
12
-
13
- export declare class SlotMixinClass {
14
- /**
15
- * List of named slots to initialize.
16
- */
17
- protected readonly slots: Record<string, () => HTMLElement>;
18
- }
package/src/slot-mixin.js DELETED
@@ -1,60 +0,0 @@
1
- /**
2
- * @license
3
- * Copyright (c) 2021 - 2022 Vaadin Ltd.
4
- * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
5
- */
6
- import { dedupingMixin } from '@polymer/polymer/lib/utils/mixin.js';
7
-
8
- /**
9
- * A mixin to provide content for named slots defined by component.
10
- *
11
- * @polymerMixin
12
- */
13
- export const SlotMixin = dedupingMixin(
14
- (superclass) =>
15
- class SlotMixinClass extends superclass {
16
- /**
17
- * List of named slots to initialize.
18
- * @protected
19
- */
20
- get slots() {
21
- return {};
22
- }
23
-
24
- /** @protected */
25
- ready() {
26
- super.ready();
27
- this._connectSlotMixin();
28
- }
29
-
30
- /** @private */
31
- _connectSlotMixin() {
32
- Object.keys(this.slots).forEach((slotName) => {
33
- // Ignore labels of nested components, if any
34
- const hasContent = this._getDirectSlotChild(slotName) !== undefined;
35
-
36
- if (!hasContent) {
37
- const slotFactory = this.slots[slotName];
38
- const slotContent = slotFactory();
39
- if (slotContent instanceof Element) {
40
- if (slotName !== '') {
41
- slotContent.setAttribute('slot', slotName);
42
- }
43
- this.appendChild(slotContent);
44
- }
45
- }
46
- });
47
- }
48
-
49
- /** @protected */
50
- _getDirectSlotChild(slotName) {
51
- return Array.from(this.childNodes).find((node) => {
52
- // Either an element (any slot) or a text node (only un-named slot).
53
- return (
54
- (node.nodeType === Node.ELEMENT_NODE && node.slot === slotName) ||
55
- (node.nodeType === Node.TEXT_NODE && node.textContent.trim() && slotName === '')
56
- );
57
- });
58
- }
59
- },
60
- );