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

package/dist/src/organisms/gv-pagination.js

@@ -0,0 +1,179 @@
+/*
+ * 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 { LitElement, html, css } from 'lit';
+import { dispatchCustomEvent } from '../lib/events';
+import '../atoms/gv-button';
+import { i18n } from '../lib/i18n';
+/**
+ * A pagination
+ *
+ * ## Details
+ * * has @theme facet
+ *
+ * @fires gv-pagination:paginate - Custom event with pagination link
+ *
+ * @attr {Object} data - Pagination information {first, last, total, current_page}
+ * @attr {Boolean} hide-empty - hide component if no page or no data.
+ * @attr {Boolean} widget - display widget pagination (with arrows).
+ * @attr {Boolean} disabled - same as native button element `disabled` attribute
+ *
+ * @cssprop {Length} [--gv-pagination--fz=var(--gv-theme-font-size-s, 12px)] - Font size
+ * @cssprop {Length} [--gv-pagination-icon--s=18px] - Height and icon width
+ */
+export class GvPagination extends LitElement {
+    static get properties() {
+        return {
+            data: { type: Object },
+            hideEmpty: { type: Boolean, attribute: 'hide-empty' },
+            widget: { type: Boolean },
+            disabled: { type: Boolean },
+            _first: { type: Number },
+            _last: { type: Number },
+            _current: { type: Number },
+            _total: { type: Number },
+        };
+    }
+    static get styles() {
+        return [
+            // language=css
+            css `
+        .pagination {
+          --font-size: var(--gv-pagination--fz, var(--gv-theme-font-size-s, 12px));
+          font-size: var(--fz);
+          --gv-button--fz: var(--fz);
+          display: flex;
+          align-items: center;
+        }
+
+        gv-button {
+          --gv-icon--s: var(--gv-pagination-icon--s, 18px);
+          min-width: 29px;
+        }
+
+        gv-input {
+          width: 50px;
+        }
+      `,
+        ];
+    }
+    constructor() {
+        super();
+        this.hideEmpty = false;
+        this.hasInput = false;
+        this.max = 10;
+        this.center = this.max / 2 - 1;
+        this.sizes = [];
+        this.links = {};
+    }
+    set data(data) {
+        if (data) {
+            this._last = data.last;
+            this._current = parseInt(data.current_page);
+            this._pages = data.total_pages;
+            if (this._pages < this.max) {
+                this.max = this._pages;
+            }
+        }
+    }
+    _goToPage(page) {
+        this._current = parseInt(page);
+        dispatchCustomEvent(this, 'paginate', { page: page });
+    }
+    _onSubmit(e) {
+        const page = e.target.value;
+        this._goToPage(page);
+    }
+    _onClickToSearch() {
+        const page = this.shadowRoot.querySelector('gv-input').value;
+        if (page) {
+            this._goToPage(page);
+        }
+    }
+    _renderPagination() {
+        const pagination = [];
+        for (let i = 0; i < this._pages; i++) {
+            pagination.push(i + 1);
+        }
+        let left = pagination.slice(0, this._current - 1);
+        let right = pagination.slice(this._current);
+        if (pagination.length > this.max) {
+            const dL = left.length;
+            let removeL = dL - this.center - 1;
+            let addRight = this.max - this._current > this.center ? this.max - this._current : this.center;
+            if (removeL > 0) {
+                addRight = this.center;
+                const diff = this._last - this._current - addRight;
+                if (diff < 0) {
+                    removeL += diff;
+                }
+                left = left.slice(removeL);
+            }
+            right = right.slice(0, addRight);
+        }
+        const leftP = left.map((i) => html `<gv-button small outlined @click="${this._goToPage.bind(this, i)}">${i}</gv-button>`);
+        const rightP = right.map((i) => html `<gv-button small outlined @click="${this._goToPage.bind(this, i)}">${i}</gv-button>`);
+        leftP.unshift(html `<gv-button
+        small
+        .disabled="${this.disabled || leftP.length === 0}"
+        .icon="${this.widget ? 'navigation:angle-left' : null}"
+        .title="${i18n('gv-pagination.previous')}"
+        outlined
+        @click="${leftP.length === 0 ? () => { } : this._goToPage.bind(this, this._current - 1)}"
+        >${this.widget ? '' : i18n('gv-pagination.previous')}</gv-button
+      >`);
+        rightP.push(html `<gv-button
+        small
+        .disabled="${this.disabled || rightP.length === 0}"
+        .icon="${this.widget ? 'navigation:angle-right' : null}"
+        .title="${i18n('gv-pagination.next')}"
+        outlined
+        @click="${rightP.length === 0 ? () => { } : this._goToPage.bind(this, this._current + 1)}"
+        >${this.widget ? '' : i18n('gv-pagination.next')}</gv-button
+      >`);
+        return html `${this.widget ? leftP.slice(0, 1) : leftP}
+    ${html `<gv-button .disabled="${this.disabled}" small primary
+      >${this.widget ? this._current + ' / ' + pagination.length : this._current}</gv-button
+    >`}
+    ${this.widget ? rightP.slice(rightP.length - 1, rightP.length) : rightP}`;
+    }
+    _hasData() {
+        return this._pages && this._last && this._current;
+    }
+    _hideEmpty() {
+        return this._hasData() && this.hideEmpty && this._pages < 2;
+    }
+    render() {
+        if (this._hasData() && !this._hideEmpty()) {
+            return html `<div class="pagination">
+        ${this.hasInput
+                ? html `<gv-input
+                class="goto"
+                @gv-input:submit="${this._onSubmit}"
+                type="number"
+                min="1"
+                max="${this._pages}"
+                placeholder="Page"
+                small
+              ></gv-input>
+              <gv-button small outlined @click="${this._onClickToSearch}" icon="general:search"></gv-button>`
+                : ''}
+        ${this._renderPagination()}
+      </div> `;
+        }
+        return html ``;
+    }
+}
+window.customElements.define('gv-pagination', GvPagination);

