@gravitee/ui-components 3.25.3-typescript-50960c3 → 3.25.3-typescript-9d19b68

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

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

package/src/molecules/gv-expandable.js

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

package/src/molecules/gv-expression-language.js

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

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

@@ -1 +1,139 @@
-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);
+/*
+ * 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 { toSvg } 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 = 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);