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

package/src/atoms/gv-state.js

@@ -1,130 +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';
-
-/**
- * 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() {
-    return {
-      default: { type: Boolean },
-      error: { type: Boolean },
-      major: { type: Boolean },
-      skeleton: { type: Boolean },
-      success: { type: Boolean },
-      warn: { type: Boolean },
-    };
-  }
-
-  static get styles() {
-    return [
-      skeleton,
-      // language=CSS
-      css`
-        :host {
-          box-sizing: border-box;
-          display: inline-block;
-          margin: 0.2rem;
-          vertical-align: middle;
-        }
-
-        div.default {
-          --bgc: var(--gv-state--bgc, #f0f5ff);
-          --c: var(--gv-state--c, #597ef7);
-        }
-
-        div.error {
-          --bgc: var(--gv-theme-color-error-light, #e57373);
-          --c: var(--gv-theme-neutral-color-lightest, #ffffff);
-        }
-
-        div.major {
-          --bgc: var(--gv-state-major--bgc, var(--gv-theme-color-light, #d5fdcb));
-          --c: var(--gv-state-major--c, var(--gv-theme-color, #009b5b));
-        }
-
-        div.success {
-          --bgc: var(--gv-theme-color-success-light, #81c784);
-          --c: var(--gv-theme-neutral-color-lightest, #ffffff);
-        }
-
-        div.warn {
-          --bgc: var(--gv-theme-color-warning-light, #ffb74d);
-          --c: var(--gv-theme-neutral-color-lightest, #ffffff);
-        }
-
-        div {
-          background-color: var(--bgc);
-          border-radius: var(--gv-state--bdr, 17px);
-          color: var(--c);
-
-          --fz: var(--gv-state--fz, var(--gv-theme-font-size-s, 12px));
-          font-size: var(--fz);
-
-          font-weight: var(--gv-state--fw, bold);
-          text-transform: var(--gv-state--tt, uppercase);
-          line-height: var(--fz);
-          padding: var(--gv-state--p, 4px 8px);
-        }
-      `,
-    ];
-  }
-
-  render() {
-    const modes = {
-      default: !this.major && !this.error && !this.success && !this.warn,
-      error: this.error,
-      major: this.major,
-      skeleton: this.skeleton,
-      success: this.success,
-      warn: this.warn,
-    };
-
-    return html`
-      <div class=${classMap(modes)}>
-        <slot></slot>
-      </div>
-    `;
-  }
-}
-
-window.customElements.define('gv-state', GvState);
+Object.defineProperty(exports,"__esModule",{value:!0}),exports.GvState=void 0;const e=require("lit/directives/class-map"),t=require("lit"),r=require("../styles/skeleton");class s extends t.LitElement{static get properties(){return{default:{type:Boolean},error:{type:Boolean},major:{type:Boolean},skeleton:{type:Boolean},success:{type:Boolean},warn:{type:Boolean}}}static get styles(){return[r.skeleton,t.css`:host{box-sizing:border-box;display:inline-block;margin:.2rem;vertical-align:middle}div.default{--bgc:var(--gv-state--bgc, #f0f5ff);--c:var(--gv-state--c, #597ef7)}div.error{--bgc:var(--gv-theme-color-error-light, #e57373);--c:var(--gv-theme-neutral-color-lightest, #ffffff)}div.major{--bgc:var(--gv-state-major--bgc, var(--gv-theme-color-light, #d5fdcb));--c:var(--gv-state-major--c, var(--gv-theme-color, #009b5b))}div.success{--bgc:var(--gv-theme-color-success-light, #81c784);--c:var(--gv-theme-neutral-color-lightest, #ffffff)}div.warn{--bgc:var(--gv-theme-color-warning-light, #ffb74d);--c:var(--gv-theme-neutral-color-lightest, #ffffff)}div{background-color:var(--bgc);border-radius:var(--gv-state--bdr,17px);color:var(--c);--fz:var(--gv-state--fz, var(--gv-theme-font-size-s, 12px));font-size:var(--fz);font-weight:var(--gv-state--fw,bold);text-transform:var(--gv-state--tt,uppercase);line-height:var(--fz);padding:var(--gv-state--p,4px 8px)}`]}render(){const r={default:!(this.major||this.error||this.success||this.warn),error:this.error,major:this.major,skeleton:this.skeleton,success:this.success,warn:this.warn};return t.html`<div class="${(0,e.classMap)(r)}"><slot></slot></div>`}}exports.GvState=s,window.customElements.define("gv-state",s);

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

@@ -0,0 +1,60 @@
+/**
+ * A wrapper of a <switch> component.
+ *
+ * ## Details
+ * * has @theme facet
+ *
+ * @fires gv-switch:input - mirrors native input events with the `value` on `detail`
+ *
+ * @attr {Boolean} disabled - same as native switch element `disabled` attribute
+ * @attr {Boolean} skeleton - enable skeleton screen UI pattern (loading hint)
+ * @attr {Boolean|String} value - true if the switch is checked, false otherwise
+ * @attr {String} label - label of the switch
+ * @attr {String} description - description of the switch
+ * @attr {Boolean} checked - same as native switch element `checked` attribute
+ * @attr {Boolean} readonly - true if readonly
+ *
+ * @cssprop {Color} [--gv-switch-on--bgc=var(--gv-theme-color, #5a7684)] - On background color
+ * @cssprop {Color} [--gv-switch-off--bgc=var(--gv-theme-neutral-color-dark, #bfbfbf)] - Off background color
+ * @cssprop {Color} [--gv-switch--bgc=var(--gv-theme-neutral-color-lightest, #ffffff)] - Switch background color
+ * @cssprop {String} [--gv-switch--ta=left] - Switch label text alignment
+ */
+export class GvSwitch extends LitElement {
+    static get properties(): {
+        disabled: {
+            type: BooleanConstructor;
+            reflect: boolean;
+        };
+        skeleton: {
+            type: BooleanConstructor;
+        };
+        value: {
+            type: StringConstructor;
+            reflect: boolean;
+        };
+        label: {
+            type: StringConstructor;
+        };
+        description: {
+            type: StringConstructor;
+        };
+        small: {
+            type: BooleanConstructor;
+            reflect: boolean;
+        };
+        checked: {
+            type: BooleanConstructor;
+            reflect: boolean;
+        };
+        readonly: {
+            type: BooleanConstructor;
+            reflect: boolean;
+        };
+    };
+    static get styles(): import("lit").CSSResult[];
+    _id: string;
+    checked: boolean;
+    _onInput(): void;
+    value: boolean | undefined;
+}
+import { LitElement } from "lit-element/lit-element";

