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

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

@@ -0,0 +1,258 @@
+/*
+ * 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 '../molecules/gv-nav';
+import { isSameRoutes } from '../lib/utils';
+import { classMap } from 'lit/directives/class-map';
+import { withResizeObserver } from '../mixins/with-resize-observer';
+/**
+ * A menu
+ *
+ * ## Details
+ * * has @theme facet
+ *
+ * @fires gv-link:click - Custom event when link click
+ *
+ * @slot top - The content on top of menu
+ * @slot right - The content at right
+ * @slot right-transition - The content at right with transition
+ *
+ * @attr {Array} routes - definition of routes [{active: Boolean, icon: String, path: String, title: Promise<String>]
+ * @cssprop {Color} [--gv-menu--c=var(--gv-theme-font-color-light, #ffffff)] - Color
+ * @cssprop {Color} [--gv-menu--bgc=var(--gv-theme-color-dark, #28444f)] - Background color.
+ * @cssprop {Color} [--gv-menu-link-active--bdc=var(--gv-theme-color-light, #86c3d0)] - Border bottom color of active link.
+ * @cssprop {String} [--gv-menu-link-active--bds=solid] - Border bottom style of active link.
+ * @cssprop {Length} [--gv-menu-link-active--bdw=0 0 3px 0] - Border bottom width of active link.
+ * @cssprop {Color} [--gv-menu-link-active--bgc=transparent] - Active background color
+ * @cssprop {Color} [--gv-menu-link--bgc=transparent] - Background color
+ * @cssprop {Length} [--gv-menu-link-a--pv=0px] - Link vertical padding
+ */
+export class GvMenu extends withResizeObserver(LitElement) {
+    static get properties() {
+        return {
+            /** @required **/
+            routes: { type: Array },
+            sticky: { type: Boolean, reflect: true },
+            _small: { type: Boolean, attribute: false },
+            _routes: { type: Array, attribute: false },
+            _hasHeader: { type: Boolean, attribute: false },
+        };
+    }
+    static get styles() {
+        return [
+            // language=css
+            css `
+        :host {
+          --gv-link--c: var(--gv-menu--c, var(--gv-theme-font-color-light, #ffffff));
+          --gv-link-active--c: var(--gv-menu--c, var(--gv-theme-font-color-light, #ffffff));
+          --gv-link--bgc: var(--gv-menu-link--bgc, transparent);
+          --gv-link-active--bgc: var(--gv-menu-link-active--bgc, transparent);
+          --gv-link-active--bdc: var(--gv-menu-link-active--bdc, var(--gv-theme-color-light, #86c3d0));
+          --gv-link-active--bds: var(--gv-menu-link-active--bds, solid);
+          --gv-link-active--bdw: var(--gv-menu-link-active--bdw, 0 0 3px 0);
+          --pr: var(--gv-theme-layout--pr, 4rem);
+          --pl: var(--gv-theme-layout--pl, 4rem);
+          box-sizing: border-box;
+          display: block;
+          font-size: var(--gv-theme-font-size-s, 12px);
+        }
+
+        :host([sticky]) gv-nav {
+          line-height: 14px;
+          --gv-link-icon--s: 20px;
+        }
+
+        :host([sticky]) .has-header gv-nav {
+          line-height: 34px;
+        }
+
+        :host([sticky]) ::slotted([slot='top']) {
+          transition: height 250ms ease-in-out;
+        }
+
+        :host([w-lt-1024]) {
+          --pr: 5px;
+          --pl: 5px;
+        }
+
+        :host([w-lt-768]) .nav-container {
+          width: 100%;
+          padding-left: var(--pl);
+          --gv-link-a--pv: var(--gv-menu-link-a--pv, 0px);
+        }
+
+        :host([w-lt-580]) .nav-container {
+          flex: auto;
+          padding-left: 0;
+        }
+
+        :host([w-lt-580]) gv-nav {
+          flex: auto;
+        }
+
+        :host([w-lt-580]) .right {
+          flex: auto;
+        }
+
+        :host([w-lt-380]) .nav-container {
+          display: flex;
+          flex-direction: column-reverse;
+        }
+
+        :host([w-lt-380]) gv-nav {
+          align-self: flex-start;
+          flex: 1;
+        }
+
+        :host([w-lt-380]) .right {
+          align-self: flex-end;
+          flex: 1;
+          width: 100%;
+          padding-right: 0;
+        }
+
+        gv-nav {
+          display: table-cell;
+          line-height: 50px;
+          vertical-align: middle;
+        }
+
+        .nav-container {
+          display: grid;
+          grid-template-columns: auto auto;
+          background-color: var(--gv-menu--bgc, var(--gv-theme-color-dark, #28444f));
+          color: var(--gv-menu--c, var(--gv-theme-font-color-light, #ffffff));
+        }
+
+        .has-header .nav-container {
+          width: calc(100% - 10rem);
+          padding-left: 10rem;
+          --gv-link-a--pv: 0;
+        }
+
+        :host([sticky]) .has-header .nav-container {
+          width: calc(100% - 5rem);
+          padding-left: 5rem;
+          transition: all 250ms ease-in-out;
+        }
+
+        .right {
+          display: flex;
+          padding-right: var(--pr);
+          justify-content: center;
+          flex-direction: column;
+        }
+
+        gv-nav {
+          padding-left: var(--pl);
+          transition: width 250ms ease-in-out;
+        }
+
+        slot[name='right-transition'],
+        slot[name='right'] {
+          display: flex;
+          justify-content: flex-end;
+          width: 100%;
+        }
+
+        .right ::slotted([slot='right']),
+        .right ::slotted([slot='right-transition']) {
+          align-self: center;
+        }
+
+        .right ::slotted([slot='right-transition']) {
+          transition: width 250ms ease 250ms;
+          width: 70%;
+        }
+
+        .right:focus-within ::slotted([slot='right-transition']) {
+          animation: slide 250ms 250ms;
+          transition: width 250ms ease-in-out 250ms;
+          width: 100%;
+        }
+
+        .right ::slotted([slot='right']) {
+          --gv-button--p: 7px 16px;
+          --gv-button--fz: 15px;
+        }
+      `,
+        ];
+    }
+    constructor() {
+        super();
+        /** @protected */
+        this._routes = [];
+        this.sticky = false;
+        this.breakpoints = {
+            // ceiled width with 275px tiles and 1rem (16px) gap
+            width: [380, 580, 768, 1024],
+        };
+    }
+    set routes(candidate) {
+        if (candidate) {
+            Promise.resolve(candidate).then((candidates) => {
+                if (candidates) {
+                    Promise.all(candidates).then((futureRoutes) => {
+                        if (!isSameRoutes(this._routes, futureRoutes)) {
+                            this._routes = futureRoutes;
+                        }
+                    });
+                }
+                else {
+                    this._routes = [];
+                }
+            });
+        }
+        else {
+            this._routes = [];
+        }
+    }
+    onResize({ width }) {
+        if (width <= 1024) {
+            this._small = true;
+        }
+        else {
+            this._small = false;
+        }
+    }
+    render() {
+        return html `
+      <div class="${classMap({ 'has-header': this._hasHeader })}">
+        <slot name="top"></slot>
+        <div class="nav-container">
+          <gv-nav .routes="${this._routes}" ?small="${this._small}"></gv-nav>
+          <div class="right"><slot name="right-transition"></slot><slot name="right"></slot></div>
+        </div>
+      </div>
+    `;
+    }
+    updated(changedProperties) {
+        super.updated(changedProperties);
+        let _header = false;
+        for (const node of this.childNodes) {
+            if (node.nodeType === 1) {
+                const child = node.nodeName.toLowerCase() === 'gv-header' ? node : node.querySelector('gv-header');
+                if (child) {
+                    child.sticky = this.sticky;
+                    _header = true;
+                    break;
+                }
+            }
+        }
+        this._hasHeader = _header;
+    }
+}
+window.customElements.define('gv-menu', GvMenu);

