shoelace/src/components/icon-button/icon-button.ts

80 wiersze
2.0 KiB
TypeScript
Czysty Zwykły widok Historia

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:09:08 +00:00
declare global {
interface HTMLElementTagNameMap {
'sl-icon-button': SlIconButton;
}
}