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

package/src/atoms/gv-select.js

@@ -1,437 +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 { classMap } from 'lit/directives/class-map';
-import { ifDefined } from 'lit/directives/if-defined';
-
-import { LitElement, html, css } from 'lit';
-import { skeleton } from '../styles/skeleton';
-import { link } from '../styles/link';
-import { input } from '../styles/input';
-import { repeat } from 'lit/directives/repeat';
-import './gv-icon';
-import { dispatchCustomEvent } from '../lib/events';
-import { InputElement } from '../mixins/input-element';
-import { withResizeObserver } from '../mixins/with-resize-observer';
-
-/**
- * A select component, is more like a list box...
- * ⚠️ Please use `<gv-select-native>` component if you don't need strong customization.
- * ⚠️ DO NO USE IT inside a `<gv-table>` component to avoid any scroll or overlapping issue.
- *
- * ## Details
- * * has @theme facet
- *
- * @fires gv-select:select - Event when user select a value (deprecated, use gv-select:input)
- * @fires gv-select:input - Event when user select a value
- *
- * @attr {Boolean} disabled - same as native select element `disabled` attribute
- * @attr {Boolean} required - same as native select element `required` attribute
- * @attr {Boolean} skeleton - enable skeleton screen UI pattern (loading hint)
- * @attr {Array} options - the options of the select
- * @attr {String | Array} value - the value of the select
- * @attr {String} label - label of the select
- * @attr {String} title - title of the select
- * @attr {String} name - name of the select
- * @attr {String} placeholder - an example value to display in the select when empty
- * @attr {String} description - a description
- * @attr {Boolean} multiple - enable multiple selection
- *
- * @cssprop {Color} [--gv-select--bgc=var(--gv-theme-neutral-color-lightest, #ffffff)] - Background color
- * @cssprop {Color} [--gv-select--list-bgc=var(--gv-select--bgc, var(--gv-theme-neutral-color-lightest, #ffffff))] - List items background color
- * @cssprop {Color} [--gv-select--bdc=var(--gv-theme-neutral-color-dark, #d9d9d9)] - Border color
- * @cssprop {Color} [--gv-select--c=var(--gv-theme-font-color-dark, #262626)] - Color
- * @cssprop {Color} [--gv-select-hover--bgc=var(--gv-theme-color-light, #86c3d0)] - Hover background color
- * @cssprop {Color} [--gv-select-selected--bgc=var(--gv-theme-neutral-color-light, #efefef)] - Selected background color
- */
-export class GvSelect extends withResizeObserver(InputElement(LitElement)) {
-  static get properties() {
-    return {
-      ...super.properties,
-      options: { type: Array },
-      _options: { type: Array, attribute: false },
-      large: { type: Boolean },
-      medium: { type: Boolean },
-      small: { type: Boolean },
-      value: { type: String | Array },
-      label: { type: String },
-      title: { type: String },
-      name: { type: String },
-      placeholder: { type: String },
-      description: { type: String },
-      multiple: { type: Boolean, reflect: true },
-      _isClosed: { type: Boolean, attribute: false },
-    };
-  }
-
-  static get styles() {
-    return [
-      ...super.styles,
-      skeleton,
-      input,
-      link,
-      // language=CSS
-      css`
-        .box {
-          --bdc: var(--gv-select--bdc, var(--gv-theme-neutral-color-dark, #d9d9d9));
-          --c: var(--gv-select--c, var(--gv-theme-font-color-dark, #262626));
-          --bgc: var(--gv-select--bgc, var(--gv-theme-neutral-color-lightest, #ffffff));
-          --bgc-list: var(--gv-select--list-bgc, var(--gv-select--bgc, var(--gv-theme-neutral-color-lightest, #ffffff)));
-          --hover-bgc: var(--gv-select-hover--bgc, var(--gv-theme-color-light, #86c3d0));
-          --selected-bgc: var(--gv-select-selected--bgc, var(--gv-theme-neutral-color-light, #efefef));
-          position: relative;
-        }
-
-        div,
-        input {
-          user-select: none;
-          color: var(--c);
-
-          cursor: pointer;
-        }
-
-        input {
-          background-color: var(--bgc);
-          border-color: var(--bdc);
-          text-overflow: ellipsis;
-
-          /* Required for text-overflow to do anything */
-          white-space: nowrap;
-          overflow: hidden;
-        }
-
-        :host([readonly]) div,
-        :host([readonly]) input,
-        :host([readonly]) input:read-only:hover {
-          user-select: auto;
-          cursor: text;
-        }
-
-        input:read-only:hover {
-          cursor: pointer;
-        }
-
-        .box-icon gv-icon {
-          --gv-icon--c: var(--c);
-        }
-
-        gv-icon {
-          transform: rotate(180deg);
-          --gv-icon--s: 19px;
-        }
-
-        .medium gv-icon {
-          --gv-icon--s: 14px;
-        }
-
-        .small gv-icon {
-          --gv-icon--s: 11px;
-        }
-
-        .closed .select__list {
-          display: none;
-          opacity: 0;
-          transform: translateY(-2em);
-          z-index: -1;
-        }
-
-        .select__list {
-          color: var(--c);
-          list-style: none;
-          position: absolute;
-          background-color: var(--bgc-list);
-          list-style: none;
-          padding: 0;
-          transition: all 0.3s ease 0s;
-          margin: 0;
-          width: 100%;
-          cursor: pointer;
-          z-index: 110;
-          box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12);
-          max-height: 340px;
-          overflow: auto;
-        }
-
-        .select__list .selected {
-          background-color: var(--selected-bgc);
-        }
-
-        .select__list__item {
-          border-left: 1px solid var(--bdc);
-          display: flex;
-          align-items: center;
-          transition: all 0.5s ease;
-
-          text-overflow: ellipsis;
-          white-space: nowrap;
-          overflow: hidden;
-        }
-
-        .select__list__item.disabled {
-          opacity: 0.5;
-        }
-
-        .select__list__item.disabled:hover {
-          cursor: not-allowed;
-        }
-
-        .large .select__list__item {
-          padding: var(--input-large--p);
-          font-size: var(--input-large--fz);
-          height: var(--input-large--h);
-        }
-
-        .medium .select__list__item {
-          padding: 0 5px;
-          font-size: var(--input-medium--fz);
-          height: var(--input-medium--h);
-        }
-
-        .small .select__list__item {
-          padding: var(--input-small--p);
-          font-size: var(--input-small--fz);
-          height: var(--input-small--h);
-        }
-
-        .select__list__item:hover {
-          background-color: var(--hover-bgc);
-          border-left: 1px dotted var(--bdc);
-        }
-
-        .medium.icon input,
-        .large.icon input,
-        .small.icon input {
-          padding-right: 25px;
-        }
-      `,
-    ];
-  }
-
-  constructor() {
-    super();
-    this._type = 'text';
-    this._isClosed = true;
-    this._options = [{ label: '', value: '', disabled: false, title: null }];
-    this._handleDocumentClick = this._onDocumentClick.bind(this);
-  }
-
-  connectedCallback() {
-    super.connectedCallback();
-    window.addEventListener('click', this._handleDocumentClick);
-  }
-
-  disconnectedCallback() {
-    window.removeEventListener('click', this._handleDocumentClick);
-    super.disconnectedCallback();
-  }
-
-  willUpdate(changedProperties) {
-    if (changedProperties.has('value')) {
-      this.updateState(this.value);
-    }
-  }
-
-  updateState(value) {
-    super.updateState(value);
-    if (value && this._options && this.valid) {
-      if (this.multiple) {
-        if (this.required) {
-          this.setValidity(value.length === 0, 'field is required');
-        }
-        if (value.length > 0 && this.valid) {
-          const possibleValues = this._options.map((o) => o.value);
-          this.setValidity(!value.some((v) => possibleValues.includes(v)), 'value is not included in the possible values');
-        }
-      } else {
-        this.setValidity(
-          this.required && this._options.find((option) => option.value === value) == null,
-          'value is not included in the possible values',
-        );
-      }
-      this.invalid = !this.valid;
-    }
-  }
-
-  close() {
-    this._isClosed = true;
-  }
-
-  _onDocumentClick() {
-    this._isClosed = true;
-  }
-
-  _onClick(e) {
-    if (!this.disabled && !this.skeleton) {
-      e.preventDefault();
-      e.stopPropagation();
-      if (this._isClosed) {
-        this.dispatchEvent(new Event('click', { bubbles: true, cancelable: true, composed: true }));
-      }
-      this._isClosed = !this._isClosed;
-    }
-  }
-
-  _onSelect(option, e) {
-    e.stopPropagation();
-    if (option.disabled !== true) {
-      if (this.multiple) {
-        if (!this.value) {
-          this.value = [];
-        }
-        if (this.value.includes(e.target.dataset.value)) {
-          const index = this.value.indexOf(e.target.dataset.value);
-          if (index > -1) {
-            if (typeof this.value === 'string') {
-              this.value = [];
-            } else {
-              this.value.splice(index, 1);
-              this.value = [...this.value];
-            }
-          }
-        } else {
-          this.value = [...this.value, e.target.dataset.value];
-        }
-      } else {
-        this.value = e.target.dataset.value;
-        this._isClosed = !this._isClosed;
-      }
-      dispatchCustomEvent(this, 'select', this.value);
-      dispatchCustomEvent(this, 'input', this.value);
-      this.dispatchEvent(new Event('input', { bubbles: true, cancelable: true }));
-    }
-  }
-
-  _onClear() {
-    this.value = [];
-    dispatchCustomEvent(this, 'select', this.value);
-    dispatchCustomEvent(this, 'input', this.value);
-    this.dispatchEvent(new Event('input', { bubbles: true, cancelable: true }));
-  }
-
-  _renderIcon() {
-    if (this.readonly) {
-      return '';
-    }
-    if (this.multiple && this.value != null && this.value.length > 0) {
-      return html`<div class="box-icon">
-        <gv-icon class="link" shape="code:error" @click=${this._onClear}></gv-icon>
-      </div>`;
-    }
-
-    return html`<div class="box-icon">
-      <gv-icon class="link" shape="design:triangle" @click=${this._onClick}></gv-icon>
-    </div>`;
-  }
-
-  set options(options) {
-    if (options) {
-      this._options = options.map((option) => {
-        if (typeof option !== 'object') {
-          return { value: option, label: option };
-        } else if (!option.label) {
-          return { value: option.value, label: option.value };
-        }
-        return option;
-      });
-    }
-  }
-
-  selectedLabel() {
-    if (this.value != null) {
-      const elements = this._options.filter((o) => this.isSelected(o));
-      if (elements) {
-        return elements.map((e) => e.label).join(', ');
-      }
-    }
-    return '';
-  }
-
-  onResize() {
-    const input = this.shadowRoot.querySelector('input');
-    const { width } = window.getComputedStyle(input);
-    const list = this.shadowRoot.querySelector('.select__list');
-    if (list != null) {
-      list.style.width = width;
-    }
-  }
-
-  render() {
-    const classes = {
-      box: true,
-      closed: this._isClosed,
-      large: this.large,
-      medium: this.medium || (!this.large && !this.small),
-      small: this.small,
-      icon: true,
-      skeleton: this.skeleton,
-      required: this.required,
-    };
-
-    const selectedLabel = this.selectedLabel();
-    return html`
-      <div class="${classMap(classes)}">
-        <div class="box-input">
-          ${this.renderLabel()}
-          <input
-            id=${this._id}
-            .type=${this._type}
-            .name=${ifDefined(this.name)}
-            .title=${ifDefined(selectedLabel || this.title || this.label)}
-            .required=${this.required}
-            aria-required=${!!this.required}
-            ?disabled=${this.disabled || this.skeleton}
-            .placeholder=${ifDefined(this.placeholder)}
-            .value=${selectedLabel}
-            @click=${this._onClick}
-            readonly="readonly"
-          />
-          ${this._renderIcon()}
-        </div>
-        ${this.readonly
-          ? ''
-          : html` <ul class="${classMap(Object.assign({ select__list: true }))}" role="listbox" ?aria-expanded="${!this._isClosed}">
-              ${this._options &&
-              repeat(
-                this._options,
-                (option) => option,
-                (option) => html`
-                  <li
-                    class="${classMap({
-                      select__list__item: true,
-                      selected: this.isSelected(option),
-                      disabled: option.disabled,
-                    })}"
-                    @click=${this._onSelect.bind(this, option)}
-                    data-value="${option.value}"
-                    .title="${ifDefined(option.title)}"
-                    role="option"
-                    ?aria-selected="${this.isSelected(option)}"
-                  >
-                    ${option.label}
-                  </li>
-                `,
-              )}
-            </ul>`}
-      </div>
-      ${this.description != null ? html`<div class="description" .innerHTML="${this.description}"></div>` : ''}
-    `;
-  }
-
-  isSelected(option) {
-    return this.multiple ? this.value && this.value.includes(option.value) : '' + this.value === '' + option.value;
-  }
-}
-
-window.customElements.define('gv-select', GvSelect);
+Object.defineProperty(exports,"__esModule",{value:!0}),exports.GvSelect=void 0;const e=require("lit/directives/class-map"),t=require("lit/directives/if-defined"),i=require("lit"),s=require("../styles/skeleton"),l=require("../styles/link"),a=require("../styles/input"),o=require("lit/directives/repeat");require("./gv-icon");const n=require("../lib/events"),r=require("../mixins/input-element"),c=require("../mixins/with-resize-observer");class d extends((0,c.withResizeObserver)((0,r.InputElement)(i.LitElement))){static get properties(){return{...super.properties,options:{type:Array},_options:{type:Array,attribute:!1},large:{type:Boolean},medium:{type:Boolean},small:{type:Boolean},value:{type:String|Array},label:{type:String},title:{type:String},name:{type:String},placeholder:{type:String},description:{type:String},multiple:{type:Boolean,reflect:!0},_isClosed:{type:Boolean,attribute:!1}}}static get styles(){return[...super.styles,s.skeleton,a.input,l.link,i.css`.box{--bdc:var(--gv-select--bdc, var(--gv-theme-neutral-color-dark, #d9d9d9));--c:var(--gv-select--c, var(--gv-theme-font-color-dark, #262626));--bgc:var(--gv-select--bgc, var(--gv-theme-neutral-color-lightest, #ffffff));--bgc-list:var(--gv-select--list-bgc, var(--gv-select--bgc, var(--gv-theme-neutral-color-lightest, #ffffff)));--hover-bgc:var(--gv-select-hover--bgc, var(--gv-theme-color-light, #86c3d0));--selected-bgc:var(--gv-select-selected--bgc, var(--gv-theme-neutral-color-light, #efefef));position:relative}div,input{user-select:none;color:var(--c);cursor:pointer}input{background-color:var(--bgc);border-color:var(--bdc);text-overflow:ellipsis;white-space:nowrap;overflow:hidden}:host([readonly]) div,:host([readonly]) input,:host([readonly]) input:read-only:hover{user-select:auto;cursor:text}input:read-only:hover{cursor:pointer}.box-icon gv-icon{--gv-icon--c:var(--c)}gv-icon{transform:rotate(180deg);--gv-icon--s:19px}.medium gv-icon{--gv-icon--s:14px}.small gv-icon{--gv-icon--s:11px}.closed .select__list{display:none;opacity:0;transform:translateY(-2em);z-index:-1}.select__list{color:var(--c);list-style:none;position:absolute;background-color:var(--bgc-list);list-style:none;padding:0;transition:all .3s ease 0s;margin:0;width:100%;cursor:pointer;z-index:110;box-shadow:0 2px 4px -1px rgba(0,0,0,.2),0 4px 5px 0 rgba(0,0,0,.14),0 1px 10px 0 rgba(0,0,0,.12);max-height:340px;overflow:auto}.select__list .selected{background-color:var(--selected-bgc)}.select__list__item{border-left:1px solid var(--bdc);display:flex;align-items:center;transition:all .5s ease;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.select__list__item.disabled{opacity:.5}.select__list__item.disabled:hover{cursor:not-allowed}.large .select__list__item{padding:var(--input-large--p);font-size:var(--input-large--fz);height:var(--input-large--h)}.medium .select__list__item{padding:0 5px;font-size:var(--input-medium--fz);height:var(--input-medium--h)}.small .select__list__item{padding:var(--input-small--p);font-size:var(--input-small--fz);height:var(--input-small--h)}.select__list__item:hover{background-color:var(--hover-bgc);border-left:1px dotted var(--bdc)}.large.icon input,.medium.icon input,.small.icon input{padding-right:25px}`]}constructor(){super(),this._type="text",this._isClosed=!0,this._options=[{label:"",value:"",disabled:!1,title:null}],this._handleDocumentClick=this._onDocumentClick.bind(this)}connectedCallback(){super.connectedCallback(),window.addEventListener("click",this._handleDocumentClick)}disconnectedCallback(){window.removeEventListener("click",this._handleDocumentClick),super.disconnectedCallback()}willUpdate(e){e.has("value")&&this.updateState(this.value)}updateState(e){if(super.updateState(e),e&&this._options&&this.valid){if(this.multiple){if(this.required&&this.setValidity(0===e.length,"field is required"),e.length>0&&this.valid){const t=this._options.map((e=>e.value));this.setValidity(!e.some((e=>t.includes(e))),"value is not included in the possible values")}}else this.setValidity(this.required&&null==this._options.find((t=>t.value===e)),"value is not included in the possible values");this.invalid=!this.valid}}close(){this._isClosed=!0}_onDocumentClick(){this._isClosed=!0}_onClick(e){this.disabled||this.skeleton||(e.preventDefault(),e.stopPropagation(),this._isClosed&&this.dispatchEvent(new Event("click",{bubbles:!0,cancelable:!0,composed:!0})),this._isClosed=!this._isClosed)}_onSelect(e,t){if(t.stopPropagation(),!0!==e.disabled){if(this.multiple)if(this.value||(this.value=[]),this.value.includes(t.target.dataset.value)){const e=this.value.indexOf(t.target.dataset.value);e>-1&&("string"==typeof this.value?this.value=[]:(this.value.splice(e,1),this.value=[...this.value]))}else this.value=[...this.value,t.target.dataset.value];else this.value=t.target.dataset.value,this._isClosed=!this._isClosed;(0,n.dispatchCustomEvent)(this,"select",this.value),(0,n.dispatchCustomEvent)(this,"input",this.value),this.dispatchEvent(new Event("input",{bubbles:!0,cancelable:!0}))}}_onClear(){this.value=[],(0,n.dispatchCustomEvent)(this,"select",this.value),(0,n.dispatchCustomEvent)(this,"input",this.value),this.dispatchEvent(new Event("input",{bubbles:!0,cancelable:!0}))}_renderIcon(){return this.readonly?"":this.multiple&&null!=this.value&&this.value.length>0?i.html`<div class="box-icon"><gv-icon class="link" shape="code:error" @click="${this._onClear}"></gv-icon></div>`:i.html`<div class="box-icon"><gv-icon class="link" shape="design:triangle" @click="${this._onClick}"></gv-icon></div>`}set options(e){e&&(this._options=e.map((e=>"object"!=typeof e?{value:e,label:e}:e.label?e:{value:e.value,label:e.value})))}selectedLabel(){if(null!=this.value){const e=this._options.filter((e=>this.isSelected(e)));if(e)return e.map((e=>e.label)).join(", ")}return""}onResize(){const e=this.shadowRoot.querySelector("input"),{width:t}=window.getComputedStyle(e),i=this.shadowRoot.querySelector(".select__list");null!=i&&(i.style.width=t)}render(){const s={box:!0,closed:this._isClosed,large:this.large,medium:this.medium||!this.large&&!this.small,small:this.small,icon:!0,skeleton:this.skeleton,required:this.required},l=this.selectedLabel();return i.html`<div class="${(0,e.classMap)(s)}"><div class="box-input">${this.renderLabel()} <input id="${this._id}" .type="${this._type}" .name="${(0,t.ifDefined)(this.name)}" .title="${(0,t.ifDefined)(l||this.title||this.label)}" .required="${this.required}" aria-required="${!!this.required}" ?disabled="${this.disabled||this.skeleton}" .placeholder="${(0,t.ifDefined)(this.placeholder)}" .value="${l}" @click="${this._onClick}" readonly="readonly"> ${this._renderIcon()}</div>${this.readonly?"":i.html`<ul class="${(0,e.classMap)(Object.assign({select__list:!0}))}" role="listbox" ?aria-expanded="${!this._isClosed}">${this._options&&(0,o.repeat)(this._options,(e=>e),(s=>i.html`<li class="${(0,e.classMap)({select__list__item:!0,selected:this.isSelected(s),disabled:s.disabled})}" @click="${this._onSelect.bind(this,s)}" data-value="${s.value}" .title="${(0,t.ifDefined)(s.title)}" role="option" ?aria-selected="${this.isSelected(s)}">${s.label}</li>`))}</ul>`}</div>${null!=this.description?i.html`<div class="description" .innerHTML="${this.description}"></div>`:""}`}isSelected(e){return this.multiple?this.value&&this.value.includes(e.value):""+this.value==""+e.value}}exports.GvSelect=d,window.customElements.define("gv-select",d);

