@spectrum-web-components/action-group
Version:
`sp-action-group` delivers a set of action buttons in horizontal or vertical orientation while ensuring the appropriate spacing between those buttons. The `compact` attribute merges these buttons so that they are visually joined to clarify their relations
461 lines (460 loc) • 13 kB
JSON
{
"schemaVersion": "1.0.0",
"readme": "",
"modules": [
{
"kind": "javascript-module",
"path": "sp-action-group.js",
"declarations": [],
"exports": [
{
"kind": "custom-element-definition",
"name": "sp-action-group",
"declaration": {
"name": "ActionGroup",
"module": "/src/ActionGroup.js"
}
}
]
},
{
"kind": "javascript-module",
"path": "src/ActionGroup.js",
"declarations": [
{
"kind": "class",
"description": "",
"name": "ActionGroup",
"slots": [
{
"description": "the sp-action-button elements that make up the group",
"name": ""
}
],
"members": [
{
"kind": "field",
"name": "shadowRootOptions",
"type": {
"text": "object"
},
"static": true,
"default": "{\n ...SpectrumElement.shadowRootOptions,\n delegatesFocus: true,\n }"
},
{
"kind": "field",
"name": "buttons",
"privacy": "public",
"type": {
"text": "ActionButton[]"
}
},
{
"kind": "field",
"name": "_buttons",
"type": {
"text": "ActionButton[]"
},
"privacy": "public",
"default": "[]"
},
{
"kind": "field",
"name": "_buttonSelector",
"type": {
"text": "string"
},
"privacy": "protected",
"default": "'sp-action-button, sp-action-menu'"
},
{
"kind": "field",
"name": "rovingTabindexController",
"default": "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 hostDelegatesFocus: true,\n isFocusableElement: (el: ActionButton) => !el.disabled,\n }\n )"
},
{
"kind": "field",
"name": "compact",
"type": {
"text": "boolean"
},
"privacy": "public",
"default": "false",
"attribute": "compact",
"reflects": true
},
{
"kind": "field",
"name": "emphasized",
"type": {
"text": "boolean"
},
"privacy": "public",
"default": "false",
"attribute": "emphasized",
"reflects": true
},
{
"kind": "field",
"name": "justified",
"type": {
"text": "boolean"
},
"privacy": "public",
"default": "false",
"attribute": "justified",
"reflects": true
},
{
"kind": "field",
"name": "label",
"type": {
"text": "string"
},
"privacy": "public",
"default": "''",
"attribute": "label"
},
{
"kind": "field",
"name": "quiet",
"type": {
"text": "boolean"
},
"privacy": "public",
"default": "false",
"attribute": "quiet",
"reflects": true
},
{
"kind": "field",
"name": "selects",
"type": {
"text": "undefined | 'single' | 'multiple'"
},
"privacy": "public",
"attribute": "selects"
},
{
"kind": "field",
"name": "staticColor",
"type": {
"text": "'white' | 'black' | undefined"
},
"privacy": "public",
"attribute": "static-color",
"reflects": true
},
{
"kind": "field",
"name": "vertical",
"type": {
"text": "boolean"
},
"privacy": "public",
"default": "false",
"attribute": "vertical",
"reflects": true
},
{
"kind": "field",
"name": "_selected",
"type": {
"text": "string[]"
},
"privacy": "private",
"default": "[]"
},
{
"kind": "field",
"name": "selected",
"type": {
"text": "string[]"
},
"attribute": "selected"
},
{
"kind": "field",
"name": "slotElement",
"type": {
"text": "HTMLSlotElement"
}
},
{
"kind": "method",
"name": "dispatchChange",
"privacy": "private",
"return": {
"type": {
"text": "void"
}
},
"parameters": [
{
"name": "old",
"type": {
"text": "string[]"
}
}
]
},
{
"kind": "method",
"name": "setSelected",
"privacy": "private",
"return": {
"type": {
"text": "void"
}
},
"parameters": [
{
"name": "selected",
"type": {
"text": "string[]"
}
},
{
"name": "announce",
"optional": true,
"type": {
"text": "boolean"
}
}
]
},
{
"kind": "method",
"name": "focus",
"privacy": "public",
"return": {
"type": {
"text": "void"
}
},
"parameters": [
{
"name": "options",
"optional": true,
"type": {
"text": "FocusOptions"
}
}
]
},
{
"kind": "method",
"name": "deselectSelectedButtons",
"privacy": "private",
"return": {
"type": {
"text": "void"
}
}
},
{
"kind": "method",
"name": "handleActionButtonChange",
"privacy": "private",
"return": {
"type": {
"text": "void"
}
},
"parameters": [
{
"name": "event",
"type": {
"text": "Event"
}
}
]
},
{
"kind": "method",
"name": "handleClick",
"privacy": "private",
"return": {
"type": {
"text": "void"
}
},
"parameters": [
{
"name": "event",
"type": {
"text": "Event"
}
}
]
},
{
"kind": "method",
"name": "applySelects",
"privacy": "private",
"return": {
"type": {
"text": "Promise<void>"
}
}
},
{
"kind": "method",
"name": "manageSelects",
"privacy": "private",
"return": {
"type": {
"text": "Promise<void>"
}
},
"parameters": [
{
"name": "applied",
"optional": true,
"type": {
"text": "boolean"
}
}
]
},
{
"kind": "method",
"name": "manageChildren",
"privacy": "private",
"return": {
"type": {
"text": "void"
}
},
"parameters": [
{
"name": "changes",
"optional": true,
"type": {
"text": "PropertyValues"
}
}
]
},
{
"kind": "field",
"name": "hasManaged",
"type": {
"text": "boolean"
},
"privacy": "private",
"default": "false"
},
{
"kind": "field",
"name": "manageButtons",
"privacy": "private"
}
],
"events": [
{
"name": "change",
"type": {
"text": "Event"
},
"description": "Announces that selection state has been changed by user"
}
],
"attributes": [
{
"name": "compact",
"type": {
"text": "boolean"
},
"default": "false",
"fieldName": "compact"
},
{
"name": "emphasized",
"type": {
"text": "boolean"
},
"default": "false",
"fieldName": "emphasized"
},
{
"name": "justified",
"type": {
"text": "boolean"
},
"default": "false",
"fieldName": "justified"
},
{
"name": "label",
"type": {
"text": "string"
},
"default": "''",
"fieldName": "label"
},
{
"name": "quiet",
"type": {
"text": "boolean"
},
"default": "false",
"fieldName": "quiet"
},
{
"name": "selects",
"type": {
"text": "undefined | 'single' | 'multiple'"
},
"fieldName": "selects"
},
{
"name": "static-color",
"type": {
"text": "'white' | 'black' | undefined"
},
"fieldName": "staticColor"
},
{
"name": "vertical",
"type": {
"text": "boolean"
},
"default": "false",
"fieldName": "vertical"
},
{
"name": "selected",
"type": {
"text": "string[]"
},
"fieldName": "selected"
}
],
"mixins": [
{
"name": "SizedMixin",
"package": "@spectrum-web-components/base"
}
],
"superclass": {
"name": "SpectrumElement",
"package": "@spectrum-web-components/base"
},
"tagName": "sp-action-group",
"customElement": true
}
],
"exports": [
{
"kind": "js",
"name": "ActionGroup",
"declaration": {
"name": "ActionGroup",
"module": "src/ActionGroup.js"
}
}
]
}
]
}