2021-03-24 14:21:21 +00:00
|
|
|
import { LitElement, html, unsafeCSS } from 'lit';
|
|
|
|
import { customElement, property, query } from 'lit/decorators';
|
2021-03-06 17:01:39 +00:00
|
|
|
import { classMap } from 'lit-html/directives/class-map';
|
2021-03-18 13:04:23 +00:00
|
|
|
import { event, EventEmitter } from '../../internal/decorators';
|
2021-02-26 14:09:13 +00:00
|
|
|
import styles from 'sass:./tab.scss';
|
|
|
|
|
|
|
|
let id = 0;
|
|
|
|
|
|
|
|
/**
|
|
|
|
* @since 2.0
|
|
|
|
* @status stable
|
|
|
|
*
|
|
|
|
* @dependency sl-icon-button
|
|
|
|
*
|
|
|
|
* @slot - The tab's label.
|
|
|
|
*
|
|
|
|
* @part base - The component's base wrapper.
|
|
|
|
* @part close-button - The close button, which is the icon button's base wrapper.
|
|
|
|
*/
|
2021-03-18 13:04:23 +00:00
|
|
|
@customElement('sl-tab')
|
2021-03-09 00:14:32 +00:00
|
|
|
export default class SlTab extends LitElement {
|
2021-03-06 17:01:39 +00:00
|
|
|
static styles = unsafeCSS(styles);
|
|
|
|
|
|
|
|
@query('.tab') tab: HTMLElement;
|
2021-02-26 14:09:13 +00:00
|
|
|
|
|
|
|
private componentId = `tab-${++id}`;
|
|
|
|
|
|
|
|
/** The name of the tab panel the tab will control. The panel must be located in the same tab group. */
|
2021-03-06 17:01:39 +00:00
|
|
|
@property() panel = '';
|
2021-02-26 14:09:13 +00:00
|
|
|
|
|
|
|
/** Draws the tab in an active state. */
|
2021-03-06 17:01:39 +00:00
|
|
|
@property({ type: Boolean, reflect: true }) active = false;
|
2021-02-26 14:09:13 +00:00
|
|
|
|
|
|
|
/** Makes the tab closable and shows a close icon. */
|
2021-03-06 20:34:33 +00:00
|
|
|
@property({ type: Boolean }) closable = false;
|
2021-02-26 14:09:13 +00:00
|
|
|
|
|
|
|
/** Draws the tab in a disabled state. */
|
2021-03-06 17:01:39 +00:00
|
|
|
@property({ type: Boolean, reflect: true }) disabled = false;
|
|
|
|
|
|
|
|
/** Emitted when the tab is closable and the close button is activated. */
|
|
|
|
@event('sl-close') slClose: EventEmitter<void>;
|
2021-02-26 14:09:13 +00:00
|
|
|
|
|
|
|
/** Sets focus to the tab. */
|
2021-03-29 11:16:40 +00:00
|
|
|
focus(options?: FocusOptions) {
|
2021-02-26 14:09:13 +00:00
|
|
|
this.tab.focus(options);
|
|
|
|
}
|
|
|
|
|
|
|
|
/** Removes focus from the tab. */
|
2021-03-29 11:16:40 +00:00
|
|
|
blur() {
|
2021-02-26 14:09:13 +00:00
|
|
|
this.tab.blur();
|
|
|
|
}
|
|
|
|
|
|
|
|
handleCloseClick() {
|
2021-03-06 17:01:39 +00:00
|
|
|
this.slClose.emit();
|
2021-02-26 14:09:13 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
render() {
|
|
|
|
// If the user didn't provide an ID, we'll set one so we can link tabs and tab panels with aria labels
|
|
|
|
this.id = this.id || this.componentId;
|
|
|
|
|
|
|
|
return html`
|
|
|
|
<div
|
|
|
|
part="base"
|
|
|
|
class=${classMap({
|
|
|
|
tab: true,
|
|
|
|
'tab--active': this.active,
|
|
|
|
'tab--closable': this.closable,
|
|
|
|
'tab--disabled': this.disabled
|
|
|
|
})}
|
|
|
|
role="tab"
|
|
|
|
aria-disabled=${this.disabled ? 'true' : 'false'}
|
|
|
|
aria-selected=${this.active ? 'true' : 'false'}
|
|
|
|
tabindex=${this.disabled || !this.active ? '-1' : '0'}
|
|
|
|
>
|
2021-03-06 17:01:39 +00:00
|
|
|
<slot></slot>
|
2021-02-26 14:09:13 +00:00
|
|
|
${this.closable
|
|
|
|
? html`
|
|
|
|
<sl-icon-button
|
|
|
|
name="x"
|
2021-04-20 13:37:19 +00:00
|
|
|
library="system"
|
2021-02-26 14:09:13 +00:00
|
|
|
exportparts="base:close-button"
|
|
|
|
class="tab__close-button"
|
2021-03-06 17:01:39 +00:00
|
|
|
@click=${this.handleCloseClick}
|
2021-02-26 14:09:13 +00:00
|
|
|
tabindex="-1"
|
|
|
|
aria-hidden="true"
|
2021-03-06 17:01:39 +00:00
|
|
|
></sl-icon-button>
|
2021-02-26 14:09:13 +00:00
|
|
|
`
|
|
|
|
: ''}
|
|
|
|
</div>
|
|
|
|
`;
|
|
|
|
}
|
|
|
|
}
|
2021-03-12 14:07:38 +00:00
|
|
|
|
2021-03-12 14:09:08 +00:00
|
|
|
declare global {
|
|
|
|
interface HTMLElementTagNameMap {
|
|
|
|
'sl-tab': SlTab;
|
|
|
|
}
|
|
|
|
}
|