@gravitee/ui-components 3.25.3-typescript-8a53edf → 3.25.3-typescript-9a4271f

package/src/atoms/gv-button.js

@@ -1,410 +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 { LitElement, html, css } from 'lit';
-import { skeleton } from '../styles/skeleton';
-import { link } from '../styles/link';
-import '../atoms/gv-icon';
-import { ifDefined } from 'lit/directives/if-defined';
-import { dispatchCustomEvent } from '../lib/events';
-
-/**
- * A button
- *
- * ## Details
- *
- * * attributes `primary` define the mode of the button and are exclusive.
- * * You can only set one mode at a time.
- * * When you don't use any of these values, the mode defaults to `default`.
- * * has @theme facet
- *
- * @fires gv-button:click - Click event from inner button element
- *
- * @slot - The content of the button (text or HTML)
- *
- * @attr {Enum{button|submit}} type - the type of the button
- * @attr {Boolean} primary - set button UI mode to primary
- * @attr {Boolean} danger - set button UI mode to danger
- * @attr {Boolean} disabled - same as native button element `disabled` attribute
- * @attr {Boolean} outlined - set button UI as outlined (white background instead of filled color)
- * @attr {Boolean} link - set button UI mode to link
- * @attr {String} href - If is defined gv-button will be rendered as a <a> with `href`
- * @attr {Boolean} skeleton - enable skeleton screen UI pattern (loading hint)
- * @attr {String} icon - display an icon on the left side of the button
- * @attr {String} icon-right - display an icon on the right side of the button
- * @attr {String} title - title of button
- * @attr {Boolean} loading - true to display a loading icon
- * @attr {String} provider - Provider name (github, oidc, graviteeio_am, google)
- * @attr {Boolean} small - for a small input
- * @attr {Number} tabindex - tabindex of button
- *
- * @cssprop {Color} [--gv-button--bgc=var(--gv-theme-color-dark, #28444f)] - Background color
- * @cssprop {Color} [--gv-button--c=var(--gv-theme-font-color-light, #ffffff)] - Color
- * @cssprop {Color} [--gv-button-primary--c=var(--gv-theme-font-color-light, #ffffff)] - Primary color
- * @cssprop {Color} [--gv-button-primary--bgc=var(--gv-theme-color, #5a7684)] - Primary background color
- * @cssprop {Color} [--gv-button-danger--c=var(--gv-theme-font-color-light, #ffffff)] - Danger color
- * @cssprop {Color} [--gv-button-danger--bgc=var(--gv-theme-color-danger, #ff5722)] - Danger background color
- * @cssprop {Color} [--gv-button-oidc--bgc=#000000] - OIDC Social Provider button background color
- * @cssprop {Color} [--gv-button-graviteeio_am--bgc=#86c3d0] - Gravitee.io AM Social Provider button background color
- * @cssprop {Length} [--gv-button--p=7px 14px] - Padding
- * @cssprop {Length} [--gv-button--fz=var(--gv-theme-font-size-m, 14px)] - Font size
- * @cssprop {Length} [--gv-button--bdrs=0.15rem] - Border radius
- */
-export class GvButton extends LitElement {
-  static get properties() {
-    return {
-      type: { type: String },
-      danger: { type: Boolean },
-      disabled: { type: Boolean },
-      primary: { type: Boolean },
-      outlined: { type: Boolean },
-      link: { type: Boolean },
-      href: { type: String },
-      skeleton: { type: Boolean },
-      icon: { type: String },
-      iconRight: { type: String, attribute: 'icon-right' },
-      loading: { type: Boolean },
-      title: { type: String, reflect: true },
-      provider: { type: String },
-      small: { type: Boolean },
-      tabindex: { type: Number, reflect: true },
-      _hasContent: { type: Boolean, attribute: false },
-    };
-  }
-
-  static get styles() {
-    return [
-      // language=CSS
-      css`
-        :host {
-          box-sizing: border-box;
-          display: inline-block;
-          margin: 0.2rem;
-          vertical-align: middle;
-          --gv-icon--s: 23px;
-          --github--c: #444;
-          --google--c: #4285f4;
-          --oidc--c: var(--gv-button-oidc--bgc, #000000);
-          --gravitee--c: var(--gv-button-graviteeio_am--bgc, #86c3d0);
-        }
-
-        :host(:not([link])) {
-          outline: 0;
-        }
-
-        .github {
-          --gv-button--bgc: var(--github--c);
-        }
-
-        .google {
-          --gv-button--bgc: var(--google--c);
-        }
-
-        .oidc {
-          --gv-button--bgc: var(--oidc--c);
-          --gv-button-icon--c: #fff;
-        }
-
-        .oidc.outlined {
-          --gv-button-icon--c: var(--oidc--c);
-        }
-
-        .button.graviteeio_am {
-          --gv-button--bgc: var(--gravitee--c);
-          color: #383e3f;
-        }
-
-        /* RESET */
-        .button {
-          background: #fff;
-          border: 1px solid #000;
-          font-size: var(--gv-button--fz, var(--gv-theme-font-size-m, 14px));
-          margin: 0;
-          padding: 0;
-          height: 100%;
-          text-decoration: none;
-          box-sizing: border-box;
-          display: flex;
-          justify-content: center;
-          align-items: center;
-          text-align: center;
-          outline: 0;
-        }
-
-        .button.small {
-          --gv-icon--s: 16px;
-        }
-
-        .button.small:not(.link) {
-          max-height: 25px;
-          min-height: 25px;
-          min-width: 25px;
-          --gv-button--p: 1px 4px;
-        }
-
-        /* BASE */
-        .button:not(.link) {
-          border-radius: var(--gv-button--bdrs, 0.15rem);
-          cursor: pointer;
-          min-height: 39px;
-          min-width: 39px;
-          padding: var(--gv-button--p, 7px 14px);
-          text-transform: uppercase;
-          user-select: none;
-          width: 100%;
-        }
-
-        .button.iconLeft:not(.noContent) slot {
-          margin-left: 7px;
-        }
-
-        .button.iconRight:not(.noContent) slot {
-          margin-right: 7px;
-        }
-
-        /* COLORS */
-        .default {
-          --c: var(--gv-button--c, var(--gv-theme-font-color-light, #ffffff));
-          --bgc: var(--gv-button--bgc, var(--gv-theme-color-dark, #28444f));
-          --icon--c: var(--gv-button--c, var(--gv-theme-font-color-light, #ffffff));
-          --gv-icon--c: var(--icon--c);
-          --gv-icon-opacity--c: var(--icon--c);
-        }
-
-        .primary {
-          --c: var(--gv-button-primary--c, var(--gv-theme-font-color-light, #ffffff));
-          --bgc: var(--gv-button-primary--bgc, var(--gv-theme-color, #5a7684));
-          --icon--c: var(--gv-button-primary--c, var(--gv-theme-font-color-light, #ffffff));
-          --gv-icon--c: var(--icon--c);
-          --gv-icon-opacity--c: var(--icon--c);
-          font-weight: 500;
-        }
-
-        .danger {
-          --c: var(--gv-button-danger--c, var(--gv-theme-font-color-light, #ffffff));
-          --bgc: var(--gv-button-danger--bgc, var(--gv-theme-color-danger, #ff5722));
-          --icon--c: var(--gv-button-danger--c, var(--gv-theme-font-color-light, #ffffff));
-          --gv-icon--c: var(--icon--c);
-          --gv-icon-opacity--c: var(--icon--c);
-        }
-
-        /* MODES */
-        :host([skeleton]) .button:not(.link) {
-          border-color: var(--gv-theme-skeleton-color, #bfbfbf);
-        }
-
-        .button:not(.link) {
-          background-color: var(--bgc);
-          border-color: var(--bgc);
-          color: var(--c);
-        }
-
-        .button.outlined {
-          background-color: var(--c);
-          color: var(--bgc);
-          --gv-icon--c: var(--bgc);
-          --gv-icon-opacity--c: var(--bgc);
-        }
-
-        :host(:focus) .button:not(.link):not(.disabled),
-        :host(:hover) .button:not(.link):not(.disabled) {
-          box-shadow: 0 1px 3px var(--gv-theme-color-darker, #383e3f);
-        }
-
-        :host(:active) .button {
-          box-shadow: none;
-        }
-
-        .button.disabled {
-          cursor: default;
-          opacity: 0.5;
-        }
-
-        .button.skeleton > gv-icon {
-          opacity: 0;
-        }
-
-        /* TRANSITIONS */
-        .button {
-          box-shadow: 0 0 0 0 rgba(255, 255, 255, 0);
-          transition: all 75ms ease-in-out;
-        }
-
-        /* We can do this because we set a visible focus state */
-        .button::-moz-focus-inner {
-          border: 0;
-        }
-
-        .button slot {
-          flex: 1;
-          white-space: nowrap;
-          display: flex;
-          align-items: center;
-          justify-content: center;
-          height: 100%;
-        }
-
-        .button.noContent slot {
-          display: none;
-        }
-
-        .loading gv-icon {
-          animation: spinner 1.6s linear infinite;
-          --gv-icon--s: 20px;
-        }
-
-        .loading.small gv-icon {
-          --gv-icon--s: 18px;
-        }
-
-        @keyframes spinner {
-          to {
-            transform: rotate(360deg);
-          }
-        }
-
-        .link {
-          border: 0;
-          cursor: pointer;
-          background-color: transparent;
-        }
-
-        button.link {
-          text-decoration: underline;
-        }
-
-        :host([skeleton]) .link {
-          color: transparent;
-        }
-      `,
-      skeleton,
-      link,
-    ];
-  }
-
-  constructor() {
-    super();
-    this.tabindex = 0;
-    this.type = 'button';
-    this.addEventListener('click', this._onClick.bind(this));
-  }
-
-  _onKeyDown(e) {
-    if (e.keyCode === 32 || e.keyCode === 13) {
-      e.preventDefault();
-      this._onClick(e);
-    }
-  }
-
-  _onClick(e) {
-    if (this.href) {
-      e.preventDefault();
-    }
-    if (!this.disabled && !this.loading && !this.skeleton) {
-      const form = this.closest('form');
-      if (form && this.type === 'submit') {
-        form.dispatchEvent(new Event('submit', { bubbles: true, cancelable: true }));
-      }
-      dispatchCustomEvent(this, 'click');
-    }
-  }
-
-  render() {
-    const classes = {
-      button: true,
-      primary: this.primary && !this.danger,
-      danger: this.danger,
-      skeleton: this.skeleton && !this.link,
-      default: !this.primary && !this.danger && !this.link,
-      outlined: this.outlined,
-      icon: this.icon || this.iconRight,
-      iconLeft: this._hasIconLeft(),
-      iconRight: this.iconRight,
-      loading: this.loading && !this.link,
-      link: this.link && !this.primary && !this.danger,
-      disabled: this.disabled,
-      small: this.small,
-      noContent: !this._hasContent,
-    };
-
-    if (this.provider) {
-      classes[this.provider] = true;
-      this.icon = `thirdparty:${this.provider}`;
-      classes.icon = true;
-      classes.iconLeft = true;
-    }
-
-    if (this.href) {
-      return html`<a tabindex="-1" .href="${this.href}" .title="${ifDefined(this.title)}" class=${classMap(classes)}>
-        ${this._getIconLeft()}
-        <slot></slot>
-        ${this._getIconRight()}
-      </a>`;
-    } else {
-      return html`<button
-        tabindex="-1"
-        type=${this.type || 'button'}
-        .title="${ifDefined(this.title)}"
-        class=${classMap(classes)}
-        .disabled=${this.disabled || this.skeleton}
-      >
-        ${this._getIconLeft()}
-        <slot></slot>
-        ${this._getIconRight()}
-      </button>`;
-    }
-  }
-
-  _getIconRight() {
-    if (this.iconRight) {
-      if (this.loading && !this.icon && !this.link) {
-        return html`<gv-icon shape="navigation:waiting" .title="${ifDefined(this.title)}"></gv-icon>`;
-      }
-      return html`<gv-icon shape="${this.iconRight}" .title="${ifDefined(this.title)}"></gv-icon>`;
-    }
-    return '';
-  }
-
-  _hasIconLeft() {
-    return (this.icon || this.loading) && !this.iconRight;
-  }
-
-  _getIconLeft() {
-    if (this._hasIconLeft()) {
-      if (this.loading && !this.link) {
-        return html`<gv-icon shape="navigation:waiting" .title="${ifDefined(this.title)}"></gv-icon>`;
-      }
-      return html`<gv-icon shape="${this.icon}" .title="${ifDefined(this.title)}"></gv-icon>`;
-    }
-    return '';
-  }
-
-  firstUpdated() {
-    this.addEventListener('keydown', this._onKeyDown);
-  }
-
-  updated(_changedProperties) {
-    super.updated(_changedProperties);
-    const slot = this.shadowRoot.querySelector('slot');
-    this._hasContent =
-      slot
-        .assignedNodes()
-        .map((node) => node.textContent)
-        .filter((text) => text.trim() !== '').length > 0;
-  }
-}
-
-window.customElements.define('gv-button', GvButton);
+Object.defineProperty(exports,"__esModule",{value:!0}),exports.GvButton=void 0;const t=require("lit/directives/class-map"),i=require("lit"),e=require("../styles/skeleton"),o=require("../styles/link");require("../atoms/gv-icon");const n=require("lit/directives/if-defined"),r=require("../lib/events");class s extends i.LitElement{static get properties(){return{type:{type:String},danger:{type:Boolean},disabled:{type:Boolean},primary:{type:Boolean},outlined:{type:Boolean},link:{type:Boolean},href:{type:String},skeleton:{type:Boolean},icon:{type:String},iconRight:{type:String,attribute:"icon-right"},loading:{type:Boolean},title:{type:String,reflect:!0},provider:{type:String},small:{type:Boolean},tabindex:{type:Number,reflect:!0},_hasContent:{type:Boolean,attribute:!1}}}static get styles(){return[i.css`:host{box-sizing:border-box;display:inline-block;margin:.2rem;vertical-align:middle;--gv-icon--s:23px;--github--c:#444;--google--c:#4285f4;--oidc--c:var(--gv-button-oidc--bgc, #000000);--gravitee--c:var(--gv-button-graviteeio_am--bgc, #86c3d0)}:host(:not([link])){outline:0}.github{--gv-button--bgc:var(--github--c)}.google{--gv-button--bgc:var(--google--c)}.oidc{--gv-button--bgc:var(--oidc--c);--gv-button-icon--c:#fff}.oidc.outlined{--gv-button-icon--c:var(--oidc--c)}.button.graviteeio_am{--gv-button--bgc:var(--gravitee--c);color:#383e3f}.button{background:#fff;border:1px solid #000;font-size:var(--gv-button--fz,var(--gv-theme-font-size-m,14px));margin:0;padding:0;height:100%;text-decoration:none;box-sizing:border-box;display:flex;justify-content:center;align-items:center;text-align:center;outline:0}.button.small{--gv-icon--s:16px}.button.small:not(.link){max-height:25px;min-height:25px;min-width:25px;--gv-button--p:1px 4px}.button:not(.link){border-radius:var(--gv-button--bdrs,.15rem);cursor:pointer;min-height:39px;min-width:39px;padding:var(--gv-button--p,7px 14px);text-transform:uppercase;user-select:none;width:100%}.button.iconLeft:not(.noContent) slot{margin-left:7px}.button.iconRight:not(.noContent) slot{margin-right:7px}.default{--c:var(--gv-button--c, var(--gv-theme-font-color-light, #ffffff));--bgc:var(--gv-button--bgc, var(--gv-theme-color-dark, #28444f));--icon--c:var(--gv-button--c, var(--gv-theme-font-color-light, #ffffff));--gv-icon--c:var(--icon--c);--gv-icon-opacity--c:var(--icon--c)}.primary{--c:var(--gv-button-primary--c, var(--gv-theme-font-color-light, #ffffff));--bgc:var(--gv-button-primary--bgc, var(--gv-theme-color, #5a7684));--icon--c:var(--gv-button-primary--c, var(--gv-theme-font-color-light, #ffffff));--gv-icon--c:var(--icon--c);--gv-icon-opacity--c:var(--icon--c);font-weight:500}.danger{--c:var(--gv-button-danger--c, var(--gv-theme-font-color-light, #ffffff));--bgc:var(--gv-button-danger--bgc, var(--gv-theme-color-danger, #ff5722));--icon--c:var(--gv-button-danger--c, var(--gv-theme-font-color-light, #ffffff));--gv-icon--c:var(--icon--c);--gv-icon-opacity--c:var(--icon--c)}:host([skeleton]) .button:not(.link){border-color:var(--gv-theme-skeleton-color,#bfbfbf)}.button:not(.link){background-color:var(--bgc);border-color:var(--bgc);color:var(--c)}.button.outlined{background-color:var(--c);color:var(--bgc);--gv-icon--c:var(--bgc);--gv-icon-opacity--c:var(--bgc)}:host(:focus) .button:not(.link):not(.disabled),:host(:hover) .button:not(.link):not(.disabled){box-shadow:0 1px 3px var(--gv-theme-color-darker,#383e3f)}:host(:active) .button{box-shadow:none}.button.disabled{cursor:default;opacity:.5}.button.skeleton>gv-icon{opacity:0}.button{box-shadow:0 0 0 0 rgba(255,255,255,0);transition:all 75ms ease-in-out}.button::-moz-focus-inner{border:0}.button slot{flex:1;white-space:nowrap;display:flex;align-items:center;justify-content:center;height:100%}.button.noContent slot{display:none}.loading gv-icon{animation:spinner 1.6s linear infinite;--gv-icon--s:20px}.loading.small gv-icon{--gv-icon--s:18px}@keyframes spinner{to{transform:rotate(360deg)}}.link{border:0;cursor:pointer;background-color:transparent}button.link{text-decoration:underline}:host([skeleton]) .link{color:transparent}`,e.skeleton,o.link]}constructor(){super(),this.tabindex=0,this.type="button",this.addEventListener("click",this._onClick.bind(this))}_onKeyDown(t){32!==t.keyCode&&13!==t.keyCode||(t.preventDefault(),this._onClick(t))}_onClick(t){if(this.href&&t.preventDefault(),!this.disabled&&!this.loading&&!this.skeleton){const t=this.closest("form");t&&"submit"===this.type&&t.dispatchEvent(new Event("submit",{bubbles:!0,cancelable:!0})),(0,r.dispatchCustomEvent)(this,"click")}}render(){const e={button:!0,primary:this.primary&&!this.danger,danger:this.danger,skeleton:this.skeleton&&!this.link,default:!this.primary&&!this.danger&&!this.link,outlined:this.outlined,icon:this.icon||this.iconRight,iconLeft:this._hasIconLeft(),iconRight:this.iconRight,loading:this.loading&&!this.link,link:this.link&&!this.primary&&!this.danger,disabled:this.disabled,small:this.small,noContent:!this._hasContent};return this.provider&&(e[this.provider]=!0,this.icon=`thirdparty:${this.provider}`,e.icon=!0,e.iconLeft=!0),this.href?i.html`<a tabindex="-1" .href="${this.href}" .title="${(0,n.ifDefined)(this.title)}" class="${(0,t.classMap)(e)}">${this._getIconLeft()}<slot></slot>${this._getIconRight()}</a>`:i.html`<button tabindex="-1" type="${this.type||"button"}" .title="${(0,n.ifDefined)(this.title)}" class="${(0,t.classMap)(e)}" .disabled="${this.disabled||this.skeleton}">${this._getIconLeft()}<slot></slot>${this._getIconRight()}</button>`}_getIconRight(){return this.iconRight?!this.loading||this.icon||this.link?i.html`<gv-icon shape="${this.iconRight}" .title="${(0,n.ifDefined)(this.title)}"></gv-icon>`:i.html`<gv-icon shape="navigation:waiting" .title="${(0,n.ifDefined)(this.title)}"></gv-icon>`:""}_hasIconLeft(){return(this.icon||this.loading)&&!this.iconRight}_getIconLeft(){return this._hasIconLeft()?this.loading&&!this.link?i.html`<gv-icon shape="navigation:waiting" .title="${(0,n.ifDefined)(this.title)}"></gv-icon>`:i.html`<gv-icon shape="${this.icon}" .title="${(0,n.ifDefined)(this.title)}"></gv-icon>`:""}firstUpdated(){this.addEventListener("keydown",this._onKeyDown)}updated(t){super.updated(t);const i=this.shadowRoot.querySelector("slot");this._hasContent=i.assignedNodes().map((t=>t.textContent)).filter((t=>""!==t.trim())).length>0}}exports.GvButton=s,window.customElements.define("gv-button",s);

