2023-01-13 20:43:55 +00:00
|
|
|
import '../icon-button/icon-button';
|
2021-09-29 12:40:26 +00:00
|
|
|
import { classMap } from 'lit/directives/class-map.js';
|
2023-01-13 20:43:55 +00:00
|
|
|
import { customElement, property, query } from 'lit/decorators.js';
|
|
|
|
import { html } from 'lit';
|
2022-03-24 12:01:09 +00:00
|
|
|
import { LocalizeController } from '../../utilities/localize';
|
2023-01-13 20:43:55 +00:00
|
|
|
import { watch } from '../../internal/watch';
|
|
|
|
import ShoelaceElement from '../../internal/shoelace-element';
|
2021-07-10 00:45:44 +00:00
|
|
|
import styles from './tab.styles';
|
2022-07-19 12:27:39 +00:00
|
|
|
import type { CSSResultGroup } from 'lit';
|
2021-02-26 14:09:13 +00:00
|
|
|
|
2022-12-06 16:48:57 +00:00
|
|
|
let id = 0;
|
|
|
|
|
2021-02-26 14:09:13 +00:00
|
|
|
/**
|
2022-10-21 13:56:35 +00:00
|
|
|
* @summary Tabs are used inside [tab groups](/components/tab-group) to represent and activate [tab panels](/components/tab-panel).
|
2023-01-12 15:26:25 +00:00
|
|
|
* @documentation https://shoelace.style/components/tab
|
2021-02-26 14:09:13 +00:00
|
|
|
* @status stable
|
2023-01-12 15:26:25 +00:00
|
|
|
* @since 2.0
|
2021-02-26 14:09:13 +00:00
|
|
|
*
|
|
|
|
* @dependency sl-icon-button
|
|
|
|
*
|
2021-06-25 20:25:46 +00:00
|
|
|
* @slot - The tab's label.
|
2021-02-26 14:09:13 +00:00
|
|
|
*
|
2021-06-25 20:25:46 +00:00
|
|
|
* @event sl-close - Emitted when the tab is closable and the close button is activated.
|
2021-05-17 22:04:28 +00:00
|
|
|
*
|
2022-12-06 16:18:14 +00:00
|
|
|
* @csspart base - The component's base wrapper.
|
|
|
|
* @csspart close-button - The close button, an `<sl-icon-button>`.
|
|
|
|
* @csspart close-button__base - The close button's exported `base` part.
|
2021-02-26 14:09:13 +00:00
|
|
|
*/
|
2021-03-18 13:04:23 +00:00
|
|
|
@customElement('sl-tab')
|
2022-08-17 15:37:37 +00:00
|
|
|
export default class SlTab extends ShoelaceElement {
|
2022-07-19 12:27:39 +00:00
|
|
|
static styles: CSSResultGroup = styles;
|
2022-01-16 05:47:14 +00:00
|
|
|
private readonly localize = new LocalizeController(this);
|
2021-03-06 17:01:39 +00:00
|
|
|
|
2022-12-06 16:48:57 +00:00
|
|
|
private readonly attrId = ++id;
|
2022-01-16 05:47:14 +00:00
|
|
|
private readonly componentId = `sl-tab-${this.attrId}`;
|
2021-02-26 14:09:13 +00:00
|
|
|
|
2023-01-03 20:04:07 +00:00
|
|
|
@query('.tab') tab: HTMLElement;
|
|
|
|
|
2022-12-06 16:18:14 +00:00
|
|
|
/** The name of the tab panel this tab is associated with. The panel must be located in the same tab group. */
|
2021-11-04 22:12:47 +00:00
|
|
|
@property({ reflect: true }) panel = '';
|
2021-02-26 14:09:13 +00:00
|
|
|
|
|
|
|
/** Draws the tab in an active state. */
|
2021-07-01 00:04:46 +00:00
|
|
|
@property({ type: Boolean, reflect: true }) active = false;
|
2021-02-26 14:09:13 +00:00
|
|
|
|
2022-12-06 16:18:14 +00:00
|
|
|
/** Makes the tab closable and shows a close button. */
|
2021-07-01 00:04:46 +00:00
|
|
|
@property({ type: Boolean }) closable = false;
|
2021-02-26 14:09:13 +00:00
|
|
|
|
2022-12-06 16:18:14 +00:00
|
|
|
/** Disables the tab and prevents selection. */
|
2021-07-01 00:04:46 +00:00
|
|
|
@property({ type: Boolean, reflect: true }) disabled = false;
|
2021-03-06 17:01:39 +00:00
|
|
|
|
2022-07-20 19:29:19 +00:00
|
|
|
connectedCallback() {
|
|
|
|
super.connectedCallback();
|
|
|
|
this.setAttribute('role', 'tab');
|
|
|
|
}
|
|
|
|
|
2023-01-03 20:04:07 +00:00
|
|
|
private handleCloseClick() {
|
2022-09-16 20:21:40 +00:00
|
|
|
this.emit('sl-close');
|
2021-02-26 14:09:13 +00:00
|
|
|
}
|
|
|
|
|
2022-07-20 19:29:19 +00:00
|
|
|
@watch('active')
|
|
|
|
handleActiveChange() {
|
|
|
|
this.setAttribute('aria-selected', this.active ? 'true' : 'false');
|
|
|
|
}
|
|
|
|
|
|
|
|
@watch('disabled')
|
|
|
|
handleDisabledChange() {
|
|
|
|
this.setAttribute('aria-disabled', this.disabled ? 'true' : 'false');
|
|
|
|
}
|
|
|
|
|
2023-01-03 20:04:07 +00:00
|
|
|
/** Sets focus to the tab. */
|
|
|
|
focus(options?: FocusOptions) {
|
|
|
|
this.tab.focus(options);
|
|
|
|
}
|
|
|
|
|
|
|
|
/** Removes focus from the tab. */
|
|
|
|
blur() {
|
|
|
|
this.tab.blur();
|
|
|
|
}
|
|
|
|
|
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
|
2022-01-16 05:47:14 +00:00
|
|
|
this.id = this.id.length > 0 ? this.id : this.componentId;
|
2021-02-26 14:09:13 +00:00
|
|
|
|
|
|
|
return html`
|
|
|
|
<div
|
|
|
|
part="base"
|
|
|
|
class=${classMap({
|
|
|
|
tab: true,
|
|
|
|
'tab--active': this.active,
|
|
|
|
'tab--closable': this.closable,
|
|
|
|
'tab--disabled': this.disabled
|
|
|
|
})}
|
2022-08-25 13:42:55 +00:00
|
|
|
tabindex=${this.disabled ? '-1' : '0'}
|
2021-02-26 14:09:13 +00:00
|
|
|
>
|
2021-03-06 17:01:39 +00:00
|
|
|
<slot></slot>
|
2021-02-26 14:09:13 +00:00
|
|
|
${this.closable
|
|
|
|
? html`
|
|
|
|
<sl-icon-button
|
2022-03-09 20:54:18 +00:00
|
|
|
part="close-button"
|
|
|
|
exportparts="base:close-button__base"
|
2022-11-29 16:03:58 +00:00
|
|
|
name="x-lg"
|
2021-04-20 13:37:19 +00:00
|
|
|
library="system"
|
2021-12-06 15:57:54 +00:00
|
|
|
label=${this.localize.term('close')}
|
2021-02-26 14:09:13 +00:00
|
|
|
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"
|
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;
|
|
|
|
}
|
|
|
|
}
|