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

package/src/molecules/gv-dropdown-menu.d.ts

@@ -0,0 +1,28 @@
+/**
+ * Dropdown menu
+ *
+ * @slot - The element which must be clicked to open the actions
+ * @slot actions - Element that contains actions
+ *
+ * @attr {Boolean} open - true, if menu should be open
+ * @attr {Boolean} right - true, if actions should at right of container when opened
+ */
+export class GvDropdownMenu extends LitElement {
+    static get properties(): {
+        open: {
+            type: BooleanConstructor;
+            reflect: boolean;
+        };
+        right: {
+            type: BooleanConstructor;
+            reflect: boolean;
+        };
+    };
+    static get styles(): import("lit").CSSResult[];
+    open: boolean;
+    right: boolean;
+    _handleDocumentClick: () => void;
+    _onDocumentClick(): void;
+    toggle(): void;
+}
+import { LitElement } from "lit-element/lit-element";

package/src/molecules/gv-dropdown-menu.js

@@ -1,116 +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 { css, LitElement, html } from 'lit';
-
-/**
- * Dropdown menu
- *
- * @slot - The element which must be clicked to open the actions
- * @slot actions - Element that contains actions
- *
- * @attr {Boolean} open - true, if menu should be open
- * @attr {Boolean} right - true, if actions should at right of container when opened
- */
-export class GvDropdownMenu extends LitElement {
-  static get properties() {
-    return {
-      open: { type: Boolean, reflect: true },
-      right: { type: Boolean, reflect: true },
-    };
-  }
-
-  static get styles() {
-    return [
-      // language=CSS
-      css`
-        :host {
-          box-sizing: border-box;
-          display: block;
-        }
-
-        .actions {
-          position: absolute;
-          background-color: white;
-          transition: all 300ms ease-in-out;
-          border-style: solid;
-          border-color: #bfbfbf;
-          border-width: var(--gv-dropdown-menu--bdw, 1px 1px 1px 1px);
-          z-index: 201;
-          padding: var(--gv-dropdown-menu--p, 0.5rem);
-          visibility: hidden;
-          opacity: 0;
-          display: grid;
-          grid-gap: var(--gv-dropdown-menu--gg, 0.2rem);
-          bottom: 0;
-          top: 0;
-        }
-
-        :host([open]) .actions {
-          opacity: 1;
-          visibility: visible;
-          cursor: pointer;
-        }
-
-        :host([right]) .actions {
-          right: 0px;
-        }
-      `,
-    ];
-  }
-
-  constructor() {
-    super();
-    this.open = false;
-    this.right = false;
-    this._handleDocumentClick = this._onDocumentClick.bind(this);
-  }
-
-  connectedCallback() {
-    super.connectedCallback();
-  }
-
-  disconnectedCallback() {
-    window.removeEventListener('click', this._handleDocumentClick);
-    super.disconnectedCallback();
-  }
-
-  _onDocumentClick() {
-    this.open = false;
-    window.removeEventListener('click', this._handleDocumentClick);
-  }
-
-  toggle() {
-    this.open = !this.open;
-    setTimeout(() => {
-      if (this.open) {
-        window.addEventListener('click', this._handleDocumentClick);
-      } else {
-        window.removeEventListener('click', this._handleDocumentClick);
-      }
-    }, 0);
-  }
-
-  render() {
-    return html`<div class="box">
-      <slot @click="${this.toggle}"></slot>
-      <div class="actions">
-        <slot name="action" class="action"></slot>
-      </div>
-    </div>`;
-  }
-}
-
-window.customElements.define('gv-dropdown-menu', GvDropdownMenu);
+Object.defineProperty(exports,"__esModule",{value:!0}),exports.GvDropdownMenu=void 0;const e=require("lit");class t extends e.LitElement{static get properties(){return{open:{type:Boolean,reflect:!0},right:{type:Boolean,reflect:!0}}}static get styles(){return[e.css`:host{box-sizing:border-box;display:block}.actions{position:absolute;background-color:#fff;transition:all .3s ease-in-out;border-style:solid;border-color:#bfbfbf;border-width:var(--gv-dropdown-menu--bdw,1px 1px 1px 1px);z-index:201;padding:var(--gv-dropdown-menu--p,.5rem);visibility:hidden;opacity:0;display:grid;grid-gap:var(--gv-dropdown-menu--gg,.2rem);bottom:0;top:0}:host([open]) .actions{opacity:1;visibility:visible;cursor:pointer}:host([right]) .actions{right:0}`]}constructor(){super(),this.open=!1,this.right=!1,this._handleDocumentClick=this._onDocumentClick.bind(this)}connectedCallback(){super.connectedCallback()}disconnectedCallback(){window.removeEventListener("click",this._handleDocumentClick),super.disconnectedCallback()}_onDocumentClick(){this.open=!1,window.removeEventListener("click",this._handleDocumentClick)}toggle(){this.open=!this.open,setTimeout((()=>{this.open?window.addEventListener("click",this._handleDocumentClick):window.removeEventListener("click",this._handleDocumentClick)}),0)}render(){return e.html`<div class="box"><slot @click="${this.toggle}"></slot><div class="actions"><slot name="action" class="action"></slot></div></div>`}}exports.GvDropdownMenu=t,window.customElements.define("gv-dropdown-menu",t);

