https://www.alliedelectronics.com/mm5/json.mvc?Store_Code=Allied04…=mmx-messages&T=df6840fb

1/**
2 * MMX / MESSAGE
3 */
4
5class MMX_Message extends MMX_Element {
6
7	static get props() {
8		return {
9			align: {
10				options: ['left', 'center', 'right'],
11				default: 'center'
12			},
13			display: {
14				options: ['inline', 'inline-block', 'block'],
15				default: 'block'
16			},
17			size: {
18				options: ['s', 'm', 'l'],
19				default: 'm'
20			},
21			style: {
22				options: ['info', 'warning', 'error', 'success'],
23				default: ''
24			},
25			variant: {
26				options: ['flag', 'minimal', 'pill'],
27				default: ''
28			},
29			dom: {
30				options: ['light', 'shadow'],
31				default: 'shadow'
32			},
33			'auto-remove': {
34				allowAny: true,
35				isNumeric: true,
36				default: 0
37			}
38		};
39	}
40
41	styleResourceCodes = ['mmx-base', 'mmx-text', 'mmx-messages'];
42	renderUniquely = true;
43
44	constructor() {
45		super();
46		this.makeComponent();
47	}
48
49	render() {
50		return /*html*/`
51			<div
52				part="wrapper"
53				class="
54					mmx-message
55					mmx-message--align-${this.getPropValue('align')}
56					mmx-message--display-${this.getPropValue('display')}
57					mmx-message--size-${this.getPropValue('size')}
58					mmx-message--style-${this.getPropValue('style')}
59					mmx-message--variant-${this.getPropValue('variant')}
60				"
61			>
62				${this.renderContent()}
63			</div>
64		`;
65	}
66
67	renderContent() {
68		if (this.getPropValue('dom') === 'shadow') {
69			return this.innerHTML;
70		}
71
72		return '<slot></slot>';
73	}
74
75	afterRender(){
76		this.#initializeAutoRemove();
77	}
78
79	#removal = 0;
80
81	#initializeAutoRemove() {
82		const duration = MMX.coerceNumber(this.getPropValue('auto-remove'), 0);
83
84		if (!(duration > 0)) {
85			return;
86		}
87
88		clearTimeout(this.#removal);
89
90		this.#removal = setTimeout(() => {
91			this.#removeSelf();
92		}, duration);
93	}
94
95	#removeSelf() {
96		this.remove();
97	}
98}
99
100if (!customElements.get('mmx-message')){
101	customElements.define('mmx-message', MMX_Message);
102}