2021-03-24 14:21:21 +00:00
|
|
|
import { LitElement, html, unsafeCSS } from 'lit';
|
|
|
|
import { customElement, property } from 'lit/decorators';
|
2021-02-26 14:09:13 +00:00
|
|
|
import styles from 'sass:./button-group.scss';
|
2020-08-06 13:07:24 +00:00
|
|
|
|
|
|
|
/**
|
|
|
|
* @since 2.0
|
|
|
|
* @status stable
|
|
|
|
*
|
|
|
|
* @slot - One or more `<sl-button>` elements to display in the button group.
|
|
|
|
*
|
|
|
|
* @part base - The component's base wrapper.
|
|
|
|
*/
|
2021-03-18 13:04:23 +00:00
|
|
|
@customElement('sl-button-group')
|
2021-03-09 00:14:32 +00:00
|
|
|
export default class SlButtonGroup extends LitElement {
|
2021-03-06 17:01:39 +00:00
|
|
|
static styles = unsafeCSS(styles);
|
2020-08-06 13:07:24 +00:00
|
|
|
|
2020-09-04 21:11:25 +00:00
|
|
|
/** A label to use for the button group's `aria-label` attribute. */
|
2021-04-01 11:50:27 +00:00
|
|
|
@property() label = '';
|
2020-08-06 13:07:24 +00:00
|
|
|
|
|
|
|
handleFocus(event: CustomEvent) {
|
|
|
|
const button = event.target as HTMLElement;
|
|
|
|
button.classList.add('sl-focus');
|
|
|
|
}
|
|
|
|
|
|
|
|
handleBlur(event: CustomEvent) {
|
|
|
|
const button = event.target as HTMLElement;
|
|
|
|
button.classList.remove('sl-focus');
|
|
|
|
}
|
|
|
|
|
|
|
|
render() {
|
2021-02-26 14:09:13 +00:00
|
|
|
return html`
|
|
|
|
<div
|
|
|
|
part="base"
|
|
|
|
class="button-group"
|
2021-04-01 11:50:27 +00:00
|
|
|
role="group"
|
2021-02-26 14:09:13 +00:00
|
|
|
aria-label=${this.label}
|
2021-03-06 17:01:39 +00:00
|
|
|
@focusout=${this.handleBlur}
|
|
|
|
@focusin=${this.handleFocus}
|
2021-02-26 14:09:13 +00:00
|
|
|
>
|
2021-03-06 17:01:39 +00:00
|
|
|
<slot></slot>
|
2020-08-06 13:07:24 +00:00
|
|
|
</div>
|
2021-02-26 14:09:13 +00:00
|
|
|
`;
|
2020-08-06 13:07:24 +00:00
|
|
|
}
|
|
|
|
}
|
2021-03-12 14:07:38 +00:00
|
|
|
|
2021-03-12 14:09:08 +00:00
|
|
|
declare global {
|
|
|
|
interface HTMLElementTagNameMap {
|
|
|
|
'sl-button-group': SlButtonGroup;
|
|
|
|
}
|
|
|
|
}
|