@gravitee/ui-components 3.25.3-typescript-e7256ca → 3.25.3-typescript-9cbc31e

package/src/molecules/gv-nav.js

@@ -1 +1,180 @@
-Object.defineProperty(exports,"__esModule",{value:!0}),exports.GvNav=void 0;const t=require("lit"),e=require("lit/directives/repeat");require("../atoms/gv-link");const i=require("lit/directives/until"),s=require("../lib/utils"),o=require("../lib/events"),l=require("lit/directives/class-map");class r extends t.LitElement{static get properties(){return{routes:{type:Array},_routes:{type:Array},small:{type:Boolean},_compact:{type:Boolean,attribute:!1},vertical:{type:Boolean,reflect:!0}}}static get styles(){return[t.css`nav{position:relative;transition:all 150ms ease-in-out}gv-link{--gv-link--ta:end}.vertical{display:flex;flex-direction:column}.vertical gv-link{width:100%}.compact{--gv-link-a--ph:10px}#shadowLink{position:absolute;display:inline-flex;opacity:.5;top:0;left:0;transition:transform 250ms ease-in-out,width 250ms}`]}_onClick(t){t.stopPropagation();const{detail:e}=t,{title:i,target:s}=e;if("_blank"===s)(0,o.dispatchCustomEvent)(this,"click",e);else if(!this._isLocked){this._isLocked=!0;let t=0;this._routes.forEach(((e,s)=>(e.title===i?(e.active=!0,t=s):delete e.active,e)));const s=this.shadowRoot.querySelector("gv-link[active]"),l=this.shadowRoot.querySelectorAll("gv-link")[t];if(s){const t=s.cloneNode(!0),{height:i,width:r}=s.getBoundingClientRect();t.id="shadowLink",t.style.top=`${s.offsetTop}px`,t.style.left=`${s.offsetLeft}px`,t.style.width=`${r}px`,t.style.height=`${i}px`,s.removeAttribute("active"),s.style.height=`${i}px`,this.shadowRoot.querySelector("nav").prepend(t);const a=l.offsetLeft-s.offsetLeft,n=l.offsetTop-s.offsetTop;t.style.transform=`translate(${a}px,${n}px)`,setTimeout((()=>{l.setAttribute("active",!0),this.shadowRoot.querySelector("nav").removeChild(t),this._isLocked=!1,(0,o.dispatchCustomEvent)(this,"click",e)}),250)}else l.setAttribute("active",!0),this._isLocked=!1,(0,o.dispatchCustomEvent)(this,"click",e)}}constructor(){super(),this._routes=[],this.vertical=!1}set routes(t){t&&Promise.resolve(t).then((t=>{(0,s.isSameRoutes)(this._routes,t)||(this._routes=t)}))}_getLink(e,s){return Promise.resolve(e).then((e=>t.html`<gv-link @gv-link:click="${this._onClick}" .active="${e.active}" .icon="${e.icon}" .path="${e.path}" .target="${e.target}" ?small="${this.small}" .title="${e.title}" .help="${(0,i.until)(e.help,null)}" ?vertical="${this.vertical}"></gv-link>`)).catch((()=>{delete this._routes[s]}))}updated(t){t.has("_routes")&&(this._compact=this._routes&&this._routes.length>5)}render(){return this._routes?t.html`<nav class="${(0,l.classMap)({compact:this._compact,vertical:this.vertical})}">${(0,e.repeat)(this._routes,(t=>t),((e,s)=>(0,i.until)(this._getLink(e,s),t.html`<gv-link skeleton .vertical="${this.vertical}"></gv-link>`)))}</nav>`:t.html``}}exports.GvNav=r,window.customElements.define("gv-nav",r);
+/*
+ * 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 { repeat } from 'lit/directives/repeat';
+import '../atoms/gv-link';
+import { until } from 'lit/directives/until';
+import { isSameRoutes } from '../lib/utils';
+import { dispatchCustomEvent } from '../lib/events';
+import { classMap } from 'lit/directives/class-map';
+/**
+ * A main nav
+ *
+ * ## Details
+ * * has @theme facet
+ *
+ * @fires gv-nav:click - Custom event when nav item is clicked
+ *
+ * @attr {Array<{active: Boolean, icon: String, path: String, title: Promise<String>, target: String}>} routes - definition of routes
+ */
+export class GvNav extends LitElement {
+    static get properties() {
+        return {
+            routes: { type: Array },
+            _routes: { type: Array },
+            small: { type: Boolean },
+            _compact: { type: Boolean, attribute: false },
+            vertical: { type: Boolean, reflect: true },
+        };
+    }
+    static get styles() {
+        return [
+            // language=CSS
+            css `
+        nav {
+          position: relative;
+          transition: all 150ms ease-in-out;
+        }
+
+        gv-link {
+          --gv-link--ta: end;
+        }
+
+        .vertical {
+          display: flex;
+          flex-direction: column;
+        }
+
+        .vertical gv-link {
+          width: 100%;
+        }
+
+        .compact {
+          --gv-link-a--ph: 10px;
+        }
+
+        #shadowLink {
+          position: absolute;
+          display: inline-flex;
+          opacity: 0.5;
+          top: 0;
+          left: 0;
+          transition: transform 250ms ease-in-out, width 250ms;
+        }
+      `,
+        ];
+    }
+    _onClick(event) {
+        event.stopPropagation();
+        const { detail } = event;
+        const { title, target } = detail;
+        if (target === '_blank') {
+            dispatchCustomEvent(this, 'click', detail);
+        }
+        else {
+            if (!this._isLocked) {
+                this._isLocked = true;
+                let nextIndex = 0;
+                this._routes.forEach((route, index) => {
+                    if (route.title === title) {
+                        route.active = true;
+                        nextIndex = index;
+                    }
+                    else {
+                        delete route.active;
+                    }
+                    return route;
+                });
+                const activeLink = this.shadowRoot.querySelector('gv-link[active]');
+                const nextLink = this.shadowRoot.querySelectorAll('gv-link')[nextIndex];
+                if (activeLink) {
+                    const shadowLink = activeLink.cloneNode(true);
+                    const { height, width } = activeLink.getBoundingClientRect();
+                    shadowLink.id = 'shadowLink';
+                    shadowLink.style.top = `${activeLink.offsetTop}px`;
+                    shadowLink.style.left = `${activeLink.offsetLeft}px`;
+                    shadowLink.style.width = `${width}px`;
+                    shadowLink.style.height = `${height}px`;
+                    activeLink.removeAttribute('active');
+                    activeLink.style.height = `${height}px`;
+                    this.shadowRoot.querySelector('nav').prepend(shadowLink);
+                    const left = nextLink.offsetLeft - activeLink.offsetLeft;
+                    const top = nextLink.offsetTop - activeLink.offsetTop;
+                    shadowLink.style.transform = `translate(${left}px,${top}px)`;
+                    setTimeout(() => {
+                        nextLink.setAttribute('active', true);
+                        this.shadowRoot.querySelector('nav').removeChild(shadowLink);
+                        this._isLocked = false;
+                        dispatchCustomEvent(this, 'click', detail);
+                    }, 250);
+                }
+                else {
+                    nextLink.setAttribute('active', true);
+                    this._isLocked = false;
+                    dispatchCustomEvent(this, 'click', detail);
+                }
+            }
+        }
+    }
+    constructor() {
+        super();
+        /** @protected */
+        this._routes = [];
+        this.vertical = false;
+    }
+    set routes(routes) {
+        if (routes) {
+            Promise.resolve(routes).then((_routes) => {
+                if (!isSameRoutes(this._routes, _routes)) {
+                    this._routes = _routes;
+                }
+            });
+        }
+    }
+    _getLink(route, index) {
+        return Promise.resolve(route)
+            .then((_route) => {
+            return html ` <gv-link
+          @gv-link:click=${this._onClick}
+          .active="${_route.active}"
+          .icon="${_route.icon}"
+          .path="${_route.path}"
+          .target="${_route.target}"
+          ?small="${this.small}"
+          .title="${_route.title}"
+          .help="${until(_route.help, null)}"
+          ?vertical="${this.vertical}"
+        ></gv-link>`;
+        })
+            .catch(() => {
+            delete this._routes[index];
+        });
+    }
+    updated(_changedProperties) {
+        if (_changedProperties.has('_routes')) {
+            this._compact = this._routes && this._routes.length > 5;
+        }
+    }
+    render() {
+        if (this._routes) {
+            return html `<nav class="${classMap({ compact: this._compact, vertical: this.vertical })}">
+        ${repeat(this._routes, (route) => route, (route, index) => until(this._getLink(route, index), html `<gv-link skeleton .vertical="${this.vertical}"></gv-link>`))}
+      </nav>`;
+        }
+        return html ``;
+    }
+}
+window.customElements.define('gv-nav', GvNav);

