@alfalab/core-components-notification 6.2.2 → 6.2.3

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.
Files changed (9) hide show
  1. package/Component.js +1 -1
  2. package/cssm/index.module.css +3 -3
  3. package/esm/Component.js +1 -1
  4. package/esm/index.css +10 -10
  5. package/index.css +10 -10
  6. package/modern/Component.js +1 -1
  7. package/modern/index.css +10 -10
  8. package/package.json +1 -1
  9. package/src/index.module.css +4 -2
package/Component.js CHANGED
@@ -20,7 +20,7 @@ var mergeRefs__default = /*#__PURE__*/_interopDefaultCompat(mergeRefs);
20
20
  var cn__default = /*#__PURE__*/_interopDefaultCompat(cn);
21
21
  var elementClosest__default = /*#__PURE__*/_interopDefaultCompat(elementClosest);
22
22
 
23
- var styles = {"notificationComponent":"notification__notificationComponent_nw17q","isVisible":"notification__isVisible_nw17q","isClosing":"notification__isClosing_nw17q","toastContent":"notification__toastContent_nw17q","actionSection":"notification__actionSection_nw17q"};
23
+ var styles = {"notificationComponent":"notification__notificationComponent_nssum","isVisible":"notification__isVisible_nssum","isClosing":"notification__isClosing_nssum","toastContent":"notification__toastContent_nssum","actionSection":"notification__actionSection_nssum"};
24
24
  require('./index.css')
25
25
 
26
26
  var notificationClassNameSelector = ".".concat(styles.notificationComponent);
package/cssm/index.module.css CHANGED
@@ -22,10 +22,8 @@
22
22
  --notification-desktop-content-width: 278px;