package/src/atoms/gv-spinner.d.ts

@@ -0,0 +1,10 @@
+/**
+ * Spinner component
+ *
+ * ## Details
+ * @cssprop {Image} [--gv-theme-loader=var(--gv-theme-loader, url('images/gravitee-loader.gif'))] - Spinner image
+ */
+export class GvSpinner extends LitElement {
+    static get styles(): import("lit").CSSResult[];
+}
+import { LitElement } from "lit-element/lit-element";

package/src/atoms/gv-spinner.js

@@ -1,57 +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';
-
-/**
- * Spinner component
- *
- * ## Details
- * @cssprop {Image} [--gv-theme-loader=var(--gv-theme-loader, url('images/gravitee-loader.gif'))] - Spinner image
- */
-export class GvSpinner extends LitElement {
-  static get styles() {
-    return [
-      // language=css
-      css`
-        :host {
-          position: absolute;
-          bottom: 0;
-          left: 0;
-          right: 0;
-          top: 0;
-        }
-
-        .spinner {
-          display: flex;
-          margin: 0 auto;
-          position: relative;
-          height: 100%;
-          width: 100%;
-          background-image: var(--gv-theme-loader, url('images/gravitee-loader.gif'));
-          background-size: 200px;
-          background-repeat: no-repeat;
-          background-position: center center;
-        }
-      `,
-    ];
-  }
-
-  render() {
-    return html`<div class="spinner"></div>`;
-  }
-}
-
-window.customElements.define('gv-spinner', GvSpinner);
+Object.defineProperty(exports,"__esModule",{value:!0}),exports.GvSpinner=void 0;const e=require("lit");class t extends e.LitElement{static get styles(){return[e.css`:host{position:absolute;bottom:0;left:0;right:0;top:0}.spinner{display:flex;margin:0 auto;position:relative;height:100%;width:100%;background-image:var(--gv-theme-loader, url('images/gravitee-loader.gif'));background-size:200px;background-repeat:no-repeat;background-position:center center}`]}render(){return e.html`<div class="spinner"></div>`}}exports.GvSpinner=t,window.customElements.define("gv-spinner",t);

