@gravitee/ui-components 3.25.3-typescript-bfd8f67 → 3.25.3-typescript-e7256ca

package/src/atoms/gv-metric.d.ts

@@ -0,0 +1,32 @@
+/**
+ * A Metric
+ *
+ * ## Details
+ * * has @theme facet
+ *
+ * @attr {String} icon - name of shape
+ * @attr {String} name - the name of the metric
+ * @attr {String} value - the value of the metric
+ * @attr {Boolean} skeleton - enable skeleton screen UI pattern (loading hint)
+ *
+ * @cssprop {Color} [--gv-metric--c=var(--gv-theme-color, #5a7684)] - Color
+ * @cssprop {Length} [--gv-metric-icon--s=24px] - Height and icon width
+ */
+export class GvMetric extends LitElement {
+    static get properties(): {
+        icon: {
+            type: StringConstructor;
+        };
+        name: {
+            type: StringConstructor;
+        };
+        value: {
+            type: StringConstructor;
+        };
+        skeleton: {
+            type: BooleanConstructor;
+        };
+    };
+    static get styles(): import("lit").CSSResult[];
+}
+import { LitElement } from "lit-element/lit-element";

package/src/atoms/gv-relative-time.d.ts

@@ -0,0 +1,45 @@
+/**
+ * Component to display a localized humanized relative date (ex: "two minutes ago").
+ *
+ * ## Details
+ * * has @theme facet
+ *
+ * @prop {String|Number} datetime - Date as ISO string or timestamp.
+ * @prop {Boolean} noFuture - Whether a date in future is allowed or not (useful when not sync).
+ */
+export class GvRelativeTime extends LitElement {
+    static get properties(): {
+        datetime: {
+            type: StringConstructor;
+        };
+        title: {
+            type: StringConstructor;
+            reflect: boolean;
+        };
+        noFuture: {
+            type: BooleanConstructor;
+        };
+        _relativeTime: {
+            type: StringConstructor;
+            attribute: boolean;
+        };
+        _updateIntervalId: {
+            type: StringConstructor;
+            attribute: boolean;
+        };
+    };
+    _formatter: {
+        new (locales?: string | string[] | undefined, options?: Intl.RelativeTimeFormatOptions | undefined): Intl.RelativeTimeFormat;
+        supportedLocalesOf(locales?: string | string[] | undefined, options?: Intl.RelativeTimeFormatOptions | undefined): string[];
+    } | null;
+    getFormatter(): Promise<{
+        new (locales?: string | string[] | undefined, options?: Intl.RelativeTimeFormatOptions | undefined): Intl.RelativeTimeFormat;
+        supportedLocalesOf(locales?: string | string[] | undefined, options?: Intl.RelativeTimeFormatOptions | undefined): string[];
+    }>;
+    set datetime(arg: any);
+    _datetime: any;
+    _formatDateInThePast(date: any): any;
+    _format(dateStr: any, lang: any): Promise<string | undefined>;
+    updateIntervalId: NodeJS.Timeout | null | undefined;
+}
+import { LitElement } from "lit-element/lit-element";

package/src/atoms/gv-select-native.d.ts

