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

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

@@ -0,0 +1,205 @@
+/*
+ * 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 { skeleton } from '../styles/skeleton';
+import { link } from '../styles/link';
+import { classMap } from 'lit/directives/class-map';
+import { i18n } from '../lib/i18n';
+import { ItemResource } from '../mixins/item-resource';
+import { withResizeObserver } from '../mixins/with-resize-observer';
+import { getOwner, getTitle, getDescription, getVersion } from '../lib/item';
+/**
+ * Row component
+ *
+ * ## Details
+ * * has @theme facet
+ *
+ * @attr {Promise<any>} item - An item.
+ * @attr {Boolean} small - When true, not display labels
+ *
+ * @cssprop {Color} [--gv-row-hover--bgc=var(--gv-theme-neutral-color-lighter, #fafafa)] - Hoover background color
+ * @cssprop {Length} [--gv-row-hover--trf-ty=0px] - Hoover transform translateY
+ * @cssprop {Length} [--gv-row-image--h=35px] - Image height
+ * @cssprop {Length} [--gv-row-image--w=35px] - Image width
+ *
+ */
+export class GvRow extends withResizeObserver(ItemResource(LitElement)) {
+    static get styles() {
+        return [
+            ...super.styles,
+            // language=CSS
+            css `
+        :host {
+          box-sizing: border-box;
+          cursor: pointer;
+          --hover-bgc: var(--gv-row-hover--bgc, var(--gv-theme-neutral-color-lighter, #fafafa));
+          --trf-ty: var(--gv-row-hover--trf-ty, 0px);
+          display: block;
+        }
+
+        :host([_invisible]) {
+          display: none;
+        }
+
+        .row {
+          padding: 12px;
+        }
+
+        .row:hover {
+          -webkit-transform: -webkit-translateY(var(--trf-ty));
+          transform: translateY(var(--trf-ty));
+          background-color: var(--hover-bgc);
+        }
+
+        .row:not(.error) {
+          display: grid;
+          grid-template-columns: calc(var(--gv-row-image--w, 35px) + 5px) auto fit-content(20%);
+          grid-gap: 10px;
+          align-items: center;
+        }
+
+        :host([w-lt-450]) .meta {
+          display: none;
+        }
+
+        .row .name {
+          margin-right: 15px;
+        }
+
+        .row .name,
+        .row .meta__owner {
+          margin-bottom: 5px;
+        }
+
+        .row .version {
+          color: var(--gv-theme-neutral-color-dark, #d9d9d9);
+        }
+
+        .row .description {
+          --lh: 1.4rem;
+          --max-lines: 2;
+          max-height: calc(var(--lh) * var(--max-lines));
+          line-height: var(--lh);
+          overflow: hidden;
+          text-overflow: ellipsis;
+          text-after-overflow: '...';
+        }
+
+        .row .meta {
+          display: flex;
+          flex-direction: column;
+          align-items: flex-end;
+        }
+
+        .row .meta__owner {
+          --gv-icon--c: var(--gv-theme-neutral-color-dark, #d9d9d9);
+          --gv-icon--s: 16px;
+          color: var(--gv-theme-neutral-color-dark, #d9d9d9);
+          display: flex;
+        }
+
+        .row .meta__tags {
+          display: flex;
+          flex-direction: row;
+          flex-wrap: wrap;
+        }
+
+        .skeleton {
+          transition: 0.5s;
+          min-height: 30px;
+          align-self: start;
+        }
+
+        .error {
+          cursor: default;
+          text-align: center;
+        }
+
+        gv-identity-picture {
+          height: var(--gv-row-image--h, 35px);
+          width: var(--gv-row-image--w, 35px);
+          border-radius: 20px;
+          --gv-image--of: contain;
+          align-self: baseline;
+        }
+
+        h3 {
+          margin: 0;
+        }
+
+        .row > .group {
+          display: flex;
+          flex-direction: column;
+          margin: 0 5px;
+          width: 100%;
+          flex: 1;
+        }
+
+        .title {
+          display: flex;
+          flex-direction: row;
+        }
+      `,
+            link,
+            skeleton,
+        ];
+    }
+    static get properties() {
+        return {
+            ...super.properties,
+            /** @required */
+            small: { type: Boolean },
+        };
+    }
+    constructor() {
+        super();
+        this.breakpoints = {
+            width: [450],
+        };
+        this.small = false;
+    }
+    render() {
+        const classes = {
+            row: true,
+            link: true,
+            error: !this._skeleton && (this._error || this._empty),
+        };
+        const owner = getOwner(this._item);
+        return html `
+      <div class=${classMap(classes)}>
+        ${!this._skeleton && (this._error || this._empty)
+            ? html `<div class="message">${this._error ? i18n('gv-row.error') : i18n('gv-row.empty')}</div>`
+            : html `
+              <div class="${classMap({ skeleton: this._skeleton })}">${this._renderImage()}</div>
+              <div class="${classMap({ group: true, skeleton: this._skeleton })}">
+                <div class="title">
+                  <h3 class="name">${getTitle(this._item)}</h3>
+                  <div class="version">${getVersion(this._item)}</div>
+                </div>
+                <div class="description">${getDescription(this._item)}</div>
+              </div>
+              <div class="${classMap({ meta: true, skeleton: this._skeleton })}">
+                <div class="meta__owner">
+                  ${owner != null && owner.trim().length > 0 ? html `<gv-icon shape="general:user" size="8px"></gv-icon>${owner}` : ''}
+                </div>
+                ${this.small !== true ? html `<div class="meta__tags">${this._renderLabels()}</div>` : ''}
+              </div>
+            `}
+      </div>
+    `;
+    }
+}
+window.customElements.define('gv-row', GvRow);

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