package/dist/src/organisms/gv-newsletter-subscription.d.ts

@@ -0,0 +1,82 @@
+/**
+ * The newsletter subscription page
+ *
+ * @fires gv-newsletter-subscription:subscribe - Custom event when link click
+ * @fires gv-newsletter-subscription:skip - Custom event when link click
+ *
+ * @attr {String} title - The title of newsletter subscription container
+ * @attr {String} header - The header of newsletter subscription container
+ * @attr {String} placeholder - The placeholder used for the email input
+ * @attr {String} subscribeLabel - The text of the subscribe button
+ * @attr {String} skipLabel - The text of the skip button
+ * @attr {Array} taglines - The taglines to promote the newsletter subscription
+ * @attr {String} email - The email value
+ * @attr {Boolean} disabled - The disabled state of email input
+ * @attr {String} githubUrl - The url to github page
+ * @attr {String} twitterUrl - The url to twitter page
+ * @attr {String} linkedinUrl - The url to linkedin page
+ *
+ */
+export class GvNewsletterSubscription extends LitElement {
+    static get properties(): {
+        title: {
+            type: StringConstructor;
+        };
+        header: {
+            type: StringConstructor;
+        };
+        placeholder: {
+            type: StringConstructor;
+        };
+        subscribeLabel: {
+            type: StringConstructor;
+            attribute: string;
+        };
+        skipLabel: {
+            type: StringConstructor;
+            attribute: string;
+        };
+        taglines: {
+            type: ArrayConstructor;
+        };
+        email: {
+            type: StringConstructor;
+        };
+        disabled: {
+            type: BooleanConstructor;
+        };
+        githubUrl: {
+            type: StringConstructor;
+            attribute: string;
+        };
+        twitterUrl: {
+            type: StringConstructor;
+            attribute: string;
+        };
+        linkedinUrl: {
+            type: StringConstructor;
+            attribute: string;
+        };
+        _invalid: {
+            type: BooleanConstructor;
+            attribute: boolean;
+        };
+    };
+    static get styles(): import("lit").CSSResult[];
+    header: string;
+    placeholder: string;
+    subscribeLabel: string;
+    taglines: string[];
+    skipLabel: string;
+    email: string;
+    disabled: boolean;
+    _invalid: boolean;
+    githubUrl: string;
+    twitterUrl: string;
+    linkedinUrl: string;
+    _onSubscribe(): void;
+    _onSkip(): void;
+    _navigateSocial(url: any): void;
+    _onInputChange(e: any): void;
+}
+import { LitElement } from "lit-element/lit-element";