@@ -0,0 +1,174 @@
+declare const GvSelectNative_base: {
+    new (): {
+        [x: string]: any;
+        _id: string;
+        valid: boolean;
+        invalid: boolean;
+        updateState(value: any): void;
+        setValidity(isInvalid?: boolean, violation?: string): void;
+        firstUpdated(): void;
+        updated(changedProperties: any): void;
+        getInputElement(): any;
+        readonly offsetHeight: any;
+        renderLabel(): "" | import("lit-html").TemplateResult<1>;
+    };
+    [x: string]: any;
+    readonly properties: {
+        disabled: {
+            type: BooleanConstructor;
+            reflect: boolean;
+        };
+        required: {
+            type: BooleanConstructor;
+            reflect: boolean;
+        };
+        readonly: {
+            type: BooleanConstructor;
+            reflect: boolean;
+        };
+        skeleton: {
+            type: BooleanConstructor;
+        };
+        value: {
+            type: StringConstructor;
+            reflect: boolean;
+        };
+        label: {
+            type: StringConstructor;
+        };
+        title: {
+            type: StringConstructor;
+        };
+        name: {
+            type: StringConstructor;
+        };
+        placeholder: {
+            type: StringConstructor;
+        };
+        description: {
+            type: StringConstructor;
+        };
+        autofocus: {
+            type: BooleanConstructor;
+        };
+        invalid: {
+            type: BooleanConstructor;
+            reflect: boolean;
+        };
+        valid: {
+            type: BooleanConstructor;
+            reflect: boolean;
+        };
+    };
+    readonly styles: import("lit").CSSResult[];
+};
+/**
+ * A select native component.
+ *
+ * @fires gv-select:select - Event when user select a value (deprecated, use gv-select:input)
+ * @fires gv-select:input - Event when user select a value
+ *
+ * @attr {Boolean} disabled - same as native select element `disabled` attribute
+ * @attr {Boolean} required - same as native select element `required` attribute
+ * @attr {Boolean} skeleton - enable skeleton screen UI pattern (loading hint)
+ * @attr {Array} options - the options of the select
+ * @attr {String | Array} value - the value of the select
+ * @attr {String} label - label of the select
+ * @attr {String} title - title of the select
+ * @attr {String} name - name of the select
+ * @attr {String} placeholder - an example value to display in the select when empty
+ * @attr {String} description - a description
+ * @attr {Boolean} multiple - enable multiple selection
+ *
+ * @cssprop {Color} [--gv-select--bgc=var(--gv-theme-neutral-color-lightest, #ffffff)] - Background color
+ * @cssprop {Color} [--gv-select--bdc=var(--gv-theme-neutral-color-dark, #d9d9d9)] - Border color
+ * @cssprop {Color} [--gv-select--c=var(--gv-theme-font-color-dark, #262626)] - Color
+ * @cssprop {Color} [--gv-select-hover--bgc=var(--gv-theme-color-light, #86c3d0)] - Hover background color
+ * @cssprop {Color} [--gv-select-selected--bgc=var(--gv-theme-neutral-color-light, #efefef)] - Selected background color
+ */
+export class GvSelectNative extends GvSelectNative_base {
+    static get properties(): {
+        options: {
+            type: ArrayConstructor;
+        };
+        _options: {
+            type: ArrayConstructor;
+            attribute: boolean;
+        };
+        large: {
+            type: BooleanConstructor;
+        };
+        medium: {
+            type: BooleanConstructor;
+        };
+        small: {
+            type: BooleanConstructor;
+        };
+        value: {
+            type: number;
+        };
+        label: {
+            type: StringConstructor;
+        };
+        title: {
+            type: StringConstructor;
+        };
+        name: {
+            type: StringConstructor;
+        };
+        placeholder: {
+            type: StringConstructor;
+        };
+        description: {
+            type: StringConstructor;
+        };
+        multiple: {
+            type: BooleanConstructor;
+            reflect: boolean;
+        };
+        disabled: {
+            type: BooleanConstructor;
+            reflect: boolean;
+        };
+        required: {
+            type: BooleanConstructor;
+            reflect: boolean;
+        };
+        readonly: {
+            type: BooleanConstructor;
+            reflect: boolean;
+        };
+        skeleton: {
+            type: BooleanConstructor;
+        };
+        autofocus: {
+            type: BooleanConstructor;
+        };
+        invalid: {
+            type: BooleanConstructor;
+            reflect: boolean;
+        };
+        valid: {
+            type: BooleanConstructor;
+            reflect: boolean;
+        };
+    };
+    _options: {
+        label: string;
+        value: string;
+        disabled: boolean;
+        title: null;
+    }[];
+    willUpdate(changedProperties: any): void;
+    _onEnter(e: any): void;
+    _onLeave(): void;
+    _onInput(e: any): void;
+    value: any;
+    _onClear(): void;
+    set options(arg: any);
+    selectedLabel(): string;
+    renderSelect(): import("lit-html").TemplateResult<1>;
+    render(): import("lit-html").TemplateResult<1>;
+    isSelected(option: any): any;
+}
+export {};

