@gravitee/ui-components 3.25.3-typescript-bfd8f67 → 3.25.3-typescript-94e8113

package/dist/src/molecules/gv-stepper.d.ts

@@ -0,0 +1,46 @@
+/**
+ * Stepper component
+ *
+ * ## Details
+ * * has @theme facet
+ *
+ * @fires gv-stepper:change - when step change
+ *
+ * @attr {Length} current - The current selected step
+ * @attr {Array} steps - Array of step {title: string, description: string, valid: boolean, invalid: boolean}
+ * @attr {Boolean} [disabled=false] - Indicate if stepper is disabled
+ *
+ * @cssprop {Color} [--gv-stepper-valid--bgc=var(--gv-theme-color, #5a7684)] - Valid background color
+ * @cssprop {Color} [--gv-stepper-passed--bdc=var(--gv-theme-color-light, #86c3d0)] - Passed border color
+ * @cssprop {Color} [--gv-stepper--bgc=var(--gv-theme-neutral-color-dark, #bfbfbf)] - Background color
+ * @cssprop {Color} [--gv-stepper--bdc=var(--gv-theme-neutral-color-dark, #bfbfbf)] - Border color
+ * @cssprop {Color} [--gv-stepper--c=var(--gv-theme-neutral-color-dark, #bfbfbf)] - Color
+ * @cssprop {Color} [--gv-stepper-passed--c=#595959] - Passed color
+ * @cssprop {Length} [--gv-stepper-icon--s=32px] - Height and icon width
+ */
+export class GvStepper extends LitElement {
+    static get properties(): {
+        current: {
+            type: NumberConstructor;
+            reflect: boolean;
+        };
+        steps: {
+            type: ArrayConstructor;
+        };
+        disabled: {
+            type: BooleanConstructor;
+        };
+        _error: {
+            type: BooleanConstructor;
+        };
+    };
+    static get styles(): import("lit").CSSResult[];
+    current: number;
+    _steps: any[];
+    _error: boolean;
+    _empty: boolean;
+    _onClick(index: any): void;
+    _getIcon(step: any): import("lit-html").TemplateResult<1>;
+    _getStep(step: any, index: any): import("lit-html").TemplateResult<1>;
+}
+import { LitElement } from "lit-element/lit-element";

package/dist/src/molecules/gv-stepper.js