package/dist/src/organisms/gv-properties.d.ts

@@ -0,0 +1,229 @@
+declare const GvProperties_base: {
+    new (): {
+        [x: string]: any;
+        _controller: {};
+        _handleKeyDown: (e: any) => void;
+        _handleKeyUp: (e: any) => void;
+        connectedCallback(): void;
+        disconnectedCallback(): void;
+        _onKeyDown(e: any): void;
+        _onKeyUp(e: any): void;
+        isPressed(...keys: any[]): boolean;
+        onKeyboard(controller: any): void;
+    };
+    [x: string]: any;
+};
+/**
+ * A component to manage properties
+ *
+ * @fires gv-properties:change - When list of properties change
+ * @fires gv-properties:save-provider - When user validates provider configuration
+ * @fires gv-properties:switch-encrypted - When user switches encryption toggle
+ *
+ * @attr {Array} properties - Array of Properties {key, value, dynamic?}
+ * @attr {Object} provider - Configuration of provider
+ * @attr {Array} providers - List of available providers (only http for the moment)
+ * @attr {Boolean} expert - For display expert mode by default
+ * @attr {Boolean} encryptable - To display the 'encrypted' toggle on each property
+ *
+ * @cssprop {Length} [--gv-properties-table--colmg=0.2rem] - Table cells margin
+ */
+export class GvProperties extends GvProperties_base {
+    static get properties(): {
+        dynamicPropertySchema: {
+            type: ObjectConstructor;
+        };
+        properties: {
+            type: ArrayConstructor;
+        };
+        _properties: {
+            type: ArrayConstructor;
+            attribute: boolean;
+        };
+        provider: {
+            type: ObjectConstructor;
+        };
+        providers: {
+            type: ArrayConstructor;
+        };
+        _propertySchemaForm: {
+            type: ObjectConstructor;
+            attribute: boolean;
+        };
+        expert: {
+            type: BooleanConstructor;
+        };
+        _formattedErrors: {
+            type: ArrayConstructor;
+            attributes: boolean;
+        };
+        _filter: {
+            type: StringConstructor;
+        };
+        _paginationData: {
+            type: ObjectConstructor;
+            attribute: boolean;
+        };
+        _pageSize: {
+            type: NumberConstructor;
+            attribute: boolean;
+        };
+        _newItem: {
+            type: ObjectConstructor;
+            attribute: boolean;
+        };
+        _providerDocumentation: {
+            type: BooleanConstructor;
+            attribute: boolean;
+        };
+        _showDocumentation: {
+            type: BooleanConstructor;
+            attribute: boolean;
+        };
+        _textRows: {
+            type: NumberConstructor;
+            attribute: boolean;
+        };
+        readonly: {
+            type: BooleanConstructor;
+            reflect: boolean;
+        };
+        encryptable: {
+            type: BooleanConstructor;
+            reflect: boolean;
+        };
+    };
+    static get styles(): import("lit").CSSResult[];
+    set properties(arg: any);
+    get properties(): any;
+    types: any[];
+    provider: {};
+    _currentResource: any;
+    _formattedErrors: any[];
+    _showDocumentation: boolean;
+    _newItem: {
+        key: string;
+        value: string;
+        _new: boolean;
+    };
+    _pageSize: number;
+    _textRows: number;
+    _pageSizes: number[];
+    set _errors(arg: any[]);
+    get _errors(): any[];
+    _properties: any;
+    _getResizableViews(): any;
+    _maximizeTopView(): void;
+    _maximizeBottomView(): void;
+    _splitMainViews(): void;
+    _isNewLineTable(line: any): boolean;
+    _onInputNew(name: any, event: any): void;
+    _onInput(): void;
+    _onSwitchEncrypted(item: any): void;
+    _addProperty(item: any): void;
+    _removeProperty(item: any): void;
+    _disabledNewLine(item: any): boolean;
+    _submitExpertMode(): void;
+    _onExpertModeTextInput({ detail }: {
+        detail: any;
+    }): void;
+    _handleExpertModeInput(expertModeInputString: any): any;
+    _onSubmitPropertyForm({ detail }: {
+        detail: any;
+    }): void;
+    submit(): void;
+    _onSubmit(): void;
+    _onConfigureDynamicProperties(): void;
+    dynamicPropertySchema: {
+        properties: {
+            enabled: {
+                type: string;
+                title: string;
+                description: string;
+            };
+            schedule: {
+                type: string;
+                title: string;
+                'x-schema-form': {
+                    'cron-expression': boolean;
+                };
+            };
+            provider: {
+                type: string;
+                title: string;
+                enum: string[];
+                default: string;
+                'x-schema-form': {
+                    titleMap: any;
+                };
+            };
+        };
+        required: string[];
+    } | undefined;
+    _propertySchemaForm: {
+        properties: {
+            configuration: any;
+            enabled: {
+                type: string;
+                title: string;
+                description: string;
+            };
+            schedule: {
+                type: string;
+                title: string;
+                'x-schema-form': {
+                    'cron-expression': boolean;
+                };
+            };
+            provider: {
+                type: string;
+                title: string;
+                enum: string[];
+                default: string;
+                'x-schema-form': {
+                    titleMap: any;
+                };
+            };
+        };
+        required: string[];
+    } | null | undefined;
+    _providerDocumentation: any;
+    _onClosePropertySchemaForm(): void;
+    _onSearchProperty({ detail }: {
+        detail: any;
+    }): void;
+    _filter: any;
+    _onClearProperty(): void;
+    _renderErrors(withLine?: boolean): import("lit-html").TemplateResult<1>;
+    _renderTable(): import("lit-html").TemplateResult<1>;
+    _onChangeMode({ detail }: {
+        detail: any;
+    }): void;
+    expert: any;
+    _onPaginate({ detail }: {
+        detail: any;
+    }): void;
+    updated(props: any): void;
+    _paginationData: {
+        first: number;
+        last: number;
+        total: any;
+        current_page: number;
+        total_pages: number;
+    } | undefined;
+    _onChangePageSize({ detail }: {
+        detail: any;
+    }): void;
+    _renderTableForm(): import("lit-html").TemplateResult<1>;
+    _fetchDocumentation(): void;
+    _hideDocumentation(): void;
+    get dirty(): any;
+    confirm(): any;
+    _renderForm(): import("lit-html").TemplateResult<1>;
+    _renderBottom(): import("lit-html").TemplateResult<1>;
+    _renderDynamicConfiguration(): string | import("lit-html").TemplateResult<1>;
+    _onMove(): void;
+    _computeTextRows(): void;
+    render(): import("lit-html").TemplateResult<1>;
+}
+export {};