@brightspace-ui/core 3.219.3 → 3.219.4

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 (2) hide show
  1. package/components/backdrop/backdrop-loading.js +47 -42
  2. package/package.json +1 -1
package/components/backdrop/backdrop-loading.js CHANGED
@@ -1,12 +1,11 @@
1
1
  import '../colors/colors.js';
2
2
  import '../loading-spinner/loading-spinner.js';
3
- import { css, html, LitElement } from 'lit';
3
+ import { css, html, LitElement, nothing } from 'lit';
4
4
  import { getOffsetParent } from '../../helpers/dom.js';
5
5
 
6
6
  const BACKDROP_DELAY_MS = 800;
7
- const FADE_IN_DURATION_MS = 500;
8
- const FADE_OUT_DURATION_MS = 500;
9
- const SPINNER_DELAY_MS = BACKDROP_DELAY_MS + FADE_IN_DURATION_MS;
7
+ const FADE_DURATION_MS = 500;
8
+ const SPINNER_DELAY_MS = FADE_DURATION_MS;
10
9
 
11
10
  const reduceMotion = matchMedia('(prefers-reduced-motion: reduce)').matches;
12
11
 
@@ -28,52 +27,47 @@ class LoadingBackdrop extends LitElement {
28
27
 
29
28
  static get styles() {
30
29
  return css`
31
- :host, .backdrop, d2l-loading-spinner {
32
- height: 0%;
33
- position: absolute;
34
- width: 0%;
35
- }
36
-
37
- .backdrop, d2l-loading-spinner {
38
- opacity: 0;
39
- }
40
-
41
30
  :host {
31
+ display: none;
32
+ height: 100%;
33
+ justify-content: center;
34
+ position: absolute;
42
35
  top: 0;
36
+ width: 100%;
43
37
  z-index: 999;
44
38
  }
39
+ :host([_state="showing"]),
40
+ :host([_state="shown"]),
41
+ :host([_state="hiding"]) {
42
+ display: flex;
43
+ }
45
44
 
46
45
  .backdrop {
47
46
  background-color: var(--d2l-color-regolith);
47
+ height: 100%;
48
+ opacity: 0;
49
+ position: absolute;
50
+ top: 0;
51
+ transition: opacity ${FADE_DURATION_MS}ms ease-in;
52
+ width: 100%;
53
+ }
54
+ :host([_state="shown"]) .backdrop {
55
+ opacity: 0.7;
48
56
  }
49
57
 
50
58
  d2l-loading-spinner {
59
+ opacity: 0;
60
+ position: absolute;
51
61
  top: 100px;
62
+ transition: opacity ${FADE_DURATION_MS}ms ease-in ${SPINNER_DELAY_MS}ms;
52
63
  }
53
-
54
- :host([_state="showing"]),
55
- :host([_state="hiding"]),
56
- d2l-loading-spinner[_state="showing"],
57
- d2l-loading-spinner[_state="hiding"],
58
- .backdrop[_state="showing"],
59
- .backdrop[_state="hiding"] {
60
- height: 100%;
61
- width: 100%;
62
- }
63
-
64
- d2l-loading-spinner[_state="showing"] {
64
+ :host([_state="shown"]) d2l-loading-spinner {
65
65
  opacity: 1;
66
- transition: opacity ${FADE_IN_DURATION_MS}ms ease-in ${SPINNER_DELAY_MS}ms;
67
66
  }
68
-
69
- .backdrop[_state="showing"] {
70
- opacity: 0.7;
71
- transition: opacity ${FADE_IN_DURATION_MS}ms ease-in ${BACKDROP_DELAY_MS}ms;
72
- }
73
-
74
- d2l-loading-spinner[_state="hiding"],
75
- .backdrop[_state="hiding"] {
76
- transition: opacity ${FADE_OUT_DURATION_MS}ms ease-out;
67
+
68
+ :host([_state="hiding"]) .d2l-backdrop,
69
+ :host([_state="hiding"]) d2l-loading-spinner {
70
+ transition: opacity ${FADE_DURATION_MS}ms ease-out;
77
71
  }
78
72
 
79
73
  @media (prefers-reduced-motion: reduce) {
@@ -85,16 +79,27 @@ class LoadingBackdrop extends LitElement {
85
79
  constructor() {
86
80
  super();
87
81
  this.shown = false;
88
- this._state = null;
82
+ this._state = 'hidden';
89
83
  }
90
84
 
91
85
  render() {
86
+ if (this._state === 'hidden') return nothing;
92
87
  return html`
93
- <div class="backdrop" _state=${this._state} @transitionend=${this.#handleTransitionEnd} @transitioncancel=${this.#hide}></div>
94
- <d2l-loading-spinner _state=${this._state} size="${this._state === null ? '0' : '50'}"></d2l-loading-spinner>
88
+ <div class="backdrop" @transitionend="${this.#handleTransitionEnd}" @transitioncancel="${this.#hide}"></div>
89
+ <d2l-loading-spinner></d2l-loading-spinner>
95
90
  `;
96
91
  }
97
92
 
93
+ updated(changedProperties) {
94
+ if (changedProperties.has('_state')) {
95
+ if (this._state === 'showing') {
96
+ setTimeout(() => {
97
+ if (this._state === 'showing') this._state = 'shown';
98
+ }, BACKDROP_DELAY_MS);
99
+ }
100
+ }
101
+ }
102
+
98
103
  willUpdate(changedProperties) {
99
104
  if (changedProperties.has('shown')) {
100
105
  if (this.shown) {
@@ -106,7 +111,7 @@ class LoadingBackdrop extends LitElement {
106
111
  }
107
112
 
108
113
  #fade() {
109
- if (reduceMotion) {
114
+ if (reduceMotion || this._state === 'showing') {
110
115
  this.#hide();
111
116
  } else {
112
117
  this._state = 'hiding';
@@ -120,7 +125,7 @@ class LoadingBackdrop extends LitElement {
120
125
  }
121
126
 
122
127
  #hide() {
123
- this._state = null;
128
+ this._state = 'hidden';
124
129
 
125
130
  const containingBlock = getOffsetParent(this);
126
131
 
@@ -128,7 +133,7 @@ class LoadingBackdrop extends LitElement {
128
133
  }
129
134
 
130
135
  #show() {
131
- this._state = 'showing';
136
+ this._state = reduceMotion ? 'shown' : 'showing';
132
137
 
133
138
  const containingBlock = getOffsetParent(this);
134
139
 
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@brightspace-ui/core",
3
- "version": "3.219.3",
3
+ "version": "3.219.4",
4
4
  "description": "A collection of accessible, free, open-source web components for building Brightspace applications",
5
5
  "type": "module",
6
6
  "repository": "https://github.com/BrightspaceUI/core.git",