@@ -0,0 +1,274 @@
+/*
+ * Copyright (C) 2015 The Gravitee team (http://gravitee.io)
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *         http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import { css, html, LitElement } from 'lit';
+import { repeat } from 'lit/directives/repeat';
+import { classMap } from 'lit/directives/class-map';
+import { link } from '../styles/link';
+import { dispatchCustomEvent } from '../lib/events';
+import { i18n } from '../lib/i18n';
+/**
+ * Stepper component
+ *
+ * ## Details
+ * * has @theme facet
+ *
+ * @fires gv-stepper:change - when step change
+ *
+ * @attr {Length} current - The current selected step
+ * @attr {Array} steps - Array of step {title: string, description: string, valid: boolean, invalid: boolean}
+ * @attr {Boolean} [disabled=false] - Indicate if stepper is disabled
+ *
+ * @cssprop {Color} [--gv-stepper-valid--bgc=var(--gv-theme-color, #5a7684)] - Valid background color
+ * @cssprop {Color} [--gv-stepper-passed--bdc=var(--gv-theme-color-light, #86c3d0)] - Passed border color
+ * @cssprop {Color} [--gv-stepper--bgc=var(--gv-theme-neutral-color-dark, #bfbfbf)] - Background color
+ * @cssprop {Color} [--gv-stepper--bdc=var(--gv-theme-neutral-color-dark, #bfbfbf)] - Border color
+ * @cssprop {Color} [--gv-stepper--c=var(--gv-theme-neutral-color-dark, #bfbfbf)] - Color
+ * @cssprop {Color} [--gv-stepper-passed--c=#595959] - Passed color
+ * @cssprop {Length} [--gv-stepper-icon--s=32px] - Height and icon width
+ */
+export class GvStepper extends LitElement {
+    static get properties() {
+        return {
+            current: { type: Number, reflect: true },
+            steps: { type: Array },
+            disabled: { type: Boolean },
+            _error: { type: Boolean },
+        };
+    }
+    static get styles() {
+        return [
+            link,
+            // language=CSS
+            css `
+        :host {
+          box-sizing: border-box;
+          --passed--bgc: var(--gv-stepper-valid--bgc, var(--gv-theme-color, #5a7684));
+          --passed--bdc: var(--gv-stepper-passed--bdc, var(--gv-theme-color-light, #86c3d0));
+          --bdc: var(--gv-stepper--bdc, var(--gv-theme-neutral-color-dark, #bfbfbf));
+          --bgc: var(--gv-stepper--bgc, var(--gv-theme-neutral-color-dark, #bfbfbf));
+          --passed--c: var(--gv-stepper-passed--c, #595959);
+          --c: var(--gv-stepper--c, var(--gv-theme-neutral-color-dark, #bfbfbf));
+        }
+
+        .stepper {
+          display: flex;
+          justify-content: center;
+        }
+
+        .disabled .step {
+          cursor: not-allowed;
+        }
+
+        .step {
+          display: flex;
+          flex-direction: column;
+          cursor: pointer;
+        }
+
+        .graph {
+          display: flex;
+          flex-direction: row;
+          min-height: 22px;
+          min-width: 250px;
+        }
+
+        .round {
+          min-width: 6px;
+          width: 6px;
+          min-height: 6px;
+          height: 6px;
+          border-radius: 50%;
+          margin: 2px 7px 2px 7px;
+        }
+
+        .border {
+          margin-top: 4px;
+          min-width: 100px;
+          width: 100%;
+          height: 2px;
+          clear: both;
+        }
+
+        .round {
+          background-color: var(--bgc);
+          transition: all 0.2s ease-in;
+        }
+
+        .border {
+          background-color: var(--bdc);
+          margin-bottom: 5px;
+          transition: all 0.2s ease-in;
+        }
+
+        .passed .round {
+          background-color: var(--passed--bgc);
+        }
+
+        .passed .border {
+          background-color: var(--passed--bdc);
+        }
+
+        .passed .round {
+          height: 10px;
+          width: 10px;
+          min-height: 10px;
+          min-width: 10px;
+          margin: 0 5px 0 5px;
+        }
+
+        .first .border:first-of-type {
+          visibility: hidden;
+        }
+
+        .end .border:last-of-type {
+          visibility: hidden;
+        }
+
+        .content {
+          display: flex;
+          flex-direction: column;
+          align-items: center;
+
+          padding: 5px;
+          line-height: 24px;
+          font-size: var(--gv-theme-font-size-l, 16px);
+          color: var(--c);
+        }
+
+        .passed .content {
+          color: var(--passed--c);
+        }
+
+        .title {
+          font-weight: bold;
+        }
+
+        .description {
+          font-size: var(--gv-theme-font-size-m, 14px);
+        }
+
+        .error {
+          text-align: center;
+        }
+
+        .circle {
+          border: 1px solid var(--passed--bgc);
+          margin-top: -12px;
+          border-radius: 50%;
+          animation: validate 0.2s ease-in;
+        }
+
+        .invalid.circle {
+        }
+
+        gv-icon {
+          --gv-icon--c: var(--passed--bgc);
+          --gv-icon--s: var(--gv-stepper-icon--s, 32px);
+        }
+
+        .invalid gv-icon {
+          --gv-icon--c: var(--gv-theme-color-danger);
+        }
+
+        @keyframes validate {
+          from {
+            opacity: 0;
+          }
+          to {
+            opacity: 1;
+          }
+        }
+      `,
+        ];
+    }
+    constructor() {
+        super();
+        this.current = 0;
+        this._steps = [];
+        this._error = false;
+        this._empty = true;
+    }
+    _onClick(index) {
+        if (this.disabled !== true) {
+            this.current = index + 1;
+            dispatchCustomEvent(this, 'change', { current: this.current });
+        }
+    }
+    async performUpdate() {
+        await Promise.all([this.steps, this.current])
+            .then(([steps, current]) => {
+            this._steps = steps.map((step, _index) => {
+                step.passed = step.valid === true || (current > 0 && _index + 1 <= current);
+                return step;
+            });
+            this._error = false;
+            this._empty = !(this._steps && this._steps.length > 0);
+        })
+            .catch(() => {
+            this._error = true;
+            this._empty = false;
+        });
+        super.performUpdate();
+    }
+    _getIcon(step) {
+        if (step.invalid) {
+            return html `<div class="circle invalid"><gv-icon shape="code:error"></gv-icon></div>`;
+        }
+        if (step.valid) {
+            return html `<div class="circle"><gv-icon shape="code:check"></gv-icon></div>`;
+        }
+        return html `<div class="round"></div>`;
+    }
+    _getStep(step, index) {
+        const classes = {
+            passed: step.passed,
+            valid: step.valid,
+            step: true,
+            first: index === 0,
+            end: index === this._steps.length - 1,
+        };
+        const contentClasses = {
+            content: true,
+            link: !this.disabled,
+        };
+        return html `
+      <div class="${classMap(classes)}" @click="${this._onClick.bind(this, index)}" title="${step.title}">
+        <div class="graph">
+          <div class="border"></div>
+          ${this._getIcon(step)}
+          <div class="border"></div>
+        </div>
+        <div class="${classMap(contentClasses)}">
+          <div class="title">${step.title}</div>
+          <div class="description">${step.description}</div>
+        </div>
+      </div>
+    `;
+    }
+    render() {
+        if (this._error) {
+            return html `<div class="error">${i18n('gv-stepper.error')}</div>`;
+        }
+        if (this._empty) {
+            return html `<div></div>`;
+        }
+        const classes = { stepper: true, disabled: this.disabled };
+        return html `<div class="${classMap(classes)}">
+      ${repeat(this._steps, (step) => step, (step, index) => this._getStep(step, index))}
+    </div> `;
+    }
+}
+window.customElements.define('gv-stepper', GvStepper);

