kmaterialize 2.3.3-1.0.18 → 2.3.3-1.0.19
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/components/alert/_alerts.scss +122 -0
- package/components/alert/alert.ts +73 -0
- package/dist/css/materialize.colors.min.css +1 -1
- package/dist/css/materialize.css +136 -1
- package/dist/css/materialize.min.css +2 -2
- package/dist/css/materialize.min.css.map +1 -1
- package/dist/js/materialize.cjs.js +63 -6
- package/dist/js/materialize.d.ts +26 -2
- package/dist/js/materialize.js +63 -6
- package/dist/js/materialize.min.js +2 -2
- package/dist/js/materialize.mjs +63 -7
- package/package.json +1 -1
- package/sass/materialize.scss +1 -0
|
@@ -0,0 +1,122 @@
|
|
|
1
|
+
// Alert banners provide persistent, contextual feedback in a page.
|
|
2
|
+
.alert {
|
|
3
|
+
--alert-container: var(--md-sys-color-surface-variant);
|
|
4
|
+
--alert-on-container: var(--md-sys-color-on-surface-variant);
|
|
5
|
+
--alert-border: var(--md-sys-color-outline-variant);
|
|
6
|
+
|
|
7
|
+
position: relative;
|
|
8
|
+
display: flex;
|
|
9
|
+
align-items: flex-start;
|
|
10
|
+
gap: 0.875rem;
|
|
11
|
+
width: 100%;
|
|
12
|
+
box-sizing: border-box;
|
|
13
|
+
padding: 1rem 1.125rem;
|
|
14
|
+
margin: 0 0 1rem;
|
|
15
|
+
border: 1px solid transparent;
|
|
16
|
+
border-radius: 0.75rem;
|
|
17
|
+
background: var(--alert-container);
|
|
18
|
+
color: var(--alert-on-container);
|
|
19
|
+
line-height: 1.5;
|
|
20
|
+
|
|
21
|
+
.alert-icon {
|
|
22
|
+
flex: 0 0 auto;
|
|
23
|
+
margin-top: 0.125rem;
|
|
24
|
+
font-size: 1.375rem;
|
|
25
|
+
line-height: 1;
|
|
26
|
+
}
|
|
27
|
+
|
|
28
|
+
.alert-content {
|
|
29
|
+
min-width: 0;
|
|
30
|
+
flex: 1 1 auto;
|
|
31
|
+
}
|
|
32
|
+
|
|
33
|
+
.alert-title {
|
|
34
|
+
display: block;
|
|
35
|
+
margin: 0 0 0.25rem;
|
|
36
|
+
font-weight: 600;
|
|
37
|
+
}
|
|
38
|
+
|
|
39
|
+
.alert-message {
|
|
40
|
+
margin: 0;
|
|
41
|
+
}
|
|
42
|
+
|
|
43
|
+
.alert-close {
|
|
44
|
+
display: inline-flex;
|
|
45
|
+
flex: 0 0 auto;
|
|
46
|
+
align-items: center;
|
|
47
|
+
justify-content: center;
|
|
48
|
+
width: 2rem;
|
|
49
|
+
height: 2rem;
|
|
50
|
+
margin: -0.25rem -0.375rem -0.25rem 0;
|
|
51
|
+
padding: 0;
|
|
52
|
+
border: 0;
|
|
53
|
+
border-radius: 50%;
|
|
54
|
+
background: transparent;
|
|
55
|
+
color: inherit;
|
|
56
|
+
cursor: pointer;
|
|
57
|
+
|
|
58
|
+
&:hover,
|
|
59
|
+
&:focus-visible {
|
|
60
|
+
background: color-mix(in srgb, currentColor 12%, transparent);
|
|
61
|
+
}
|
|
62
|
+
|
|
63
|
+
.material-icons {
|
|
64
|
+
font-size: 1.25rem;
|
|
65
|
+
}
|
|
66
|
+
}
|
|
67
|
+
|
|
68
|
+
&.alert-info {
|
|
69
|
+
--alert-container: var(--md-sys-color-secondary-container);
|
|
70
|
+
--alert-on-container: var(--md-sys-color-on-secondary-container);
|
|
71
|
+
--alert-border: var(--md-sys-color-secondary);
|
|
72
|
+
}
|
|
73
|
+
|
|
74
|
+
&.alert-success {
|
|
75
|
+
--alert-container: var(--md-sys-color-tertiary-container);
|
|
76
|
+
--alert-on-container: var(--md-sys-color-on-tertiary-container);
|
|
77
|
+
--alert-border: var(--md-sys-color-tertiary);
|
|
78
|
+
}
|
|
79
|
+
|
|
80
|
+
&.alert-warning {
|
|
81
|
+
--alert-container: var(--md-sys-color-primary-container);
|
|
82
|
+
--alert-on-container: var(--md-sys-color-on-primary-container);
|
|
83
|
+
--alert-border: var(--md-sys-color-primary);
|
|
84
|
+
}
|
|
85
|
+
|
|
86
|
+
&.alert-error {
|
|
87
|
+
--alert-container: var(--md-sys-color-error-container);
|
|
88
|
+
--alert-on-container: var(--md-sys-color-on-error-container);
|
|
89
|
+
--alert-border: var(--md-sys-color-error);
|
|
90
|
+
}
|
|
91
|
+
|
|
92
|
+
&.alert-outlined {
|
|
93
|
+
border-color: var(--alert-border);
|
|
94
|
+
background: transparent;
|
|
95
|
+
}
|
|
96
|
+
|
|
97
|
+
&.alert-filled {
|
|
98
|
+
border-color: var(--alert-border);
|
|
99
|
+
background: var(--alert-border);
|
|
100
|
+
color: var(--md-sys-color-on-primary);
|
|
101
|
+
}
|
|
102
|
+
|
|
103
|
+
&.alert-compact {
|
|
104
|
+
align-items: center;
|
|
105
|
+
padding-block: 0.625rem;
|
|
106
|
+
}
|
|
107
|
+
|
|
108
|
+
&[hidden] {
|
|
109
|
+
display: none;
|
|
110
|
+
}
|
|
111
|
+
}
|
|
112
|
+
|
|
113
|
+
@media (prefers-reduced-motion: no-preference) {
|
|
114
|
+
.alert {
|
|
115
|
+
transition: opacity 180ms ease, transform 180ms ease;
|
|
116
|
+
|
|
117
|
+
&.alert-dismissing {
|
|
118
|
+
opacity: 0;
|
|
119
|
+
transform: translateY(-0.25rem);
|
|
120
|
+
}
|
|
121
|
+
}
|
|
122
|
+
}
|
|
@@ -0,0 +1,73 @@
|
|
|
1
|
+
import { BaseOptions, Component, InitElements, MElement } from '../../src/component';
|
|
2
|
+
|
|
3
|
+
export interface AlertOptions extends BaseOptions {
|
|
4
|
+
/** Automatically wire a `.alert-close` button when present. */
|
|
5
|
+
dismissible: boolean;
|
|
6
|
+
/** Called after the alert is dismissed. */
|
|
7
|
+
onDismiss?: (alert: Alert) => void;
|
|
8
|
+
}
|
|
9
|
+
|
|
10
|
+
const _defaults: AlertOptions = {
|
|
11
|
+
dismissible: true
|
|
12
|
+
};
|
|
13
|
+
|
|
14
|
+
/** A persistent, contextual feedback banner. */
|
|
15
|
+
export class Alert extends Component<AlertOptions> {
|
|
16
|
+
private _closeButton: HTMLElement | null = null;
|
|
17
|
+
private _onClose = () => this.dismiss();
|
|
18
|
+
|
|
19
|
+
constructor(el: HTMLElement, options: Partial<AlertOptions>) {
|
|
20
|
+
super(el, options, Alert);
|
|
21
|
+
this.options = { ...Alert.defaults, ...options };
|
|
22
|
+
this.el['M_Alert'] = this;
|
|
23
|
+
this._bindCloseButton();
|
|
24
|
+
}
|
|
25
|
+
|
|
26
|
+
static get defaults(): AlertOptions {
|
|
27
|
+
return _defaults;
|
|
28
|
+
}
|
|
29
|
+
|
|
30
|
+
static init(el: HTMLElement, options?: Partial<AlertOptions>): Alert;
|
|
31
|
+
static init(els: InitElements<MElement>, options?: Partial<AlertOptions>): Alert[];
|
|
32
|
+
static init(
|
|
33
|
+
els: HTMLElement | InitElements<MElement>,
|
|
34
|
+
options: Partial<AlertOptions> = {}
|
|
35
|
+
): Alert | Alert[] {
|
|
36
|
+
return super.init(els, options, Alert);
|
|
37
|
+
}
|
|
38
|
+
|
|
39
|
+
static getInstance(el: HTMLElement): Alert {
|
|
40
|
+
return el['M_Alert'];
|
|
41
|
+
}
|
|
42
|
+
|
|
43
|
+
private _bindCloseButton() {
|
|
44
|
+
this._closeButton = this.el.querySelector<HTMLElement>('.alert-close');
|
|
45
|
+
if (this.options.dismissible && this._closeButton) {
|
|
46
|
+
this._closeButton.addEventListener('click', this._onClose);
|
|
47
|
+
}
|
|
48
|
+
}
|
|
49
|
+
|
|
50
|
+
/** Hide and remove the alert from the document. */
|
|
51
|
+
dismiss() {
|
|
52
|
+
if (!this.el.isConnected) return;
|
|
53
|
+
this.el.classList.add('alert-dismissing');
|
|
54
|
+
const remove = () => {
|
|
55
|
+
this.el.removeEventListener('transitionend', remove);
|
|
56
|
+
this.el.hidden = true;
|
|
57
|
+
this.options.onDismiss?.(this);
|
|
58
|
+
};
|
|
59
|
+
if (getComputedStyle(this.el).transitionDuration === '0s') remove();
|
|
60
|
+
else this.el.addEventListener('transitionend', remove, { once: true });
|
|
61
|
+
}
|
|
62
|
+
|
|
63
|
+
/** Show an alert that was previously dismissed. */
|
|
64
|
+
open() {
|
|
65
|
+
this.el.hidden = false;
|
|
66
|
+
this.el.classList.remove('alert-dismissing');
|
|
67
|
+
}
|
|
68
|
+
|
|
69
|
+
destroy() {
|
|
70
|
+
this._closeButton?.removeEventListener('click', this._onClose);
|
|
71
|
+
delete this.el['M_Alert'];
|
|
72
|
+
}
|
|
73
|
+
}
|
package/dist/css/materialize.css
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
/*!
|
|
2
|
-
* Materialize v2.3.3-1.0.
|
|
2
|
+
* Materialize v2.3.3-1.0.19 (https://materializeweb.com)
|
|
3
3
|
* Copyright 2014-2026 Materialize
|
|
4
4
|
* MIT License (https://raw.githubusercontent.com/materializecss/materialize/master/LICENSE)
|
|
5
5
|
*/
|
|
@@ -13718,6 +13718,141 @@ button.btn-floating {
|
|
|
13718
13718
|
border-radius: 99999px;
|
|
13719
13719
|
}
|
|
13720
13720
|
|
|
13721
|
+
.alert {
|
|
13722
|
+
--alert-container: var(--md-sys-color-surface-variant);
|
|
13723
|
+
--alert-on-container: var(--md-sys-color-on-surface-variant);
|
|
13724
|
+
--alert-border: var(--md-sys-color-outline-variant);
|
|
13725
|
+
position: relative;
|
|
13726
|
+
display: -webkit-box;
|
|
13727
|
+
display: -webkit-flex;
|
|
13728
|
+
display: -ms-flexbox;
|
|
13729
|
+
display: flex;
|
|
13730
|
+
-webkit-box-align: start;
|
|
13731
|
+
-webkit-align-items: flex-start;
|
|
13732
|
+
-ms-flex-align: start;
|
|
13733
|
+
align-items: flex-start;
|
|
13734
|
+
gap: 0.875rem;
|
|
13735
|
+
width: 100%;
|
|
13736
|
+
-webkit-box-sizing: border-box;
|
|
13737
|
+
box-sizing: border-box;
|
|
13738
|
+
padding: 1rem 1.125rem;
|
|
13739
|
+
margin: 0 0 1rem;
|
|
13740
|
+
border: 1px solid transparent;
|
|
13741
|
+
border-radius: 0.75rem;
|
|
13742
|
+
background: var(--alert-container);
|
|
13743
|
+
color: var(--alert-on-container);
|
|
13744
|
+
line-height: 1.5;
|
|
13745
|
+
}
|
|
13746
|
+
.alert .alert-icon {
|
|
13747
|
+
-webkit-box-flex: 0;
|
|
13748
|
+
-webkit-flex: 0 0 auto;
|
|
13749
|
+
-ms-flex: 0 0 auto;
|
|
13750
|
+
flex: 0 0 auto;
|
|
13751
|
+
margin-top: 0.125rem;
|
|
13752
|
+
font-size: 1.375rem;
|
|
13753
|
+
line-height: 1;
|
|
13754
|
+
}
|
|
13755
|
+
.alert .alert-content {
|
|
13756
|
+
min-width: 0;
|
|
13757
|
+
-webkit-box-flex: 1;
|
|
13758
|
+
-webkit-flex: 1 1 auto;
|
|
13759
|
+
-ms-flex: 1 1 auto;
|
|
13760
|
+
flex: 1 1 auto;
|
|
13761
|
+
}
|
|
13762
|
+
.alert .alert-title {
|
|
13763
|
+
display: block;
|
|
13764
|
+
margin: 0 0 0.25rem;
|
|
13765
|
+
font-weight: 600;
|
|
13766
|
+
}
|
|
13767
|
+
.alert .alert-message {
|
|
13768
|
+
margin: 0;
|
|
13769
|
+
}
|
|
13770
|
+
.alert .alert-close {
|
|
13771
|
+
display: -webkit-inline-box;
|
|
13772
|
+
display: -webkit-inline-flex;
|
|
13773
|
+
display: -ms-inline-flexbox;
|
|
13774
|
+
display: inline-flex;
|
|
13775
|
+
-webkit-box-flex: 0;
|
|
13776
|
+
-webkit-flex: 0 0 auto;
|
|
13777
|
+
-ms-flex: 0 0 auto;
|
|
13778
|
+
flex: 0 0 auto;
|
|
13779
|
+
-webkit-box-align: center;
|
|
13780
|
+
-webkit-align-items: center;
|
|
13781
|
+
-ms-flex-align: center;
|
|
13782
|
+
align-items: center;
|
|
13783
|
+
-webkit-box-pack: center;
|
|
13784
|
+
-webkit-justify-content: center;
|
|
13785
|
+
-ms-flex-pack: center;
|
|
13786
|
+
justify-content: center;
|
|
13787
|
+
width: 2rem;
|
|
13788
|
+
height: 2rem;
|
|
13789
|
+
margin: -0.25rem -0.375rem -0.25rem 0;
|
|
13790
|
+
padding: 0;
|
|
13791
|
+
border: 0;
|
|
13792
|
+
border-radius: 50%;
|
|
13793
|
+
background: transparent;
|
|
13794
|
+
color: inherit;
|
|
13795
|
+
cursor: pointer;
|
|
13796
|
+
}
|
|
13797
|
+
.alert .alert-close:hover, .alert .alert-close:focus-visible {
|
|
13798
|
+
background: color-mix(in srgb, currentColor 12%, transparent);
|
|
13799
|
+
}
|
|
13800
|
+
.alert .alert-close .material-icons {
|
|
13801
|
+
font-size: 1.25rem;
|
|
13802
|
+
}
|
|
13803
|
+
.alert.alert-info {
|
|
13804
|
+
--alert-container: var(--md-sys-color-secondary-container);
|
|
13805
|
+
--alert-on-container: var(--md-sys-color-on-secondary-container);
|
|
13806
|
+
--alert-border: var(--md-sys-color-secondary);
|
|
13807
|
+
}
|
|
13808
|
+
.alert.alert-success {
|
|
13809
|
+
--alert-container: var(--md-sys-color-tertiary-container);
|
|
13810
|
+
--alert-on-container: var(--md-sys-color-on-tertiary-container);
|
|
13811
|
+
--alert-border: var(--md-sys-color-tertiary);
|
|
13812
|
+
}
|
|
13813
|
+
.alert.alert-warning {
|
|
13814
|
+
--alert-container: var(--md-sys-color-primary-container);
|
|
13815
|
+
--alert-on-container: var(--md-sys-color-on-primary-container);
|
|
13816
|
+
--alert-border: var(--md-sys-color-primary);
|
|
13817
|
+
}
|
|
13818
|
+
.alert.alert-error {
|
|
13819
|
+
--alert-container: var(--md-sys-color-error-container);
|
|
13820
|
+
--alert-on-container: var(--md-sys-color-on-error-container);
|
|
13821
|
+
--alert-border: var(--md-sys-color-error);
|
|
13822
|
+
}
|
|
13823
|
+
.alert.alert-outlined {
|
|
13824
|
+
border-color: var(--alert-border);
|
|
13825
|
+
background: transparent;
|
|
13826
|
+
}
|
|
13827
|
+
.alert.alert-filled {
|
|
13828
|
+
border-color: var(--alert-border);
|
|
13829
|
+
background: var(--alert-border);
|
|
13830
|
+
color: var(--md-sys-color-on-primary);
|
|
13831
|
+
}
|
|
13832
|
+
.alert.alert-compact {
|
|
13833
|
+
-webkit-box-align: center;
|
|
13834
|
+
-webkit-align-items: center;
|
|
13835
|
+
-ms-flex-align: center;
|
|
13836
|
+
align-items: center;
|
|
13837
|
+
padding-block: 0.625rem;
|
|
13838
|
+
}
|
|
13839
|
+
.alert[hidden] {
|
|
13840
|
+
display: none;
|
|
13841
|
+
}
|
|
13842
|
+
|
|
13843
|
+
@media (prefers-reduced-motion: no-preference) {
|
|
13844
|
+
.alert {
|
|
13845
|
+
-webkit-transition: opacity 180ms ease, -webkit-transform 180ms ease;
|
|
13846
|
+
transition: opacity 180ms ease, -webkit-transform 180ms ease;
|
|
13847
|
+
transition: opacity 180ms ease, transform 180ms ease;
|
|
13848
|
+
transition: opacity 180ms ease, transform 180ms ease, -webkit-transform 180ms ease;
|
|
13849
|
+
}
|
|
13850
|
+
.alert.alert-dismissing {
|
|
13851
|
+
opacity: 0;
|
|
13852
|
+
-webkit-transform: translateY(-0.25rem);
|
|
13853
|
+
transform: translateY(-0.25rem);
|
|
13854
|
+
}
|
|
13855
|
+
}
|
|
13721
13856
|
.collapsible {
|
|
13722
13857
|
padding-left: 0;
|
|
13723
13858
|
list-style-type: none;
|