@gravitee/ui-components 3.25.3-typescript-5a46c7d → 3.25.3-typescript-fdacf14

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gravitee/ui-components",
-  "version": "3.25.3-typescript-5a46c7d",
+  "version": "3.25.3-typescript-fdacf14",
   "description": "Gravitee.io UI Components library, based on Web Components",
   "repository": {
     "type": "git",
@@ -9,6 +9,7 @@
   "license": "Apache-2.0",
   "author": "",
   "main": "src/index.js",
+  "types": "src/index.d.ts",
   "files": [
     "assets/css",
     "assets/i18n",
@@ -72,6 +73,7 @@
     "@babel/core": "7.16.5",
     "@babel/plugin-syntax-dynamic-import": "7.8.3",
     "@babel/preset-env": "7.16.5",
+    "@babel/preset-typescript": "^7.16.5",
     "@commitlint/cli": "15.0.0",
     "@commitlint/config-conventional": "15.0.0",
     "@highcharts/map-collection": "1.1.4",

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

@@ -0,0 +1,104 @@
+/**
+ * Autocomplete input wrapper
+ *
+ * ## Details
+ * * has @theme facet
+ *
+ * @fires gv-autocomplete:search - Custom event when user search value
+ * @fires gv-autocomplete:select - Custom event when user select value
+ * @fires gv-autocomplete:opened - Custom event after opened autocomplete
+ *
+ * @slot style - The options style
+ * @slot input - The input to wrap
+ * @slot noOption - What should be shown when there is no options to display
+ *
+ * @attr {Array.<{value: String, innerHTML?: String}>} options - the options for search
+ * @attr {String} value - selected value
+ * @attr {String} style - css if you want custom options rendered
+ * @attr {Number} minChars - minimum of characters for launch search and show results
+ * @attr {Number} size - results size to show before user must scroll
+ * @attr {Boolean|Function(value,option)} filter - If true, filter options by input, if function, filter options against it. The function will
+ * receive two arguments, inputValue and option, if the function returns true, the option will be included
+ * in the filtered set; Otherwise, it will be excluded.
+ * the option will be included in the filtered set; Otherwise, it will be excluded.
+ *
+ * @cssprop {Color} [--gv-autocomplete-hover--bgc=var(--gv-theme-neutral-color-lighter, #fafafa)] - Hover background color
+ * @cssprop {Color} [--gv-autocomplete--bgc=var(--gv-theme-neutral-color-lightest, #ffffff)] - Background color
+ * @cssprop {Color} [--gv-autocomplete--c=var(--gv-theme-font-color, #262626)] - Color
+ */
+export class GvAutocomplete extends LitElement {
+    static get properties(): {
+        options: {
+            type: ArrayConstructor;
+            reflect: boolean;
+        };
+        value: {
+            type: StringConstructor;
+            reflect: boolean;
+        };
+        style: {
+            type: StringConstructor;
+        };
+        minChars: {
+            type: NumberConstructor;
+        };
+        filter: {
+            type: number;
+        };
+        size: {
+            type: NumberConstructor;
+        };
+        _options: {
+            type: ArrayConstructor;
+            attribute: boolean;
+        };
+        _forceOpen: {
+            type: BooleanConstructor;
+            attribute: boolean;
+        };
+    };
+    static get styles(): import("lit").CSSResult[];
+    _options: any[];
+    _candidateIndex: number;
+    minChars: number;
+    value: string;
+    filter: boolean;
+    size: number;
+    _handleOpened: ({ detail }: {
+        detail: any;
+    }) => void;
+    set options(arg: any[]);
+    get options(): any[];
+    reset(): void;
+    _getFilteredOptions(): any[];
+    _onInput(event: any): void;
+    _cancellableTimeout: NodeJS.Timeout | undefined;
+    _onSelect(value: any, option: any): void;
+    _onMouseOver(): void;
+    _shouldSelect: boolean | undefined;
+    _onMouseLeave(): void;
+    _renderOption(option: any): any;
+    _renderStyle(): "" | HTMLDivElement;
+    _hasNoOptionSlot(): boolean;
+    _clearHover(): void;
+    _updateHover(): void;
+    _onKeydown(e: any): void;
+    _open(): void;
+    _forceOpen: boolean | undefined;
+    _close(): void;
+    _onFocus(): void;
+    _onBlur(): void;
+    _getInput(): ChildNode | null;
+    _onClear(event: any): void;
+    _handlers: {
+        input: (event: any) => void;
+        focus: () => void;
+        blur: () => void;
+        keydown: (e: any) => void;
+        clear: (event: any) => void;
+    } | undefined;
+    _onOpened({ detail }: {
+        detail: any;
+    }): void;
+}
+import { LitElement } from "lit-element/lit-element";

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

@@ -0,0 +1,109 @@
+/**
+ * A button
+ *
+ * ## Details
+ *
+ * * attributes `primary` define the mode of the button and are exclusive.
+ * * You can only set one mode at a time.
+ * * When you don't use any of these values, the mode defaults to `default`.
+ * * has @theme facet
+ *
+ * @fires gv-button:click - Click event from inner button element
+ *
+ * @slot - The content of the button (text or HTML)
+ *
+ * @attr {Enum{button|submit}} type - the type of the button
+ * @attr {Boolean} primary - set button UI mode to primary
+ * @attr {Boolean} danger - set button UI mode to danger
+ * @attr {Boolean} disabled - same as native button element `disabled` attribute
+ * @attr {Boolean} outlined - set button UI as outlined (white background instead of filled color)
+ * @attr {Boolean} link - set button UI mode to link
+ * @attr {String} href - If is defined gv-button will be rendered as a <a> with `href`
+ * @attr {Boolean} skeleton - enable skeleton screen UI pattern (loading hint)
+ * @attr {String} icon - display an icon on the left side of the button
+ * @attr {String} icon-right - display an icon on the right side of the button
+ * @attr {String} title - title of button
+ * @attr {Boolean} loading - true to display a loading icon
+ * @attr {String} provider - Provider name (github, oidc, graviteeio_am, google)
+ * @attr {Boolean} small - for a small input
+ * @attr {Number} tabindex - tabindex of button
+ *
+ * @cssprop {Color} [--gv-button--bgc=var(--gv-theme-color-dark, #28444f)] - Background color
+ * @cssprop {Color} [--gv-button--c=var(--gv-theme-font-color-light, #ffffff)] - Color
+ * @cssprop {Color} [--gv-button-primary--c=var(--gv-theme-font-color-light, #ffffff)] - Primary color
+ * @cssprop {Color} [--gv-button-primary--bgc=var(--gv-theme-color, #5a7684)] - Primary background color
+ * @cssprop {Color} [--gv-button-danger--c=var(--gv-theme-font-color-light, #ffffff)] - Danger color
+ * @cssprop {Color} [--gv-button-danger--bgc=var(--gv-theme-color-danger, #ff5722)] - Danger background color
+ * @cssprop {Color} [--gv-button-oidc--bgc=#000000] - OIDC Social Provider button background color
+ * @cssprop {Color} [--gv-button-graviteeio_am--bgc=#86c3d0] - Gravitee.io AM Social Provider button background color
+ * @cssprop {Length} [--gv-button--p=7px 14px] - Padding
+ * @cssprop {Length} [--gv-button--fz=var(--gv-theme-font-size-m, 14px)] - Font size
+ * @cssprop {Length} [--gv-button--bdrs=0.15rem] - Border radius
+ */
+export class GvButton extends LitElement {
+    static get properties(): {
+        type: {
+            type: StringConstructor;
+        };
+        danger: {
+            type: BooleanConstructor;
+        };
+        disabled: {
+            type: BooleanConstructor;
+        };
+        primary: {
+            type: BooleanConstructor;
+        };
+        outlined: {
+            type: BooleanConstructor;
+        };
+        link: {
+            type: BooleanConstructor;
+        };
+        href: {
+            type: StringConstructor;
+        };
+        skeleton: {
+            type: BooleanConstructor;
+        };
+        icon: {
+            type: StringConstructor;
+        };
+        iconRight: {
+            type: StringConstructor;
+            attribute: string;
+        };
+        loading: {
+            type: BooleanConstructor;
+        };
+        title: {
+            type: StringConstructor;
+            reflect: boolean;
+        };
+        provider: {
+            type: StringConstructor;
+        };
+        small: {
+            type: BooleanConstructor;
+        };
+        tabindex: {
+            type: NumberConstructor;
+            reflect: boolean;
+        };
+        _hasContent: {
+            type: BooleanConstructor;
+            attribute: boolean;
+        };
+    };
+    static get styles(): import("lit").CSSResult[];
+    tabindex: number;
+    type: string;
+    _onKeyDown(e: any): void;
+    _onClick(e: any): void;
+    icon: string | undefined;
+    _getIconRight(): "" | import("lit-html").TemplateResult<1>;
+    _hasIconLeft(): any;
+    _getIconLeft(): "" | import("lit-html").TemplateResult<1>;
+    _hasContent: boolean | undefined;
+}
+import { LitElement } from "lit-element/lit-element";

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

@@ -0,0 +1,114 @@
+declare const GvCheckbox_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 <checkbox> component.
+ *
+ * ## Details
+ * * has @theme facet
+ *
+ * @fires gv-checkbox:input - mirrors native input events with the `value` on `detail`
+ * @fires input - native input event
+ * @fires change - native change event
+ *
+ * @attr {Boolean} disabled - same as native checkbox element `disabled` attribute
+ * @attr {Boolean} skeleton - enable skeleton screen UI pattern (loading hint)
+ * @attr {String} value - The string to use as the value of the checkbox when submitting the form, if the checkbox is currently toggled on
+ * @attr {Boolean} checked - true if the checkbox is checked, false otherwise
+ * @attr {String} label - label of the checkbox
+ * @attr {String} title - title of the checkbox
+ *
+ * @cssprop {Color} [--gv-checkbox--bgc=var(--gv-theme-color, #5a7684)] - Checked background color
+ */
+export class GvCheckbox extends GvCheckbox_base {
+    static get properties(): {
+        disabled: {
+            type: BooleanConstructor;
+        };
+        skeleton: {
+            type: BooleanConstructor;
+        };
+        value: {
+            type: StringConstructor;
+            reflect: boolean;
+        };
+        checked: {
+            type: BooleanConstructor;
+            reflect: boolean;
+        };
+        label: {
+            type: StringConstructor;
+        };
+        title: {
+            type: StringConstructor;
+        };
+    };
+    _type: string;
+    checked: boolean;
+    value: string;
+    _renderLabel(): "" | import("lit-html").TemplateResult<1>;
+    _onInput(): void;
+    render(): import("lit-html").TemplateResult<1>;
+}
+export {};

package/src/atoms/gv-date-picker-calendar.d.ts

@@ -0,0 +1,190 @@
+/**
+ * Date Picker Calendar
+ *
+ * ## Details
+ * * has @theme facet
+ *
+ * @fires gv-date-picker-cell:select - Custom event when user select cell
+ * @fires gv-date-picker-cell:hover - Custom event when user hover cell
+ *
+ * @attr {Number} dateFrom - unix date form
+ * @attr {Number} dateTo - unix date to
+ * @attr {Array} disabledDates - array of disabled date
+ * @attr {Number} hoveredDate - unix hovered date
+ * @attr {Number} min - unix min date
+ * @attr {Number} max - unix max date
+ * @attr {Object} locale - date-fns locale object
+ *
+ * @cssprop {Color} [--gv-date-picker-hover--bgc=var(--gv-theme-color-light, #86c3d0)] - Hover background color
+ * @cssprop {Color} [--gv-date-picker-hover--c=var(--gv-theme-font-color-dark, #262626)] - Hover color
+ * @cssprop {Color} [--gv-date-picker-selected--bgc=var(--gv-theme-color, #5a7684)] - Selected background color
+ * @cssprop {Color} [--gv-date-picker-selected--c=var(--gv-theme-font-color-light, #ffffff)] - Selected color
+ */
+export class GvDatePickerCalendar extends LitElement {
+    static get properties(): {
+        dateFrom: {
+            type: NumberConstructor;
+        };
+        dateTo: {
+            type: NumberConstructor;
+        };
+        disabledDates: {
+            type: ArrayConstructor;
+        };
+        hoveredDate: {
+            type: NumberConstructor;
+        };
+        locale: {
+            type: ObjectConstructor;
+        };
+        max: {
+            type: NumberConstructor;
+        };
+        min: {
+            type: NumberConstructor;
+        };
+        month: {
+            type: StringConstructor;
+        };
+        monthMode: {
+            type: BooleanConstructor;
+        };
+        next: {
+            type: BooleanConstructor;
+        };
+        prev: {
+            type: BooleanConstructor;
+        };
+        range: {
+            type: BooleanConstructor;
+        };
+        time: {
+            type: BooleanConstructor;
+        };
+        small: {
+            type: BooleanConstructor;
+            reflect: boolean;
+        };
+        strict: {
+            type: BooleanConstructor;
+        };
+        year: {
+            type: StringConstructor;
+        };
+        yearMode: {
+            type: BooleanConstructor;
+        };
+        _dayNamesOfWeek: {
+            type: ArrayConstructor;
+            attribute: boolean;
+        };
+        _dimensions: {
+            type: ArrayConstructor;
+            attribute: boolean;
+        };
+        _hasGoToday: {
+            type: BooleanConstructor;
+            attribute: boolean;
+        };
+        _hour: {
+            type: NumberConstructor;
+            attribute: boolean;
+        };
+        _minute: {
+            type: NumberConstructor;
+            attribute: boolean;
+        };
+        _second: {
+            type: NumberConstructor;
+            attribute: boolean;
+        };
+        _monthsList: {
+            type: ArrayConstructor;
+            attribute: boolean;
+        };
+        _locale: {
+            type: ObjectConstructor;
+            attribute: boolean;
+        };
+        _from: {
+            type: NumberConstructor;
+            attribute: boolean;
+        };
+        _to: {
+            type: NumberConstructor;
+            attribute: boolean;
+        };
+    };
+    static get styles(): import("lit").CSSResult[];
+    _dayNamesOfWeek: any[];
+    _monthsList: string[];
+    range: boolean;
+    currentDate: number;
+    _hasGoToday: boolean;
+    _hours: string[];
+    _minutes: string[];
+    _seconds: string[];
+    set dateFrom(arg: any);
+    _from: any;
+    _hour: any;
+    _minute: any;
+    _second: any;
+    set dateTo(arg: any);
+    _to: any;
+    computeArrayOfTime(size: any): string[];
+    _renderPreviousNav(): "" | import("lit-html").TemplateResult<1>;
+    _renderCurrentNav(): import("lit-html").TemplateResult<1>;
+    _renderNextNav(): import("lit-html").TemplateResult<1> | undefined;
+    _renderDays(): import("lit-html").TemplateResult<1>;
+    isStrictTime(): boolean;
+    isMinutesDisabled(value: any): boolean;
+    isSecondsDisabled(value: any): boolean;
+    isHoursDisabled(value: any): boolean;
+    _updateTime(): void;
+    getTime(): string;
+    isCurrentDate(data: any): boolean;
+    _updateDays(): void;
+    yearAndMonthChanged(year: any, month: any): void;
+    _dimensions: null[][] | {
+        hover: boolean;
+        date: number;
+        title: string;
+    }[][] | (number | {
+        hover: boolean;
+        date: number;
+        title: number;
+    })[][] | undefined;
+    getYearInterval(year?: any): {
+        start: number;
+        end: number;
+    };
+    computeName(month: any, year: any, _format?: string): string;
+    computeCurrentYearName(): any;
+    _onSelectHour(value: any): void;
+    _onSelectMinute(value: any): void;
+    _onSelectSecond(value: any): void;
+    _onSelectMonth(): void;
+    _dateFrom: any;
+    yearMode: any;
+    monthMode: any;
+    _onSelectYear(): void;
+    get datetimeSelected(): number;
+    _onDateTimeSelected(): void;
+    value: number | undefined;
+    _onNow(): void;
+    month: string | undefined;
+    year: any;
+    get disableValidation(): boolean;
+    _onSelect({ detail }: {
+        detail: any;
+    }): void;
+    hoveredDate: any;
+    _onHover(event: any): void;
+    _onNextMonth(): void;
+    _onPrevMonth(): void;
+    _onNextYear(): void;
+    _onPrevYear(): void;
+    goToday(): void;
+    hasGoToday(): boolean;
+}
+import { LitElement } from "lit-element/lit-element";

package/src/atoms/gv-date-picker-cell.d.ts

@@ -0,0 +1,80 @@
+/**
+ * Date Picker Cell
+ *
+ * ## Details
+ * * has @theme facet
+ *
+ * @fires gv-date-picker-cell:select - Custom event when user select cell
+ * @fires gv-date-picker-cell:hover - Custom event when user hover cell
+ *
+ * @attr {Object.<{date:Number,title:String}>} data - data to display
+ * @attr {Boolean} selected - if data is selected
+ * @attr {Boolean} hovered - if data is hovered
+ * @attr {Boolean} disabled - if data is disabled
+ * @attr {Boolean} isCurrent - if data is current date
+ * @attr {Number} dateFrom - unix date form
+ * @attr {Number} dateTo - unix date to
+ * @attr {Number} hoveredDate - unix hovered date
+ * @attr {Number} min - unix min date
+ * @attr {Number} max - unix max date
+ * @attr {Array} disabledDates - array of disabled date
+ *
+ * @cssprop {Color} [--gv-date-picker-hover--bgc=var(--gv-theme-color-light, #86c3d0)] - Hover background color
+ * @cssprop {Color} [--gv-date-picker-hover--c=var(--gv-theme-font-color-dark, #262626)] - Hover color
+ * @cssprop {Color} [--gv-date-picker-selected--bgc=var(--gv-theme-color, #5a7684)] - Selected background color
+ * @cssprop {Color} [--gv-date-picker-selected--c=var(--gv-theme-font-color-light, #ffffff)] - Selected color
+ */
+export class GvDatePickerCell extends LitElement {
+    static get properties(): {
+        data: {
+            type: ObjectConstructor;
+        };
+        selected: {
+            type: BooleanConstructor;
+        };
+        hovered: {
+            type: BooleanConstructor;
+        };
+        dateTo: {
+            type: NumberConstructor;
+        };
+        dateFrom: {
+            type: NumberConstructor;
+        };
+        month: {
+            type: StringConstructor;
+        };
+        hoveredDate: {
+            type: NumberConstructor;
+        };
+        min: {
+            type: NumberConstructor;
+        };
+        max: {
+            type: NumberConstructor;
+        };
+        disabled: {
+            type: BooleanConstructor;
+        };
+        isCurrent: {
+            type: BooleanConstructor;
+        };
+        time: {
+            type: BooleanConstructor;
+        };
+        disabledDate: {
+            type: ArrayConstructor;
+        };
+    };
+    static get styles(): import("lit").CSSResult[];
+    selected: boolean;
+    hovered: boolean;
+    isCurrent: boolean;
+    disabledDates: any[];
+    isSelected(parsedDateFrom: any, parsedDateTo: any, data: any): any;
+    dateChanged(dateFrom: any, dateTo: any, hoveredDate: any, data: any): void;
+    _onClick(): void;
+    _onMouseOver(): void;
+    isDisabled(): boolean;
+}
+import { LitElement } from "lit-element/lit-element";