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

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.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.js

@@ -1,270 +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 { GvCode } from '../molecules/gv-code';
-import { dispatchCustomEvent } from '../lib/events';
-import { pickedCompletion, startCompletion } from '@codemirror/autocomplete';
-import { keymap } from '@codemirror/view';
-import { EditorSelection, Prec } from '@codemirror/state';
-import { get } from 'object-path';
-
-/**
- * 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() {
-    return {
-      ...super.properties,
-      grammar: { type: Object },
-    };
-  }
-
-  firstUpdated() {
-    super.firstUpdated();
-    dispatchCustomEvent(this, 'ready', { currentTarget: this });
-  }
-
-  getExtensions() {
-    return [Prec.high(this.insertELKeymap())];
-  }
-
-  insertELKeymap() {
-    return keymap.of([
-      {
-        key: 'Ctrl-Shift-e',
-        mac: 'Cmd-Shift-e',
-        run(view) {
-          view.dispatch(
-            view.state.changeByRange((range) => ({
-              changes: [{ from: range.from, to: range.to, insert: '{#}' }],
-              range: EditorSelection.range(range.from + 2, range.from + 2),
-            })),
-          );
-          startCompletion(view);
-          return true;
-        },
-      },
-    ]);
-  }
-
-  buildMethods(type) {
-    const modelType = this.getModelType(type);
-    return modelType.methods.map(({ name, params = [], returnType }) => {
-      const command = `${name}()`;
-      const displayParams = params.map((p) => `${p.type} ${p.name}`);
-      const label = `${name}(${displayParams.join(', ')})`;
-      const detail = `return ${returnType}`;
-      return {
-        type: 'method',
-        command,
-        apply: (view, completion, from, to) => {
-          const anchor = from + name.length + 1;
-          view.dispatch({
-            changes: { from, to, insert: completion.command },
-            selection: { anchor },
-            userEvent: 'input.complete',
-            annotations: pickedCompletion.of(view),
-          });
-        },
-        label,
-        detail,
-      };
-    });
-  }
-
-  findBestAutocompleteHandler(completionContext) {
-    return this.expressionLanguageCompletionHandlers
-      .filter((handler) => (this.grammar != null && handler.supportEL === true) || handler.supportEL !== true)
-      .map((handler) => {
-        const match = handler.expr ? completionContext.matchBefore(handler.expr) : true;
-        return { handler, match };
-      })
-      .find(({ match, expr }) => match);
-  }
-
-  getModelType(typeId) {
-    if (this.grammar != null) {
-      return get(this.grammar, `_types.${typeId}`);
-    }
-    return null;
-  }
-
-  isMap(typeId) {
-    return ['Map', 'HttpHeaders', 'MultiValueMap'].includes(typeId);
-  }
-
-  getEnum(typeId) {
-    if (this.grammar != null) {
-      return get(this.grammar, `_enums.${typeId}`);
-    }
-    return [''];
-  }
-
-  convertType(type) {
-    if (type) {
-      const lowerType = type.toLowerCase();
-      if (lowerType === 'string') {
-        return 'text';
-      } else if (lowerType === 'httpheaders' || lowerType === 'multivaluemap') {
-        return 'type';
-      } else if (lowerType === 'int' || lowerType === 'long') {
-        return 'variable';
-      } else if (lowerType.includes('[]')) {
-        return 'enum';
-      }
-    }
-    return 'variable';
-  }
-
-  get expressionLanguageCompletionHandlers() {
-    return [
-      {
-        expr: /{#[a-z]*/,
-        supportEL: true,
-        run(completionContext, match) {
-          const prefix = match.text.replaceAll('{#', '');
-          const from = completionContext.pos - prefix.length;
-          const options = Object.keys(this.grammar)
-            .filter((command) => !command.startsWith('_') && command.startsWith(prefix))
-            .map((command) => {
-              return {
-                type: 'variable',
-                command,
-                apply: command,
-                label: command,
-              };
-            });
-          return { from, options };
-        },
-      },
-      {
-        expr: /{#[a-z]*.[a-zA-Z]*/,
-        supportEL: true,
-        run(completionContext, match) {
-          const tokens = match.text.split('.');
-          const key = tokens[0].replaceAll('{#', '');
-          const prefix = tokens[1];
-          let candidate = this.grammar[key][prefix];
-          let options = [];
-          let from = completionContext.pos;
-          if (candidate) {
-            if (this.isMap(candidate._type)) {
-              options = this.getEnum(candidate._type).map((value) => {
-                const type = this.convertType(candidate._type);
-                const command = `['${value}'][0]`;
-                return {
-                  type,
-                  command,
-                  apply: command,
-                  label: value,
-                };
-              });
-            }
-          } else {
-            from -= prefix.length;
-            candidate = this.grammar[key];
-            if (candidate._type) {
-              options = this.buildMethods(candidate._type);
-            } else {
-              options = Object.keys(candidate)
-                .filter((command) => !command.startsWith('_') && command.startsWith(prefix))
-                .map((command) => ({
-                  type: this.convertType(candidate[command]._type),
-                  command,
-                  apply: command,
-                  label: command,
-                }));
-            }
-          }
-          return { from, options };
-        },
-      },
-      {
-        expr: /{#[a-z]*.[a-zA-Z]*.[a-zA-Z]*/,
-        supportEL: true,
-        run(completionContext, match) {
-          const tokens = match.text.split('.');
-          const key = tokens[0].replaceAll('{#', '');
-          const word = tokens[1];
-          const prefix = tokens[2];
-          const candidate = this.grammar[key][word];
-          let options = [];
-          let from = completionContext.pos;
-          if (candidate) {
-            if (this.isMap(candidate._type)) {
-              options = this.getEnum(candidate._type)
-                .filter((command) => !command.startsWith('_') && command.startsWith(prefix))
-                .map((label) => {
-                  const type = this.convertType(candidate._type);
-                  return {
-                    type,
-                    command: `['${label}'][0]`,
-                    apply(view, completion, _from, to) {
-                      from = _from - prefix.length - 1;
-                      view.dispatch({
-                        changes: { from, to, insert: completion.command },
-                        selection: { anchor: from + completion.command.length },
-                        userEvent: 'input.complete',
-                        annotations: pickedCompletion.of(view),
-                      });
-                    },
-                    label,
-                  };
-                });
-            } else {
-              if (candidate._type) {
-                options = this.buildMethods(candidate._type);
-              } else {
-                from -= prefix.length;
-                options = Object.keys(candidate)
-                  .filter((command) => command.startsWith(prefix))
-                  .map((command) => {
-                    return {
-                      type: this.convertType(candidate[command]._type),
-                      command,
-                      apply: command,
-                      label: command,
-                    };
-                  });
-              }
-            }
-          }
-          return { from, options };
-        },
-      },
-      this.defaultCompletionHandler,
-    ];
-  }
-}
-
-window.customElements.define('gv-expression-language', GvExpressionLanguage);
+Object.defineProperty(exports,"__esModule",{value:!0}),exports.GvExpressionLanguage=void 0;const e=require("../molecules/gv-code"),t=require("../lib/events"),r=require("@codemirror/autocomplete"),a=require("@codemirror/view"),s=require("@codemirror/state"),n=require("object-path");class p extends e.GvCode{static get properties(){return{...super.properties,grammar:{type:Object}}}firstUpdated(){super.firstUpdated(),(0,t.dispatchCustomEvent)(this,"ready",{currentTarget:this})}getExtensions(){return[s.Prec.high(this.insertELKeymap())]}insertELKeymap(){return a.keymap.of([{key:"Ctrl-Shift-e",mac:"Cmd-Shift-e",run:e=>(e.dispatch(e.state.changeByRange((e=>({changes:[{from:e.from,to:e.to,insert:"{#}"}],range:s.EditorSelection.range(e.from+2,e.from+2)})))),(0,r.startCompletion)(e),!0)}])}buildMethods(e){return this.getModelType(e).methods.map((({name:e,params:t=[],returnType:a})=>{const s=`${e}()`,n=t.map((e=>`${e.type} ${e.name}`));return{type:"method",command:s,apply:(t,a,s,n)=>{const p=s+e.length+1;t.dispatch({changes:{from:s,to:n,insert:a.command},selection:{anchor:p},userEvent:"input.complete",annotations:r.pickedCompletion.of(t)})},label:`${e}(${n.join(", ")})`,detail:`return ${a}`}}))}findBestAutocompleteHandler(e){return this.expressionLanguageCompletionHandlers.filter((e=>null!=this.grammar&&!0===e.supportEL||!0!==e.supportEL)).map((t=>({handler:t,match:!t.expr||e.matchBefore(t.expr)}))).find((({match:e,expr:t})=>e))}getModelType(e){return null!=this.grammar?(0,n.get)(this.grammar,`_types.${e}`):null}isMap(e){return["Map","HttpHeaders","MultiValueMap"].includes(e)}getEnum(e){return null!=this.grammar?(0,n.get)(this.grammar,`_enums.${e}`):[""]}convertType(e){if(e){const t=e.toLowerCase();if("string"===t)return"text";if("httpheaders"===t||"multivaluemap"===t)return"type";if("int"===t||"long"===t)return"variable";if(t.includes("[]"))return"enum"}return"variable"}get expressionLanguageCompletionHandlers(){return[{expr:/{#[a-z]*/,supportEL:!0,run(e,t){const r=t.text.replaceAll("{#","");return{from:e.pos-r.length,options:Object.keys(this.grammar).filter((e=>!e.startsWith("_")&&e.startsWith(r))).map((e=>({type:"variable",command:e,apply:e,label:e})))}}},{expr:/{#[a-z]*.[a-zA-Z]*/,supportEL:!0,run(e,t){const r=t.text.split("."),a=r[0].replaceAll("{#",""),s=r[1];let n=this.grammar[a][s],p=[],i=e.pos;return n?this.isMap(n._type)&&(p=this.getEnum(n._type).map((e=>{const t=`['${e}'][0]`;return{type:this.convertType(n._type),command:t,apply:t,label:e}}))):(i-=s.length,n=this.grammar[a],p=n._type?this.buildMethods(n._type):Object.keys(n).filter((e=>!e.startsWith("_")&&e.startsWith(s))).map((e=>({type:this.convertType(n[e]._type),command:e,apply:e,label:e})))),{from:i,options:p}}},{expr:/{#[a-z]*.[a-zA-Z]*.[a-zA-Z]*/,supportEL:!0,run(e,t){const a=t.text.split("."),s=a[0].replaceAll("{#",""),n=a[1],p=a[2],i=this.grammar[s][n];let o=[],l=e.pos;return i&&(this.isMap(i._type)?o=this.getEnum(i._type).filter((e=>!e.startsWith("_")&&e.startsWith(p))).map((e=>({type:this.convertType(i._type),command:`['${e}'][0]`,apply(e,t,a,s){l=a-p.length-1,e.dispatch({changes:{from:l,to:s,insert:t.command},selection:{anchor:l+t.command.length},userEvent:"input.complete",annotations:r.pickedCompletion.of(e)})},label:e}))):i._type?o=this.buildMethods(i._type):(l-=p.length,o=Object.keys(i).filter((e=>e.startsWith(p))).map((e=>({type:this.convertType(i[e]._type),command:e,apply:e,label:e}))))),{from:l,options:o}}},this.defaultCompletionHandler]}}exports.GvExpressionLanguage=p,window.customElements.define("gv-expression-language",p);

package/src/molecules/gv-identity-picture.js

@@ -1,148 +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';
-import jdenticon from 'jdenticon';
-import { skeleton } from '../styles/skeleton';
-import { styleMap } from 'lit/directives/style-map';
-import '../atoms/gv-image';
-
-/**
- * Identity picture component
- *
- * ## Details
- * * has @theme facet
- *
- * @attr {String} picture - the picture
- * @attr {String} display_name - the display_name of the picture
- * @attr {Boolean} notification - true to display a notification info
- * @attr {Boolean} rounded - true for rounded image/icon
- *
- * @cssprop {Color} [--gv-identity-picture-notification--bgc=var(--gv-theme-color-light, #86c3d0)] - Notification background color
- */
-export class GvIdentityPicture extends LitElement {
-  static get properties() {
-    return {
-      picture: { type: String },
-      display_name: { type: String },
-      _error: { type: Boolean, attribute: false },
-      notification: { type: Boolean },
-      rounded: { type: Boolean, reflect: true },
-      skeleton: { type: Boolean },
-    };
-  }
-
-  static get styles() {
-    return [
-      skeleton,
-      // language=CSS
-      css`
-        :host {
-          display: block;
-          position: relative;
-        }
-
-        div {
-          text-align: center;
-        }
-
-        svg,
-        .skeleton {
-          width: auto;
-          height: auto;
-          max-width: 100%;
-          max-height: 100%;
-        }
-
-        gv-image {
-          width: 100%;
-          height: 100%;
-          --gv-image--of: contain;
-        }
-
-        :host([rounded]) gv-image,
-        :host([rounded]) svg {
-          border: 2px solid var(--gv-theme-neutral-color-lighter, #fafafa);
-          border-radius: 50%;
-          box-sizing: border-box;
-          --gv-image--of: cover;
-        }
-
-        .notification {
-          position: absolute;
-          width: 8px;
-          height: 8px;
-          background-clip: padding-box;
-          border-radius: 50%;
-          background-color: var(--gv-identity-picture-notification--bgc, var(--gv-theme-color-light, #86c3d0));
-        }
-      `,
-    ];
-  }
-
-  _onError() {
-    this._error = true;
-  }
-
-  _toNumber(size) {
-    return parseInt(size.replace('px', ''), 10);
-  }
-
-  _onLoaded() {
-    this._error = false;
-  }
-
-  _getMaxSize(width, height) {
-    return Math.min(this._toNumber(width), this._toNumber(height));
-  }
-
-  updated(properties) {
-    if (properties.has('picture')) {
-      this._error = false;
-    }
-  }
-
-  render() {
-    const { width, height } = window.getComputedStyle(this);
-    if ((!this.picture || this._error) && width && height) {
-      const size = this._getMaxSize(width, height);
-      const container = document.createElement('div');
-      if (this.skeleton) {
-        container.classList.add('skeleton');
-      }
-      container.title = this.display_name;
-      container.innerHTML = jdenticon.toSvg(this.display_name, size, { backColor: '#FFF' });
-      if (this.notification) {
-        const notification = document.createElement('span');
-        notification.className = 'notification';
-        notification.style.left = width;
-        container.appendChild(notification);
-      }
-      return html`${container}`;
-    }
-    return html`
-      <gv-image
-        src="${this.picture}"
-        alt="${this.display_name}"
-        title="${this.display_name}"
-        @error="${this._onError}"
-        @gv-image:loaded="${this._onLoaded}"
-      ></gv-image>
-      ${this.notification ? html`<span class="notification" style="${styleMap({ left: width })}"></span>` : ''}
-    `;
-  }
-}
-
-window.customElements.define('gv-identity-picture', GvIdentityPicture);
+var e=function(e){return e&&e.__esModule?e:{default:e}};Object.defineProperty(exports,"__esModule",{value:!0}),exports.GvIdentityPicture=void 0;const t=require("lit"),i=e(require("jdenticon")),r=require("../styles/skeleton"),o=require("lit/directives/style-map");require("../atoms/gv-image");class n extends t.LitElement{static get properties(){return{picture:{type:String},display_name:{type:String},_error:{type:Boolean,attribute:!1},notification:{type:Boolean},rounded:{type:Boolean,reflect:!0},skeleton:{type:Boolean}}}static get styles(){return[r.skeleton,t.css`:host{display:block;position:relative}div{text-align:center}.skeleton,svg{width:auto;height:auto;max-width:100%;max-height:100%}gv-image{width:100%;height:100%;--gv-image--of:contain}:host([rounded]) gv-image,:host([rounded]) svg{border:2px solid var(--gv-theme-neutral-color-lighter,#fafafa);border-radius:50%;box-sizing:border-box;--gv-image--of:cover}.notification{position:absolute;width:8px;height:8px;background-clip:padding-box;border-radius:50%;background-color:var(--gv-identity-picture-notification--bgc,var(--gv-theme-color-light,#86c3d0))}`]}_onError(){this._error=!0}_toNumber(e){return parseInt(e.replace("px",""),10)}_onLoaded(){this._error=!1}_getMaxSize(e,t){return Math.min(this._toNumber(e),this._toNumber(t))}updated(e){e.has("picture")&&(this._error=!1)}render(){const{width:e,height:r}=window.getComputedStyle(this);if((!this.picture||this._error)&&e&&r){const o=this._getMaxSize(e,r),n=document.createElement("div");if(this.skeleton&&n.classList.add("skeleton"),n.title=this.display_name,n.innerHTML=i.default.toSvg(this.display_name,o,{backColor:"#FFF"}),this.notification){const t=document.createElement("span");t.className="notification",t.style.left=e,n.appendChild(t)}return t.html`${n}`}return t.html`<gv-image src="${this.picture}" alt="${this.display_name}" title="${this.display_name}" @error="${this._onError}" @gv-image:loaded="${this._onLoaded}"></gv-image>${this.notification?t.html`<span class="notification" style="${(0,o.styleMap)({left:e})}"></span>`:""}`}}exports.GvIdentityPicture=n,window.customElements.define("gv-identity-picture",n);