package/src/molecules/gv-expandable.d.ts

@@ -0,0 +1,37 @@
+/**
+ * Expandable component
+ *
+ * @fires gv-expandable:toggle - When user toggle
+ *
+ * @attr {Boolean} open - When true, opens details by default
+ * @attr {String} icon - An icon to show open feature
+ * @attr {String} icon-opened -  An icon to show close feature
+ * @attr {Boolean} clickable - When true, details is clickable like summary
+ *
+ * @cssprop {String} [--gv-expandable--bdb=var(--gv-expandable--bdb, thin solid var(--gv-theme-color, #5a7684)] - Border bottom
+ */
+export class GvExpandable extends LitElement {
+    static get properties(): {
+        open: {
+            type: BooleanConstructor;
+            reflect: boolean;
+        };
+        icon: {
+            type: StringConstructor;
+        };
+        iconOpened: {
+            type: StringConstructor;
+            attribute: string;
+        };
+        clickable: {
+            type: BooleanConstructor;
+        };
+    };
+    static get styles(): import("lit").CSSResult[];
+    open: boolean;
+    icon: string;
+    iconOpened: string;
+    clickable: boolean;
+    _onClick(event: any): void;
+}
+import { LitElement } from "lit-element/lit-element";

package/src/molecules/gv-expandable.js

