@gravitee/ui-components 3.25.3-typescript-fdacf14 → 3.25.3-typescript-493e1dd

package/src/molecules/gv-row.js

@@ -1 +1,205 @@
-Object.defineProperty(exports,"__esModule",{value:!0}),exports.GvRow=void 0;const e=require("lit"),r=require("../styles/skeleton"),t=require("../styles/link"),i=require("lit/directives/class-map"),s=require("../lib/i18n"),o=require("../mixins/item-resource"),l=require("../mixins/with-resize-observer"),a=require("../lib/item");class n extends((0,l.withResizeObserver)((0,o.ItemResource)(e.LitElement))){static get styles(){return[...super.styles,e.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 .meta__owner,.row .name{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:.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}`,t.link,r.skeleton]}static get properties(){return{...super.properties,small:{type:Boolean}}}constructor(){super(),this.breakpoints={width:[450]},this.small=!1}render(){const r={row:!0,link:!0,error:!this._skeleton&&(this._error||this._empty)},t=(0,a.getOwner)(this._item);return e.html`<div class="${(0,i.classMap)(r)}">${this._skeleton||!this._error&&!this._empty?e.html`<div class="${(0,i.classMap)({skeleton:this._skeleton})}">${this._renderImage()}</div><div class="${(0,i.classMap)({group:!0,skeleton:this._skeleton})}"><div class="title"><h3 class="name">${(0,a.getTitle)(this._item)}</h3><div class="version">${(0,a.getVersion)(this._item)}</div></div><div class="description">${(0,a.getDescription)(this._item)}</div></div><div class="${(0,i.classMap)({meta:!0,skeleton:this._skeleton})}"><div class="meta__owner">${null!=t&&t.trim().length>0?e.html`<gv-icon shape="general:user" size="8px"></gv-icon>${t}`:""}</div>${!0!==this.small?e.html`<div class="meta__tags">${this._renderLabels()}</div>`:""}</div>`:e.html`<div class="message">${this._error?(0,s.i18n)("gv-row.error"):(0,s.i18n)("gv-row.empty")}</div>`}</div>`}}exports.GvRow=n,window.customElements.define("gv-row",n);
+/*
+ * 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/src/molecules/gv-stats.js

@@ -1 +1,110 @@
-Object.defineProperty(exports,"__esModule",{value:!0}),exports.GvStats=void 0;const t=require("lit");require("../atoms/gv-button"),require("../atoms/gv-tag");const e=require("lit/directives/repeat"),s=require("lit/directives/class-map"),i=require("../lib/i18n"),r=require("../mixins/with-skeleton-attribute");class a extends((0,r.withSkeletonAttribute)(t.LitElement)){static get properties(){return{stats:{type:Object},options:{type:Array}}}static get styles(){return[...super.styles,t.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(e){if(!this.stats)return"<div></div>";let s=Math.round(this.stats[e.key]);if(isNaN(s)&&(s=0),0===s&&e.fallback){const t=e.fallback.find((t=>Math.round(this.stats[t.key])>0));t&&(e.key=t.key,e.label=t.label,s=Math.round(this.stats[e.key]))}return t.html`<div class="stats-container" style="color:${e.color}"><div class="stats-value">${s}${e.unit}</div><div class="stats-label">${e.label||e.key}</div></div>`}render(){return this._error?t.html`<div class="error">${(0,i.i18n)("gv-stats.error")}</div>`:this._empty?t.html`<div class="empty">${(0,i.i18n)("gv-stats.empty")}</div>`:t.html`<div class="${(0,s.classMap)({stats:!0,skeleton:this._skeleton})}">${(0,e.repeat)(this.options,(t=>t),(t=>this._getStat(t)))}</div>`}}exports.GvStats=a,window.customElements.define("gv-stats",a);
+/*
+ * 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/src/molecules/gv-stepper.js

@@ -1 +1,274 @@
-Object.defineProperty(exports,"__esModule",{value:!0}),exports.GvStepper=void 0;const e=require("lit"),t=require("lit/directives/repeat"),r=require("lit/directives/class-map"),i=require("../styles/link"),s=require("../lib/events"),a=require("../lib/i18n");class d extends e.LitElement{static get properties(){return{current:{type:Number,reflect:!0},steps:{type:Array},disabled:{type:Boolean},_error:{type:Boolean}}}static get styles(){return[i.link,e.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 .2s ease-in}.border{background-color:var(--bdc);margin-bottom:5px;transition:all .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:700}.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 .2s ease-in}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=!1,this._empty=!0}_onClick(e){!0!==this.disabled&&(this.current=e+1,(0,s.dispatchCustomEvent)(this,"change",{current:this.current}))}async performUpdate(){await Promise.all([this.steps,this.current]).then((([e,t])=>{this._steps=e.map(((e,r)=>(e.passed=!0===e.valid||t>0&&r+1<=t,e))),this._error=!1,this._empty=!(this._steps&&this._steps.length>0)})).catch((()=>{this._error=!0,this._empty=!1})),super.performUpdate()}_getIcon(t){return t.invalid?e.html`<div class="circle invalid"><gv-icon shape="code:error"></gv-icon></div>`:t.valid?e.html`<div class="circle"><gv-icon shape="code:check"></gv-icon></div>`:e.html`<div class="round"></div>`}_getStep(t,i){const s={passed:t.passed,valid:t.valid,step:!0,first:0===i,end:i===this._steps.length-1},a={content:!0,link:!this.disabled};return e.html`<div class="${(0,r.classMap)(s)}" @click="${this._onClick.bind(this,i)}" title="${t.title}"><div class="graph"><div class="border"></div>${this._getIcon(t)}<div class="border"></div></div><div class="${(0,r.classMap)(a)}"><div class="title">${t.title}</div><div class="description">${t.description}</div></div></div>`}render(){if(this._error)return e.html`<div class="error">${(0,a.i18n)("gv-stepper.error")}</div>`;if(this._empty)return e.html`<div></div>`;const i={stepper:!0,disabled:this.disabled};return e.html`<div class="${(0,r.classMap)(i)}">${(0,t.repeat)(this._steps,(e=>e),((e,t)=>this._getStep(e,t)))}</div>`}}exports.GvStepper=d,window.customElements.define("gv-stepper",d);
+/*
+ * 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);