package/dist/src/organisms/gv-newsletter-subscription.js

@@ -0,0 +1,258 @@
+/*
+ * 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 { dispatchCustomEvent } from '../lib/events';
+/**
+ * The newsletter subscription page
+ *
+ * @fires gv-newsletter-subscription:subscribe - Custom event when link click
+ * @fires gv-newsletter-subscription:skip - Custom event when link click
+ *
+ * @attr {String} title - The title of newsletter subscription container
+ * @attr {String} header - The header of newsletter subscription container
+ * @attr {String} placeholder - The placeholder used for the email input
+ * @attr {String} subscribeLabel - The text of the subscribe button
+ * @attr {String} skipLabel - The text of the skip button
+ * @attr {Array} taglines - The taglines to promote the newsletter subscription
+ * @attr {String} email - The email value
+ * @attr {Boolean} disabled - The disabled state of email input
+ * @attr {String} githubUrl - The url to github page
+ * @attr {String} twitterUrl - The url to twitter page
+ * @attr {String} linkedinUrl - The url to linkedin page
+ *
+ */
+export class GvNewsletterSubscription extends LitElement {
+    static get properties() {
+        return {
+            title: { type: String },
+            header: { type: String },
+            placeholder: { type: String },
+            subscribeLabel: { type: String, attribute: 'subscribe-label' },
+            skipLabel: { type: String, attribute: 'skip-label' },
+            taglines: { type: Array },
+            email: { type: String },
+            disabled: { type: Boolean },
+            githubUrl: { type: String, attribute: 'github-url' },
+            twitterUrl: { type: String, attribute: 'twitter-url' },
+            linkedinUrl: { type: String, attribute: 'linkedin-url' },
+            _invalid: { type: Boolean, attribute: false },
+        };
+    }
+    static get styles() {
+        return [
+            // language=css
+            css `
+        :host {
+          box-sizing: border-box;
+          margin: 0.2rem;
+        }
+
+        .newsletter-container {
+          display: flex;
+          flex-direction: column;
+          align-items: center;
+          justify-content: space-between;
+          max-width: 680px;
+          box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.2), 0 5px 5px 0 rgba(0, 0, 0, 0.24);
+          padding: 25px 20px 5px 20px;
+        }
+
+        .newsletter__header {
+          text-transform: uppercase;
+          font-style: oblique;
+          text-align: center;
+          font-size: 16px;
+          font-weight: bold;
+          padding: 5px 35px;
+          color: var(--gv-theme-neutral-color-lightest, #ffffff);
+          background-color: var(--gv-theme-color-light, #86c3d0);
+        }
+
+        .newsletter__title {
+          display: flex;
+          flex-direction: column;
+          align-items: center;
+          font-size: 20px;
+          text-transform: uppercase;
+          padding: 20px;
+          color: var(--gv-theme-color-light, #86c3d0);
+        }
+
+        .newsletter__title-highlight {
+          font-size: 30px;
+        }
+
+        .newsletter__email {
+          display: flex;
+          flex-direction: column;
+          width: 50%;
+        }
+
+        .newsletter__taglines {
+          display: flex;
+          flex-direction: row;
+          justify-content: space-between;
+          align-items: center;
+          text-align: center;
+          text-transform: uppercase;
+          font-size: 14px;
+          height: 20%;
+          margin-top: 20px;
+          padding: 10px 0;
+          color: var(--gv-theme-color-darker, #383e3f);
+          border-bottom: solid 1px var(--gv-theme-color-darker, #383e3f);
+        }
+
+        .newsletter__tagline {
+          display: flex;
+          flex-basis: 100%;
+          flex-direction: column;
+          justify-content: center;
+          align-items: center;
+          height: 100%;
+          font-weight: bold;
+          padding: 0 15px;
+          border-right: solid 1px var(--gv-theme-color-darker, #383e3f);
+        }
+
+        .newsletter__tagline.last {
+          border-right: none;
+        }
+
+        .newsletter__tagline-text {
+          width: 100%;
+        }
+
+        .newsletter__skip {
+          margin-top: 20px;
+        }
+
+        .social {
+          width: 100%;
+          display: flex;
+          flex-direction: row;
+          justify-content: flex-end;
+        }
+
+        .social-link {
+          --gv-icon--c: var(--gv-theme-color-light, #86c3d0);
+          --gv-icon--s: 32px;
+        }
+      `,
+        ];
+    }
+    constructor() {
+        super();
+        this.header = 'Customers process over 1 billion requests through the gravitee.io gateway in just one week';
+        this.title = 'Community of api masters';
+        this.placeholder = 'Enter your email';
+        this.subscribeLabel = 'Become an API master now';
+        this.taglines = ['New release monthly updates', 'Free trial of Gravitee.IO enterprise', 'Share your experiences with other members'];
+        this.skipLabel = 'Skip';
+        this.email = '';
+        this.disabled = false;
+        this._invalid = true;
+        this.githubUrl = 'https://github.com/gravitee-io';
+        this.twitterUrl = 'https://twitter.com/GraviteeIO';
+        this.linkedinUrl = 'https://www.linkedin.com/company/gravitee-io/';
+    }
+    render() {
+        return html `
+        <div class="newsletter-container">
+          <div class="newsletter__header">
+            ${this.header}
+          </div>
+          <div class="newsletter__title">
+            <span>Join the</span>
+            <span class="newsletter__title-highlight">${this.title}</span>
+            <span>Today</span>
+          </div>
+          <div class="newsletter__email">
+            <gv-input
+              id="email"
+              name="email"
+              @gv-input:submit="${this._onSubscribe}"
+              @gv-input:input="${this._onInputChange}"
+              type="email"
+              required
+              .value="${this.email}"
+              .disabled=${this.disabled}
+              placeholder="${this.placeholder}"
+            ></gv-input>
+            <gv-button @click="${this._onSubscribe}"
+                       id="email-submit"
+                       provider="graviteeio_am"
+                       icon-right="navigation:angle-right"
+                       .disabled=${!this.disabled && this._invalid}>
+              ${this.subscribeLabel}
+            </gv-button>
+          </div>
+          ${this.taglines.length > 0
+            ? html ` <div class="newsletter__taglines">
+                  ${this.taglines.map((item, i, arr) => html `
+                      <div class="newsletter__tagline ${i === arr.length - 1 ? 'last' : ''}">
+                        <div class="newsletter__tagline-text">${item}</div>
+                      </div>
+                    `)}
+                </div>`
+            : ''}
+          <div class="newsletter__skip">
+            <gv-button @click="${this._onSkip}"
+                       provider="graviteeio_am"
+                       icon-right="navigation:angle-right"
+                       small
+                       outlined>
+              ${this.skipLabel}
+            </gv-button>
+          </div>
+          <div class="social">
+            <gv-button class="social-link"
+                       link
+                       icon="thirdparty:github"
+                       .href="${this.githubUrl}"
+                       @gv-button:click="${this._navigateSocial.bind(this, this.githubUrl)}">
+            </gv-button>
+            <gv-button class="social-link"
+                       link icon="thirdparty:twitter"
+                       .href="${this.twitterUrl}"
+                       @gv-button:click="${this._navigateSocial.bind(this, this.twitterUrl)}">
+            </gv-button>
+            <gv-button class="social-link"
+                       link
+                       icon="thirdparty:linkedin"
+                       .href="${this.linkedinUrl}"
+                       @gv-button:click="${this._navigateSocial.bind(this, this.linkedinUrl)}">
+            </gv-button>
+            </gv-link>
+          </div>
+        </div>
+    `;
+    }
+    _onSubscribe() {
+        dispatchCustomEvent(this, 'subscribe', this.email);
+    }
+    _onSkip() {
+        dispatchCustomEvent(this, 'skip');
+    }
+    _navigateSocial(url) {
+        window.open(url, '_blank');
+    }
+    _onInputChange(e) {
+        this._invalid = e.target.invalid;
+        this.email = e.detail;
+    }
+}
+window.customElements.define('gv-newsletter-subscription', GvNewsletterSubscription);

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

@@ -0,0 +1,63 @@
+/**
+ * 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(): {
+        data: {
+            type: ObjectConstructor;
+        };
+        hideEmpty: {
+            type: BooleanConstructor;
+            attribute: string;
+        };
+        widget: {
+            type: BooleanConstructor;
+        };
+        disabled: {
+            type: BooleanConstructor;
+        };
+        _first: {
+            type: NumberConstructor;
+        };
+        _last: {
+            type: NumberConstructor;
+        };
+        _current: {
+            type: NumberConstructor;
+        };
+        _total: {
+            type: NumberConstructor;
+        };
+    };
+    static get styles(): import("lit").CSSResult[];
+    hideEmpty: boolean;
+    hasInput: boolean;
+    max: number;
+    center: number;
+    sizes: any[];
+    links: {};
+    set data(arg: any);
+    _last: any;
+    _current: number | undefined;
+    _pages: any;
+    _goToPage(page: any): void;
+    _onSubmit(e: any): void;
+    _onClickToSearch(): void;
+    _renderPagination(): import("lit-html").TemplateResult<1>;
+    _hasData(): any;
+    _hideEmpty(): any;
+}
+import { LitElement } from "lit-element/lit-element";