package/src/atoms/gv-select.d.ts

@@ -0,0 +1,71 @@
+declare const GvSelect_base: {
+    new (): {
+        [x: string]: any;
+        _onResize({ width }: {
+            width: any;
+        }): void;
+        connectedCallback(): Promise<void>;
+        _unobserveResize: (() => any) | undefined;
+        disconnectedCallback(): void;
+    };
+    [x: string]: any;
+};
+/**
+ * A select component, is more like a list box...
+ * ⚠️ Please use `<gv-select-native>` component if you don't need strong customization.
+ * ⚠️ DO NO USE IT inside a `<gv-table>` component to avoid any scroll or overlapping issue.
+ *
+ * ## Details
+ * * has @theme facet
+ *
+ * @fires gv-select:select - Event when user select a value (deprecated, use gv-select:input)
+ * @fires gv-select:input - Event when user select a value
+ *
+ * @attr {Boolean} disabled - same as native select element `disabled` attribute
+ * @attr {Boolean} required - same as native select element `required` attribute
+ * @attr {Boolean} skeleton - enable skeleton screen UI pattern (loading hint)
+ * @attr {Array} options - the options of the select
+ * @attr {String | Array} value - the value of the select
+ * @attr {String} label - label of the select
+ * @attr {String} title - title of the select
+ * @attr {String} name - name of the select
+ * @attr {String} placeholder - an example value to display in the select when empty
+ * @attr {String} description - a description
+ * @attr {Boolean} multiple - enable multiple selection
+ *
+ * @cssprop {Color} [--gv-select--bgc=var(--gv-theme-neutral-color-lightest, #ffffff)] - Background color
+ * @cssprop {Color} [--gv-select--list-bgc=var(--gv-select--bgc, var(--gv-theme-neutral-color-lightest, #ffffff))] - List items background color
+ * @cssprop {Color} [--gv-select--bdc=var(--gv-theme-neutral-color-dark, #d9d9d9)] - Border color
+ * @cssprop {Color} [--gv-select--c=var(--gv-theme-font-color-dark, #262626)] - Color
+ * @cssprop {Color} [--gv-select-hover--bgc=var(--gv-theme-color-light, #86c3d0)] - Hover background color
+ * @cssprop {Color} [--gv-select-selected--bgc=var(--gv-theme-neutral-color-light, #efefef)] - Selected background color
+ */
+export class GvSelect extends GvSelect_base {
+    static get properties(): any;
+    static get styles(): any[];
+    _type: string;
+    _isClosed: boolean;
+    _options: {
+        label: string;
+        value: string;
+        disabled: boolean;
+        title: null;
+    }[];
+    _handleDocumentClick: () => void;
+    willUpdate(changedProperties: any): void;
+    updateState(value: any): void;
+    invalid: boolean | undefined;
+    close(): void;
+    _onDocumentClick(): void;
+    _onClick(e: any): void;
+    _onSelect(option: any, e: any): void;
+    value: any;
+    _onClear(): void;
+    _renderIcon(): "" | import("lit-html").TemplateResult<1>;
+    set options(arg: any);
+    selectedLabel(): string;
+    onResize(): void;
+    render(): import("lit-html").TemplateResult<1>;
+    isSelected(option: any): any;
+}
+export {};

package/src/atoms/gv-spinner.d.ts

@@ -0,0 +1,10 @@
+/**
+ * Spinner component
+ *
+ * ## Details
+ * @cssprop {Image} [--gv-theme-loader=var(--gv-theme-loader, url('images/gravitee-loader.gif'))] - Spinner image
+ */
+export class GvSpinner extends LitElement {
+    static get styles(): import("lit").CSSResult[];
+}
+import { LitElement } from "lit-element/lit-element";

package/src/atoms/gv-state.d.ts