@@ -1,122 +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 { css, html, LitElement } from 'lit';
-import { link } from '../styles/link';
-import { classMap } from 'lit/directives/class-map';
-import { dispatchCustomEvent } from '../lib/events';
-
-/**
- * Expandable component
- *
- * @fires gv-expandable:toggle - When user toggle
- *
- * @attr {Boolean} open - When true, opens details by default
- * @attr {String} icon - An icon to show open feature
- * @attr {String} icon-opened -  An icon to show close feature
- * @attr {Boolean} clickable - When true, details is clickable like summary
- *
- * @cssprop {String} [--gv-expandable--bdb=var(--gv-expandable--bdb, thin solid var(--gv-theme-color, #5a7684)] - Border bottom
- */
-export class GvExpandable extends LitElement {
-  constructor() {
-    super();
-    this.open = false;
-    this.icon = 'navigation:angle-left';
-    this.iconOpened = 'navigation:angle-down';
-    this.clickable = false;
-  }
-
-  static get properties() {
-    return {
-      open: { type: Boolean, reflect: true },
-      icon: { type: String },
-      iconOpened: { type: String, attribute: 'icon-opened' },
-      clickable: { type: Boolean },
-    };
-  }
-
-  static get styles() {
-    return [
-      link,
-      // language=CSS
-      css`
-        :host {
-          box-sizing: border-box;
-        }
-
-        .box {
-          padding: 0.2rem;
-          line-height: 23px;
-          border-bottom: var(--gv-expandable--bdb, thin solid var(--gv-theme-color, #5a7684));
-        }
-
-        :host([open]) .details {
-          visibility: visible;
-          opacity: 1;
-          height: auto;
-          overflow: visible;
-        }
-
-        .details {
-          display: block;
-          overflow: hidden;
-          opacity: 0;
-          visibility: hidden;
-          transition: all 150ms ease-in-out;
-          height: 0;
-        }
-
-        .summary {
-          display: flex;
-          flex-direction: row;
-          align-content: center;
-          justify-content: space-between;
-        }
-
-        .expand {
-          align-self: center;
-          margin-left: 5px;
-          --gv-icon--s: 16px;
-        }
-      `,
-    ];
-  }
-
-  _onClick(event) {
-    if (!this.clickable) {
-      const summary = this.shadowRoot.querySelector('.summary');
-      if (!summary.contains(event.target) && event.target.slot !== 'summary') {
-        return;
-      }
-    }
-    this.open = !this.open;
-    dispatchCustomEvent(this, 'toggle', { open: this.open });
-  }
-
-  render() {
-    const icon = this.open ? this.iconOpened : this.icon;
-    return html`<div class="${classMap({ box: true, link: this.clickable })}" @click=${this._onClick}>
-      <div class="${classMap({ summary: true, link: !this.clickable })}">
-        <slot name="summary"></slot>
-
-        <gv-icon shape="${icon}" class="expand"></gv-icon>
-      </div>
-      <slot name="details" class="details"></slot>
-    </div>`;
-  }
-}
-
-window.customElements.define('gv-expandable', GvExpandable);
+Object.defineProperty(exports,"__esModule",{value:!0}),exports.GvExpandable=void 0;const e=require("lit"),i=require("../styles/link"),t=require("lit/directives/class-map"),s=require("../lib/events");class n extends e.LitElement{constructor(){super(),this.open=!1,this.icon="navigation:angle-left",this.iconOpened="navigation:angle-down",this.clickable=!1}static get properties(){return{open:{type:Boolean,reflect:!0},icon:{type:String},iconOpened:{type:String,attribute:"icon-opened"},clickable:{type:Boolean}}}static get styles(){return[i.link,e.css`:host{box-sizing:border-box}.box{padding:.2rem;line-height:23px;border-bottom:var(--gv-expandable--bdb,thin solid var(--gv-theme-color,#5a7684))}:host([open]) .details{visibility:visible;opacity:1;height:auto;overflow:visible}.details{display:block;overflow:hidden;opacity:0;visibility:hidden;transition:all 150ms ease-in-out;height:0}.summary{display:flex;flex-direction:row;align-content:center;justify-content:space-between}.expand{align-self:center;margin-left:5px;--gv-icon--s:16px}`]}_onClick(e){if(!this.clickable){if(!this.shadowRoot.querySelector(".summary").contains(e.target)&&"summary"!==e.target.slot)return}this.open=!this.open,(0,s.dispatchCustomEvent)(this,"toggle",{open:this.open})}render(){const i=this.open?this.iconOpened:this.icon;return e.html`<div class="${(0,t.classMap)({box:!0,link:this.clickable})}" @click="${this._onClick}"><div class="${(0,t.classMap)({summary:!0,link:!this.clickable})}"><slot name="summary"></slot><gv-icon shape="${i}" class="expand"></gv-icon></div><slot name="details" class="details"></slot></div>`}}exports.GvExpandable=n,window.customElements.define("gv-expandable",n);

package/src/molecules/gv-expression-language.d.ts

