2023-07-24 17:00:07 +00:00
|
|
|
import { property } from 'lit/decorators.js';
|
2023-06-07 20:50:30 +00:00
|
|
|
import { html } from 'lit';
|
2023-06-22 14:56:24 +00:00
|
|
|
import { LocalizeController } from '../../utilities/localize.js';
|
|
|
|
import { watch } from '../../internal/watch.js';
|
2024-02-09 15:20:18 +00:00
|
|
|
import componentStyles from '../../styles/component.styles.js';
|
2023-06-22 14:56:24 +00:00
|
|
|
import ShoelaceElement from '../../internal/shoelace-element.js';
|
|
|
|
import styles from './{{ tagWithoutPrefix tag }}.styles.js';
|
2022-07-19 12:27:39 +00:00
|
|
|
import type { CSSResultGroup } from 'lit';
|
2021-06-18 14:07:17 +00:00
|
|
|
|
|
|
|
/**
|
2022-10-27 13:20:19 +00:00
|
|
|
* @summary Short summary of the component's intended use.
|
2023-01-12 15:26:25 +00:00
|
|
|
* @documentation https://shoelace.style/components/{{ tagWithoutPrefix tag }}
|
2021-06-18 14:07:17 +00:00
|
|
|
* @status experimental
|
2023-01-12 15:26:25 +00:00
|
|
|
* @since 2.0
|
2021-06-18 14:07:17 +00:00
|
|
|
*
|
|
|
|
* @dependency sl-example
|
|
|
|
*
|
2021-06-25 20:25:46 +00:00
|
|
|
* @event sl-event-name - Emitted as an example.
|
2021-06-18 14:07:17 +00:00
|
|
|
*
|
2021-06-25 20:25:46 +00:00
|
|
|
* @slot - The default slot.
|
|
|
|
* @slot example - An example slot.
|
2021-06-24 22:24:54 +00:00
|
|
|
*
|
2022-12-06 16:18:14 +00:00
|
|
|
* @csspart base - The component's base wrapper.
|
2021-06-24 22:24:54 +00:00
|
|
|
*
|
2021-06-25 20:25:46 +00:00
|
|
|
* @cssproperty --example - An example CSS custom property.
|
2021-06-18 14:07:17 +00:00
|
|
|
*/
|
2022-08-17 15:37:37 +00:00
|
|
|
export default class {{ properCase tag }} extends ShoelaceElement {
|
2024-02-09 15:12:47 +00:00
|
|
|
static styles: CSSResultGroup = [componentStyles, styles];
|
2021-06-18 14:07:17 +00:00
|
|
|
|
2022-08-17 15:37:37 +00:00
|
|
|
private readonly localize = new LocalizeController(this);
|
|
|
|
|
2022-11-18 15:45:47 +00:00
|
|
|
/** An example attribute. */
|
|
|
|
@property() attr = 'example';
|
2021-06-18 14:07:17 +00:00
|
|
|
|
2023-06-07 20:53:48 +00:00
|
|
|
@watch('example')
|
|
|
|
handleExampleChange() {
|
|
|
|
// do something
|
2021-06-24 22:24:54 +00:00
|
|
|
}
|
2021-06-18 14:07:17 +00:00
|
|
|
|
|
|
|
render() {
|
|
|
|
return html` <slot></slot> `;
|
|
|
|
}
|
|
|
|
}
|