@emuanalytics/flow-rdf-ui 4.1.0 → 4.1.1

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/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@emuanalytics/flow-rdf-ui",
3
- "version": "4.1.0",
3
+ "version": "4.1.1",
4
4
  "type": "module",
5
5
  "module": "dist/index.mjs",
6
6
  "types": "dist/index.d.ts",
package/themes/dark.css CHANGED
@@ -382,6 +382,9 @@
382
382
  var(--flow-ui-focus-ring-width) var(--flow-ui-focus-ring-color);
383
383
  --flow-ui-focus-ring-offset: 1px;
384
384
 
385
+ --flow-ui-busy-overlay-background-color: hsla(0, 0%, 75%, 0.8);
386
+ --flow-ui-busy-overlay-color: var(--flow-ui-color-neutral-500);
387
+
385
388
  --flow-ui-button-font-size-x-small: var(--flow-ui-font-size-2x-small);
386
389
  --flow-ui-button-font-size-small: var(--flow-ui-font-size-x-small);
387
390
  --flow-ui-button-font-size-medium: var(--flow-ui-font-size-small);
@@ -385,6 +385,9 @@ export default css`
385
385
  var(--flow-ui-focus-ring-width) var(--flow-ui-focus-ring-color);
386
386
  --flow-ui-focus-ring-offset: 1px;
387
387
 
388
+ --flow-ui-busy-overlay-background-color: hsla(0, 0%, 75%, 0.8);
389
+ --flow-ui-busy-overlay-color: var(--flow-ui-color-neutral-500);
390
+
388
391
  --flow-ui-button-font-size-x-small: var(--flow-ui-font-size-2x-small);
389
392
  --flow-ui-button-font-size-small: var(--flow-ui-font-size-x-small);
390
393
  --flow-ui-button-font-size-medium: var(--flow-ui-font-size-small);
package/themes/light.css CHANGED
@@ -383,6 +383,9 @@
383
383
  var(--flow-ui-focus-ring-width) var(--flow-ui-focus-ring-color);
384
384
  --flow-ui-focus-ring-offset: 1px;
385
385
 
386
+ --flow-ui-busy-overlay-background-color: hsl(0 0% 95% / 0.8);
387
+ --flow-ui-busy-overlay-color: var(--flow-ui-color-neutral-500);
388
+
386
389
  --flow-ui-button-font-size-x-small: var(--flow-ui-font-size-2x-small);
387
390
  --flow-ui-button-font-size-small: var(--flow-ui-font-size-x-small);
388
391
  --flow-ui-button-font-size-medium: var(--flow-ui-font-size-small);
@@ -386,6 +386,9 @@ export default css`
386
386
  var(--flow-ui-focus-ring-width) var(--flow-ui-focus-ring-color);
387
387
  --flow-ui-focus-ring-offset: 1px;
388
388
 
389
+ --flow-ui-busy-overlay-background-color: hsl(0 0% 95% / 0.8);
390
+ --flow-ui-busy-overlay-color: var(--flow-ui-color-neutral-500);
391
+
389
392
  --flow-ui-button-font-size-x-small: var(--flow-ui-font-size-2x-small);
390
393
  --flow-ui-button-font-size-small: var(--flow-ui-font-size-x-small);
391
394
  --flow-ui-button-font-size-medium: var(--flow-ui-font-size-small);
@@ -1,22 +0,0 @@
1
- import { html } from 'lit';
2
- import FlowRdfElement from '../../internal/flow-ui-rdf-element.mjs';
3
- import { LocalizeController } from '../../utilities/localize.mjs';
4
- import styles from './spinner.styles.mjs';
5
-
6
- class FlowUiSpinner extends FlowRdfElement {
7
- constructor() {
8
- super(...arguments);
9
- this.localize = new LocalizeController(this);
10
- }
11
- render() {
12
- return html`
13
- <svg part="base" class="spinner" role="progressbar" aria-valuetext=${this.localize.term("loading")}>
14
- <circle class="spinner__track"></circle>
15
- <circle class="spinner__indicator"></circle>
16
- </svg>
17
- `;
18
- }
19
- }
20
- FlowUiSpinner.styles = styles;
21
-
22
- export { FlowUiSpinner as default };
@@ -1,5 +0,0 @@
1
- import FlowUiSpinner from './spinner.component.mjs';
2
-
3
-
4
-
5
- export { FlowUiSpinner as default };
@@ -1,64 +0,0 @@
1
- import { css } from 'lit';
2
- import componentStyles from '../../styles/component.styles.mjs';
3
-
4
- const styles = css`
5
- ${componentStyles}
6
-
7
- :host {
8
- --track-width: 2px;
9
- --track-color: var(--flow-ui-color-neutral-600);
10
- --indicator-color: var(--flow-ui-color-primary-500);
11
- --speed: 2s;
12
-
13
- display: inline-flex;
14
- width: 1em;
15
- height: 1em;
16
- }
17
-
18
- .spinner {
19
- flex: 1 1 auto;
20
- height: 100%;
21
- width: 100%;
22
- }
23
-
24
- .spinner__track,
25
- .spinner__indicator {
26
- fill: none;
27
- stroke-width: var(--track-width);
28
- r: calc(0.5em - var(--track-width) / 2);
29
- cx: 0.5em;
30
- cy: 0.5em;
31
- transform-origin: 50% 50%;
32
- }
33
-
34
- .spinner__track {
35
- stroke: var(--track-color);
36
- transform-origin: 0% 0%;
37
- }
38
-
39
- .spinner__indicator {
40
- stroke: var(--indicator-color);
41
- stroke-linecap: round;
42
- stroke-dasharray: 150% 75%;
43
- animation: spin var(--speed) linear infinite;
44
- }
45
-
46
- @keyframes spin {
47
- 0% {
48
- transform: rotate(0deg);
49
- stroke-dasharray: 0.01em, 2.75em;
50
- }
51
-
52
- 50% {
53
- transform: rotate(450deg);
54
- stroke-dasharray: 1.375em, 1.375em;
55
- }
56
-
57
- 100% {
58
- transform: rotate(1080deg);
59
- stroke-dasharray: 0.01em, 2.75em;
60
- }
61
- }
62
- `;
63
-
64
- export { styles as default };