package/src/molecules/gv-option.js

@@ -1 +1,230 @@
-Object.defineProperty(exports,"__esModule",{value:!0}),exports.GvOption=void 0;const t=require("lit");require("../atoms/gv-button");const e=require("lit/directives/repeat"),i=require("lit/directives/class-map"),s=require("../lib/events"),n=require("lit/directives/if-defined"),r=require("lit/directives/style-map");class o extends t.LitElement{static get properties(){return{options:{type:Array},_options:{type:Array,attribute:!1},_hasDescription:{type:Array,attribute:!1},value:{type:String,reflect:!0},multiple:{type:Boolean},reverse:{type:Boolean},small:{type:Boolean},outlined:{type:Boolean},disabled:{type:Boolean,reflect:!0}}}static get styles(){return[t.css`:host{box-sizing:border-box;display:inline-block;--gv-button--p:5px;margin:.2rem;--bdrs:var(--gv-option--bdrs, 0.15rem);--maw:var(--gv-option-button--maw, 200px)}.box.description{display:grid;grid-gap:.5rem}gv-button{margin:0}gv-button.description{flex:1 1 var(--maw);max-width:var(--maw)}gv-button:not(.description){margin:0;--gv-button--bdrs:0;--gv-button--bgc:var(--gv-option--bgc, var(--gv-theme-neutral-color-dark, #bfbfbf))}gv-button:not(.description).entry{--gv-button--bdrs:var(--bdrs) 0 0 var(--bdrs)}gv-button:not(.description).exit{--gv-button--bdrs:0 var(--bdrs) var(--bdrs) 0}.content{white-space:pre-line;--gv-icon--s:var(--gv-option-icon--s, 64px);display:flex;flex-direction:column;align-items:center;height:100%;text-transform:none}gv-image{height:64px;width:64px;--gv-image--of:fill;display:inline-flex}.reverse .content{flex-direction:column-reverse}.title{font-size:var(--gv-theme-font-size-l,18px);font-weight:700;margin:.5rem 0}gv-button.description{margin:.5rem}`]}constructor(){super(),this.multiple=!1,this.reverse=!1}_onClick(t){this.setValue(t),(0,s.dispatchCustomEvent)(this,"select",t),this.dispatchEvent(new Event("input"),{bubbles:!0,cancelable:!0})}async performUpdate(){return this.shadowRoot.querySelectorAll("gv-button").forEach((t=>t.performUpdate())),super.performUpdate()}setValue(t){t&&(this.multiple?this.value.includes(t.id)?this.value=this.value.filter((e=>e!==t.id)):this.value=[...this.value,t.id]:this.value=t.id)}set options(t){t&&Promise.all(t).then((t=>{this._options=t,this._hasDescription=null!=this._options.find((t=>null!=t.description))}))}isActive(t){return!!this.value&&(this.multiple?this.value.includes(t.id):this.value===t.id)}_renderOption(e,s){const r=this.isActive(e),o=this.outlined||!r&&this._hasDescription;return t.html`<gv-button .icon="${(0,n.ifDefined)(this._hasDescription?null:e.icon)}" .iconRight="${(0,n.ifDefined)(!e.icon&&e.iconRight?e.iconRight:null)}" .title="${(0,n.ifDefined)(e.title)}" .primary="${r}" .small="${this.small}" .disabled="${e.disabled||this.disabled}" @click="${this._onClick.bind(this,e)}" .outlined="${o}" class="${(0,i.classMap)({active:r,entry:0===s,exit:s===this._options.length-1,description:null!=e.description})}">${this._hasDescription?t.html`<div class="content">${e.icon?t.html`<gv-icon shape="${e.icon}"></gv-icon>`:e.image?t.html`<gv-image src="${e.image}"></gv-image>`:""}<div class="title">${e.title}</div><div class="description-content" .innerHTML="${e.description}"></div></div>`:null!=e.title?e.label||e.title:""}</gv-button>`}render(){if(this._options){const s={box:!0,description:this._hasDescription,reverse:this.reverse};return t.html`<div class="${(0,i.classMap)(s)}" style="${(0,r.styleMap)({"grid-template-columns":`repeat(${this._options.length}, auto)`})}">${(0,e.repeat)(this._options,(t=>t),((e,i)=>t.html`${this._renderOption(e,i)}`))}</div>`}return t.html``}}exports.GvOption=o,window.customElements.define("gv-option",o);
+/*
+ * 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, LitElement, html } from 'lit';
+import '../atoms/gv-button';
+import { repeat } from 'lit/directives/repeat';
+import { classMap } from 'lit/directives/class-map';
+import { dispatchCustomEvent } from '../lib/events';
+import { ifDefined } from 'lit/directives/if-defined';
+import { styleMap } from 'lit/directives/style-map';
+/**
+ * Option component
+ *
+ * ## Details
+ * * has @theme facet
+ *
+ * @attr {Array<{id, title, icon?, active?, description?, label?}>} options - An array of options.
+ * @attr {String|Array} value - Selected value id, array with multiple option ids.
+ * @attr {Boolean} multiple - If true, can choose several option
+ * @attr {Boolean} reverse - If true, title and description are reversed.
+ * @attr {Boolean} small - If true, use small button for options
+ * @attr {Boolean} outlined - If true, use outlined button for options
+ *
+ * @cssprop {Color} [--gv-option--bgc=var(--gv-theme-neutral-color-dark, #bfbfbf)] - Background color
+ * @cssprop {Length} [--gv-option--bdrs=0.15rem] - Border radius
+ * @cssprop {Length} [--gv-option-button--maw=200px] - Button max width
+ * @cssprop {Length} [--gv-option-icon--s=64px] - Icon size
+ */
+export class GvOption extends LitElement {
+    static get properties() {
+        return {
+            options: { type: Array },
+            _options: { type: Array, attribute: false },
+            _hasDescription: { type: Array, attribute: false },
+            value: { type: String, reflect: true },
+            multiple: { type: Boolean },
+            reverse: { type: Boolean },
+            small: { type: Boolean },
+            outlined: { type: Boolean },
+            disabled: { type: Boolean, reflect: true },
+        };
+    }
+    static get styles() {
+        return [
+            // language=CSS
+            css `
+        :host {
+          box-sizing: border-box;
+          display: inline-block;
+          --gv-button--p: 5px;
+          margin: 0.2rem;
+          --bdrs: var(--gv-option--bdrs, 0.15rem);
+          --maw: var(--gv-option-button--maw, 200px);
+        }
+
+        .box.description {
+          display: grid;
+          grid-gap: 0.5rem;
+        }
+
+        gv-button {
+          margin: 0;
+        }
+
+        gv-button.description {
+          flex: 1 1 var(--maw);
+          max-width: var(--maw);
+        }
+
+        gv-button:not(.description) {
+          margin: 0;
+          --gv-button--bdrs: 0;
+          --gv-button--bgc: var(--gv-option--bgc, var(--gv-theme-neutral-color-dark, #bfbfbf));
+        }
+
+        gv-button:not(.description).entry {
+          --gv-button--bdrs: var(--bdrs) 0 0 var(--bdrs);
+        }
+
+        gv-button:not(.description).exit {
+          --gv-button--bdrs: 0 var(--bdrs) var(--bdrs) 0;
+        }
+
+        .content {
+          white-space: pre-line;
+          --gv-icon--s: var(--gv-option-icon--s, 64px);
+          display: flex;
+          flex-direction: column;
+          align-items: center;
+          height: 100%;
+          text-transform: none;
+        }
+
+        gv-image {
+          height: 64px;
+          width: 64px;
+          --gv-image--of: fill;
+          display: inline-flex;
+        }
+
+        .reverse .content {
+          flex-direction: column-reverse;
+        }
+
+        .title {
+          font-size: var(--gv-theme-font-size-l, 18px);
+          font-weight: bold;
+          margin: 0.5rem 0;
+        }
+
+        gv-button.description {
+          margin: 0.5rem;
+        }
+      `,
+        ];
+    }
+    constructor() {
+        super();
+        this.multiple = false;
+        this.reverse = false;
+    }
+    _onClick(option) {
+        this.setValue(option);
+        dispatchCustomEvent(this, 'select', option);
+        this.dispatchEvent(new Event('input'), { bubbles: true, cancelable: true });
+    }
+    async performUpdate() {
+        this.shadowRoot.querySelectorAll('gv-button').forEach((btn) => btn.performUpdate());
+        return super.performUpdate();
+    }
+    setValue(option) {
+        if (option) {
+            if (this.multiple) {
+                if (this.value.includes(option.id)) {
+                    this.value = this.value.filter((optId) => {
+                        return optId !== option.id;
+                    });
+                }
+                else {
+                    this.value = [...this.value, option.id];
+                }
+            }
+            else {
+                this.value = option.id;
+            }
+        }
+    }
+    set options(options) {
+        if (options) {
+            Promise.all(options).then((_options) => {
+                this._options = _options;
+                this._hasDescription = this._options.find((opt) => opt.description != null) != null;
+            });
+        }
+    }
+    isActive(option) {
+        if (this.value) {
+            if (this.multiple) {
+                return this.value.includes(option.id);
+            }
+            else {
+                return this.value === option.id;
+            }
+        }
+        return false;
+    }
+    _renderOption(option, index) {
+        const isActive = this.isActive(option);
+        const outlined = this.outlined || (!isActive && this._hasDescription);
+        return html `<gv-button
+      .icon=${ifDefined(!this._hasDescription ? option.icon : null)}
+      .iconRight=${ifDefined(!option.icon && option.iconRight ? option.iconRight : null)}
+      .title="${ifDefined(option.title)}"
+      .primary="${isActive}"
+      .small="${this.small}"
+      .disabled="${option.disabled || this.disabled}"
+      @click="${this._onClick.bind(this, option)}"
+      .outlined="${outlined}"
+      class="${classMap({
+            active: isActive,
+            entry: index === 0,
+            exit: index === this._options.length - 1,
+            description: option.description != null,
+        })}"
+    >
+      ${!this._hasDescription
+            ? option.title != null
+                ? option.label || option.title
+                : ''
+            : html `<div class="content">
+            ${option.icon
+                ? html `<gv-icon shape="${option.icon}"></gv-icon>`
+                : option.image
+                    ? html `<gv-image src="${option.image}"></gv-image>`
+                    : ''}
+            <div class="title">${option.title}</div>
+            <div class="description-content" .innerHTML="${option.description}"></div>
+          </div>`}
+    </gv-button>`;
+    }
+    render() {
+        if (this._options) {
+            const classes = {
+                box: true,
+                description: this._hasDescription,
+                reverse: this.reverse,
+            };
+            return html `<div
+        class="${classMap(classes)}"
+        style="${styleMap({ 'grid-template-columns': `repeat(${this._options.length}, auto)` })}"
+      >
+        ${repeat(this._options, (option) => option, (option, index) => html `${this._renderOption(option, index)}`)}
+      </div>`;
+        }
+        return html ``;
+    }
+}
+window.customElements.define('gv-option', GvOption);