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

package/src/atoms/gv-switch.js

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

package/src/atoms/gv-tag.js

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

package/src/atoms/gv-text.js

@@ -1 +1,160 @@
-Object.defineProperty(exports,"__esModule",{value:!0}),exports.GvText=void 0;const e=require("lit/directives/class-map"),t=require("lit/directives/if-defined"),i=require("lit"),r=require("../styles/skeleton"),s=require("../lib/events"),a=require("../mixins/input-element");class l extends((0,a.InputElement)(i.LitElement)){static get properties(){return{rows:{type:Number},minlength:{type:Number},maxlength:{type:Number},autosize:{type:Boolean}}}static get styles(){return[...super.styles,r.skeleton,i.css`.box{position:relative;line-height:0}.textarea{--fz:var(--gv-text--fz, var(--gv-theme-font-size-m, 14px));--tmp:var(--gv-text--lh, var(--gv-theme-font-size-m, 14px));--lh:calc(var(--tmp) + 3px);border:1px solid var(--gv-input--bdc,var(--gv-theme-neutral-color-dark,#d9d9d9));box-sizing:border-box;border-radius:4px;outline:0;padding:10px 5px;width:100%;resize:none;font-size:var(--fz);line-height:var(--lh)}div.textarea{white-space:pre}textarea:disabled{cursor:default;opacity:.5}textarea:required{box-shadow:none}label{display:block;line-height:15px;padding:0 0 .2rem 0}textarea{font-family:inherit}`]}constructor(){super(),this.rows=10}getInputElement(){return this.shadowRoot.querySelector("textarea")}_onInput(e){this.updateState(e.target.value),this.value=e.target.value,(0,s.dispatchCustomEvent)(this,"input",this.value)}render(){const r={skeleton:this.skeleton,required:this.required,textarea:!0};if(this.readonly)return this.value||""!==this.value.trim()?i.html`${this.renderLabel()}<div class="${(0,e.classMap)(r)}" .title="${(0,t.ifDefined)(this.title||this.label)}">${(0,t.ifDefined)(this.value)}</div>`:"";const s=this.autosize&&this.value?this.value.split("\n").length:this.rows;return i.html`<div class="box">${this.renderLabel()} <textarea class="${(0,e.classMap)(r)}" id="${this._id}" .name="${(0,t.ifDefined)(this.name)}" .title="${(0,t.ifDefined)(this.title||this.label)}" .required="${this.required}" ?readonly="${this.readonly}" maxlength="${this.maxlength}" minlength="${this.minlength}" aria-required="${!!this.required}" ?disabled="${this.disabled||this.skeleton}" .placeholder="${(0,t.ifDefined)(this.placeholder)}" .value="${(0,t.ifDefined)(this.value)}" rows="${this.rows<s?s:this.rows}" @input="${this._onInput}"></textarea></div>`}}exports.GvText=l,window.customElements.define("gv-text",l);
+/*
+ * 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, css, html } from 'lit';
+import { skeleton } from '../styles/skeleton';
+import { dispatchCustomEvent } from '../lib/events';
+import { InputElement } from '../mixins/input-element';
+/**
+ * A wrapper of a <text> component.
+ *
+ * ## Details
+ * * has @theme facet
+ *
+ * @fires gv-text:input - mirrors native textarea events with the `value` on `detail`
+ *
+ * @attr {Boolean} disabled - same as native text element `disabled` attribute
+ * @attr {Boolean} required - same as native text element `required` attribute
+ * @attr {Boolean} skeleton - enable skeleton screen UI pattern (loading hint)
+ * @attr {String} value - the value of the text
+ * @attr {String} label - label of the text
+ * @attr {String} title - title of the text
+ * @attr {String} name - name of the text
+ * @attr {String} placeholder - an example value to display in the text when empty
+ * @attr {Length} rows - number of rows of the text element
+ * @attr {Boolean} autofocus - true to put the focus on the input
+ * @attr {Boolean} [readonly=false] - true if field is readonly mode
+ * @attr {Boolean} [autosize=false] - true if field auto resize when content change
+ *
+ * @cssprop {Color} [--gv-input--bdc=var(--gv-theme-neutral-color-dark, #d9d9d9)] - Border color
+ * @cssprop {Length} [--gv-text--fz=var(--gv-theme-font-size-m, 14px)] - Font size
+ * @cssprop {Length} [--gv-text--lh=var(--gv-theme-font-size-m, 14px)] - Line height
+ */
+export class GvText extends InputElement(LitElement) {
+    static get properties() {
+        return {
+            rows: { type: Number },
+            minlength: { type: Number },
+            maxlength: { type: Number },
+            autosize: { type: Boolean },
+        };
+    }
+    static get styles() {
+        return [
+            ...super.styles,
+            skeleton,
+            // language=CSS
+            css `
+        .box {
+          position: relative;
+          line-height: 0;
+        }
+
+        /* BASE */
+        .textarea {
+          --fz: var(--gv-text--fz, var(--gv-theme-font-size-m, 14px));
+          --tmp: var(--gv-text--lh, var(--gv-theme-font-size-m, 14px));
+          --lh: calc(var(--tmp) + 3px);
+          border: 1px solid var(--gv-input--bdc, var(--gv-theme-neutral-color-dark, #d9d9d9));
+          box-sizing: border-box;
+          border-radius: 4px;
+          outline: none;
+          padding: 10px 5px;
+          width: 100%;
+          resize: none;
+          font-size: var(--fz);
+          line-height: var(--lh);
+        }
+
+        div.textarea {
+          white-space: pre;
+        }
+
+        textarea:disabled {
+          cursor: default;
+          opacity: 0.5;
+        }
+
+        textarea:required {
+          box-shadow: none;
+        }
+
+        label {
+          display: block;
+          line-height: 15px;
+          padding: 0 0 0.2rem 0;
+        }
+
+        /* Hack for FF */
+        textarea {
+          font-family: inherit;
+        }
+      `,
+        ];
+    }
+    constructor() {
+        super();
+        this.rows = 10;
+    }
+    getInputElement() {
+        return this.shadowRoot.querySelector('textarea');
+    }
+    _onInput(e) {
+        this.updateState(e.target.value);
+        this.value = e.target.value;
+        dispatchCustomEvent(this, 'input', this.value);
+    }
+    render() {
+        const classes = {
+            skeleton: this.skeleton,
+            required: this.required,
+            textarea: true,
+        };
+        if (this.readonly) {
+            if (this.value || this.value.trim() !== '') {
+                return html `
+          ${this.renderLabel()}
+          <div class="${classMap(classes)}" .title=${ifDefined(this.title || this.label)}>${ifDefined(this.value)}</div>
+        `;
+            }
+            return '';
+        }
+        const rows = this.autosize && this.value ? this.value.split('\n').length : this.rows;
+        return html `
+      <div class="box">
+        ${this.renderLabel()}
+        <textarea
+          class="${classMap(classes)}"
+          id=${this._id}
+          .name=${ifDefined(this.name)}
+          .title=${ifDefined(this.title || this.label)}
+          .required=${this.required}
+          ?readonly="${this.readonly}"
+          maxlength="${this.maxlength}"
+          minlength="${this.minlength}"
+          aria-required=${!!this.required}
+          ?disabled=${this.disabled || this.skeleton}
+          .placeholder=${ifDefined(this.placeholder)}
+          .value=${ifDefined(this.value)}
+          rows="${this.rows < rows ? rows : this.rows}"
+          @input=${this._onInput}
+        ></textarea>
+      </div>
+    `;
+    }
+}
+window.customElements.define('gv-text', GvText);

