@gravitee/ui-components 3.25.3-typescript-e7256ca → 3.25.3-typescript-9cbc31e

package/src/atoms/gv-button.js

@@ -1 +1,397 @@
-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);
+/*
+ * 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);

package/src/atoms/gv-checkbox.js

@@ -1 +1,178 @@
-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);
+/*
+ * 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);