@spectrum-web-components/action-group 0.10.2-devmode.0 → 0.11.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/package.json +5 -5
- package/sp-action-group.js +1 -2
- package/sp-action-group.js.map +1 -1
- package/src/ActionGroup.js +2 -307
- package/src/ActionGroup.js.map +1 -1
- package/src/action-group.css.js +2 -4
- package/src/action-group.css.js.map +1 -1
- package/src/index.js +1 -1
- package/src/index.js.map +1 -1
- package/src/spectrum-action-group.css.js +2 -4
- package/src/spectrum-action-group.css.js.map +1 -1
- package/stories/action-group-tooltip.stories.js +6 -136
- package/stories/action-group-tooltip.stories.js.map +1 -1
- package/stories/action-group.stories.js +22 -202
- package/stories/action-group.stories.js.map +1 -1
- package/test/action-group-tooltip.test-vrt.js +1 -3
- package/test/action-group-tooltip.test-vrt.js.map +1 -1
- package/test/action-group.test-vrt.js +1 -3
- package/test/action-group.test-vrt.js.map +1 -1
- package/test/action-group.test.js +46 -502
- package/test/action-group.test.js.map +1 -1
- package/test/benchmark/basic-test.js +1 -5
- package/test/benchmark/basic-test.js.map +1 -1
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@spectrum-web-components/action-group",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.11.0",
|
|
4
4
|
"publishConfig": {
|
|
5
5
|
"access": "public"
|
|
6
6
|
},
|
|
@@ -58,9 +58,9 @@
|
|
|
58
58
|
],
|
|
59
59
|
"dependencies": {
|
|
60
60
|
"@lit-labs/observers": "^1.0.1",
|
|
61
|
-
"@spectrum-web-components/action-button": "^0.
|
|
62
|
-
"@spectrum-web-components/base": "^0.
|
|
63
|
-
"@spectrum-web-components/reactive-controllers": "^0.
|
|
61
|
+
"@spectrum-web-components/action-button": "^0.10.0",
|
|
62
|
+
"@spectrum-web-components/base": "^0.7.0",
|
|
63
|
+
"@spectrum-web-components/reactive-controllers": "^0.3.0",
|
|
64
64
|
"tslib": "^2.0.0"
|
|
65
65
|
},
|
|
66
66
|
"devDependencies": {
|
|
@@ -72,5 +72,5 @@
|
|
|
72
72
|
"./sp-*.js",
|
|
73
73
|
"./**/*.dev.js"
|
|
74
74
|
],
|
|
75
|
-
"gitHead": "
|
|
75
|
+
"gitHead": "05c81318844160db3f8156144106e643507fef97"
|
|
76
76
|
}
|
package/sp-action-group.js
CHANGED
package/sp-action-group.js.map
CHANGED
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["sp-action-group.ts"],
|
|
4
4
|
"sourcesContent": ["/*\nCopyright 2020 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\n\nimport { ActionGroup } from './src/ActionGroup.js';\n\ncustomElements.define('sp-action-group', ActionGroup);\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'sp-action-group': ActionGroup;\n }\n}\n"],
|
|
5
|
-
"mappings": "AAYA
|
|
5
|
+
"mappings": "AAYA,mDAEA,eAAe,OAAO,kBAAmB,CAAW",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/src/ActionGroup.js
CHANGED
|
@@ -1,309 +1,4 @@
|
|
|
1
|
-
var
|
|
2
|
-
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
3
|
-
var __decorateClass = (decorators, target, key, kind) => {
|
|
4
|
-
var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
|
|
5
|
-
for (var i = decorators.length - 1, decorator; i >= 0; i--)
|
|
6
|
-
if (decorator = decorators[i])
|
|
7
|
-
result = (kind ? decorator(target, key, result) : decorator(result)) || result;
|
|
8
|
-
if (kind && result)
|
|
9
|
-
__defProp(target, key, result);
|
|
10
|
-
return result;
|
|
11
|
-
};
|
|
12
|
-
import {
|
|
13
|
-
html,
|
|
14
|
-
SpectrumElement
|
|
15
|
-
} from "@spectrum-web-components/base";
|
|
16
|
-
import { property } from "@spectrum-web-components/base/src/decorators.js";
|
|
17
|
-
import { RovingTabindexController } from "@spectrum-web-components/reactive-controllers/src/RovingTabindex.js";
|
|
18
|
-
import { MutationController } from "@lit-labs/observers/mutation_controller.js";
|
|
19
|
-
import styles from "./action-group.css.js";
|
|
20
|
-
const EMPTY_SELECTION = [];
|
|
21
|
-
export class ActionGroup extends SpectrumElement {
|
|
22
|
-
constructor() {
|
|
23
|
-
super();
|
|
24
|
-
this._buttons = [];
|
|
25
|
-
this._buttonSelector = "sp-action-button";
|
|
26
|
-
this.rovingTabindexController = new RovingTabindexController(this, {
|
|
27
|
-
focusInIndex: (elements) => {
|
|
28
|
-
let firstEnabledIndex = -1;
|
|
29
|
-
const firstSelectedIndex = elements.findIndex((el, index) => {
|
|
30
|
-
if (!elements[firstEnabledIndex] && !el.disabled) {
|
|
31
|
-
firstEnabledIndex = index;
|
|
32
|
-
}
|
|
33
|
-
return el.selected && !el.disabled;
|
|
34
|
-
});
|
|
35
|
-
return elements[firstSelectedIndex] ? firstSelectedIndex : firstEnabledIndex;
|
|
36
|
-
},
|
|
37
|
-
elements: () => this.buttons,
|
|
38
|
-
isFocusableElement: (el) => !el.disabled
|
|
39
|
-
});
|
|
40
|
-
this.compact = false;
|
|
41
|
-
this.emphasized = false;
|
|
42
|
-
this.justified = false;
|
|
43
|
-
this.label = "";
|
|
44
|
-
this.quiet = false;
|
|
45
|
-
this.vertical = false;
|
|
46
|
-
this._selected = EMPTY_SELECTION;
|
|
47
|
-
this.manageButtons = () => {
|
|
48
|
-
const slot = this.shadowRoot.querySelector("slot");
|
|
49
|
-
if (!slot)
|
|
50
|
-
return;
|
|
51
|
-
const assignedElements = slot.assignedElements({ flatten: true });
|
|
52
|
-
const buttons = assignedElements.reduce((acc, el) => {
|
|
53
|
-
if (el.matches(this._buttonSelector)) {
|
|
54
|
-
acc.push(el);
|
|
55
|
-
} else {
|
|
56
|
-
const buttonDescendents = Array.from(el.querySelectorAll(`:scope > ${this._buttonSelector}`));
|
|
57
|
-
acc.push(...buttonDescendents);
|
|
58
|
-
}
|
|
59
|
-
return acc;
|
|
60
|
-
}, []);
|
|
61
|
-
this.buttons = buttons;
|
|
62
|
-
const currentlySelectedButtons = [];
|
|
63
|
-
this.buttons.forEach((button) => {
|
|
64
|
-
if (button.selected) {
|
|
65
|
-
currentlySelectedButtons.push(button.value);
|
|
66
|
-
}
|
|
67
|
-
});
|
|
68
|
-
this.setSelected(this.selected.concat(currentlySelectedButtons));
|
|
69
|
-
this.manageChildren();
|
|
70
|
-
this.manageSelects();
|
|
71
|
-
};
|
|
72
|
-
new MutationController(this, {
|
|
73
|
-
config: {
|
|
74
|
-
childList: true,
|
|
75
|
-
subtree: true
|
|
76
|
-
},
|
|
77
|
-
callback: () => {
|
|
78
|
-
this.manageButtons();
|
|
79
|
-
}
|
|
80
|
-
});
|
|
81
|
-
}
|
|
82
|
-
static get styles() {
|
|
83
|
-
return [styles];
|
|
84
|
-
}
|
|
85
|
-
set buttons(tabs) {
|
|
86
|
-
if (tabs === this.buttons)
|
|
87
|
-
return;
|
|
88
|
-
this._buttons = tabs;
|
|
89
|
-
this.rovingTabindexController.clearElementCache();
|
|
90
|
-
}
|
|
91
|
-
get buttons() {
|
|
92
|
-
return this._buttons;
|
|
93
|
-
}
|
|
94
|
-
set selected(selected) {
|
|
95
|
-
this.requestUpdate("selected", this._selected);
|
|
96
|
-
this._selected = selected;
|
|
97
|
-
this.updateComplete.then(() => {
|
|
98
|
-
this.applySelects();
|
|
99
|
-
this.manageChildren();
|
|
100
|
-
});
|
|
101
|
-
}
|
|
102
|
-
get selected() {
|
|
103
|
-
return this._selected;
|
|
104
|
-
}
|
|
105
|
-
dispatchChange(old) {
|
|
106
|
-
const applyDefault = this.dispatchEvent(new Event("change", {
|
|
107
|
-
bubbles: true,
|
|
108
|
-
composed: true,
|
|
109
|
-
cancelable: true
|
|
110
|
-
}));
|
|
111
|
-
if (!applyDefault) {
|
|
112
|
-
this.setSelected(old);
|
|
113
|
-
this.buttons.map((button) => {
|
|
114
|
-
button.selected = this.selected.includes(button.value);
|
|
115
|
-
});
|
|
116
|
-
}
|
|
117
|
-
}
|
|
118
|
-
setSelected(selected, announce) {
|
|
119
|
-
if (selected === this.selected)
|
|
120
|
-
return;
|
|
121
|
-
const old = this.selected;
|
|
122
|
-
this.requestUpdate("selected", old);
|
|
123
|
-
this._selected = selected;
|
|
124
|
-
if (!announce)
|
|
125
|
-
return;
|
|
126
|
-
this.dispatchChange(old);
|
|
127
|
-
}
|
|
128
|
-
focus(options) {
|
|
129
|
-
this.rovingTabindexController.focus(options);
|
|
130
|
-
}
|
|
131
|
-
deselectSelectedButtons() {
|
|
132
|
-
const selected = [
|
|
133
|
-
...this.querySelectorAll("[selected]")
|
|
134
|
-
];
|
|
135
|
-
selected.forEach((el) => {
|
|
136
|
-
el.selected = false;
|
|
137
|
-
el.tabIndex = -1;
|
|
138
|
-
el.setAttribute("aria-checked", "false");
|
|
139
|
-
});
|
|
140
|
-
}
|
|
141
|
-
handleClick(event) {
|
|
142
|
-
const target = event.target;
|
|
143
|
-
if (typeof target.value === "undefined") {
|
|
144
|
-
return;
|
|
145
|
-
}
|
|
146
|
-
switch (this.selects) {
|
|
147
|
-
case "single": {
|
|
148
|
-
this.deselectSelectedButtons();
|
|
149
|
-
target.selected = true;
|
|
150
|
-
target.tabIndex = 0;
|
|
151
|
-
target.setAttribute("aria-checked", "true");
|
|
152
|
-
this.setSelected([target.value], true);
|
|
153
|
-
target.focus();
|
|
154
|
-
break;
|
|
155
|
-
}
|
|
156
|
-
case "multiple": {
|
|
157
|
-
const selected = [...this.selected];
|
|
158
|
-
target.selected = !target.selected;
|
|
159
|
-
target.setAttribute("aria-checked", target.selected ? "true" : "false");
|
|
160
|
-
if (target.selected) {
|
|
161
|
-
selected.push(target.value);
|
|
162
|
-
} else {
|
|
163
|
-
selected.splice(this.selected.indexOf(target.value), 1);
|
|
164
|
-
}
|
|
165
|
-
this.setSelected(selected, true);
|
|
166
|
-
this.buttons.forEach((button) => {
|
|
167
|
-
button.tabIndex = -1;
|
|
168
|
-
});
|
|
169
|
-
target.tabIndex = 0;
|
|
170
|
-
break;
|
|
171
|
-
}
|
|
172
|
-
default:
|
|
173
|
-
break;
|
|
174
|
-
}
|
|
175
|
-
}
|
|
176
|
-
async applySelects() {
|
|
177
|
-
await this.manageSelects(true);
|
|
178
|
-
}
|
|
179
|
-
async manageSelects(applied) {
|
|
180
|
-
if (!this.buttons.length) {
|
|
181
|
-
return;
|
|
182
|
-
}
|
|
183
|
-
const options = this.buttons;
|
|
184
|
-
switch (this.selects) {
|
|
185
|
-
case "single": {
|
|
186
|
-
this.setAttribute("role", "radiogroup");
|
|
187
|
-
const selections = [];
|
|
188
|
-
const updates = options.map(async (option) => {
|
|
189
|
-
await option.updateComplete;
|
|
190
|
-
option.setAttribute("role", "radio");
|
|
191
|
-
option.setAttribute("aria-checked", option.selected ? "true" : "false");
|
|
192
|
-
if (option.selected) {
|
|
193
|
-
selections.push(option);
|
|
194
|
-
}
|
|
195
|
-
});
|
|
196
|
-
if (applied)
|
|
197
|
-
break;
|
|
198
|
-
await Promise.all(updates);
|
|
199
|
-
const selected = selections.map((button) => {
|
|
200
|
-
return button.value;
|
|
201
|
-
});
|
|
202
|
-
this.setSelected(selected || EMPTY_SELECTION);
|
|
203
|
-
break;
|
|
204
|
-
}
|
|
205
|
-
case "multiple": {
|
|
206
|
-
this.setAttribute("role", "group");
|
|
207
|
-
const selection = [];
|
|
208
|
-
const selections = [];
|
|
209
|
-
const updates = options.map(async (option) => {
|
|
210
|
-
await option.updateComplete;
|
|
211
|
-
option.setAttribute("role", "checkbox");
|
|
212
|
-
option.setAttribute("aria-checked", option.selected ? "true" : "false");
|
|
213
|
-
if (option.selected) {
|
|
214
|
-
selection.push(option.value);
|
|
215
|
-
selections.push(option);
|
|
216
|
-
}
|
|
217
|
-
});
|
|
218
|
-
if (applied)
|
|
219
|
-
break;
|
|
220
|
-
await Promise.all(updates);
|
|
221
|
-
const selected = !!selection.length ? selection : EMPTY_SELECTION;
|
|
222
|
-
this.setSelected(selected);
|
|
223
|
-
break;
|
|
224
|
-
}
|
|
225
|
-
default:
|
|
226
|
-
if (this.selected.length) {
|
|
227
|
-
const selections = [];
|
|
228
|
-
const updates = options.map(async (option) => {
|
|
229
|
-
await option.updateComplete;
|
|
230
|
-
option.setAttribute("aria-checked", option.selected ? "true" : "false");
|
|
231
|
-
option.setAttribute("role", "button");
|
|
232
|
-
if (option.selected) {
|
|
233
|
-
selections.push(option);
|
|
234
|
-
}
|
|
235
|
-
});
|
|
236
|
-
if (applied)
|
|
237
|
-
break;
|
|
238
|
-
await Promise.all(updates);
|
|
239
|
-
this.setSelected(selections.map((button) => {
|
|
240
|
-
return button.value;
|
|
241
|
-
}));
|
|
242
|
-
} else {
|
|
243
|
-
this.buttons.forEach((option) => {
|
|
244
|
-
option.setAttribute("role", "button");
|
|
245
|
-
});
|
|
246
|
-
this.removeAttribute("role");
|
|
247
|
-
break;
|
|
248
|
-
}
|
|
249
|
-
}
|
|
250
|
-
}
|
|
251
|
-
render() {
|
|
252
|
-
return html`
|
|
1
|
+
var d=Object.defineProperty;var h=Object.getOwnPropertyDescriptor;var n=(u,e,t,s)=>{for(var l=s>1?void 0:s?h(e,t):e,i=u.length-1,r;i>=0;i--)(r=u[i])&&(l=(s?r(e,t,l):r(l))||l);return s&&l&&d(e,t,l),l};import{html as p,SpectrumElement as b}from"@spectrum-web-components/base";import{property as c}from"@spectrum-web-components/base/src/decorators.js";import{RovingTabindexController as f}from"@spectrum-web-components/reactive-controllers/src/RovingTabindex.js";import{MutationController as m}from"@lit-labs/observers/mutation_controller.js";import v from"./action-group.css.js";const o=[];export class ActionGroup extends b{constructor(){super();this._buttons=[];this._buttonSelector="sp-action-button";this.rovingTabindexController=new f(this,{focusInIndex:e=>{let t=-1;const s=e.findIndex((l,i)=>(!e[t]&&!l.disabled&&(t=i),l.selected&&!l.disabled));return e[s]?s:t},elements:()=>this.buttons,isFocusableElement:e=>!e.disabled});this.compact=!1;this.emphasized=!1;this.justified=!1;this.label="";this.quiet=!1;this.vertical=!1;this._selected=o;this.manageButtons=()=>{const e=this.shadowRoot.querySelector("slot");if(!e)return;const s=e.assignedElements({flatten:!0}).reduce((i,r)=>{if(r.matches(this._buttonSelector))i.push(r);else{const a=Array.from(r.querySelectorAll(`:scope > ${this._buttonSelector}`));i.push(...a)}return i},[]);this.buttons=s;const l=[];this.buttons.forEach(i=>{i.selected&&l.push(i.value)}),this.setSelected(this.selected.concat(l)),this.manageChildren(),this.manageSelects()};new m(this,{config:{childList:!0,subtree:!0},callback:()=>{this.manageButtons()}})}static get styles(){return[v]}set buttons(e){e!==this.buttons&&(this._buttons=e,this.rovingTabindexController.clearElementCache())}get buttons(){return this._buttons}set selected(e){this.requestUpdate("selected",this._selected),this._selected=e,this.updateComplete.then(()=>{this.applySelects(),this.manageChildren()})}get selected(){return this._selected}dispatchChange(e){this.dispatchEvent(new Event("change",{bubbles:!0,composed:!0,cancelable:!0}))||(this.setSelected(e),this.buttons.map(s=>{s.selected=this.selected.includes(s.value)}))}setSelected(e,t){if(e===this.selected)return;const s=this.selected;this.requestUpdate("selected",s),this._selected=e,t&&this.dispatchChange(s)}focus(e){this.rovingTabindexController.focus(e)}deselectSelectedButtons(){[...this.querySelectorAll("[selected]")].forEach(t=>{t.selected=!1,t.tabIndex=-1,t.setAttribute("aria-checked","false")})}handleClick(e){const t=e.target;if(typeof t.value!="undefined")switch(this.selects){case"single":{this.deselectSelectedButtons(),t.selected=!0,t.tabIndex=0,t.setAttribute("aria-checked","true"),this.setSelected([t.value],!0),t.focus();break}case"multiple":{const s=[...this.selected];t.selected=!t.selected,t.setAttribute("aria-checked",t.selected?"true":"false"),t.selected?s.push(t.value):s.splice(this.selected.indexOf(t.value),1),this.setSelected(s,!0),this.buttons.forEach(l=>{l.tabIndex=-1}),t.tabIndex=0;break}default:break}}async applySelects(){await this.manageSelects(!0)}async manageSelects(e){if(!this.buttons.length)return;const t=this.buttons;switch(this.selects){case"single":{this.setAttribute("role","radiogroup");const s=[],l=t.map(async r=>{await r.updateComplete,r.setAttribute("role","radio"),r.setAttribute("aria-checked",r.selected?"true":"false"),r.selected&&s.push(r)});if(e)break;await Promise.all(l);const i=s.map(r=>r.value);this.setSelected(i||o);break}case"multiple":{this.setAttribute("role","group");const s=[],l=[],i=t.map(async a=>{await a.updateComplete,a.setAttribute("role","checkbox"),a.setAttribute("aria-checked",a.selected?"true":"false"),a.selected&&(s.push(a.value),l.push(a))});if(e)break;await Promise.all(i);const r=s.length?s:o;this.setSelected(r);break}default:if(this.selected.length){const s=[],l=t.map(async i=>{await i.updateComplete,i.setAttribute("aria-checked",i.selected?"true":"false"),i.setAttribute("role","button"),i.selected&&s.push(i)});if(e)break;await Promise.all(l),this.setSelected(s.map(i=>i.value))}else{this.buttons.forEach(s=>{s.setAttribute("role","button")}),this.removeAttribute("role");break}}}render(){return p`
|
|
253
2
|
<slot role="presentation" @slotchange=${this.manageButtons}></slot>
|
|
254
|
-
|
|
255
|
-
}
|
|
256
|
-
firstUpdated(changes) {
|
|
257
|
-
super.firstUpdated(changes);
|
|
258
|
-
this.addEventListener("click", this.handleClick);
|
|
259
|
-
}
|
|
260
|
-
updated(changes) {
|
|
261
|
-
super.updated(changes);
|
|
262
|
-
if (changes.has("selects")) {
|
|
263
|
-
this.manageSelects();
|
|
264
|
-
this.manageChildren();
|
|
265
|
-
}
|
|
266
|
-
if (changes.has("quiet") && this.quiet || changes.has("emphasized") && this.emphasized) {
|
|
267
|
-
this.manageChildren();
|
|
268
|
-
}
|
|
269
|
-
if (changes.has("label") && (this.label || typeof changes.get("label") !== "undefined")) {
|
|
270
|
-
if (this.label.length) {
|
|
271
|
-
this.setAttribute("aria-label", this.label);
|
|
272
|
-
} else {
|
|
273
|
-
this.removeAttribute("aria-label");
|
|
274
|
-
}
|
|
275
|
-
}
|
|
276
|
-
}
|
|
277
|
-
manageChildren() {
|
|
278
|
-
this.buttons.forEach((button) => {
|
|
279
|
-
button.quiet = this.quiet;
|
|
280
|
-
button.emphasized = this.emphasized;
|
|
281
|
-
button.selected = this.selected.includes(button.value);
|
|
282
|
-
});
|
|
283
|
-
}
|
|
284
|
-
}
|
|
285
|
-
__decorateClass([
|
|
286
|
-
property({ type: Boolean, reflect: true })
|
|
287
|
-
], ActionGroup.prototype, "compact", 2);
|
|
288
|
-
__decorateClass([
|
|
289
|
-
property({ type: Boolean, reflect: true })
|
|
290
|
-
], ActionGroup.prototype, "emphasized", 2);
|
|
291
|
-
__decorateClass([
|
|
292
|
-
property({ type: Boolean, reflect: true })
|
|
293
|
-
], ActionGroup.prototype, "justified", 2);
|
|
294
|
-
__decorateClass([
|
|
295
|
-
property({ type: String })
|
|
296
|
-
], ActionGroup.prototype, "label", 2);
|
|
297
|
-
__decorateClass([
|
|
298
|
-
property({ type: Boolean, reflect: true })
|
|
299
|
-
], ActionGroup.prototype, "quiet", 2);
|
|
300
|
-
__decorateClass([
|
|
301
|
-
property({ type: String })
|
|
302
|
-
], ActionGroup.prototype, "selects", 2);
|
|
303
|
-
__decorateClass([
|
|
304
|
-
property({ type: Boolean, reflect: true })
|
|
305
|
-
], ActionGroup.prototype, "vertical", 2);
|
|
306
|
-
__decorateClass([
|
|
307
|
-
property({ type: Array })
|
|
308
|
-
], ActionGroup.prototype, "selected", 1);
|
|
3
|
+
`}firstUpdated(e){super.firstUpdated(e),this.addEventListener("click",this.handleClick)}updated(e){super.updated(e),e.has("selects")&&(this.manageSelects(),this.manageChildren()),(e.has("quiet")&&this.quiet||e.has("emphasized")&&this.emphasized)&&this.manageChildren(),e.has("label")&&(this.label||typeof e.get("label")!="undefined")&&(this.label.length?this.setAttribute("aria-label",this.label):this.removeAttribute("aria-label"))}manageChildren(){this.buttons.forEach(e=>{e.quiet=this.quiet,e.emphasized=this.emphasized,e.selected=this.selected.includes(e.value)})}}n([c({type:Boolean,reflect:!0})],ActionGroup.prototype,"compact",2),n([c({type:Boolean,reflect:!0})],ActionGroup.prototype,"emphasized",2),n([c({type:Boolean,reflect:!0})],ActionGroup.prototype,"justified",2),n([c({type:String})],ActionGroup.prototype,"label",2),n([c({type:Boolean,reflect:!0})],ActionGroup.prototype,"quiet",2),n([c({type:String})],ActionGroup.prototype,"selects",2),n([c({type:Boolean,reflect:!0})],ActionGroup.prototype,"vertical",2),n([c({type:Array})],ActionGroup.prototype,"selected",1);
|
|
309
4
|
//# sourceMappingURL=ActionGroup.js.map
|
package/src/ActionGroup.js.map
CHANGED
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["ActionGroup.ts"],
|
|
4
4
|
"sourcesContent": ["/*\nCopyright 2020 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\n\nimport {\n CSSResultArray,\n html,\n PropertyValues,\n SpectrumElement,\n TemplateResult,\n} from '@spectrum-web-components/base';\nimport { property } from '@spectrum-web-components/base/src/decorators.js';\nimport type { ActionButton } from '@spectrum-web-components/action-button';\nimport { RovingTabindexController } from '@spectrum-web-components/reactive-controllers/src/RovingTabindex.js';\nimport { MutationController } from '@lit-labs/observers/mutation_controller.js';\n\nimport styles from './action-group.css.js';\n\nconst EMPTY_SELECTION: string[] = [];\n\n/**\n * @element sp-action-group\n * @slot - the sp-action-button elements that make up the group\n *\n * @fires change - Announces that selection state has been changed by user\n */\nexport class ActionGroup extends SpectrumElement {\n public static override get styles(): CSSResultArray {\n return [styles];\n }\n\n public set buttons(tabs: ActionButton[]) {\n if (tabs === this.buttons) return;\n this._buttons = tabs;\n this.rovingTabindexController.clearElementCache();\n }\n\n public get buttons(): ActionButton[] {\n return this._buttons;\n }\n\n public _buttons: ActionButton[] = [];\n\n protected _buttonSelector = 'sp-action-button';\n\n constructor() {\n super();\n\n new MutationController(this, {\n config: {\n childList: true,\n subtree: true,\n },\n callback: () => {\n this.manageButtons();\n },\n });\n }\n\n rovingTabindexController = new RovingTabindexController<ActionButton>(\n this,\n {\n focusInIndex: (elements: ActionButton[]) => {\n let firstEnabledIndex = -1;\n const firstSelectedIndex = elements.findIndex((el, index) => {\n if (!elements[firstEnabledIndex] && !el.disabled) {\n firstEnabledIndex = index;\n }\n return el.selected && !el.disabled;\n });\n return elements[firstSelectedIndex]\n ? firstSelectedIndex\n : firstEnabledIndex;\n },\n elements: () => this.buttons,\n isFocusableElement: (el: ActionButton) => !el.disabled,\n }\n );\n\n @property({ type: Boolean, reflect: true })\n public compact = false;\n\n @property({ type: Boolean, reflect: true })\n public emphasized = false;\n\n @property({ type: Boolean, reflect: true })\n public justified = false;\n\n @property({ type: String })\n public label = '';\n\n @property({ type: Boolean, reflect: true })\n public quiet = false;\n\n @property({ type: String })\n public selects: undefined | 'single' | 'multiple';\n\n @property({ type: Boolean, reflect: true })\n public vertical = false;\n\n private _selected: string[] = EMPTY_SELECTION;\n\n set selected(selected: string[]) {\n this.requestUpdate('selected', this._selected);\n this._selected = selected;\n this.updateComplete.then(() => {\n this.applySelects();\n this.manageChildren();\n });\n }\n\n @property({ type: Array })\n get selected(): string[] {\n return this._selected;\n }\n\n private dispatchChange(old: string[]): void {\n const applyDefault = this.dispatchEvent(\n new Event('change', {\n bubbles: true,\n composed: true,\n cancelable: true,\n })\n );\n\n if (!applyDefault) {\n this.setSelected(old);\n this.buttons.map((button) => {\n button.selected = this.selected.includes(button.value);\n });\n }\n }\n\n private setSelected(selected: string[], announce?: boolean): void {\n if (selected === this.selected) return;\n\n const old = this.selected;\n this.requestUpdate('selected', old);\n this._selected = selected;\n if (!announce) return;\n this.dispatchChange(old);\n }\n\n public override focus(options?: FocusOptions): void {\n this.rovingTabindexController.focus(options);\n }\n\n private deselectSelectedButtons(): void {\n const selected = [\n ...this.querySelectorAll('[selected]'),\n ] as ActionButton[];\n selected.forEach((el) => {\n el.selected = false;\n el.tabIndex = -1;\n el.setAttribute('aria-checked', 'false');\n });\n }\n\n private handleClick(event: Event): void {\n const target = event.target as ActionButton;\n if (typeof target.value === 'undefined') {\n return;\n }\n switch (this.selects) {\n case 'single': {\n this.deselectSelectedButtons();\n target.selected = true;\n target.tabIndex = 0;\n target.setAttribute('aria-checked', 'true');\n this.setSelected([target.value], true);\n target.focus();\n break;\n }\n case 'multiple': {\n const selected = [...this.selected];\n target.selected = !target.selected;\n target.setAttribute(\n 'aria-checked',\n target.selected ? 'true' : 'false'\n );\n if (target.selected) {\n selected.push(target.value);\n } else {\n selected.splice(this.selected.indexOf(target.value), 1);\n }\n this.setSelected(selected, true);\n\n this.buttons.forEach((button) => {\n button.tabIndex = -1;\n });\n\n target.tabIndex = 0;\n\n break;\n }\n default:\n break;\n }\n }\n\n private async applySelects(): Promise<void> {\n await this.manageSelects(true);\n }\n\n private async manageSelects(applied?: boolean): Promise<void> {\n if (!this.buttons.length) {\n return;\n }\n\n const options = this.buttons;\n switch (this.selects) {\n case 'single': {\n this.setAttribute('role', 'radiogroup');\n const selections: ActionButton[] = [];\n const updates = options.map(async (option) => {\n await option.updateComplete;\n option.setAttribute('role', 'radio');\n option.setAttribute(\n 'aria-checked',\n option.selected ? 'true' : 'false'\n );\n if (option.selected) {\n selections.push(option);\n }\n });\n if (applied) break;\n await Promise.all(updates);\n\n const selected = selections.map((button) => {\n return button.value;\n });\n\n this.setSelected(selected || EMPTY_SELECTION);\n break;\n }\n case 'multiple': {\n this.setAttribute('role', 'group');\n const selection: string[] = [];\n const selections: ActionButton[] = [];\n const updates = options.map(async (option) => {\n await option.updateComplete;\n option.setAttribute('role', 'checkbox');\n option.setAttribute(\n 'aria-checked',\n option.selected ? 'true' : 'false'\n );\n if (option.selected) {\n selection.push(option.value);\n selections.push(option);\n }\n });\n if (applied) break;\n await Promise.all(updates);\n const selected = !!selection.length\n ? selection\n : EMPTY_SELECTION;\n this.setSelected(selected);\n break;\n }\n default:\n // if user defines .selected\n if (this.selected.length) {\n const selections: ActionButton[] = [];\n const updates = options.map(async (option) => {\n await option.updateComplete;\n option.setAttribute(\n 'aria-checked',\n option.selected ? 'true' : 'false'\n );\n option.setAttribute('role', 'button');\n if (option.selected) {\n selections.push(option);\n }\n });\n if (applied) break;\n await Promise.all(updates);\n\n this.setSelected(\n selections.map((button) => {\n return button.value;\n })\n );\n } else {\n this.buttons.forEach((option) => {\n option.setAttribute('role', 'button');\n });\n this.removeAttribute('role');\n break;\n }\n }\n }\n\n protected override render(): TemplateResult {\n return html`\n <slot role=\"presentation\" @slotchange=${this.manageButtons}></slot>\n `;\n }\n\n protected override firstUpdated(changes: PropertyValues): void {\n super.firstUpdated(changes);\n this.addEventListener('click', this.handleClick);\n }\n\n protected override updated(changes: PropertyValues): void {\n super.updated(changes);\n if (changes.has('selects')) {\n this.manageSelects();\n this.manageChildren();\n }\n if (\n (changes.has('quiet') && this.quiet) ||\n (changes.has('emphasized') && this.emphasized)\n ) {\n this.manageChildren();\n }\n // Update `aria-label` when `label` available or not first `updated`\n if (\n changes.has('label') &&\n (this.label || typeof changes.get('label') !== 'undefined')\n ) {\n if (this.label.length) {\n this.setAttribute('aria-label', this.label);\n } else {\n this.removeAttribute('aria-label');\n }\n }\n }\n\n private manageChildren(): void {\n this.buttons.forEach((button) => {\n button.quiet = this.quiet;\n button.emphasized = this.emphasized;\n button.selected = this.selected.includes(button.value);\n });\n }\n\n private manageButtons = (): void => {\n const slot = this.shadowRoot.querySelector('slot');\n if (!slot) return;\n const assignedElements = slot.assignedElements({ flatten: true });\n const buttons = assignedElements.reduce((acc: unknown[], el) => {\n if (el.matches(this._buttonSelector)) {\n acc.push(el);\n } else {\n const buttonDescendents = Array.from(\n el.querySelectorAll(`:scope > ${this._buttonSelector}`)\n );\n acc.push(...buttonDescendents);\n }\n return acc;\n }, []);\n this.buttons = buttons as ActionButton[];\n // <selected> element merges selected so following paradigm here\n const currentlySelectedButtons: string[] = [];\n this.buttons.forEach((button: ActionButton) => {\n if (button.selected) {\n currentlySelectedButtons.push(button.value);\n }\n });\n this.setSelected(this.selected.concat(currentlySelectedButtons));\n this.manageChildren();\n this.manageSelects();\n };\n}\n"],
|
|
5
|
-
"mappings": "
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/src/action-group.css.js
CHANGED
|
@@ -1,5 +1,4 @@
|
|
|
1
|
-
import
|
|
2
|
-
const styles = css`
|
|
1
|
+
import{css as t}from"@spectrum-web-components/base";const r=t`
|
|
3
2
|
:host{--spectrum-actiongroup-button-gap-reset:0}:host{display:flex;flex-wrap:wrap}::slotted(*){flex-shrink:0}:host(:not([vertical]):not([compact])){margin-top:calc(var(
|
|
4
3
|
--spectrum-actiongroup-button-gap-y,
|
|
5
4
|
var(--spectrum-alias-actiongroup-button-gap)
|
|
@@ -144,6 +143,5 @@ var(--spectrum-alias-border-size-thin)
|
|
|
144
143
|
) 0 0 var(--spectrum-alias-component-border-radius)}:host([dir=rtl][compact]:not([quiet],[vertical])) ::slotted(:first-child){--mod-actionbutton-focus-ring-border-radius:0 var(--spectrum-alias-component-border-radius) var(--spectrum-alias-component-border-radius) 0}:host([dir=ltr][compact]:not([quiet],[vertical])) ::slotted(:last-child){--mod-actionbutton-focus-ring-border-radius:0 var(--spectrum-alias-component-border-radius) var(--spectrum-alias-component-border-radius) 0}:host([dir=rtl][compact]:not([quiet],[vertical])) ::slotted(:last-child){--mod-actionbutton-focus-ring-border-radius:var(
|
|
145
144
|
--spectrum-alias-component-border-radius
|
|
146
145
|
) 0 0 var(--spectrum-alias-component-border-radius)}
|
|
147
|
-
`;
|
|
148
|
-
export default styles;
|
|
146
|
+
`;export default r;
|
|
149
147
|
//# sourceMappingURL=action-group.css.js.map
|
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["action-group.css.ts"],
|
|
4
4
|
"sourcesContent": ["/*\nCopyright 2022 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\nimport { css } from '@spectrum-web-components/base';\nconst styles = css`\n:host{--spectrum-actiongroup-button-gap-reset:0}:host{display:flex;flex-wrap:wrap}::slotted(*){flex-shrink:0}:host(:not([vertical]):not([compact])){margin-top:calc(var(\n--spectrum-actiongroup-button-gap-y,\nvar(--spectrum-alias-actiongroup-button-gap)\n)*-1)}:host(:not([vertical]):not([compact])) ::slotted(*){flex-shrink:0;margin-top:var(\n--spectrum-actiongroup-button-gap-y,var(--spectrum-alias-actiongroup-button-gap)\n)}:host([dir=ltr]:not([vertical]):not([compact])) ::slotted(:not(:last-child)){margin-right:var(\n--spectrum-actiongroup-button-gap-x,var(--spectrum-alias-actiongroup-button-gap)\n)}:host([dir=rtl]:not([vertical]):not([compact])) ::slotted(:not(:last-child)){margin-left:var(\n--spectrum-actiongroup-button-gap-x,var(--spectrum-alias-actiongroup-button-gap)\n)}:host([vertical]){display:inline-flex;flex-direction:column}:host([dir=ltr][vertical]) ::slotted(:not(:first-child)){margin-left:var(\n--spectrum-actiongroup-button-gap-reset\n)}:host([dir=rtl][vertical]) ::slotted(:not(:first-child)){margin-right:var(\n--spectrum-actiongroup-button-gap-reset\n)}:host([vertical]) ::slotted(:not(:first-child)){margin-top:var(\n--spectrum-actiongroup-button-gap-y,var(--spectrum-alias-actiongroup-button-gap)\n)}:host([dir=ltr][vertical][vertical]){margin-left:var(\n--spectrum-actiongroup-button-gap-reset\n)}:host([dir=rtl][vertical][vertical]){margin-right:var(\n--spectrum-actiongroup-button-gap-reset\n)}:host([vertical][vertical]){margin-top:var(\n--spectrum-actiongroup-button-gap-y,var(--spectrum-alias-actiongroup-button-gap)\n)}:host([compact]){gap:var(\n--spectrum-actiongroup-compact-button-gap,var(--spectrum-alias-actiongroup-button-gap-compact)\n)}:host([dir=ltr][compact][quiet]) ::slotted(:not(:first-child)){margin-left:var(\n--spectrum-actiongroup-quiet-compact-button-gap,var(--spectrum-alias-actiongroup-button-gap-quiet-compact)\n)}:host([dir=rtl][compact][quiet]) ::slotted(:not(:first-child)){margin-right:var(\n--spectrum-actiongroup-quiet-compact-button-gap,var(--spectrum-alias-actiongroup-button-gap-quiet-compact)\n)}:host([compact][quiet]) ::slotted(:not(:first-child)){margin-top:var(\n--spectrum-actiongroup-button-gap-reset\n)}:host([dir=ltr][compact][quiet][vertical]) ::slotted(:not(:first-child)){margin-left:var(\n--spectrum-actiongroup-button-gap-reset\n)}:host([dir=rtl][compact][quiet][vertical]) ::slotted(:not(:first-child)){margin-right:var(\n--spectrum-actiongroup-button-gap-reset\n)}:host([compact][quiet][vertical]) ::slotted(:not(:first-child)){margin-top:var(\n--spectrum-actiongroup-quiet-compact-button-gap,var(--spectrum-alias-actiongroup-button-gap-quiet-compact)\n)}:host([compact]:not([quiet])){flex-wrap:nowrap}:host([compact]:not([quiet])) ::slotted(*){--spectrum-actionbutton-focus-ring-border-radius-adjusted:var(\n--spectrum-alias-border-radius-xsmall,var(--spectrum-global-dimension-size-10)\n);border-radius:0;position:relative;z-index:0}:host([dir=ltr][compact]:not([quiet])) ::slotted(:first-child){border-top-left-radius:var(\n--spectrum-actionbutton-m-texticon-border-radius,var(--spectrum-alias-component-border-radius)\n)}:host([dir=rtl][compact]:not([quiet])) ::slotted(:first-child){border-top-right-radius:var(\n--spectrum-actionbutton-m-texticon-border-radius,var(--spectrum-alias-component-border-radius)\n)}:host([dir=ltr][compact]:not([quiet])) ::slotted(:first-child){border-bottom-left-radius:var(\n--spectrum-actionbutton-m-texticon-border-radius,var(--spectrum-alias-component-border-radius)\n)}:host([dir=rtl][compact]:not([quiet])) ::slotted(:first-child){border-bottom-right-radius:var(\n--spectrum-actionbutton-m-texticon-border-radius,var(--spectrum-alias-component-border-radius)\n)}:host([dir=ltr][compact]:not([quiet])) ::slotted(:first-child){margin-right:calc(var(\n--spectrum-actionbutton-m-texticon-border-size,\nvar(--spectrum-alias-border-size-thin)\n)*-1/2)}:host([dir=rtl][compact]:not([quiet])) ::slotted(:first-child){margin-left:calc(var(\n--spectrum-actionbutton-m-texticon-border-size,\nvar(--spectrum-alias-border-size-thin)\n)*-1/2)}:host([compact]:not([quiet])) ::slotted(:first-child){--spectrum-actionbutton-focus-ring-border-radius-adjusted:calc(var(\n--spectrum-actionbutton-m-quiet-textonly-border-radius,\nvar(--spectrum-alias-component-border-radius)\n) + var(\n--spectrum-actionbutton-m-textonly-focus-ring-gap,\nvar(--spectrum-alias-component-focusring-gap)\n)) var(\n--spectrum-alias-border-radius-xsmall,var(--spectrum-global-dimension-size-10)\n) var(\n--spectrum-alias-border-radius-xsmall,var(--spectrum-global-dimension-size-10)\n) calc(var(\n--spectrum-actionbutton-m-quiet-textonly-border-radius,\nvar(--spectrum-alias-component-border-radius)\n) + var(\n--spectrum-actionbutton-m-textonly-focus-ring-gap,\nvar(--spectrum-alias-component-focusring-gap)\n))}:host([dir=ltr][compact]:not([quiet])) ::slotted(:last-child){border-top-right-radius:var(\n--spectrum-actionbutton-m-texticon-border-radius,var(--spectrum-alias-component-border-radius)\n)}:host([dir=rtl][compact]:not([quiet])) ::slotted(:last-child){border-top-left-radius:var(\n--spectrum-actionbutton-m-texticon-border-radius,var(--spectrum-alias-component-border-radius)\n)}:host([dir=ltr][compact]:not([quiet])) ::slotted(:last-child){border-bottom-right-radius:var(\n--spectrum-actionbutton-m-texticon-border-radius,var(--spectrum-alias-component-border-radius)\n)}:host([dir=rtl][compact]:not([quiet])) ::slotted(:last-child){border-bottom-left-radius:var(\n--spectrum-actionbutton-m-texticon-border-radius,var(--spectrum-alias-component-border-radius)\n)}:host([dir=ltr][compact]:not([quiet])) ::slotted(:last-child){margin-left:calc(var(\n--spectrum-actionbutton-m-texticon-border-size,\nvar(--spectrum-alias-border-size-thin)\n)*-1/2)}:host([dir=rtl][compact]:not([quiet])) ::slotted(:last-child){margin-right:calc(var(\n--spectrum-actionbutton-m-texticon-border-size,\nvar(--spectrum-alias-border-size-thin)\n)*-1/2)}:host([dir=ltr][compact]:not([quiet])) ::slotted(:last-child){margin-right:0}:host([dir=rtl][compact]:not([quiet])) ::slotted(:last-child){margin-left:0}:host([compact]:not([quiet])) ::slotted(:last-child){--spectrum-actionbutton-focus-ring-border-radius-adjusted:var(\n--spectrum-alias-border-radius-xsmall,var(--spectrum-global-dimension-size-10)\n) calc(var(\n--spectrum-actionbutton-m-quiet-textonly-border-radius,\nvar(--spectrum-alias-component-border-radius)\n) + var(\n--spectrum-actionbutton-m-textonly-focus-ring-gap,\nvar(--spectrum-alias-component-focusring-gap)\n)) calc(var(\n--spectrum-actionbutton-m-quiet-textonly-border-radius,\nvar(--spectrum-alias-component-border-radius)\n) + var(\n--spectrum-actionbutton-m-textonly-focus-ring-gap,\nvar(--spectrum-alias-component-focusring-gap)\n)) var(\n--spectrum-alias-border-radius-xsmall,var(--spectrum-global-dimension-size-10)\n)}:host([compact]:not([quiet])) ::slotted([selected]){z-index:1}:host([compact]:not([quiet])) ::slotted(:hover){z-index:2}:host([compact]:not([quiet])) ::slotted(.focus-visible){z-index:3}:host([compact]:not([quiet])) ::slotted(:focus-visible){z-index:3}:host([dir=ltr][compact]:not([quiet])) ::slotted(:not(:first-child)){margin-left:calc(var(\n--spectrum-actionbutton-m-texticon-border-size,\nvar(--spectrum-alias-border-size-thin)\n)*-1/2)}:host([dir=rtl][compact]:not([quiet])) ::slotted(:not(:first-child)){margin-right:calc(var(\n--spectrum-actionbutton-m-texticon-border-size,\nvar(--spectrum-alias-border-size-thin)\n)*-1/2)}:host([dir=ltr][compact]:not([quiet])) ::slotted(:not(:first-child)){margin-right:calc(var(\n--spectrum-actionbutton-m-texticon-border-size,\nvar(--spectrum-alias-border-size-thin)\n)*-1/2)}:host([dir=rtl][compact]:not([quiet])) ::slotted(:not(:first-child)){margin-left:calc(var(\n--spectrum-actionbutton-m-texticon-border-size,\nvar(--spectrum-alias-border-size-thin)\n)*-1/2)}:host([compact][vertical]:not([quiet])){gap:0}:host([compact][vertical]:not([quiet])) ::slotted(*){border-radius:0}:host([compact][vertical]:not([quiet])) ::slotted(:not(:first-child)){margin-bottom:calc(var(\n--spectrum-actionbutton-m-texticon-border-size,\nvar(--spectrum-alias-border-size-thin)\n)*-1/2);margin-top:calc(var(\n--spectrum-actionbutton-m-texticon-border-size,\nvar(--spectrum-alias-border-size-thin)\n)*-1/2)}:host([dir=ltr][compact][vertical]:not([quiet])) ::slotted(:first-child){border-top-left-radius:var(\n--spectrum-actionbutton-m-texticon-border-radius,var(--spectrum-alias-component-border-radius)\n)}:host([dir=rtl][compact][vertical]:not([quiet])) ::slotted(:first-child){border-top-right-radius:var(\n--spectrum-actionbutton-m-texticon-border-radius,var(--spectrum-alias-component-border-radius)\n)}:host([dir=ltr][compact][vertical]:not([quiet])) ::slotted(:first-child){border-top-right-radius:var(\n--spectrum-actionbutton-m-texticon-border-radius,var(--spectrum-alias-component-border-radius)\n)}:host([dir=rtl][compact][vertical]:not([quiet])) ::slotted(:first-child){border-top-left-radius:var(\n--spectrum-actionbutton-m-texticon-border-radius,var(--spectrum-alias-component-border-radius)\n)}:host([compact][vertical]:not([quiet])) ::slotted(:first-child){border-radius:0;margin-bottom:calc(var(\n--spectrum-actionbutton-m-texticon-border-size,\nvar(--spectrum-alias-border-size-thin)\n)*-1/2)}:host([dir=ltr][compact][vertical]:not([quiet])) ::slotted(:last-child){border-bottom-left-radius:var(\n--spectrum-actionbutton-m-texticon-border-radius,var(--spectrum-alias-component-border-radius)\n)}:host([dir=rtl][compact][vertical]:not([quiet])) ::slotted(:last-child){border-bottom-right-radius:var(\n--spectrum-actionbutton-m-texticon-border-radius,var(--spectrum-alias-component-border-radius)\n)}:host([dir=ltr][compact][vertical]:not([quiet])) ::slotted(:last-child){border-bottom-right-radius:var(\n--spectrum-actionbutton-m-texticon-border-radius,var(--spectrum-alias-component-border-radius)\n)}:host([dir=rtl][compact][vertical]:not([quiet])) ::slotted(:last-child){border-bottom-left-radius:var(\n--spectrum-actionbutton-m-texticon-border-radius,var(--spectrum-alias-component-border-radius)\n)}:host([compact][vertical]:not([quiet])) ::slotted(:last-child){border-radius:0;margin-bottom:0;margin-top:calc(var(\n--spectrum-actionbutton-m-texticon-border-size,\nvar(--spectrum-alias-border-size-thin)\n)*-1/2)}:host([justified]) ::slotted(*){flex:1}:host([dir][compact][vertical]) ::slotted(:nth-child(n)){margin-left:0;margin-right:0}:host([justified]) ::slotted(:not([role])),:host([vertical]) ::slotted(:not([role])){align-items:stretch;display:flex;flex-direction:column}:host([compact]:not([quiet])) ::slotted(:not([role])){--overriden-border-radius:0;--mod-actionbutton-border-radius:var(--overriden-border-radius)}:host([compact][vertical]:not([quiet])) ::slotted(:not([role]):first-child){--overriden-border-radius:var(--spectrum-alias-component-border-radius) var(--spectrum-alias-component-border-radius) 0 0}:host([compact][vertical]:not([quiet])) ::slotted(:not([role]):last-child){--overriden-border-radius:0 0 var(--spectrum-alias-component-border-radius) var(--spectrum-alias-component-border-radius)}:host([dir=ltr][compact]:not([quiet],[vertical])) ::slotted(:not([role]):first-child){--overriden-border-radius:var(--spectrum-alias-component-border-radius) 0 0 var(--spectrum-alias-component-border-radius)}:host([dir=rtl][compact]:not([quiet],[vertical])) ::slotted(:not([role]):first-child){--overriden-border-radius:0 var(--spectrum-alias-component-border-radius) var(--spectrum-alias-component-border-radius) 0}:host([dir=ltr][compact]:not([quiet],[vertical])) ::slotted(:not([role]):last-child){--overriden-border-radius:0 var(--spectrum-alias-component-border-radius) var(--spectrum-alias-component-border-radius) 0}:host([dir=rtl][compact]:not([quiet],[vertical])) ::slotted(:not([role]):last-child){--overriden-border-radius:var(--spectrum-alias-component-border-radius) 0 0 var(--spectrum-alias-component-border-radius)}:host([compact]:not([quiet])) ::slotted(*){--mod-actionbutton-focus-ring-border-radius:0}:host([compact][vertical]:not([quiet])) ::slotted(:first-child){--mod-actionbutton-focus-ring-border-radius:var(\n--spectrum-alias-component-border-radius\n) var(--spectrum-alias-component-border-radius) 0 0}:host([compact][vertical]:not([quiet])) ::slotted(:last-child){--mod-actionbutton-focus-ring-border-radius:0 0 var(--spectrum-alias-component-border-radius) var(--spectrum-alias-component-border-radius)}:host([dir=ltr][compact]:not([quiet],[vertical])) ::slotted(:first-child){--mod-actionbutton-focus-ring-border-radius:var(\n--spectrum-alias-component-border-radius\n) 0 0 var(--spectrum-alias-component-border-radius)}:host([dir=rtl][compact]:not([quiet],[vertical])) ::slotted(:first-child){--mod-actionbutton-focus-ring-border-radius:0 var(--spectrum-alias-component-border-radius) var(--spectrum-alias-component-border-radius) 0}:host([dir=ltr][compact]:not([quiet],[vertical])) ::slotted(:last-child){--mod-actionbutton-focus-ring-border-radius:0 var(--spectrum-alias-component-border-radius) var(--spectrum-alias-component-border-radius) 0}:host([dir=rtl][compact]:not([quiet],[vertical])) ::slotted(:last-child){--mod-actionbutton-focus-ring-border-radius:var(\n--spectrum-alias-component-border-radius\n) 0 0 var(--spectrum-alias-component-border-radius)}\n`;\nexport default styles;"],
|
|
5
|
-
"mappings": "AAWA
|
|
5
|
+
"mappings": "AAWA,oDACA,KAAM,GAAS;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAkJf,cAAe",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/src/index.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
export
|
|
1
|
+
export*from"./ActionGroup.js";
|
|
2
2
|
//# sourceMappingURL=index.js.map
|
package/src/index.js.map
CHANGED
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["index.ts"],
|
|
4
4
|
"sourcesContent": ["/*\nCopyright 2020 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\n\nexport * from './ActionGroup.js';\n"],
|
|
5
|
-
"mappings": "AAYA
|
|
5
|
+
"mappings": "AAYA",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -1,5 +1,4 @@
|
|
|
1
|
-
import
|
|
2
|
-
const styles = css`
|
|
1
|
+
import{css as t}from"@spectrum-web-components/base";const r=t`
|
|
3
2
|
:host{--spectrum-actiongroup-button-gap-reset:0}:host{display:flex;flex-wrap:wrap}::slotted(*){flex-shrink:0}:host(:not([vertical]):not([compact])){margin-top:calc(var(
|
|
4
3
|
--spectrum-actiongroup-button-gap-y,
|
|
5
4
|
var(--spectrum-alias-actiongroup-button-gap)
|
|
@@ -138,6 +137,5 @@ var(--spectrum-alias-border-size-thin)
|
|
|
138
137
|
--spectrum-actionbutton-m-texticon-border-size,
|
|
139
138
|
var(--spectrum-alias-border-size-thin)
|
|
140
139
|
)*-1/2)}:host([justified]) ::slotted(*){flex:1}
|
|
141
|
-
`;
|
|
142
|
-
export default styles;
|
|
140
|
+
`;export default r;
|
|
143
141
|
//# sourceMappingURL=spectrum-action-group.css.js.map
|
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["spectrum-action-group.css.ts"],
|
|
4
4
|
"sourcesContent": ["/*\nCopyright 2022 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\nimport { css } from '@spectrum-web-components/base';\nconst styles = css`\n:host{--spectrum-actiongroup-button-gap-reset:0}:host{display:flex;flex-wrap:wrap}::slotted(*){flex-shrink:0}:host(:not([vertical]):not([compact])){margin-top:calc(var(\n--spectrum-actiongroup-button-gap-y,\nvar(--spectrum-alias-actiongroup-button-gap)\n)*-1)}:host(:not([vertical]):not([compact])) ::slotted(*){flex-shrink:0;margin-top:var(\n--spectrum-actiongroup-button-gap-y,var(--spectrum-alias-actiongroup-button-gap)\n)}:host([dir=ltr]:not([vertical]):not([compact])) ::slotted(:not(:last-child)){margin-right:var(\n--spectrum-actiongroup-button-gap-x,var(--spectrum-alias-actiongroup-button-gap)\n)}:host([dir=rtl]:not([vertical]):not([compact])) ::slotted(:not(:last-child)){margin-left:var(\n--spectrum-actiongroup-button-gap-x,var(--spectrum-alias-actiongroup-button-gap)\n)}:host([vertical]){display:inline-flex;flex-direction:column}:host([dir=ltr][vertical]) ::slotted(:not(:first-child)){margin-left:var(\n--spectrum-actiongroup-button-gap-reset\n)}:host([dir=rtl][vertical]) ::slotted(:not(:first-child)){margin-right:var(\n--spectrum-actiongroup-button-gap-reset\n)}:host([vertical]) ::slotted(:not(:first-child)){margin-top:var(\n--spectrum-actiongroup-button-gap-y,var(--spectrum-alias-actiongroup-button-gap)\n)}:host([dir=ltr][vertical][vertical]){margin-left:var(\n--spectrum-actiongroup-button-gap-reset\n)}:host([dir=rtl][vertical][vertical]){margin-right:var(\n--spectrum-actiongroup-button-gap-reset\n)}:host([vertical][vertical]){margin-top:var(\n--spectrum-actiongroup-button-gap-y,var(--spectrum-alias-actiongroup-button-gap)\n)}:host([compact]){gap:var(\n--spectrum-actiongroup-compact-button-gap,var(--spectrum-alias-actiongroup-button-gap-compact)\n)}:host([dir=ltr][compact][quiet]) ::slotted(:not(:first-child)){margin-left:var(\n--spectrum-actiongroup-quiet-compact-button-gap,var(--spectrum-alias-actiongroup-button-gap-quiet-compact)\n)}:host([dir=rtl][compact][quiet]) ::slotted(:not(:first-child)){margin-right:var(\n--spectrum-actiongroup-quiet-compact-button-gap,var(--spectrum-alias-actiongroup-button-gap-quiet-compact)\n)}:host([compact][quiet]) ::slotted(:not(:first-child)){margin-top:var(\n--spectrum-actiongroup-button-gap-reset\n)}:host([dir=ltr][compact][quiet][vertical]) ::slotted(:not(:first-child)){margin-left:var(\n--spectrum-actiongroup-button-gap-reset\n)}:host([dir=rtl][compact][quiet][vertical]) ::slotted(:not(:first-child)){margin-right:var(\n--spectrum-actiongroup-button-gap-reset\n)}:host([compact][quiet][vertical]) ::slotted(:not(:first-child)){margin-top:var(\n--spectrum-actiongroup-quiet-compact-button-gap,var(--spectrum-alias-actiongroup-button-gap-quiet-compact)\n)}:host([compact]:not([quiet])){flex-wrap:nowrap}:host([compact]:not([quiet])) ::slotted(*){--spectrum-actionbutton-focus-ring-border-radius-adjusted:var(\n--spectrum-alias-border-radius-xsmall,var(--spectrum-global-dimension-size-10)\n);border-radius:0;position:relative;z-index:0}:host([dir=ltr][compact]:not([quiet])) ::slotted(:first-child){border-top-left-radius:var(\n--spectrum-actionbutton-m-texticon-border-radius,var(--spectrum-alias-component-border-radius)\n)}:host([dir=rtl][compact]:not([quiet])) ::slotted(:first-child){border-top-right-radius:var(\n--spectrum-actionbutton-m-texticon-border-radius,var(--spectrum-alias-component-border-radius)\n)}:host([dir=ltr][compact]:not([quiet])) ::slotted(:first-child){border-bottom-left-radius:var(\n--spectrum-actionbutton-m-texticon-border-radius,var(--spectrum-alias-component-border-radius)\n)}:host([dir=rtl][compact]:not([quiet])) ::slotted(:first-child){border-bottom-right-radius:var(\n--spectrum-actionbutton-m-texticon-border-radius,var(--spectrum-alias-component-border-radius)\n)}:host([dir=ltr][compact]:not([quiet])) ::slotted(:first-child){margin-right:calc(var(\n--spectrum-actionbutton-m-texticon-border-size,\nvar(--spectrum-alias-border-size-thin)\n)*-1/2)}:host([dir=rtl][compact]:not([quiet])) ::slotted(:first-child){margin-left:calc(var(\n--spectrum-actionbutton-m-texticon-border-size,\nvar(--spectrum-alias-border-size-thin)\n)*-1/2)}:host([compact]:not([quiet])) ::slotted(:first-child){--spectrum-actionbutton-focus-ring-border-radius-adjusted:calc(var(\n--spectrum-actionbutton-m-quiet-textonly-border-radius,\nvar(--spectrum-alias-component-border-radius)\n) + var(\n--spectrum-actionbutton-m-textonly-focus-ring-gap,\nvar(--spectrum-alias-component-focusring-gap)\n)) var(\n--spectrum-alias-border-radius-xsmall,var(--spectrum-global-dimension-size-10)\n) var(\n--spectrum-alias-border-radius-xsmall,var(--spectrum-global-dimension-size-10)\n) calc(var(\n--spectrum-actionbutton-m-quiet-textonly-border-radius,\nvar(--spectrum-alias-component-border-radius)\n) + var(\n--spectrum-actionbutton-m-textonly-focus-ring-gap,\nvar(--spectrum-alias-component-focusring-gap)\n))}:host([dir=ltr][compact]:not([quiet])) ::slotted(:last-child){border-top-right-radius:var(\n--spectrum-actionbutton-m-texticon-border-radius,var(--spectrum-alias-component-border-radius)\n)}:host([dir=rtl][compact]:not([quiet])) ::slotted(:last-child){border-top-left-radius:var(\n--spectrum-actionbutton-m-texticon-border-radius,var(--spectrum-alias-component-border-radius)\n)}:host([dir=ltr][compact]:not([quiet])) ::slotted(:last-child){border-bottom-right-radius:var(\n--spectrum-actionbutton-m-texticon-border-radius,var(--spectrum-alias-component-border-radius)\n)}:host([dir=rtl][compact]:not([quiet])) ::slotted(:last-child){border-bottom-left-radius:var(\n--spectrum-actionbutton-m-texticon-border-radius,var(--spectrum-alias-component-border-radius)\n)}:host([dir=ltr][compact]:not([quiet])) ::slotted(:last-child){margin-left:calc(var(\n--spectrum-actionbutton-m-texticon-border-size,\nvar(--spectrum-alias-border-size-thin)\n)*-1/2)}:host([dir=rtl][compact]:not([quiet])) ::slotted(:last-child){margin-right:calc(var(\n--spectrum-actionbutton-m-texticon-border-size,\nvar(--spectrum-alias-border-size-thin)\n)*-1/2)}:host([dir=ltr][compact]:not([quiet])) ::slotted(:last-child){margin-right:0}:host([dir=rtl][compact]:not([quiet])) ::slotted(:last-child){margin-left:0}:host([compact]:not([quiet])) ::slotted(:last-child){--spectrum-actionbutton-focus-ring-border-radius-adjusted:var(\n--spectrum-alias-border-radius-xsmall,var(--spectrum-global-dimension-size-10)\n) calc(var(\n--spectrum-actionbutton-m-quiet-textonly-border-radius,\nvar(--spectrum-alias-component-border-radius)\n) + var(\n--spectrum-actionbutton-m-textonly-focus-ring-gap,\nvar(--spectrum-alias-component-focusring-gap)\n)) calc(var(\n--spectrum-actionbutton-m-quiet-textonly-border-radius,\nvar(--spectrum-alias-component-border-radius)\n) + var(\n--spectrum-actionbutton-m-textonly-focus-ring-gap,\nvar(--spectrum-alias-component-focusring-gap)\n)) var(\n--spectrum-alias-border-radius-xsmall,var(--spectrum-global-dimension-size-10)\n)}:host([compact]:not([quiet])) ::slotted([selected]){z-index:1}:host([compact]:not([quiet])) ::slotted(:hover){z-index:2}:host([compact]:not([quiet])) ::slotted(.focus-visible){z-index:3}:host([compact]:not([quiet])) ::slotted(:focus-visible){z-index:3}:host([dir=ltr][compact]:not([quiet])) ::slotted(:not(:first-child)){margin-left:calc(var(\n--spectrum-actionbutton-m-texticon-border-size,\nvar(--spectrum-alias-border-size-thin)\n)*-1/2)}:host([dir=rtl][compact]:not([quiet])) ::slotted(:not(:first-child)){margin-right:calc(var(\n--spectrum-actionbutton-m-texticon-border-size,\nvar(--spectrum-alias-border-size-thin)\n)*-1/2)}:host([dir=ltr][compact]:not([quiet])) ::slotted(:not(:first-child)){margin-right:calc(var(\n--spectrum-actionbutton-m-texticon-border-size,\nvar(--spectrum-alias-border-size-thin)\n)*-1/2)}:host([dir=rtl][compact]:not([quiet])) ::slotted(:not(:first-child)){margin-left:calc(var(\n--spectrum-actionbutton-m-texticon-border-size,\nvar(--spectrum-alias-border-size-thin)\n)*-1/2)}:host([compact][vertical]:not([quiet])){gap:0}:host([compact][vertical]:not([quiet])) ::slotted(*){border-radius:0}:host([compact][vertical]:not([quiet])) ::slotted(:not(:first-child)){margin-bottom:calc(var(\n--spectrum-actionbutton-m-texticon-border-size,\nvar(--spectrum-alias-border-size-thin)\n)*-1/2);margin-top:calc(var(\n--spectrum-actionbutton-m-texticon-border-size,\nvar(--spectrum-alias-border-size-thin)\n)*-1/2)}:host([dir=ltr][compact][vertical]:not([quiet])) ::slotted(:first-child){border-top-left-radius:var(\n--spectrum-actionbutton-m-texticon-border-radius,var(--spectrum-alias-component-border-radius)\n)}:host([dir=rtl][compact][vertical]:not([quiet])) ::slotted(:first-child){border-top-right-radius:var(\n--spectrum-actionbutton-m-texticon-border-radius,var(--spectrum-alias-component-border-radius)\n)}:host([dir=ltr][compact][vertical]:not([quiet])) ::slotted(:first-child){border-top-right-radius:var(\n--spectrum-actionbutton-m-texticon-border-radius,var(--spectrum-alias-component-border-radius)\n)}:host([dir=rtl][compact][vertical]:not([quiet])) ::slotted(:first-child){border-top-left-radius:var(\n--spectrum-actionbutton-m-texticon-border-radius,var(--spectrum-alias-component-border-radius)\n)}:host([compact][vertical]:not([quiet])) ::slotted(:first-child){border-radius:0;margin-bottom:calc(var(\n--spectrum-actionbutton-m-texticon-border-size,\nvar(--spectrum-alias-border-size-thin)\n)*-1/2)}:host([dir=ltr][compact][vertical]:not([quiet])) ::slotted(:last-child){border-bottom-left-radius:var(\n--spectrum-actionbutton-m-texticon-border-radius,var(--spectrum-alias-component-border-radius)\n)}:host([dir=rtl][compact][vertical]:not([quiet])) ::slotted(:last-child){border-bottom-right-radius:var(\n--spectrum-actionbutton-m-texticon-border-radius,var(--spectrum-alias-component-border-radius)\n)}:host([dir=ltr][compact][vertical]:not([quiet])) ::slotted(:last-child){border-bottom-right-radius:var(\n--spectrum-actionbutton-m-texticon-border-radius,var(--spectrum-alias-component-border-radius)\n)}:host([dir=rtl][compact][vertical]:not([quiet])) ::slotted(:last-child){border-bottom-left-radius:var(\n--spectrum-actionbutton-m-texticon-border-radius,var(--spectrum-alias-component-border-radius)\n)}:host([compact][vertical]:not([quiet])) ::slotted(:last-child){border-radius:0;margin-bottom:0;margin-top:calc(var(\n--spectrum-actionbutton-m-texticon-border-size,\nvar(--spectrum-alias-border-size-thin)\n)*-1/2)}:host([justified]) ::slotted(*){flex:1}\n`;\nexport default styles;"],
|
|
5
|
-
"mappings": "AAWA
|
|
5
|
+
"mappings": "AAWA,oDACA,KAAM,GAAS;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EA4If,cAAe",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|