@@ -0,0 +1,110 @@
+/*
+ * 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 '../atoms/gv-button';
+import '../atoms/gv-tag';
+import { repeat } from 'lit/directives/repeat';
+import { classMap } from 'lit/directives/class-map';
+import { i18n } from '../lib/i18n';
+import { withSkeletonAttribute } from '../mixins/with-skeleton-attribute';
+/**
+ * Stats component
+ *
+ * ## Details
+ * * has @theme facet
+ *
+ * @attr {Object} stats - The stats (count by key). Key can be: count, min, max, avg, sum, rps, rpm or rph.
+ * @attr {Array<any>} options - The list of options to display.
+ */
+export class GvStats extends withSkeletonAttribute(LitElement) {
+    static get properties() {
+        return {
+            stats: { type: Object },
+            options: { type: Array },
+        };
+    }
+    static get styles() {
+        return [
+            ...super.styles,
+            // language=CSS
+            css `
+        .stats {
+          align-content: center;
+          justify-content: center;
+          display: flex;
+          flex-wrap: wrap;
+          height: 100%;
+        }
+
+        .stats-container {
+          border: 1px solid;
+          border-radius: 8px;
+          margin: 15px;
+          padding: 15px;
+        }
+
+        .stats-value {
+          font-size: 30px;
+          text-align: center;
+        }
+
+        .stats-label {
+          font-size: 15px;
+          text-align: center;
+        }
+      `,
+        ];
+    }
+    constructor() {
+        super();
+        this._skeletonAttribute = 'stats';
+    }
+    _getStat(option) {
+        if (!this.stats) {
+            return '<div></div>';
+        }
+        let value = Math.round(this.stats[option.key]);
+        if (isNaN(value)) {
+            value = 0;
+        }
+        if (value === 0 && option.fallback) {
+            const fallback = option.fallback.find((fallback) => Math.round(this.stats[fallback.key]) > 0);
+            if (fallback) {
+                option.key = fallback.key;
+                option.label = fallback.label;
+                value = Math.round(this.stats[option.key]);
+            }
+        }
+        return html `
+      <div class="stats-container" style="color: ${option.color}">
+        <div class="stats-value">${value}${option.unit}</div>
+        <div class="stats-label">${option.label || option.key}</div>
+      </div>
+    `;
+    }
+    render() {
+        if (this._error) {
+            return html `<div class="error">${i18n('gv-stats.error')}</div>`;
+        }
+        if (this._empty) {
+            return html `<div class="empty">${i18n('gv-stats.empty')}</div>`;
+        }
+        return html `<div class="${classMap({ stats: true, skeleton: this._skeleton })}">
+      ${repeat(this.options, (option) => option, (option) => this._getStat(option))}
+    </div> `;
+    }
+}
+window.customElements.define('gv-stats', GvStats);

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);