-
Notifications
You must be signed in to change notification settings - Fork 2
/
snackbar.ts
92 lines (82 loc) · 2.91 KB
/
snackbar.ts
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
import { html, nothing } from 'lit';
import { property } from 'lit/decorators.js';
import { type Ref, createRef, ref } from 'lit/directives/ref.js';
import { addAnimationController } from '../../animations/player.js';
import { themes } from '../../theming/theming-decorator.js';
import IgcButtonComponent from '../button/button.js';
import { registerComponent } from '../common/definitions/register.js';
import { IgcBaseAlertLikeComponent } from '../common/mixins/alert.js';
import type { AbstractConstructor } from '../common/mixins/constructor.js';
import { EventEmitterMixin } from '../common/mixins/event-emitter.js';
import { styles as shared } from './themes/shared/snackbar.common.css.js';
import { styles } from './themes/snackbar.base.css.js';
import { all } from './themes/themes.js';
export interface IgcSnackbarEventMap {
igcAction: CustomEvent<void>;
}
/**
* A snackbar component is used to provide feedback about an operation
* by showing a brief message at the bottom of the screen.
*
* @element igc-snackbar
*
* @slot - Default slot to render the snackbar content.
* @slot action - Renders the action part of the snackbar. Usually an interactive element (button)
*
* @fires igcAction - Emitted when the snackbar action button is clicked.
*
* @csspart base - The base wrapper of the snackbar component.
* @csspart message - The snackbar message.
* @csspart action - The default snackbar action button.
* @csspart action-container - The area holding the actions.
*/
@themes(all)
export default class IgcSnackbarComponent extends EventEmitterMixin<
IgcSnackbarEventMap,
AbstractConstructor<IgcBaseAlertLikeComponent>
>(IgcBaseAlertLikeComponent) {
public static readonly tagName = 'igc-snackbar';
public static styles = [styles, shared];
/* blazorSuppress */
public static register() {
registerComponent(IgcSnackbarComponent, IgcButtonComponent);
}
protected contentRef: Ref<HTMLElement> = createRef();
protected override _animationPlayer: ReturnType<
typeof addAnimationController
> = addAnimationController(this, this.contentRef);
/**
* The snackbar action button.
* @attr action-text
*/
@property({ attribute: 'action-text' })
public actionText!: string;
private handleClick() {
this.emitEvent('igcAction');
}
protected override render() {
return html`
<div ${ref(this.contentRef)} part="base" .inert=${!this.open}>
<span part="message">
<slot></slot>
</span>
<slot name="action" part="action-container" @click=${this.handleClick}>
${this.actionText
? html`<igc-button
type="button"
part="action"
variant="flat"
size="small"
>${this.actionText}</igc-button
>`
: nothing}
</slot>
</div>
`;
}
}
declare global {
interface HTMLElementTagNameMap {
'igc-snackbar': IgcSnackbarComponent;
}
}