package/src/atoms/gv-switch.js

@@ -1,243 +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 { dispatchCustomEvent } from '../lib/events';
-
-/**
- * A wrapper of a <switch> component.
- *
- * ## Details
- * * has @theme facet
- *
- * @fires gv-switch:input - mirrors native input events with the `value` on `detail`
- *
- * @attr {Boolean} disabled - same as native switch element `disabled` attribute
- * @attr {Boolean} skeleton - enable skeleton screen UI pattern (loading hint)
- * @attr {Boolean|String} value - true if the switch is checked, false otherwise
- * @attr {String} label - label of the switch
- * @attr {String} description - description of the switch
- * @attr {Boolean} checked - same as native switch element `checked` attribute
- * @attr {Boolean} readonly - true if readonly
- *
- * @cssprop {Color} [--gv-switch-on--bgc=var(--gv-theme-color, #5a7684)] - On background color
- * @cssprop {Color} [--gv-switch-off--bgc=var(--gv-theme-neutral-color-dark, #bfbfbf)] - Off background color
- * @cssprop {Color} [--gv-switch--bgc=var(--gv-theme-neutral-color-lightest, #ffffff)] - Switch background color
- * @cssprop {String} [--gv-switch--ta=left] - Switch label text alignment
- */
-export class GvSwitch extends LitElement {
-  static get properties() {
-    return {
-      disabled: { type: Boolean, reflect: true },
-      skeleton: { type: Boolean },
-      value: { type: String, reflect: true },
-      label: { type: String },
-      description: { type: String },
-      small: { type: Boolean, reflect: true },
-      checked: { type: Boolean, reflect: true },
-      readonly: { type: Boolean, reflect: true },
-    };
-  }
-
-  static get styles() {
-    return [
-      skeleton,
-      // language=CSS
-      css`
-        :host {
-          --off-bgc: var(--gv-switch-off--bgc, var(--gv-theme-neutral-color-dark, #bfbfbf));
-          --on-bgc: var(--gv-switch-on--bgc, var(--gv-theme-color, #5a7684));
-          box-sizing: border-box;
-          margin: 0.2rem;
-        }
-
-        .container {
-          display: flex;
-        }
-
-        .labels {
-          display: flex;
-          flex-direction: column;
-          justify-content: center;
-          flex: 1;
-          margin-right: 0.4rem;
-          box-sizing: border-box;
-          text-align: var(--gv-switch--ta, left);
-        }
-
-        .switch-title {
-          font-weight: 600;
-        }
-
-        .switch-description {
-          opacity: 0.6;
-        }
-
-        .switch-container {
-          display: flex;
-          align-items: center;
-        }
-
-        .switch {
-          position: relative;
-          width: 40px;
-          -webkit-user-select: none;
-          -moz-user-select: none;
-          -ms-user-select: none;
-          border-radius: 16px;
-        }
-
-        :host([small]) .switch {
-          width: 25px;
-        }
-
-        :host([small]) .switch-label:before {
-          width: 10px;
-          border-radius: 10px;
-          right: 10px;
-        }
-
-        :host([small]) .switch-label {
-          height: 10px;
-          line-height: 10px;
-          border-radius: 10px;
-        }
-
-        :host([small]) .switch-title {
-          font-weight: 400;
-          font-size: 11px;
-        }
-
-        .switch input {
-          display: none;
-        }
-
-        .switch-label {
-          display: block;
-          overflow: hidden;
-          cursor: pointer;
-          height: 16px;
-          padding: 0;
-          line-height: 16px;
-          border: 2px solid transparent;
-          border-radius: 16px;
-          background-color: var(--off-bgc);
-          transition: background-color 0.3s ease-in;
-        }
-
-        .switch-label:before {
-          content: '';
-          display: block;
-          width: 16px;
-          margin: 0;
-          background: var(--gv-switch--bgc, var(--gv-theme-neutral-color-lightest, #ffffff));
-          position: absolute;
-          top: 0;
-          bottom: 0;
-          right: 20px;
-          border: 2px solid var(--off-bgc);
-          border-radius: 16px;
-          transition: all 0.3s ease-in 0s;
-        }
-
-        :host([checked]) .switch-label {
-          background-color: var(--on-bgc);
-        }
-
-        :host([checked]) .switch-label,
-        :host([checked]) .switch-label:before {
-          border-color: var(--on-bgc);
-        }
-
-        :host([checked]) .switch-label:before {
-          right: 0;
-        }
-
-        :host([disabled]) .switch-label,
-        :host([readonly]) .switch-label {
-          cursor: default;
-        }
-
-        :host([disabled]) .switch-label {
-          opacity: 0.5;
-        }
-      `,
-    ];
-  }
-
-  constructor() {
-    super();
-    this._id = 'gv-id';
-    this.checked = false;
-  }
-
-  _onInput() {
-    if (!(this.disabled || this.skeleton || this.readonly)) {
-      this.value = !this.checked;
-      dispatchCustomEvent(this, 'input', this.value);
-    }
-  }
-
-  updated(_changedProperties) {
-    super.updated(_changedProperties);
-    if (_changedProperties.has('value')) {
-      if (this.value != null && this.value.toString() === 'true') {
-        this.checked = true;
-      } else {
-        this.checked = false;
-      }
-    }
-  }
-
-  render() {
-    const classes = {
-      skeleton: this.skeleton,
-      disabled: this.disabled,
-      small: this.small,
-      switch: true,
-    };
-
-    return html`
-      <div class="container">
-        ${this.label || this.description
-          ? html`<div class="${classMap({ labels: true, skeleton: this.skeleton })}">
-              ${this.label ? html`<label class="switch-title">${this.label}</label>` : ''}
-              ${this.description ? html`<label class="switch-description" .innerHTML="${this.description}"></label>` : ''}
-            </div>`
-          : ''}
-        <div class="switch-container">
-          <div class=${classMap(classes)}>
-            <input
-              id=${this._id}
-              type="checkbox"
-              .title=${ifDefined(this.label || this.description)}
-              ?disabled=${this.disabled || this.skeleton}
-              ?readonly="${this.readonly}"
-              ?checked=${this.checked}
-              @input=${this._onInput}
-            />
-            <label class="switch-label" for="${this._id}"></label>
-          </div>
-        </div>
-      </div>
-    `;
-  }
-}
-
-window.customElements.define('gv-switch', GvSwitch);
+Object.defineProperty(exports,"__esModule",{value:!0}),exports.GvSwitch=void 0;const e=require("lit/directives/class-map"),t=require("lit/directives/if-defined"),i=require("lit"),s=require("../styles/skeleton"),l=require("../lib/events");class o extends i.LitElement{static get properties(){return{disabled:{type:Boolean,reflect:!0},skeleton:{type:Boolean},value:{type:String,reflect:!0},label:{type:String},description:{type:String},small:{type:Boolean,reflect:!0},checked:{type:Boolean,reflect:!0},readonly:{type:Boolean,reflect:!0}}}static get styles(){return[s.skeleton,i.css`:host{--off-bgc:var(--gv-switch-off--bgc, var(--gv-theme-neutral-color-dark, #bfbfbf));--on-bgc:var(--gv-switch-on--bgc, var(--gv-theme-color, #5a7684));box-sizing:border-box;margin:.2rem}.container{display:flex}.labels{display:flex;flex-direction:column;justify-content:center;flex:1;margin-right:.4rem;box-sizing:border-box;text-align:var(--gv-switch--ta,left)}.switch-title{font-weight:600}.switch-description{opacity:.6}.switch-container{display:flex;align-items:center}.switch{position:relative;width:40px;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;border-radius:16px}:host([small]) .switch{width:25px}:host([small]) .switch-label:before{width:10px;border-radius:10px;right:10px}:host([small]) .switch-label{height:10px;line-height:10px;border-radius:10px}:host([small]) .switch-title{font-weight:400;font-size:11px}.switch input{display:none}.switch-label{display:block;overflow:hidden;cursor:pointer;height:16px;padding:0;line-height:16px;border:2px solid transparent;border-radius:16px;background-color:var(--off-bgc);transition:background-color .3s ease-in}.switch-label:before{content:'';display:block;width:16px;margin:0;background:var(--gv-switch--bgc,var(--gv-theme-neutral-color-lightest,#fff));position:absolute;top:0;bottom:0;right:20px;border:2px solid var(--off-bgc);border-radius:16px;transition:all .3s ease-in 0s}:host([checked]) .switch-label{background-color:var(--on-bgc)}:host([checked]) .switch-label,:host([checked]) .switch-label:before{border-color:var(--on-bgc)}:host([checked]) .switch-label:before{right:0}:host([disabled]) .switch-label,:host([readonly]) .switch-label{cursor:default}:host([disabled]) .switch-label{opacity:.5}`]}constructor(){super(),this._id="gv-id",this.checked=!1}_onInput(){this.disabled||this.skeleton||this.readonly||(this.value=!this.checked,(0,l.dispatchCustomEvent)(this,"input",this.value))}updated(e){super.updated(e),e.has("value")&&(null!=this.value&&"true"===this.value.toString()?this.checked=!0:this.checked=!1)}render(){const s={skeleton:this.skeleton,disabled:this.disabled,small:this.small,switch:!0};return i.html`<div class="container">${this.label||this.description?i.html`<div class="${(0,e.classMap)({labels:!0,skeleton:this.skeleton})}">${this.label?i.html`<label class="switch-title">${this.label}</label>`:""} ${this.description?i.html`<label class="switch-description" .innerHTML="${this.description}"></label>`:""}</div>`:""}<div class="switch-container"><div class="${(0,e.classMap)(s)}"><input id="${this._id}" type="checkbox" .title="${(0,t.ifDefined)(this.label||this.description)}" ?disabled="${this.disabled||this.skeleton}" ?readonly="${this.readonly}" ?checked="${this.checked}" @input="${this._onInput}"> <label class="switch-label" for="${this._id}"></label></div></div></div>`}}exports.GvSwitch=o,window.customElements.define("gv-switch",o);

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

