@spectrum-web-components/grid 1.7.0 → 1.8.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/README.md +42 -5
- package/custom-elements.json +16 -0
- package/package.json +3 -3
- package/sp-grid.d.ts +11 -0
- package/sp-grid.dev.js.map +1 -1
- package/sp-grid.js.map +1 -1
- package/src/Grid.d.ts +13 -0
- package/src/Grid.dev.js +12 -0
- package/src/Grid.dev.js.map +2 -2
- package/src/Grid.js +2 -2
- package/src/Grid.js.map +2 -2
- package/src/GridController.d.ts +11 -0
- package/src/GridController.dev.js.map +1 -1
- package/src/GridController.js.map +1 -1
- package/src/grid.css.dev.js.map +1 -1
- package/src/grid.css.js.map +1 -1
- package/src/index.d.ts +11 -0
- package/src/index.dev.js.map +1 -1
- package/src/index.js.map +1 -1
package/README.md
CHANGED
|
@@ -29,7 +29,9 @@ import { Grid } from '@spectrum-web-components/grid';
|
|
|
29
29
|
|
|
30
30
|
## Example
|
|
31
31
|
|
|
32
|
-
|
|
32
|
+
To interact with a fully accessible grid example, reference our [Grid Storybook](https://opensource.adobe.com/spectrum-web-components/storybook/index.html?path=/story/grid/) documentation.
|
|
33
|
+
|
|
34
|
+
```html-no-demo
|
|
33
35
|
<sp-grid
|
|
34
36
|
id="grid-demo"
|
|
35
37
|
style="
|
|
@@ -60,6 +62,12 @@ import { Grid } from '@spectrum-web-components/grid';
|
|
|
60
62
|
width: 200,
|
|
61
63
|
height: 300,
|
|
62
64
|
};
|
|
65
|
+
grid.role = 'grid';
|
|
66
|
+
grid.ariaLabel = 'Select images';
|
|
67
|
+
grid.ariaMultiSelectable = 'true';
|
|
68
|
+
grid.ariaRowCount = `${grid.items.length}`;
|
|
69
|
+
grid.ariaColCount = 1;
|
|
70
|
+
grid.selectedItems = [];
|
|
63
71
|
|
|
64
72
|
grid.renderItem = (
|
|
65
73
|
item,
|
|
@@ -76,8 +84,19 @@ import { Grid } from '@spectrum-web-components/grid';
|
|
|
76
84
|
card.subheading = 'JPG Photo'
|
|
77
85
|
card.style = 'contain: strict; padding: 1px;'
|
|
78
86
|
card.value = `card-${index}`
|
|
79
|
-
card.selected =
|
|
87
|
+
card.selected = grid.selectedItems.includes(card.value);
|
|
80
88
|
card.key = index;
|
|
89
|
+
card.role = 'row';
|
|
90
|
+
card.label = `Card Heading ${index}`;
|
|
91
|
+
card.ariaSelected = grid.selectedItems.includes(card.value);
|
|
92
|
+
card.ariaRowIndex = `${index + 1}`;
|
|
93
|
+
card.addEventListener('change', () => {
|
|
94
|
+
if(grid.selectedItems.includes(card.value)) {
|
|
95
|
+
grid.selectedItems = grid.selectedItems.filter(item => item !== card.value);
|
|
96
|
+
} else {
|
|
97
|
+
grid.selectedItems.push(card.value);
|
|
98
|
+
}
|
|
99
|
+
});
|
|
81
100
|
img.alt = '';
|
|
82
101
|
img.slot = 'preview';
|
|
83
102
|
img.src = `https://picsum.photos/id/${index}/200/300`;
|
|
@@ -96,7 +115,8 @@ import { Grid } from '@spectrum-web-components/grid';
|
|
|
96
115
|
</script>
|
|
97
116
|
```
|
|
98
117
|
|
|
99
|
-
|
|
118
|
+
<!-- @todo make the example work for a keyboard Tracking in 5582-->
|
|
119
|
+
<!-- <script type="module">
|
|
100
120
|
const initItems = (count) => {
|
|
101
121
|
const total = count;
|
|
102
122
|
const items = [];
|
|
@@ -118,6 +138,12 @@ import { Grid } from '@spectrum-web-components/grid';
|
|
|
118
138
|
width: 200,
|
|
119
139
|
height: 300,
|
|
120
140
|
};
|
|
141
|
+
grid.role = 'grid';
|
|
142
|
+
grid.ariaLabel = 'Select images';
|
|
143
|
+
grid.ariaMultiSelectable = 'true';
|
|
144
|
+
grid.ariaRowCount = `${grid.items.length}`;
|
|
145
|
+
grid.ariaColCount = 1;
|
|
146
|
+
grid.selectedItems = [];
|
|
121
147
|
|
|
122
148
|
grid.renderItem = (
|
|
123
149
|
item,
|
|
@@ -134,8 +160,19 @@ import { Grid } from '@spectrum-web-components/grid';
|
|
|
134
160
|
card.subheading = 'JPG Photo'
|
|
135
161
|
card.style = 'contain: strict; padding: 1px;'
|
|
136
162
|
card.value = `card-${index}`
|
|
137
|
-
card.selected =
|
|
163
|
+
card.selected = grid.selectedItems.includes(card.value);
|
|
138
164
|
card.key = index;
|
|
165
|
+
card.role = 'row';
|
|
166
|
+
card.label = `Card Heading ${index}`;
|
|
167
|
+
card.ariaSelected = grid.selectedItems.includes(card.value);
|
|
168
|
+
card.ariaRowIndex = `${index + 1}`;
|
|
169
|
+
card.addEventListener('change', () => {
|
|
170
|
+
if(grid.selectedItems.includes(card.value)) {
|
|
171
|
+
grid.selectedItems = grid.selectedItems.filter(item => item !== card.value);
|
|
172
|
+
} else {
|
|
173
|
+
grid.selectedItems.push(card.value);
|
|
174
|
+
}
|
|
175
|
+
});
|
|
139
176
|
img.alt = '';
|
|
140
177
|
img.slot = 'preview';
|
|
141
178
|
img.src = `https://picsum.photos/id/${index}/200/300`;
|
|
@@ -151,4 +188,4 @@ import { Grid } from '@spectrum-web-components/grid';
|
|
|
151
188
|
customElements.whenDefined('sp-grid').then(() => {
|
|
152
189
|
initGrid();
|
|
153
190
|
});
|
|
154
|
-
</script>
|
|
191
|
+
</script> -->
|
package/custom-elements.json
CHANGED
|
@@ -98,6 +98,22 @@
|
|
|
98
98
|
"name": "gridController",
|
|
99
99
|
"default": "new GridController<HTMLElement>(this, {\n elements: () => [],\n itemSize: () => this.itemSize,\n /* c8 ignore next 2 */\n gap: () => this.gap,\n padding: () => this.padding || this.gap,\n })"
|
|
100
100
|
},
|
|
101
|
+
{
|
|
102
|
+
"kind": "field",
|
|
103
|
+
"name": "lastTargetForChange",
|
|
104
|
+
"type": {
|
|
105
|
+
"text": "HTMLElement | undefined"
|
|
106
|
+
},
|
|
107
|
+
"privacy": "private"
|
|
108
|
+
},
|
|
109
|
+
{
|
|
110
|
+
"kind": "field",
|
|
111
|
+
"name": "animationFrameId",
|
|
112
|
+
"type": {
|
|
113
|
+
"text": "number | undefined"
|
|
114
|
+
},
|
|
115
|
+
"privacy": "private"
|
|
116
|
+
},
|
|
101
117
|
{
|
|
102
118
|
"kind": "method",
|
|
103
119
|
"name": "handleChange",
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@spectrum-web-components/grid",
|
|
3
|
-
"version": "1.
|
|
3
|
+
"version": "1.8.0",
|
|
4
4
|
"publishConfig": {
|
|
5
5
|
"access": "public"
|
|
6
6
|
},
|
|
@@ -70,8 +70,8 @@
|
|
|
70
70
|
"dependencies": {
|
|
71
71
|
"@lit-labs/observers": "^2.0.2",
|
|
72
72
|
"@lit-labs/virtualizer": "^2.0.12",
|
|
73
|
-
"@spectrum-web-components/base": "1.
|
|
74
|
-
"@spectrum-web-components/reactive-controllers": "1.
|
|
73
|
+
"@spectrum-web-components/base": "1.8.0",
|
|
74
|
+
"@spectrum-web-components/reactive-controllers": "1.8.0",
|
|
75
75
|
"lit": "^2.5.0 || ^3.1.3"
|
|
76
76
|
},
|
|
77
77
|
"types": "./src/index.d.ts",
|
package/sp-grid.d.ts
CHANGED
|
@@ -1,3 +1,14 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Copyright 2025 Adobe. All rights reserved.
|
|
3
|
+
* This file is licensed to you under the Apache License, Version 2.0 (the "License");
|
|
4
|
+
* you may not use this file except in compliance with the License. You may obtain a copy
|
|
5
|
+
* of the License at http://www.apache.org/licenses/LICENSE-2.0
|
|
6
|
+
*
|
|
7
|
+
* Unless required by applicable law or agreed to in writing, software distributed under
|
|
8
|
+
* the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
|
|
9
|
+
* OF ANY KIND, either express or implied. See the License for the specific language
|
|
10
|
+
* governing permissions and limitations under the License.
|
|
11
|
+
*/
|
|
1
12
|
import { Grid } from './src/Grid.js';
|
|
2
13
|
declare global {
|
|
3
14
|
interface HTMLElementTagNameMap {
|
package/sp-grid.dev.js.map
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["sp-grid.ts"],
|
|
4
|
-
"sourcesContent": ["
|
|
4
|
+
"sourcesContent": ["/**\n * Copyright 2025 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport { Grid } from './src/Grid.dev.js'\n\ncustomElements.define('sp-grid', Grid);\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'sp-grid': Grid;\n }\n}\n"],
|
|
5
5
|
"mappings": ";AAYA,SAAS,YAAY;AAErB,eAAe,OAAO,WAAW,IAAI;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/sp-grid.js.map
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["sp-grid.ts"],
|
|
4
|
-
"sourcesContent": ["
|
|
4
|
+
"sourcesContent": ["/**\n * Copyright 2025 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport { Grid } from './src/Grid.js';\n\ncustomElements.define('sp-grid', Grid);\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'sp-grid': Grid;\n }\n}\n"],
|
|
5
5
|
"mappings": "aAYA,OAAS,QAAAA,MAAY,gBAErB,eAAe,OAAO,UAAWA,CAAI",
|
|
6
6
|
"names": ["Grid"]
|
|
7
7
|
}
|
package/src/Grid.d.ts
CHANGED
|
@@ -1,3 +1,14 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Copyright 2025 Adobe. All rights reserved.
|
|
3
|
+
* This file is licensed to you under the Apache License, Version 2.0 (the "License");
|
|
4
|
+
* you may not use this file except in compliance with the License. You may obtain a copy
|
|
5
|
+
* of the License at http://www.apache.org/licenses/LICENSE-2.0
|
|
6
|
+
*
|
|
7
|
+
* Unless required by applicable law or agreed to in writing, software distributed under
|
|
8
|
+
* the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
|
|
9
|
+
* OF ANY KIND, either express or implied. See the License for the specific language
|
|
10
|
+
* governing permissions and limitations under the License.
|
|
11
|
+
*/
|
|
1
12
|
import { CSSResultArray, PropertyValues, TemplateResult } from '@spectrum-web-components/base';
|
|
2
13
|
import { LitVirtualizer } from '@lit-labs/virtualizer/LitVirtualizer.js';
|
|
3
14
|
import { GridController } from './GridController.js';
|
|
@@ -19,6 +30,8 @@ export declare class Grid extends LitVirtualizer {
|
|
|
19
30
|
};
|
|
20
31
|
selected: Record<string, unknown>[];
|
|
21
32
|
gridController: GridController<HTMLElement>;
|
|
33
|
+
private lastTargetForChange?;
|
|
34
|
+
private animationFrameId?;
|
|
22
35
|
protected handleChange(event: Event): void;
|
|
23
36
|
createRenderRoot(): this;
|
|
24
37
|
render(): TemplateResult<1>;
|
package/src/Grid.dev.js
CHANGED
|
@@ -43,6 +43,13 @@ export class Grid extends LitVirtualizer {
|
|
|
43
43
|
}
|
|
44
44
|
handleChange(event) {
|
|
45
45
|
const target = event.target;
|
|
46
|
+
if (this.lastTargetForChange === target) {
|
|
47
|
+
return;
|
|
48
|
+
}
|
|
49
|
+
this.lastTargetForChange = target;
|
|
50
|
+
this.animationFrameId = requestAnimationFrame(() => {
|
|
51
|
+
this.lastTargetForChange = void 0;
|
|
52
|
+
});
|
|
46
53
|
const value = this.items[parseFloat(target.getAttribute("key") || "")];
|
|
47
54
|
const selected = [...this.selected];
|
|
48
55
|
if (!selected.includes(value)) {
|
|
@@ -120,6 +127,11 @@ export class Grid extends LitVirtualizer {
|
|
|
120
127
|
capture: true
|
|
121
128
|
});
|
|
122
129
|
(_a = this.__gridPart) == null ? void 0 : _a.setConnected(false);
|
|
130
|
+
if (this.animationFrameId) {
|
|
131
|
+
cancelAnimationFrame(this.animationFrameId);
|
|
132
|
+
this.animationFrameId = void 0;
|
|
133
|
+
this.lastTargetForChange = void 0;
|
|
134
|
+
}
|
|
123
135
|
super.disconnectedCallback();
|
|
124
136
|
}
|
|
125
137
|
}
|
package/src/Grid.dev.js.map
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["Grid.ts"],
|
|
4
|
-
"sourcesContent": ["
|
|
5
|
-
"mappings": ";;;;;;;;;;;AAYA;AAAA,EACI;AAAA,EAEA;AAAA,EAGA;AAAA,OAGG;AACP,SAAS,gBAAgB;AACzB,SAAS,sBAAsB;AAC/B,SAAS,YAAY;AACrB,OAAO,YAAY;AACnB,SAAS,sBAAsB;AAOxB,aAAM,aAAa,eAAe;AAAA,EAAlC;AAAA;AAKH,SAAQ,aAAmC;AAM3C,SAAO,MAAgC;AAMvC,SAAgB,QAAmC,CAAC;AAGpD,SAAO,WAGH;AAAA,MACA,OAAO;AAAA,MACP,QAAQ;AAAA,IACZ;AAGA,SAAO,WAAsC,CAAC;AAE9C,0BAAiB,IAAI,eAA4B,MAAM;AAAA,MACnD,UAAU,MAAM,CAAC;AAAA,MACjB,UAAU,MAAM,KAAK;AAAA;AAAA,MAErB,KAAK,MAAM,KAAK;AAAA,MAChB,SAAS,MAAM,KAAK,WAAW,KAAK;AAAA,IACxC,CAAC;AAAA;AAAA,EApCD,WAA2B,SAAyB;AAChD,WAAO,CAAC,MAAM;AAAA,EAClB;AAAA,
|
|
4
|
+
"sourcesContent": ["/**\n * Copyright 2025 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {\n adoptStyles,\n CSSResultArray,\n html,\n PropertyValues,\n ReactiveElement,\n render,\n RootPart,\n TemplateResult,\n} from '@spectrum-web-components/base';\nimport { property } from '@spectrum-web-components/base/src/decorators.js';\nimport { LitVirtualizer } from '@lit-labs/virtualizer/LitVirtualizer.js';\nimport { grid } from '@lit-labs/virtualizer/layouts/grid.js';\nimport styles from './grid.css.js';\nimport { GridController } from './GridController.dev.js'\n\n/**\n * @element sp-grid\n *\n * @fires change - Announces that the value of `selected` has changed\n */\nexport class Grid extends LitVirtualizer {\n public static override get styles(): CSSResultArray {\n return [styles];\n }\n\n private __gridPart: RootPart | undefined = undefined;\n\n @property({ type: String })\n public focusableSelector!: string;\n\n @property({ type: String })\n public gap: `${'0' | `${number}px`}` = '0';\n\n @property({ type: String })\n public padding: `${'0' | `${number}px`}` | undefined;\n\n @property({ type: Array })\n public override items: Record<string, unknown>[] = [];\n\n @property({ type: Object })\n public itemSize: {\n width: number;\n height: number;\n } = {\n width: 200,\n height: 200,\n };\n\n @property({ type: Array })\n public selected: Record<string, unknown>[] = [];\n\n gridController = new GridController<HTMLElement>(this, {\n elements: () => [],\n itemSize: () => this.itemSize,\n /* c8 ignore next 2 */\n gap: () => this.gap,\n padding: () => this.padding || this.gap,\n });\n\n private lastTargetForChange?: HTMLElement;\n private animationFrameId?: number;\n\n protected handleChange(event: Event): void {\n const target = event.target as HTMLElement;\n\n // This prevents the event from being fired multiple times\n // when the change event originates from the same item.\n // For example, the capture event phase used by grid\n // captures change events from both the checkbox in\n // the shadowDom for the card and the card itself.\n if (this.lastTargetForChange === target) {\n return;\n }\n this.lastTargetForChange = target;\n this.animationFrameId = requestAnimationFrame(() => {\n this.lastTargetForChange = undefined;\n });\n\n const value = this.items[\n parseFloat(target.getAttribute('key') || '')\n ] as Record<string, unknown>;\n const selected: Record<string, unknown>[] = [...this.selected];\n if (!selected.includes(value)) {\n selected.push(value);\n } else {\n const index = selected.indexOf(value);\n if (index > -1) {\n selected.splice(index, 1);\n }\n }\n this.selected = selected;\n }\n\n public override createRenderRoot(): this {\n const renderRoot =\n this.shadowRoot ??\n this.attachShadow(\n (this.constructor as typeof ReactiveElement).shadowRootOptions\n );\n adoptStyles(\n renderRoot,\n (this.constructor as typeof ReactiveElement).elementStyles\n );\n return renderRoot as unknown as this;\n }\n\n public override render(): TemplateResult<1> {\n return html`\n <slot></slot>\n `;\n }\n\n protected override update(changes: PropertyValues<this>): void {\n if (\n changes.has('itemSize') ||\n changes.has('gap') ||\n changes.has('padding') ||\n changes.has('focusableSelector')\n ) {\n this.updateComplete.then(() => {\n this.gridController.update({\n elements: () => [\n ...this.querySelectorAll<HTMLElement>(\n this.focusableSelector\n ),\n ],\n itemSize: () => this.itemSize,\n gap: () => this.gap,\n padding: () => this.padding || this.gap,\n });\n });\n\n this.layout = grid({\n itemSize: {\n width: `${this.itemSize.width}px`,\n height: `${this.itemSize.height}px`,\n },\n gap: this.gap,\n padding: this.padding || this.gap,\n });\n }\n if (changes.has('renderItem')) {\n const fn = this.renderItem as unknown as (\n item: unknown,\n index: number,\n selected: boolean\n ) => TemplateResult;\n this.renderItem = (item, index: number): TemplateResult => {\n const selected = this.selected.includes(\n item as Record<string, unknown>\n );\n return fn(item, index, selected);\n };\n }\n\n if (this.isConnected) {\n this.__gridPart = render(super.render(), this);\n }\n super.update(changes);\n }\n\n override connectedCallback(): void {\n super.connectedCallback();\n this.__gridPart?.setConnected(true);\n this.addEventListener('change', this.handleChange, { capture: true });\n }\n\n override disconnectedCallback(): void {\n this.removeEventListener('change', this.handleChange, {\n capture: true,\n });\n this.__gridPart?.setConnected(false);\n if (this.animationFrameId) {\n cancelAnimationFrame(this.animationFrameId);\n this.animationFrameId = undefined;\n this.lastTargetForChange = undefined;\n }\n super.disconnectedCallback();\n }\n}\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/src/Grid.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
"use strict";var l=Object.defineProperty;var
|
|
1
|
+
"use strict";var l=Object.defineProperty;var h=Object.getOwnPropertyDescriptor;var s=(d,o,e,i)=>{for(var t=i>1?void 0:i?h(o,e):o,r=d.length-1,n;r>=0;r--)(n=d[r])&&(t=(i?n(o,e,t):n(t))||t);return i&&t&&l(o,e,t),t};import{adoptStyles as p,html as u,render as c}from"@spectrum-web-components/base";import{property as a}from"@spectrum-web-components/base/src/decorators.js";import{LitVirtualizer as m}from"@lit-labs/virtualizer/LitVirtualizer.js";import{grid as g}from"@lit-labs/virtualizer/layouts/grid.js";import f from"./grid.css.js";import{GridController as b}from"./GridController.js";export class Grid extends m{constructor(){super(...arguments);this.__gridPart=void 0;this.gap="0";this.items=[];this.itemSize={width:200,height:200};this.selected=[];this.gridController=new b(this,{elements:()=>[],itemSize:()=>this.itemSize,gap:()=>this.gap,padding:()=>this.padding||this.gap})}static get styles(){return[f]}handleChange(e){const i=e.target;if(this.lastTargetForChange===i)return;this.lastTargetForChange=i,this.animationFrameId=requestAnimationFrame(()=>{this.lastTargetForChange=void 0});const t=this.items[parseFloat(i.getAttribute("key")||"")],r=[...this.selected];if(!r.includes(t))r.push(t);else{const n=r.indexOf(t);n>-1&&r.splice(n,1)}this.selected=r}createRenderRoot(){var i;const e=(i=this.shadowRoot)!=null?i:this.attachShadow(this.constructor.shadowRootOptions);return p(e,this.constructor.elementStyles),e}render(){return u`
|
|
2
2
|
<slot></slot>
|
|
3
|
-
`}update(e){if((e.has("itemSize")||e.has("gap")||e.has("padding")||e.has("focusableSelector"))&&(this.updateComplete.then(()=>{this.gridController.update({elements:()=>[...this.querySelectorAll(this.focusableSelector)],itemSize:()=>this.itemSize,gap:()=>this.gap,padding:()=>this.padding||this.gap})}),this.layout=g({itemSize:{width:`${this.itemSize.width}px`,height:`${this.itemSize.height}px`},gap:this.gap,padding:this.padding||this.gap})),e.has("renderItem")){const i=this.renderItem;this.renderItem=(t,r)=>{const
|
|
3
|
+
`}update(e){if((e.has("itemSize")||e.has("gap")||e.has("padding")||e.has("focusableSelector"))&&(this.updateComplete.then(()=>{this.gridController.update({elements:()=>[...this.querySelectorAll(this.focusableSelector)],itemSize:()=>this.itemSize,gap:()=>this.gap,padding:()=>this.padding||this.gap})}),this.layout=g({itemSize:{width:`${this.itemSize.width}px`,height:`${this.itemSize.height}px`},gap:this.gap,padding:this.padding||this.gap})),e.has("renderItem")){const i=this.renderItem;this.renderItem=(t,r)=>{const n=this.selected.includes(t);return i(t,r,n)}}this.isConnected&&(this.__gridPart=c(super.render(),this)),super.update(e)}connectedCallback(){var e;super.connectedCallback(),(e=this.__gridPart)==null||e.setConnected(!0),this.addEventListener("change",this.handleChange,{capture:!0})}disconnectedCallback(){var e;this.removeEventListener("change",this.handleChange,{capture:!0}),(e=this.__gridPart)==null||e.setConnected(!1),this.animationFrameId&&(cancelAnimationFrame(this.animationFrameId),this.animationFrameId=void 0,this.lastTargetForChange=void 0),super.disconnectedCallback()}}s([a({type:String})],Grid.prototype,"focusableSelector",2),s([a({type:String})],Grid.prototype,"gap",2),s([a({type:String})],Grid.prototype,"padding",2),s([a({type:Array})],Grid.prototype,"items",2),s([a({type:Object})],Grid.prototype,"itemSize",2),s([a({type:Array})],Grid.prototype,"selected",2);
|
|
4
4
|
//# sourceMappingURL=Grid.js.map
|
package/src/Grid.js.map
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["Grid.ts"],
|
|
4
|
-
"sourcesContent": ["
|
|
5
|
-
"mappings": "qNAYA,OACI,eAAAA,EAEA,QAAAC,EAGA,UAAAC,MAGG,gCACP,OAAS,YAAAC,MAAgB,kDACzB,OAAS,kBAAAC,MAAsB,0CAC/B,OAAS,QAAAC,MAAY,wCACrB,OAAOC,MAAY,gBACnB,OAAS,kBAAAC,MAAsB,sBAOxB,aAAM,aAAaH,CAAe,CAAlC,kCAKH,KAAQ,WAAmC,OAM3C,KAAO,IAAgC,IAMvC,KAAgB,MAAmC,CAAC,EAGpD,KAAO,SAGH,CACA,MAAO,IACP,OAAQ,GACZ,EAGA,KAAO,SAAsC,CAAC,EAE9C,oBAAiB,IAAIG,EAA4B,KAAM,CACnD,SAAU,IAAM,CAAC,EACjB,SAAU,IAAM,KAAK,SAErB,IAAK,IAAM,KAAK,IAChB,QAAS,IAAM,KAAK,SAAW,KAAK,GACxC,CAAC,EApCD,WAA2B,QAAyB,CAChD,MAAO,CAACD,CAAM,CAClB,
|
|
4
|
+
"sourcesContent": ["/**\n * Copyright 2025 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {\n adoptStyles,\n CSSResultArray,\n html,\n PropertyValues,\n ReactiveElement,\n render,\n RootPart,\n TemplateResult,\n} from '@spectrum-web-components/base';\nimport { property } from '@spectrum-web-components/base/src/decorators.js';\nimport { LitVirtualizer } from '@lit-labs/virtualizer/LitVirtualizer.js';\nimport { grid } from '@lit-labs/virtualizer/layouts/grid.js';\nimport styles from './grid.css.js';\nimport { GridController } from './GridController.js';\n\n/**\n * @element sp-grid\n *\n * @fires change - Announces that the value of `selected` has changed\n */\nexport class Grid extends LitVirtualizer {\n public static override get styles(): CSSResultArray {\n return [styles];\n }\n\n private __gridPart: RootPart | undefined = undefined;\n\n @property({ type: String })\n public focusableSelector!: string;\n\n @property({ type: String })\n public gap: `${'0' | `${number}px`}` = '0';\n\n @property({ type: String })\n public padding: `${'0' | `${number}px`}` | undefined;\n\n @property({ type: Array })\n public override items: Record<string, unknown>[] = [];\n\n @property({ type: Object })\n public itemSize: {\n width: number;\n height: number;\n } = {\n width: 200,\n height: 200,\n };\n\n @property({ type: Array })\n public selected: Record<string, unknown>[] = [];\n\n gridController = new GridController<HTMLElement>(this, {\n elements: () => [],\n itemSize: () => this.itemSize,\n /* c8 ignore next 2 */\n gap: () => this.gap,\n padding: () => this.padding || this.gap,\n });\n\n private lastTargetForChange?: HTMLElement;\n private animationFrameId?: number;\n\n protected handleChange(event: Event): void {\n const target = event.target as HTMLElement;\n\n // This prevents the event from being fired multiple times\n // when the change event originates from the same item.\n // For example, the capture event phase used by grid\n // captures change events from both the checkbox in\n // the shadowDom for the card and the card itself.\n if (this.lastTargetForChange === target) {\n return;\n }\n this.lastTargetForChange = target;\n this.animationFrameId = requestAnimationFrame(() => {\n this.lastTargetForChange = undefined;\n });\n\n const value = this.items[\n parseFloat(target.getAttribute('key') || '')\n ] as Record<string, unknown>;\n const selected: Record<string, unknown>[] = [...this.selected];\n if (!selected.includes(value)) {\n selected.push(value);\n } else {\n const index = selected.indexOf(value);\n if (index > -1) {\n selected.splice(index, 1);\n }\n }\n this.selected = selected;\n }\n\n public override createRenderRoot(): this {\n const renderRoot =\n this.shadowRoot ??\n this.attachShadow(\n (this.constructor as typeof ReactiveElement).shadowRootOptions\n );\n adoptStyles(\n renderRoot,\n (this.constructor as typeof ReactiveElement).elementStyles\n );\n return renderRoot as unknown as this;\n }\n\n public override render(): TemplateResult<1> {\n return html`\n <slot></slot>\n `;\n }\n\n protected override update(changes: PropertyValues<this>): void {\n if (\n changes.has('itemSize') ||\n changes.has('gap') ||\n changes.has('padding') ||\n changes.has('focusableSelector')\n ) {\n this.updateComplete.then(() => {\n this.gridController.update({\n elements: () => [\n ...this.querySelectorAll<HTMLElement>(\n this.focusableSelector\n ),\n ],\n itemSize: () => this.itemSize,\n gap: () => this.gap,\n padding: () => this.padding || this.gap,\n });\n });\n\n this.layout = grid({\n itemSize: {\n width: `${this.itemSize.width}px`,\n height: `${this.itemSize.height}px`,\n },\n gap: this.gap,\n padding: this.padding || this.gap,\n });\n }\n if (changes.has('renderItem')) {\n const fn = this.renderItem as unknown as (\n item: unknown,\n index: number,\n selected: boolean\n ) => TemplateResult;\n this.renderItem = (item, index: number): TemplateResult => {\n const selected = this.selected.includes(\n item as Record<string, unknown>\n );\n return fn(item, index, selected);\n };\n }\n\n if (this.isConnected) {\n this.__gridPart = render(super.render(), this);\n }\n super.update(changes);\n }\n\n override connectedCallback(): void {\n super.connectedCallback();\n this.__gridPart?.setConnected(true);\n this.addEventListener('change', this.handleChange, { capture: true });\n }\n\n override disconnectedCallback(): void {\n this.removeEventListener('change', this.handleChange, {\n capture: true,\n });\n this.__gridPart?.setConnected(false);\n if (this.animationFrameId) {\n cancelAnimationFrame(this.animationFrameId);\n this.animationFrameId = undefined;\n this.lastTargetForChange = undefined;\n }\n super.disconnectedCallback();\n }\n}\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": ["adoptStyles", "html", "render", "property", "LitVirtualizer", "grid", "styles", "GridController", "event", "target", "value", "selected", "index", "_a", "renderRoot", "changes", "fn", "item", "__decorateClass"]
|
|
7
7
|
}
|
package/src/GridController.d.ts
CHANGED
|
@@ -1,3 +1,14 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Copyright 2025 Adobe. All rights reserved.
|
|
3
|
+
* This file is licensed to you under the Apache License, Version 2.0 (the "License");
|
|
4
|
+
* you may not use this file except in compliance with the License. You may obtain a copy
|
|
5
|
+
* of the License at http://www.apache.org/licenses/LICENSE-2.0
|
|
6
|
+
*
|
|
7
|
+
* Unless required by applicable law or agreed to in writing, software distributed under
|
|
8
|
+
* the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
|
|
9
|
+
* OF ANY KIND, either express or implied. See the License for the specific language
|
|
10
|
+
* governing permissions and limitations under the License.
|
|
11
|
+
*/
|
|
1
12
|
import type { ReactiveController } from 'lit';
|
|
2
13
|
import { ResizeController } from '@lit-labs/observers/resize-controller.js';
|
|
3
14
|
import { RovingTabindexController } from '@spectrum-web-components/reactive-controllers/src/RovingTabindex.js';
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["GridController.ts"],
|
|
4
|
-
"sourcesContent": ["
|
|
4
|
+
"sourcesContent": ["/**\n * Copyright 2025 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\nimport type { ReactiveController } from 'lit';\n\nimport { ResizeController } from '@lit-labs/observers/resize-controller.js';\nimport { RovingTabindexController } from '@spectrum-web-components/reactive-controllers/src/RovingTabindex.js';\nimport {\n RangeChangedEvent,\n VisibilityChangedEvent,\n} from '@lit-labs/virtualizer/events.js';\nimport { Grid } from './Grid.dev.js'\n\ninterface ItemSize {\n width: number;\n height: number;\n}\n\nconst doCallbackAfterPaint = (cb: () => void): void => {\n requestAnimationFrame(() => {\n requestAnimationFrame(() => {\n cb();\n });\n });\n};\n\nexport class GridController<T extends HTMLElement>\n implements ReactiveController\n{\n host!: Grid;\n\n resizeController!: ResizeController;\n\n rovingTabindexController!: RovingTabindexController<T>;\n\n get itemSize(): ItemSize {\n return this._itemSize();\n }\n\n /* c8 ignore next 6 */\n private _itemSize(): ItemSize {\n return {\n width: 100,\n height: 100,\n };\n }\n\n // First visible element\n _first = 0;\n\n get gap(): string | undefined {\n return this._gap();\n }\n\n /* c8 ignore next 3 */\n private _gap(): string | undefined {\n return undefined;\n }\n\n get padding(): string | undefined {\n return this._padding();\n }\n\n /* c8 ignore next 3 */\n private _padding(): string | undefined {\n return undefined;\n }\n\n // Last visible element\n _last = 0;\n\n constructor(\n host: Grid,\n {\n elements,\n itemSize,\n gap,\n padding,\n }: {\n elements: () => T[];\n itemSize: ItemSize | (() => ItemSize);\n gap?: string | (() => string);\n padding?: string | (() => string);\n }\n ) {\n this.host = host;\n this.host.addController(this);\n this.applyLayout(itemSize, gap, padding);\n this.resizeController = new ResizeController(this.host, {\n callback: (entries: ResizeObserverEntry[]): void => {\n entries.forEach((entry) => {\n this.measureDirectionLength(entry.contentRect);\n });\n },\n });\n this.rovingTabindexController = new RovingTabindexController<T>(\n this.host,\n {\n direction: 'grid',\n elements,\n focusInIndex: () => {\n const activeElement = (this.host.getRootNode() as Document)\n .activeElement as HTMLElement;\n return activeElement === this.host ? 0 : -1;\n },\n }\n );\n }\n\n public focus(options?: FocusOptions): void {\n this.rovingTabindexController.focus(options);\n }\n\n protected applyLayout(\n itemSize: ItemSize | (() => ItemSize),\n gap?: string | (() => string),\n padding?: string | (() => string)\n ): void {\n /* c8 ignore next 2 */\n if (typeof itemSize === 'object') {\n this._itemSize = () => itemSize;\n } else if (\n typeof itemSize === 'function' &&\n typeof itemSize() !== 'undefined'\n ) {\n this._itemSize = itemSize;\n }\n /* c8 ignore next 2 */\n if (typeof gap === 'string') {\n this._gap = () => gap;\n } else if (typeof gap === 'function') {\n this._gap = gap;\n }\n /* c8 ignore next 2 */\n if (typeof padding === 'string') {\n this._padding = () => padding;\n } else if (typeof padding === 'function') {\n this._padding = padding;\n }\n }\n\n public update({\n elements,\n itemSize,\n gap,\n padding,\n }: {\n elements: () => T[];\n itemSize: ItemSize | (() => ItemSize);\n gap?: string | (() => string);\n padding?: string | (() => string);\n }): void {\n this.rovingTabindexController.update({ elements });\n this.applyLayout(itemSize, gap, padding);\n const contentRect = this.host.getBoundingClientRect();\n this.measureDirectionLength(contentRect);\n }\n\n protected measureDirectionLength(contentRect: DOMRect): void {\n const gap = this.gap ? parseFloat(this.gap) : 0;\n const padding = this.padding ? parseFloat(this.padding) : 0;\n const contentBoxWidth = contentRect.width - padding * 2;\n // There is always one less gap per row than items.\n const directionLength =\n Math.floor(\n (contentBoxWidth - this.itemSize.width) /\n (gap + this.itemSize.width)\n ) + 1;\n this.rovingTabindexController.directionLength =\n Math.floor(directionLength);\n }\n\n protected handleFocusin = (event: FocusEvent): void => {\n const scrollToFirst = (): void => this.host.scrollToIndex(0);\n const focusIntoGrid = (): void => {\n this.focus();\n this.host.tabIndex = -1;\n };\n if ((event.target as HTMLElement) === this.host) {\n if (this._first > 0) {\n doCallbackAfterPaint(() => {\n scrollToFirst();\n doCallbackAfterPaint(focusIntoGrid);\n });\n } else {\n doCallbackAfterPaint(focusIntoGrid);\n }\n }\n };\n\n protected handleFocusout = (event: FocusEvent): void => {\n if (\n !event.relatedTarget ||\n !this.host.contains(event.relatedTarget as HTMLElement)\n ) {\n this.host.tabIndex = 0;\n }\n };\n\n protected handleRangeChanged = (event: RangeChangedEvent): void => {\n this.rovingTabindexController.clearElementCache(event.first);\n };\n\n protected handleVisibleChanged = (event: VisibilityChangedEvent): void => {\n this._first = event.first;\n this._last = event.last;\n };\n\n public hostConnected(): void {\n this.host.addEventListener('rangeChanged', this.handleRangeChanged);\n this.host.addEventListener(\n 'visibilityChanged',\n this.handleVisibleChanged\n );\n this.host.addEventListener('focusin', this.handleFocusin);\n this.host.addEventListener('focusout', this.handleFocusout);\n this.host.tabIndex = 0;\n this.host.style.setProperty('outline', 'none', 'important');\n }\n\n public hostDisconnected(): void {\n this.host.removeEventListener('rangeChanged', this.handleRangeChanged);\n this.host.removeEventListener(\n 'visibilityChanged',\n this.handleVisibleChanged\n );\n this.host.removeEventListener('focusin', this.handleFocusin);\n this.host.removeEventListener('focusout', this.handleFocusout);\n }\n}\n"],
|
|
5
5
|
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["GridController.ts"],
|
|
4
|
-
"sourcesContent": ["
|
|
4
|
+
"sourcesContent": ["/**\n * Copyright 2025 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\nimport type { ReactiveController } from 'lit';\n\nimport { ResizeController } from '@lit-labs/observers/resize-controller.js';\nimport { RovingTabindexController } from '@spectrum-web-components/reactive-controllers/src/RovingTabindex.js';\nimport {\n RangeChangedEvent,\n VisibilityChangedEvent,\n} from '@lit-labs/virtualizer/events.js';\nimport { Grid } from './Grid.js';\n\ninterface ItemSize {\n width: number;\n height: number;\n}\n\nconst doCallbackAfterPaint = (cb: () => void): void => {\n requestAnimationFrame(() => {\n requestAnimationFrame(() => {\n cb();\n });\n });\n};\n\nexport class GridController<T extends HTMLElement>\n implements ReactiveController\n{\n host!: Grid;\n\n resizeController!: ResizeController;\n\n rovingTabindexController!: RovingTabindexController<T>;\n\n get itemSize(): ItemSize {\n return this._itemSize();\n }\n\n /* c8 ignore next 6 */\n private _itemSize(): ItemSize {\n return {\n width: 100,\n height: 100,\n };\n }\n\n // First visible element\n _first = 0;\n\n get gap(): string | undefined {\n return this._gap();\n }\n\n /* c8 ignore next 3 */\n private _gap(): string | undefined {\n return undefined;\n }\n\n get padding(): string | undefined {\n return this._padding();\n }\n\n /* c8 ignore next 3 */\n private _padding(): string | undefined {\n return undefined;\n }\n\n // Last visible element\n _last = 0;\n\n constructor(\n host: Grid,\n {\n elements,\n itemSize,\n gap,\n padding,\n }: {\n elements: () => T[];\n itemSize: ItemSize | (() => ItemSize);\n gap?: string | (() => string);\n padding?: string | (() => string);\n }\n ) {\n this.host = host;\n this.host.addController(this);\n this.applyLayout(itemSize, gap, padding);\n this.resizeController = new ResizeController(this.host, {\n callback: (entries: ResizeObserverEntry[]): void => {\n entries.forEach((entry) => {\n this.measureDirectionLength(entry.contentRect);\n });\n },\n });\n this.rovingTabindexController = new RovingTabindexController<T>(\n this.host,\n {\n direction: 'grid',\n elements,\n focusInIndex: () => {\n const activeElement = (this.host.getRootNode() as Document)\n .activeElement as HTMLElement;\n return activeElement === this.host ? 0 : -1;\n },\n }\n );\n }\n\n public focus(options?: FocusOptions): void {\n this.rovingTabindexController.focus(options);\n }\n\n protected applyLayout(\n itemSize: ItemSize | (() => ItemSize),\n gap?: string | (() => string),\n padding?: string | (() => string)\n ): void {\n /* c8 ignore next 2 */\n if (typeof itemSize === 'object') {\n this._itemSize = () => itemSize;\n } else if (\n typeof itemSize === 'function' &&\n typeof itemSize() !== 'undefined'\n ) {\n this._itemSize = itemSize;\n }\n /* c8 ignore next 2 */\n if (typeof gap === 'string') {\n this._gap = () => gap;\n } else if (typeof gap === 'function') {\n this._gap = gap;\n }\n /* c8 ignore next 2 */\n if (typeof padding === 'string') {\n this._padding = () => padding;\n } else if (typeof padding === 'function') {\n this._padding = padding;\n }\n }\n\n public update({\n elements,\n itemSize,\n gap,\n padding,\n }: {\n elements: () => T[];\n itemSize: ItemSize | (() => ItemSize);\n gap?: string | (() => string);\n padding?: string | (() => string);\n }): void {\n this.rovingTabindexController.update({ elements });\n this.applyLayout(itemSize, gap, padding);\n const contentRect = this.host.getBoundingClientRect();\n this.measureDirectionLength(contentRect);\n }\n\n protected measureDirectionLength(contentRect: DOMRect): void {\n const gap = this.gap ? parseFloat(this.gap) : 0;\n const padding = this.padding ? parseFloat(this.padding) : 0;\n const contentBoxWidth = contentRect.width - padding * 2;\n // There is always one less gap per row than items.\n const directionLength =\n Math.floor(\n (contentBoxWidth - this.itemSize.width) /\n (gap + this.itemSize.width)\n ) + 1;\n this.rovingTabindexController.directionLength =\n Math.floor(directionLength);\n }\n\n protected handleFocusin = (event: FocusEvent): void => {\n const scrollToFirst = (): void => this.host.scrollToIndex(0);\n const focusIntoGrid = (): void => {\n this.focus();\n this.host.tabIndex = -1;\n };\n if ((event.target as HTMLElement) === this.host) {\n if (this._first > 0) {\n doCallbackAfterPaint(() => {\n scrollToFirst();\n doCallbackAfterPaint(focusIntoGrid);\n });\n } else {\n doCallbackAfterPaint(focusIntoGrid);\n }\n }\n };\n\n protected handleFocusout = (event: FocusEvent): void => {\n if (\n !event.relatedTarget ||\n !this.host.contains(event.relatedTarget as HTMLElement)\n ) {\n this.host.tabIndex = 0;\n }\n };\n\n protected handleRangeChanged = (event: RangeChangedEvent): void => {\n this.rovingTabindexController.clearElementCache(event.first);\n };\n\n protected handleVisibleChanged = (event: VisibilityChangedEvent): void => {\n this._first = event.first;\n this._last = event.last;\n };\n\n public hostConnected(): void {\n this.host.addEventListener('rangeChanged', this.handleRangeChanged);\n this.host.addEventListener(\n 'visibilityChanged',\n this.handleVisibleChanged\n );\n this.host.addEventListener('focusin', this.handleFocusin);\n this.host.addEventListener('focusout', this.handleFocusout);\n this.host.tabIndex = 0;\n this.host.style.setProperty('outline', 'none', 'important');\n }\n\n public hostDisconnected(): void {\n this.host.removeEventListener('rangeChanged', this.handleRangeChanged);\n this.host.removeEventListener(\n 'visibilityChanged',\n this.handleVisibleChanged\n );\n this.host.removeEventListener('focusin', this.handleFocusin);\n this.host.removeEventListener('focusout', this.handleFocusout);\n }\n}\n"],
|
|
5
5
|
"mappings": "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",
|
|
6
6
|
"names": ["ResizeController", "RovingTabindexController", "doCallbackAfterPaint", "cb", "host", "elements", "itemSize", "gap", "padding", "event", "scrollToFirst", "focusIntoGrid", "entries", "entry", "options", "contentRect", "contentBoxWidth", "directionLength"]
|
|
7
7
|
}
|
package/src/grid.css.dev.js.map
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["grid.css.ts"],
|
|
4
|
-
"sourcesContent": ["
|
|
4
|
+
"sourcesContent": ["/**\n * Copyright 2025 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\nimport { css } from '@spectrum-web-components/base';\nconst styles = css`\n :host{contain:strict;pointer-events:none;display:block;position:relative}::slotted(*){pointer-events:all}\n`;\nexport default styles;"],
|
|
5
5
|
"mappings": ";AAWA,SAAS,WAAW;AACpB,MAAM,SAAS;AAAA;AAAA;AAGf,eAAe;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/src/grid.css.js.map
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["grid.css.ts"],
|
|
4
|
-
"sourcesContent": ["
|
|
4
|
+
"sourcesContent": ["/**\n * Copyright 2025 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\nimport { css } from '@spectrum-web-components/base';\nconst styles = css`\n :host{contain:strict;pointer-events:none;display:block;position:relative}::slotted(*){pointer-events:all}\n`;\nexport default styles;"],
|
|
5
5
|
"mappings": "aAWA,OAAS,OAAAA,MAAW,gCACpB,MAAMC,EAASD;AAAA;AAAA,EAGf,eAAeC",
|
|
6
6
|
"names": ["css", "styles"]
|
|
7
7
|
}
|
package/src/index.d.ts
CHANGED
|
@@ -1 +1,12 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Copyright 2025 Adobe. All rights reserved.
|
|
3
|
+
* This file is licensed to you under the Apache License, Version 2.0 (the "License");
|
|
4
|
+
* you may not use this file except in compliance with the License. You may obtain a copy
|
|
5
|
+
* of the License at http://www.apache.org/licenses/LICENSE-2.0
|
|
6
|
+
*
|
|
7
|
+
* Unless required by applicable law or agreed to in writing, software distributed under
|
|
8
|
+
* the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
|
|
9
|
+
* OF ANY KIND, either express or implied. See the License for the specific language
|
|
10
|
+
* governing permissions and limitations under the License.
|
|
11
|
+
*/
|
|
1
12
|
export * from './Grid.js';
|
package/src/index.dev.js.map
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["index.ts"],
|
|
4
|
-
"sourcesContent": ["
|
|
4
|
+
"sourcesContent": ["/**\n * Copyright 2025 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nexport * from './Grid.dev.js'\n"],
|
|
5
5
|
"mappings": ";AAYA,cAAc;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/src/index.js.map
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["index.ts"],
|
|
4
|
-
"sourcesContent": ["
|
|
4
|
+
"sourcesContent": ["/**\n * Copyright 2025 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nexport * from './Grid.js';\n"],
|
|
5
5
|
"mappings": "aAYA,WAAc",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|