@gravitee/ui-components 3.25.3-typescript-8a53edf → 3.25.3-typescript-e7256ca

package/src/organisms/gv-menu.d.ts

@@ -0,0 +1,74 @@
+declare const GvMenu_base: {
+    new (): {
+        [x: string]: any;
+        _onResize({ width }: {
+            width: any;
+        }): void;
+        connectedCallback(): Promise<void>;
+        _unobserveResize: (() => any) | undefined;
+        disconnectedCallback(): void;
+    };
+    [x: string]: any;
+};
+/**
+ * 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 GvMenu_base {
+    static get properties(): {
+        /** @required **/
+        routes: {
+            type: ArrayConstructor;
+        };
+        sticky: {
+            type: BooleanConstructor;
+            reflect: boolean;
+        };
+        _small: {
+            type: BooleanConstructor;
+            attribute: boolean;
+        };
+        _routes: {
+            type: ArrayConstructor;
+            attribute: boolean;
+        };
+        _hasHeader: {
+            type: BooleanConstructor;
+            attribute: boolean;
+        };
+    };
+    static get styles(): import("lit").CSSResult[];
+    /** @protected */
+    protected _routes: any[];
+    sticky: boolean;
+    breakpoints: {
+        width: number[];
+    };
+    set routes(arg: any);
+    onResize({ width }: {
+        width: any;
+    }): void;
+    _small: boolean | undefined;
+    render(): import("lit-html").TemplateResult<1>;
+    updated(changedProperties: any): void;
+    _hasHeader: boolean | undefined;
+}
+export {};

package/src/organisms/gv-menu.js

@@ -1,263 +1 @@
-/*
- * 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);
+Object.defineProperty(exports,"__esModule",{value:!0}),exports.GvMenu=void 0;const t=require("lit");require("../molecules/gv-nav");const e=require("../lib/utils"),i=require("lit/directives/class-map"),s=require("../mixins/with-resize-observer");class r extends((0,s.withResizeObserver)(t.LitElement)){static get properties(){return{routes:{type:Array},sticky:{type:Boolean,reflect:!0},_small:{type:Boolean,attribute:!1},_routes:{type:Array,attribute:!1},_hasHeader:{type:Boolean,attribute:!1}}}static get styles(){return[t.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,#fff))}.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-transition]),.right ::slotted([slot=right]){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(),this._routes=[],this.sticky=!1,this.breakpoints={width:[380,580,768,1024]}}set routes(t){t?Promise.resolve(t).then((t=>{t?Promise.all(t).then((t=>{(0,e.isSameRoutes)(this._routes,t)||(this._routes=t)})):this._routes=[]})):this._routes=[]}onResize({width:t}){this._small=t<=1024}render(){return t.html`<div class="${(0,i.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(t){super.updated(t);let e=!1;for(const t of this.childNodes)if(1===t.nodeType){const i="gv-header"===t.nodeName.toLowerCase()?t:t.querySelector("gv-header");if(i){i.sticky=this.sticky,e=!0;break}}this._hasHeader=e}}exports.GvMenu=r,window.customElements.define("gv-menu",r);

package/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";