@spectrum-web-components/action-group 0.37.0 → 0.39.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 +7 -7
- package/src/ActionGroup.dev.js +3 -2
- package/src/ActionGroup.dev.js.map +2 -2
- package/src/ActionGroup.js +2 -2
- package/src/ActionGroup.js.map +2 -2
- package/src/action-group.css.dev.js +2 -2
- package/src/action-group.css.dev.js.map +1 -1
- package/src/action-group.css.js +2 -2
- package/src/action-group.css.js.map +1 -1
- package/src/spectrum-action-group.css.dev.js +2 -2
- package/src/spectrum-action-group.css.dev.js.map +1 -1
- package/src/spectrum-action-group.css.js +2 -2
- package/src/spectrum-action-group.css.js.map +1 -1
- package/src/spectrum-config.js +3 -2
- package/stories/action-group-tooltip.stories.js +2 -1
- package/stories/action-group-tooltip.stories.js.map +2 -2
- package/test/action-group.test.js +25 -5
- package/test/action-group.test.js.map +2 -2
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@spectrum-web-components/action-group",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.39.0",
|
|
4
4
|
"publishConfig": {
|
|
5
5
|
"access": "public"
|
|
6
6
|
},
|
|
@@ -58,13 +58,13 @@
|
|
|
58
58
|
],
|
|
59
59
|
"dependencies": {
|
|
60
60
|
"@lit-labs/observers": "^2.0.0",
|
|
61
|
-
"@spectrum-web-components/action-button": "^0.
|
|
62
|
-
"@spectrum-web-components/base": "^0.
|
|
63
|
-
"@spectrum-web-components/icons-workflow": "^0.
|
|
64
|
-
"@spectrum-web-components/reactive-controllers": "^0.
|
|
61
|
+
"@spectrum-web-components/action-button": "^0.39.0",
|
|
62
|
+
"@spectrum-web-components/base": "^0.39.0",
|
|
63
|
+
"@spectrum-web-components/icons-workflow": "^0.39.0",
|
|
64
|
+
"@spectrum-web-components/reactive-controllers": "^0.39.0"
|
|
65
65
|
},
|
|
66
66
|
"devDependencies": {
|
|
67
|
-
"@spectrum-css/actiongroup": "^
|
|
67
|
+
"@spectrum-css/actiongroup": "^4.0.7"
|
|
68
68
|
},
|
|
69
69
|
"types": "./src/index.d.ts",
|
|
70
70
|
"customElements": "custom-elements.json",
|
|
@@ -72,5 +72,5 @@
|
|
|
72
72
|
"./sp-*.js",
|
|
73
73
|
"./**/*.dev.js"
|
|
74
74
|
],
|
|
75
|
-
"gitHead": "
|
|
75
|
+
"gitHead": "2acc8390ef0ac6cc940958d4da705c9859155c0d"
|
|
76
76
|
}
|
package/src/ActionGroup.dev.js
CHANGED
|
@@ -24,7 +24,8 @@ import { MutationController } from "@lit-labs/observers/mutation-controller.js";
|
|
|
24
24
|
import styles from "./action-group.css.js";
|
|
25
25
|
const EMPTY_SELECTION = [];
|
|
26
26
|
export class ActionGroup extends SizedMixin(SpectrumElement, {
|
|
27
|
-
validSizes: ["xs", "s", "m", "l", "xl"]
|
|
27
|
+
validSizes: ["xs", "s", "m", "l", "xl"],
|
|
28
|
+
noDefaultSize: true
|
|
28
29
|
}) {
|
|
29
30
|
constructor() {
|
|
30
31
|
super();
|
|
@@ -328,7 +329,7 @@ export class ActionGroup extends SizedMixin(SpectrumElement, {
|
|
|
328
329
|
if (this.selects || !this.hasManaged) {
|
|
329
330
|
button.selected = this.selected.includes(button.value);
|
|
330
331
|
}
|
|
331
|
-
if (this.size) {
|
|
332
|
+
if (this.size && (this.size !== "m" || typeof (changes == null ? void 0 : changes.get("size")) !== "undefined")) {
|
|
332
333
|
button.size = this.size;
|
|
333
334
|
}
|
|
334
335
|
});
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["ActionGroup.ts"],
|
|
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 SizedMixin,\n SpectrumElement,\n TemplateResult,\n} from '@spectrum-web-components/base';\nimport {\n property,\n query,\n} 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 SizedMixin(SpectrumElement, {\n validSizes: ['xs', 's', 'm', 'l', 'xl'],\n}) {\n public static override get styles(): CSSResultArray {\n return [styles];\n }\n\n public set buttons(buttons: ActionButton[]) {\n /* c8 ignore next 1 */\n if (buttons === this.buttons) return;\n this._buttons = buttons;\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 skipInitial: true,\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({ reflect: true })\n public static?: 'white' | 'black';\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 @query('slot')\n slotElement!: HTMLSlotElement;\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 /* c8 ignore next 1 */\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(\n this.selects ? 'aria-checked' : /* c8 ignore */ 'aria-pressed',\n 'false'\n );\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 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 // single behaves as a radio group\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 // switching from single to multiple, remove role=\"radiogroup\"\n if (this.getAttribute('role') === 'radiogroup') {\n this.removeAttribute('role');\n }\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('role', 'button');\n if (option.selected) {\n option.setAttribute('aria-pressed', 'true');\n selections.push(option);\n } else {\n option.removeAttribute('aria-pressed');\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 break;\n }\n }\n\n // When no other role is defined, use role=\"toolbar\", which is appropriate with roving tabindex.\n if (!this.hasAttribute('role')) {\n this.setAttribute('role', 'toolbar');\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') ||\n changes.has('emphasized') ||\n changes.has('size') ||\n changes.has('static')\n ) {\n this.manageChildren(changes);\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(changes?: PropertyValues): void {\n this.buttons.forEach((button) => {\n if (this.quiet || changes?.get('quiet')) {\n button.quiet = this.quiet;\n }\n if (this.emphasized || changes?.get('emphasized')) {\n button.emphasized = this.emphasized;\n }\n if (this.static || changes?.get('static')) {\n button.static = this.static;\n }\n if (this.selects || !this.hasManaged) {\n button.selected = this.selected.includes(button.value);\n }\n if (this.size) {\n button.size = this.size;\n }\n });\n }\n\n private hasManaged = false;\n\n private manageButtons = (): void => {\n const assignedElements = this.slotElement.assignedElements({\n flatten: true,\n });\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 if (this.selects || !this.hasManaged) {\n // <select> 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 }\n this.manageChildren();\n this.manageSelects();\n this.hasManaged = true;\n };\n}\n"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;AAYA;AAAA,EAEI;AAAA,EAEA;AAAA,EACA;AAAA,OAEG;AACP;AAAA,EACI;AAAA,EACA;AAAA,OACG;AAEP,SAAS,gCAAgC;AACzC,SAAS,0BAA0B;AAEnC,OAAO,YAAY;AAEnB,MAAM,kBAA4B,CAAC;AAQ5B,aAAM,oBAAoB,WAAW,iBAAiB;AAAA,EACzD,YAAY,CAAC,MAAM,KAAK,KAAK,KAAK,IAAI;
|
|
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 SizedMixin,\n SpectrumElement,\n TemplateResult,\n} from '@spectrum-web-components/base';\nimport {\n property,\n query,\n} 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 SizedMixin(SpectrumElement, {\n validSizes: ['xs', 's', 'm', 'l', 'xl'],\n noDefaultSize: true,\n}) {\n public static override get styles(): CSSResultArray {\n return [styles];\n }\n\n public set buttons(buttons: ActionButton[]) {\n /* c8 ignore next 1 */\n if (buttons === this.buttons) return;\n this._buttons = buttons;\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 skipInitial: true,\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({ reflect: true })\n public static?: 'white' | 'black';\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 @query('slot')\n slotElement!: HTMLSlotElement;\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 /* c8 ignore next 1 */\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(\n this.selects ? 'aria-checked' : /* c8 ignore */ 'aria-pressed',\n 'false'\n );\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 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 // single behaves as a radio group\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 // switching from single to multiple, remove role=\"radiogroup\"\n if (this.getAttribute('role') === 'radiogroup') {\n this.removeAttribute('role');\n }\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('role', 'button');\n if (option.selected) {\n option.setAttribute('aria-pressed', 'true');\n selections.push(option);\n } else {\n option.removeAttribute('aria-pressed');\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 break;\n }\n }\n\n // When no other role is defined, use role=\"toolbar\", which is appropriate with roving tabindex.\n if (!this.hasAttribute('role')) {\n this.setAttribute('role', 'toolbar');\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') ||\n changes.has('emphasized') ||\n changes.has('size') ||\n changes.has('static')\n ) {\n this.manageChildren(changes);\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(changes?: PropertyValues): void {\n this.buttons.forEach((button) => {\n if (this.quiet || changes?.get('quiet')) {\n button.quiet = this.quiet;\n }\n if (this.emphasized || changes?.get('emphasized')) {\n button.emphasized = this.emphasized;\n }\n if (this.static || changes?.get('static')) {\n button.static = this.static;\n }\n if (this.selects || !this.hasManaged) {\n button.selected = this.selected.includes(button.value);\n }\n if (\n this.size &&\n (this.size !== 'm' ||\n typeof changes?.get('size') !== 'undefined')\n ) {\n button.size = this.size;\n }\n });\n }\n\n private hasManaged = false;\n\n private manageButtons = (): void => {\n const assignedElements = this.slotElement.assignedElements({\n flatten: true,\n });\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 if (this.selects || !this.hasManaged) {\n // <select> 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 }\n this.manageChildren();\n this.manageSelects();\n this.hasManaged = true;\n };\n}\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/src/ActionGroup.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
"use strict";var h=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var r=(o,
|
|
1
|
+
"use strict";var h=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var r=(o,c,e,t)=>{for(var s=t>1?void 0:t?p(c,e):c,i=o.length-1,l;i>=0;i--)(l=o[i])&&(s=(t?l(c,e,s):l(s))||s);return t&&s&&h(c,e,s),s};import{html as b,SizedMixin as f,SpectrumElement as m}from"@spectrum-web-components/base";import{property as u,query as v}from"@spectrum-web-components/base/src/decorators.js";import{RovingTabindexController as y}from"@spectrum-web-components/reactive-controllers/src/RovingTabindex.js";import{MutationController as S}from"@lit-labs/observers/mutation-controller.js";import g from"./action-group.css.js";const d=[];export class ActionGroup extends f(m,{validSizes:["xs","s","m","l","xl"],noDefaultSize:!0}){constructor(){super();this._buttons=[];this._buttonSelector="sp-action-button";this.rovingTabindexController=new y(this,{focusInIndex:e=>{let t=-1;const s=e.findIndex((i,l)=>(!e[t]&&!i.disabled&&(t=l),i.selected&&!i.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=d;this.hasManaged=!1;this.manageButtons=()=>{const t=this.slotElement.assignedElements({flatten:!0}).reduce((s,i)=>{if(i.matches(this._buttonSelector))s.push(i);else{const l=Array.from(i.querySelectorAll(`:scope > ${this._buttonSelector}`));s.push(...l)}return s},[]);if(this.buttons=t,this.selects||!this.hasManaged){const s=[];this.buttons.forEach(i=>{i.selected&&s.push(i.value)}),this.setSelected(this.selected.concat(s))}this.manageChildren(),this.manageSelects(),this.hasManaged=!0};new S(this,{config:{childList:!0,subtree:!0},callback:()=>{this.manageButtons()},skipInitial:!0})}static get styles(){return[g]}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(this.selects?"aria-checked":"aria-pressed","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);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(i=>{i.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=[],i=t.map(async a=>{await a.updateComplete,a.setAttribute("role","radio"),a.setAttribute("aria-checked",a.selected?"true":"false"),a.selected&&s.push(a)});if(e)break;await Promise.all(i);const l=s.map(a=>a.value);this.setSelected(l||d);break}case"multiple":{this.getAttribute("role")==="radiogroup"&&this.removeAttribute("role");const s=[],i=[],l=t.map(async n=>{await n.updateComplete,n.setAttribute("role","checkbox"),n.setAttribute("aria-checked",n.selected?"true":"false"),n.selected&&(s.push(n.value),i.push(n))});if(e)break;await Promise.all(l);const a=s.length?s:d;this.setSelected(a);break}default:if(this.selected.length){const s=[],i=t.map(async l=>{await l.updateComplete,l.setAttribute("role","button"),l.selected?(l.setAttribute("aria-pressed","true"),s.push(l)):l.removeAttribute("aria-pressed")});if(e)break;await Promise.all(i),this.setSelected(s.map(l=>l.value))}else{this.buttons.forEach(s=>{s.setAttribute("role","button")});break}}this.hasAttribute("role")||this.setAttribute("role","toolbar")}render(){return b`
|
|
2
2
|
<slot role="presentation" @slotchange=${this.manageButtons}></slot>
|
|
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")||e.has("emphasized")||e.has("size")||e.has("static"))&&this.manageChildren(e),e.has("label")&&(this.label||typeof e.get("label")!="undefined")&&(this.label.length?this.setAttribute("aria-label",this.label):this.removeAttribute("aria-label"))}manageChildren(e){this.buttons.forEach(t=>{(this.quiet||e!=null&&e.get("quiet"))&&(t.quiet=this.quiet),(this.emphasized||e!=null&&e.get("emphasized"))&&(t.emphasized=this.emphasized),(this.static||e!=null&&e.get("static"))&&(t.static=this.static),(this.selects||!this.hasManaged)&&(t.selected=this.selected.includes(t.value)),this.size&&(t.size=this.size)})}}r([
|
|
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")||e.has("emphasized")||e.has("size")||e.has("static"))&&this.manageChildren(e),e.has("label")&&(this.label||typeof e.get("label")!="undefined")&&(this.label.length?this.setAttribute("aria-label",this.label):this.removeAttribute("aria-label"))}manageChildren(e){this.buttons.forEach(t=>{(this.quiet||e!=null&&e.get("quiet"))&&(t.quiet=this.quiet),(this.emphasized||e!=null&&e.get("emphasized"))&&(t.emphasized=this.emphasized),(this.static||e!=null&&e.get("static"))&&(t.static=this.static),(this.selects||!this.hasManaged)&&(t.selected=this.selected.includes(t.value)),this.size&&(this.size!=="m"||typeof(e==null?void 0:e.get("size"))!="undefined")&&(t.size=this.size)})}}r([u({type:Boolean,reflect:!0})],ActionGroup.prototype,"compact",2),r([u({type:Boolean,reflect:!0})],ActionGroup.prototype,"emphasized",2),r([u({type:Boolean,reflect:!0})],ActionGroup.prototype,"justified",2),r([u({type:String})],ActionGroup.prototype,"label",2),r([u({type:Boolean,reflect:!0})],ActionGroup.prototype,"quiet",2),r([u({type:String})],ActionGroup.prototype,"selects",2),r([u({reflect:!0})],ActionGroup.prototype,"static",2),r([u({type:Boolean,reflect:!0})],ActionGroup.prototype,"vertical",2),r([u({type:Array})],ActionGroup.prototype,"selected",1),r([v("slot")],ActionGroup.prototype,"slotElement",2);
|
|
4
4
|
//# sourceMappingURL=ActionGroup.js.map
|
package/src/ActionGroup.js.map
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["ActionGroup.ts"],
|
|
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 SizedMixin,\n SpectrumElement,\n TemplateResult,\n} from '@spectrum-web-components/base';\nimport {\n property,\n query,\n} 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 SizedMixin(SpectrumElement, {\n validSizes: ['xs', 's', 'm', 'l', 'xl'],\n}) {\n public static override get styles(): CSSResultArray {\n return [styles];\n }\n\n public set buttons(buttons: ActionButton[]) {\n /* c8 ignore next 1 */\n if (buttons === this.buttons) return;\n this._buttons = buttons;\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 skipInitial: true,\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({ reflect: true })\n public static?: 'white' | 'black';\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 @query('slot')\n slotElement!: HTMLSlotElement;\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 /* c8 ignore next 1 */\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(\n this.selects ? 'aria-checked' : /* c8 ignore */ 'aria-pressed',\n 'false'\n );\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 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 // single behaves as a radio group\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 // switching from single to multiple, remove role=\"radiogroup\"\n if (this.getAttribute('role') === 'radiogroup') {\n this.removeAttribute('role');\n }\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('role', 'button');\n if (option.selected) {\n option.setAttribute('aria-pressed', 'true');\n selections.push(option);\n } else {\n option.removeAttribute('aria-pressed');\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 break;\n }\n }\n\n // When no other role is defined, use role=\"toolbar\", which is appropriate with roving tabindex.\n if (!this.hasAttribute('role')) {\n this.setAttribute('role', 'toolbar');\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') ||\n changes.has('emphasized') ||\n changes.has('size') ||\n changes.has('static')\n ) {\n this.manageChildren(changes);\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(changes?: PropertyValues): void {\n this.buttons.forEach((button) => {\n if (this.quiet || changes?.get('quiet')) {\n button.quiet = this.quiet;\n }\n if (this.emphasized || changes?.get('emphasized')) {\n button.emphasized = this.emphasized;\n }\n if (this.static || changes?.get('static')) {\n button.static = this.static;\n }\n if (this.selects || !this.hasManaged) {\n button.selected = this.selected.includes(button.value);\n }\n if (this.size) {\n button.size = this.size;\n }\n });\n }\n\n private hasManaged = false;\n\n private manageButtons = (): void => {\n const assignedElements = this.slotElement.assignedElements({\n flatten: true,\n });\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 if (this.selects || !this.hasManaged) {\n // <select> 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 }\n this.manageChildren();\n this.manageSelects();\n this.hasManaged = true;\n };\n}\n"],
|
|
5
|
-
"mappings": "qNAYA,OAEI,QAAAA,EAEA,cAAAC,EACA,mBAAAC,MAEG,gCACP,OACI,YAAAC,EACA,SAAAC,MACG,kDAEP,OAAS,4BAAAC,MAAgC,sEACzC,OAAS,sBAAAC,MAA0B,6CAEnC,OAAOC,MAAY,wBAEnB,MAAMC,EAA4B,CAAC,EAQ5B,aAAM,oBAAoBP,EAAWC,EAAiB,CACzD,WAAY,CAAC,KAAM,IAAK,IAAK,IAAK,IAAI,
|
|
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 SizedMixin,\n SpectrumElement,\n TemplateResult,\n} from '@spectrum-web-components/base';\nimport {\n property,\n query,\n} 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 SizedMixin(SpectrumElement, {\n validSizes: ['xs', 's', 'm', 'l', 'xl'],\n noDefaultSize: true,\n}) {\n public static override get styles(): CSSResultArray {\n return [styles];\n }\n\n public set buttons(buttons: ActionButton[]) {\n /* c8 ignore next 1 */\n if (buttons === this.buttons) return;\n this._buttons = buttons;\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 skipInitial: true,\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({ reflect: true })\n public static?: 'white' | 'black';\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 @query('slot')\n slotElement!: HTMLSlotElement;\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 /* c8 ignore next 1 */\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(\n this.selects ? 'aria-checked' : /* c8 ignore */ 'aria-pressed',\n 'false'\n );\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 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 // single behaves as a radio group\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 // switching from single to multiple, remove role=\"radiogroup\"\n if (this.getAttribute('role') === 'radiogroup') {\n this.removeAttribute('role');\n }\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('role', 'button');\n if (option.selected) {\n option.setAttribute('aria-pressed', 'true');\n selections.push(option);\n } else {\n option.removeAttribute('aria-pressed');\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 break;\n }\n }\n\n // When no other role is defined, use role=\"toolbar\", which is appropriate with roving tabindex.\n if (!this.hasAttribute('role')) {\n this.setAttribute('role', 'toolbar');\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') ||\n changes.has('emphasized') ||\n changes.has('size') ||\n changes.has('static')\n ) {\n this.manageChildren(changes);\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(changes?: PropertyValues): void {\n this.buttons.forEach((button) => {\n if (this.quiet || changes?.get('quiet')) {\n button.quiet = this.quiet;\n }\n if (this.emphasized || changes?.get('emphasized')) {\n button.emphasized = this.emphasized;\n }\n if (this.static || changes?.get('static')) {\n button.static = this.static;\n }\n if (this.selects || !this.hasManaged) {\n button.selected = this.selected.includes(button.value);\n }\n if (\n this.size &&\n (this.size !== 'm' ||\n typeof changes?.get('size') !== 'undefined')\n ) {\n button.size = this.size;\n }\n });\n }\n\n private hasManaged = false;\n\n private manageButtons = (): void => {\n const assignedElements = this.slotElement.assignedElements({\n flatten: true,\n });\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 if (this.selects || !this.hasManaged) {\n // <select> 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 }\n this.manageChildren();\n this.manageSelects();\n this.hasManaged = true;\n };\n}\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": ["html", "SizedMixin", "SpectrumElement", "property", "query", "RovingTabindexController", "MutationController", "styles", "EMPTY_SELECTION", "elements", "firstEnabledIndex", "firstSelectedIndex", "el", "index", "buttons", "acc", "buttonDescendents", "currentlySelectedButtons", "button", "selected", "old", "announce", "options", "event", "target", "applied", "selections", "updates", "option", "selection", "changes", "__decorateClass"]
|
|
7
7
|
}
|
|
@@ -3,13 +3,13 @@ import { css } from "@spectrum-web-components/base";
|
|
|
3
3
|
const styles = css`
|
|
4
4
|
:host{--spectrum-actiongroup-button-spacing-reset:0;--spectrum-actiongroup-border-radius-reset:0;--spectrum-actiongroup-border-radius:var(--spectrum-corner-radius-100)}:host([size=s]){--spectrum-actiongroup-horizontal-spacing-regular:var(
|
|
5
5
|
--spectrum-spacing-75
|
|
6
|
-
);--spectrum-actiongroup-vertical-spacing-regular:var(--spectrum-spacing-75)}:host
|
|
6
|
+
);--spectrum-actiongroup-vertical-spacing-regular:var(--spectrum-spacing-75)}:host,:host([size=l]),:host([size=xl]){--spectrum-actiongroup-horizontal-spacing-regular:var(
|
|
7
7
|
--spectrum-spacing-100
|
|
8
8
|
);--spectrum-actiongroup-vertical-spacing-regular:var(
|
|
9
9
|
--spectrum-spacing-100
|
|
10
10
|
)}:host{display:flex;flex-wrap:wrap;gap:var(
|
|
11
11
|
--mod-actiongroup-horizontal-spacing-regular,var(--spectrum-actiongroup-horizontal-spacing-regular)
|
|
12
|
-
)}::slotted(*){flex-shrink:0}:host(:not([vertical]):not([compact])) ::slotted(*){flex-shrink:0}:host([vertical]){display:inline-flex;flex-direction:column;gap:var(
|
|
12
|
+
)}::slotted(*){flex-shrink:0}::slotted(.focus-visible){z-index:3}::slotted(.focus-visible){z-index:3}::slotted(:focus-visible){z-index:3}:host(:not([vertical]):not([compact])) ::slotted(*){flex-shrink:0}:host([vertical]){display:inline-flex;flex-direction:column;gap:var(
|
|
13
13
|
--mod-actiongroup-vertical-spacing-regular,var(--spectrum-actiongroup-vertical-spacing-regular)
|
|
14
14
|
)}:host([compact]){gap:var(
|
|
15
15
|
--mod-actiongroup-gap-size-compact,var(--spectrum-actiongroup-gap-size-compact)
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["action-group.css.ts"],
|
|
4
|
-
"sourcesContent": ["/*\nCopyright 2023 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-spacing-reset:0;--spectrum-actiongroup-border-radius-reset:0;--spectrum-actiongroup-border-radius:var(--spectrum-corner-radius-100)}:host([size=s]){--spectrum-actiongroup-horizontal-spacing-regular:var(\n--spectrum-spacing-75\n);--spectrum-actiongroup-vertical-spacing-regular:var(--spectrum-spacing-75)}:host([size=l]),:host([size=m]),:host([size=xl]){--spectrum-actiongroup-horizontal-spacing-regular:var(\n--spectrum-spacing-100\n);--spectrum-actiongroup-vertical-spacing-regular:var(\n--spectrum-spacing-100\n)}:host{display:flex;flex-wrap:wrap;gap:var(\n--mod-actiongroup-horizontal-spacing-regular,var(--spectrum-actiongroup-horizontal-spacing-regular)\n)}::slotted(*){flex-shrink:0}:host(:not([vertical]):not([compact])) ::slotted(*){flex-shrink:0}:host([vertical]){display:inline-flex;flex-direction:column;gap:var(\n--mod-actiongroup-vertical-spacing-regular,var(--spectrum-actiongroup-vertical-spacing-regular)\n)}:host([compact]){gap:var(\n--mod-actiongroup-gap-size-compact,var(--spectrum-actiongroup-gap-size-compact)\n)}:host([compact]:not([quiet])){flex-wrap:nowrap}:host([compact]:not([quiet])) ::slotted(*){border-radius:var(\n--mod-actiongroup-border-radius-reset,var(--spectrum-actiongroup-border-radius-reset)\n);position:relative;z-index:0}:host([compact]:not([quiet])) ::slotted(:first-child){--mod-actionbutton-focus-indicator-border-radius:var(\n--mod-actiongroup-border-radius,var(--spectrum-actiongroup-border-radius)\n) 0px 0px var(\n--mod-actiongroup-border-radius,var(--spectrum-actiongroup-border-radius)\n);border-end-start-radius:var(\n--mod-actiongroup-border-radius,var(--spectrum-actiongroup-border-radius)\n);border-start-start-radius:var(\n--mod-actiongroup-border-radius,var(--spectrum-actiongroup-border-radius)\n);margin-inline-start:var(\n--mod-actiongroup-button-spacing-reset,var(--spectrum-actiongroup-button-spacing-reset)\n)}:host([compact]:not([quiet])) ::slotted(:not(:first-child)){--mod-actionbutton-focus-indicator-border-radius:0px;margin-inline-end:var(\n--mod-actiongroup-horizontal-spacing-compact,var(--spectrum-actiongroup-horizontal-spacing-compact)\n);margin-inline-start:var(\n--mod-actiongroup-horizontal-spacing-compact,var(--spectrum-actiongroup-horizontal-spacing-compact)\n)}:host([compact]:not([quiet])) ::slotted(:last-child){--mod-actionbutton-focus-indicator-border-radius:0px var(\n--mod-actiongroup-border-radius,var(--spectrum-actiongroup-border-radius)\n) var(\n--mod-actiongroup-border-radius,var(--spectrum-actiongroup-border-radius)\n) 0px;border-end-end-radius:var(\n--mod-actiongroup-border-radius,var(--spectrum-actiongroup-border-radius)\n);border-start-end-radius:var(\n--mod-actiongroup-border-radius,var(--spectrum-actiongroup-border-radius)\n);margin-inline-end:var(\n--mod-actiongroup-border-radius-reset,var(--spectrum-actiongroup-border-radius-reset)\n);margin-inline-start:var(\n--mod-actiongroup-horizontal-spacing-compact,var(--spectrum-actiongroup-horizontal-spacing-compact)\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([compact]:not([quiet])) ::slotted(:focus-visible){z-index:3}:host([compact]:not([quiet])[vertical]){gap:var(\n--mod-actiongroup-gap-size-compact,var(--spectrum-actiongroup-gap-size-compact)\n)}:host([compact]:not([quiet])[vertical]) ::slotted(*){border-radius:var(\n--mod-actiongroup-border-radius-reset,var(--spectrum-actiongroup-border-radius-reset)\n)}:host([compact]:not([quiet])[vertical]) ::slotted(:first-child){--mod-actionbutton-focus-indicator-border-radius:var(\n--mod-actiongroup-border-radius,var(--spectrum-actiongroup-border-radius)\n) var(\n--mod-actiongroup-border-radius,var(--spectrum-actiongroup-border-radius)\n) 0px 0px;border-start-end-radius:var(\n--mod-actiongroup-border-radius,var(--spectrum-actiongroup-border-radius)\n);border-start-start-radius:var(\n--mod-actiongroup-border-radius,var(--spectrum-actiongroup-border-radius)\n);margin-block-end:var(\n--mod-actiongroup-vertical-spacing-compact,var(--spectrum-actiongroup-vertical-spacing-compact)\n);margin-block-start:var(\n--mod-actiongroup-vertical-spacing-compact,var(--spectrum-actiongroup-vertical-spacing-compact)\n);margin-inline-end:var(\n--mod-actiongroup-button-spacing-reset,var(--spectrum-actiongroup-button-spacing-reset)\n)}:host([compact]:not([quiet])[vertical]) ::slotted(:not(:first-child)){margin-block-end:var(\n--mod-actiongroup-vertical-spacing-compact,var(--spectrum-actiongroup-vertical-spacing-compact)\n);margin-block-start:var(\n--mod-actiongroup-button-spacing-reset,var(--spectrum-actiongroup-button-spacing-reset)\n);margin-inline-end:var(\n--mod-actiongroup-button-spacing-reset,var(--spectrum-actiongroup-button-spacing-reset)\n);margin-inline-start:var(\n--mod-actiongroup-button-spacing-reset,var(--spectrum-actiongroup-button-spacing-reset)\n)}:host([compact]:not([quiet])[vertical]) ::slotted(:last-child){--mod-actionbutton-focus-indicator-border-radius:0px 0px var(\n--mod-actiongroup-border-radius,var(--spectrum-actiongroup-border-radius)\n) var(\n--mod-actiongroup-border-radius,var(--spectrum-actiongroup-border-radius)\n);border-end-end-radius:var(\n--mod-actiongroup-border-radius,var(--spectrum-actiongroup-border-radius)\n);border-end-start-radius:var(\n--mod-actiongroup-border-radius,var(--spectrum-actiongroup-border-radius)\n);margin-block-end:var(\n--mod-actiongroup-button-spacing-reset,var(--spectrum-actiongroup-button-spacing-reset)\n);margin-block-start:var(\n--mod-actiongroup-vertical-spacing-compact,var(--spectrum-actiongroup-vertical-spacing-compact)\n)}:host([justified]) ::slotted(*){flex:1}:host{--spectrum-actiongroup-gap-size-compact:var(\n--system-spectrum-actiongroup-gap-size-compact\n);--spectrum-actiongroup-horizontal-spacing-compact:var(\n--system-spectrum-actiongroup-horizontal-spacing-compact\n);--spectrum-actiongroup-vertical-spacing-compact:var(\n--system-spectrum-actiongroup-vertical-spacing-compact\n)}:host([size=xs]){--spectrum-actiongroup-horizontal-spacing-regular:var(\n--spectrum-spacing-75\n);--spectrum-actiongroup-vertical-spacing-regular:var(--spectrum-spacing-75)}: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;"],
|
|
4
|
+
"sourcesContent": ["/*\nCopyright 2023 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-spacing-reset:0;--spectrum-actiongroup-border-radius-reset:0;--spectrum-actiongroup-border-radius:var(--spectrum-corner-radius-100)}:host([size=s]){--spectrum-actiongroup-horizontal-spacing-regular:var(\n--spectrum-spacing-75\n);--spectrum-actiongroup-vertical-spacing-regular:var(--spectrum-spacing-75)}:host,:host([size=l]),:host([size=xl]){--spectrum-actiongroup-horizontal-spacing-regular:var(\n--spectrum-spacing-100\n);--spectrum-actiongroup-vertical-spacing-regular:var(\n--spectrum-spacing-100\n)}:host{display:flex;flex-wrap:wrap;gap:var(\n--mod-actiongroup-horizontal-spacing-regular,var(--spectrum-actiongroup-horizontal-spacing-regular)\n)}::slotted(*){flex-shrink:0}::slotted(.focus-visible){z-index:3}::slotted(.focus-visible){z-index:3}::slotted(:focus-visible){z-index:3}:host(:not([vertical]):not([compact])) ::slotted(*){flex-shrink:0}:host([vertical]){display:inline-flex;flex-direction:column;gap:var(\n--mod-actiongroup-vertical-spacing-regular,var(--spectrum-actiongroup-vertical-spacing-regular)\n)}:host([compact]){gap:var(\n--mod-actiongroup-gap-size-compact,var(--spectrum-actiongroup-gap-size-compact)\n)}:host([compact]:not([quiet])){flex-wrap:nowrap}:host([compact]:not([quiet])) ::slotted(*){border-radius:var(\n--mod-actiongroup-border-radius-reset,var(--spectrum-actiongroup-border-radius-reset)\n);position:relative;z-index:0}:host([compact]:not([quiet])) ::slotted(:first-child){--mod-actionbutton-focus-indicator-border-radius:var(\n--mod-actiongroup-border-radius,var(--spectrum-actiongroup-border-radius)\n) 0px 0px var(\n--mod-actiongroup-border-radius,var(--spectrum-actiongroup-border-radius)\n);border-end-start-radius:var(\n--mod-actiongroup-border-radius,var(--spectrum-actiongroup-border-radius)\n);border-start-start-radius:var(\n--mod-actiongroup-border-radius,var(--spectrum-actiongroup-border-radius)\n);margin-inline-start:var(\n--mod-actiongroup-button-spacing-reset,var(--spectrum-actiongroup-button-spacing-reset)\n)}:host([compact]:not([quiet])) ::slotted(:not(:first-child)){--mod-actionbutton-focus-indicator-border-radius:0px;margin-inline-end:var(\n--mod-actiongroup-horizontal-spacing-compact,var(--spectrum-actiongroup-horizontal-spacing-compact)\n);margin-inline-start:var(\n--mod-actiongroup-horizontal-spacing-compact,var(--spectrum-actiongroup-horizontal-spacing-compact)\n)}:host([compact]:not([quiet])) ::slotted(:last-child){--mod-actionbutton-focus-indicator-border-radius:0px var(\n--mod-actiongroup-border-radius,var(--spectrum-actiongroup-border-radius)\n) var(\n--mod-actiongroup-border-radius,var(--spectrum-actiongroup-border-radius)\n) 0px;border-end-end-radius:var(\n--mod-actiongroup-border-radius,var(--spectrum-actiongroup-border-radius)\n);border-start-end-radius:var(\n--mod-actiongroup-border-radius,var(--spectrum-actiongroup-border-radius)\n);margin-inline-end:var(\n--mod-actiongroup-border-radius-reset,var(--spectrum-actiongroup-border-radius-reset)\n);margin-inline-start:var(\n--mod-actiongroup-horizontal-spacing-compact,var(--spectrum-actiongroup-horizontal-spacing-compact)\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([compact]:not([quiet])) ::slotted(:focus-visible){z-index:3}:host([compact]:not([quiet])[vertical]){gap:var(\n--mod-actiongroup-gap-size-compact,var(--spectrum-actiongroup-gap-size-compact)\n)}:host([compact]:not([quiet])[vertical]) ::slotted(*){border-radius:var(\n--mod-actiongroup-border-radius-reset,var(--spectrum-actiongroup-border-radius-reset)\n)}:host([compact]:not([quiet])[vertical]) ::slotted(:first-child){--mod-actionbutton-focus-indicator-border-radius:var(\n--mod-actiongroup-border-radius,var(--spectrum-actiongroup-border-radius)\n) var(\n--mod-actiongroup-border-radius,var(--spectrum-actiongroup-border-radius)\n) 0px 0px;border-start-end-radius:var(\n--mod-actiongroup-border-radius,var(--spectrum-actiongroup-border-radius)\n);border-start-start-radius:var(\n--mod-actiongroup-border-radius,var(--spectrum-actiongroup-border-radius)\n);margin-block-end:var(\n--mod-actiongroup-vertical-spacing-compact,var(--spectrum-actiongroup-vertical-spacing-compact)\n);margin-block-start:var(\n--mod-actiongroup-vertical-spacing-compact,var(--spectrum-actiongroup-vertical-spacing-compact)\n);margin-inline-end:var(\n--mod-actiongroup-button-spacing-reset,var(--spectrum-actiongroup-button-spacing-reset)\n)}:host([compact]:not([quiet])[vertical]) ::slotted(:not(:first-child)){margin-block-end:var(\n--mod-actiongroup-vertical-spacing-compact,var(--spectrum-actiongroup-vertical-spacing-compact)\n);margin-block-start:var(\n--mod-actiongroup-button-spacing-reset,var(--spectrum-actiongroup-button-spacing-reset)\n);margin-inline-end:var(\n--mod-actiongroup-button-spacing-reset,var(--spectrum-actiongroup-button-spacing-reset)\n);margin-inline-start:var(\n--mod-actiongroup-button-spacing-reset,var(--spectrum-actiongroup-button-spacing-reset)\n)}:host([compact]:not([quiet])[vertical]) ::slotted(:last-child){--mod-actionbutton-focus-indicator-border-radius:0px 0px var(\n--mod-actiongroup-border-radius,var(--spectrum-actiongroup-border-radius)\n) var(\n--mod-actiongroup-border-radius,var(--spectrum-actiongroup-border-radius)\n);border-end-end-radius:var(\n--mod-actiongroup-border-radius,var(--spectrum-actiongroup-border-radius)\n);border-end-start-radius:var(\n--mod-actiongroup-border-radius,var(--spectrum-actiongroup-border-radius)\n);margin-block-end:var(\n--mod-actiongroup-button-spacing-reset,var(--spectrum-actiongroup-button-spacing-reset)\n);margin-block-start:var(\n--mod-actiongroup-vertical-spacing-compact,var(--spectrum-actiongroup-vertical-spacing-compact)\n)}:host([justified]) ::slotted(*){flex:1}:host{--spectrum-actiongroup-gap-size-compact:var(\n--system-spectrum-actiongroup-gap-size-compact\n);--spectrum-actiongroup-horizontal-spacing-compact:var(\n--system-spectrum-actiongroup-horizontal-spacing-compact\n);--spectrum-actiongroup-vertical-spacing-compact:var(\n--system-spectrum-actiongroup-vertical-spacing-compact\n)}:host([size=xs]){--spectrum-actiongroup-horizontal-spacing-regular:var(\n--spectrum-spacing-75\n);--spectrum-actiongroup-vertical-spacing-regular:var(--spectrum-spacing-75)}: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
5
|
"mappings": ";AAWA,SAAS,WAAW;AACpB,MAAM,SAAS;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;AA+Ff,eAAe;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/src/action-group.css.js
CHANGED
|
@@ -1,13 +1,13 @@
|
|
|
1
1
|
"use strict";import{css as r}from"@spectrum-web-components/base";const o=r`
|
|
2
2
|
:host{--spectrum-actiongroup-button-spacing-reset:0;--spectrum-actiongroup-border-radius-reset:0;--spectrum-actiongroup-border-radius:var(--spectrum-corner-radius-100)}:host([size=s]){--spectrum-actiongroup-horizontal-spacing-regular:var(
|
|
3
3
|
--spectrum-spacing-75
|
|
4
|
-
);--spectrum-actiongroup-vertical-spacing-regular:var(--spectrum-spacing-75)}:host
|
|
4
|
+
);--spectrum-actiongroup-vertical-spacing-regular:var(--spectrum-spacing-75)}:host,:host([size=l]),:host([size=xl]){--spectrum-actiongroup-horizontal-spacing-regular:var(
|
|
5
5
|
--spectrum-spacing-100
|
|
6
6
|
);--spectrum-actiongroup-vertical-spacing-regular:var(
|
|
7
7
|
--spectrum-spacing-100
|
|
8
8
|
)}:host{display:flex;flex-wrap:wrap;gap:var(
|
|
9
9
|
--mod-actiongroup-horizontal-spacing-regular,var(--spectrum-actiongroup-horizontal-spacing-regular)
|
|
10
|
-
)}::slotted(*){flex-shrink:0}:host(:not([vertical]):not([compact])) ::slotted(*){flex-shrink:0}:host([vertical]){display:inline-flex;flex-direction:column;gap:var(
|
|
10
|
+
)}::slotted(*){flex-shrink:0}::slotted(.focus-visible){z-index:3}::slotted(.focus-visible){z-index:3}::slotted(:focus-visible){z-index:3}:host(:not([vertical]):not([compact])) ::slotted(*){flex-shrink:0}:host([vertical]){display:inline-flex;flex-direction:column;gap:var(
|
|
11
11
|
--mod-actiongroup-vertical-spacing-regular,var(--spectrum-actiongroup-vertical-spacing-regular)
|
|
12
12
|
)}:host([compact]){gap:var(
|
|
13
13
|
--mod-actiongroup-gap-size-compact,var(--spectrum-actiongroup-gap-size-compact)
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["action-group.css.ts"],
|
|
4
|
-
"sourcesContent": ["/*\nCopyright 2023 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-spacing-reset:0;--spectrum-actiongroup-border-radius-reset:0;--spectrum-actiongroup-border-radius:var(--spectrum-corner-radius-100)}:host([size=s]){--spectrum-actiongroup-horizontal-spacing-regular:var(\n--spectrum-spacing-75\n);--spectrum-actiongroup-vertical-spacing-regular:var(--spectrum-spacing-75)}:host([size=l]),:host([size=m]),:host([size=xl]){--spectrum-actiongroup-horizontal-spacing-regular:var(\n--spectrum-spacing-100\n);--spectrum-actiongroup-vertical-spacing-regular:var(\n--spectrum-spacing-100\n)}:host{display:flex;flex-wrap:wrap;gap:var(\n--mod-actiongroup-horizontal-spacing-regular,var(--spectrum-actiongroup-horizontal-spacing-regular)\n)}::slotted(*){flex-shrink:0}:host(:not([vertical]):not([compact])) ::slotted(*){flex-shrink:0}:host([vertical]){display:inline-flex;flex-direction:column;gap:var(\n--mod-actiongroup-vertical-spacing-regular,var(--spectrum-actiongroup-vertical-spacing-regular)\n)}:host([compact]){gap:var(\n--mod-actiongroup-gap-size-compact,var(--spectrum-actiongroup-gap-size-compact)\n)}:host([compact]:not([quiet])){flex-wrap:nowrap}:host([compact]:not([quiet])) ::slotted(*){border-radius:var(\n--mod-actiongroup-border-radius-reset,var(--spectrum-actiongroup-border-radius-reset)\n);position:relative;z-index:0}:host([compact]:not([quiet])) ::slotted(:first-child){--mod-actionbutton-focus-indicator-border-radius:var(\n--mod-actiongroup-border-radius,var(--spectrum-actiongroup-border-radius)\n) 0px 0px var(\n--mod-actiongroup-border-radius,var(--spectrum-actiongroup-border-radius)\n);border-end-start-radius:var(\n--mod-actiongroup-border-radius,var(--spectrum-actiongroup-border-radius)\n);border-start-start-radius:var(\n--mod-actiongroup-border-radius,var(--spectrum-actiongroup-border-radius)\n);margin-inline-start:var(\n--mod-actiongroup-button-spacing-reset,var(--spectrum-actiongroup-button-spacing-reset)\n)}:host([compact]:not([quiet])) ::slotted(:not(:first-child)){--mod-actionbutton-focus-indicator-border-radius:0px;margin-inline-end:var(\n--mod-actiongroup-horizontal-spacing-compact,var(--spectrum-actiongroup-horizontal-spacing-compact)\n);margin-inline-start:var(\n--mod-actiongroup-horizontal-spacing-compact,var(--spectrum-actiongroup-horizontal-spacing-compact)\n)}:host([compact]:not([quiet])) ::slotted(:last-child){--mod-actionbutton-focus-indicator-border-radius:0px var(\n--mod-actiongroup-border-radius,var(--spectrum-actiongroup-border-radius)\n) var(\n--mod-actiongroup-border-radius,var(--spectrum-actiongroup-border-radius)\n) 0px;border-end-end-radius:var(\n--mod-actiongroup-border-radius,var(--spectrum-actiongroup-border-radius)\n);border-start-end-radius:var(\n--mod-actiongroup-border-radius,var(--spectrum-actiongroup-border-radius)\n);margin-inline-end:var(\n--mod-actiongroup-border-radius-reset,var(--spectrum-actiongroup-border-radius-reset)\n);margin-inline-start:var(\n--mod-actiongroup-horizontal-spacing-compact,var(--spectrum-actiongroup-horizontal-spacing-compact)\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([compact]:not([quiet])) ::slotted(:focus-visible){z-index:3}:host([compact]:not([quiet])[vertical]){gap:var(\n--mod-actiongroup-gap-size-compact,var(--spectrum-actiongroup-gap-size-compact)\n)}:host([compact]:not([quiet])[vertical]) ::slotted(*){border-radius:var(\n--mod-actiongroup-border-radius-reset,var(--spectrum-actiongroup-border-radius-reset)\n)}:host([compact]:not([quiet])[vertical]) ::slotted(:first-child){--mod-actionbutton-focus-indicator-border-radius:var(\n--mod-actiongroup-border-radius,var(--spectrum-actiongroup-border-radius)\n) var(\n--mod-actiongroup-border-radius,var(--spectrum-actiongroup-border-radius)\n) 0px 0px;border-start-end-radius:var(\n--mod-actiongroup-border-radius,var(--spectrum-actiongroup-border-radius)\n);border-start-start-radius:var(\n--mod-actiongroup-border-radius,var(--spectrum-actiongroup-border-radius)\n);margin-block-end:var(\n--mod-actiongroup-vertical-spacing-compact,var(--spectrum-actiongroup-vertical-spacing-compact)\n);margin-block-start:var(\n--mod-actiongroup-vertical-spacing-compact,var(--spectrum-actiongroup-vertical-spacing-compact)\n);margin-inline-end:var(\n--mod-actiongroup-button-spacing-reset,var(--spectrum-actiongroup-button-spacing-reset)\n)}:host([compact]:not([quiet])[vertical]) ::slotted(:not(:first-child)){margin-block-end:var(\n--mod-actiongroup-vertical-spacing-compact,var(--spectrum-actiongroup-vertical-spacing-compact)\n);margin-block-start:var(\n--mod-actiongroup-button-spacing-reset,var(--spectrum-actiongroup-button-spacing-reset)\n);margin-inline-end:var(\n--mod-actiongroup-button-spacing-reset,var(--spectrum-actiongroup-button-spacing-reset)\n);margin-inline-start:var(\n--mod-actiongroup-button-spacing-reset,var(--spectrum-actiongroup-button-spacing-reset)\n)}:host([compact]:not([quiet])[vertical]) ::slotted(:last-child){--mod-actionbutton-focus-indicator-border-radius:0px 0px var(\n--mod-actiongroup-border-radius,var(--spectrum-actiongroup-border-radius)\n) var(\n--mod-actiongroup-border-radius,var(--spectrum-actiongroup-border-radius)\n);border-end-end-radius:var(\n--mod-actiongroup-border-radius,var(--spectrum-actiongroup-border-radius)\n);border-end-start-radius:var(\n--mod-actiongroup-border-radius,var(--spectrum-actiongroup-border-radius)\n);margin-block-end:var(\n--mod-actiongroup-button-spacing-reset,var(--spectrum-actiongroup-button-spacing-reset)\n);margin-block-start:var(\n--mod-actiongroup-vertical-spacing-compact,var(--spectrum-actiongroup-vertical-spacing-compact)\n)}:host([justified]) ::slotted(*){flex:1}:host{--spectrum-actiongroup-gap-size-compact:var(\n--system-spectrum-actiongroup-gap-size-compact\n);--spectrum-actiongroup-horizontal-spacing-compact:var(\n--system-spectrum-actiongroup-horizontal-spacing-compact\n);--spectrum-actiongroup-vertical-spacing-compact:var(\n--system-spectrum-actiongroup-vertical-spacing-compact\n)}:host([size=xs]){--spectrum-actiongroup-horizontal-spacing-regular:var(\n--spectrum-spacing-75\n);--spectrum-actiongroup-vertical-spacing-regular:var(--spectrum-spacing-75)}: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;"],
|
|
4
|
+
"sourcesContent": ["/*\nCopyright 2023 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-spacing-reset:0;--spectrum-actiongroup-border-radius-reset:0;--spectrum-actiongroup-border-radius:var(--spectrum-corner-radius-100)}:host([size=s]){--spectrum-actiongroup-horizontal-spacing-regular:var(\n--spectrum-spacing-75\n);--spectrum-actiongroup-vertical-spacing-regular:var(--spectrum-spacing-75)}:host,:host([size=l]),:host([size=xl]){--spectrum-actiongroup-horizontal-spacing-regular:var(\n--spectrum-spacing-100\n);--spectrum-actiongroup-vertical-spacing-regular:var(\n--spectrum-spacing-100\n)}:host{display:flex;flex-wrap:wrap;gap:var(\n--mod-actiongroup-horizontal-spacing-regular,var(--spectrum-actiongroup-horizontal-spacing-regular)\n)}::slotted(*){flex-shrink:0}::slotted(.focus-visible){z-index:3}::slotted(.focus-visible){z-index:3}::slotted(:focus-visible){z-index:3}:host(:not([vertical]):not([compact])) ::slotted(*){flex-shrink:0}:host([vertical]){display:inline-flex;flex-direction:column;gap:var(\n--mod-actiongroup-vertical-spacing-regular,var(--spectrum-actiongroup-vertical-spacing-regular)\n)}:host([compact]){gap:var(\n--mod-actiongroup-gap-size-compact,var(--spectrum-actiongroup-gap-size-compact)\n)}:host([compact]:not([quiet])){flex-wrap:nowrap}:host([compact]:not([quiet])) ::slotted(*){border-radius:var(\n--mod-actiongroup-border-radius-reset,var(--spectrum-actiongroup-border-radius-reset)\n);position:relative;z-index:0}:host([compact]:not([quiet])) ::slotted(:first-child){--mod-actionbutton-focus-indicator-border-radius:var(\n--mod-actiongroup-border-radius,var(--spectrum-actiongroup-border-radius)\n) 0px 0px var(\n--mod-actiongroup-border-radius,var(--spectrum-actiongroup-border-radius)\n);border-end-start-radius:var(\n--mod-actiongroup-border-radius,var(--spectrum-actiongroup-border-radius)\n);border-start-start-radius:var(\n--mod-actiongroup-border-radius,var(--spectrum-actiongroup-border-radius)\n);margin-inline-start:var(\n--mod-actiongroup-button-spacing-reset,var(--spectrum-actiongroup-button-spacing-reset)\n)}:host([compact]:not([quiet])) ::slotted(:not(:first-child)){--mod-actionbutton-focus-indicator-border-radius:0px;margin-inline-end:var(\n--mod-actiongroup-horizontal-spacing-compact,var(--spectrum-actiongroup-horizontal-spacing-compact)\n);margin-inline-start:var(\n--mod-actiongroup-horizontal-spacing-compact,var(--spectrum-actiongroup-horizontal-spacing-compact)\n)}:host([compact]:not([quiet])) ::slotted(:last-child){--mod-actionbutton-focus-indicator-border-radius:0px var(\n--mod-actiongroup-border-radius,var(--spectrum-actiongroup-border-radius)\n) var(\n--mod-actiongroup-border-radius,var(--spectrum-actiongroup-border-radius)\n) 0px;border-end-end-radius:var(\n--mod-actiongroup-border-radius,var(--spectrum-actiongroup-border-radius)\n);border-start-end-radius:var(\n--mod-actiongroup-border-radius,var(--spectrum-actiongroup-border-radius)\n);margin-inline-end:var(\n--mod-actiongroup-border-radius-reset,var(--spectrum-actiongroup-border-radius-reset)\n);margin-inline-start:var(\n--mod-actiongroup-horizontal-spacing-compact,var(--spectrum-actiongroup-horizontal-spacing-compact)\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([compact]:not([quiet])) ::slotted(:focus-visible){z-index:3}:host([compact]:not([quiet])[vertical]){gap:var(\n--mod-actiongroup-gap-size-compact,var(--spectrum-actiongroup-gap-size-compact)\n)}:host([compact]:not([quiet])[vertical]) ::slotted(*){border-radius:var(\n--mod-actiongroup-border-radius-reset,var(--spectrum-actiongroup-border-radius-reset)\n)}:host([compact]:not([quiet])[vertical]) ::slotted(:first-child){--mod-actionbutton-focus-indicator-border-radius:var(\n--mod-actiongroup-border-radius,var(--spectrum-actiongroup-border-radius)\n) var(\n--mod-actiongroup-border-radius,var(--spectrum-actiongroup-border-radius)\n) 0px 0px;border-start-end-radius:var(\n--mod-actiongroup-border-radius,var(--spectrum-actiongroup-border-radius)\n);border-start-start-radius:var(\n--mod-actiongroup-border-radius,var(--spectrum-actiongroup-border-radius)\n);margin-block-end:var(\n--mod-actiongroup-vertical-spacing-compact,var(--spectrum-actiongroup-vertical-spacing-compact)\n);margin-block-start:var(\n--mod-actiongroup-vertical-spacing-compact,var(--spectrum-actiongroup-vertical-spacing-compact)\n);margin-inline-end:var(\n--mod-actiongroup-button-spacing-reset,var(--spectrum-actiongroup-button-spacing-reset)\n)}:host([compact]:not([quiet])[vertical]) ::slotted(:not(:first-child)){margin-block-end:var(\n--mod-actiongroup-vertical-spacing-compact,var(--spectrum-actiongroup-vertical-spacing-compact)\n);margin-block-start:var(\n--mod-actiongroup-button-spacing-reset,var(--spectrum-actiongroup-button-spacing-reset)\n);margin-inline-end:var(\n--mod-actiongroup-button-spacing-reset,var(--spectrum-actiongroup-button-spacing-reset)\n);margin-inline-start:var(\n--mod-actiongroup-button-spacing-reset,var(--spectrum-actiongroup-button-spacing-reset)\n)}:host([compact]:not([quiet])[vertical]) ::slotted(:last-child){--mod-actionbutton-focus-indicator-border-radius:0px 0px var(\n--mod-actiongroup-border-radius,var(--spectrum-actiongroup-border-radius)\n) var(\n--mod-actiongroup-border-radius,var(--spectrum-actiongroup-border-radius)\n);border-end-end-radius:var(\n--mod-actiongroup-border-radius,var(--spectrum-actiongroup-border-radius)\n);border-end-start-radius:var(\n--mod-actiongroup-border-radius,var(--spectrum-actiongroup-border-radius)\n);margin-block-end:var(\n--mod-actiongroup-button-spacing-reset,var(--spectrum-actiongroup-button-spacing-reset)\n);margin-block-start:var(\n--mod-actiongroup-vertical-spacing-compact,var(--spectrum-actiongroup-vertical-spacing-compact)\n)}:host([justified]) ::slotted(*){flex:1}:host{--spectrum-actiongroup-gap-size-compact:var(\n--system-spectrum-actiongroup-gap-size-compact\n);--spectrum-actiongroup-horizontal-spacing-compact:var(\n--system-spectrum-actiongroup-horizontal-spacing-compact\n);--spectrum-actiongroup-vertical-spacing-compact:var(\n--system-spectrum-actiongroup-vertical-spacing-compact\n)}:host([size=xs]){--spectrum-actiongroup-horizontal-spacing-regular:var(\n--spectrum-spacing-75\n);--spectrum-actiongroup-vertical-spacing-regular:var(--spectrum-spacing-75)}: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
5
|
"mappings": "aAWA,OAAS,OAAAA,MAAW,gCACpB,MAAMC,EAASD;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,EA+Ff,eAAeC",
|
|
6
6
|
"names": ["css", "styles"]
|
|
7
7
|
}
|
|
@@ -3,13 +3,13 @@ import { css } from "@spectrum-web-components/base";
|
|
|
3
3
|
const styles = css`
|
|
4
4
|
:host{--spectrum-actiongroup-button-spacing-reset:0;--spectrum-actiongroup-border-radius-reset:0;--spectrum-actiongroup-border-radius:var(--spectrum-corner-radius-100)}:host([size=s]){--spectrum-actiongroup-horizontal-spacing-regular:var(
|
|
5
5
|
--spectrum-spacing-75
|
|
6
|
-
);--spectrum-actiongroup-vertical-spacing-regular:var(--spectrum-spacing-75)}:host
|
|
6
|
+
);--spectrum-actiongroup-vertical-spacing-regular:var(--spectrum-spacing-75)}:host,:host([size=l]),:host([size=xl]){--spectrum-actiongroup-horizontal-spacing-regular:var(
|
|
7
7
|
--spectrum-spacing-100
|
|
8
8
|
);--spectrum-actiongroup-vertical-spacing-regular:var(
|
|
9
9
|
--spectrum-spacing-100
|
|
10
10
|
)}:host{display:flex;flex-wrap:wrap;gap:var(
|
|
11
11
|
--mod-actiongroup-horizontal-spacing-regular,var(--spectrum-actiongroup-horizontal-spacing-regular)
|
|
12
|
-
)}::slotted(*){flex-shrink:0}:host(:not([vertical]):not([compact])) ::slotted(*){flex-shrink:0}:host([vertical]){display:inline-flex;flex-direction:column;gap:var(
|
|
12
|
+
)}::slotted(*){flex-shrink:0}::slotted(.focus-visible){z-index:3}::slotted(.focus-visible){z-index:3}::slotted(:focus-visible){z-index:3}:host(:not([vertical]):not([compact])) ::slotted(*){flex-shrink:0}:host([vertical]){display:inline-flex;flex-direction:column;gap:var(
|
|
13
13
|
--mod-actiongroup-vertical-spacing-regular,var(--spectrum-actiongroup-vertical-spacing-regular)
|
|
14
14
|
)}:host([compact]){gap:var(
|
|
15
15
|
--mod-actiongroup-gap-size-compact,var(--spectrum-actiongroup-gap-size-compact)
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["spectrum-action-group.css.ts"],
|
|
4
|
-
"sourcesContent": ["/*\nCopyright 2023 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-spacing-reset:0;--spectrum-actiongroup-border-radius-reset:0;--spectrum-actiongroup-border-radius:var(--spectrum-corner-radius-100)}:host([size=s]){--spectrum-actiongroup-horizontal-spacing-regular:var(\n--spectrum-spacing-75\n);--spectrum-actiongroup-vertical-spacing-regular:var(--spectrum-spacing-75)}:host
|
|
4
|
+
"sourcesContent": ["/*\nCopyright 2023 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-spacing-reset:0;--spectrum-actiongroup-border-radius-reset:0;--spectrum-actiongroup-border-radius:var(--spectrum-corner-radius-100)}:host([size=s]){--spectrum-actiongroup-horizontal-spacing-regular:var(\n--spectrum-spacing-75\n);--spectrum-actiongroup-vertical-spacing-regular:var(--spectrum-spacing-75)}:host,:host([size=l]),:host([size=xl]){--spectrum-actiongroup-horizontal-spacing-regular:var(\n--spectrum-spacing-100\n);--spectrum-actiongroup-vertical-spacing-regular:var(\n--spectrum-spacing-100\n)}:host{display:flex;flex-wrap:wrap;gap:var(\n--mod-actiongroup-horizontal-spacing-regular,var(--spectrum-actiongroup-horizontal-spacing-regular)\n)}::slotted(*){flex-shrink:0}::slotted(.focus-visible){z-index:3}::slotted(.focus-visible){z-index:3}::slotted(:focus-visible){z-index:3}:host(:not([vertical]):not([compact])) ::slotted(*){flex-shrink:0}:host([vertical]){display:inline-flex;flex-direction:column;gap:var(\n--mod-actiongroup-vertical-spacing-regular,var(--spectrum-actiongroup-vertical-spacing-regular)\n)}:host([compact]){gap:var(\n--mod-actiongroup-gap-size-compact,var(--spectrum-actiongroup-gap-size-compact)\n)}:host([compact]:not([quiet])){flex-wrap:nowrap}:host([compact]:not([quiet])) ::slotted(*){border-radius:var(\n--mod-actiongroup-border-radius-reset,var(--spectrum-actiongroup-border-radius-reset)\n);position:relative;z-index:0}:host([compact]:not([quiet])) ::slotted(:first-child){--mod-actionbutton-focus-indicator-border-radius:var(\n--mod-actiongroup-border-radius,var(--spectrum-actiongroup-border-radius)\n) 0px 0px var(\n--mod-actiongroup-border-radius,var(--spectrum-actiongroup-border-radius)\n);border-end-start-radius:var(\n--mod-actiongroup-border-radius,var(--spectrum-actiongroup-border-radius)\n);border-start-start-radius:var(\n--mod-actiongroup-border-radius,var(--spectrum-actiongroup-border-radius)\n);margin-inline-start:var(\n--mod-actiongroup-button-spacing-reset,var(--spectrum-actiongroup-button-spacing-reset)\n)}:host([compact]:not([quiet])) ::slotted(:not(:first-child)){--mod-actionbutton-focus-indicator-border-radius:0px;margin-inline-end:var(\n--mod-actiongroup-horizontal-spacing-compact,var(--spectrum-actiongroup-horizontal-spacing-compact)\n);margin-inline-start:var(\n--mod-actiongroup-horizontal-spacing-compact,var(--spectrum-actiongroup-horizontal-spacing-compact)\n)}:host([compact]:not([quiet])) ::slotted(:last-child){--mod-actionbutton-focus-indicator-border-radius:0px var(\n--mod-actiongroup-border-radius,var(--spectrum-actiongroup-border-radius)\n) var(\n--mod-actiongroup-border-radius,var(--spectrum-actiongroup-border-radius)\n) 0px;border-end-end-radius:var(\n--mod-actiongroup-border-radius,var(--spectrum-actiongroup-border-radius)\n);border-start-end-radius:var(\n--mod-actiongroup-border-radius,var(--spectrum-actiongroup-border-radius)\n);margin-inline-end:var(\n--mod-actiongroup-border-radius-reset,var(--spectrum-actiongroup-border-radius-reset)\n);margin-inline-start:var(\n--mod-actiongroup-horizontal-spacing-compact,var(--spectrum-actiongroup-horizontal-spacing-compact)\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([compact]:not([quiet])) ::slotted(:focus-visible){z-index:3}:host([compact]:not([quiet])[vertical]){gap:var(\n--mod-actiongroup-gap-size-compact,var(--spectrum-actiongroup-gap-size-compact)\n)}:host([compact]:not([quiet])[vertical]) ::slotted(*){border-radius:var(\n--mod-actiongroup-border-radius-reset,var(--spectrum-actiongroup-border-radius-reset)\n)}:host([compact]:not([quiet])[vertical]) ::slotted(:first-child){--mod-actionbutton-focus-indicator-border-radius:var(\n--mod-actiongroup-border-radius,var(--spectrum-actiongroup-border-radius)\n) var(\n--mod-actiongroup-border-radius,var(--spectrum-actiongroup-border-radius)\n) 0px 0px;border-start-end-radius:var(\n--mod-actiongroup-border-radius,var(--spectrum-actiongroup-border-radius)\n);border-start-start-radius:var(\n--mod-actiongroup-border-radius,var(--spectrum-actiongroup-border-radius)\n);margin-block-end:var(\n--mod-actiongroup-vertical-spacing-compact,var(--spectrum-actiongroup-vertical-spacing-compact)\n);margin-block-start:var(\n--mod-actiongroup-vertical-spacing-compact,var(--spectrum-actiongroup-vertical-spacing-compact)\n);margin-inline-end:var(\n--mod-actiongroup-button-spacing-reset,var(--spectrum-actiongroup-button-spacing-reset)\n)}:host([compact]:not([quiet])[vertical]) ::slotted(:not(:first-child)){margin-block-end:var(\n--mod-actiongroup-vertical-spacing-compact,var(--spectrum-actiongroup-vertical-spacing-compact)\n);margin-block-start:var(\n--mod-actiongroup-button-spacing-reset,var(--spectrum-actiongroup-button-spacing-reset)\n);margin-inline-end:var(\n--mod-actiongroup-button-spacing-reset,var(--spectrum-actiongroup-button-spacing-reset)\n);margin-inline-start:var(\n--mod-actiongroup-button-spacing-reset,var(--spectrum-actiongroup-button-spacing-reset)\n)}:host([compact]:not([quiet])[vertical]) ::slotted(:last-child){--mod-actionbutton-focus-indicator-border-radius:0px 0px var(\n--mod-actiongroup-border-radius,var(--spectrum-actiongroup-border-radius)\n) var(\n--mod-actiongroup-border-radius,var(--spectrum-actiongroup-border-radius)\n);border-end-end-radius:var(\n--mod-actiongroup-border-radius,var(--spectrum-actiongroup-border-radius)\n);border-end-start-radius:var(\n--mod-actiongroup-border-radius,var(--spectrum-actiongroup-border-radius)\n);margin-block-end:var(\n--mod-actiongroup-button-spacing-reset,var(--spectrum-actiongroup-button-spacing-reset)\n);margin-block-start:var(\n--mod-actiongroup-vertical-spacing-compact,var(--spectrum-actiongroup-vertical-spacing-compact)\n)}:host([justified]) ::slotted(*){flex:1}:host{--spectrum-actiongroup-gap-size-compact:var(\n--system-spectrum-actiongroup-gap-size-compact\n);--spectrum-actiongroup-horizontal-spacing-compact:var(\n--system-spectrum-actiongroup-horizontal-spacing-compact\n);--spectrum-actiongroup-vertical-spacing-compact:var(\n--system-spectrum-actiongroup-vertical-spacing-compact\n)}\n`;\nexport default styles;"],
|
|
5
5
|
"mappings": ";AAWA,SAAS,WAAW;AACpB,MAAM,SAAS;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;AAuFf,eAAe;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -1,13 +1,13 @@
|
|
|
1
1
|
"use strict";import{css as r}from"@spectrum-web-components/base";const o=r`
|
|
2
2
|
:host{--spectrum-actiongroup-button-spacing-reset:0;--spectrum-actiongroup-border-radius-reset:0;--spectrum-actiongroup-border-radius:var(--spectrum-corner-radius-100)}:host([size=s]){--spectrum-actiongroup-horizontal-spacing-regular:var(
|
|
3
3
|
--spectrum-spacing-75
|
|
4
|
-
);--spectrum-actiongroup-vertical-spacing-regular:var(--spectrum-spacing-75)}:host
|
|
4
|
+
);--spectrum-actiongroup-vertical-spacing-regular:var(--spectrum-spacing-75)}:host,:host([size=l]),:host([size=xl]){--spectrum-actiongroup-horizontal-spacing-regular:var(
|
|
5
5
|
--spectrum-spacing-100
|
|
6
6
|
);--spectrum-actiongroup-vertical-spacing-regular:var(
|
|
7
7
|
--spectrum-spacing-100
|
|
8
8
|
)}:host{display:flex;flex-wrap:wrap;gap:var(
|
|
9
9
|
--mod-actiongroup-horizontal-spacing-regular,var(--spectrum-actiongroup-horizontal-spacing-regular)
|
|
10
|
-
)}::slotted(*){flex-shrink:0}:host(:not([vertical]):not([compact])) ::slotted(*){flex-shrink:0}:host([vertical]){display:inline-flex;flex-direction:column;gap:var(
|
|
10
|
+
)}::slotted(*){flex-shrink:0}::slotted(.focus-visible){z-index:3}::slotted(.focus-visible){z-index:3}::slotted(:focus-visible){z-index:3}:host(:not([vertical]):not([compact])) ::slotted(*){flex-shrink:0}:host([vertical]){display:inline-flex;flex-direction:column;gap:var(
|
|
11
11
|
--mod-actiongroup-vertical-spacing-regular,var(--spectrum-actiongroup-vertical-spacing-regular)
|
|
12
12
|
)}:host([compact]){gap:var(
|
|
13
13
|
--mod-actiongroup-gap-size-compact,var(--spectrum-actiongroup-gap-size-compact)
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["spectrum-action-group.css.ts"],
|
|
4
|
-
"sourcesContent": ["/*\nCopyright 2023 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-spacing-reset:0;--spectrum-actiongroup-border-radius-reset:0;--spectrum-actiongroup-border-radius:var(--spectrum-corner-radius-100)}:host([size=s]){--spectrum-actiongroup-horizontal-spacing-regular:var(\n--spectrum-spacing-75\n);--spectrum-actiongroup-vertical-spacing-regular:var(--spectrum-spacing-75)}:host
|
|
4
|
+
"sourcesContent": ["/*\nCopyright 2023 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-spacing-reset:0;--spectrum-actiongroup-border-radius-reset:0;--spectrum-actiongroup-border-radius:var(--spectrum-corner-radius-100)}:host([size=s]){--spectrum-actiongroup-horizontal-spacing-regular:var(\n--spectrum-spacing-75\n);--spectrum-actiongroup-vertical-spacing-regular:var(--spectrum-spacing-75)}:host,:host([size=l]),:host([size=xl]){--spectrum-actiongroup-horizontal-spacing-regular:var(\n--spectrum-spacing-100\n);--spectrum-actiongroup-vertical-spacing-regular:var(\n--spectrum-spacing-100\n)}:host{display:flex;flex-wrap:wrap;gap:var(\n--mod-actiongroup-horizontal-spacing-regular,var(--spectrum-actiongroup-horizontal-spacing-regular)\n)}::slotted(*){flex-shrink:0}::slotted(.focus-visible){z-index:3}::slotted(.focus-visible){z-index:3}::slotted(:focus-visible){z-index:3}:host(:not([vertical]):not([compact])) ::slotted(*){flex-shrink:0}:host([vertical]){display:inline-flex;flex-direction:column;gap:var(\n--mod-actiongroup-vertical-spacing-regular,var(--spectrum-actiongroup-vertical-spacing-regular)\n)}:host([compact]){gap:var(\n--mod-actiongroup-gap-size-compact,var(--spectrum-actiongroup-gap-size-compact)\n)}:host([compact]:not([quiet])){flex-wrap:nowrap}:host([compact]:not([quiet])) ::slotted(*){border-radius:var(\n--mod-actiongroup-border-radius-reset,var(--spectrum-actiongroup-border-radius-reset)\n);position:relative;z-index:0}:host([compact]:not([quiet])) ::slotted(:first-child){--mod-actionbutton-focus-indicator-border-radius:var(\n--mod-actiongroup-border-radius,var(--spectrum-actiongroup-border-radius)\n) 0px 0px var(\n--mod-actiongroup-border-radius,var(--spectrum-actiongroup-border-radius)\n);border-end-start-radius:var(\n--mod-actiongroup-border-radius,var(--spectrum-actiongroup-border-radius)\n);border-start-start-radius:var(\n--mod-actiongroup-border-radius,var(--spectrum-actiongroup-border-radius)\n);margin-inline-start:var(\n--mod-actiongroup-button-spacing-reset,var(--spectrum-actiongroup-button-spacing-reset)\n)}:host([compact]:not([quiet])) ::slotted(:not(:first-child)){--mod-actionbutton-focus-indicator-border-radius:0px;margin-inline-end:var(\n--mod-actiongroup-horizontal-spacing-compact,var(--spectrum-actiongroup-horizontal-spacing-compact)\n);margin-inline-start:var(\n--mod-actiongroup-horizontal-spacing-compact,var(--spectrum-actiongroup-horizontal-spacing-compact)\n)}:host([compact]:not([quiet])) ::slotted(:last-child){--mod-actionbutton-focus-indicator-border-radius:0px var(\n--mod-actiongroup-border-radius,var(--spectrum-actiongroup-border-radius)\n) var(\n--mod-actiongroup-border-radius,var(--spectrum-actiongroup-border-radius)\n) 0px;border-end-end-radius:var(\n--mod-actiongroup-border-radius,var(--spectrum-actiongroup-border-radius)\n);border-start-end-radius:var(\n--mod-actiongroup-border-radius,var(--spectrum-actiongroup-border-radius)\n);margin-inline-end:var(\n--mod-actiongroup-border-radius-reset,var(--spectrum-actiongroup-border-radius-reset)\n);margin-inline-start:var(\n--mod-actiongroup-horizontal-spacing-compact,var(--spectrum-actiongroup-horizontal-spacing-compact)\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([compact]:not([quiet])) ::slotted(:focus-visible){z-index:3}:host([compact]:not([quiet])[vertical]){gap:var(\n--mod-actiongroup-gap-size-compact,var(--spectrum-actiongroup-gap-size-compact)\n)}:host([compact]:not([quiet])[vertical]) ::slotted(*){border-radius:var(\n--mod-actiongroup-border-radius-reset,var(--spectrum-actiongroup-border-radius-reset)\n)}:host([compact]:not([quiet])[vertical]) ::slotted(:first-child){--mod-actionbutton-focus-indicator-border-radius:var(\n--mod-actiongroup-border-radius,var(--spectrum-actiongroup-border-radius)\n) var(\n--mod-actiongroup-border-radius,var(--spectrum-actiongroup-border-radius)\n) 0px 0px;border-start-end-radius:var(\n--mod-actiongroup-border-radius,var(--spectrum-actiongroup-border-radius)\n);border-start-start-radius:var(\n--mod-actiongroup-border-radius,var(--spectrum-actiongroup-border-radius)\n);margin-block-end:var(\n--mod-actiongroup-vertical-spacing-compact,var(--spectrum-actiongroup-vertical-spacing-compact)\n);margin-block-start:var(\n--mod-actiongroup-vertical-spacing-compact,var(--spectrum-actiongroup-vertical-spacing-compact)\n);margin-inline-end:var(\n--mod-actiongroup-button-spacing-reset,var(--spectrum-actiongroup-button-spacing-reset)\n)}:host([compact]:not([quiet])[vertical]) ::slotted(:not(:first-child)){margin-block-end:var(\n--mod-actiongroup-vertical-spacing-compact,var(--spectrum-actiongroup-vertical-spacing-compact)\n);margin-block-start:var(\n--mod-actiongroup-button-spacing-reset,var(--spectrum-actiongroup-button-spacing-reset)\n);margin-inline-end:var(\n--mod-actiongroup-button-spacing-reset,var(--spectrum-actiongroup-button-spacing-reset)\n);margin-inline-start:var(\n--mod-actiongroup-button-spacing-reset,var(--spectrum-actiongroup-button-spacing-reset)\n)}:host([compact]:not([quiet])[vertical]) ::slotted(:last-child){--mod-actionbutton-focus-indicator-border-radius:0px 0px var(\n--mod-actiongroup-border-radius,var(--spectrum-actiongroup-border-radius)\n) var(\n--mod-actiongroup-border-radius,var(--spectrum-actiongroup-border-radius)\n);border-end-end-radius:var(\n--mod-actiongroup-border-radius,var(--spectrum-actiongroup-border-radius)\n);border-end-start-radius:var(\n--mod-actiongroup-border-radius,var(--spectrum-actiongroup-border-radius)\n);margin-block-end:var(\n--mod-actiongroup-button-spacing-reset,var(--spectrum-actiongroup-button-spacing-reset)\n);margin-block-start:var(\n--mod-actiongroup-vertical-spacing-compact,var(--spectrum-actiongroup-vertical-spacing-compact)\n)}:host([justified]) ::slotted(*){flex:1}:host{--spectrum-actiongroup-gap-size-compact:var(\n--system-spectrum-actiongroup-gap-size-compact\n);--spectrum-actiongroup-horizontal-spacing-compact:var(\n--system-spectrum-actiongroup-horizontal-spacing-compact\n);--spectrum-actiongroup-vertical-spacing-compact:var(\n--system-spectrum-actiongroup-vertical-spacing-compact\n)}\n`;\nexport default styles;"],
|
|
5
5
|
"mappings": "aAWA,OAAS,OAAAA,MAAW,gCACpB,MAAMC,EAASD;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,EAuFf,eAAeC",
|
|
6
6
|
"names": ["css", "styles"]
|
|
7
7
|
}
|
package/src/spectrum-config.js
CHANGED
|
@@ -37,10 +37,11 @@ const config = {
|
|
|
37
37
|
converter.classToAttribute('spectrum-ActionGroup--compact'),
|
|
38
38
|
converter.classToAttribute('spectrum-ActionGroup--quiet'),
|
|
39
39
|
converter.classToAttribute('spectrum-ActionGroup--justified'),
|
|
40
|
+
// Default to `size='m'` without needing the attribute
|
|
41
|
+
converter.classToHost('spectrum-ActionGroup--sizeM'),
|
|
40
42
|
...converter.enumerateAttributes(
|
|
41
43
|
[
|
|
42
44
|
['spectrum-ActionGroup--sizeS', 's'],
|
|
43
|
-
['spectrum-ActionGroup--sizeM', 'm'],
|
|
44
45
|
['spectrum-ActionGroup--sizeL', 'l'],
|
|
45
46
|
['spectrum-ActionGroup--sizeXL', 'xl'],
|
|
46
47
|
],
|
|
@@ -89,7 +90,7 @@ const config = {
|
|
|
89
90
|
{
|
|
90
91
|
find: [
|
|
91
92
|
builder.class('spectrum-ActionGroup-item'),
|
|
92
|
-
builder.
|
|
93
|
+
builder.pseudoClass('focus-visible'),
|
|
93
94
|
],
|
|
94
95
|
replace: [
|
|
95
96
|
{
|
|
@@ -12,6 +12,7 @@ var __decorateClass = (decorators, target, key, kind) => {
|
|
|
12
12
|
};
|
|
13
13
|
import {
|
|
14
14
|
html,
|
|
15
|
+
nothing,
|
|
15
16
|
SpectrumElement
|
|
16
17
|
} from "@spectrum-web-components/base";
|
|
17
18
|
import { state } from "@spectrum-web-components/base/src/decorators.js";
|
|
@@ -166,7 +167,7 @@ const template = (args) => {
|
|
|
166
167
|
</sp-action-group>
|
|
167
168
|
${!!args.selects ? html`
|
|
168
169
|
<div>Selected:</div>
|
|
169
|
-
` :
|
|
170
|
+
` : nothing}
|
|
170
171
|
`;
|
|
171
172
|
};
|
|
172
173
|
export const selectsSingle = (args) => template(args);
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["action-group-tooltip.stories.ts"],
|
|
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 html,\n SpectrumElement,\n TemplateResult,\n} from '@spectrum-web-components/base';\nimport { state } from '@spectrum-web-components/base/src/decorators.js';\nimport { spreadProps } from '../../../test/lit-helpers.js';\n\nimport '@spectrum-web-components/action-group/sp-action-group.js';\nimport '@spectrum-web-components/action-button/sp-action-button.js';\nimport '@spectrum-web-components/overlay/overlay-trigger.js';\nimport '@spectrum-web-components/tooltip/sp-tooltip.js';\nimport '@spectrum-web-components/icons-workflow/icons/sp-icon-properties.js';\nimport '@spectrum-web-components/icons-workflow/icons/sp-icon-info.js';\nimport '@spectrum-web-components/icons-workflow/icons/sp-icon-view-all-tags.js';\nimport { ActionGroup } from '@spectrum-web-components/action-group/src/ActionGroup.js';\n\nexport default {\n title: 'Action Group/Tooltips',\n component: 'sp-action-group',\n args: {\n compact: false,\n emphasized: false,\n justified: false,\n quiet: false,\n vertical: false,\n selects: 'none',\n size: 'm',\n },\n argTypes: {\n compact: {\n name: 'compact',\n description:\n 'Visually joins the buttons together to clarify their relationship to one another.',\n type: { name: 'boolean', required: false },\n table: {\n type: { summary: 'boolean' },\n defaultValue: { summary: false },\n },\n control: {\n type: 'boolean',\n },\n },\n emphasized: {\n name: 'emphasized',\n type: { name: 'boolean', required: false },\n table: {\n type: { summary: 'boolean' },\n defaultValue: { summary: false },\n },\n control: {\n type: 'boolean',\n },\n },\n justified: {\n name: 'justified',\n description:\n 'Aligns the action group items to use all the available space on that line.',\n type: { name: 'boolean', required: false },\n table: {\n type: { summary: 'boolean' },\n defaultValue: { summary: false },\n },\n control: {\n type: 'boolean',\n },\n },\n quiet: {\n name: 'quiet',\n type: { name: 'boolean', required: false },\n table: {\n type: { summary: 'boolean' },\n defaultValue: { summary: false },\n },\n control: {\n type: 'boolean',\n },\n },\n vertical: {\n name: 'vertical',\n description: 'Changes the orientation of the action group.',\n type: { name: 'boolean', required: false },\n table: {\n type: { summary: 'boolean' },\n defaultValue: { summary: false },\n },\n control: {\n type: 'boolean',\n },\n },\n selects: {\n name: 'selects',\n description:\n 'Whether the elements selects its children and how many it can select at a time.',\n table: {\n defaultValue: { summary: '' },\n },\n control: {\n type: 'inline-radio',\n options: ['none', 'single', 'multiple'],\n },\n },\n size: {\n name: 'size',\n description: 'The size at which to display the action group.',\n type: { name: 'string', required: true },\n table: {\n type: { summary: '\"s\" | \"m\" | \"l\" | \"xl\"' },\n defaultValue: { summary: 'm' },\n },\n control: {\n type: 'select',\n options: ['s', 'm', 'l', 'xl'],\n },\n },\n },\n};\n\ninterface Properties {\n compact?: boolean;\n emphasized?: boolean;\n justified?: boolean;\n quiet?: boolean;\n vertical?: boolean;\n selects?: 'none' | 'single' | 'multiple';\n size?: 's' | 'm' | 'l' | 'xl';\n [prop: string]: unknown;\n}\n\nconst template = (args: Properties): TemplateResult => {\n requestAnimationFrame(() => {\n const group = document.querySelector('sp-action-group') as ActionGroup;\n const selectedDiv = group.nextElementSibling;\n if (selectedDiv) {\n selectedDiv.textContent = `Selected: ${JSON.stringify(\n group.selected\n )}`;\n }\n });\n return html`\n <sp-action-group\n label=\"Favorite Color\"\n ...=${spreadProps(args)}\n @change=${({ target }: Event & { target: ActionGroup }) => {\n const next = target.nextElementSibling as HTMLDivElement;\n next.textContent = `Selected: ${JSON.stringify(\n target.selected\n )}`;\n }}\n >\n <overlay-trigger>\n <sp-action-button slot=\"trigger\">Red</sp-action-button>\n <sp-tooltip slot=\"hover-content\">\n This is a cool color.\n </sp-tooltip>\n </overlay-trigger>\n <overlay-trigger>\n <sp-action-button slot=\"trigger\">Green</sp-action-button>\n <sp-tooltip slot=\"hover-content\">\n You wouldn't be wrong.\n </sp-tooltip>\n </overlay-trigger>\n <overlay-trigger>\n <sp-action-button slot=\"trigger\" value=\"blue\" selected>\n Blue\n </sp-action-button>\n <sp-tooltip slot=\"hover-content\">The sky in spring.</sp-tooltip>\n </overlay-trigger>\n <overlay-trigger>\n <sp-action-button slot=\"trigger\">Yellow</sp-action-button>\n <sp-tooltip slot=\"hover-content\">The sun at noon.</sp-tooltip>\n </overlay-trigger>\n </sp-action-group>\n ${!!args.selects\n ? html`\n <div>Selected:</div>\n `\n : html``}\n `;\n};\n\nexport const selectsSingle = (args: Properties): TemplateResult =>\n template(args);\nselectsSingle.args = {\n compact: true,\n emphasized: true,\n selects: 'single',\n};\n\nexport const selectsMultiple = (args: Properties): TemplateResult =>\n template(args);\nselectsMultiple.args = {\n compact: true,\n emphasized: true,\n selects: 'multiple',\n};\n\nexport const justified = (args: Properties): TemplateResult => template(args);\njustified.args = {\n compact: true,\n emphasized: true,\n justified: true,\n selects: undefined,\n};\n\nexport const vertical = (args: Properties): TemplateResult => template(args);\nvertical.args = {\n compact: true,\n emphasized: true,\n vertical: true,\n selects: undefined,\n};\n\nclass ActionGroupTooltips extends SpectrumElement {\n @state()\n alignment = 'left';\n\n protected override render(): TemplateResult {\n return html`\n <sp-action-group quiet>\n <sp-action-button\n quiet\n value=\"left\"\n ?selected=${this.alignment === 'left'}\n @click=${() => {\n this.alignment = 'left';\n }}\n >\n <sp-icon slot=\"icon\">\n <svg\n role=\"img\"\n fill=\"currentColor\"\n viewBox=\"0 0 18 18\"\n id=\"STextAlignLeft18N-icon\"\n width=\"18\"\n height=\"18\"\n aria-hidden=\"true\"\n focusable=\"false\"\n >\n <rect\n fill-rule=\"evenodd\"\n x=\"2\"\n y=\"14\"\n width=\"12\"\n height=\"2\"\n rx=\"0.5\"\n ></rect>\n <rect\n fill-rule=\"evenodd\"\n x=\"2\"\n y=\"2\"\n width=\"15\"\n height=\"2\"\n rx=\"0.5\"\n ></rect>\n <rect\n fill-rule=\"evenodd\"\n x=\"2\"\n y=\"6\"\n width=\"12\"\n height=\"2\"\n rx=\"0.5\"\n ></rect>\n <rect\n fill-rule=\"evenodd\"\n x=\"2\"\n y=\"10\"\n width=\"15\"\n height=\"2\"\n rx=\"0.5\"\n ></rect>\n </svg>\n </sp-icon>\n <sp-tooltip self-managed placement=\"bottom\" offset=\"0\">\n Left align\n </sp-tooltip>\n </sp-action-button>\n <sp-action-button\n quiet\n value=\"center\"\n ?selected=${this.alignment === 'center'}\n @click=${() => {\n this.alignment = 'center';\n }}\n >\n <sp-icon slot=\"icon\">\n <svg\n role=\"img\"\n fill=\"currentColor\"\n viewBox=\"0 0 18 18\"\n id=\"STextAlignCenter18N-icon\"\n width=\"18\"\n height=\"18\"\n aria-hidden=\"true\"\n focusable=\"false\"\n >\n <rect\n fill-rule=\"evenodd\"\n x=\"4\"\n y=\"14\"\n width=\"10\"\n height=\"2\"\n rx=\"0.5\"\n ></rect>\n <rect\n fill-rule=\"evenodd\"\n x=\"1\"\n y=\"10\"\n width=\"16\"\n height=\"2\"\n rx=\"0.5\"\n ></rect>\n <rect\n fill-rule=\"evenodd\"\n x=\"1\"\n y=\"2\"\n width=\"16\"\n height=\"2\"\n rx=\"0.5\"\n ></rect>\n <rect\n fill-rule=\"evenodd\"\n x=\"4\"\n y=\"6\"\n width=\"10\"\n height=\"2\"\n rx=\"0.5\"\n ></rect>\n </svg>\n </sp-icon>\n <sp-tooltip self-managed placement=\"bottom\" offset=\"0\">\n Center align\n </sp-tooltip>\n </sp-action-button>\n <sp-action-button\n quiet\n value=\"right\"\n ?selected=${this.alignment === 'right'}\n @click=${() => {\n this.alignment = 'right';\n }}\n >\n <sp-icon slot=\"icon\">\n <svg\n role=\"img\"\n fill=\"currentColor\"\n viewBox=\"0 0 18 18\"\n id=\"STextAlignRight18N-icon\"\n width=\"18\"\n height=\"18\"\n aria-hidden=\"true\"\n focusable=\"false\"\n >\n <rect\n fill-rule=\"evenodd\"\n x=\"4\"\n y=\"14\"\n width=\"12\"\n height=\"2\"\n rx=\"0.5\"\n ></rect>\n <rect\n fill-rule=\"evenodd\"\n x=\"1\"\n y=\"2\"\n width=\"15\"\n height=\"2\"\n rx=\"0.5\"\n ></rect>\n <rect\n fill-rule=\"evenodd\"\n x=\"4\"\n y=\"6\"\n width=\"12\"\n height=\"2\"\n rx=\"0.5\"\n ></rect>\n <rect\n fill-rule=\"evenodd\"\n x=\"1\"\n y=\"10\"\n width=\"15\"\n height=\"2\"\n rx=\"0.5\"\n ></rect>\n </svg>\n </sp-icon>\n <sp-tooltip self-managed placement=\"bottom\" offset=\"0\">\n Right align\n </sp-tooltip>\n </sp-action-button>\n </sp-action-group>\n `;\n }\n}\n\ncustomElements.define('action-group-tooltips', ActionGroupTooltips);\n\nexport const controlled = (): TemplateResult => html`\n <action-group-tooltips></action-group-tooltips>\n`;\n"],
|
|
5
|
-
"mappings": "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
|
|
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 html,\n nothing,\n SpectrumElement,\n TemplateResult,\n} from '@spectrum-web-components/base';\nimport { state } from '@spectrum-web-components/base/src/decorators.js';\nimport { spreadProps } from '../../../test/lit-helpers.js';\n\nimport '@spectrum-web-components/action-group/sp-action-group.js';\nimport '@spectrum-web-components/action-button/sp-action-button.js';\nimport '@spectrum-web-components/overlay/overlay-trigger.js';\nimport '@spectrum-web-components/tooltip/sp-tooltip.js';\nimport '@spectrum-web-components/icons-workflow/icons/sp-icon-properties.js';\nimport '@spectrum-web-components/icons-workflow/icons/sp-icon-info.js';\nimport '@spectrum-web-components/icons-workflow/icons/sp-icon-view-all-tags.js';\nimport { ActionGroup } from '@spectrum-web-components/action-group/src/ActionGroup.js';\n\nexport default {\n title: 'Action Group/Tooltips',\n component: 'sp-action-group',\n args: {\n compact: false,\n emphasized: false,\n justified: false,\n quiet: false,\n vertical: false,\n selects: 'none',\n size: 'm',\n },\n argTypes: {\n compact: {\n name: 'compact',\n description:\n 'Visually joins the buttons together to clarify their relationship to one another.',\n type: { name: 'boolean', required: false },\n table: {\n type: { summary: 'boolean' },\n defaultValue: { summary: false },\n },\n control: {\n type: 'boolean',\n },\n },\n emphasized: {\n name: 'emphasized',\n type: { name: 'boolean', required: false },\n table: {\n type: { summary: 'boolean' },\n defaultValue: { summary: false },\n },\n control: {\n type: 'boolean',\n },\n },\n justified: {\n name: 'justified',\n description:\n 'Aligns the action group items to use all the available space on that line.',\n type: { name: 'boolean', required: false },\n table: {\n type: { summary: 'boolean' },\n defaultValue: { summary: false },\n },\n control: {\n type: 'boolean',\n },\n },\n quiet: {\n name: 'quiet',\n type: { name: 'boolean', required: false },\n table: {\n type: { summary: 'boolean' },\n defaultValue: { summary: false },\n },\n control: {\n type: 'boolean',\n },\n },\n vertical: {\n name: 'vertical',\n description: 'Changes the orientation of the action group.',\n type: { name: 'boolean', required: false },\n table: {\n type: { summary: 'boolean' },\n defaultValue: { summary: false },\n },\n control: {\n type: 'boolean',\n },\n },\n selects: {\n name: 'selects',\n description:\n 'Whether the elements selects its children and how many it can select at a time.',\n table: {\n defaultValue: { summary: '' },\n },\n control: {\n type: 'inline-radio',\n options: ['none', 'single', 'multiple'],\n },\n },\n size: {\n name: 'size',\n description: 'The size at which to display the action group.',\n type: { name: 'string', required: true },\n table: {\n type: { summary: '\"s\" | \"m\" | \"l\" | \"xl\"' },\n defaultValue: { summary: 'm' },\n },\n control: {\n type: 'select',\n options: ['s', 'm', 'l', 'xl'],\n },\n },\n },\n};\n\ninterface Properties {\n compact?: boolean;\n emphasized?: boolean;\n justified?: boolean;\n quiet?: boolean;\n vertical?: boolean;\n selects?: 'none' | 'single' | 'multiple';\n size?: 's' | 'm' | 'l' | 'xl';\n [prop: string]: unknown;\n}\n\nconst template = (args: Properties): TemplateResult => {\n requestAnimationFrame(() => {\n const group = document.querySelector('sp-action-group') as ActionGroup;\n const selectedDiv = group.nextElementSibling;\n if (selectedDiv) {\n selectedDiv.textContent = `Selected: ${JSON.stringify(\n group.selected\n )}`;\n }\n });\n return html`\n <sp-action-group\n label=\"Favorite Color\"\n ...=${spreadProps(args)}\n @change=${({ target }: Event & { target: ActionGroup }) => {\n const next = target.nextElementSibling as HTMLDivElement;\n next.textContent = `Selected: ${JSON.stringify(\n target.selected\n )}`;\n }}\n >\n <overlay-trigger>\n <sp-action-button slot=\"trigger\">Red</sp-action-button>\n <sp-tooltip slot=\"hover-content\">\n This is a cool color.\n </sp-tooltip>\n </overlay-trigger>\n <overlay-trigger>\n <sp-action-button slot=\"trigger\">Green</sp-action-button>\n <sp-tooltip slot=\"hover-content\">\n You wouldn't be wrong.\n </sp-tooltip>\n </overlay-trigger>\n <overlay-trigger>\n <sp-action-button slot=\"trigger\" value=\"blue\" selected>\n Blue\n </sp-action-button>\n <sp-tooltip slot=\"hover-content\">The sky in spring.</sp-tooltip>\n </overlay-trigger>\n <overlay-trigger>\n <sp-action-button slot=\"trigger\">Yellow</sp-action-button>\n <sp-tooltip slot=\"hover-content\">The sun at noon.</sp-tooltip>\n </overlay-trigger>\n </sp-action-group>\n ${!!args.selects\n ? html`\n <div>Selected:</div>\n `\n : nothing}\n `;\n};\n\nexport const selectsSingle = (args: Properties): TemplateResult =>\n template(args);\nselectsSingle.args = {\n compact: true,\n emphasized: true,\n selects: 'single',\n};\n\nexport const selectsMultiple = (args: Properties): TemplateResult =>\n template(args);\nselectsMultiple.args = {\n compact: true,\n emphasized: true,\n selects: 'multiple',\n};\n\nexport const justified = (args: Properties): TemplateResult => template(args);\njustified.args = {\n compact: true,\n emphasized: true,\n justified: true,\n selects: undefined,\n};\n\nexport const vertical = (args: Properties): TemplateResult => template(args);\nvertical.args = {\n compact: true,\n emphasized: true,\n vertical: true,\n selects: undefined,\n};\n\nclass ActionGroupTooltips extends SpectrumElement {\n @state()\n alignment = 'left';\n\n protected override render(): TemplateResult {\n return html`\n <sp-action-group quiet>\n <sp-action-button\n quiet\n value=\"left\"\n ?selected=${this.alignment === 'left'}\n @click=${() => {\n this.alignment = 'left';\n }}\n >\n <sp-icon slot=\"icon\">\n <svg\n role=\"img\"\n fill=\"currentColor\"\n viewBox=\"0 0 18 18\"\n id=\"STextAlignLeft18N-icon\"\n width=\"18\"\n height=\"18\"\n aria-hidden=\"true\"\n focusable=\"false\"\n >\n <rect\n fill-rule=\"evenodd\"\n x=\"2\"\n y=\"14\"\n width=\"12\"\n height=\"2\"\n rx=\"0.5\"\n ></rect>\n <rect\n fill-rule=\"evenodd\"\n x=\"2\"\n y=\"2\"\n width=\"15\"\n height=\"2\"\n rx=\"0.5\"\n ></rect>\n <rect\n fill-rule=\"evenodd\"\n x=\"2\"\n y=\"6\"\n width=\"12\"\n height=\"2\"\n rx=\"0.5\"\n ></rect>\n <rect\n fill-rule=\"evenodd\"\n x=\"2\"\n y=\"10\"\n width=\"15\"\n height=\"2\"\n rx=\"0.5\"\n ></rect>\n </svg>\n </sp-icon>\n <sp-tooltip self-managed placement=\"bottom\" offset=\"0\">\n Left align\n </sp-tooltip>\n </sp-action-button>\n <sp-action-button\n quiet\n value=\"center\"\n ?selected=${this.alignment === 'center'}\n @click=${() => {\n this.alignment = 'center';\n }}\n >\n <sp-icon slot=\"icon\">\n <svg\n role=\"img\"\n fill=\"currentColor\"\n viewBox=\"0 0 18 18\"\n id=\"STextAlignCenter18N-icon\"\n width=\"18\"\n height=\"18\"\n aria-hidden=\"true\"\n focusable=\"false\"\n >\n <rect\n fill-rule=\"evenodd\"\n x=\"4\"\n y=\"14\"\n width=\"10\"\n height=\"2\"\n rx=\"0.5\"\n ></rect>\n <rect\n fill-rule=\"evenodd\"\n x=\"1\"\n y=\"10\"\n width=\"16\"\n height=\"2\"\n rx=\"0.5\"\n ></rect>\n <rect\n fill-rule=\"evenodd\"\n x=\"1\"\n y=\"2\"\n width=\"16\"\n height=\"2\"\n rx=\"0.5\"\n ></rect>\n <rect\n fill-rule=\"evenodd\"\n x=\"4\"\n y=\"6\"\n width=\"10\"\n height=\"2\"\n rx=\"0.5\"\n ></rect>\n </svg>\n </sp-icon>\n <sp-tooltip self-managed placement=\"bottom\" offset=\"0\">\n Center align\n </sp-tooltip>\n </sp-action-button>\n <sp-action-button\n quiet\n value=\"right\"\n ?selected=${this.alignment === 'right'}\n @click=${() => {\n this.alignment = 'right';\n }}\n >\n <sp-icon slot=\"icon\">\n <svg\n role=\"img\"\n fill=\"currentColor\"\n viewBox=\"0 0 18 18\"\n id=\"STextAlignRight18N-icon\"\n width=\"18\"\n height=\"18\"\n aria-hidden=\"true\"\n focusable=\"false\"\n >\n <rect\n fill-rule=\"evenodd\"\n x=\"4\"\n y=\"14\"\n width=\"12\"\n height=\"2\"\n rx=\"0.5\"\n ></rect>\n <rect\n fill-rule=\"evenodd\"\n x=\"1\"\n y=\"2\"\n width=\"15\"\n height=\"2\"\n rx=\"0.5\"\n ></rect>\n <rect\n fill-rule=\"evenodd\"\n x=\"4\"\n y=\"6\"\n width=\"12\"\n height=\"2\"\n rx=\"0.5\"\n ></rect>\n <rect\n fill-rule=\"evenodd\"\n x=\"1\"\n y=\"10\"\n width=\"15\"\n height=\"2\"\n rx=\"0.5\"\n ></rect>\n </svg>\n </sp-icon>\n <sp-tooltip self-managed placement=\"bottom\" offset=\"0\">\n Right align\n </sp-tooltip>\n </sp-action-button>\n </sp-action-group>\n `;\n }\n}\n\ncustomElements.define('action-group-tooltips', ActionGroupTooltips);\n\nexport const controlled = (): TemplateResult => html`\n <action-group-tooltips></action-group-tooltips>\n`;\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -853,21 +853,41 @@ describe("ActionGroup", () => {
|
|
|
853
853
|
expect(firstElement.selected, "first child selected").to.be.true;
|
|
854
854
|
expect(secondElement.selected, "second child not selected").to.be.false;
|
|
855
855
|
});
|
|
856
|
-
it("
|
|
856
|
+
it("manages a `size` attribute", async () => {
|
|
857
857
|
const el = await fixture(
|
|
858
858
|
html`
|
|
859
|
-
<sp-action-group>
|
|
859
|
+
<sp-action-group size="xl">
|
|
860
860
|
<sp-action-button>Button</sp-action-button>
|
|
861
861
|
</sp-action-group>
|
|
862
862
|
`
|
|
863
863
|
);
|
|
864
|
+
const button = el.querySelector("sp-action-button");
|
|
864
865
|
await elementUpdated(el);
|
|
865
|
-
expect(el.size).to.equal("
|
|
866
|
-
expect(
|
|
866
|
+
expect(el.size).to.equal("xl");
|
|
867
|
+
expect(button.size).to.equal("xl");
|
|
868
|
+
expect(el.getAttribute("size")).to.equal("xl");
|
|
869
|
+
expect(button.getAttribute("size")).to.equal("xl");
|
|
867
870
|
el.removeAttribute("size");
|
|
868
871
|
await elementUpdated(el);
|
|
869
872
|
expect(el.size).to.equal("m");
|
|
870
|
-
expect(el.
|
|
873
|
+
expect(el.hasAttribute("size")).to.be.false;
|
|
874
|
+
expect(button.size).to.equal("m");
|
|
875
|
+
expect(button.getAttribute("size")).to.equal("m");
|
|
876
|
+
});
|
|
877
|
+
it("does not apply a default `size` attribute", async () => {
|
|
878
|
+
const el = await fixture(
|
|
879
|
+
html`
|
|
880
|
+
<sp-action-group>
|
|
881
|
+
<sp-action-button>Button</sp-action-button>
|
|
882
|
+
</sp-action-group>
|
|
883
|
+
`
|
|
884
|
+
);
|
|
885
|
+
const button = el.querySelector("sp-action-button");
|
|
886
|
+
await elementUpdated(el);
|
|
887
|
+
expect(el.size).to.equal("m");
|
|
888
|
+
expect(button.size).to.equal("m");
|
|
889
|
+
expect(el.hasAttribute("size")).to.be.false;
|
|
890
|
+
expect(button.hasAttribute("size")).to.be.false;
|
|
871
891
|
});
|
|
872
892
|
it("will accept selected as a JSON string", async () => {
|
|
873
893
|
const el = await fixture(
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["action-group.test.ts"],
|
|
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 aTimeout,\n elementUpdated,\n expect,\n fixture,\n html,\n waitUntil,\n} from '@open-wc/testing';\n\nimport { ActionButton } from '@spectrum-web-components/action-button';\nimport '@spectrum-web-components/action-button/sp-action-button.js';\nimport {\n LitElement,\n SpectrumElement,\n TemplateResult,\n} from '@spectrum-web-components/base';\nimport '@spectrum-web-components/overlay/overlay-trigger.js';\nimport '@spectrum-web-components/tooltip/sp-tooltip.js';\nimport { ActionGroup } from '@spectrum-web-components/action-group';\nimport {\n arrowDownEvent,\n arrowLeftEvent,\n arrowRightEvent,\n arrowUpEvent,\n endEvent,\n homeEvent,\n testForLitDevWarnings,\n} from '../../../test/testing-helpers';\nimport { sendKeys } from '@web/test-runner-commands';\nimport '@spectrum-web-components/action-group/sp-action-group.js';\nimport { controlled } from '../stories/action-group-tooltip.stories.js';\nimport { spy } from 'sinon';\nimport { sendMouse } from '../../../test/plugins/browser.js';\n\nclass QuietActionGroup extends LitElement {\n protected override render(): TemplateResult {\n return html`\n <sp-action-group quiet>\n <slot name=\"first\"></slot>\n <slot name=\"second\"></slot>\n </sp-action-group>\n `;\n }\n}\ncustomElements.define('quiet-action-group', QuietActionGroup);\n\nclass EmphasizedActionGroup extends LitElement {\n protected override render(): TemplateResult {\n return html`\n <sp-action-group emphasized>\n <slot name=\"first\"></slot>\n <slot name=\"second\"></slot>\n </sp-action-group>\n `;\n }\n}\ncustomElements.define('emphasized-action-group', EmphasizedActionGroup);\n\nasync function singleSelectedActionGroup(\n selected: string[]\n): Promise<ActionGroup> {\n const el = await fixture<ActionGroup>(\n html`\n <sp-action-group\n label=\"Selects User-Chosen Buttons\"\n selects=\"single\"\n .selected=${selected}\n >\n <sp-action-button value=\"first\" class=\"first\">\n First\n </sp-action-button>\n <sp-action-button value=\"second\" class=\"second\">\n Second\n </sp-action-button>\n </sp-action-group>\n `\n );\n return el;\n}\n\nasync function multipleSelectedActionGroup(\n selected: string[]\n): Promise<ActionGroup> {\n const el = await fixture<ActionGroup>(\n html`\n <sp-action-group\n label=\"Selects User-Chosen Buttons\"\n selects=\"multiple\"\n .selected=${selected}\n >\n <sp-action-button value=\"first\" class=\"first\">\n First\n </sp-action-button>\n <sp-action-button value=\"second\" class=\"second\">\n Second\n </sp-action-button>\n </sp-action-group>\n `\n );\n return el;\n}\n\ndescribe('ActionGroup', () => {\n it('loads empty action-group accessibly', async () => {\n const el = await fixture<ActionGroup>(\n html`\n <sp-action-group></sp-action-group>\n `\n );\n\n await elementUpdated(el);\n\n await expect(el).to.be.accessible();\n });\n testForLitDevWarnings(\n async () =>\n await fixture<ActionGroup>(\n html`\n <sp-action-group aria-label=\"Default Group\">\n <sp-action-button>First</sp-action-button>\n <sp-action-button>Second</sp-action-button>\n <sp-action-button>Third</sp-action-button>\n </sp-action-group>\n `\n )\n );\n it('loads default action-group accessibly', async () => {\n const el = await fixture<ActionGroup>(\n html`\n <sp-action-group aria-label=\"Default Group\">\n <sp-action-button>First</sp-action-button>\n <sp-action-button>Second</sp-action-button>\n <sp-action-button>Third</sp-action-button>\n </sp-action-group>\n `\n );\n\n await elementUpdated(el);\n\n await expect(el).to.be.accessible();\n expect(el.getAttribute('aria-label')).to.equal('Default Group');\n expect(el.getAttribute('role')).to.equal('toolbar');\n expect(el.children[0].getAttribute('role')).to.equal('button');\n });\n it('applies `static` attribute to its children', async () => {\n const el = await fixture<ActionGroup>(\n html`\n <sp-action-group static=\"white\">\n <sp-action-button id=\"first\">First</sp-action-button>\n <sp-action-button id=\"second\">Second</sp-action-button>\n </sp-action-group>\n `\n );\n const firstButton = el.querySelector('#first') as ActionButton;\n const secondButton = el.querySelector('#second') as ActionButton;\n\n await elementUpdated(el);\n\n expect(firstButton.static).to.equal('white');\n expect(secondButton.static).to.equal('white');\n\n el.static = undefined;\n\n await elementUpdated(el);\n\n expect(firstButton.static).to.be.undefined;\n expect(secondButton.static).to.be.undefined;\n });\n it('manages \"label\"', async () => {\n const testLabel = 'Testable action group';\n const el = await fixture<ActionGroup>(\n html`\n <sp-action-group label=${testLabel}>\n <sp-action-button id=\"first\">First</sp-action-button>\n <sp-action-button id=\"second\">Second</sp-action-button>\n </sp-action-group>\n `\n );\n\n expect(el.getAttribute('aria-label')).to.equal(testLabel);\n\n el.label = '';\n\n await elementUpdated(el);\n\n expect(el.hasAttribute('aria-label')).to.be.false;\n });\n it('applies `quiet` attribute to its children', async () => {\n const el = await fixture<ActionGroup>(\n html`\n <sp-action-group quiet>\n <sp-action-button id=\"first\">First</sp-action-button>\n <sp-action-button id=\"second\">Second</sp-action-button>\n </sp-action-group>\n `\n );\n const firstButton = el.querySelector('#first') as ActionButton;\n const secondButton = el.querySelector('#second') as ActionButton;\n\n await elementUpdated(el);\n\n expect(firstButton.hasAttribute('quiet')).to.be.true;\n expect(firstButton.quiet).to.be.true;\n expect(secondButton.hasAttribute('quiet')).to.be.true;\n expect(secondButton.quiet).to.be.true;\n });\n it('applies `quiet` attribute to its slotted children', async () => {\n const el = await fixture<ActionGroup>(\n html`\n <quiet-action-group>\n <sp-action-button slot=\"first\" id=\"first\">\n First\n </sp-action-button>\n <sp-action-button slot=\"second\" id=\"second\">\n Second\n </sp-action-button>\n </quiet-action-group>\n `\n );\n const firstButton = el.querySelector('#first') as ActionButton;\n const secondButton = el.querySelector('#second') as ActionButton;\n\n await elementUpdated(el);\n\n expect(firstButton.hasAttribute('quiet')).to.be.true;\n expect(firstButton.quiet).to.be.true;\n expect(secondButton.hasAttribute('quiet')).to.be.true;\n expect(secondButton.quiet).to.be.true;\n });\n it('applies `emphasized` attribute to its slotted children', async () => {\n const el = await fixture<ActionGroup>(\n html`\n <emphasized-action-group>\n <sp-action-button slot=\"first\" id=\"first\">\n First\n </sp-action-button>\n <sp-action-button slot=\"second\" id=\"second\">\n Second\n </sp-action-button>\n </emphasized-action-group>\n `\n );\n const firstButton = el.querySelector('#first') as ActionButton;\n const secondButton = el.querySelector('#second') as ActionButton;\n\n await elementUpdated(el);\n\n expect(firstButton.hasAttribute('emphasized')).to.be.true;\n expect(firstButton.emphasized).to.be.true;\n expect(secondButton.hasAttribute('emphasized')).to.be.true;\n expect(secondButton.emphasized).to.be.true;\n });\n it('applies `quiet` attribute to slotted children with overlays', async () => {\n const el = await fixture<ActionGroup>(\n html`\n <quiet-action-group>\n <overlay-trigger slot=\"first\">\n <sp-action-button slot=\"trigger\" id=\"first\">\n First\n </sp-action-button>\n </overlay-trigger>\n <overlay-trigger slot=\"second\">\n <sp-action-button slot=\"trigger\" id=\"second\">\n Second\n </sp-action-button>\n </overlay-trigger>\n </quiet-action-group>\n `\n );\n const firstButton = el.querySelector('#first') as ActionButton;\n const secondButton = el.querySelector('#second') as ActionButton;\n\n await elementUpdated(el);\n\n expect(firstButton.hasAttribute('quiet')).to.be.true;\n expect(firstButton.quiet).to.be.true;\n expect(secondButton.hasAttribute('quiet')).to.be.true;\n expect(secondButton.quiet).to.be.true;\n });\n it('applies `emphasized` attribute to slotted children with overlays', async () => {\n const el = await fixture<ActionGroup>(\n html`\n <emphasized-action-group>\n <overlay-trigger slot=\"first\">\n <sp-action-button slot=\"trigger\" id=\"first\">\n First\n </sp-action-button>\n </overlay-trigger>\n <overlay-trigger slot=\"second\">\n <sp-action-button slot=\"trigger\" id=\"second\">\n Second\n </sp-action-button>\n </overlay-trigger>\n </emphasized-action-group>\n `\n );\n const firstButton = el.querySelector('#first') as ActionButton;\n const secondButton = el.querySelector('#second') as ActionButton;\n\n await elementUpdated(el);\n\n expect(firstButton.hasAttribute('emphasized')).to.be.true;\n expect(firstButton.emphasized).to.be.true;\n expect(secondButton.hasAttribute('emphasized')).to.be.true;\n expect(secondButton.emphasized).to.be.true;\n });\n it('loads [selects=\"single\"] action-group accessibly', async () => {\n const el = await fixture<ActionGroup>(\n html`\n <sp-action-group label=\"Selects Single Group\" selects=\"single\">\n <sp-action-button>First</sp-action-button>\n <sp-action-button>Second</sp-action-button>\n <sp-action-button>Third</sp-action-button>\n </sp-action-group>\n `\n );\n\n await elementUpdated(el);\n\n await expect(el).to.be.accessible();\n expect(el.getAttribute('aria-label')).to.equal('Selects Single Group');\n expect(el.getAttribute('role')).to.equal('radiogroup');\n expect(el.children[0].getAttribute('role')).to.equal('radio');\n });\n it('loads [selects=\"single\"] action-group w/ selection accessibly', async () => {\n const el = await fixture<ActionGroup>(\n html`\n <sp-action-group label=\"Selects Single Group\" selects=\"single\">\n <sp-action-button>First</sp-action-button>\n <sp-action-button>Second</sp-action-button>\n <sp-action-button selected>Third</sp-action-button>\n </sp-action-group>\n `\n );\n\n await elementUpdated(el);\n\n await expect(el).to.be.accessible();\n });\n it('loads [selects=\"multiple\"] action-group accessibly', async () => {\n const el = await fixture<ActionGroup>(\n html`\n <sp-action-group\n label=\"Selects Multiple Group\"\n selects=\"multiple\"\n >\n <sp-action-button>First</sp-action-button>\n <sp-action-button>Second</sp-action-button>\n <sp-action-button>Third</sp-action-button>\n </sp-action-group>\n `\n );\n\n await elementUpdated(el);\n\n await expect(el).to.be.accessible();\n expect(el.getAttribute('aria-label')).to.equal(\n 'Selects Multiple Group'\n );\n expect(el.getAttribute('role')).to.equal('toolbar');\n expect(el.children[0].getAttribute('role')).to.equal('checkbox');\n });\n it('loads [selects=\"multiple\"] action-group w/ selection accessibly', async () => {\n const el = await fixture<ActionGroup>(\n html`\n <sp-action-group\n label=\"Selects Multiple Group\"\n selects=\"multiple\"\n >\n <sp-action-button>First</sp-action-button>\n <sp-action-button selected>Second</sp-action-button>\n <sp-action-button selected>Third</sp-action-button>\n </sp-action-group>\n `\n );\n\n await elementUpdated(el);\n\n await expect(el).to.be.accessible();\n });\n it('sets tab stop when [selects=\"single\"] and the initial button is [disabled]', async () => {\n const el = await fixture<ActionGroup>(\n html`\n <sp-action-group label=\"Selects Single Group\" selects=\"single\">\n <sp-action-button disabled>First</sp-action-button>\n <sp-action-button class=\"second\">Second</sp-action-button>\n <sp-action-button>Third</sp-action-button>\n </sp-action-group>\n `\n );\n const secondButton = el.querySelector('.second') as ActionButton;\n\n await elementUpdated(el);\n\n expect(secondButton.hasAttribute('tabindex'));\n expect(secondButton.getAttribute('tabindex')).to.equal('0');\n });\n it('surfaces [selects=\"single\"] selection', async () => {\n const el = await fixture<ActionGroup>(\n html`\n <sp-action-group label=\"Selects Single Group\" selects=\"single\">\n <sp-action-button>First</sp-action-button>\n <sp-action-button>Second</sp-action-button>\n <sp-action-button selected>Third</sp-action-button>\n </sp-action-group>\n `\n );\n\n await elementUpdated(el);\n\n expect(el.selected, '\"Third\" selected').to.deep.equal(['Third']);\n });\n it('surfaces [selects=\"multiple\"] selection', async () => {\n const el = await fixture<ActionGroup>(\n html`\n <sp-action-group\n label=\"Selects Multiple Group\"\n selects=\"multiple\"\n >\n <sp-action-button>First</sp-action-button>\n <sp-action-button selected>Second</sp-action-button>\n <sp-action-button selected>Third</sp-action-button>\n </sp-action-group>\n `\n );\n\n await elementUpdated(el);\n\n expect(el.selected, '\"Second\" and \"Third\" selected').to.deep.equal([\n 'Second',\n 'Third',\n ]);\n });\n it('does not select without [selects]', async () => {\n const el = await fixture<ActionGroup>(\n html`\n <sp-action-group label=\"No Selects Group\">\n <sp-action-button>First</sp-action-button>\n <sp-action-button selected>Second</sp-action-button>\n <sp-action-button class=\"third\">Third</sp-action-button>\n </sp-action-group>\n `\n );\n const thirdElement = el.querySelector('.third') as ActionButton;\n\n await elementUpdated(el);\n expect(el.selected.length).to.equal(1);\n\n thirdElement.click();\n\n await elementUpdated(el);\n\n expect(el.selected.length).to.equal(1);\n });\n it('selects via `click` while [selects=\"single\"]', async () => {\n const el = await fixture<ActionGroup>(\n html`\n <sp-action-group label=\"Selects Single Group\" selects=\"single\">\n <sp-action-button value=\"first\">First</sp-action-button>\n <sp-action-button value=\"second\" selected>\n Second\n </sp-action-button>\n <sp-action-button value=\"third\" class=\"third\">\n Third\n </sp-action-button>\n </sp-action-group>\n `\n );\n const thirdElement = el.querySelector('.third') as ActionButton;\n\n await elementUpdated(el);\n expect(el.selected.length).to.equal(1);\n expect(el.selected.includes('second'));\n\n thirdElement.click();\n\n await elementUpdated(el);\n\n expect(thirdElement.selected, 'third child selected').to.be.true;\n\n await waitUntil(\n () => el.selected.length === 1 && el.selected.includes('third'),\n 'Updates value of `selected`'\n );\n });\n it('selects via `click` while [selects=\"multiple\"] selection', async () => {\n const el = await fixture<ActionGroup>(\n html`\n <sp-action-group\n label=\"Selects Multiple Group\"\n selects=\"multiple\"\n >\n <sp-action-button selected class=\"first\">\n First\n </sp-action-button>\n <sp-action-button class=\"second\">Second</sp-action-button>\n <sp-action-button class=\"third\">Third</sp-action-button>\n </sp-action-group>\n `\n );\n const firstElement = el.querySelector('.first') as ActionButton;\n const secondElement = el.querySelector('.second') as ActionButton;\n const thirdElement = el.querySelector('.third') as ActionButton;\n\n await elementUpdated(el);\n expect(el.selected.length).to.equal(1);\n expect(el.selected.includes('First'));\n\n firstElement.click();\n secondElement.click();\n thirdElement.click();\n\n await elementUpdated(el);\n\n expect(secondElement.selected, 'second child selected').to.be.true;\n expect(thirdElement.selected, 'third child selected').to.be.true;\n\n await waitUntil(\n () =>\n el.selected.length === 2 &&\n el.selected.includes('Second') &&\n el.selected.includes('Third'),\n 'Updates value of `selected`'\n );\n });\n it('does not respond to clicks on itself', async () => {\n const el = await fixture<ActionGroup>(\n html`\n <sp-action-group label=\"Selects Single Group\" selects=\"single\">\n <sp-action-button>First</sp-action-button>\n <sp-action-button>Second</sp-action-button>\n <sp-action-button class=\"third\">Third</sp-action-button>\n </sp-action-group>\n `\n );\n await elementUpdated(el);\n expect(el.selected.length).to.equal(0);\n\n el.click();\n\n await elementUpdated(el);\n\n expect(el.selected.length).to.equal(0);\n });\n it('selection can be prevented', async () => {\n const el = await fixture<ActionGroup>(\n html`\n <sp-action-group\n label=\"Selects Single Group\"\n selects=\"single\"\n @change=${(event: Event): void => {\n event.preventDefault();\n }}\n >\n <sp-action-button>First</sp-action-button>\n <sp-action-button>Second</sp-action-button>\n <sp-action-button class=\"third\">Third</sp-action-button>\n </sp-action-group>\n `\n );\n const thirdElement = el.querySelector('.third') as ActionButton;\n\n await elementUpdated(el);\n expect(el.selected.length).to.equal(0);\n\n thirdElement.click();\n\n await elementUpdated(el);\n\n expect(thirdElement.selected, 'third child not selected').to.be.false;\n expect(el.selected.length).to.equal(0);\n });\n\n it('selects user-passed value while [selects=\"single\"]', async () => {\n const el = await singleSelectedActionGroup(['first']);\n await elementUpdated(el);\n expect(el.selected.length).to.equal(1);\n\n const firstButton = el.querySelector('.first') as ActionButton;\n const secondButton = el.querySelector('.second') as ActionButton;\n expect(firstButton.selected, 'first button selected').to.be.true;\n expect(secondButton.selected, 'second button not selected').to.be.false;\n\n secondButton.click();\n await elementUpdated(el);\n\n expect(el.selected.length).to.equal(1);\n expect(firstButton.selected, 'first button not selected').to.be.false;\n expect(secondButton.selected, 'second button selected').to.be.true;\n });\n\n it('selects can be updated while [selects=\"single\"]', async () => {\n const el = await singleSelectedActionGroup(['first']);\n await elementUpdated(el);\n expect(el.selected.length).to.equal(1);\n\n const firstButton = el.querySelector('.first') as ActionButton;\n const secondButton = el.querySelector('.second') as ActionButton;\n expect(firstButton.selected, 'first button selected').to.be.true;\n expect(secondButton.selected, 'second button not selected').to.be.false;\n\n el.selected = ['second'];\n await elementUpdated(el);\n\n expect(el.selected.length).to.equal(1);\n expect(firstButton.selected, 'first button not selected').to.be.false;\n expect(secondButton.selected, 'second button selected').to.be.true;\n });\n\n it('selects user-passed value while [selects=\"multiple\"]', async () => {\n const el = await fixture<ActionGroup>(\n html`\n <sp-action-group\n label=\"Selects Multiple Group\"\n selects=\"multiple\"\n .selected=${['first', 'second']}\n >\n <sp-action-button class=\"first\" value=\"first\">\n First\n </sp-action-button>\n <sp-action-button class=\"second\" value=\"second\">\n Second\n </sp-action-button>\n <sp-action-button class=\"third \" value=\"third\">\n Third\n </sp-action-button>\n </sp-action-group>\n `\n );\n\n await elementUpdated(el);\n\n const firstButton = el.querySelector('.first') as ActionButton;\n const secondButton = el.querySelector('.second') as ActionButton;\n const thirdButton = el.querySelector('.third') as ActionButton;\n\n expect(el.selected.length).to.equal(2);\n expect(firstButton.selected, 'first button selected').to.be.true;\n expect(secondButton.selected, 'second button selected').to.be.true;\n expect(thirdButton.selected, 'third button not selected').to.be.false;\n\n thirdButton.click();\n await elementUpdated(el);\n\n expect(el.selected.length).to.equal(3);\n expect(firstButton.selected, 'first button selected').to.be.true;\n expect(secondButton.selected, 'second button selected').to.be.true;\n expect(thirdButton.selected, 'third button selected').to.be.true;\n\n firstButton.click();\n await elementUpdated(el);\n\n expect(el.selected.length).to.equal(2);\n expect(firstButton.selected, 'first button not selected').to.be.false;\n expect(secondButton.selected, 'second button selected').to.be.true;\n expect(thirdButton.selected, 'third button selected').to.be.true;\n });\n\n it('selects can be updated while [selects=\"multiple\"]', async () => {\n const el = await fixture<ActionGroup>(\n html`\n <sp-action-group\n label=\"Selects Multiple Group\"\n selects=\"multiple\"\n .selected=${['first', 'second']}\n >\n <sp-action-button class=\"first\" value=\"first\">\n First\n </sp-action-button>\n <sp-action-button class=\"second\" value=\"second\">\n Second\n </sp-action-button>\n <sp-action-button class=\"third \" value=\"third\">\n Third\n </sp-action-button>\n </sp-action-group>\n `\n );\n\n await elementUpdated(el);\n\n const firstButton = el.querySelector('.first') as ActionButton;\n const secondButton = el.querySelector('.second') as ActionButton;\n const thirdButton = el.querySelector('.third') as ActionButton;\n\n expect(el.selected.length).to.equal(2);\n expect(firstButton.selected, 'first button selected').to.be.true;\n expect(secondButton.selected, 'second button selected').to.be.true;\n expect(thirdButton.selected, 'third button not selected').to.be.false;\n\n el.selected = ['first', 'second', 'third'];\n await elementUpdated(el);\n\n expect(el.selected.length).to.equal(3);\n expect(firstButton.selected, 'first button selected').to.be.true;\n expect(secondButton.selected, 'second button selected').to.be.true;\n expect(thirdButton.selected, 'third button selected').to.be.true;\n\n el.selected = ['second', 'third'];\n await elementUpdated(el);\n\n expect(el.selected.length, JSON.stringify(el.selected)).to.equal(2);\n expect(firstButton.selected, 'first button not selected').to.be.false;\n expect(secondButton.selected, 'second button selected').to.be.true;\n expect(thirdButton.selected, 'third button selected').to.be.true;\n });\n\n it('selects multiple user-passed values while [selects=\"single\"], but then proceeds with radio-button style functionality', async () => {\n const el = await singleSelectedActionGroup(['first', 'second']);\n await elementUpdated(el);\n expect(el.selected.length).to.equal(2);\n\n const firstButton = el.querySelector('.first') as ActionButton;\n const secondButton = el.querySelector('.second') as ActionButton;\n expect(firstButton.selected, 'first button selected').to.be.true;\n expect(secondButton.selected, 'second button selected').to.be.true;\n\n secondButton.click();\n await elementUpdated(el);\n\n expect(el.selected.length).to.equal(1);\n expect(firstButton.selected, 'first button selected').to.be.false;\n expect(secondButton.selected, 'second button selected').to.be.true;\n });\n\n it('Clicking button event should bubble up from inner label to outer button element', async () => {\n const el = await fixture<ActionGroup>(\n html`\n <sp-action-group\n label=\"Selects Multiple Group\"\n selects=\"multiple\"\n .selected=${['first', 'second']}\n >\n <sp-action-button class=\"first\" value=\"first\">\n First\n </sp-action-button>\n <sp-action-button class=\"second\" value=\"second\">\n Second\n </sp-action-button>\n </sp-action-group>\n `\n );\n\n await elementUpdated(el);\n expect(el.selected.length).to.equal(2);\n\n const firstButtonEl = el.querySelector('.first') as ActionButton;\n const firstSpanEl = firstButtonEl.shadowRoot.querySelector(\n '#label'\n ) as HTMLSpanElement;\n const secondButtonEl = el.querySelector('.second') as ActionButton;\n\n expect(firstButtonEl.selected, 'first button selected').to.be.true;\n expect(secondButtonEl.selected, 'second button selected').to.be.true;\n\n firstSpanEl.click(); // clicking inner span bubbles up and fires outer button click\n await elementUpdated(el);\n\n expect(firstButtonEl.selected, 'first button selected').to.be.false;\n expect(secondButtonEl.selected, 'second button selected').to.be.true;\n\n firstButtonEl.click(); // clicking outer action-button element fires own click event\n await elementUpdated(el);\n\n expect(firstButtonEl.selected, 'first button selected').to.be.true;\n expect(secondButtonEl.selected, 'second button selected').to.be.true;\n });\n\n it('only selects user-passed buttons if present in action-group while [selects=\"multiple\"]', async () => {\n const el = await multipleSelectedActionGroup(['second', 'fourth']);\n\n await elementUpdated(el);\n expect(el.selected.length).to.equal(1);\n const secondButton = el.querySelector('.second') as ActionButton;\n expect(secondButton.selected, 'second button selected').to.be.true;\n\n const firstButton = el.querySelector('.first') as ActionButton;\n expect(firstButton.selected, 'first button selected').to.be.false;\n });\n\n it('selects user-passed values with no .selects value, but does not allow interaction afterwards', async () => {\n const el = await fixture<ActionGroup>(\n html`\n <sp-action-group\n label=\"Selects User-Chosen Buttons\"\n .selected=${['first']}\n >\n <sp-action-button value=\"first\" class=\"first\">\n First\n </sp-action-button>\n <sp-action-button value=\"second\" class=\"second\">\n Second\n </sp-action-button>\n </sp-action-group>\n `\n );\n\n await elementUpdated(el);\n expect(el.selected.length).to.equal(1);\n const firstButton = el.querySelector('.first') as ActionButton;\n const secondButton = el.querySelector('.second') as ActionButton;\n expect(firstButton.selected, 'first button selected').to.be.true;\n expect(secondButton.selected, 'second button selected').to.be.false;\n\n secondButton.click();\n await elementUpdated(el);\n\n expect(el.selected.length).to.equal(1);\n expect(firstButton.selected, 'first button selected').to.be.true;\n expect(secondButton.selected, 'second button selected').to.be.false;\n });\n\n it('selects multiple buttons if .selected is passed in, but does not allow further interaction afterwards', async () => {\n const el = await fixture<ActionGroup>(\n html`\n <sp-action-group\n label=\"Selects User-Chosen Buttons\"\n .selected=${['first', 'second']}\n >\n <sp-action-button class=\"first\" value=\"first\">\n First\n </sp-action-button>\n <sp-action-button class=\"second\" value=\"second\">\n Second\n </sp-action-button>\n </sp-action-group>\n `\n );\n\n await elementUpdated(el);\n expect(el.getAttribute('role')).to.equal('toolbar');\n expect(el.selected.length).to.equal(2);\n\n const firstButton = el.querySelector('.first') as ActionButton;\n expect(firstButton.selected, 'first button selected').to.be.true;\n expect(firstButton.hasAttribute('aria-checked')).to.be.false;\n expect(\n firstButton.getAttribute('aria-pressed'),\n 'first button aria-pressed'\n ).to.eq('true');\n expect(firstButton.getAttribute('role'), 'first button role').to.eq(\n 'button'\n );\n\n const secondButton = el.querySelector('.second') as ActionButton;\n expect(secondButton.selected, 'second button selected').to.be.true;\n expect(secondButton.hasAttribute('aria-checked')).to.be.false;\n expect(\n secondButton.getAttribute('aria-pressed'),\n 'second button aria-pressed'\n ).to.eq('true');\n expect(secondButton.getAttribute('role'), 'first button role').to.eq(\n 'button'\n );\n\n firstButton.click();\n await elementUpdated(el);\n\n expect(el.selected.length).to.equal(2);\n expect(firstButton.selected, 'first button selected').to.be.true;\n expect(firstButton.hasAttribute('aria-checked')).to.be.false;\n expect(\n firstButton.getAttribute('aria-pressed'),\n 'first button aria-pressed'\n ).to.eq('true');\n expect(firstButton.getAttribute('role'), 'first button role').to.eq(\n 'button'\n );\n\n expect(secondButton.selected, 'second button selected').to.be.true;\n expect(secondButton.hasAttribute('aria-checked')).to.be.false;\n expect(\n secondButton.getAttribute('aria-pressed'),\n 'second button aria-pressed'\n ).to.eq('true');\n expect(secondButton.getAttribute('role'), 'first button role').to.eq(\n 'button'\n );\n });\n\n it('will not change .selected state if event is prevented while [selects=\"multiple\"]', async () => {\n const el = await fixture<ActionGroup>(\n html`\n <sp-action-group\n label=\"Selects Multiple Group\"\n selects=\"multiple\"\n .selected=${['first', 'second']}\n @change=${(event: Event): void => {\n event.preventDefault();\n }}\n >\n <sp-action-button class=\"first\" value=\"first\">\n First\n </sp-action-button>\n <sp-action-button class=\"second\" value=\"second\">\n Second\n </sp-action-button>\n <sp-action-button class=\"third \" value=\"third\">\n Third\n </sp-action-button>\n </sp-action-group>\n `\n );\n const firstElement = el.querySelector('.first') as ActionButton;\n const secondElement = el.querySelector('.second') as ActionButton;\n const thirdElement = el.querySelector('.third') as ActionButton;\n\n // checking if the first and second are selected\n await elementUpdated(el);\n expect(el.selected.length).to.equal(2);\n expect(firstElement.selected, 'first child selected').to.be.true;\n expect(secondElement.selected, 'second child selected').to.be.true;\n\n // making sure third element isn't selected\n thirdElement.click();\n await elementUpdated(el);\n expect(thirdElement.selected, 'third child not selected').to.be.false;\n expect(el.selected.length).to.equal(2);\n\n // making sure already-selected elements are not de-selected\n secondElement.click();\n await elementUpdated(el);\n\n expect(secondElement.selected, 'second element still selected').to.be\n .true;\n });\n\n it('will not change .selected state if event is prevented while [selects=\"single\"]', async () => {\n const el = await fixture<ActionGroup>(\n html`\n <sp-action-group\n label=\"Selects Single Group\"\n selects=\"single\"\n .selected=${['first']}\n @change=${(event: Event): void => {\n event.preventDefault();\n }}\n >\n <sp-action-button class=\"first\" value=\"first\">\n First\n </sp-action-button>\n <sp-action-button class=\"second\" value=\"second\">\n Second\n </sp-action-button>\n </sp-action-group>\n `\n );\n const firstElement = el.querySelector('.first') as ActionButton;\n const secondElement = el.querySelector('.second') as ActionButton;\n\n // checking if the first element is selected\n await elementUpdated(el);\n expect(el.selected.length).to.equal(1);\n expect(firstElement.selected, 'first child selected').to.be.true;\n\n // making sure third element isn't selected\n secondElement.click();\n\n await elementUpdated(el);\n\n expect(secondElement.selected, 'second child not selected').to.be.false;\n expect(el.selected.length).to.equal(1);\n\n // making sure already-selected elements are not de-selected\n firstElement.click();\n await elementUpdated(el);\n\n expect(firstElement.selected, 'first element still selected').to.be\n .true;\n });\n\n it('will not change .selected state if event is prevented while selects is undefined', async () => {\n const el = await fixture<ActionGroup>(\n html`\n <sp-action-group\n label=\"Selects Single Group\"\n .selected=${['first']}\n @change=${(event: Event): void => {\n event.preventDefault();\n }}\n >\n <sp-action-button class=\"first\" value=\"first\">\n First\n </sp-action-button>\n <sp-action-button class=\"second\" value=\"second\">\n Second\n </sp-action-button>\n </sp-action-group>\n `\n );\n const firstElement = el.querySelector('.first') as ActionButton;\n const secondElement = el.querySelector('.second') as ActionButton;\n\n // checking if the first element is selected\n await elementUpdated(el);\n expect(el.selected.length).to.equal(1);\n expect(firstElement.selected, 'first child selected').to.be.true;\n\n secondElement.click();\n await elementUpdated(el);\n\n // state should be exactly the same\n expect(el.selected.length).to.equal(1);\n expect(firstElement.selected, 'first child selected').to.be.true;\n expect(secondElement.selected, 'second child not selected').to.be.false;\n });\n\n it('maintains a `size` attribute', async () => {\n const el = await fixture<ActionGroup>(\n html`\n <sp-action-group>\n <sp-action-button>Button</sp-action-button>\n </sp-action-group>\n `\n );\n\n await elementUpdated(el);\n expect(el.size).to.equal('m');\n expect(el.getAttribute('size')).to.equal('m');\n el.removeAttribute('size');\n await elementUpdated(el);\n expect(el.size).to.equal('m');\n expect(el.getAttribute('size')).to.equal('m');\n });\n\n it('will accept selected as a JSON string', async () => {\n const el = await fixture<ActionGroup>(\n html`\n <sp-action-group\n label=\"Selects Single Group\"\n selects=\"single\"\n selected='[\"first\"]'\n >\n <sp-action-button class=\"first\" value=\"first\">\n First\n </sp-action-button>\n <sp-action-button class=\"second\" value=\"second\">\n Second\n </sp-action-button>\n </sp-action-group>\n `\n );\n // checking if the first element is selected\n await elementUpdated(el);\n const firstElement = el.querySelector('.first') as ActionButton;\n const secondElement = el.querySelector('.second') as ActionButton;\n\n expect(el.selected.length).to.equal(1);\n expect(firstElement.selected, 'first child selected').to.be.true;\n expect(secondElement.selected, 'second child selected').to.be.false;\n });\n\n it('accepts role attribute override', async () => {\n const el = await fixture<ActionGroup>(\n html`\n <sp-action-group role=\"group\">\n <sp-action-button>Button</sp-action-button>\n </sp-action-group>\n `\n );\n\n // with a role of group, the role should not be overridden\n await elementUpdated(el);\n expect(el.getAttribute('role')).to.equal('group');\n\n // setting selects to single should override role to radiogroup\n el.setAttribute('selects', 'single');\n await elementUpdated(el);\n expect(el.getAttribute('role')).to.equal('radiogroup');\n\n // setting selects to multiple should override role to toolbar\n el.setAttribute('selects', 'multiple');\n await elementUpdated(el);\n expect(el.getAttribute('role')).to.equal('toolbar');\n\n // by default, role should be toolbar\n el.removeAttribute('role');\n el.removeAttribute('selects');\n await elementUpdated(el);\n expect(el.getAttribute('role')).to.equal('toolbar');\n });\n\n const acceptKeyboardInput = async (el: ActionGroup): Promise<void> => {\n const thirdElement = el.querySelector('.third') as ActionButton;\n\n await elementUpdated(el);\n expect(el.selected.length).to.equal(1);\n expect(el.selected[0]).to.equal('Second');\n\n thirdElement.focus();\n thirdElement.click();\n\n await elementUpdated(el);\n\n expect(thirdElement.selected, 'third child selected').to.be.true;\n expect(el.selected.length).to.equal(1);\n expect(el.selected[0]).to.equal('Third');\n\n el.dispatchEvent(arrowRightEvent());\n await sendKeys({ press: 'Enter' });\n\n await elementUpdated(el);\n\n expect(el.selected.length).to.equal(1);\n expect(el.selected[0]).to.equal('First');\n\n el.dispatchEvent(arrowLeftEvent());\n el.dispatchEvent(arrowUpEvent());\n await sendKeys({ press: 'Enter' });\n\n expect(el.selected.length).to.equal(1);\n expect(el.selected[0]).to.equal('Second');\n\n el.dispatchEvent(endEvent());\n await sendKeys({ press: 'Enter' });\n\n expect(el.selected.length).to.equal(1);\n expect(el.selected[0]).to.equal('Third');\n\n await sendKeys({ press: 'Enter' });\n\n el.dispatchEvent(homeEvent());\n await sendKeys({ press: 'Enter' });\n\n expect(el.selected.length).to.equal(1);\n expect(el.selected[0]).to.equal('First');\n\n el.dispatchEvent(arrowDownEvent());\n await sendKeys({ press: 'Enter' });\n\n expect(el.selected.length).to.equal(1);\n expect(el.selected[0]).to.equal('Second');\n };\n it('accepts keybord input', async () => {\n const el = await fixture<ActionGroup>(\n html`\n <sp-action-group label=\"Selects Single Group\" selects=\"single\">\n <sp-action-button>First</sp-action-button>\n <sp-action-button selected>Second</sp-action-button>\n <sp-action-button class=\"third\">Third</sp-action-button>\n </sp-action-group>\n `\n );\n await acceptKeyboardInput(el);\n });\n it('accepts keybord input with tooltip', async () => {\n const el = await fixture<ActionGroup>(\n html`\n <sp-action-group label=\"Selects Single Group\" selects=\"single\">\n <overlay-trigger>\n <sp-action-button slot=\"trigger\">\n First\n </sp-action-button>\n <sp-tooltip slot=\"hover-content\">\n Definitely the first one.\n </sp-tooltip>\n </overlay-trigger>\n <overlay-trigger>\n <sp-action-button slot=\"trigger\" selected>\n Second\n </sp-action-button>\n <sp-tooltip slot=\"hover-content\">\n Not the first, not the last.\n </sp-tooltip>\n </overlay-trigger>\n <overlay-trigger>\n <sp-action-button slot=\"trigger\" class=\"third\">\n Third\n </sp-action-button>\n <sp-tooltip slot=\"hover-content\">Select me.</sp-tooltip>\n </overlay-trigger>\n </sp-action-group>\n `\n );\n await acceptKeyboardInput(el);\n });\n it('accepts keybord input when [dir=\"ltr\"]', async () => {\n const el = await fixture<ActionGroup>(\n html`\n <sp-action-group\n label=\"Selects Single Group\"\n selects=\"single\"\n dir=\"ltr\"\n >\n <sp-action-button>First</sp-action-button>\n <sp-action-button disabled>Second</sp-action-button>\n <sp-action-button class=\"third\">Third</sp-action-button>\n </sp-action-group>\n `\n );\n const thirdElement = el.querySelector('.third') as ActionButton;\n\n await elementUpdated(el);\n expect(el.selected.length).to.equal(0);\n\n thirdElement.focus();\n thirdElement.click();\n\n await elementUpdated(el);\n\n expect(thirdElement.selected, 'third child selected').to.be.true;\n expect(el.selected.length).to.equal(1);\n expect(el.selected[0]).to.equal('Third');\n\n el.dispatchEvent(arrowRightEvent());\n await sendKeys({ press: 'Enter' });\n\n await elementUpdated(el);\n\n expect(el.selected.length).to.equal(1);\n expect(el.selected[0]).to.equal('First');\n\n el.dispatchEvent(arrowUpEvent());\n await sendKeys({ press: 'Enter' });\n\n expect(el.selected.length).to.equal(1);\n expect(el.selected[0]).to.equal('Third');\n });\n it('processes `selects` correctly when mutations occur (because Overlays/Tooltips)', async () => {\n const test = await fixture<SpectrumElement>(controlled());\n const actionButtons = [\n ...test.shadowRoot.querySelectorAll('sp-action-button'),\n ] as ActionButton[];\n\n expect(actionButtons[0].selected).to.be.true;\n expect(actionButtons[1].selected).to.be.false;\n expect(actionButtons[2].selected).to.be.false;\n\n const changeSpy = spy();\n test.addEventListener('change', () => changeSpy());\n const rect = actionButtons[1].getBoundingClientRect();\n sendMouse({\n steps: [\n {\n position: [\n rect.left + rect.width / 2,\n rect.top + rect.height / 2,\n ],\n type: 'click',\n },\n ],\n });\n\n await aTimeout(500);\n\n expect(actionButtons[0].selected).to.be.false;\n expect(actionButtons[1].selected).to.be.true;\n expect(actionButtons[2].selected).to.be.false;\n });\n});\n"],
|
|
5
|
-
"mappings": "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",
|
|
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 aTimeout,\n elementUpdated,\n expect,\n fixture,\n html,\n waitUntil,\n} from '@open-wc/testing';\n\nimport { ActionButton } from '@spectrum-web-components/action-button';\nimport '@spectrum-web-components/action-button/sp-action-button.js';\nimport {\n LitElement,\n SpectrumElement,\n TemplateResult,\n} from '@spectrum-web-components/base';\nimport '@spectrum-web-components/overlay/overlay-trigger.js';\nimport '@spectrum-web-components/tooltip/sp-tooltip.js';\nimport { ActionGroup } from '@spectrum-web-components/action-group';\nimport {\n arrowDownEvent,\n arrowLeftEvent,\n arrowRightEvent,\n arrowUpEvent,\n endEvent,\n homeEvent,\n testForLitDevWarnings,\n} from '../../../test/testing-helpers';\nimport { sendKeys } from '@web/test-runner-commands';\nimport '@spectrum-web-components/action-group/sp-action-group.js';\nimport { controlled } from '../stories/action-group-tooltip.stories.js';\nimport { spy } from 'sinon';\nimport { sendMouse } from '../../../test/plugins/browser.js';\n\nclass QuietActionGroup extends LitElement {\n protected override render(): TemplateResult {\n return html`\n <sp-action-group quiet>\n <slot name=\"first\"></slot>\n <slot name=\"second\"></slot>\n </sp-action-group>\n `;\n }\n}\ncustomElements.define('quiet-action-group', QuietActionGroup);\n\nclass EmphasizedActionGroup extends LitElement {\n protected override render(): TemplateResult {\n return html`\n <sp-action-group emphasized>\n <slot name=\"first\"></slot>\n <slot name=\"second\"></slot>\n </sp-action-group>\n `;\n }\n}\ncustomElements.define('emphasized-action-group', EmphasizedActionGroup);\n\nasync function singleSelectedActionGroup(\n selected: string[]\n): Promise<ActionGroup> {\n const el = await fixture<ActionGroup>(\n html`\n <sp-action-group\n label=\"Selects User-Chosen Buttons\"\n selects=\"single\"\n .selected=${selected}\n >\n <sp-action-button value=\"first\" class=\"first\">\n First\n </sp-action-button>\n <sp-action-button value=\"second\" class=\"second\">\n Second\n </sp-action-button>\n </sp-action-group>\n `\n );\n return el;\n}\n\nasync function multipleSelectedActionGroup(\n selected: string[]\n): Promise<ActionGroup> {\n const el = await fixture<ActionGroup>(\n html`\n <sp-action-group\n label=\"Selects User-Chosen Buttons\"\n selects=\"multiple\"\n .selected=${selected}\n >\n <sp-action-button value=\"first\" class=\"first\">\n First\n </sp-action-button>\n <sp-action-button value=\"second\" class=\"second\">\n Second\n </sp-action-button>\n </sp-action-group>\n `\n );\n return el;\n}\n\ndescribe('ActionGroup', () => {\n it('loads empty action-group accessibly', async () => {\n const el = await fixture<ActionGroup>(\n html`\n <sp-action-group></sp-action-group>\n `\n );\n\n await elementUpdated(el);\n\n await expect(el).to.be.accessible();\n });\n testForLitDevWarnings(\n async () =>\n await fixture<ActionGroup>(\n html`\n <sp-action-group aria-label=\"Default Group\">\n <sp-action-button>First</sp-action-button>\n <sp-action-button>Second</sp-action-button>\n <sp-action-button>Third</sp-action-button>\n </sp-action-group>\n `\n )\n );\n it('loads default action-group accessibly', async () => {\n const el = await fixture<ActionGroup>(\n html`\n <sp-action-group aria-label=\"Default Group\">\n <sp-action-button>First</sp-action-button>\n <sp-action-button>Second</sp-action-button>\n <sp-action-button>Third</sp-action-button>\n </sp-action-group>\n `\n );\n\n await elementUpdated(el);\n\n await expect(el).to.be.accessible();\n expect(el.getAttribute('aria-label')).to.equal('Default Group');\n expect(el.getAttribute('role')).to.equal('toolbar');\n expect(el.children[0].getAttribute('role')).to.equal('button');\n });\n it('applies `static` attribute to its children', async () => {\n const el = await fixture<ActionGroup>(\n html`\n <sp-action-group static=\"white\">\n <sp-action-button id=\"first\">First</sp-action-button>\n <sp-action-button id=\"second\">Second</sp-action-button>\n </sp-action-group>\n `\n );\n const firstButton = el.querySelector('#first') as ActionButton;\n const secondButton = el.querySelector('#second') as ActionButton;\n\n await elementUpdated(el);\n\n expect(firstButton.static).to.equal('white');\n expect(secondButton.static).to.equal('white');\n\n el.static = undefined;\n\n await elementUpdated(el);\n\n expect(firstButton.static).to.be.undefined;\n expect(secondButton.static).to.be.undefined;\n });\n it('manages \"label\"', async () => {\n const testLabel = 'Testable action group';\n const el = await fixture<ActionGroup>(\n html`\n <sp-action-group label=${testLabel}>\n <sp-action-button id=\"first\">First</sp-action-button>\n <sp-action-button id=\"second\">Second</sp-action-button>\n </sp-action-group>\n `\n );\n\n expect(el.getAttribute('aria-label')).to.equal(testLabel);\n\n el.label = '';\n\n await elementUpdated(el);\n\n expect(el.hasAttribute('aria-label')).to.be.false;\n });\n it('applies `quiet` attribute to its children', async () => {\n const el = await fixture<ActionGroup>(\n html`\n <sp-action-group quiet>\n <sp-action-button id=\"first\">First</sp-action-button>\n <sp-action-button id=\"second\">Second</sp-action-button>\n </sp-action-group>\n `\n );\n const firstButton = el.querySelector('#first') as ActionButton;\n const secondButton = el.querySelector('#second') as ActionButton;\n\n await elementUpdated(el);\n\n expect(firstButton.hasAttribute('quiet')).to.be.true;\n expect(firstButton.quiet).to.be.true;\n expect(secondButton.hasAttribute('quiet')).to.be.true;\n expect(secondButton.quiet).to.be.true;\n });\n it('applies `quiet` attribute to its slotted children', async () => {\n const el = await fixture<ActionGroup>(\n html`\n <quiet-action-group>\n <sp-action-button slot=\"first\" id=\"first\">\n First\n </sp-action-button>\n <sp-action-button slot=\"second\" id=\"second\">\n Second\n </sp-action-button>\n </quiet-action-group>\n `\n );\n const firstButton = el.querySelector('#first') as ActionButton;\n const secondButton = el.querySelector('#second') as ActionButton;\n\n await elementUpdated(el);\n\n expect(firstButton.hasAttribute('quiet')).to.be.true;\n expect(firstButton.quiet).to.be.true;\n expect(secondButton.hasAttribute('quiet')).to.be.true;\n expect(secondButton.quiet).to.be.true;\n });\n it('applies `emphasized` attribute to its slotted children', async () => {\n const el = await fixture<ActionGroup>(\n html`\n <emphasized-action-group>\n <sp-action-button slot=\"first\" id=\"first\">\n First\n </sp-action-button>\n <sp-action-button slot=\"second\" id=\"second\">\n Second\n </sp-action-button>\n </emphasized-action-group>\n `\n );\n const firstButton = el.querySelector('#first') as ActionButton;\n const secondButton = el.querySelector('#second') as ActionButton;\n\n await elementUpdated(el);\n\n expect(firstButton.hasAttribute('emphasized')).to.be.true;\n expect(firstButton.emphasized).to.be.true;\n expect(secondButton.hasAttribute('emphasized')).to.be.true;\n expect(secondButton.emphasized).to.be.true;\n });\n it('applies `quiet` attribute to slotted children with overlays', async () => {\n const el = await fixture<ActionGroup>(\n html`\n <quiet-action-group>\n <overlay-trigger slot=\"first\">\n <sp-action-button slot=\"trigger\" id=\"first\">\n First\n </sp-action-button>\n </overlay-trigger>\n <overlay-trigger slot=\"second\">\n <sp-action-button slot=\"trigger\" id=\"second\">\n Second\n </sp-action-button>\n </overlay-trigger>\n </quiet-action-group>\n `\n );\n const firstButton = el.querySelector('#first') as ActionButton;\n const secondButton = el.querySelector('#second') as ActionButton;\n\n await elementUpdated(el);\n\n expect(firstButton.hasAttribute('quiet')).to.be.true;\n expect(firstButton.quiet).to.be.true;\n expect(secondButton.hasAttribute('quiet')).to.be.true;\n expect(secondButton.quiet).to.be.true;\n });\n it('applies `emphasized` attribute to slotted children with overlays', async () => {\n const el = await fixture<ActionGroup>(\n html`\n <emphasized-action-group>\n <overlay-trigger slot=\"first\">\n <sp-action-button slot=\"trigger\" id=\"first\">\n First\n </sp-action-button>\n </overlay-trigger>\n <overlay-trigger slot=\"second\">\n <sp-action-button slot=\"trigger\" id=\"second\">\n Second\n </sp-action-button>\n </overlay-trigger>\n </emphasized-action-group>\n `\n );\n const firstButton = el.querySelector('#first') as ActionButton;\n const secondButton = el.querySelector('#second') as ActionButton;\n\n await elementUpdated(el);\n\n expect(firstButton.hasAttribute('emphasized')).to.be.true;\n expect(firstButton.emphasized).to.be.true;\n expect(secondButton.hasAttribute('emphasized')).to.be.true;\n expect(secondButton.emphasized).to.be.true;\n });\n it('loads [selects=\"single\"] action-group accessibly', async () => {\n const el = await fixture<ActionGroup>(\n html`\n <sp-action-group label=\"Selects Single Group\" selects=\"single\">\n <sp-action-button>First</sp-action-button>\n <sp-action-button>Second</sp-action-button>\n <sp-action-button>Third</sp-action-button>\n </sp-action-group>\n `\n );\n\n await elementUpdated(el);\n\n await expect(el).to.be.accessible();\n expect(el.getAttribute('aria-label')).to.equal('Selects Single Group');\n expect(el.getAttribute('role')).to.equal('radiogroup');\n expect(el.children[0].getAttribute('role')).to.equal('radio');\n });\n it('loads [selects=\"single\"] action-group w/ selection accessibly', async () => {\n const el = await fixture<ActionGroup>(\n html`\n <sp-action-group label=\"Selects Single Group\" selects=\"single\">\n <sp-action-button>First</sp-action-button>\n <sp-action-button>Second</sp-action-button>\n <sp-action-button selected>Third</sp-action-button>\n </sp-action-group>\n `\n );\n\n await elementUpdated(el);\n\n await expect(el).to.be.accessible();\n });\n it('loads [selects=\"multiple\"] action-group accessibly', async () => {\n const el = await fixture<ActionGroup>(\n html`\n <sp-action-group\n label=\"Selects Multiple Group\"\n selects=\"multiple\"\n >\n <sp-action-button>First</sp-action-button>\n <sp-action-button>Second</sp-action-button>\n <sp-action-button>Third</sp-action-button>\n </sp-action-group>\n `\n );\n\n await elementUpdated(el);\n\n await expect(el).to.be.accessible();\n expect(el.getAttribute('aria-label')).to.equal(\n 'Selects Multiple Group'\n );\n expect(el.getAttribute('role')).to.equal('toolbar');\n expect(el.children[0].getAttribute('role')).to.equal('checkbox');\n });\n it('loads [selects=\"multiple\"] action-group w/ selection accessibly', async () => {\n const el = await fixture<ActionGroup>(\n html`\n <sp-action-group\n label=\"Selects Multiple Group\"\n selects=\"multiple\"\n >\n <sp-action-button>First</sp-action-button>\n <sp-action-button selected>Second</sp-action-button>\n <sp-action-button selected>Third</sp-action-button>\n </sp-action-group>\n `\n );\n\n await elementUpdated(el);\n\n await expect(el).to.be.accessible();\n });\n it('sets tab stop when [selects=\"single\"] and the initial button is [disabled]', async () => {\n const el = await fixture<ActionGroup>(\n html`\n <sp-action-group label=\"Selects Single Group\" selects=\"single\">\n <sp-action-button disabled>First</sp-action-button>\n <sp-action-button class=\"second\">Second</sp-action-button>\n <sp-action-button>Third</sp-action-button>\n </sp-action-group>\n `\n );\n const secondButton = el.querySelector('.second') as ActionButton;\n\n await elementUpdated(el);\n\n expect(secondButton.hasAttribute('tabindex'));\n expect(secondButton.getAttribute('tabindex')).to.equal('0');\n });\n it('surfaces [selects=\"single\"] selection', async () => {\n const el = await fixture<ActionGroup>(\n html`\n <sp-action-group label=\"Selects Single Group\" selects=\"single\">\n <sp-action-button>First</sp-action-button>\n <sp-action-button>Second</sp-action-button>\n <sp-action-button selected>Third</sp-action-button>\n </sp-action-group>\n `\n );\n\n await elementUpdated(el);\n\n expect(el.selected, '\"Third\" selected').to.deep.equal(['Third']);\n });\n it('surfaces [selects=\"multiple\"] selection', async () => {\n const el = await fixture<ActionGroup>(\n html`\n <sp-action-group\n label=\"Selects Multiple Group\"\n selects=\"multiple\"\n >\n <sp-action-button>First</sp-action-button>\n <sp-action-button selected>Second</sp-action-button>\n <sp-action-button selected>Third</sp-action-button>\n </sp-action-group>\n `\n );\n\n await elementUpdated(el);\n\n expect(el.selected, '\"Second\" and \"Third\" selected').to.deep.equal([\n 'Second',\n 'Third',\n ]);\n });\n it('does not select without [selects]', async () => {\n const el = await fixture<ActionGroup>(\n html`\n <sp-action-group label=\"No Selects Group\">\n <sp-action-button>First</sp-action-button>\n <sp-action-button selected>Second</sp-action-button>\n <sp-action-button class=\"third\">Third</sp-action-button>\n </sp-action-group>\n `\n );\n const thirdElement = el.querySelector('.third') as ActionButton;\n\n await elementUpdated(el);\n expect(el.selected.length).to.equal(1);\n\n thirdElement.click();\n\n await elementUpdated(el);\n\n expect(el.selected.length).to.equal(1);\n });\n it('selects via `click` while [selects=\"single\"]', async () => {\n const el = await fixture<ActionGroup>(\n html`\n <sp-action-group label=\"Selects Single Group\" selects=\"single\">\n <sp-action-button value=\"first\">First</sp-action-button>\n <sp-action-button value=\"second\" selected>\n Second\n </sp-action-button>\n <sp-action-button value=\"third\" class=\"third\">\n Third\n </sp-action-button>\n </sp-action-group>\n `\n );\n const thirdElement = el.querySelector('.third') as ActionButton;\n\n await elementUpdated(el);\n expect(el.selected.length).to.equal(1);\n expect(el.selected.includes('second'));\n\n thirdElement.click();\n\n await elementUpdated(el);\n\n expect(thirdElement.selected, 'third child selected').to.be.true;\n\n await waitUntil(\n () => el.selected.length === 1 && el.selected.includes('third'),\n 'Updates value of `selected`'\n );\n });\n it('selects via `click` while [selects=\"multiple\"] selection', async () => {\n const el = await fixture<ActionGroup>(\n html`\n <sp-action-group\n label=\"Selects Multiple Group\"\n selects=\"multiple\"\n >\n <sp-action-button selected class=\"first\">\n First\n </sp-action-button>\n <sp-action-button class=\"second\">Second</sp-action-button>\n <sp-action-button class=\"third\">Third</sp-action-button>\n </sp-action-group>\n `\n );\n const firstElement = el.querySelector('.first') as ActionButton;\n const secondElement = el.querySelector('.second') as ActionButton;\n const thirdElement = el.querySelector('.third') as ActionButton;\n\n await elementUpdated(el);\n expect(el.selected.length).to.equal(1);\n expect(el.selected.includes('First'));\n\n firstElement.click();\n secondElement.click();\n thirdElement.click();\n\n await elementUpdated(el);\n\n expect(secondElement.selected, 'second child selected').to.be.true;\n expect(thirdElement.selected, 'third child selected').to.be.true;\n\n await waitUntil(\n () =>\n el.selected.length === 2 &&\n el.selected.includes('Second') &&\n el.selected.includes('Third'),\n 'Updates value of `selected`'\n );\n });\n it('does not respond to clicks on itself', async () => {\n const el = await fixture<ActionGroup>(\n html`\n <sp-action-group label=\"Selects Single Group\" selects=\"single\">\n <sp-action-button>First</sp-action-button>\n <sp-action-button>Second</sp-action-button>\n <sp-action-button class=\"third\">Third</sp-action-button>\n </sp-action-group>\n `\n );\n await elementUpdated(el);\n expect(el.selected.length).to.equal(0);\n\n el.click();\n\n await elementUpdated(el);\n\n expect(el.selected.length).to.equal(0);\n });\n it('selection can be prevented', async () => {\n const el = await fixture<ActionGroup>(\n html`\n <sp-action-group\n label=\"Selects Single Group\"\n selects=\"single\"\n @change=${(event: Event): void => {\n event.preventDefault();\n }}\n >\n <sp-action-button>First</sp-action-button>\n <sp-action-button>Second</sp-action-button>\n <sp-action-button class=\"third\">Third</sp-action-button>\n </sp-action-group>\n `\n );\n const thirdElement = el.querySelector('.third') as ActionButton;\n\n await elementUpdated(el);\n expect(el.selected.length).to.equal(0);\n\n thirdElement.click();\n\n await elementUpdated(el);\n\n expect(thirdElement.selected, 'third child not selected').to.be.false;\n expect(el.selected.length).to.equal(0);\n });\n\n it('selects user-passed value while [selects=\"single\"]', async () => {\n const el = await singleSelectedActionGroup(['first']);\n await elementUpdated(el);\n expect(el.selected.length).to.equal(1);\n\n const firstButton = el.querySelector('.first') as ActionButton;\n const secondButton = el.querySelector('.second') as ActionButton;\n expect(firstButton.selected, 'first button selected').to.be.true;\n expect(secondButton.selected, 'second button not selected').to.be.false;\n\n secondButton.click();\n await elementUpdated(el);\n\n expect(el.selected.length).to.equal(1);\n expect(firstButton.selected, 'first button not selected').to.be.false;\n expect(secondButton.selected, 'second button selected').to.be.true;\n });\n\n it('selects can be updated while [selects=\"single\"]', async () => {\n const el = await singleSelectedActionGroup(['first']);\n await elementUpdated(el);\n expect(el.selected.length).to.equal(1);\n\n const firstButton = el.querySelector('.first') as ActionButton;\n const secondButton = el.querySelector('.second') as ActionButton;\n expect(firstButton.selected, 'first button selected').to.be.true;\n expect(secondButton.selected, 'second button not selected').to.be.false;\n\n el.selected = ['second'];\n await elementUpdated(el);\n\n expect(el.selected.length).to.equal(1);\n expect(firstButton.selected, 'first button not selected').to.be.false;\n expect(secondButton.selected, 'second button selected').to.be.true;\n });\n\n it('selects user-passed value while [selects=\"multiple\"]', async () => {\n const el = await fixture<ActionGroup>(\n html`\n <sp-action-group\n label=\"Selects Multiple Group\"\n selects=\"multiple\"\n .selected=${['first', 'second']}\n >\n <sp-action-button class=\"first\" value=\"first\">\n First\n </sp-action-button>\n <sp-action-button class=\"second\" value=\"second\">\n Second\n </sp-action-button>\n <sp-action-button class=\"third \" value=\"third\">\n Third\n </sp-action-button>\n </sp-action-group>\n `\n );\n\n await elementUpdated(el);\n\n const firstButton = el.querySelector('.first') as ActionButton;\n const secondButton = el.querySelector('.second') as ActionButton;\n const thirdButton = el.querySelector('.third') as ActionButton;\n\n expect(el.selected.length).to.equal(2);\n expect(firstButton.selected, 'first button selected').to.be.true;\n expect(secondButton.selected, 'second button selected').to.be.true;\n expect(thirdButton.selected, 'third button not selected').to.be.false;\n\n thirdButton.click();\n await elementUpdated(el);\n\n expect(el.selected.length).to.equal(3);\n expect(firstButton.selected, 'first button selected').to.be.true;\n expect(secondButton.selected, 'second button selected').to.be.true;\n expect(thirdButton.selected, 'third button selected').to.be.true;\n\n firstButton.click();\n await elementUpdated(el);\n\n expect(el.selected.length).to.equal(2);\n expect(firstButton.selected, 'first button not selected').to.be.false;\n expect(secondButton.selected, 'second button selected').to.be.true;\n expect(thirdButton.selected, 'third button selected').to.be.true;\n });\n\n it('selects can be updated while [selects=\"multiple\"]', async () => {\n const el = await fixture<ActionGroup>(\n html`\n <sp-action-group\n label=\"Selects Multiple Group\"\n selects=\"multiple\"\n .selected=${['first', 'second']}\n >\n <sp-action-button class=\"first\" value=\"first\">\n First\n </sp-action-button>\n <sp-action-button class=\"second\" value=\"second\">\n Second\n </sp-action-button>\n <sp-action-button class=\"third \" value=\"third\">\n Third\n </sp-action-button>\n </sp-action-group>\n `\n );\n\n await elementUpdated(el);\n\n const firstButton = el.querySelector('.first') as ActionButton;\n const secondButton = el.querySelector('.second') as ActionButton;\n const thirdButton = el.querySelector('.third') as ActionButton;\n\n expect(el.selected.length).to.equal(2);\n expect(firstButton.selected, 'first button selected').to.be.true;\n expect(secondButton.selected, 'second button selected').to.be.true;\n expect(thirdButton.selected, 'third button not selected').to.be.false;\n\n el.selected = ['first', 'second', 'third'];\n await elementUpdated(el);\n\n expect(el.selected.length).to.equal(3);\n expect(firstButton.selected, 'first button selected').to.be.true;\n expect(secondButton.selected, 'second button selected').to.be.true;\n expect(thirdButton.selected, 'third button selected').to.be.true;\n\n el.selected = ['second', 'third'];\n await elementUpdated(el);\n\n expect(el.selected.length, JSON.stringify(el.selected)).to.equal(2);\n expect(firstButton.selected, 'first button not selected').to.be.false;\n expect(secondButton.selected, 'second button selected').to.be.true;\n expect(thirdButton.selected, 'third button selected').to.be.true;\n });\n\n it('selects multiple user-passed values while [selects=\"single\"], but then proceeds with radio-button style functionality', async () => {\n const el = await singleSelectedActionGroup(['first', 'second']);\n await elementUpdated(el);\n expect(el.selected.length).to.equal(2);\n\n const firstButton = el.querySelector('.first') as ActionButton;\n const secondButton = el.querySelector('.second') as ActionButton;\n expect(firstButton.selected, 'first button selected').to.be.true;\n expect(secondButton.selected, 'second button selected').to.be.true;\n\n secondButton.click();\n await elementUpdated(el);\n\n expect(el.selected.length).to.equal(1);\n expect(firstButton.selected, 'first button selected').to.be.false;\n expect(secondButton.selected, 'second button selected').to.be.true;\n });\n\n it('Clicking button event should bubble up from inner label to outer button element', async () => {\n const el = await fixture<ActionGroup>(\n html`\n <sp-action-group\n label=\"Selects Multiple Group\"\n selects=\"multiple\"\n .selected=${['first', 'second']}\n >\n <sp-action-button class=\"first\" value=\"first\">\n First\n </sp-action-button>\n <sp-action-button class=\"second\" value=\"second\">\n Second\n </sp-action-button>\n </sp-action-group>\n `\n );\n\n await elementUpdated(el);\n expect(el.selected.length).to.equal(2);\n\n const firstButtonEl = el.querySelector('.first') as ActionButton;\n const firstSpanEl = firstButtonEl.shadowRoot.querySelector(\n '#label'\n ) as HTMLSpanElement;\n const secondButtonEl = el.querySelector('.second') as ActionButton;\n\n expect(firstButtonEl.selected, 'first button selected').to.be.true;\n expect(secondButtonEl.selected, 'second button selected').to.be.true;\n\n firstSpanEl.click(); // clicking inner span bubbles up and fires outer button click\n await elementUpdated(el);\n\n expect(firstButtonEl.selected, 'first button selected').to.be.false;\n expect(secondButtonEl.selected, 'second button selected').to.be.true;\n\n firstButtonEl.click(); // clicking outer action-button element fires own click event\n await elementUpdated(el);\n\n expect(firstButtonEl.selected, 'first button selected').to.be.true;\n expect(secondButtonEl.selected, 'second button selected').to.be.true;\n });\n\n it('only selects user-passed buttons if present in action-group while [selects=\"multiple\"]', async () => {\n const el = await multipleSelectedActionGroup(['second', 'fourth']);\n\n await elementUpdated(el);\n expect(el.selected.length).to.equal(1);\n const secondButton = el.querySelector('.second') as ActionButton;\n expect(secondButton.selected, 'second button selected').to.be.true;\n\n const firstButton = el.querySelector('.first') as ActionButton;\n expect(firstButton.selected, 'first button selected').to.be.false;\n });\n\n it('selects user-passed values with no .selects value, but does not allow interaction afterwards', async () => {\n const el = await fixture<ActionGroup>(\n html`\n <sp-action-group\n label=\"Selects User-Chosen Buttons\"\n .selected=${['first']}\n >\n <sp-action-button value=\"first\" class=\"first\">\n First\n </sp-action-button>\n <sp-action-button value=\"second\" class=\"second\">\n Second\n </sp-action-button>\n </sp-action-group>\n `\n );\n\n await elementUpdated(el);\n expect(el.selected.length).to.equal(1);\n const firstButton = el.querySelector('.first') as ActionButton;\n const secondButton = el.querySelector('.second') as ActionButton;\n expect(firstButton.selected, 'first button selected').to.be.true;\n expect(secondButton.selected, 'second button selected').to.be.false;\n\n secondButton.click();\n await elementUpdated(el);\n\n expect(el.selected.length).to.equal(1);\n expect(firstButton.selected, 'first button selected').to.be.true;\n expect(secondButton.selected, 'second button selected').to.be.false;\n });\n\n it('selects multiple buttons if .selected is passed in, but does not allow further interaction afterwards', async () => {\n const el = await fixture<ActionGroup>(\n html`\n <sp-action-group\n label=\"Selects User-Chosen Buttons\"\n .selected=${['first', 'second']}\n >\n <sp-action-button class=\"first\" value=\"first\">\n First\n </sp-action-button>\n <sp-action-button class=\"second\" value=\"second\">\n Second\n </sp-action-button>\n </sp-action-group>\n `\n );\n\n await elementUpdated(el);\n expect(el.getAttribute('role')).to.equal('toolbar');\n expect(el.selected.length).to.equal(2);\n\n const firstButton = el.querySelector('.first') as ActionButton;\n expect(firstButton.selected, 'first button selected').to.be.true;\n expect(firstButton.hasAttribute('aria-checked')).to.be.false;\n expect(\n firstButton.getAttribute('aria-pressed'),\n 'first button aria-pressed'\n ).to.eq('true');\n expect(firstButton.getAttribute('role'), 'first button role').to.eq(\n 'button'\n );\n\n const secondButton = el.querySelector('.second') as ActionButton;\n expect(secondButton.selected, 'second button selected').to.be.true;\n expect(secondButton.hasAttribute('aria-checked')).to.be.false;\n expect(\n secondButton.getAttribute('aria-pressed'),\n 'second button aria-pressed'\n ).to.eq('true');\n expect(secondButton.getAttribute('role'), 'first button role').to.eq(\n 'button'\n );\n\n firstButton.click();\n await elementUpdated(el);\n\n expect(el.selected.length).to.equal(2);\n expect(firstButton.selected, 'first button selected').to.be.true;\n expect(firstButton.hasAttribute('aria-checked')).to.be.false;\n expect(\n firstButton.getAttribute('aria-pressed'),\n 'first button aria-pressed'\n ).to.eq('true');\n expect(firstButton.getAttribute('role'), 'first button role').to.eq(\n 'button'\n );\n\n expect(secondButton.selected, 'second button selected').to.be.true;\n expect(secondButton.hasAttribute('aria-checked')).to.be.false;\n expect(\n secondButton.getAttribute('aria-pressed'),\n 'second button aria-pressed'\n ).to.eq('true');\n expect(secondButton.getAttribute('role'), 'first button role').to.eq(\n 'button'\n );\n });\n\n it('will not change .selected state if event is prevented while [selects=\"multiple\"]', async () => {\n const el = await fixture<ActionGroup>(\n html`\n <sp-action-group\n label=\"Selects Multiple Group\"\n selects=\"multiple\"\n .selected=${['first', 'second']}\n @change=${(event: Event): void => {\n event.preventDefault();\n }}\n >\n <sp-action-button class=\"first\" value=\"first\">\n First\n </sp-action-button>\n <sp-action-button class=\"second\" value=\"second\">\n Second\n </sp-action-button>\n <sp-action-button class=\"third \" value=\"third\">\n Third\n </sp-action-button>\n </sp-action-group>\n `\n );\n const firstElement = el.querySelector('.first') as ActionButton;\n const secondElement = el.querySelector('.second') as ActionButton;\n const thirdElement = el.querySelector('.third') as ActionButton;\n\n // checking if the first and second are selected\n await elementUpdated(el);\n expect(el.selected.length).to.equal(2);\n expect(firstElement.selected, 'first child selected').to.be.true;\n expect(secondElement.selected, 'second child selected').to.be.true;\n\n // making sure third element isn't selected\n thirdElement.click();\n await elementUpdated(el);\n expect(thirdElement.selected, 'third child not selected').to.be.false;\n expect(el.selected.length).to.equal(2);\n\n // making sure already-selected elements are not de-selected\n secondElement.click();\n await elementUpdated(el);\n\n expect(secondElement.selected, 'second element still selected').to.be\n .true;\n });\n\n it('will not change .selected state if event is prevented while [selects=\"single\"]', async () => {\n const el = await fixture<ActionGroup>(\n html`\n <sp-action-group\n label=\"Selects Single Group\"\n selects=\"single\"\n .selected=${['first']}\n @change=${(event: Event): void => {\n event.preventDefault();\n }}\n >\n <sp-action-button class=\"first\" value=\"first\">\n First\n </sp-action-button>\n <sp-action-button class=\"second\" value=\"second\">\n Second\n </sp-action-button>\n </sp-action-group>\n `\n );\n const firstElement = el.querySelector('.first') as ActionButton;\n const secondElement = el.querySelector('.second') as ActionButton;\n\n // checking if the first element is selected\n await elementUpdated(el);\n expect(el.selected.length).to.equal(1);\n expect(firstElement.selected, 'first child selected').to.be.true;\n\n // making sure third element isn't selected\n secondElement.click();\n\n await elementUpdated(el);\n\n expect(secondElement.selected, 'second child not selected').to.be.false;\n expect(el.selected.length).to.equal(1);\n\n // making sure already-selected elements are not de-selected\n firstElement.click();\n await elementUpdated(el);\n\n expect(firstElement.selected, 'first element still selected').to.be\n .true;\n });\n\n it('will not change .selected state if event is prevented while selects is undefined', async () => {\n const el = await fixture<ActionGroup>(\n html`\n <sp-action-group\n label=\"Selects Single Group\"\n .selected=${['first']}\n @change=${(event: Event): void => {\n event.preventDefault();\n }}\n >\n <sp-action-button class=\"first\" value=\"first\">\n First\n </sp-action-button>\n <sp-action-button class=\"second\" value=\"second\">\n Second\n </sp-action-button>\n </sp-action-group>\n `\n );\n const firstElement = el.querySelector('.first') as ActionButton;\n const secondElement = el.querySelector('.second') as ActionButton;\n\n // checking if the first element is selected\n await elementUpdated(el);\n expect(el.selected.length).to.equal(1);\n expect(firstElement.selected, 'first child selected').to.be.true;\n\n secondElement.click();\n await elementUpdated(el);\n\n // state should be exactly the same\n expect(el.selected.length).to.equal(1);\n expect(firstElement.selected, 'first child selected').to.be.true;\n expect(secondElement.selected, 'second child not selected').to.be.false;\n });\n\n it('manages a `size` attribute', async () => {\n const el = await fixture<ActionButton>(\n html`\n <sp-action-group size=\"xl\">\n <sp-action-button>Button</sp-action-button>\n </sp-action-group>\n `\n );\n\n const button = el.querySelector('sp-action-button') as ActionButton;\n\n await elementUpdated(el);\n expect(el.size).to.equal('xl');\n expect(button.size).to.equal('xl');\n expect(el.getAttribute('size')).to.equal('xl');\n expect(button.getAttribute('size')).to.equal('xl');\n el.removeAttribute('size');\n await elementUpdated(el);\n expect(el.size).to.equal('m');\n expect(el.hasAttribute('size')).to.be.false;\n expect(button.size).to.equal('m');\n expect(button.getAttribute('size')).to.equal('m');\n });\n\n it('does not apply a default `size` attribute', async () => {\n const el = await fixture<ActionButton>(\n html`\n <sp-action-group>\n <sp-action-button>Button</sp-action-button>\n </sp-action-group>\n `\n );\n\n const button = el.querySelector('sp-action-button') as ActionButton;\n\n await elementUpdated(el);\n expect(el.size).to.equal('m');\n expect(button.size).to.equal('m');\n expect(el.hasAttribute('size')).to.be.false;\n expect(button.hasAttribute('size')).to.be.false;\n });\n\n it('will accept selected as a JSON string', async () => {\n const el = await fixture<ActionGroup>(\n html`\n <sp-action-group\n label=\"Selects Single Group\"\n selects=\"single\"\n selected='[\"first\"]'\n >\n <sp-action-button class=\"first\" value=\"first\">\n First\n </sp-action-button>\n <sp-action-button class=\"second\" value=\"second\">\n Second\n </sp-action-button>\n </sp-action-group>\n `\n );\n // checking if the first element is selected\n await elementUpdated(el);\n const firstElement = el.querySelector('.first') as ActionButton;\n const secondElement = el.querySelector('.second') as ActionButton;\n\n expect(el.selected.length).to.equal(1);\n expect(firstElement.selected, 'first child selected').to.be.true;\n expect(secondElement.selected, 'second child selected').to.be.false;\n });\n\n it('accepts role attribute override', async () => {\n const el = await fixture<ActionGroup>(\n html`\n <sp-action-group role=\"group\">\n <sp-action-button>Button</sp-action-button>\n </sp-action-group>\n `\n );\n\n // with a role of group, the role should not be overridden\n await elementUpdated(el);\n expect(el.getAttribute('role')).to.equal('group');\n\n // setting selects to single should override role to radiogroup\n el.setAttribute('selects', 'single');\n await elementUpdated(el);\n expect(el.getAttribute('role')).to.equal('radiogroup');\n\n // setting selects to multiple should override role to toolbar\n el.setAttribute('selects', 'multiple');\n await elementUpdated(el);\n expect(el.getAttribute('role')).to.equal('toolbar');\n\n // by default, role should be toolbar\n el.removeAttribute('role');\n el.removeAttribute('selects');\n await elementUpdated(el);\n expect(el.getAttribute('role')).to.equal('toolbar');\n });\n\n const acceptKeyboardInput = async (el: ActionGroup): Promise<void> => {\n const thirdElement = el.querySelector('.third') as ActionButton;\n\n await elementUpdated(el);\n expect(el.selected.length).to.equal(1);\n expect(el.selected[0]).to.equal('Second');\n\n thirdElement.focus();\n thirdElement.click();\n\n await elementUpdated(el);\n\n expect(thirdElement.selected, 'third child selected').to.be.true;\n expect(el.selected.length).to.equal(1);\n expect(el.selected[0]).to.equal('Third');\n\n el.dispatchEvent(arrowRightEvent());\n await sendKeys({ press: 'Enter' });\n\n await elementUpdated(el);\n\n expect(el.selected.length).to.equal(1);\n expect(el.selected[0]).to.equal('First');\n\n el.dispatchEvent(arrowLeftEvent());\n el.dispatchEvent(arrowUpEvent());\n await sendKeys({ press: 'Enter' });\n\n expect(el.selected.length).to.equal(1);\n expect(el.selected[0]).to.equal('Second');\n\n el.dispatchEvent(endEvent());\n await sendKeys({ press: 'Enter' });\n\n expect(el.selected.length).to.equal(1);\n expect(el.selected[0]).to.equal('Third');\n\n await sendKeys({ press: 'Enter' });\n\n el.dispatchEvent(homeEvent());\n await sendKeys({ press: 'Enter' });\n\n expect(el.selected.length).to.equal(1);\n expect(el.selected[0]).to.equal('First');\n\n el.dispatchEvent(arrowDownEvent());\n await sendKeys({ press: 'Enter' });\n\n expect(el.selected.length).to.equal(1);\n expect(el.selected[0]).to.equal('Second');\n };\n it('accepts keybord input', async () => {\n const el = await fixture<ActionGroup>(\n html`\n <sp-action-group label=\"Selects Single Group\" selects=\"single\">\n <sp-action-button>First</sp-action-button>\n <sp-action-button selected>Second</sp-action-button>\n <sp-action-button class=\"third\">Third</sp-action-button>\n </sp-action-group>\n `\n );\n await acceptKeyboardInput(el);\n });\n it('accepts keybord input with tooltip', async () => {\n const el = await fixture<ActionGroup>(\n html`\n <sp-action-group label=\"Selects Single Group\" selects=\"single\">\n <overlay-trigger>\n <sp-action-button slot=\"trigger\">\n First\n </sp-action-button>\n <sp-tooltip slot=\"hover-content\">\n Definitely the first one.\n </sp-tooltip>\n </overlay-trigger>\n <overlay-trigger>\n <sp-action-button slot=\"trigger\" selected>\n Second\n </sp-action-button>\n <sp-tooltip slot=\"hover-content\">\n Not the first, not the last.\n </sp-tooltip>\n </overlay-trigger>\n <overlay-trigger>\n <sp-action-button slot=\"trigger\" class=\"third\">\n Third\n </sp-action-button>\n <sp-tooltip slot=\"hover-content\">Select me.</sp-tooltip>\n </overlay-trigger>\n </sp-action-group>\n `\n );\n await acceptKeyboardInput(el);\n });\n it('accepts keybord input when [dir=\"ltr\"]', async () => {\n const el = await fixture<ActionGroup>(\n html`\n <sp-action-group\n label=\"Selects Single Group\"\n selects=\"single\"\n dir=\"ltr\"\n >\n <sp-action-button>First</sp-action-button>\n <sp-action-button disabled>Second</sp-action-button>\n <sp-action-button class=\"third\">Third</sp-action-button>\n </sp-action-group>\n `\n );\n const thirdElement = el.querySelector('.third') as ActionButton;\n\n await elementUpdated(el);\n expect(el.selected.length).to.equal(0);\n\n thirdElement.focus();\n thirdElement.click();\n\n await elementUpdated(el);\n\n expect(thirdElement.selected, 'third child selected').to.be.true;\n expect(el.selected.length).to.equal(1);\n expect(el.selected[0]).to.equal('Third');\n\n el.dispatchEvent(arrowRightEvent());\n await sendKeys({ press: 'Enter' });\n\n await elementUpdated(el);\n\n expect(el.selected.length).to.equal(1);\n expect(el.selected[0]).to.equal('First');\n\n el.dispatchEvent(arrowUpEvent());\n await sendKeys({ press: 'Enter' });\n\n expect(el.selected.length).to.equal(1);\n expect(el.selected[0]).to.equal('Third');\n });\n it('processes `selects` correctly when mutations occur (because Overlays/Tooltips)', async () => {\n const test = await fixture<SpectrumElement>(controlled());\n const actionButtons = [\n ...test.shadowRoot.querySelectorAll('sp-action-button'),\n ] as ActionButton[];\n\n expect(actionButtons[0].selected).to.be.true;\n expect(actionButtons[1].selected).to.be.false;\n expect(actionButtons[2].selected).to.be.false;\n\n const changeSpy = spy();\n test.addEventListener('change', () => changeSpy());\n const rect = actionButtons[1].getBoundingClientRect();\n sendMouse({\n steps: [\n {\n position: [\n rect.left + rect.width / 2,\n rect.top + rect.height / 2,\n ],\n type: 'click',\n },\n ],\n });\n\n await aTimeout(500);\n\n expect(actionButtons[0].selected).to.be.false;\n expect(actionButtons[1].selected).to.be.true;\n expect(actionButtons[2].selected).to.be.false;\n });\n});\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|