package/dist/src/molecules/gv-table.d.ts

@@ -0,0 +1,159 @@
+declare const GvTable_base: {
+    new (): {
+        [x: string]: any;
+        _onResize({ width }: {
+            width: any;
+        }): void;
+        connectedCallback(): Promise<void>;
+        _unobserveResize: (() => any) | undefined;
+        disconnectedCallback(): void;
+    };
+    [x: string]: any;
+};
+/**
+ * Table component
+ *
+ * ## Details
+ * * has @theme facet
+ *
+ * @fires gv-table:select - when table row is selected
+ * @fires gv-table:mouseenter - when the pointer is entering on a table row
+ * @fires gv-table:mouseleave - when the pointer is leaving a table row
+ * @fires gv-table:sort - when the order is changed
+ *
+ * @attr {Array<any>} items - A list of items to display
+ * @attr {String} title - A title to display
+ * @attr {String} order - If defined, the table will be ordered by the field. Start with '-' to sort in desc
+ * @attr {Array<any>} options - The list of options to display
+ * @attr {Boolean} noheader - Used to hide the table header
+ * @attr {Boolean} nosort - Used to disable the click on header to sort
+ * @attr {String} rowsheight - The height of the table rows
+ * @attr {String} rowheight - The height of the table single row
+ * @attr {String} emptymessage - The empty message to display
+ * @attr {Function} format - A function to format table headers and string cells
+ * @attr {Function} compareFn - A function to define how to sort. Default function will sort selected field ignoring case
+ * @attr {Array<any>} selected - A list of selected ids of the items displayed
+ * @attr {String} total - Total of data displayed on the table (useful with in case of pagination)
+ * @attr {Boolean} skeleton - Force gv-table to be in skeleton mode
+ *
+ * @cssprop {Color} [--gv-table-selected--bgc=var(--gv-theme-color, #5a7684)] - Selected background color
+ * @cssprop {Color} [--gv-table-hover--bgc=var(--gv-theme-neutral-color-lighter, #fafafa)] - Row background color on hover
+ * @cssprop {Color} [--gv-table--bgc=var(--gv-theme-neutral-color-lightest, #ffffff)] - Background color
+ * @cssprop {Color} [--gv-table--bdc=var(--gv-theme-neutral-color-dark, #d9d9d9)] - Border color
+ * @cssprop {String} [--gv-table-header--fz=var(--gv-theme-font-size-l, 20px)] - Title font size
+ * @cssprop {Length} [--gv-table-header--p=2rem 4rem] - Title padding
+ * @cssprop {String} [--gv-table-rows--ov=auto] - Overflow on table
+ * @cssprop {Length} [--gv-table--colmg=0.2rem] - Column gap
+ * @cssprop {String} [--gv-table-row--ai=center] - Row align-items
+ * @cssprop {String} [--gv-table-row--ac=center] - Row align-content
+ * @cssprop {String} [--gv-table-cell--d=flex] - Cell display
+ */
+export class GvTable extends GvTable_base {
+    static get properties(): {
+        items: {
+            type: ArrayConstructor;
+        };
+        title: {
+            type: StringConstructor;
+        };
+        order: {
+            type: StringConstructor;
+        };
+        options: {
+            type: ArrayConstructor;
+        };
+        noheader: {
+            type: BooleanConstructor;
+        };
+        nosort: {
+            type: BooleanConstructor;
+        };
+        rowsheight: {
+            type: StringConstructor;
+        };
+        rowheight: {
+            type: StringConstructor;
+        };
+        emptymessage: {
+            type: StringConstructor;
+        };
+        format: {
+            type: FunctionConstructor;
+        };
+        compareFn: {
+            type: FunctionConstructor;
+        };
+        selected: {
+            type: ArrayConstructor;
+            reflect: boolean;
+        };
+        total: {
+            type: StringConstructor;
+        };
+        skeleton: {
+            type: BooleanConstructor;
+        };
+        _items: {
+            type: ArrayConstructor;
+            attribute: boolean;
+        };
+        _skeleton: {
+            type: BooleanConstructor;
+            attribute: boolean;
+        };
+        _error: {
+            type: BooleanConstructor;
+            attribute: boolean;
+        };
+        _empty: {
+            type: BooleanConstructor;
+            attribute: boolean;
+        };
+        _itemsProvider: {
+            type: ArrayConstructor;
+            attribute: boolean;
+        };
+        _page: {
+            type: NumberConstructor;
+            attribute: boolean;
+        };
+    };
+    static get styles(): import("lit").CSSResult[];
+    _id: number;
+    breakpoints: {
+        width: number[];
+    };
+    _empty: boolean;
+    order: string;
+    _page: number;
+    _itemsProvider: any[];
+    selected: any[];
+    compareFn: (item: any, item2: any, value: any) => any;
+    set items(arg: any[]);
+    get items(): any[];
+    _skeleton: boolean | undefined;
+    _error: boolean | undefined;
+    _onSortChanged(field: any, e: any): void;
+    get _items(): any[];
+    _getItemId(item: any): any;
+    _onSelect(item: any, event: any): void;
+    get selectedItems(): any[];
+    _onMouseEnter(item: any): void;
+    _onMouseLeave(): void;
+    _renderHeader(styleGridColumns: any): "" | import("lit-html").TemplateResult<1>;
+    _renderIcon(item: any, itemIndex: any, option: any): "" | import("lit-html").TemplateResult<1>;
+    _renderComponent(item: any, itemIndex: any, option: any, value: any, type: any): any;
+    _renderCell(formattedValue: any, option: any, item: any, itemIndex: any): any;
+    _getFormattedCellValue(option: any, item: any): any;
+    _isSelected(item: any): boolean;
+    _renderRows(styleGridColumns: any): import("lit-html").TemplateResult<1>;
+    _renderItems(): import("lit-html").TemplateResult<1>;
+    _renderPagination(): import("lit-html").TemplateResult<1> | undefined;
+    _getDataFromField(item: any, field: any): any;
+    _renderTag(option: any, item: any): "" | import("lit-html").TemplateResult<1>;
+    _onImageLoaded(): void;
+    _renderImage(picture: any, alt: any): import("lit-html").TemplateResult<1>;
+    updated(props: any): void;
+    render(): import("lit-html").TemplateResult<1>;
+}
+export {};