23
23
  } .notificationComponent {
24
24
  visibility: hidden;
25
- position: fixed;
26
25
  right: var(--gap-s);
27
26
  transform: translate(0, -500px);
28
- display: inline-flex;
29
27
  width: calc(100% - var(--gap-xl));
30
28
  max-width: calc(100vw - var(--gap-xl));
31
29
  -webkit-user-select: none;
@@ -45,7 +43,9 @@
45
43
  } @media screen and (min-width: 600px) { .notificationComponent.isClosing {
46
44
  transform: translate(calc(100% + var(--gap-4xl)), 0)
47
45
  }
48
- } @media screen and (min-width: 600px) { .toastContent {
46
+ } .notificationComponent.notificationComponent {
47
+ position: fixed;
48
+ } @media screen and (min-width: 600px) { .toastContent {
49
49
  width: var(--notification-desktop-content-width)
50
50
  }
51
51
  } .actionSection {
package/esm/Component.js CHANGED
@@ -9,7 +9,7 @@ import { stackingOrder, Stack } from '@alfalab/core-components-stack/esm';
9
9
  import { ToastPlateDesktop } from '@alfalab/core-components-toast-plate/esm/desktop';
10
10
  import { useClickOutside } from './utils/index.js';
11
11
 
12
- var styles = {"notificationComponent":"notification__notificationComponent_nw17q","isVisible":"notification__isVisible_nw17q","isClosing":"notification__isClosing_nw17q","toastContent":"notification__toastContent_nw17q","actionSection":"notification__actionSection_nw17q"};
12
+ var styles = {"notificationComponent":"notification__notificationComponent_nssum","isVisible":"notification__isVisible_nssum","isClosing":"notification__isClosing_nssum","toastContent":"notification__toastContent_nssum","actionSection":"notification__actionSection_nssum"};
13
13
  require('./index.css')
14
14
 
15
15
  var notificationClassNameSelector = ".".concat(styles.notificationComponent);
package/esm/index.css CHANGED
@@ -1,4 +1,4 @@
1
- /* hash: 1gple */
1
+ /* hash: hmore */
2
2
  :root {
3
3
  } /* deprecated */ :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
4
4
  } :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
@@ -21,35 +21,35 @@
21
21
  } :root {
22
22
  } :root {
23
23
  --notification-desktop-content-width: 278px;
24
- } .notification__notificationComponent_nw17q {
24
+ } .notification__notificationComponent_nssum {
25
25
  visibility: hidden;
26
- position: fixed;
27
26
  right: var(--gap-s);
28
27
  transform: translate(0, -500px);
29
- display: inline-flex;
30
28
  width: calc(100% - var(--gap-xl));
31
29
  max-width: calc(100vw - var(--gap-xl));
32
30
  -webkit-user-select: none;
33
31
  user-select: none;
34
32
  transition: transform 0.4s ease-out
35
- } @media screen and (min-width: 600px) { .notification__notificationComponent_nw17q {
33
+ } @media screen and (min-width: 600px) { .notification__notificationComponent_nssum {
36
34
  right: var(--gap-4xl);
37
35
  width: auto;
38
36
  transform: translate(calc(100% + var(--gap-4xl)), 0)
39
37
  }
40
- } .notification__notificationComponent_nw17q.notification__isVisible_nw17q {
38
+ } .notification__notificationComponent_nssum.notification__isVisible_nssum {
41
39
  visibility: visible;
42
40
  transform: translate(0, 0);
43
- } .notification__notificationComponent_nw17q.notification__isClosing_nw17q {
41
+ } .notification__notificationComponent_nssum.notification__isClosing_nssum {
44
42
  transition: transform 0.1s ease-out;
45
43
  transform: translate(100vw, 0)
46
- } @media screen and (min-width: 600px) { .notification__notificationComponent_nw17q.notification__isClosing_nw17q {
44
+ } @media screen and (min-width: 600px) { .notification__notificationComponent_nssum.notification__isClosing_nssum {
47
45
  transform: translate(calc(100% + var(--gap-4xl)), 0)
48
46
  }
49
- } @media screen and (min-width: 600px) { .notification__toastContent_nw17q {
47
+ } .notification__notificationComponent_nssum.notification__notificationComponent_nssum {
48
+ position: fixed;
49
+ } @media screen and (min-width: 600px) { .notification__toastContent_nssum {
50
50
  width: var(--notification-desktop-content-width)
51
51
  }
52
- } .notification__actionSection_nw17q {
52
+ } .notification__actionSection_nssum {
53
53
  min-width: 104px;
54
54
  min-height: 48px;
55
55
  padding: 0 var(--gap-xs);
package/index.css CHANGED
@@ -1,4 +1,4 @@
1
- /* hash: 1gple */
1
+ /* hash: hmore */
2
2
  :root {
3
3
  } /* deprecated */ :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
4
4
  } :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
@@ -21,35 +21,35 @@
21
21
  } :root {
22
22
  } :root {
23
23
  --notification-desktop-content-width: 278px;
24
- } .notification__notificationComponent_nw17q {
24
+ } .notification__notificationComponent_nssum {
25
25
  visibility: hidden;
26
- position: fixed;
27
26
  right: var(--gap-s);
28
27
  transform: translate(0, -500px);
29
- display: inline-flex;
30
28
  width: calc(100% - var(--gap-xl));
31
29
  max-width: calc(100vw - var(--gap-xl));
32
30
  -webkit-user-select: none;
33
31
  user-select: none;
34
32
  transition: transform 0.4s ease-out
35
- } @media screen and (min-width: 600px) { .notification__notificationComponent_nw17q {
33
+ } @media screen and (min-width: 600px) { .notification__notificationComponent_nssum {
36
34
  right: var(--gap-4xl);
37
35
  width: auto;
38
36
  transform: translate(calc(100% + var(--gap-4xl)), 0)
39
37
  }
40
- } .notification__notificationComponent_nw17q.notification__isVisible_nw17q {
38
+ } .notification__notificationComponent_nssum.notification__isVisible_nssum {
41
39
  visibility: visible;
42
40
  transform: translate(0, 0);
43
- } .notification__notificationComponent_nw17q.notification__isClosing_nw17q {
41
+ } .notification__notificationComponent_nssum.notification__isClosing_nssum {
44
42
  transition: transform 0.1s ease-out;
45
43
  transform: translate(100vw, 0)
46
- } @media screen and (min-width: 600px) { .notification__notificationComponent_nw17q.notification__isClosing_nw17q {
44
+ } @media screen and (min-width: 600px) { .notification__notificationComponent_nssum.notification__isClosing_nssum {
47
45
  transform: translate(calc(100% + var(--gap-4xl)), 0)
48
46
  }
49
- } @media screen and (min-width: 600px) { .notification__toastContent_nw17q {
47
+ } .notification__notificationComponent_nssum.notification__notificationComponent_nssum {
48
+ position: fixed;
49
+ } @media screen and (min-width: 600px) { .notification__toastContent_nssum {
50
50
  width: var(--notification-desktop-content-width)
51
51
  }
52
- } .notification__actionSection_nw17q {
52
+ } .notification__actionSection_nssum {
53
53
  min-width: 104px;
54
54
  min-height: 48px;
55
55
  padding: 0 var(--gap-xs);
package/modern/Component.js CHANGED
@@ -8,7 +8,7 @@ import { Stack, stackingOrder } from '@alfalab/core-components-stack/modern';
8
8
  import { ToastPlateDesktop } from '@alfalab/core-components-toast-plate/modern/desktop';
9
9
  import { useClickOutside } from './utils/index.js';
10
10
 
11
- const styles = {"notificationComponent":"notification__notificationComponent_nw17q","isVisible":"notification__isVisible_nw17q","isClosing":"notification__isClosing_nw17q","toastContent":"notification__toastContent_nw17q","actionSection":"notification__actionSection_nw17q"};
11
+ const styles = {"notificationComponent":"notification__notificationComponent_nssum","isVisible":"notification__isVisible_nssum","isClosing":"notification__isClosing_nssum","toastContent":"notification__toastContent_nssum","actionSection":"notification__actionSection_nssum"};
12
12
  require('./index.css')
13
13
 
14
14
  const notificationClassNameSelector = `.${styles.notificationComponent}`;
package/modern/index.css CHANGED
@@ -1,4 +1,4 @@
1
- /* hash: 1gple */
1
+ /* hash: hmore */
2
2
  :root {
3
3
  } /* deprecated */ :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
4
4
  } :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
@@ -21,35 +21,35 @@
21
21
  } :root {
22
22
  } :root {
23
23
  --notification-desktop-content-width: 278px;
24
- } .notification__notificationComponent_nw17q {
24
+ } .notification__notificationComponent_nssum {
25
25
  visibility: hidden;
26
- position: fixed;
27
26
  right: var(--gap-s);
28
27
  transform: translate(0, -500px);
29
- display: inline-flex;
30
28
  width: calc(100% - var(--gap-xl));
31
29
  max-width: calc(100vw - var(--gap-xl));
32
30
  -webkit-user-select: none;
33
31
  user-select: none;
34
32
  transition: transform 0.4s ease-out
35
- } @media screen and (min-width: 600px) { .notification__notificationComponent_nw17q {
33
+ } @media screen and (min-width: 600px) { .notification__notificationComponent_nssum {
36
34
  right: var(--gap-4xl);
37
35
  width: auto;
38
36
  transform: translate(calc(100% + var(--gap-4xl)), 0)
39
37
  }
40
- } .notification__notificationComponent_nw17q.notification__isVisible_nw17q {
38
+ } .notification__notificationComponent_nssum.notification__isVisible_nssum {
41
39
  visibility: visible;
42
40
  transform: translate(0, 0);
43
- } .notification__notificationComponent_nw17q.notification__isClosing_nw17q {
41
+ } .notification__notificationComponent_nssum.notification__isClosing_nssum {
44
42
  transition: transform 0.1s ease-out;
45
43
  transform: translate(100vw, 0)
46
- } @media screen and (min-width: 600px) { .notification__notificationComponent_nw17q.notification__isClosing_nw17q {
44
+ } @media screen and (min-width: 600px) { .notification__notificationComponent_nssum.notification__isClosing_nssum {
47
45
  transform: translate(calc(100% + var(--gap-4xl)), 0)
48
46
  }
49
- } @media screen and (min-width: 600px) { .notification__toastContent_nw17q {
47
+ } .notification__notificationComponent_nssum.notification__notificationComponent_nssum {
48
+ position: fixed;
49
+ } @media screen and (min-width: 600px) { .notification__toastContent_nssum {
50
50
  width: var(--notification-desktop-content-width)
51
51
  }
52
- } .notification__actionSection_nw17q {
52
+ } .notification__actionSection_nssum {
53
53
  min-width: 104px;
54
54
  min-height: 48px;
55
55
  padding: 0 var(--gap-xs);
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@alfalab/core-components-notification",
3
- "version": "6.2.2",
3
+ "version": "6.2.3",
4
4
  "description": "",
5
5
  "keywords": [],
6
6
  "license": "MIT",
package/src/index.module.css CHANGED
@@ -6,10 +6,8 @@
6
6
 
7
7
  .notificationComponent {
8
8
  visibility: hidden;
9
- position: fixed;
10
9
  right: var(--gap-s);
11
10
  transform: translate(0, -500px);
12
- display: inline-flex;
13
11
  width: calc(100% - var(--gap-xl));
14
12
  max-width: calc(100vw - var(--gap-xl));
15
13
  user-select: none;
@@ -36,6 +34,10 @@
36
34
  }
37
35
  }
38
36
 
37
+ .notificationComponent.notificationComponent {
38
+ position: fixed;
39
+ }
40
+
39
41
  .toastContent {
40
42
  @media screen and (min-width: 600px) {
41
43
  width: var(--notification-desktop-content-width);