@gravitee/ui-components 3.25.3-typescript-ad6021f → 3.25.3-typescript-bfd8f67

package/src/molecules/gv-row.js

@@ -1,210 +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 { 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);
+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);

package/src/molecules/gv-stats.js

@@ -1,121 +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 { 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);
+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);

package/src/molecules/gv-stepper.js

@@ -1,288 +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 { 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);
+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);