@kubex/zinc 1.1.180 → 1.1.182
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 +616 -378
- package/dist/vscode.html-custom-data.json +72 -34
- package/dist/web-types.json +179 -99
- package/dist/zn.d.ts +110 -12
- package/dist/zn.min.js +330 -321
- package/docs/pages/components/chart.md +49 -0
- package/docs/pages/components/content-block.md +47 -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/content-block/content-block.component.ts +21 -7
- package/src/components/content-block/content-block.scss +36 -0
- package/src/components/content-block/content-block.test.ts +25 -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
- package/src/utilities/sanitize-html.ts +11 -2
package/dist/zn.d.ts
CHANGED
|
@@ -1578,8 +1578,9 @@ declare module "utilities/sanitize-html" {
|
|
|
1578
1578
|
/**
|
|
1579
1579
|
* Sanitizes untrusted HTML down to formatting tags, keeping only a link's href when it is http(s) or mailto.
|
|
1580
1580
|
* Tags in `keep` are allowed as they are, so a block such as `pre` isn't turned into a paragraph.
|
|
1581
|
+
* With `colors`, a `style` attribute survives holding only its text and background colour.
|
|
1581
1582
|
*/
|
|
1582
|
-
export function sanitizeHtml(source: string, keep?: string[]): string;
|
|
1583
|
+
export function sanitizeHtml(source: string, keep?: string[], colors?: boolean): string;
|
|
1583
1584
|
}
|
|
1584
1585
|
declare module "components/chat-message/clean-message" {
|
|
1585
1586
|
/**
|
|
@@ -4607,6 +4608,8 @@ declare module "components/tile/tile.component" {
|
|
|
4607
4608
|
inline: boolean;
|
|
4608
4609
|
/** Renders the caption in the normal table-content weight instead of bold. */
|
|
4609
4610
|
plain: boolean;
|
|
4611
|
+
/** Moves the actions under the caption and description when the tile is narrower than 600px. */
|
|
4612
|
+
stackActions: boolean;
|
|
4610
4613
|
/** Set by `zn-tile-group` to lay the tile out as a shared-column subgrid row. */
|
|
4611
4614
|
grouped: boolean;
|
|
4612
4615
|
private _isLink;
|
|
@@ -4806,11 +4809,19 @@ declare module "components/chart/builders" {
|
|
|
4806
4809
|
import type { EChartsOption } from 'echarts';
|
|
4807
4810
|
export type ChartType = 'area' | 'bar' | 'donut' | 'funnel' | 'gauge' | 'heatmap' | 'line' | 'pie' | 'radar' | 'sankey' | 'scatter' | 'sunburst' | 'treemap';
|
|
4808
4811
|
export interface SeriesItem {
|
|
4812
|
+
/** Stable identity for incremental live updates. */
|
|
4813
|
+
id?: string;
|
|
4814
|
+
animation?: boolean;
|
|
4815
|
+
animationDuration?: number;
|
|
4816
|
+
animationDurationUpdate?: number;
|
|
4817
|
+
animationEasingUpdate?: 'linear';
|
|
4818
|
+
animationThreshold?: number;
|
|
4809
4819
|
name: string;
|
|
4810
4820
|
data: any[];
|
|
4811
4821
|
color?: string;
|
|
4812
4822
|
/** Series sharing a stack ID are stacked, overriding the chart-wide `stacked` setting. */
|
|
4813
4823
|
stack?: string;
|
|
4824
|
+
stackStrategy?: 'all' | 'samesign' | 'positive' | 'negative';
|
|
4814
4825
|
/** Fill below a line, for example `{ opacity: 0.15 }`; `{ opacity: 0 }` keeps a stacked base invisible. */
|
|
4815
4826
|
areaStyle?: Record<string, unknown>;
|
|
4816
4827
|
lineStyle?: Record<string, unknown>;
|
|
@@ -4877,6 +4888,70 @@ declare module "components/chart/echarts-loader" {
|
|
|
4877
4888
|
export type EChartsModule = typeof echartsCore;
|
|
4878
4889
|
export function loadECharts(): Promise<EChartsModule>;
|
|
4879
4890
|
}
|
|
4891
|
+
declare module "components/chart/live" {
|
|
4892
|
+
import type { SeriesItem } from "components/chart/builders";
|
|
4893
|
+
export interface LivePoint {
|
|
4894
|
+
at: number;
|
|
4895
|
+
value: number | null;
|
|
4896
|
+
}
|
|
4897
|
+
export interface LivePrediction {
|
|
4898
|
+
status: string;
|
|
4899
|
+
average_rates?: boolean;
|
|
4900
|
+
points: {
|
|
4901
|
+
at: number;
|
|
4902
|
+
expected: number;
|
|
4903
|
+
lower: number;
|
|
4904
|
+
upper: number;
|
|
4905
|
+
available: boolean;
|
|
4906
|
+
}[];
|
|
4907
|
+
}
|
|
4908
|
+
export interface LiveFrame {
|
|
4909
|
+
from: number;
|
|
4910
|
+
until: number;
|
|
4911
|
+
server_time: number;
|
|
4912
|
+
expires_at: number;
|
|
4913
|
+
resolution_seconds: number;
|
|
4914
|
+
metric: string;
|
|
4915
|
+
points: LivePoint[];
|
|
4916
|
+
prediction?: LivePrediction;
|
|
4917
|
+
}
|
|
4918
|
+
export interface LiveGrant {
|
|
4919
|
+
stream_url: string;
|
|
4920
|
+
expires_at: number;
|
|
4921
|
+
server_time: number;
|
|
4922
|
+
}
|
|
4923
|
+
/** Authoritative bucket replacement, never increment counts on delivery/reconnect. */
|
|
4924
|
+
export class LiveWindow {
|
|
4925
|
+
frame?: LiveFrame;
|
|
4926
|
+
private points;
|
|
4927
|
+
private prediction?;
|
|
4928
|
+
apply(value: unknown, snapshot: boolean): LiveFrame;
|
|
4929
|
+
advance(serverTime: number): void;
|
|
4930
|
+
get predictionStatus(): string;
|
|
4931
|
+
series(hideZero?: boolean): SeriesItem[];
|
|
4932
|
+
}
|
|
4933
|
+
/** One transport per chart. Grants renew only through a same-origin login gate. */
|
|
4934
|
+
export class LiveTransport {
|
|
4935
|
+
private source?;
|
|
4936
|
+
private timer?;
|
|
4937
|
+
private expiryTimer?;
|
|
4938
|
+
private abort?;
|
|
4939
|
+
private stopped;
|
|
4940
|
+
private generation;
|
|
4941
|
+
private retry;
|
|
4942
|
+
private renewing;
|
|
4943
|
+
private readonly frame;
|
|
4944
|
+
private readonly status;
|
|
4945
|
+
private readonly heartbeat?;
|
|
4946
|
+
constructor(frame: (data: unknown, snapshot: boolean) => void, status: (status: string) => void, heartbeat?: (serverTime: number) => void);
|
|
4947
|
+
start(streamURL: string, renewURL: string): void;
|
|
4948
|
+
stop(): void;
|
|
4949
|
+
private active;
|
|
4950
|
+
private deadline;
|
|
4951
|
+
private connect;
|
|
4952
|
+
private renew;
|
|
4953
|
+
}
|
|
4954
|
+
}
|
|
4880
4955
|
declare module "components/chart/chart.component" {
|
|
4881
4956
|
import { type ChartType, type RadarIndicator, type SeriesItem } from "components/chart/builders";
|
|
4882
4957
|
import { type CSSResultGroup, type PropertyValues } from 'lit';
|
|
@@ -4901,6 +4976,9 @@ declare module "components/chart/chart.component" {
|
|
|
4901
4976
|
stacked: boolean;
|
|
4902
4977
|
live: boolean;
|
|
4903
4978
|
dataUrl: string;
|
|
4979
|
+
streamUrl: string;
|
|
4980
|
+
liveRenewUrl: string;
|
|
4981
|
+
hideZero: boolean;
|
|
4904
4982
|
liveInterval: number;
|
|
4905
4983
|
height: number;
|
|
4906
4984
|
enableAnimations: boolean | number;
|
|
@@ -4918,6 +4996,16 @@ declare module "components/chart/chart.component" {
|
|
|
4918
4996
|
private echarts?;
|
|
4919
4997
|
private initPromise?;
|
|
4920
4998
|
private liveTimer?;
|
|
4999
|
+
private pollAbort?;
|
|
5000
|
+
private liveStatus;
|
|
5001
|
+
private liveWindow;
|
|
5002
|
+
private replaceLiveSeries;
|
|
5003
|
+
private transport;
|
|
5004
|
+
private liveTransitionDuration;
|
|
5005
|
+
private liveSeries;
|
|
5006
|
+
private updateChart;
|
|
5007
|
+
protected updated(changed: PropertyValues): void;
|
|
5008
|
+
connectedCallback(): void;
|
|
4921
5009
|
private readonly resizeObserver;
|
|
4922
5010
|
protected firstUpdated(_changedProperties: PropertyValues): void;
|
|
4923
5011
|
protected getUpdateComplete(): Promise<boolean>;
|
|
@@ -4926,6 +5014,7 @@ declare module "components/chart/chart.component" {
|
|
|
4926
5014
|
private getBorderColor;
|
|
4927
5015
|
private buildOption;
|
|
4928
5016
|
private initChart;
|
|
5017
|
+
private stopLive;
|
|
4929
5018
|
private startLive;
|
|
4930
5019
|
private reinit;
|
|
4931
5020
|
attributeChangedCallback(name: string, _old: string | null, value: string | null): void;
|
|
@@ -6206,22 +6295,14 @@ declare module "components/stepper/index" {
|
|
|
6206
6295
|
declare module "components/stat/stat.component" {
|
|
6207
6296
|
import { type CSSResultGroup } from 'lit';
|
|
6208
6297
|
import ZincElement from "internal/zinc-element";
|
|
6298
|
+
import type { IconColor } from "components/icon/index";
|
|
6209
6299
|
/**
|
|
6210
|
-
* @summary
|
|
6300
|
+
* @summary Displays a key metric, optionally compared with a previous value.
|
|
6211
6301
|
* @documentation https://zinc.style/components/stats-tile
|
|
6212
6302
|
* @status experimental
|
|
6213
6303
|
* @since 1.0
|
|
6214
6304
|
*
|
|
6215
|
-
* @dependency zn-
|
|
6216
|
-
*
|
|
6217
|
-
* @event zn-event-name - Emitted as an example.
|
|
6218
|
-
*
|
|
6219
|
-
* @slot - The default slot.
|
|
6220
|
-
* @slot example - An example slot.
|
|
6221
|
-
*
|
|
6222
|
-
* @csspart base - The component's base wrapper.
|
|
6223
|
-
*
|
|
6224
|
-
* @cssproperty --example - An example CSS custom property.
|
|
6305
|
+
* @dependency zn-icon
|
|
6225
6306
|
*/
|
|
6226
6307
|
export default class ZnStatsTile extends ZincElement {
|
|
6227
6308
|
static styles: CSSResultGroup;
|
|
@@ -6233,10 +6314,27 @@ declare module "components/stat/stat.component" {
|
|
|
6233
6314
|
currency: string;
|
|
6234
6315
|
showDelta: boolean;
|
|
6235
6316
|
color: 'primary' | 'error' | 'info' | 'warning' | 'success' | 'neutral';
|
|
6317
|
+
/** `value-first` puts the amount under the caption with the description beneath it, and tints the amount rather
|
|
6318
|
+
* than the description with `color`. */
|
|
6319
|
+
layout: 'default' | 'value-first';
|
|
6320
|
+
/** How `show-delta` compares with `previous`: the relative change, or the difference in points. */
|
|
6321
|
+
deltaFormat: 'percent' | 'points';
|
|
6322
|
+
/** An icon shown beside the amount. */
|
|
6323
|
+
icon: string;
|
|
6324
|
+
/** The icon's color; without one it takes the amount's. */
|
|
6325
|
+
iconColor: IconColor;
|
|
6326
|
+
/** `large` gives the amount more weight, for a summary row of a few headline figures. */
|
|
6327
|
+
size: 'medium' | 'large';
|
|
6328
|
+
/** Pads the stat, for stats laid edge to edge in a flush container such as `zn-cols no-gap divide`. */
|
|
6329
|
+
padded: boolean;
|
|
6236
6330
|
calcPercentageDifference(): number;
|
|
6237
6331
|
getCurrentAmount(): string;
|
|
6238
6332
|
private getDisplayAmount;
|
|
6239
6333
|
diffText(): import("lit-html").TemplateResult<1> | null;
|
|
6334
|
+
private pointsDelta;
|
|
6335
|
+
private renderAmount;
|
|
6336
|
+
private renderValueFirst;
|
|
6337
|
+
private percentDelta;
|
|
6240
6338
|
render(): import("lit-html").TemplateResult<1>;
|
|
6241
6339
|
}
|
|
6242
6340
|
}
|