@@ -0,0 +1,50 @@
+/**
+ * A State
+ *
+ * ## Details
+ * * has @theme facet
+ *
+ * @fires click - Native click event
+ *
+ * @slot - The content of the state (text or HTML)
+ *
+ * @attr {Boolean} error - enable error mode
+ * @attr {Boolean} major - enable major mode
+ * @attr {Boolean} success - enable success mode
+ * @attr {Boolean} warn - enable warn mode
+ * @attr {Boolean} skeleton -  enable skeleton screen UI pattern (loading hint)
+ *
+ * @cssprop {Length} [--gv-state--bdr=17px] - Border radius
+ * @cssprop {Length} [--gv-state--fz=var(--gv-theme-font-size-s, 12px)] - Font size
+ * @cssprop {String} [--gv-state--fw=bold] - Font weight
+ * @cssprop {String} [--gv-state--tt=uppercase] - Text transform
+ * @cssprop {Length} [--gv-state--p=4px 8px] - Padding
+ * @cssprop {Color} [--gv-state--bgc=#f0f5ff] - Background color
+ * @cssprop {Color} [--gv-state--c=#597ef7] - Color
+ * @cssprop {Color} [--gv-state-major--bgc=var(--gv-theme-color-light, #d5fdcb)] - Major background color
+ * @cssprop {Color} [--gv-state-major--c=var(--gv-theme-color, #009b5b)] - Major color
+ */
+export class GvState extends LitElement {
+    static get properties(): {
+        default: {
+            type: BooleanConstructor;
+        };
+        error: {
+            type: BooleanConstructor;
+        };
+        major: {
+            type: BooleanConstructor;
+        };
+        skeleton: {
+            type: BooleanConstructor;
+        };
+        success: {
+            type: BooleanConstructor;
+        };
+        warn: {
+            type: BooleanConstructor;
+        };
+    };
+    static get styles(): import("lit").CSSResult[];
+}
+import { LitElement } from "lit-element/lit-element";

package/src/atoms/gv-switch.d.ts

@@ -0,0 +1,60 @@
+/**
+ * A wrapper of a <switch> component.
+ *
+ * ## Details
+ * * has @theme facet
+ *
+ * @fires gv-switch:input - mirrors native input events with the `value` on `detail`
+ *
+ * @attr {Boolean} disabled - same as native switch element `disabled` attribute
+ * @attr {Boolean} skeleton - enable skeleton screen UI pattern (loading hint)
+ * @attr {Boolean|String} value - true if the switch is checked, false otherwise
+ * @attr {String} label - label of the switch
+ * @attr {String} description - description of the switch
+ * @attr {Boolean} checked - same as native switch element `checked` attribute
+ * @attr {Boolean} readonly - true if readonly
+ *
+ * @cssprop {Color} [--gv-switch-on--bgc=var(--gv-theme-color, #5a7684)] - On background color
+ * @cssprop {Color} [--gv-switch-off--bgc=var(--gv-theme-neutral-color-dark, #bfbfbf)] - Off background color
+ * @cssprop {Color} [--gv-switch--bgc=var(--gv-theme-neutral-color-lightest, #ffffff)] - Switch background color
+ * @cssprop {String} [--gv-switch--ta=left] - Switch label text alignment
+ */
+export class GvSwitch extends LitElement {
+    static get properties(): {
+        disabled: {
+            type: BooleanConstructor;
+            reflect: boolean;
+        };
+        skeleton: {
+            type: BooleanConstructor;
+        };
+        value: {
+            type: StringConstructor;
+            reflect: boolean;
+        };
+        label: {
+            type: StringConstructor;
+        };
+        description: {
+            type: StringConstructor;
+        };
+        small: {
+            type: BooleanConstructor;
+            reflect: boolean;
+        };
+        checked: {
+            type: BooleanConstructor;
+            reflect: boolean;
+        };
+        readonly: {
+            type: BooleanConstructor;
+            reflect: boolean;
+        };
+    };
+    static get styles(): import("lit").CSSResult[];
+    _id: string;
+    checked: boolean;
+    _onInput(): void;
+    value: boolean | undefined;
+}
+import { LitElement } from "lit-element/lit-element";

package/src/atoms/gv-tag.d.ts

