This repository was archived by the owner on Jan 6, 2022. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 2
Expand file tree
/
Copy pathjson-viewer.d.ts
More file actions
161 lines (145 loc) · 5.2 KB
/
json-viewer.d.ts
File metadata and controls
161 lines (145 loc) · 5.2 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
/**
* DO NOT EDIT
*
* This file was automatically generated by
* https://github.com/Polymer/tools/tree/master/packages/gen-typescript-declarations
*
* To modify these typings, edit the source file(s):
* json-viewer.js
*/
// tslint:disable:variable-name Describing an API that's defined elsewhere.
// tslint:disable:no-any describes the API as best we are able today
import {LitElement, html, css} from 'lit-element';
import {JsonParser} from './json-parser.js';
/**
* `<json-viewer>` A JSON payload viewer for the JSON response.
*
* This element uses a web worker to process the JSON data.
* To simplify our lives and app build process the worker script is embeded in the
* imported template body. It will extract worker data from it and create the
* worker. Otherwise build process would need to incude a worker script file
* into set path which is not very programmer friendly.
*
* ### Example
*
* ```html
* <json-viewer json='{"json": "test"}'></json-viewer>
* ```
*
* ## Custom search
*
* If the platform doesn't support native text search, this element implements
* `ArcBehaviors.TextSearchBehavior` and exposes the `query` attribute.
* Set any text to the `query` attribute and it will automatically highlight
* occurance of the text.
* See demo for example.
*
* ## Big numbers in JavaScript
*
* This element marks all numbers that are above `Number.MAX_SAFE_INTEGER` value
* and locates the numeric value in source json if passed json was a string or
* when `raw` attribute was set. In this case it will display a warning and
* explanation about use of big numbers in JavaScript.
* See js-max-number-error element documentation for more information.
*
* ## Content actions
*
* The element can render a actions pane above the code view. Action pane is to
* display content actions that is relevan in context of the response displayed
* below the icon buttons. It should be icon buttons or just buttons added to this
* view.
*
* ```html
* <json-viewer json='{"json": "test"}'>
* <paper-icon-button slot="content-action"
* title="Copy content to clipboard" icon="arc:content-copy"></paper-icon-button>
* </json-viewer>
* ```
*
* ### Styling
*
* `<json-viewer>` provides the following custom properties and mixins for styling:
*
* Custom property | Description | Default
* ----------------|-------------|----------
* `--json-viewer` | Mixin applied to the element | `{}`
* `--code-type-null-value-color` | Color of the null value. | `#708`
* `--code-type-boolean-value-color` | Color of the boolean value | `#708`
* `--code-punctuation-value-color` | Punctuation color. | `black`
* `--code-type-number-value-color` | Color of the numeric value | `blue`
* `--code-type-text-value-color` | Color of the string value. | `#295469`
* `--code-array-index-color` | Color of the array counter. | `rgb(119, 119, 119)`
* `--code-type-link-color` | Color of link inserted into the viewer. | `#1976d2`
* `--json-viewer-node` | Mixin applied to a "node" | `{}`
* `--code-dimmed-punctuation-opacity` | Value of the opacity on the "dimmed" punctuation | `0.34`
* `--code-background-color` | Background color of the code area | ``
*/
declare class JsonViewer extends LitElement {
readonly isError: any;
/**
* True if error ocurred when parsing the `json` data.
* An error message will be displayed.
*/
_isError: boolean|null|undefined;
readonly working: any;
/**
* True when JSON is beeing parsed.
*/
_working: boolean|null|undefined;
/**
* JSON data to parse and display.
* It can be either JS object (already parsed string) or string value.
* If the passed object is a string then JSON.parse function will be
* used to parse string.
*/
json: string|null|undefined;
/**
* If it's possible, set this property to the JSON string.
* It will help to handle big numbers that are not parsed correctly by
* the JSON.parse function. The parser will try to locate the number
* in the source string and display it in the correct form.
*
* P.S.
* Calling JSON.stringify on a JS won't help here :) Must be source
* string.
*/
raw: string|null|undefined;
constructor();
firstUpdated(): void;
render(): any;
_clearOutput(): void;
_writeOutput(text: any): void;
/**
* Called when `json` property changed. It starts parsing the data.
*/
_changed(json: any): void;
_printPrimitiveValue(value: any, klas: any): void;
_reportResult(html: any): void;
/**
* Called when workr error received.
*/
_reportError(): void;
/**
* Compute if output should be shown.
*/
_computeShowOutput(working: any, isError: any, json: any): any;
/**
* Called when the user click on the display area. It will handle view toggle and links clicks.
*/
_handleDisplayClick(e: any): void;
_dispatchChangeUrl(url: any): void;
_dispatchNewRequest(url: any): void;
/**
* Computes CSS class for the actions pane.
*
* @param showOutput The `showOutput` propety value of the element.
* @returns CSS class names for the panel depending on state of the
* `showOutput`property.
*/
_computeActionsPanelClass(showOutput: Boolean|null): String|null;
}
declare global {
interface HTMLElementTagNameMap {
"json-viewer": JsonViewer;
}
}