@kubex/zinc 1.1.180 → 1.1.181
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/custom-elements.json +691 -453
- package/dist/vscode.html-custom-data.json +102 -64
- package/dist/web-types.json +243 -163
- package/dist/zn.d.ts +108 -11
- package/dist/zn.min.js +330 -321
- package/docs/pages/components/chart.md +49 -0
- package/docs/pages/components/stat.md +74 -0
- package/docs/pages/components/tile.md +16 -0
- package/package.json +1 -1
- package/src/components/chart/builders.ts +15 -0
- package/src/components/chart/chart-live.test.ts +82 -0
- package/src/components/chart/chart.component.ts +111 -14
- package/src/components/chart/live.test.ts +96 -0
- package/src/components/chart/live.ts +164 -0
- package/src/components/cols/cols.scss +16 -0
- package/src/components/stat/stat.component.ts +81 -12
- package/src/components/stat/stat.scss +64 -0
- package/src/components/tile/tile.component.ts +3 -0
- package/src/components/tile/tile.scss +30 -0
|
@@ -56,79 +56,6 @@
|
|
|
56
56
|
}
|
|
57
57
|
]
|
|
58
58
|
},
|
|
59
|
-
{
|
|
60
|
-
"kind": "javascript-module",
|
|
61
|
-
"path": "components/action-bar/action-bar.js",
|
|
62
|
-
"declarations": [
|
|
63
|
-
{
|
|
64
|
-
"kind": "class",
|
|
65
|
-
"description": "",
|
|
66
|
-
"name": "ZnActionBar",
|
|
67
|
-
"cssProperties": [
|
|
68
|
-
{
|
|
69
|
-
"description": "An example CSS custom property.",
|
|
70
|
-
"name": "--example"
|
|
71
|
-
}
|
|
72
|
-
],
|
|
73
|
-
"cssParts": [
|
|
74
|
-
{
|
|
75
|
-
"description": "The component's base wrapper.",
|
|
76
|
-
"name": "base"
|
|
77
|
-
}
|
|
78
|
-
],
|
|
79
|
-
"slots": [
|
|
80
|
-
{
|
|
81
|
-
"description": "The default slot.",
|
|
82
|
-
"name": ""
|
|
83
|
-
},
|
|
84
|
-
{
|
|
85
|
-
"description": "An example slot.",
|
|
86
|
-
"name": "example"
|
|
87
|
-
}
|
|
88
|
-
],
|
|
89
|
-
"members": [
|
|
90
|
-
{
|
|
91
|
-
"kind": "field",
|
|
92
|
-
"name": "localize",
|
|
93
|
-
"privacy": "private",
|
|
94
|
-
"readonly": true,
|
|
95
|
-
"default": "new LocalizeController(this)"
|
|
96
|
-
}
|
|
97
|
-
],
|
|
98
|
-
"events": [
|
|
99
|
-
{
|
|
100
|
-
"description": "Emitted as an example.",
|
|
101
|
-
"name": "zn-event-name"
|
|
102
|
-
}
|
|
103
|
-
],
|
|
104
|
-
"superclass": {
|
|
105
|
-
"name": "ZincElement",
|
|
106
|
-
"module": "/src/internal/zinc-element"
|
|
107
|
-
},
|
|
108
|
-
"summary": "Short summary of the component's intended use.",
|
|
109
|
-
"tagNameWithoutPrefix": "action-bar",
|
|
110
|
-
"tagName": "zn-action-bar",
|
|
111
|
-
"customElement": true,
|
|
112
|
-
"jsDoc": "/**\n * @summary Short summary of the component's intended use.\n * @documentation https://zinc.style/components/action-bar\n * @status experimental\n * @since 1.0\n *\n * @dependency zn-example\n *\n * @event zn-event-name - Emitted as an example.\n *\n * @slot - The default slot.\n * @slot example - An example slot.\n *\n * @csspart base - The component's base wrapper.\n *\n * @cssproperty --example - An example CSS custom property.\n */",
|
|
113
|
-
"documentation": "https://zinc.style/components/action-bar",
|
|
114
|
-
"status": "experimental",
|
|
115
|
-
"since": "1.0",
|
|
116
|
-
"dependencies": [
|
|
117
|
-
"zn-example"
|
|
118
|
-
]
|
|
119
|
-
}
|
|
120
|
-
],
|
|
121
|
-
"exports": [
|
|
122
|
-
{
|
|
123
|
-
"kind": "js",
|
|
124
|
-
"name": "default",
|
|
125
|
-
"declaration": {
|
|
126
|
-
"name": "ZnActionBar",
|
|
127
|
-
"module": "components/action-bar/action-bar.js"
|
|
128
|
-
}
|
|
129
|
-
}
|
|
130
|
-
]
|
|
131
|
-
},
|
|
132
59
|
{
|
|
133
60
|
"kind": "javascript-module",
|
|
134
61
|
"path": "components/alert/alert.js",
|
|
@@ -323,6 +250,79 @@
|
|
|
323
250
|
}
|
|
324
251
|
]
|
|
325
252
|
},
|
|
253
|
+
{
|
|
254
|
+
"kind": "javascript-module",
|
|
255
|
+
"path": "components/action-bar/action-bar.js",
|
|
256
|
+
"declarations": [
|
|
257
|
+
{
|
|
258
|
+
"kind": "class",
|
|
259
|
+
"description": "",
|
|
260
|
+
"name": "ZnActionBar",
|
|
261
|
+
"cssProperties": [
|
|
262
|
+
{
|
|
263
|
+
"description": "An example CSS custom property.",
|
|
264
|
+
"name": "--example"
|
|
265
|
+
}
|
|
266
|
+
],
|
|
267
|
+
"cssParts": [
|
|
268
|
+
{
|
|
269
|
+
"description": "The component's base wrapper.",
|
|
270
|
+
"name": "base"
|
|
271
|
+
}
|
|
272
|
+
],
|
|
273
|
+
"slots": [
|
|
274
|
+
{
|
|
275
|
+
"description": "The default slot.",
|
|
276
|
+
"name": ""
|
|
277
|
+
},
|
|
278
|
+
{
|
|
279
|
+
"description": "An example slot.",
|
|
280
|
+
"name": "example"
|
|
281
|
+
}
|
|
282
|
+
],
|
|
283
|
+
"members": [
|
|
284
|
+
{
|
|
285
|
+
"kind": "field",
|
|
286
|
+
"name": "localize",
|
|
287
|
+
"privacy": "private",
|
|
288
|
+
"readonly": true,
|
|
289
|
+
"default": "new LocalizeController(this)"
|
|
290
|
+
}
|
|
291
|
+
],
|
|
292
|
+
"events": [
|
|
293
|
+
{
|
|
294
|
+
"description": "Emitted as an example.",
|
|
295
|
+
"name": "zn-event-name"
|
|
296
|
+
}
|
|
297
|
+
],
|
|
298
|
+
"superclass": {
|
|
299
|
+
"name": "ZincElement",
|
|
300
|
+
"module": "/src/internal/zinc-element"
|
|
301
|
+
},
|
|
302
|
+
"summary": "Short summary of the component's intended use.",
|
|
303
|
+
"tagNameWithoutPrefix": "action-bar",
|
|
304
|
+
"tagName": "zn-action-bar",
|
|
305
|
+
"customElement": true,
|
|
306
|
+
"jsDoc": "/**\n * @summary Short summary of the component's intended use.\n * @documentation https://zinc.style/components/action-bar\n * @status experimental\n * @since 1.0\n *\n * @dependency zn-example\n *\n * @event zn-event-name - Emitted as an example.\n *\n * @slot - The default slot.\n * @slot example - An example slot.\n *\n * @csspart base - The component's base wrapper.\n *\n * @cssproperty --example - An example CSS custom property.\n */",
|
|
307
|
+
"documentation": "https://zinc.style/components/action-bar",
|
|
308
|
+
"status": "experimental",
|
|
309
|
+
"since": "1.0",
|
|
310
|
+
"dependencies": [
|
|
311
|
+
"zn-example"
|
|
312
|
+
]
|
|
313
|
+
}
|
|
314
|
+
],
|
|
315
|
+
"exports": [
|
|
316
|
+
{
|
|
317
|
+
"kind": "js",
|
|
318
|
+
"name": "default",
|
|
319
|
+
"declaration": {
|
|
320
|
+
"name": "ZnActionBar",
|
|
321
|
+
"module": "components/action-bar/action-bar.js"
|
|
322
|
+
}
|
|
323
|
+
}
|
|
324
|
+
]
|
|
325
|
+
},
|
|
326
326
|
{
|
|
327
327
|
"kind": "javascript-module",
|
|
328
328
|
"path": "components/animated-button/animated-button.js",
|
|
@@ -3583,6 +3583,33 @@
|
|
|
3583
3583
|
"default": "''",
|
|
3584
3584
|
"attribute": "data-url"
|
|
3585
3585
|
},
|
|
3586
|
+
{
|
|
3587
|
+
"kind": "field",
|
|
3588
|
+
"name": "streamUrl",
|
|
3589
|
+
"type": {
|
|
3590
|
+
"text": "string"
|
|
3591
|
+
},
|
|
3592
|
+
"default": "''",
|
|
3593
|
+
"attribute": "stream-url"
|
|
3594
|
+
},
|
|
3595
|
+
{
|
|
3596
|
+
"kind": "field",
|
|
3597
|
+
"name": "liveRenewUrl",
|
|
3598
|
+
"type": {
|
|
3599
|
+
"text": "string"
|
|
3600
|
+
},
|
|
3601
|
+
"default": "''",
|
|
3602
|
+
"attribute": "live-renew-url"
|
|
3603
|
+
},
|
|
3604
|
+
{
|
|
3605
|
+
"kind": "field",
|
|
3606
|
+
"name": "hideZero",
|
|
3607
|
+
"type": {
|
|
3608
|
+
"text": "boolean"
|
|
3609
|
+
},
|
|
3610
|
+
"default": "false",
|
|
3611
|
+
"attribute": "hide-zero"
|
|
3612
|
+
},
|
|
3586
3613
|
{
|
|
3587
3614
|
"kind": "field",
|
|
3588
3615
|
"name": "liveInterval",
|
|
@@ -3725,6 +3752,64 @@
|
|
|
3725
3752
|
},
|
|
3726
3753
|
"privacy": "private"
|
|
3727
3754
|
},
|
|
3755
|
+
{
|
|
3756
|
+
"kind": "field",
|
|
3757
|
+
"name": "pollAbort",
|
|
3758
|
+
"type": {
|
|
3759
|
+
"text": "AbortController | undefined"
|
|
3760
|
+
},
|
|
3761
|
+
"privacy": "private"
|
|
3762
|
+
},
|
|
3763
|
+
{
|
|
3764
|
+
"kind": "field",
|
|
3765
|
+
"name": "liveStatus",
|
|
3766
|
+
"type": {
|
|
3767
|
+
"text": "string"
|
|
3768
|
+
},
|
|
3769
|
+
"privacy": "private",
|
|
3770
|
+
"default": "'connecting'"
|
|
3771
|
+
},
|
|
3772
|
+
{
|
|
3773
|
+
"kind": "field",
|
|
3774
|
+
"name": "liveWindow",
|
|
3775
|
+
"privacy": "private",
|
|
3776
|
+
"default": "new LiveWindow()"
|
|
3777
|
+
},
|
|
3778
|
+
{
|
|
3779
|
+
"kind": "field",
|
|
3780
|
+
"name": "replaceLiveSeries",
|
|
3781
|
+
"type": {
|
|
3782
|
+
"text": "boolean"
|
|
3783
|
+
},
|
|
3784
|
+
"privacy": "private",
|
|
3785
|
+
"default": "true"
|
|
3786
|
+
},
|
|
3787
|
+
{
|
|
3788
|
+
"kind": "field",
|
|
3789
|
+
"name": "transport",
|
|
3790
|
+
"privacy": "private",
|
|
3791
|
+
"default": "new LiveTransport((frame, snapshot) => { const applied = this.liveWindow.apply(frame, snapshot); this.replaceLiveSeries ||= snapshot || applied.prediction !== undefined; this.data = this.liveSeries(); this.requestUpdate(); }, status => { this.liveStatus = status; this.dispatchEvent(new CustomEvent('zn-live-status', { detail: { status }, bubbles: true, composed: true })); }, serverTime => { this.liveWindow.advance(serverTime); this.data = this.liveSeries(); })"
|
|
3792
|
+
},
|
|
3793
|
+
{
|
|
3794
|
+
"kind": "method",
|
|
3795
|
+
"name": "liveTransitionDuration",
|
|
3796
|
+
"privacy": "private"
|
|
3797
|
+
},
|
|
3798
|
+
{
|
|
3799
|
+
"kind": "method",
|
|
3800
|
+
"name": "liveSeries",
|
|
3801
|
+
"privacy": "private",
|
|
3802
|
+
"return": {
|
|
3803
|
+
"type": {
|
|
3804
|
+
"text": "SeriesItem[]"
|
|
3805
|
+
}
|
|
3806
|
+
}
|
|
3807
|
+
},
|
|
3808
|
+
{
|
|
3809
|
+
"kind": "method",
|
|
3810
|
+
"name": "updateChart",
|
|
3811
|
+
"privacy": "private"
|
|
3812
|
+
},
|
|
3728
3813
|
{
|
|
3729
3814
|
"kind": "field",
|
|
3730
3815
|
"name": "resizeObserver",
|
|
@@ -3782,6 +3867,11 @@
|
|
|
3782
3867
|
"name": "initChart",
|
|
3783
3868
|
"privacy": "private"
|
|
3784
3869
|
},
|
|
3870
|
+
{
|
|
3871
|
+
"kind": "method",
|
|
3872
|
+
"name": "stopLive",
|
|
3873
|
+
"privacy": "private"
|
|
3874
|
+
},
|
|
3785
3875
|
{
|
|
3786
3876
|
"kind": "method",
|
|
3787
3877
|
"name": "startLive",
|
|
@@ -3873,6 +3963,30 @@
|
|
|
3873
3963
|
"default": "''",
|
|
3874
3964
|
"fieldName": "dataUrl"
|
|
3875
3965
|
},
|
|
3966
|
+
{
|
|
3967
|
+
"name": "stream-url",
|
|
3968
|
+
"type": {
|
|
3969
|
+
"text": "string"
|
|
3970
|
+
},
|
|
3971
|
+
"default": "''",
|
|
3972
|
+
"fieldName": "streamUrl"
|
|
3973
|
+
},
|
|
3974
|
+
{
|
|
3975
|
+
"name": "live-renew-url",
|
|
3976
|
+
"type": {
|
|
3977
|
+
"text": "string"
|
|
3978
|
+
},
|
|
3979
|
+
"default": "''",
|
|
3980
|
+
"fieldName": "liveRenewUrl"
|
|
3981
|
+
},
|
|
3982
|
+
{
|
|
3983
|
+
"name": "hide-zero",
|
|
3984
|
+
"type": {
|
|
3985
|
+
"text": "boolean"
|
|
3986
|
+
},
|
|
3987
|
+
"default": "false",
|
|
3988
|
+
"fieldName": "hideZero"
|
|
3989
|
+
},
|
|
3876
3990
|
{
|
|
3877
3991
|
"name": "live-interval",
|
|
3878
3992
|
"type": {
|
|
@@ -12940,355 +13054,6 @@
|
|
|
12940
13054
|
}
|
|
12941
13055
|
]
|
|
12942
13056
|
},
|
|
12943
|
-
{
|
|
12944
|
-
"kind": "javascript-module",
|
|
12945
|
-
"path": "components/dialog/dialog.js",
|
|
12946
|
-
"declarations": [
|
|
12947
|
-
{
|
|
12948
|
-
"kind": "class",
|
|
12949
|
-
"description": "",
|
|
12950
|
-
"name": "ZnDialog",
|
|
12951
|
-
"cssProperties": [
|
|
12952
|
-
{
|
|
12953
|
-
"description": "The preferred width of the dialog. Note the dialog will shrink to accommodate smaller screens.",
|
|
12954
|
-
"name": "--width"
|
|
12955
|
-
},
|
|
12956
|
-
{
|
|
12957
|
-
"description": "The amount of padding to use for the header.",
|
|
12958
|
-
"name": "--header-spacing"
|
|
12959
|
-
},
|
|
12960
|
-
{
|
|
12961
|
-
"description": "The amount of padding to use for the body.",
|
|
12962
|
-
"name": "--body-spacing"
|
|
12963
|
-
},
|
|
12964
|
-
{
|
|
12965
|
-
"description": "The amount of padding to use for the footer.",
|
|
12966
|
-
"name": "--footer-spacing"
|
|
12967
|
-
}
|
|
12968
|
-
],
|
|
12969
|
-
"cssParts": [
|
|
12970
|
-
{
|
|
12971
|
-
"description": "The component's base wrapper.",
|
|
12972
|
-
"name": "base"
|
|
12973
|
-
},
|
|
12974
|
-
{
|
|
12975
|
-
"description": "The dialog's header. This element wraps the title and header actions.",
|
|
12976
|
-
"name": "header"
|
|
12977
|
-
},
|
|
12978
|
-
{
|
|
12979
|
-
"description": "Optional actions to add to the header. Works best with `<zn-button>` elements.",
|
|
12980
|
-
"name": "header-actions"
|
|
12981
|
-
},
|
|
12982
|
-
{
|
|
12983
|
-
"description": "The dialog's title.",
|
|
12984
|
-
"name": "title"
|
|
12985
|
-
},
|
|
12986
|
-
{
|
|
12987
|
-
"description": "The dialog's close button.",
|
|
12988
|
-
"name": "close-button"
|
|
12989
|
-
},
|
|
12990
|
-
{
|
|
12991
|
-
"description": "The close buttons exported `base` part.",
|
|
12992
|
-
"name": "close-button__base"
|
|
12993
|
-
},
|
|
12994
|
-
{
|
|
12995
|
-
"description": "The dialog's body.",
|
|
12996
|
-
"name": "body"
|
|
12997
|
-
},
|
|
12998
|
-
{
|
|
12999
|
-
"description": "The dialog's footer.",
|
|
13000
|
-
"name": "footer"
|
|
13001
|
-
}
|
|
13002
|
-
],
|
|
13003
|
-
"slots": [
|
|
13004
|
-
{
|
|
13005
|
-
"description": "The default slot.",
|
|
13006
|
-
"name": ""
|
|
13007
|
-
},
|
|
13008
|
-
{
|
|
13009
|
-
"description": "The dialog's label. Alternatively you can use the `label` attribute.",
|
|
13010
|
-
"name": "label"
|
|
13011
|
-
},
|
|
13012
|
-
{
|
|
13013
|
-
"description": "Optional icon to add to the left of the dialog's label (title). A color will be applied to the icon depending on the dialog variant.",
|
|
13014
|
-
"name": "header-icon"
|
|
13015
|
-
},
|
|
13016
|
-
{
|
|
13017
|
-
"description": "Optional Intro text to display below the icon, when using the variant `announcement`.",
|
|
13018
|
-
"name": "announcement-intro"
|
|
13019
|
-
},
|
|
13020
|
-
{
|
|
13021
|
-
"description": "Optional actions to add to the header. Works best with `<zn-button>` elements.",
|
|
13022
|
-
"name": "header-actions"
|
|
13023
|
-
},
|
|
13024
|
-
{
|
|
13025
|
-
"description": "The dialog's footer. This is typically used for buttons representing various options.",
|
|
13026
|
-
"name": "footer"
|
|
13027
|
-
},
|
|
13028
|
-
{
|
|
13029
|
-
"description": "Optional text to include below the footer buttons, when using the variant `announcement`.",
|
|
13030
|
-
"name": "footer-text"
|
|
13031
|
-
}
|
|
13032
|
-
],
|
|
13033
|
-
"members": [
|
|
13034
|
-
{
|
|
13035
|
-
"kind": "field",
|
|
13036
|
-
"name": "dependencies",
|
|
13037
|
-
"type": {
|
|
13038
|
-
"text": "object"
|
|
13039
|
-
},
|
|
13040
|
-
"static": true,
|
|
13041
|
-
"default": "{ 'zn-button': ZnButton }"
|
|
13042
|
-
},
|
|
13043
|
-
{
|
|
13044
|
-
"kind": "field",
|
|
13045
|
-
"name": "hasSlotController",
|
|
13046
|
-
"privacy": "private",
|
|
13047
|
-
"readonly": true,
|
|
13048
|
-
"default": "new HasSlotController(this, '[default]', 'footer')"
|
|
13049
|
-
},
|
|
13050
|
-
{
|
|
13051
|
-
"kind": "field",
|
|
13052
|
-
"name": "closeWatcher",
|
|
13053
|
-
"type": {
|
|
13054
|
-
"text": "CloseWatcher | null"
|
|
13055
|
-
},
|
|
13056
|
-
"privacy": "private"
|
|
13057
|
-
},
|
|
13058
|
-
{
|
|
13059
|
-
"kind": "field",
|
|
13060
|
-
"name": "dialog",
|
|
13061
|
-
"type": {
|
|
13062
|
-
"text": "HTMLDialogElement"
|
|
13063
|
-
}
|
|
13064
|
-
},
|
|
13065
|
-
{
|
|
13066
|
-
"kind": "field",
|
|
13067
|
-
"name": "closer",
|
|
13068
|
-
"type": {
|
|
13069
|
-
"text": "HTMLButtonElement"
|
|
13070
|
-
}
|
|
13071
|
-
},
|
|
13072
|
-
{
|
|
13073
|
-
"kind": "field",
|
|
13074
|
-
"name": "variant",
|
|
13075
|
-
"type": {
|
|
13076
|
-
"text": "'default' | 'warning' | 'announcement'"
|
|
13077
|
-
},
|
|
13078
|
-
"default": "'default'",
|
|
13079
|
-
"description": "The dialog's theme variant.",
|
|
13080
|
-
"attribute": "variant",
|
|
13081
|
-
"reflects": true
|
|
13082
|
-
},
|
|
13083
|
-
{
|
|
13084
|
-
"kind": "field",
|
|
13085
|
-
"name": "size",
|
|
13086
|
-
"type": {
|
|
13087
|
-
"text": "'small' | 'medium' | 'large' | 'custom'"
|
|
13088
|
-
},
|
|
13089
|
-
"default": "'medium'",
|
|
13090
|
-
"description": "The dialog's size.",
|
|
13091
|
-
"attribute": "size",
|
|
13092
|
-
"reflects": true
|
|
13093
|
-
},
|
|
13094
|
-
{
|
|
13095
|
-
"kind": "field",
|
|
13096
|
-
"name": "open",
|
|
13097
|
-
"type": {
|
|
13098
|
-
"text": "boolean"
|
|
13099
|
-
},
|
|
13100
|
-
"default": "false",
|
|
13101
|
-
"description": "Indicated whether of not the dialog is open. You can toggle this attribute to show and hide the dialog, or you can\nuse the `show()` and `hide()` methods and this attribute will reflect the dialog's state.",
|
|
13102
|
-
"attribute": "open",
|
|
13103
|
-
"reflects": true
|
|
13104
|
-
},
|
|
13105
|
-
{
|
|
13106
|
-
"kind": "field",
|
|
13107
|
-
"name": "label",
|
|
13108
|
-
"type": {
|
|
13109
|
-
"text": "string"
|
|
13110
|
-
},
|
|
13111
|
-
"description": "The dialog's label as displayed in the header. You should always include a relevant label even when using\n`no-header`, as it is required for proper accessibility. If you need to display HTML, use the `label` slot instead.",
|
|
13112
|
-
"attribute": "label",
|
|
13113
|
-
"reflects": true
|
|
13114
|
-
},
|
|
13115
|
-
{
|
|
13116
|
-
"kind": "field",
|
|
13117
|
-
"name": "cosmic",
|
|
13118
|
-
"type": {
|
|
13119
|
-
"text": "boolean"
|
|
13120
|
-
},
|
|
13121
|
-
"default": "false",
|
|
13122
|
-
"attribute": "cosmic",
|
|
13123
|
-
"reflects": true
|
|
13124
|
-
},
|
|
13125
|
-
{
|
|
13126
|
-
"kind": "field",
|
|
13127
|
-
"name": "noHeader",
|
|
13128
|
-
"type": {
|
|
13129
|
-
"text": "boolean"
|
|
13130
|
-
},
|
|
13131
|
-
"default": "false",
|
|
13132
|
-
"description": "Disables the header. This will also remove the default close button, so please ensure you provide an easy,\naccessible way to close the dialog.",
|
|
13133
|
-
"attribute": "no-header",
|
|
13134
|
-
"reflects": true
|
|
13135
|
-
},
|
|
13136
|
-
{
|
|
13137
|
-
"kind": "field",
|
|
13138
|
-
"name": "trigger",
|
|
13139
|
-
"type": {
|
|
13140
|
-
"text": "string"
|
|
13141
|
-
},
|
|
13142
|
-
"description": "The dialog's trigger element. This is used to open the dialog when clicked. If you do not provide a trigger, you\nwill need to manually open the dialog using the `show()` method.",
|
|
13143
|
-
"attribute": "trigger",
|
|
13144
|
-
"reflects": true
|
|
13145
|
-
},
|
|
13146
|
-
{
|
|
13147
|
-
"kind": "method",
|
|
13148
|
-
"name": "requestClose",
|
|
13149
|
-
"privacy": "private",
|
|
13150
|
-
"parameters": [
|
|
13151
|
-
{
|
|
13152
|
-
"name": "source",
|
|
13153
|
-
"type": {
|
|
13154
|
-
"text": "'close-button' | 'keyboard' | 'overlay'"
|
|
13155
|
-
}
|
|
13156
|
-
}
|
|
13157
|
-
]
|
|
13158
|
-
},
|
|
13159
|
-
{
|
|
13160
|
-
"kind": "method",
|
|
13161
|
-
"name": "addOpenListeners",
|
|
13162
|
-
"privacy": "private"
|
|
13163
|
-
},
|
|
13164
|
-
{
|
|
13165
|
-
"kind": "method",
|
|
13166
|
-
"name": "removeOpenListeners",
|
|
13167
|
-
"privacy": "private"
|
|
13168
|
-
},
|
|
13169
|
-
{
|
|
13170
|
-
"kind": "method",
|
|
13171
|
-
"name": "show",
|
|
13172
|
-
"description": "Shows the dialog."
|
|
13173
|
-
},
|
|
13174
|
-
{
|
|
13175
|
-
"kind": "method",
|
|
13176
|
-
"name": "hide",
|
|
13177
|
-
"description": "Hides the dialog."
|
|
13178
|
-
},
|
|
13179
|
-
{
|
|
13180
|
-
"kind": "field",
|
|
13181
|
-
"name": "closeClickHandler",
|
|
13182
|
-
"privacy": "private"
|
|
13183
|
-
}
|
|
13184
|
-
],
|
|
13185
|
-
"events": [
|
|
13186
|
-
{
|
|
13187
|
-
"description": "Emitted when the dialog is opens.",
|
|
13188
|
-
"name": "zn-show"
|
|
13189
|
-
},
|
|
13190
|
-
{
|
|
13191
|
-
"description": "Emitted when the dialog is closed.",
|
|
13192
|
-
"name": "zn-close"
|
|
13193
|
-
},
|
|
13194
|
-
{
|
|
13195
|
-
"type": {
|
|
13196
|
-
"text": "{ source: 'close-button' | 'keyboard' | 'overlay' }"
|
|
13197
|
-
},
|
|
13198
|
-
"description": "Emitted when the user attempts to close the dialog by clicking the close button, clicking the overlay, or pressing escape. Calling `event.preventDefault()` will keep the dialog open. Avoid using this unless closing the dialog will result in destructive behavior such as data loss.",
|
|
13199
|
-
"name": "zn-request-close"
|
|
13200
|
-
}
|
|
13201
|
-
],
|
|
13202
|
-
"attributes": [
|
|
13203
|
-
{
|
|
13204
|
-
"name": "variant",
|
|
13205
|
-
"type": {
|
|
13206
|
-
"text": "'default' | 'warning' | 'announcement'"
|
|
13207
|
-
},
|
|
13208
|
-
"default": "'default'",
|
|
13209
|
-
"description": "The dialog's theme variant.",
|
|
13210
|
-
"fieldName": "variant"
|
|
13211
|
-
},
|
|
13212
|
-
{
|
|
13213
|
-
"name": "size",
|
|
13214
|
-
"type": {
|
|
13215
|
-
"text": "'small' | 'medium' | 'large' | 'custom'"
|
|
13216
|
-
},
|
|
13217
|
-
"default": "'medium'",
|
|
13218
|
-
"description": "The dialog's size.",
|
|
13219
|
-
"fieldName": "size"
|
|
13220
|
-
},
|
|
13221
|
-
{
|
|
13222
|
-
"name": "open",
|
|
13223
|
-
"type": {
|
|
13224
|
-
"text": "boolean"
|
|
13225
|
-
},
|
|
13226
|
-
"default": "false",
|
|
13227
|
-
"description": "Indicated whether of not the dialog is open. You can toggle this attribute to show and hide the dialog, or you can\nuse the `show()` and `hide()` methods and this attribute will reflect the dialog's state.",
|
|
13228
|
-
"fieldName": "open"
|
|
13229
|
-
},
|
|
13230
|
-
{
|
|
13231
|
-
"name": "label",
|
|
13232
|
-
"type": {
|
|
13233
|
-
"text": "string"
|
|
13234
|
-
},
|
|
13235
|
-
"description": "The dialog's label as displayed in the header. You should always include a relevant label even when using\n`no-header`, as it is required for proper accessibility. If you need to display HTML, use the `label` slot instead.",
|
|
13236
|
-
"fieldName": "label"
|
|
13237
|
-
},
|
|
13238
|
-
{
|
|
13239
|
-
"name": "cosmic",
|
|
13240
|
-
"type": {
|
|
13241
|
-
"text": "boolean"
|
|
13242
|
-
},
|
|
13243
|
-
"default": "false",
|
|
13244
|
-
"fieldName": "cosmic"
|
|
13245
|
-
},
|
|
13246
|
-
{
|
|
13247
|
-
"name": "no-header",
|
|
13248
|
-
"type": {
|
|
13249
|
-
"text": "boolean"
|
|
13250
|
-
},
|
|
13251
|
-
"default": "false",
|
|
13252
|
-
"description": "Disables the header. This will also remove the default close button, so please ensure you provide an easy,\naccessible way to close the dialog.",
|
|
13253
|
-
"fieldName": "noHeader"
|
|
13254
|
-
},
|
|
13255
|
-
{
|
|
13256
|
-
"name": "trigger",
|
|
13257
|
-
"type": {
|
|
13258
|
-
"text": "string"
|
|
13259
|
-
},
|
|
13260
|
-
"description": "The dialog's trigger element. This is used to open the dialog when clicked. If you do not provide a trigger, you\nwill need to manually open the dialog using the `show()` method.",
|
|
13261
|
-
"fieldName": "trigger"
|
|
13262
|
-
}
|
|
13263
|
-
],
|
|
13264
|
-
"superclass": {
|
|
13265
|
-
"name": "ZincElement",
|
|
13266
|
-
"module": "/src/internal/zinc-element"
|
|
13267
|
-
},
|
|
13268
|
-
"summary": "Short summary of the component's intended use.",
|
|
13269
|
-
"tagNameWithoutPrefix": "dialog",
|
|
13270
|
-
"tagName": "zn-dialog",
|
|
13271
|
-
"customElement": true,
|
|
13272
|
-
"jsDoc": "/**\n * @summary Short summary of the component's intended use.\n * @documentation https://zinc.style/components/dialog\n * @status experimental\n * @since 1.0\n *\n * @dependency zn-button\n *\n * @event zn-show - Emitted when the dialog is opens.\n * @event zn-close - Emitted when the dialog is closed.\n * @event {{ source: 'close-button' | 'keyboard' | 'overlay' }} zn-request-close - Emitted when the user attempts to\n * close the dialog by clicking the close button, clicking the overlay, or pressing escape. Calling\n * `event.preventDefault()` will keep the dialog open. Avoid using this unless closing the dialog will result in\n * destructive behavior such as data loss.\n *\n * @slot - The default slot.\n * @slot label - The dialog's label. Alternatively you can use the `label` attribute.\n * @slot header-icon - Optional icon to add to the left of the dialog's label (title). A color will be applied\n * to the icon depending on the dialog variant.\n * @slot announcement-intro - Optional Intro text to display below the icon, when using the variant `announcement`.\n * @slot header-actions - Optional actions to add to the header. Works best with `<zn-button>` elements.\n * @slot footer - The dialog's footer. This is typically used for buttons representing various options.\n * @slot footer-text - Optional text to include below the footer buttons, when using the variant `announcement`.\n *\n * @csspart base - The component's base wrapper.\n * @csspart header - The dialog's header. This element wraps the title and header actions.\n * @csspart header-actions - Optional actions to add to the header. Works best with `<zn-button>` elements.\n * @csspart title - The dialog's title.\n * @csspart close-button - The dialog's close button.\n * @csspart close-button__base - The close buttons exported `base` part.\n * @csspart body - The dialog's body.\n * @csspart footer - The dialog's footer.\n *\n * @cssproperty --width - The preferred width of the dialog. Note the dialog will shrink to accommodate smaller screens.\n * @cssproperty --header-spacing - The amount of padding to use for the header.\n * @cssproperty --body-spacing - The amount of padding to use for the body.\n * @cssproperty --footer-spacing - The amount of padding to use for the footer.\n */",
|
|
13273
|
-
"documentation": "https://zinc.style/components/dialog",
|
|
13274
|
-
"status": "experimental",
|
|
13275
|
-
"since": "1.0",
|
|
13276
|
-
"dependencies": [
|
|
13277
|
-
"zn-button"
|
|
13278
|
-
]
|
|
13279
|
-
}
|
|
13280
|
-
],
|
|
13281
|
-
"exports": [
|
|
13282
|
-
{
|
|
13283
|
-
"kind": "js",
|
|
13284
|
-
"name": "default",
|
|
13285
|
-
"declaration": {
|
|
13286
|
-
"name": "ZnDialog",
|
|
13287
|
-
"module": "components/dialog/dialog.js"
|
|
13288
|
-
}
|
|
13289
|
-
}
|
|
13290
|
-
]
|
|
13291
|
-
},
|
|
13292
13057
|
{
|
|
13293
13058
|
"kind": "javascript-module",
|
|
13294
13059
|
"path": "components/dropdown/dropdown.js",
|
|
@@ -13715,6 +13480,355 @@
|
|
|
13715
13480
|
}
|
|
13716
13481
|
]
|
|
13717
13482
|
},
|
|
13483
|
+
{
|
|
13484
|
+
"kind": "javascript-module",
|
|
13485
|
+
"path": "components/dialog/dialog.js",
|
|
13486
|
+
"declarations": [
|
|
13487
|
+
{
|
|
13488
|
+
"kind": "class",
|
|
13489
|
+
"description": "",
|
|
13490
|
+
"name": "ZnDialog",
|
|
13491
|
+
"cssProperties": [
|
|
13492
|
+
{
|
|
13493
|
+
"description": "The preferred width of the dialog. Note the dialog will shrink to accommodate smaller screens.",
|
|
13494
|
+
"name": "--width"
|
|
13495
|
+
},
|
|
13496
|
+
{
|
|
13497
|
+
"description": "The amount of padding to use for the header.",
|
|
13498
|
+
"name": "--header-spacing"
|
|
13499
|
+
},
|
|
13500
|
+
{
|
|
13501
|
+
"description": "The amount of padding to use for the body.",
|
|
13502
|
+
"name": "--body-spacing"
|
|
13503
|
+
},
|
|
13504
|
+
{
|
|
13505
|
+
"description": "The amount of padding to use for the footer.",
|
|
13506
|
+
"name": "--footer-spacing"
|
|
13507
|
+
}
|
|
13508
|
+
],
|
|
13509
|
+
"cssParts": [
|
|
13510
|
+
{
|
|
13511
|
+
"description": "The component's base wrapper.",
|
|
13512
|
+
"name": "base"
|
|
13513
|
+
},
|
|
13514
|
+
{
|
|
13515
|
+
"description": "The dialog's header. This element wraps the title and header actions.",
|
|
13516
|
+
"name": "header"
|
|
13517
|
+
},
|
|
13518
|
+
{
|
|
13519
|
+
"description": "Optional actions to add to the header. Works best with `<zn-button>` elements.",
|
|
13520
|
+
"name": "header-actions"
|
|
13521
|
+
},
|
|
13522
|
+
{
|
|
13523
|
+
"description": "The dialog's title.",
|
|
13524
|
+
"name": "title"
|
|
13525
|
+
},
|
|
13526
|
+
{
|
|
13527
|
+
"description": "The dialog's close button.",
|
|
13528
|
+
"name": "close-button"
|
|
13529
|
+
},
|
|
13530
|
+
{
|
|
13531
|
+
"description": "The close buttons exported `base` part.",
|
|
13532
|
+
"name": "close-button__base"
|
|
13533
|
+
},
|
|
13534
|
+
{
|
|
13535
|
+
"description": "The dialog's body.",
|
|
13536
|
+
"name": "body"
|
|
13537
|
+
},
|
|
13538
|
+
{
|
|
13539
|
+
"description": "The dialog's footer.",
|
|
13540
|
+
"name": "footer"
|
|
13541
|
+
}
|
|
13542
|
+
],
|
|
13543
|
+
"slots": [
|
|
13544
|
+
{
|
|
13545
|
+
"description": "The default slot.",
|
|
13546
|
+
"name": ""
|
|
13547
|
+
},
|
|
13548
|
+
{
|
|
13549
|
+
"description": "The dialog's label. Alternatively you can use the `label` attribute.",
|
|
13550
|
+
"name": "label"
|
|
13551
|
+
},
|
|
13552
|
+
{
|
|
13553
|
+
"description": "Optional icon to add to the left of the dialog's label (title). A color will be applied to the icon depending on the dialog variant.",
|
|
13554
|
+
"name": "header-icon"
|
|
13555
|
+
},
|
|
13556
|
+
{
|
|
13557
|
+
"description": "Optional Intro text to display below the icon, when using the variant `announcement`.",
|
|
13558
|
+
"name": "announcement-intro"
|
|
13559
|
+
},
|
|
13560
|
+
{
|
|
13561
|
+
"description": "Optional actions to add to the header. Works best with `<zn-button>` elements.",
|
|
13562
|
+
"name": "header-actions"
|
|
13563
|
+
},
|
|
13564
|
+
{
|
|
13565
|
+
"description": "The dialog's footer. This is typically used for buttons representing various options.",
|
|
13566
|
+
"name": "footer"
|
|
13567
|
+
},
|
|
13568
|
+
{
|
|
13569
|
+
"description": "Optional text to include below the footer buttons, when using the variant `announcement`.",
|
|
13570
|
+
"name": "footer-text"
|
|
13571
|
+
}
|
|
13572
|
+
],
|
|
13573
|
+
"members": [
|
|
13574
|
+
{
|
|
13575
|
+
"kind": "field",
|
|
13576
|
+
"name": "dependencies",
|
|
13577
|
+
"type": {
|
|
13578
|
+
"text": "object"
|
|
13579
|
+
},
|
|
13580
|
+
"static": true,
|
|
13581
|
+
"default": "{ 'zn-button': ZnButton }"
|
|
13582
|
+
},
|
|
13583
|
+
{
|
|
13584
|
+
"kind": "field",
|
|
13585
|
+
"name": "hasSlotController",
|
|
13586
|
+
"privacy": "private",
|
|
13587
|
+
"readonly": true,
|
|
13588
|
+
"default": "new HasSlotController(this, '[default]', 'footer')"
|
|
13589
|
+
},
|
|
13590
|
+
{
|
|
13591
|
+
"kind": "field",
|
|
13592
|
+
"name": "closeWatcher",
|
|
13593
|
+
"type": {
|
|
13594
|
+
"text": "CloseWatcher | null"
|
|
13595
|
+
},
|
|
13596
|
+
"privacy": "private"
|
|
13597
|
+
},
|
|
13598
|
+
{
|
|
13599
|
+
"kind": "field",
|
|
13600
|
+
"name": "dialog",
|
|
13601
|
+
"type": {
|
|
13602
|
+
"text": "HTMLDialogElement"
|
|
13603
|
+
}
|
|
13604
|
+
},
|
|
13605
|
+
{
|
|
13606
|
+
"kind": "field",
|
|
13607
|
+
"name": "closer",
|
|
13608
|
+
"type": {
|
|
13609
|
+
"text": "HTMLButtonElement"
|
|
13610
|
+
}
|
|
13611
|
+
},
|
|
13612
|
+
{
|
|
13613
|
+
"kind": "field",
|
|
13614
|
+
"name": "variant",
|
|
13615
|
+
"type": {
|
|
13616
|
+
"text": "'default' | 'warning' | 'announcement'"
|
|
13617
|
+
},
|
|
13618
|
+
"default": "'default'",
|
|
13619
|
+
"description": "The dialog's theme variant.",
|
|
13620
|
+
"attribute": "variant",
|
|
13621
|
+
"reflects": true
|
|
13622
|
+
},
|
|
13623
|
+
{
|
|
13624
|
+
"kind": "field",
|
|
13625
|
+
"name": "size",
|
|
13626
|
+
"type": {
|
|
13627
|
+
"text": "'small' | 'medium' | 'large' | 'custom'"
|
|
13628
|
+
},
|
|
13629
|
+
"default": "'medium'",
|
|
13630
|
+
"description": "The dialog's size.",
|
|
13631
|
+
"attribute": "size",
|
|
13632
|
+
"reflects": true
|
|
13633
|
+
},
|
|
13634
|
+
{
|
|
13635
|
+
"kind": "field",
|
|
13636
|
+
"name": "open",
|
|
13637
|
+
"type": {
|
|
13638
|
+
"text": "boolean"
|
|
13639
|
+
},
|
|
13640
|
+
"default": "false",
|
|
13641
|
+
"description": "Indicated whether of not the dialog is open. You can toggle this attribute to show and hide the dialog, or you can\nuse the `show()` and `hide()` methods and this attribute will reflect the dialog's state.",
|
|
13642
|
+
"attribute": "open",
|
|
13643
|
+
"reflects": true
|
|
13644
|
+
},
|
|
13645
|
+
{
|
|
13646
|
+
"kind": "field",
|
|
13647
|
+
"name": "label",
|
|
13648
|
+
"type": {
|
|
13649
|
+
"text": "string"
|
|
13650
|
+
},
|
|
13651
|
+
"description": "The dialog's label as displayed in the header. You should always include a relevant label even when using\n`no-header`, as it is required for proper accessibility. If you need to display HTML, use the `label` slot instead.",
|
|
13652
|
+
"attribute": "label",
|
|
13653
|
+
"reflects": true
|
|
13654
|
+
},
|
|
13655
|
+
{
|
|
13656
|
+
"kind": "field",
|
|
13657
|
+
"name": "cosmic",
|
|
13658
|
+
"type": {
|
|
13659
|
+
"text": "boolean"
|
|
13660
|
+
},
|
|
13661
|
+
"default": "false",
|
|
13662
|
+
"attribute": "cosmic",
|
|
13663
|
+
"reflects": true
|
|
13664
|
+
},
|
|
13665
|
+
{
|
|
13666
|
+
"kind": "field",
|
|
13667
|
+
"name": "noHeader",
|
|
13668
|
+
"type": {
|
|
13669
|
+
"text": "boolean"
|
|
13670
|
+
},
|
|
13671
|
+
"default": "false",
|
|
13672
|
+
"description": "Disables the header. This will also remove the default close button, so please ensure you provide an easy,\naccessible way to close the dialog.",
|
|
13673
|
+
"attribute": "no-header",
|
|
13674
|
+
"reflects": true
|
|
13675
|
+
},
|
|
13676
|
+
{
|
|
13677
|
+
"kind": "field",
|
|
13678
|
+
"name": "trigger",
|
|
13679
|
+
"type": {
|
|
13680
|
+
"text": "string"
|
|
13681
|
+
},
|
|
13682
|
+
"description": "The dialog's trigger element. This is used to open the dialog when clicked. If you do not provide a trigger, you\nwill need to manually open the dialog using the `show()` method.",
|
|
13683
|
+
"attribute": "trigger",
|
|
13684
|
+
"reflects": true
|
|
13685
|
+
},
|
|
13686
|
+
{
|
|
13687
|
+
"kind": "method",
|
|
13688
|
+
"name": "requestClose",
|
|
13689
|
+
"privacy": "private",
|
|
13690
|
+
"parameters": [
|
|
13691
|
+
{
|
|
13692
|
+
"name": "source",
|
|
13693
|
+
"type": {
|
|
13694
|
+
"text": "'close-button' | 'keyboard' | 'overlay'"
|
|
13695
|
+
}
|
|
13696
|
+
}
|
|
13697
|
+
]
|
|
13698
|
+
},
|
|
13699
|
+
{
|
|
13700
|
+
"kind": "method",
|
|
13701
|
+
"name": "addOpenListeners",
|
|
13702
|
+
"privacy": "private"
|
|
13703
|
+
},
|
|
13704
|
+
{
|
|
13705
|
+
"kind": "method",
|
|
13706
|
+
"name": "removeOpenListeners",
|
|
13707
|
+
"privacy": "private"
|
|
13708
|
+
},
|
|
13709
|
+
{
|
|
13710
|
+
"kind": "method",
|
|
13711
|
+
"name": "show",
|
|
13712
|
+
"description": "Shows the dialog."
|
|
13713
|
+
},
|
|
13714
|
+
{
|
|
13715
|
+
"kind": "method",
|
|
13716
|
+
"name": "hide",
|
|
13717
|
+
"description": "Hides the dialog."
|
|
13718
|
+
},
|
|
13719
|
+
{
|
|
13720
|
+
"kind": "field",
|
|
13721
|
+
"name": "closeClickHandler",
|
|
13722
|
+
"privacy": "private"
|
|
13723
|
+
}
|
|
13724
|
+
],
|
|
13725
|
+
"events": [
|
|
13726
|
+
{
|
|
13727
|
+
"description": "Emitted when the dialog is opens.",
|
|
13728
|
+
"name": "zn-show"
|
|
13729
|
+
},
|
|
13730
|
+
{
|
|
13731
|
+
"description": "Emitted when the dialog is closed.",
|
|
13732
|
+
"name": "zn-close"
|
|
13733
|
+
},
|
|
13734
|
+
{
|
|
13735
|
+
"type": {
|
|
13736
|
+
"text": "{ source: 'close-button' | 'keyboard' | 'overlay' }"
|
|
13737
|
+
},
|
|
13738
|
+
"description": "Emitted when the user attempts to close the dialog by clicking the close button, clicking the overlay, or pressing escape. Calling `event.preventDefault()` will keep the dialog open. Avoid using this unless closing the dialog will result in destructive behavior such as data loss.",
|
|
13739
|
+
"name": "zn-request-close"
|
|
13740
|
+
}
|
|
13741
|
+
],
|
|
13742
|
+
"attributes": [
|
|
13743
|
+
{
|
|
13744
|
+
"name": "variant",
|
|
13745
|
+
"type": {
|
|
13746
|
+
"text": "'default' | 'warning' | 'announcement'"
|
|
13747
|
+
},
|
|
13748
|
+
"default": "'default'",
|
|
13749
|
+
"description": "The dialog's theme variant.",
|
|
13750
|
+
"fieldName": "variant"
|
|
13751
|
+
},
|
|
13752
|
+
{
|
|
13753
|
+
"name": "size",
|
|
13754
|
+
"type": {
|
|
13755
|
+
"text": "'small' | 'medium' | 'large' | 'custom'"
|
|
13756
|
+
},
|
|
13757
|
+
"default": "'medium'",
|
|
13758
|
+
"description": "The dialog's size.",
|
|
13759
|
+
"fieldName": "size"
|
|
13760
|
+
},
|
|
13761
|
+
{
|
|
13762
|
+
"name": "open",
|
|
13763
|
+
"type": {
|
|
13764
|
+
"text": "boolean"
|
|
13765
|
+
},
|
|
13766
|
+
"default": "false",
|
|
13767
|
+
"description": "Indicated whether of not the dialog is open. You can toggle this attribute to show and hide the dialog, or you can\nuse the `show()` and `hide()` methods and this attribute will reflect the dialog's state.",
|
|
13768
|
+
"fieldName": "open"
|
|
13769
|
+
},
|
|
13770
|
+
{
|
|
13771
|
+
"name": "label",
|
|
13772
|
+
"type": {
|
|
13773
|
+
"text": "string"
|
|
13774
|
+
},
|
|
13775
|
+
"description": "The dialog's label as displayed in the header. You should always include a relevant label even when using\n`no-header`, as it is required for proper accessibility. If you need to display HTML, use the `label` slot instead.",
|
|
13776
|
+
"fieldName": "label"
|
|
13777
|
+
},
|
|
13778
|
+
{
|
|
13779
|
+
"name": "cosmic",
|
|
13780
|
+
"type": {
|
|
13781
|
+
"text": "boolean"
|
|
13782
|
+
},
|
|
13783
|
+
"default": "false",
|
|
13784
|
+
"fieldName": "cosmic"
|
|
13785
|
+
},
|
|
13786
|
+
{
|
|
13787
|
+
"name": "no-header",
|
|
13788
|
+
"type": {
|
|
13789
|
+
"text": "boolean"
|
|
13790
|
+
},
|
|
13791
|
+
"default": "false",
|
|
13792
|
+
"description": "Disables the header. This will also remove the default close button, so please ensure you provide an easy,\naccessible way to close the dialog.",
|
|
13793
|
+
"fieldName": "noHeader"
|
|
13794
|
+
},
|
|
13795
|
+
{
|
|
13796
|
+
"name": "trigger",
|
|
13797
|
+
"type": {
|
|
13798
|
+
"text": "string"
|
|
13799
|
+
},
|
|
13800
|
+
"description": "The dialog's trigger element. This is used to open the dialog when clicked. If you do not provide a trigger, you\nwill need to manually open the dialog using the `show()` method.",
|
|
13801
|
+
"fieldName": "trigger"
|
|
13802
|
+
}
|
|
13803
|
+
],
|
|
13804
|
+
"superclass": {
|
|
13805
|
+
"name": "ZincElement",
|
|
13806
|
+
"module": "/src/internal/zinc-element"
|
|
13807
|
+
},
|
|
13808
|
+
"summary": "Short summary of the component's intended use.",
|
|
13809
|
+
"tagNameWithoutPrefix": "dialog",
|
|
13810
|
+
"tagName": "zn-dialog",
|
|
13811
|
+
"customElement": true,
|
|
13812
|
+
"jsDoc": "/**\n * @summary Short summary of the component's intended use.\n * @documentation https://zinc.style/components/dialog\n * @status experimental\n * @since 1.0\n *\n * @dependency zn-button\n *\n * @event zn-show - Emitted when the dialog is opens.\n * @event zn-close - Emitted when the dialog is closed.\n * @event {{ source: 'close-button' | 'keyboard' | 'overlay' }} zn-request-close - Emitted when the user attempts to\n * close the dialog by clicking the close button, clicking the overlay, or pressing escape. Calling\n * `event.preventDefault()` will keep the dialog open. Avoid using this unless closing the dialog will result in\n * destructive behavior such as data loss.\n *\n * @slot - The default slot.\n * @slot label - The dialog's label. Alternatively you can use the `label` attribute.\n * @slot header-icon - Optional icon to add to the left of the dialog's label (title). A color will be applied\n * to the icon depending on the dialog variant.\n * @slot announcement-intro - Optional Intro text to display below the icon, when using the variant `announcement`.\n * @slot header-actions - Optional actions to add to the header. Works best with `<zn-button>` elements.\n * @slot footer - The dialog's footer. This is typically used for buttons representing various options.\n * @slot footer-text - Optional text to include below the footer buttons, when using the variant `announcement`.\n *\n * @csspart base - The component's base wrapper.\n * @csspart header - The dialog's header. This element wraps the title and header actions.\n * @csspart header-actions - Optional actions to add to the header. Works best with `<zn-button>` elements.\n * @csspart title - The dialog's title.\n * @csspart close-button - The dialog's close button.\n * @csspart close-button__base - The close buttons exported `base` part.\n * @csspart body - The dialog's body.\n * @csspart footer - The dialog's footer.\n *\n * @cssproperty --width - The preferred width of the dialog. Note the dialog will shrink to accommodate smaller screens.\n * @cssproperty --header-spacing - The amount of padding to use for the header.\n * @cssproperty --body-spacing - The amount of padding to use for the body.\n * @cssproperty --footer-spacing - The amount of padding to use for the footer.\n */",
|
|
13813
|
+
"documentation": "https://zinc.style/components/dialog",
|
|
13814
|
+
"status": "experimental",
|
|
13815
|
+
"since": "1.0",
|
|
13816
|
+
"dependencies": [
|
|
13817
|
+
"zn-button"
|
|
13818
|
+
]
|
|
13819
|
+
}
|
|
13820
|
+
],
|
|
13821
|
+
"exports": [
|
|
13822
|
+
{
|
|
13823
|
+
"kind": "js",
|
|
13824
|
+
"name": "default",
|
|
13825
|
+
"declaration": {
|
|
13826
|
+
"name": "ZnDialog",
|
|
13827
|
+
"module": "components/dialog/dialog.js"
|
|
13828
|
+
}
|
|
13829
|
+
}
|
|
13830
|
+
]
|
|
13831
|
+
},
|
|
13718
13832
|
{
|
|
13719
13833
|
"kind": "javascript-module",
|
|
13720
13834
|
"path": "components/editor/editor.js",
|
|
@@ -45217,28 +45331,6 @@
|
|
|
45217
45331
|
"kind": "class",
|
|
45218
45332
|
"description": "",
|
|
45219
45333
|
"name": "ZnStatsTile",
|
|
45220
|
-
"cssProperties": [
|
|
45221
|
-
{
|
|
45222
|
-
"description": "An example CSS custom property.",
|
|
45223
|
-
"name": "--example"
|
|
45224
|
-
}
|
|
45225
|
-
],
|
|
45226
|
-
"cssParts": [
|
|
45227
|
-
{
|
|
45228
|
-
"description": "The component's base wrapper.",
|
|
45229
|
-
"name": "base"
|
|
45230
|
-
}
|
|
45231
|
-
],
|
|
45232
|
-
"slots": [
|
|
45233
|
-
{
|
|
45234
|
-
"description": "The default slot.",
|
|
45235
|
-
"name": ""
|
|
45236
|
-
},
|
|
45237
|
-
{
|
|
45238
|
-
"description": "An example slot.",
|
|
45239
|
-
"name": "example"
|
|
45240
|
-
}
|
|
45241
|
-
],
|
|
45242
45334
|
"members": [
|
|
45243
45335
|
{
|
|
45244
45336
|
"kind": "field",
|
|
@@ -45312,6 +45404,67 @@
|
|
|
45312
45404
|
"default": "'primary'",
|
|
45313
45405
|
"attribute": "color"
|
|
45314
45406
|
},
|
|
45407
|
+
{
|
|
45408
|
+
"kind": "field",
|
|
45409
|
+
"name": "layout",
|
|
45410
|
+
"type": {
|
|
45411
|
+
"text": "'default' | 'value-first'"
|
|
45412
|
+
},
|
|
45413
|
+
"default": "'default'",
|
|
45414
|
+
"description": "`value-first` puts the amount under the caption with the description beneath it, and tints the amount rather\nthan the description with `color`.",
|
|
45415
|
+
"attribute": "layout",
|
|
45416
|
+
"reflects": true
|
|
45417
|
+
},
|
|
45418
|
+
{
|
|
45419
|
+
"kind": "field",
|
|
45420
|
+
"name": "deltaFormat",
|
|
45421
|
+
"type": {
|
|
45422
|
+
"text": "'percent' | 'points'"
|
|
45423
|
+
},
|
|
45424
|
+
"default": "'percent'",
|
|
45425
|
+
"description": "How `show-delta` compares with `previous`: the relative change, or the difference in points.",
|
|
45426
|
+
"attribute": "delta-format"
|
|
45427
|
+
},
|
|
45428
|
+
{
|
|
45429
|
+
"kind": "field",
|
|
45430
|
+
"name": "icon",
|
|
45431
|
+
"type": {
|
|
45432
|
+
"text": "string"
|
|
45433
|
+
},
|
|
45434
|
+
"default": "''",
|
|
45435
|
+
"description": "An icon shown beside the amount.",
|
|
45436
|
+
"attribute": "icon"
|
|
45437
|
+
},
|
|
45438
|
+
{
|
|
45439
|
+
"kind": "field",
|
|
45440
|
+
"name": "iconColor",
|
|
45441
|
+
"type": {
|
|
45442
|
+
"text": "IconColor"
|
|
45443
|
+
},
|
|
45444
|
+
"description": "The icon's color; without one it takes the amount's.",
|
|
45445
|
+
"attribute": "icon-color"
|
|
45446
|
+
},
|
|
45447
|
+
{
|
|
45448
|
+
"kind": "field",
|
|
45449
|
+
"name": "size",
|
|
45450
|
+
"type": {
|
|
45451
|
+
"text": "'medium' | 'large'"
|
|
45452
|
+
},
|
|
45453
|
+
"default": "'medium'",
|
|
45454
|
+
"description": "`large` gives the amount more weight, for a summary row of a few headline figures.",
|
|
45455
|
+
"attribute": "size",
|
|
45456
|
+
"reflects": true
|
|
45457
|
+
},
|
|
45458
|
+
{
|
|
45459
|
+
"kind": "field",
|
|
45460
|
+
"name": "padded",
|
|
45461
|
+
"type": {
|
|
45462
|
+
"text": "boolean"
|
|
45463
|
+
},
|
|
45464
|
+
"default": "false",
|
|
45465
|
+
"description": "Pads the stat, for stats laid edge to edge in a flush container such as `zn-cols no-gap divide`.",
|
|
45466
|
+
"attribute": "padded"
|
|
45467
|
+
},
|
|
45315
45468
|
{
|
|
45316
45469
|
"kind": "method",
|
|
45317
45470
|
"name": "calcPercentageDifference"
|
|
@@ -45328,12 +45481,26 @@
|
|
|
45328
45481
|
{
|
|
45329
45482
|
"kind": "method",
|
|
45330
45483
|
"name": "diffText"
|
|
45331
|
-
}
|
|
45332
|
-
],
|
|
45333
|
-
"events": [
|
|
45484
|
+
},
|
|
45334
45485
|
{
|
|
45335
|
-
"
|
|
45336
|
-
"name": "
|
|
45486
|
+
"kind": "method",
|
|
45487
|
+
"name": "pointsDelta",
|
|
45488
|
+
"privacy": "private"
|
|
45489
|
+
},
|
|
45490
|
+
{
|
|
45491
|
+
"kind": "method",
|
|
45492
|
+
"name": "renderAmount",
|
|
45493
|
+
"privacy": "private"
|
|
45494
|
+
},
|
|
45495
|
+
{
|
|
45496
|
+
"kind": "method",
|
|
45497
|
+
"name": "renderValueFirst",
|
|
45498
|
+
"privacy": "private"
|
|
45499
|
+
},
|
|
45500
|
+
{
|
|
45501
|
+
"kind": "method",
|
|
45502
|
+
"name": "percentDelta",
|
|
45503
|
+
"privacy": "private"
|
|
45337
45504
|
}
|
|
45338
45505
|
],
|
|
45339
45506
|
"attributes": [
|
|
@@ -45400,22 +45567,75 @@
|
|
|
45400
45567
|
},
|
|
45401
45568
|
"default": "'primary'",
|
|
45402
45569
|
"fieldName": "color"
|
|
45570
|
+
},
|
|
45571
|
+
{
|
|
45572
|
+
"name": "layout",
|
|
45573
|
+
"type": {
|
|
45574
|
+
"text": "'default' | 'value-first'"
|
|
45575
|
+
},
|
|
45576
|
+
"default": "'default'",
|
|
45577
|
+
"description": "`value-first` puts the amount under the caption with the description beneath it, and tints the amount rather\nthan the description with `color`.",
|
|
45578
|
+
"fieldName": "layout"
|
|
45579
|
+
},
|
|
45580
|
+
{
|
|
45581
|
+
"name": "delta-format",
|
|
45582
|
+
"type": {
|
|
45583
|
+
"text": "'percent' | 'points'"
|
|
45584
|
+
},
|
|
45585
|
+
"default": "'percent'",
|
|
45586
|
+
"description": "How `show-delta` compares with `previous`: the relative change, or the difference in points.",
|
|
45587
|
+
"fieldName": "deltaFormat"
|
|
45588
|
+
},
|
|
45589
|
+
{
|
|
45590
|
+
"name": "icon",
|
|
45591
|
+
"type": {
|
|
45592
|
+
"text": "string"
|
|
45593
|
+
},
|
|
45594
|
+
"default": "''",
|
|
45595
|
+
"description": "An icon shown beside the amount.",
|
|
45596
|
+
"fieldName": "icon"
|
|
45597
|
+
},
|
|
45598
|
+
{
|
|
45599
|
+
"name": "icon-color",
|
|
45600
|
+
"type": {
|
|
45601
|
+
"text": "IconColor"
|
|
45602
|
+
},
|
|
45603
|
+
"description": "The icon's color; without one it takes the amount's.",
|
|
45604
|
+
"fieldName": "iconColor"
|
|
45605
|
+
},
|
|
45606
|
+
{
|
|
45607
|
+
"name": "size",
|
|
45608
|
+
"type": {
|
|
45609
|
+
"text": "'medium' | 'large'"
|
|
45610
|
+
},
|
|
45611
|
+
"default": "'medium'",
|
|
45612
|
+
"description": "`large` gives the amount more weight, for a summary row of a few headline figures.",
|
|
45613
|
+
"fieldName": "size"
|
|
45614
|
+
},
|
|
45615
|
+
{
|
|
45616
|
+
"name": "padded",
|
|
45617
|
+
"type": {
|
|
45618
|
+
"text": "boolean"
|
|
45619
|
+
},
|
|
45620
|
+
"default": "false",
|
|
45621
|
+
"description": "Pads the stat, for stats laid edge to edge in a flush container such as `zn-cols no-gap divide`.",
|
|
45622
|
+
"fieldName": "padded"
|
|
45403
45623
|
}
|
|
45404
45624
|
],
|
|
45405
45625
|
"superclass": {
|
|
45406
45626
|
"name": "ZincElement",
|
|
45407
45627
|
"module": "/src/internal/zinc-element"
|
|
45408
45628
|
},
|
|
45409
|
-
"summary": "
|
|
45629
|
+
"summary": "Displays a key metric, optionally compared with a previous value.",
|
|
45410
45630
|
"tagNameWithoutPrefix": "stat",
|
|
45411
45631
|
"tagName": "zn-stat",
|
|
45412
45632
|
"customElement": true,
|
|
45413
|
-
"jsDoc": "/**\n * @summary
|
|
45633
|
+
"jsDoc": "/**\n * @summary Displays a key metric, optionally compared with a previous value.\n * @documentation https://zinc.style/components/stats-tile\n * @status experimental\n * @since 1.0\n *\n * @dependency zn-icon\n */",
|
|
45414
45634
|
"documentation": "https://zinc.style/components/stats-tile",
|
|
45415
45635
|
"status": "experimental",
|
|
45416
45636
|
"since": "1.0",
|
|
45417
45637
|
"dependencies": [
|
|
45418
|
-
"zn-
|
|
45638
|
+
"zn-icon"
|
|
45419
45639
|
]
|
|
45420
45640
|
}
|
|
45421
45641
|
],
|
|
@@ -50807,6 +51027,16 @@
|
|
|
50807
51027
|
"description": "Renders the caption in the normal table-content weight instead of bold.",
|
|
50808
51028
|
"attribute": "plain"
|
|
50809
51029
|
},
|
|
51030
|
+
{
|
|
51031
|
+
"kind": "field",
|
|
51032
|
+
"name": "stackActions",
|
|
51033
|
+
"type": {
|
|
51034
|
+
"text": "boolean"
|
|
51035
|
+
},
|
|
51036
|
+
"description": "Moves the actions under the caption and description when the tile is narrower than 600px.",
|
|
51037
|
+
"attribute": "stack-actions",
|
|
51038
|
+
"reflects": true
|
|
51039
|
+
},
|
|
50810
51040
|
{
|
|
50811
51041
|
"kind": "field",
|
|
50812
51042
|
"name": "grouped",
|
|
@@ -50921,6 +51151,14 @@
|
|
|
50921
51151
|
"description": "Renders the caption in the normal table-content weight instead of bold.",
|
|
50922
51152
|
"fieldName": "plain"
|
|
50923
51153
|
},
|
|
51154
|
+
{
|
|
51155
|
+
"name": "stack-actions",
|
|
51156
|
+
"type": {
|
|
51157
|
+
"text": "boolean"
|
|
51158
|
+
},
|
|
51159
|
+
"description": "Moves the actions under the caption and description when the tile is narrower than 600px.",
|
|
51160
|
+
"fieldName": "stackActions"
|
|
51161
|
+
},
|
|
50924
51162
|
{
|
|
50925
51163
|
"name": "grouped",
|
|
50926
51164
|
"type": {
|
|
@@ -53941,7 +54179,7 @@
|
|
|
53941
54179
|
"package": {
|
|
53942
54180
|
"name": "@kubex/zinc",
|
|
53943
54181
|
"description": "A collection of web components for building web applications based off of @shoelace-style/Shoelace",
|
|
53944
|
-
"version": "1.1.
|
|
54182
|
+
"version": "1.1.181",
|
|
53945
54183
|
"author": "",
|
|
53946
54184
|
"license": "MIT"
|
|
53947
54185
|
}
|