package/src/atoms/gv-checkbox.js

@@ -1,187 +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 { LitElement, html, css } from 'lit';
-import { skeleton } from '../styles/skeleton';
-import { dispatchCustomEvent } from '../lib/events';
-import { InputElement } from '../mixins/input-element';
-
-/**
- * A wrapper of a <checkbox> component.
- *
- * ## Details
- * * has @theme facet
- *
- * @fires gv-checkbox:input - mirrors native input events with the `value` on `detail`
- * @fires input - native input event
- * @fires change - native change event
- *
- * @attr {Boolean} disabled - same as native checkbox element `disabled` attribute
- * @attr {Boolean} skeleton - enable skeleton screen UI pattern (loading hint)
- * @attr {String} value - The string to use as the value of the checkbox when submitting the form, if the checkbox is currently toggled on
- * @attr {Boolean} checked - true if the checkbox is checked, false otherwise
- * @attr {String} label - label of the checkbox
- * @attr {String} title - title of the checkbox
- *
- * @cssprop {Color} [--gv-checkbox--bgc=var(--gv-theme-color, #5a7684)] - Checked background color
- */
-export class GvCheckbox extends InputElement(LitElement) {
-  static get properties() {
-    return {
-      disabled: { type: Boolean },
-      skeleton: { type: Boolean },
-      value: { type: String, reflect: true },
-      checked: { type: Boolean, reflect: true },
-      label: { type: String },
-      title: { type: String },
-    };
-  }
-
-  static get styles() {
-    return [
-      skeleton,
-      // language=CSS
-      css`
-        :host {
-          cursor: pointer;
-          --gv-icon--c: var(--gv-theme-neutral-color-dark, #d9d9d9);
-          --gv-icon--s: 30px;
-        }
-
-        .container {
-          position: relative;
-          height: 30px;
-        }
-
-        /* BASE */
-        input {
-          border: 1px solid var(--gv-theme-neutral-color-dark, #d9d9d9);
-          box-sizing: border-box;
-          border-radius: 4px;
-          outline: none;
-          padding: 10px;
-          cursor: pointer;
-        }
-
-        input:disabled {
-          cursor: default;
-          opacity: 0.5;
-        }
-
-        label {
-          cursor: pointer;
-          line-height: 29px;
-          padding-left: 15px;
-        }
-
-        .required > label::after {
-          content: '*';
-          color: var(--gv-theme-color-danger);
-        }
-
-        gv-icon {
-          position: absolute;
-        }
-
-        gv-icon.checked {
-          --gv-icon--s: 20px;
-          background-color: var(--gv-checkbox--bgc, var(--gv-theme-color, #5a7684));
-          display: inherit !important;
-          margin: 5px;
-          border-radius: 4px;
-          height: 20px;
-        }
-
-        gv-icon:disabled {
-          cursor: default;
-          opacity: 0.5;
-        }
-
-        .disabled,
-        .skeleton {
-          cursor: default;
-        }
-
-        label abbr {
-          position: absolute;
-          left: 0;
-          color: red;
-          font-variant: none;
-        }
-      `,
-    ];
-  }
-
-  constructor() {
-    super();
-    this._type = 'checkbox';
-    this.checked = false;
-    this.value = 'off';
-  }
-
-  _renderLabel() {
-    if (this.label) {
-      return html`<label
-        class="${classMap({
-          disabled: this.disabled,
-          skeleton: this.skeleton,
-          'checkbox-label': true,
-        })}"
-        title="${this.label}"
-      >
-        ${this.label}
-      </label> `;
-    }
-    return '';
-  }
-
-  _onInput() {
-    if (!(this.disabled || this.skeleton)) {
-      this.checked = !this.checked;
-      // Must dispatch events after all properties are updated
-      setTimeout(() => {
-        dispatchCustomEvent(this, 'input', this.checked);
-        this.dispatchEvent(new Event('input', { bubbles: true, cancelable: true }));
-        this.dispatchEvent(new Event('change', { bubbles: true, cancelable: true }));
-      }, 0);
-    }
-  }
-
-  updated(properties) {
-    if (properties.has('checked') && (this.value === 'off' || this.value === 'on')) {
-      this.value = this.checked ? 'on' : 'off';
-    }
-  }
-
-  render() {
-    const classes = {
-      skeleton: this.skeleton,
-      disabled: this.disabled,
-      required: this.required,
-      container: true,
-    };
-    return html`
-      <div class=${classMap(classes)}>
-        <gv-icon shape="design:border" @click=${this._onInput}></gv-icon>
-        <gv-icon style="display: none;" @click=${this._onInput} class=${classMap({ checked: this.checked })} shape="code:check"></gv-icon>
-        <label @click=${this._onInput}>${this._renderLabel()}</label>
-      </div>
-    `;
-  }
-}
-
-window.customElements.define('gv-checkbox', GvCheckbox);
+Object.defineProperty(exports,"__esModule",{value:!0}),exports.GvCheckbox=void 0;const e=require("lit/directives/class-map"),t=require("lit"),i=require("../styles/skeleton"),s=require("../lib/events"),l=require("../mixins/input-element");class o extends((0,l.InputElement)(t.LitElement)){static get properties(){return{disabled:{type:Boolean},skeleton:{type:Boolean},value:{type:String,reflect:!0},checked:{type:Boolean,reflect:!0},label:{type:String},title:{type:String}}}static get styles(){return[i.skeleton,t.css`:host{cursor:pointer;--gv-icon--c:var(--gv-theme-neutral-color-dark, #d9d9d9);--gv-icon--s:30px}.container{position:relative;height:30px}input{border:1px solid var(--gv-theme-neutral-color-dark,#d9d9d9);box-sizing:border-box;border-radius:4px;outline:0;padding:10px;cursor:pointer}input:disabled{cursor:default;opacity:.5}label{cursor:pointer;line-height:29px;padding-left:15px}.required>label::after{content:'*';color:var(--gv-theme-color-danger)}gv-icon{position:absolute}gv-icon.checked{--gv-icon--s:20px;background-color:var(--gv-checkbox--bgc,var(--gv-theme-color,#5a7684));display:inherit!important;margin:5px;border-radius:4px;height:20px}gv-icon:disabled{cursor:default;opacity:.5}.disabled,.skeleton{cursor:default}label abbr{position:absolute;left:0;color:red;font-variant:none}`]}constructor(){super(),this._type="checkbox",this.checked=!1,this.value="off"}_renderLabel(){return this.label?t.html`<label class="${(0,e.classMap)({disabled:this.disabled,skeleton:this.skeleton,"checkbox-label":!0})}" title="${this.label}">${this.label}</label>`:""}_onInput(){this.disabled||this.skeleton||(this.checked=!this.checked,setTimeout((()=>{(0,s.dispatchCustomEvent)(this,"input",this.checked),this.dispatchEvent(new Event("input",{bubbles:!0,cancelable:!0})),this.dispatchEvent(new Event("change",{bubbles:!0,cancelable:!0}))}),0))}updated(e){!e.has("checked")||"off"!==this.value&&"on"!==this.value||(this.value=this.checked?"on":"off")}render(){const i={skeleton:this.skeleton,disabled:this.disabled,required:this.required,container:!0};return t.html`<div class="${(0,e.classMap)(i)}"><gv-icon shape="design:border" @click="${this._onInput}"></gv-icon><gv-icon style="display:none" @click="${this._onInput}" class="${(0,e.classMap)({checked:this.checked})}" shape="code:check"></gv-icon><label @click="${this._onInput}">${this._renderLabel()}</label></div>`}}exports.GvCheckbox=o,window.customElements.define("gv-checkbox",o);