@@ -0,0 +1,69 @@
+/**
+ * A Tag
+ *
+ * ## Details
+ * * has @theme facet
+ *
+ * @fires click - Native click event
+ *
+ * @slot - The content of the tag (text or HTML)
+ *
+ * @attr {String} icon - name of shape
+ * @attr {String} icon-right - name of shape
+ * @attr {Boolean} major - set tag UI as major
+ * @attr {Boolean} minor - set tag UI as minor
+ * @attr {Boolean} skeleton -  enable skeleton screen UI pattern (loading hint)
+ * @attr {Boolean} clickable - If true, tag has link style
+ *
+ * @cssprop {Length} [--gv-tag--fz=var(--gv-theme-font-size-s, 12px)] - Font size
+ * @cssprop {Length} [--gv-tag--p=4px 8px] - Padding
+ * @cssprop {Length} [--gv-tag--bdr=4px] - Border radius
+ * @cssprop {String} [--gv-tag--bsw=none] - Box shadow
+ *
+ * @cssprop {Color} [--gv-tag--bgc=var(--gv-theme-neutral-color-lighter, #fafafa)] - Background color
+ * @cssprop {Color} [--gv-tag-major--bgc=var(--gv-theme-color, #5a7684)] - Major background color
+ * @cssprop {Color} [--gv-tag-minor--bgc=var(--gv-theme-neutral-color-lightest, #ffffff)] - Minor background color
+ *
+ * @cssprop {Color} [--gv-tag--bdc=var(--gv-theme-neutral-color-dark, #d9d9d9)] - Border color
+ * @cssprop {Color} [--gv-tag-major--bdc=var(--gv-theme-color, #5a7684)] - Major border color
+ * @cssprop {Color} [--gv-tag-minor--bdc=var(--gv-theme-neutral-color-dark, #d9d9d9)] - Minor border color
+
+ * @cssprop {String} [--gv-tag--bds=solid] - Border style
+ * @cssprop {String} [--gv-tag-major--bds=solid] - Major border style
+ * @cssprop {String} [--gv-tag-minor--bds=dashed] - Minor border style
+ *
+ * @cssprop {Length} [--gv-tag--bdw=1px] - Border width
+ * @cssprop {Length} [--gv-tag-major--bdw=1px] - Major border width
+ * @cssprop {Length} [--gv-tag-minor--bdw=1px] - Minor border width
+ *
+ * @cssprop {Color} [--gv-tag--c=var(--gv-theme-font-color-dark, #262626)] - Color
+ * @cssprop {Color} [--gv-tag-major--c=var(--gv-theme-font-color-light, #ffffff)] - Major color
+ * @cssprop {Color} [--gv-tag-minor--c=var(--gv-theme-font-color-dark, #262626)] - Minor color
+ * @cssprop {Length} [--gv-tag-icon--s=18px] - Height and icon width
+ */
+export class GvTag extends LitElement {
+    static get properties(): {
+        icon: {
+            type: StringConstructor;
+        };
+        iconRight: {
+            type: StringConstructor;
+            attribute: string;
+        };
+        major: {
+            type: BooleanConstructor;
+        };
+        minor: {
+            type: BooleanConstructor;
+        };
+        skeleton: {
+            type: BooleanConstructor;
+        };
+        clickable: {
+            type: BooleanConstructor;
+        };
+    };
+    static get styles(): import("lit").CSSResult[];
+    _onTagClick(e: any): void;
+}
+import { LitElement } from "lit-element/lit-element";