package/src/charts/gv-chart-bar.js

@@ -1 +1,101 @@
-Object.defineProperty(exports,"__esModule",{value:!0}),exports.GvChartBar=void 0;const t=require("lit");require("../atoms/gv-button"),require("../atoms/gv-tag");const e=require("../mixins/chart-element"),s=require("../lib/events");class i extends((0,e.ChartElement)(t.LitElement)){async getOptions(){let t=0;const e=[];return this._series&&this._series.values&&(this.options.data.forEach(((t,s)=>{t.y=this._series.values[this.options.data[s].name]||0,e.push(t.name)})),this.options.data.forEach((e=>{t+=e.y}))),t||(this._empty=!0),{chart:{type:"bar"},series:0===t?[]:[this.options],xAxis:{categories:e},legend:{enabled:!1},yAxis:{allowDecimals:!1,title:{text:null},min:0},plotOptions:{bar:{dataLabels:{enabled:!0}},series:{animation:!1,events:{click:t=>{t.preventDefault(),(0,s.dispatchCustomEvent)(this,"select",t.point.options)}}}},tooltip:{pointFormat:"Nb hits: <b>{point.y}</b>"},title:{text:"Total: "+t,useHTML:!0,align:"left",verticalAlign:"bottom",y:10,style:{fontSize:"12px",fontWeight:"bold"}}}}}exports.GvChartBar=i,window.customElements.define("gv-chart-bar",i);
+/*
+ * 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 { LitElement } from 'lit';
+import '../atoms/gv-button';
+import '../atoms/gv-tag';
+import { ChartElement } from '../mixins/chart-element';
+import { dispatchCustomEvent } from '../lib/events';
+/**
+ * Bar chart component
+ *
+ * ⚠️ This component is based on `highcharts`.
+ * To use this component in your project be sure the dependency is installed or
+ * install it with: `npm install highcharts --save`
+ *
+ * @fires gv-chart-bar:select - Custom event with selected value
+ *
+ * @attr {Array} series - The series to display on the bar chart.
+ * @attr {Array} options - The list of options to display.
+ *
+ */
+export class GvChartBar extends ChartElement(LitElement) {
+    async getOptions() {
+        let total = 0;
+        const categories = [];
+        if (this._series && this._series.values) {
+            this.options.data.forEach((data, i) => {
+                data.y = this._series.values[this.options.data[i].name] || 0;
+                categories.push(data.name);
+            });
+            this.options.data.forEach((d) => {
+                total += d.y;
+            });
+        }
+        if (!total) {
+            this._empty = true;
+        }
+        return {
+            chart: {
+                type: 'bar',
+            },
+            series: total === 0 ? [] : [this.options],
+            xAxis: {
+                categories: categories,
+            },
+            legend: {
+                enabled: false,
+            },
+            yAxis: {
+                allowDecimals: false,
+                title: {
+                    text: null,
+                },
+                min: 0,
+            },
+            plotOptions: {
+                bar: {
+                    dataLabels: {
+                        enabled: true,
+                    },
+                },
+                series: {
+                    animation: false,
+                    events: {
+                        click: (event) => {
+                            event.preventDefault();
+                            dispatchCustomEvent(this, 'select', event.point.options);
+                        },
+                    },
+                },
+            },
+            tooltip: {
+                pointFormat: 'Nb hits: <b>{point.y}</b>',
+            },
+            title: {
+                text: 'Total: ' + total,
+                useHTML: true,
+                align: 'left',
+                verticalAlign: 'bottom',
+                y: 10,
+                style: {
+                    fontSize: '12px',
+                    fontWeight: 'bold',
+                },
+            },
+        };
+    }
+}
+window.customElements.define('gv-chart-bar', GvChartBar);