@warp-ds/elements 2.2.0-next.8 → 2.2.0-next.9
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/dist/api.js +1 -1
- package/dist/api.js.map +4 -4
- package/dist/custom-elements.json +2166 -2195
- package/dist/index.js +1047 -148
- package/dist/index.js.map +4 -4
- package/dist/packages/attention/attention.stories.d.ts +5 -0
- package/dist/packages/attention/attention.test.d.ts +1 -0
- package/dist/packages/attention/index.d.ts +48 -89
- package/dist/packages/attention/index.js +3354 -16
- package/dist/packages/attention/index.js.map +4 -4
- package/dist/packages/attention/layout-styles.d.ts +1 -0
- package/dist/packages/attention/react.d.ts +1 -0
- package/dist/packages/attention/react.js +3405 -0
- package/dist/packages/attention/react.js.map +7 -0
- package/dist/packages/attention/styles.d.ts +1 -0
- package/dist/packages/toast/api.d.ts +4 -45
- package/dist/packages/toast/index.d.ts +3 -3
- package/dist/packages/toast/index.js +2461 -22
- package/dist/packages/toast/index.js.map +4 -4
- package/dist/packages/toast/styles.d.ts +1 -0
- package/dist/packages/toast/toast-container.d.ts +12 -78
- package/dist/packages/toast/toast.d.ts +16 -29
- package/dist/packages/toast/types.d.ts +15 -0
- package/dist/vscode.html-custom-data.json +23 -20
- package/dist/web-types.json +81 -78
- package/package.json +1 -1
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export declare const styles: import("lit").CSSResult;
|
|
@@ -1,82 +1,16 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
*/
|
|
10
|
-
/**
|
|
11
|
-
* You should probably not include this component in HTML markup.
|
|
12
|
-
*
|
|
13
|
-
* As long as the element definition is imported in your application you can use the toast JS API to create toasts.
|
|
14
|
-
*
|
|
15
|
-
* ```js
|
|
16
|
-
* import from '@warp-ds/elements/components/toast';
|
|
17
|
-
* import { toast, removeToast, updateToast } from '@warp-ds/elements/toast';
|
|
18
|
-
* ```
|
|
19
|
-
*
|
|
20
|
-
* [See Storybook for usage examples](https://warp-ds.github.io/elements/?path=/docs/overlays-toast--docs)
|
|
21
|
-
*
|
|
22
|
-
* @internal
|
|
23
|
-
*/
|
|
24
|
-
export class WarpToastContainer extends WarpElement {
|
|
25
|
-
static styles: (import("lit").CSSResult | (import("lit").CSSResult | CSSStyleSheet | import("lit").CSSResultArray)[])[];
|
|
26
|
-
static properties: {
|
|
27
|
-
/** @internal */
|
|
28
|
-
_toasts: {
|
|
29
|
-
state: boolean;
|
|
30
|
-
};
|
|
31
|
-
};
|
|
1
|
+
import { LitElement } from 'lit';
|
|
2
|
+
import type { ToastOptions, ToastInternal } from './types';
|
|
3
|
+
export declare class WarpToastContainer extends LitElement {
|
|
4
|
+
static styles: import("lit").CSSResult[];
|
|
5
|
+
private _toasts;
|
|
6
|
+
private _interval;
|
|
7
|
+
connectedCallback(): void;
|
|
8
|
+
disconnectedCallback(): void;
|
|
32
9
|
static init(): Element;
|
|
33
|
-
_toasts: Map<any, any>;
|
|
34
|
-
_interval: NodeJS.Timeout;
|
|
35
10
|
/** @internal */
|
|
36
|
-
get _toastsArray():
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
* @returns {ToastOptions}
|
|
41
|
-
*/
|
|
42
|
-
get(id: string | number): ToastOptions;
|
|
43
|
-
/**
|
|
44
|
-
*
|
|
45
|
-
* @param {Object} toast
|
|
46
|
-
* @returns {WarpToastContainer}
|
|
47
|
-
*/
|
|
48
|
-
set(toast: any): WarpToastContainer;
|
|
49
|
-
/**
|
|
50
|
-
*
|
|
51
|
-
* @param {String|Number} id
|
|
52
|
-
* @returns {ToastOptions | false}
|
|
53
|
-
*/
|
|
54
|
-
del(id: string | number): ToastOptions | false;
|
|
11
|
+
get _toastsArray(): ToastInternal[];
|
|
12
|
+
get(id: string | number): ToastInternal | undefined;
|
|
13
|
+
set(toast: ToastOptions): Map<string | number, ToastInternal>;
|
|
14
|
+
del(id: string | number): Promise<boolean>;
|
|
55
15
|
render(): import("lit").TemplateResult<1>;
|
|
56
16
|
}
|
|
57
|
-
/**
|
|
58
|
-
* Toast helper function options
|
|
59
|
-
*/
|
|
60
|
-
export type ToastOptions = {
|
|
61
|
-
/**
|
|
62
|
-
* Custom identifier
|
|
63
|
-
*/
|
|
64
|
-
id?: (number | string);
|
|
65
|
-
/**
|
|
66
|
-
* Type of alert
|
|
67
|
-
*/
|
|
68
|
-
type?: ("success" | "error" | "warning");
|
|
69
|
-
/**
|
|
70
|
-
* The toast message. Only needed when updating text on existing toast
|
|
71
|
-
*/
|
|
72
|
-
text?: string;
|
|
73
|
-
/**
|
|
74
|
-
* Duration of toast in milliseconds. Defaults to 5000. For accessibility reasons, toasts should never be interactive and therefore need to auto remove. If you must disable auto remove, set duration to Number.POSITIVE_INFINITY.
|
|
75
|
-
*/
|
|
76
|
-
duration?: (number | string);
|
|
77
|
-
/**
|
|
78
|
-
* Whether the toast can be dismissed. Defaults to false. WARNING! For accessibility reasons, toasts should not be interactive and canclose should always be false. If the toast absolutely must be dismissble, set this to true.
|
|
79
|
-
*/
|
|
80
|
-
canClose?: boolean;
|
|
81
|
-
};
|
|
82
|
-
import WarpElement from '@warp-ds/elements-core';
|
|
@@ -1,3 +1,9 @@
|
|
|
1
|
+
import { LitElement } from 'lit';
|
|
2
|
+
import '@warp-ds/icons/elements/warning-16';
|
|
3
|
+
import '@warp-ds/icons/elements/error-16';
|
|
4
|
+
import '@warp-ds/icons/elements/success-16';
|
|
5
|
+
import '@warp-ds/icons/elements/close-16';
|
|
6
|
+
import type { ToastType } from './types';
|
|
1
7
|
/**
|
|
2
8
|
* You should probably not include this component in HTML markup.
|
|
3
9
|
*
|
|
@@ -12,35 +18,18 @@
|
|
|
12
18
|
*
|
|
13
19
|
* @internal
|
|
14
20
|
*/
|
|
15
|
-
export class WarpToast extends
|
|
16
|
-
|
|
17
|
-
static
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
attribute: boolean;
|
|
21
|
-
reflect: boolean;
|
|
22
|
-
};
|
|
23
|
-
type: {
|
|
24
|
-
type: StringConstructor;
|
|
25
|
-
attribute: boolean;
|
|
26
|
-
reflect: boolean;
|
|
27
|
-
};
|
|
28
|
-
text: {
|
|
29
|
-
type: StringConstructor;
|
|
30
|
-
attribute: boolean;
|
|
31
|
-
reflect: boolean;
|
|
32
|
-
};
|
|
33
|
-
canclose: {
|
|
34
|
-
type: BooleanConstructor;
|
|
35
|
-
attribute: boolean;
|
|
36
|
-
reflect: boolean;
|
|
37
|
-
};
|
|
38
|
-
};
|
|
39
|
-
type: string;
|
|
21
|
+
export declare class WarpToast extends LitElement {
|
|
22
|
+
#private;
|
|
23
|
+
static styles: import("lit").CSSResult[];
|
|
24
|
+
id: string;
|
|
25
|
+
type: ToastType;
|
|
40
26
|
text: string;
|
|
41
27
|
canclose: boolean;
|
|
28
|
+
private _expanded;
|
|
29
|
+
constructor();
|
|
30
|
+
connectedCallback(): void;
|
|
31
|
+
disconnectedCallback(): void;
|
|
42
32
|
updated(): void;
|
|
43
|
-
_expanded: boolean;
|
|
44
33
|
/** @internal */
|
|
45
34
|
get _wrapper(): HTMLElement;
|
|
46
35
|
/** @internal */
|
|
@@ -53,9 +42,7 @@ export class WarpToast extends WarpElement {
|
|
|
53
42
|
get _typeLabel(): string;
|
|
54
43
|
/** @internal */
|
|
55
44
|
get _iconMarkup(): import("lit").TemplateResult<1>;
|
|
56
|
-
collapse(): Promise<
|
|
45
|
+
collapse(): Promise<void>;
|
|
57
46
|
close(): void;
|
|
58
47
|
render(): import("lit").TemplateResult<1>;
|
|
59
|
-
#private;
|
|
60
48
|
}
|
|
61
|
-
import WarpElement from '@warp-ds/elements-core';
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
export type ToastType = 'success' | 'error' | 'warning';
|
|
2
|
+
export interface ToastOptions {
|
|
3
|
+
id?: string | number;
|
|
4
|
+
type?: ToastType;
|
|
5
|
+
text?: string;
|
|
6
|
+
duration?: number;
|
|
7
|
+
canclose?: boolean;
|
|
8
|
+
}
|
|
9
|
+
export interface ToastInternal {
|
|
10
|
+
id: string | number;
|
|
11
|
+
type: ToastType;
|
|
12
|
+
text: string;
|
|
13
|
+
duration: number;
|
|
14
|
+
canclose: boolean;
|
|
15
|
+
}
|
|
@@ -39,6 +39,29 @@
|
|
|
39
39
|
],
|
|
40
40
|
"references": []
|
|
41
41
|
},
|
|
42
|
+
{
|
|
43
|
+
"name": "w-attention",
|
|
44
|
+
"description": "\n\n---\n\n",
|
|
45
|
+
"attributes": [
|
|
46
|
+
{ "name": "show", "values": [] },
|
|
47
|
+
{ "name": "placement", "values": [{ "name": "Directions" }] },
|
|
48
|
+
{ "name": "tooltip", "values": [] },
|
|
49
|
+
{ "name": "callout", "values": [] },
|
|
50
|
+
{ "name": "popover", "values": [] },
|
|
51
|
+
{ "name": "highlight", "values": [] },
|
|
52
|
+
{ "name": "can-close", "values": [] },
|
|
53
|
+
{ "name": "no-arrow", "values": [] },
|
|
54
|
+
{ "name": "distance", "values": [] },
|
|
55
|
+
{ "name": "skidding", "values": [] },
|
|
56
|
+
{ "name": "flip", "values": [] },
|
|
57
|
+
{ "name": "cross-axis", "values": [] },
|
|
58
|
+
{
|
|
59
|
+
"name": "fallback-placements",
|
|
60
|
+
"values": [{ "name": "Directions[]" }]
|
|
61
|
+
}
|
|
62
|
+
],
|
|
63
|
+
"references": []
|
|
64
|
+
},
|
|
42
65
|
{
|
|
43
66
|
"name": "w-badge",
|
|
44
67
|
"description": "`w-badge` is used for showing a small amount of non-interactive color-categorized metadata, like a status or count.\n\n[See Storybook for usage examples](https://warp-ds.github.io/elements/?path=/docs/layout-badge--docs)\n\n---\n\n",
|
|
@@ -393,26 +416,6 @@
|
|
|
393
416
|
{ "name": "name", "values": [] }
|
|
394
417
|
],
|
|
395
418
|
"references": []
|
|
396
|
-
},
|
|
397
|
-
{
|
|
398
|
-
"name": "w-attention",
|
|
399
|
-
"description": "\n\n---\n\n",
|
|
400
|
-
"attributes": [
|
|
401
|
-
{ "name": "show", "values": [] },
|
|
402
|
-
{ "name": "placement", "values": [] },
|
|
403
|
-
{ "name": "tooltip", "values": [] },
|
|
404
|
-
{ "name": "callout", "values": [] },
|
|
405
|
-
{ "name": "popover", "values": [] },
|
|
406
|
-
{ "name": "highlight", "values": [] },
|
|
407
|
-
{ "name": "canClose", "values": [] },
|
|
408
|
-
{ "name": "noArrow", "values": [] },
|
|
409
|
-
{ "name": "distance", "values": [] },
|
|
410
|
-
{ "name": "skidding", "values": [] },
|
|
411
|
-
{ "name": "flip", "values": [] },
|
|
412
|
-
{ "name": "crossAxis", "values": [] },
|
|
413
|
-
{ "name": "fallbackPlacements", "values": [{ "name": "array" }] }
|
|
414
|
-
],
|
|
415
|
-
"references": []
|
|
416
419
|
}
|
|
417
420
|
]
|
|
418
421
|
}
|
package/dist/web-types.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"$schema": "https://raw.githubusercontent.com/JetBrains/web-types/master/schema/web-types.json",
|
|
3
3
|
"name": "@warp-ds/elements",
|
|
4
|
-
"version": "2.2.0-next.
|
|
4
|
+
"version": "2.2.0-next.8",
|
|
5
5
|
"description-markup": "markdown",
|
|
6
6
|
"contributions": {
|
|
7
7
|
"html": {
|
|
@@ -77,6 +77,86 @@
|
|
|
77
77
|
"events": []
|
|
78
78
|
}
|
|
79
79
|
},
|
|
80
|
+
{
|
|
81
|
+
"name": "w-attention",
|
|
82
|
+
"description": "\n---\n",
|
|
83
|
+
"doc-url": "",
|
|
84
|
+
"attributes": [
|
|
85
|
+
{
|
|
86
|
+
"name": "show",
|
|
87
|
+
"value": { "type": "boolean", "default": "false" }
|
|
88
|
+
},
|
|
89
|
+
{
|
|
90
|
+
"name": "placement",
|
|
91
|
+
"value": { "type": "Directions", "default": "'bottom'" }
|
|
92
|
+
},
|
|
93
|
+
{
|
|
94
|
+
"name": "tooltip",
|
|
95
|
+
"value": { "type": "boolean", "default": "false" }
|
|
96
|
+
},
|
|
97
|
+
{
|
|
98
|
+
"name": "callout",
|
|
99
|
+
"value": { "type": "boolean", "default": "false" }
|
|
100
|
+
},
|
|
101
|
+
{
|
|
102
|
+
"name": "popover",
|
|
103
|
+
"value": { "type": "boolean", "default": "false" }
|
|
104
|
+
},
|
|
105
|
+
{
|
|
106
|
+
"name": "highlight",
|
|
107
|
+
"value": { "type": "boolean", "default": "false" }
|
|
108
|
+
},
|
|
109
|
+
{
|
|
110
|
+
"name": "can-close",
|
|
111
|
+
"value": { "type": "boolean", "default": "false" }
|
|
112
|
+
},
|
|
113
|
+
{
|
|
114
|
+
"name": "no-arrow",
|
|
115
|
+
"value": { "type": "boolean", "default": "false" }
|
|
116
|
+
},
|
|
117
|
+
{
|
|
118
|
+
"name": "distance",
|
|
119
|
+
"value": { "type": "number", "default": "8" }
|
|
120
|
+
},
|
|
121
|
+
{
|
|
122
|
+
"name": "skidding",
|
|
123
|
+
"value": { "type": "number", "default": "0" }
|
|
124
|
+
},
|
|
125
|
+
{
|
|
126
|
+
"name": "flip",
|
|
127
|
+
"value": { "type": "boolean", "default": "false" }
|
|
128
|
+
},
|
|
129
|
+
{
|
|
130
|
+
"name": "cross-axis",
|
|
131
|
+
"value": { "type": "boolean", "default": "false" }
|
|
132
|
+
},
|
|
133
|
+
{
|
|
134
|
+
"name": "fallback-placements",
|
|
135
|
+
"value": { "type": "Directions[]" }
|
|
136
|
+
}
|
|
137
|
+
],
|
|
138
|
+
"events": [],
|
|
139
|
+
"js": {
|
|
140
|
+
"properties": [
|
|
141
|
+
{ "name": "show", "type": "boolean" },
|
|
142
|
+
{ "name": "placement", "type": "Directions" },
|
|
143
|
+
{ "name": "tooltip", "type": "boolean" },
|
|
144
|
+
{ "name": "callout", "type": "boolean" },
|
|
145
|
+
{ "name": "popover", "type": "boolean" },
|
|
146
|
+
{ "name": "highlight", "type": "boolean" },
|
|
147
|
+
{ "name": "canClose", "type": "boolean" },
|
|
148
|
+
{ "name": "noArrow", "type": "boolean" },
|
|
149
|
+
{ "name": "distance", "type": "number" },
|
|
150
|
+
{ "name": "skidding", "type": "number" },
|
|
151
|
+
{ "name": "flip", "type": "boolean" },
|
|
152
|
+
{ "name": "crossAxis", "type": "boolean" },
|
|
153
|
+
{ "name": "fallbackPlacements", "type": "Directions[]" },
|
|
154
|
+
{ "name": "_initialPlacement" },
|
|
155
|
+
{ "name": "_actualDirection" }
|
|
156
|
+
],
|
|
157
|
+
"events": []
|
|
158
|
+
}
|
|
159
|
+
},
|
|
80
160
|
{
|
|
81
161
|
"name": "w-badge",
|
|
82
162
|
"description": "`w-badge` is used for showing a small amount of non-interactive color-categorized metadata, like a status or count.\n\n[See Storybook for usage examples](https://warp-ds.github.io/elements/?path=/docs/layout-badge--docs)\n---\n",
|
|
@@ -858,83 +938,6 @@
|
|
|
858
938
|
],
|
|
859
939
|
"events": []
|
|
860
940
|
}
|
|
861
|
-
},
|
|
862
|
-
{
|
|
863
|
-
"name": "w-attention",
|
|
864
|
-
"description": "\n---\n",
|
|
865
|
-
"doc-url": "",
|
|
866
|
-
"attributes": [
|
|
867
|
-
{
|
|
868
|
-
"name": "show",
|
|
869
|
-
"value": { "type": "boolean", "default": "false" }
|
|
870
|
-
},
|
|
871
|
-
{
|
|
872
|
-
"name": "placement",
|
|
873
|
-
"value": { "type": "string", "default": "'bottom'" }
|
|
874
|
-
},
|
|
875
|
-
{
|
|
876
|
-
"name": "tooltip",
|
|
877
|
-
"value": { "type": "boolean", "default": "false" }
|
|
878
|
-
},
|
|
879
|
-
{
|
|
880
|
-
"name": "callout",
|
|
881
|
-
"value": { "type": "boolean", "default": "false" }
|
|
882
|
-
},
|
|
883
|
-
{
|
|
884
|
-
"name": "popover",
|
|
885
|
-
"value": { "type": "boolean", "default": "false" }
|
|
886
|
-
},
|
|
887
|
-
{
|
|
888
|
-
"name": "highlight",
|
|
889
|
-
"value": { "type": "boolean", "default": "false" }
|
|
890
|
-
},
|
|
891
|
-
{
|
|
892
|
-
"name": "canClose",
|
|
893
|
-
"value": { "type": "boolean", "default": "false" }
|
|
894
|
-
},
|
|
895
|
-
{
|
|
896
|
-
"name": "noArrow",
|
|
897
|
-
"value": { "type": "boolean", "default": "false" }
|
|
898
|
-
},
|
|
899
|
-
{
|
|
900
|
-
"name": "distance",
|
|
901
|
-
"value": { "type": "number", "default": "8" }
|
|
902
|
-
},
|
|
903
|
-
{
|
|
904
|
-
"name": "skidding",
|
|
905
|
-
"value": { "type": "number", "default": "0" }
|
|
906
|
-
},
|
|
907
|
-
{
|
|
908
|
-
"name": "flip",
|
|
909
|
-
"value": { "type": "boolean", "default": "false" }
|
|
910
|
-
},
|
|
911
|
-
{
|
|
912
|
-
"name": "crossAxis",
|
|
913
|
-
"value": { "type": "boolean", "default": "false" }
|
|
914
|
-
},
|
|
915
|
-
{ "name": "fallbackPlacements", "value": { "type": "array" } }
|
|
916
|
-
],
|
|
917
|
-
"events": [],
|
|
918
|
-
"js": {
|
|
919
|
-
"properties": [
|
|
920
|
-
{ "name": "show", "type": "boolean" },
|
|
921
|
-
{ "name": "placement", "type": "string" },
|
|
922
|
-
{ "name": "tooltip", "type": "boolean" },
|
|
923
|
-
{ "name": "callout", "type": "boolean" },
|
|
924
|
-
{ "name": "popover", "type": "boolean" },
|
|
925
|
-
{ "name": "highlight", "type": "boolean" },
|
|
926
|
-
{ "name": "canClose", "type": "boolean" },
|
|
927
|
-
{ "name": "noArrow", "type": "boolean" },
|
|
928
|
-
{ "name": "distance", "type": "number" },
|
|
929
|
-
{ "name": "skidding", "type": "number" },
|
|
930
|
-
{ "name": "flip", "type": "boolean" },
|
|
931
|
-
{ "name": "crossAxis", "type": "boolean" },
|
|
932
|
-
{ "name": "_initialPlacement" },
|
|
933
|
-
{ "name": "_actualDirection" },
|
|
934
|
-
{ "name": "fallbackPlacements", "type": "array" }
|
|
935
|
-
],
|
|
936
|
-
"events": []
|
|
937
|
-
}
|
|
938
941
|
}
|
|
939
942
|
]
|
|
940
943
|
},
|