@@ -0,0 +1,69 @@
+/**
+ * A Tag
+ *
+ * ## Details
+ * * has @theme facet
+ *
+ * @fires click - Native click event
+ *
+ * @slot - The content of the tag (text or HTML)
+ *
+ * @attr {String} icon - name of shape
+ * @attr {String} icon-right - name of shape
+ * @attr {Boolean} major - set tag UI as major
+ * @attr {Boolean} minor - set tag UI as minor
+ * @attr {Boolean} skeleton -  enable skeleton screen UI pattern (loading hint)
+ * @attr {Boolean} clickable - If true, tag has link style
+ *
+ * @cssprop {Length} [--gv-tag--fz=var(--gv-theme-font-size-s, 12px)] - Font size
+ * @cssprop {Length} [--gv-tag--p=4px 8px] - Padding
+ * @cssprop {Length} [--gv-tag--bdr=4px] - Border radius
+ * @cssprop {String} [--gv-tag--bsw=none] - Box shadow
+ *
+ * @cssprop {Color} [--gv-tag--bgc=var(--gv-theme-neutral-color-lighter, #fafafa)] - Background color
+ * @cssprop {Color} [--gv-tag-major--bgc=var(--gv-theme-color, #5a7684)] - Major background color
+ * @cssprop {Color} [--gv-tag-minor--bgc=var(--gv-theme-neutral-color-lightest, #ffffff)] - Minor background color
+ *
+ * @cssprop {Color} [--gv-tag--bdc=var(--gv-theme-neutral-color-dark, #d9d9d9)] - Border color
+ * @cssprop {Color} [--gv-tag-major--bdc=var(--gv-theme-color, #5a7684)] - Major border color
+ * @cssprop {Color} [--gv-tag-minor--bdc=var(--gv-theme-neutral-color-dark, #d9d9d9)] - Minor border color
+
+ * @cssprop {String} [--gv-tag--bds=solid] - Border style
+ * @cssprop {String} [--gv-tag-major--bds=solid] - Major border style
+ * @cssprop {String} [--gv-tag-minor--bds=dashed] - Minor border style
+ *
+ * @cssprop {Length} [--gv-tag--bdw=1px] - Border width
+ * @cssprop {Length} [--gv-tag-major--bdw=1px] - Major border width
+ * @cssprop {Length} [--gv-tag-minor--bdw=1px] - Minor border width
+ *
+ * @cssprop {Color} [--gv-tag--c=var(--gv-theme-font-color-dark, #262626)] - Color
+ * @cssprop {Color} [--gv-tag-major--c=var(--gv-theme-font-color-light, #ffffff)] - Major color
+ * @cssprop {Color} [--gv-tag-minor--c=var(--gv-theme-font-color-dark, #262626)] - Minor color
+ * @cssprop {Length} [--gv-tag-icon--s=18px] - Height and icon width
+ */
+export class GvTag extends LitElement {
+    static get properties(): {
+        icon: {
+            type: StringConstructor;
+        };
+        iconRight: {
+            type: StringConstructor;
+            attribute: string;
+        };
+        major: {
+            type: BooleanConstructor;
+        };
+        minor: {
+            type: BooleanConstructor;
+        };
+        skeleton: {
+            type: BooleanConstructor;
+        };
+        clickable: {
+            type: BooleanConstructor;
+        };
+    };
+    static get styles(): import("lit").CSSResult[];
+    _onTagClick(e: any): void;
+}
+import { LitElement } from "lit-element/lit-element";

package/src/atoms/gv-text.d.ts