package/src/atoms/gv-tag.js

@@ -1,168 +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 './gv-icon';
-import { dispatchCustomEvent } from '../lib/events';
-
-/**
- * A Tag
- *
- * ## Details
- * * has @theme facet
- *
- * @fires click - Native click event
- *
- * @slot - The content of the tag (text or HTML)
- *
- * @attr {String} icon - name of shape
- * @attr {String} icon-right - name of shape
- * @attr {Boolean} major - set tag UI as major
- * @attr {Boolean} minor - set tag UI as minor
- * @attr {Boolean} skeleton -  enable skeleton screen UI pattern (loading hint)
- * @attr {Boolean} clickable - If true, tag has link style
- *
- * @cssprop {Length} [--gv-tag--fz=var(--gv-theme-font-size-s, 12px)] - Font size
- * @cssprop {Length} [--gv-tag--p=4px 8px] - Padding
- * @cssprop {Length} [--gv-tag--bdr=4px] - Border radius
- * @cssprop {String} [--gv-tag--bsw=none] - Box shadow
- *
- * @cssprop {Color} [--gv-tag--bgc=var(--gv-theme-neutral-color-lighter, #fafafa)] - Background color
- * @cssprop {Color} [--gv-tag-major--bgc=var(--gv-theme-color, #5a7684)] - Major background color
- * @cssprop {Color} [--gv-tag-minor--bgc=var(--gv-theme-neutral-color-lightest, #ffffff)] - Minor background color
- *
- * @cssprop {Color} [--gv-tag--bdc=var(--gv-theme-neutral-color-dark, #d9d9d9)] - Border color
- * @cssprop {Color} [--gv-tag-major--bdc=var(--gv-theme-color, #5a7684)] - Major border color
- * @cssprop {Color} [--gv-tag-minor--bdc=var(--gv-theme-neutral-color-dark, #d9d9d9)] - Minor border color
-
- * @cssprop {String} [--gv-tag--bds=solid] - Border style
- * @cssprop {String} [--gv-tag-major--bds=solid] - Major border style
- * @cssprop {String} [--gv-tag-minor--bds=dashed] - Minor border style
- *
- * @cssprop {Length} [--gv-tag--bdw=1px] - Border width
- * @cssprop {Length} [--gv-tag-major--bdw=1px] - Major border width
- * @cssprop {Length} [--gv-tag-minor--bdw=1px] - Minor border width
- *
- * @cssprop {Color} [--gv-tag--c=var(--gv-theme-font-color-dark, #262626)] - Color
- * @cssprop {Color} [--gv-tag-major--c=var(--gv-theme-font-color-light, #ffffff)] - Major color
- * @cssprop {Color} [--gv-tag-minor--c=var(--gv-theme-font-color-dark, #262626)] - Minor color
- * @cssprop {Length} [--gv-tag-icon--s=18px] - Height and icon width
- */
-export class GvTag extends LitElement {
-  static get properties() {
-    return {
-      icon: { type: String },
-      iconRight: { type: String, attribute: 'icon-right' },
-      major: { type: Boolean },
-      minor: { type: Boolean },
-      skeleton: { type: Boolean },
-      clickable: { type: Boolean },
-    };
-  }
-
-  static get styles() {
-    return [
-      skeleton,
-      link,
-      // language=CSS
-      css`
-        :host {
-          box-sizing: border-box;
-          display: inline-block;
-          margin: 0.2rem;
-          vertical-align: middle;
-        }
-
-        div.default {
-          --bgc: var(--gv-tag--bgc, var(--gv-theme-neutral-color-lighter, #fafafa));
-          --bdc: var(--gv-tag--bdc, var(--gv-theme-neutral-color-dark, #d9d9d9));
-          --bds: var(--gv-tag--bds, solid);
-          --bdw: var(--gv-tag--bdw, 1px);
-          --c: var(--gv-tag--c, var(--gv-theme-font-color-dark, #262626));
-        }
-
-        div.major {
-          --bgc: var(--gv-tag-major--bgc, var(--gv-theme-color, #5a7684));
-          --bdc: var(--gv-tag-major--bdc, var(--gv-theme-color, #5a7684));
-          --bds: var(--gv-tag-major--bds, solid);
-          --bdw: var(--gv-tag-major--bdw, 1px);
-          --c: var(--gv-tag-major--c, var(--gv-theme-font-color-light, #ffffff));
-        }
-
-        div.minor {
-          --bgc: var(--gv-tag-minor--bgc, var(--gv-theme-neutral-color-lightest, #ffffff));
-          --bdc: var(--gv-tag-minor--bdc, var(--gv-theme-neutral-color-dark, #d9d9d9));
-          --bds: var(--gv-tag-minor--bds, dashed);
-          --bdw: var(--gv-tag-minor--bdw, 1px);
-          --c: var(--gv-tag-minor--c, var(--gv-theme-font-color-dark, #262626));
-        }
-
-        div {
-          background-color: var(--bgc);
-          border-color: var(--bdc);
-          border-radius: var(--gv-tag--bdr, 4px);
-          border-style: var(--bds);
-          border-width: var(--bdw);
-          box-shadow: var(--gv-tag--bsw, none);
-          color: var(--c);
-          --fz: var(--gv-tag--fz, var(--gv-theme-font-size-s, 12px));
-          font-size: var(--fz);
-          line-height: var(--fz);
-          padding: var(--gv-tag--p, 4px 8px);
-          --gv-icon--s: var(--gv-tag-icon--s, 18px);
-          --gv-icon--c: var(--c);
-          --gv-icon-opacity--c: var(--c);
-
-          word-break: normal;
-        }
-
-        div > * {
-          vertical-align: middle;
-          display: inline-flex;
-        }
-      `,
-    ];
-  }
-
-  _onTagClick(e) {
-    if (this.clickable) {
-      e.stopPropagation();
-      dispatchCustomEvent(this, 'click', {});
-    }
-  }
-
-  render() {
-    const modes = {
-      default: !this.major && !this.minor,
-      major: this.major,
-      minor: this.minor && !this.major,
-      skeleton: this.skeleton,
-      link: this.clickable,
-    };
-
-    return html`
-      <div class=${classMap(modes)} @click="${this._onTagClick}">
-        ${this.icon ? html`<gv-icon shape="${this.icon}"></gv-icon>` : ''}<slot></slot>${this.iconRight
-          ? html`<gv-icon shape="${this.iconRight}"></gv-icon>`
-          : ''}
-      </div>
-    `;
-  }
-}
-
-window.customElements.define('gv-tag', GvTag);
+Object.defineProperty(exports,"__esModule",{value:!0}),exports.GvTag=void 0;const r=require("lit/directives/class-map"),a=require("lit"),t=require("../styles/skeleton"),e=require("../styles/link");require("./gv-icon");const o=require("../lib/events");class i extends a.LitElement{static get properties(){return{icon:{type:String},iconRight:{type:String,attribute:"icon-right"},major:{type:Boolean},minor:{type:Boolean},skeleton:{type:Boolean},clickable:{type:Boolean}}}static get styles(){return[t.skeleton,e.link,a.css`:host{box-sizing:border-box;display:inline-block;margin:.2rem;vertical-align:middle}div.default{--bgc:var(--gv-tag--bgc, var(--gv-theme-neutral-color-lighter, #fafafa));--bdc:var(--gv-tag--bdc, var(--gv-theme-neutral-color-dark, #d9d9d9));--bds:var(--gv-tag--bds, solid);--bdw:var(--gv-tag--bdw, 1px);--c:var(--gv-tag--c, var(--gv-theme-font-color-dark, #262626))}div.major{--bgc:var(--gv-tag-major--bgc, var(--gv-theme-color, #5a7684));--bdc:var(--gv-tag-major--bdc, var(--gv-theme-color, #5a7684));--bds:var(--gv-tag-major--bds, solid);--bdw:var(--gv-tag-major--bdw, 1px);--c:var(--gv-tag-major--c, var(--gv-theme-font-color-light, #ffffff))}div.minor{--bgc:var(--gv-tag-minor--bgc, var(--gv-theme-neutral-color-lightest, #ffffff));--bdc:var(--gv-tag-minor--bdc, var(--gv-theme-neutral-color-dark, #d9d9d9));--bds:var(--gv-tag-minor--bds, dashed);--bdw:var(--gv-tag-minor--bdw, 1px);--c:var(--gv-tag-minor--c, var(--gv-theme-font-color-dark, #262626))}div{background-color:var(--bgc);border-color:var(--bdc);border-radius:var(--gv-tag--bdr,4px);border-style:var(--bds);border-width:var(--bdw);box-shadow:var(--gv-tag--bsw,none);color:var(--c);--fz:var(--gv-tag--fz, var(--gv-theme-font-size-s, 12px));font-size:var(--fz);line-height:var(--fz);padding:var(--gv-tag--p,4px 8px);--gv-icon--s:var(--gv-tag-icon--s, 18px);--gv-icon--c:var(--c);--gv-icon-opacity--c:var(--c);word-break:normal}div>*{vertical-align:middle;display:inline-flex}`]}_onTagClick(r){this.clickable&&(r.stopPropagation(),(0,o.dispatchCustomEvent)(this,"click",{}))}render(){const t={default:!this.major&&!this.minor,major:this.major,minor:this.minor&&!this.major,skeleton:this.skeleton,link:this.clickable};return a.html`<div class="${(0,r.classMap)(t)}" @click="${this._onTagClick}">${this.icon?a.html`<gv-icon shape="${this.icon}"></gv-icon>`:""}<slot></slot>${this.iconRight?a.html`<gv-icon shape="${this.iconRight}"></gv-icon>`:""}</div>`}}exports.GvTag=i,window.customElements.define("gv-tag",i);