@@ -0,0 +1,150 @@
+/**
+ * Expression Language component
+ *
+ * @fires gv-expression-language:input - input events with the `value` on `detail`
+ * @fires gv-expression-language:ready - event dispatch when component is ready
+ * @fires gv-expression-language:clipboard-copy - event dispatch when component the `value` has been copied to clipboard
+ *
+ * @attr {String} label - code language
+ * @attr {String} value - code content to be highlighted
+ * @attr {options} Object - options based on codemirror
+ * @attr {String} placeholder - an example value to display in the input when empty
+ * @attr {Number} rows - number of rows of the text element
+ * @attr {Boolean} large - for a large input (only if the field has one row)
+ * @attr {Boolean} medium - for a medium input (only if the field has one row) (Default)
+ * @attr {Boolean} small - for a small input (only if the field has one row)
+ * @attr {Object} grammar - The grammar for Expression Language support
+ *
+ * @attr {Boolean} [clipboard=false]- true if field has clipboard button
+ * @attr {Boolean} [autofocus=false] - true to put the focus on the input
+ * @attr {Boolean} [readonly=false] - true if field is readonly mode
+ */
+export class GvExpressionLanguage extends GvCode {
+    static get properties(): {
+        grammar: {
+            type: ObjectConstructor;
+        };
+        options: {
+            type: ObjectConstructor;
+        };
+        rows: {
+            type: NumberConstructor;
+        };
+        _error: {
+            type: StringConstructor;
+            attribute: boolean;
+        };
+        type: {
+            type: StringConstructor;
+            reflect: boolean;
+        };
+        large: {
+            type: BooleanConstructor;
+        };
+        medium: {
+            type: BooleanConstructor;
+        };
+        small: {
+            type: BooleanConstructor;
+        };
+        icon: {
+            type: StringConstructor;
+        };
+        iconLeft: {
+            type: StringConstructor;
+            attribute: string;
+        };
+        loading: {
+            type: BooleanConstructor;
+        };
+        min: {
+            type: NumberConstructor;
+        };
+        max: {
+            type: NumberConstructor;
+        };
+        autocomplete: {
+            type: StringConstructor;
+        };
+        clipboard: {
+            type: BooleanConstructor;
+        };
+        clickable: {
+            type: BooleanConstructor;
+        };
+        clearable: {
+            type: BooleanConstructor;
+        };
+        noSubmit: {
+            type: BooleanConstructor;
+            attribute: string;
+        };
+        pattern: {
+            type: StringConstructor;
+            reflect: boolean;
+        };
+        description: {
+            type: StringConstructor;
+        };
+        _type: {
+            type: StringConstructor;
+            attribute: boolean;
+        };
+        disabled: {
+            type: BooleanConstructor;
+            reflect: boolean;
+        };
+        required: {
+            type: BooleanConstructor;
+            reflect: boolean;
+        };
+        readonly: {
+            type: BooleanConstructor;
+            reflect: boolean;
+        };
+        skeleton: {
+            type: BooleanConstructor;
+        };
+        value: {
+            type: StringConstructor;
+            reflect: boolean;
+        };
+        label: {
+            type: StringConstructor;
+        };
+        title: {
+            type: StringConstructor;
+        };
+        name: {
+            type: StringConstructor;
+        };
+        placeholder: {
+            type: StringConstructor;
+        };
+        autofocus: {
+            type: BooleanConstructor;
+        };
+        invalid: {
+            type: BooleanConstructor;
+            reflect: boolean;
+        };
+        valid: {
+            type: BooleanConstructor;
+            reflect: boolean;
+        };
+    };
+    insertELKeymap(): import("@codemirror/state").Extension;
+    buildMethods(type: any): any;
+    getModelType(typeId: any): any;
+    isMap(typeId: any): boolean;
+    getEnum(typeId: any): any;
+    convertType(type: any): "text" | "variable" | "type" | "enum";
+    get expressionLanguageCompletionHandlers(): ({
+        run(completionContext: any): any;
+    } | {
+        expr: RegExp;
+        supportEL: boolean;
+        run(completionContext: any, match: any): any;
+    })[];
+}
+import { GvCode } from "../molecules/gv-code";