@@ -0,0 +1,110 @@
+declare const GvText_base: {
+    new (): {
+        [x: string]: any;
+        _id: string;
+        valid: boolean;
+        invalid: boolean;
+        updateState(value: any): void;
+        setValidity(isInvalid?: boolean, violation?: string): void;
+        firstUpdated(): void;
+        updated(changedProperties: any): void;
+        getInputElement(): any;
+        readonly offsetHeight: any;
+        renderLabel(): "" | import("lit-html").TemplateResult<1>;
+    };
+    [x: string]: any;
+    readonly properties: {
+        disabled: {
+            type: BooleanConstructor;
+            reflect: boolean;
+        };
+        required: {
+            type: BooleanConstructor;
+            reflect: boolean;
+        };
+        readonly: {
+            type: BooleanConstructor;
+            reflect: boolean;
+        };
+        skeleton: {
+            type: BooleanConstructor;
+        };
+        value: {
+            type: StringConstructor;
+            reflect: boolean;
+        };
+        label: {
+            type: StringConstructor;
+        };
+        title: {
+            type: StringConstructor;
+        };
+        name: {
+            type: StringConstructor;
+        };
+        placeholder: {
+            type: StringConstructor;
+        };
+        description: {
+            type: StringConstructor;
+        };
+        autofocus: {
+            type: BooleanConstructor;
+        };
+        invalid: {
+            type: BooleanConstructor;
+            reflect: boolean;
+        };
+        valid: {
+            type: BooleanConstructor;
+            reflect: boolean;
+        };
+    };
+    readonly styles: import("lit").CSSResult[];
+};
+/**
+ * A wrapper of a <text> component.
+ *
+ * ## Details
+ * * has @theme facet
+ *
+ * @fires gv-text:input - mirrors native textarea events with the `value` on `detail`
+ *
+ * @attr {Boolean} disabled - same as native text element `disabled` attribute
+ * @attr {Boolean} required - same as native text element `required` attribute
+ * @attr {Boolean} skeleton - enable skeleton screen UI pattern (loading hint)
+ * @attr {String} value - the value of the text
+ * @attr {String} label - label of the text
+ * @attr {String} title - title of the text
+ * @attr {String} name - name of the text
+ * @attr {String} placeholder - an example value to display in the text when empty
+ * @attr {Length} rows - number of rows of the text element
+ * @attr {Boolean} autofocus - true to put the focus on the input
+ * @attr {Boolean} [readonly=false] - true if field is readonly mode
+ * @attr {Boolean} [autosize=false] - true if field auto resize when content change
+ *
+ * @cssprop {Color} [--gv-input--bdc=var(--gv-theme-neutral-color-dark, #d9d9d9)] - Border color
+ * @cssprop {Length} [--gv-text--fz=var(--gv-theme-font-size-m, 14px)] - Font size
+ * @cssprop {Length} [--gv-text--lh=var(--gv-theme-font-size-m, 14px)] - Line height
+ */
+export class GvText extends GvText_base {
+    static get properties(): {
+        rows: {
+            type: NumberConstructor;
+        };
+        minlength: {
+            type: NumberConstructor;
+        };
+        maxlength: {
+            type: NumberConstructor;
+        };
+        autosize: {
+            type: BooleanConstructor;
+        };
+    };
+    rows: number;
+    _onInput(e: any): void;
+    value: any;
+    render(): "" | import("lit-html").TemplateResult<1>;
+}
+export {};

package/src/charts/gv-chart-bar.d.ts

@@ -0,0 +1,50 @@
+declare const GvChartBar_base: {
+    new (): {
+        [x: string]: any;
+        _skeletonAttribute: string;
+        _eventListener: () => void;
+        connectedCallback(): void;
+        disconnectedCallback(): void;
+        getOptions(): Promise<void>;
+        updated(changedProperties: any): void;
+        _additionalOptions: void | undefined;
+        render(): import("lit-html").TemplateResult<1>;
+        _invisible: boolean;
+        _skeleton: boolean;
+        _error: boolean;
+        _empty: boolean;
+    };
+    readonly properties: {
+        series: {
+            type: ArrayConstructor;
+        };
+        options: {
+            type: ArrayConstructor;
+        };
+        _additionalOptions: {
+            type: ObjectConstructor;
+            attribute: boolean;
+        };
+        _series: {
+            type: ArrayConstructor;
+            attribute: boolean;
+        };
+    };
+    readonly styles: import("lit").CSSResult[];
+};
+/**
+ * Bar chart component
+ *
+ * ⚠️ This component is based on `highcharts`.
+ * To use this component in your project be sure the dependency is installed or
+ * install it with: `npm install highcharts --save`
+ *
+ * @fires gv-chart-bar:select - Custom event with selected value
+ *
+ * @attr {Array} series - The series to display on the bar chart.
+ * @attr {Array} options - The list of options to display.
+ *
+ */
+export class GvChartBar extends GvChartBar_base {
+}
+export {};