package/src/atoms/gv-state.d.ts

@@ -0,0 +1,50 @@
+/**
+ * A State
+ *
+ * ## Details
+ * * has @theme facet
+ *
+ * @fires click - Native click event
+ *
+ * @slot - The content of the state (text or HTML)
+ *
+ * @attr {Boolean} error - enable error mode
+ * @attr {Boolean} major - enable major mode
+ * @attr {Boolean} success - enable success mode
+ * @attr {Boolean} warn - enable warn mode
+ * @attr {Boolean} skeleton -  enable skeleton screen UI pattern (loading hint)
+ *
+ * @cssprop {Length} [--gv-state--bdr=17px] - Border radius
+ * @cssprop {Length} [--gv-state--fz=var(--gv-theme-font-size-s, 12px)] - Font size
+ * @cssprop {String} [--gv-state--fw=bold] - Font weight
+ * @cssprop {String} [--gv-state--tt=uppercase] - Text transform
+ * @cssprop {Length} [--gv-state--p=4px 8px] - Padding
+ * @cssprop {Color} [--gv-state--bgc=#f0f5ff] - Background color
+ * @cssprop {Color} [--gv-state--c=#597ef7] - Color
+ * @cssprop {Color} [--gv-state-major--bgc=var(--gv-theme-color-light, #d5fdcb)] - Major background color
+ * @cssprop {Color} [--gv-state-major--c=var(--gv-theme-color, #009b5b)] - Major color
+ */
+export class GvState extends LitElement {
+    static get properties(): {
+        default: {
+            type: BooleanConstructor;
+        };
+        error: {
+            type: BooleanConstructor;
+        };
+        major: {
+            type: BooleanConstructor;
+        };
+        skeleton: {
+            type: BooleanConstructor;
+        };
+        success: {
+            type: BooleanConstructor;
+        };
+        warn: {
+            type: BooleanConstructor;
+        };
+    };
+    static get styles(): import("lit").CSSResult[];
+}
+import { LitElement } from "lit-element/lit-element";