2021-07-10 00:45:44 +00:00
|
|
|
import { LitElement, html } from 'lit';
|
2021-05-27 21:00:43 +00:00
|
|
|
import { customElement, property, query } from 'lit/decorators.js';
|
2021-03-06 17:01:39 +00:00
|
|
|
import { classMap } from 'lit-html/directives/class-map';
|
|
|
|
import { ifDefined } from 'lit-html/directives/if-defined';
|
2021-02-26 14:09:13 +00:00
|
|
|
import { focusVisible } from '../../internal/focus-visible';
|
2021-07-10 00:45:44 +00:00
|
|
|
import styles from './icon-button.styles';
|
2021-02-26 14:09:13 +00:00
|
|
|
|
2021-07-12 14:36:06 +00:00
|
|
|
import '../icon/icon';
|
|
|
|
|
2021-02-26 14:09:13 +00:00
|
|
|
/**
|
|
|
|
* @since 2.0
|
|
|
|
* @status stable
|
|
|
|
*
|
|
|
|
* @dependency sl-icon
|
|
|
|
*
|
2021-06-25 20:25:46 +00:00
|
|
|
* @csspart base - The component's base wrapper.
|
2021-02-26 14:09:13 +00:00
|
|
|
*/
|
2021-03-18 13:04:23 +00:00
|
|
|
@customElement('sl-icon-button')
|
2021-03-09 00:14:32 +00:00
|
|
|
export default class SlIconButton extends LitElement {
|
2021-07-10 00:45:44 +00:00
|
|
|
static styles = styles;
|
2021-02-26 14:09:13 +00:00
|
|
|
|
2021-03-06 17:01:39 +00:00
|
|
|
@query('button') button: HTMLButtonElement;
|
2021-02-26 14:09:13 +00:00
|
|
|
|
|
|
|
/** The name of the icon to draw. */
|
2021-04-02 11:47:25 +00:00
|
|
|
@property() name: string;
|
2021-02-26 14:09:13 +00:00
|
|
|
|
|
|
|
/** The name of a registered custom icon library. */
|
2021-04-02 11:47:25 +00:00
|
|
|
@property() library: string;
|
2021-02-26 14:09:13 +00:00
|
|
|
|
|
|
|
/** An external URL of an SVG file. */
|
2021-04-02 11:47:25 +00:00
|
|
|
@property() src: string;
|
2021-02-26 14:09:13 +00:00
|
|
|
|
|
|
|
/**
|
|
|
|
* A description that gets read by screen readers and other assistive devices. For optimal accessibility, you should
|
|
|
|
* always include a label that describes what the icon button does.
|
|
|
|
*/
|
2021-07-01 00:04:46 +00:00
|
|
|
@property() label = '';
|
2021-02-26 14:09:13 +00:00
|
|
|
|
|
|
|
/** Disables the button. */
|
2021-07-01 00:04:46 +00:00
|
|
|
@property({ type: Boolean, reflect: true }) disabled = false;
|
2021-02-26 14:09:13 +00:00
|
|
|
|
2021-06-02 12:47:55 +00:00
|
|
|
connectedCallback() {
|
|
|
|
super.connectedCallback();
|
|
|
|
this.updateComplete.then(() => focusVisible.observe(this.button));
|
2021-02-26 14:09:13 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
disconnectedCallback() {
|
2021-03-06 17:01:39 +00:00
|
|
|
super.disconnectedCallback();
|
2021-02-26 14:09:13 +00:00
|
|
|
focusVisible.unobserve(this.button);
|
|
|
|
}
|
|
|
|
|
|
|
|
render() {
|
|
|
|
return html`
|
|
|
|
<button
|
|
|
|
part="base"
|
|
|
|
class=${classMap({
|
|
|
|
'icon-button': true,
|
|
|
|
'icon-button--disabled': this.disabled
|
|
|
|
})}
|
2021-03-06 17:01:39 +00:00
|
|
|
?disabled=${this.disabled}
|
2021-02-26 14:09:13 +00:00
|
|
|
type="button"
|
|
|
|
aria-label=${this.label}
|
|
|
|
>
|
2021-03-06 17:01:39 +00:00
|
|
|
<sl-icon
|
|
|
|
name=${ifDefined(this.name)}
|
|
|
|
library=${ifDefined(this.library)}
|
|
|
|
src=${ifDefined(this.src)}
|
|
|
|
aria-hidden="true"
|
|
|
|
></sl-icon>
|
2021-02-26 14:09:13 +00:00
|
|
|
</button>
|
|
|
|
`;
|
|
|
|
}
|
|
|
|
}
|
2021-03-12 14:07:38 +00:00
|
|
|
|
2021-03-12 14:09:08 +00:00
|
|
|
declare global {
|
|
|
|
interface HTMLElementTagNameMap {
|
|
|
|
'sl-icon-button': SlIconButton;
|
|
|
|
}
|
|
|
|
}
|