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

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.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);

package/src/atoms/gv-text.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 { 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);
+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);