@gravitee/ui-components 3.25.3-typescript-fdacf14 → 3.25.3-typescript-493e1dd

package/src/lib/text-format.js

@@ -1 +1,65 @@
-var e=Object.create?function(e,t,o,r){void 0===r&&(r=o),Object.defineProperty(e,r,{enumerable:!0,get:function(){return t[o]}})}:function(e,t,o,r){void 0===r&&(r=o),e[r]=t[o]},t=Object.create?function(e,t){Object.defineProperty(e,"default",{enumerable:!0,value:t})}:function(e,t){e.default=t},o=function(o){if(o&&o.__esModule)return o;var r={};if(null!=o)for(var i in o)"default"!==i&&Object.prototype.hasOwnProperty.call(o,i)&&e(r,o,i);return t(r,o),r};function r(){return null==window._gvAsciidoctor?Promise.all([Promise.resolve().then((()=>o(require("asciidoctor")))),Promise.resolve().then((()=>o(require("asciidoctor-highlight.js"))))]).then((([e,t])=>(window._gvAsciidoctor=e.default(),t.default.register(window._gvAsciidoctor.Extensions),i(e.default,t.default)))):Promise.resolve(window._gvAsciidoctor)}function i(e,t){return null==window._gvAsciidoctor&&(window._gvAsciidoctor=e(),t.register(window._gvAsciidoctor.Extensions)),window._gvAsciidoctor}Object.defineProperty(exports,"__esModule",{value:!0}),exports.toDom=exports.setAsciiDoctorAsGlobal=exports.loadAsciiDoctor=void 0,exports.loadAsciiDoctor=r,exports.setAsciiDoctorAsGlobal=i,exports.toDom=function(e,t="adoc",o=!1){return r().then((r=>{if(e){let i="";if("adoc"!==t)throw new Error(`Library not found for type : '${t}' | ${e}`);i=r.convert(e,{attributes:{showtitle:!0,"source-highlighter":"highlightjs-ext"}});const n=document.createElement("div");n.innerHTML=i,n.style.width="100%",n.style.maxWidth="1000px",n.style.margin="0 auto",n.classList.add("markdown-body"),o&&n.classList.add("small");const s=n.querySelector("h1");let c="";return s&&(c=s.textContent),{title:c,element: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.
+ */
+export function loadAsciiDoctor() {
+    if (window._gvAsciidoctor == null) {
+        return Promise.all([import('asciidoctor'), import('asciidoctor-highlight.js')]).then(([asciidoctor, highlightJsExt]) => {
+            window._gvAsciidoctor = asciidoctor.default();
+            highlightJsExt.default.register(window._gvAsciidoctor.Extensions);
+            return setAsciiDoctorAsGlobal(asciidoctor.default, highlightJsExt.default);
+        });
+    }
+    return Promise.resolve(window._gvAsciidoctor);
+}
+export function setAsciiDoctorAsGlobal(asciidoctor, highlightJsExt) {
+    if (window._gvAsciidoctor == null) {
+        window._gvAsciidoctor = asciidoctor();
+        highlightJsExt.register(window._gvAsciidoctor.Extensions);
+    }
+    return window._gvAsciidoctor;
+}
+export function toDom(text, type = 'adoc', small = false) {
+    return loadAsciiDoctor().then((asciidoctor) => {
+        if (text) {
+            let innerHTML = '';
+            if (type === 'adoc') {
+                innerHTML = asciidoctor.convert(text, {
+                    attributes: {
+                        showtitle: true,
+                        'source-highlighter': 'highlightjs-ext',
+                    },
+                });
+            }
+            else {
+                throw new Error(`Library not found for type : '${type}' | ${text}`);
+            }
+            const element = document.createElement('div');
+            element.innerHTML = innerHTML;
+            element.style.width = '100%';
+            element.style.maxWidth = '1000px';
+            element.style.margin = '0 auto';
+            element.classList.add('markdown-body');
+            if (small) {
+                element.classList.add('small');
+            }
+            const titleElement = element.querySelector('h1');
+            let title = '';
+            if (titleElement) {
+                title = titleElement.textContent;
+            }
+            return { title, element };
+        }
+    });
+}

package/src/lib/theme.js

@@ -1 +1,60 @@
-function e(e,o,t){setTimeout((()=>{const t=o?`url(${o})`:"none";document.documentElement.style.setProperty(e,t)}),0)}function o(e,o){let t=document.querySelector("link[rel~='icon']");t||(t=document.createElement("link"),t.rel="icon",document.getElementsByTagName("head")[0].appendChild(t)),t.href=e||o}Object.defineProperty(exports,"__esModule",{value:!0}),exports.getApplicationTypeIcon=exports.updateFavicon=exports.updateImage=exports.applyTheme=void 0,exports.applyTheme=function(t){if(t){const n=t._links?t._links.logo:t.logo,a=t._links?t._links.optionalLogo:t.optionalLogo,i=t._links?t._links.backgroundImage:t.backgroundImage;e("--gv-theme-logo",n),e("--gv-theme-optional-logo",a),e("--gv-theme-homepage-background-image",i);o(t._links?t._links.favicon:t.favicon,"images/gravitee-favicon.png"),t.definition.data.forEach((e=>{e.css.forEach((e=>{document.documentElement.style.setProperty(e.name,e.value)}))}))}},exports.updateImage=e,exports.updateFavicon=o,exports.getApplicationTypeIcon=function(e){switch(e.toLowerCase()){case"browser":case"web":return"devices:laptop";case"native":return"devices:android";case"backend_to_backend":return"devices:server";default:return"layout:layout-top-panel-2"}};
+/*
+ * 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.
+ */
+export function applyTheme(theme) {
+    if (theme) {
+        const logo = theme._links ? theme._links.logo : theme.logo;
+        const optionalLogo = theme._links ? theme._links.optionalLogo : theme.optionalLogo;
+        const backgroundImage = theme._links ? theme._links.backgroundImage : theme.backgroundImage;
+        updateImage('--gv-theme-logo', logo, `url('/images/gravitee-logo-cyan.svg')`);
+        updateImage('--gv-theme-optional-logo', optionalLogo, `url('/images/gravitee-logo-white.svg')`);
+        updateImage('--gv-theme-homepage-background-image', backgroundImage, `none`);
+        const favicon = theme._links ? theme._links.favicon : theme.favicon;
+        updateFavicon(favicon, 'images/gravitee-favicon.png');
+        theme.definition.data.forEach((component) => {
+            component.css.forEach((cssProperty) => {
+                document.documentElement.style.setProperty(cssProperty.name, cssProperty.value);
+            });
+        });
+    }
+}
+export function updateImage(name, value, defaultValue) {
+    setTimeout(() => {
+        const propertyValue = value ? `url(${value})` : 'none';
+        document.documentElement.style.setProperty(name, propertyValue);
+    }, 0);
+}
+export function updateFavicon(value, defaultValue) {
+    let link = document.querySelector("link[rel~='icon']");
+    if (!link) {
+        link = document.createElement('link');
+        link.rel = 'icon';
+        document.getElementsByTagName('head')[0].appendChild(link);
+    }
+    link.href = value || defaultValue;
+}
+export function getApplicationTypeIcon(type) {
+    switch (type.toLowerCase()) {
+        case 'browser':
+        case 'web':
+            return 'devices:laptop';
+        case 'native':
+            return 'devices:android';
+        case 'backend_to_backend':
+            return 'devices:server';
+        default:
+            return 'layout:layout-top-panel-2';
+    }
+}

package/src/lib/utils.js

@@ -1 +1,106 @@
-function e(e){return null!=e&&"object"==typeof e}Object.defineProperty(exports,"__esModule",{value:!0}),exports.isObject=exports.deepEqual=exports.uuid=exports.deepClone=exports.flatObject=exports.flatDeep=exports.appendDraggableImage=exports.isSameRoutes=exports.truncate=void 0,exports.truncate=function(e,t=250,r="..."){return e&&e.length>t?`${e.substring(0,t)}${r}`:e},exports.isSameRoutes=function(e,t){return!(!e||!t)&&JSON.stringify(e.map((e=>e.path+e.active)))===JSON.stringify(t.map((e=>e.path+e.active)))},exports.appendDraggableImage=function(e,t=100,r="communication:shield-thunder"){const n=document.createElement("div");if(n.style.position="fixed",n.style.left="-999px",n.style.top="-999px",n.style.zIndex=1e3,null!=e){const r=new Image;r.src=e,r.style=`width:${t}px;height:${t}px`,n.appendChild(r)}else{const e=document.createElementNS("http://www.w3.org/2000/svg","svg"),t=document.createElementNS("http://www.w3.org/2000/svg","use");t.setAttributeNS("http://www.w3.org/1999/xlink","xlink:href",r),e.appendChild(t),n.appendChild(e)}return document.body.appendChild(n),n},exports.flatDeep=function e(t){return t.reduce(((t,r)=>t.concat(Array.isArray(r)?e(r):r)),[])},exports.flatObject=function e(t,r=""){return Object.keys(t).reduce(((n,o)=>{const s=r.length?r+".":"";return Array.isArray(t[o])?n[s+o]=t[o]:"object"==typeof t[o]?Object.assign(n,e(t[o],s+o)):n[s+o]=t[o],n}),{})},exports.deepClone=function(e){return e?JSON.parse(JSON.stringify(e)):e},exports.uuid=function(){return"xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx".replace(/[xy]/g,(e=>{const t=16*Math.random()|0;return("x"===e?t:3&t|8).toString(16)}))},exports.deepEqual=function t(r,n,o=!1){if(Array.isArray(r)&&Array.isArray(n)&&o){if(r.length!==n.length)return!1;const e=new Set([...r,...n]);for(const t of e){if(r.filter((e=>e===t)).length!==n.filter((e=>e===t)).length)return!1}return!0}const s=null!=r?Object.keys(r):[],x=null!=n?Object.keys(n):[];if(s.length!==x.length)return!1;for(const o of s){const s=r[o],x=n[o],i=e(s)&&e(x);if(i&&!t(s,x)||!i&&s!==x)return!1}return!0},exports.isObject=e;
+/*
+ * 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.
+ */
+export function truncate(text, limit = 250, suffix = '...') {
+    return text && text.length > limit ? `${text.substring(0, limit)}${suffix}` : text;
+}
+export function isSameRoutes(routes, futureRoutes) {
+    if (routes && futureRoutes) {
+        return JSON.stringify(routes.map((r) => r.path + r.active)) === JSON.stringify(futureRoutes.map((r) => r.path + r.active));
+    }
+    return false;
+}
+export function appendDraggableImage(src, size = 100, defaultIcon = 'communication:shield-thunder') {
+    // Usefull when image src is svg
+    const div = document.createElement('div');
+    div.style.position = 'fixed';
+    div.style.left = '-999px';
+    div.style.top = '-999px';
+    div.style.zIndex = 1000;
+    if (src != null) {
+        const image = new Image();
+        image.src = src;
+        image.style = `width:${size}px;height:${size}px`;
+        div.appendChild(image);
+    }
+    else {
+        const svgElem = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
+        const useElem = document.createElementNS('http://www.w3.org/2000/svg', 'use');
+        useElem.setAttributeNS('http://www.w3.org/1999/xlink', 'xlink:href', defaultIcon);
+        svgElem.appendChild(useElem);
+        div.appendChild(svgElem);
+    }
+    document.body.appendChild(div);
+    return div;
+}
+export function flatDeep(arr) {
+    return arr.reduce((acc, val) => acc.concat(Array.isArray(val) ? flatDeep(val) : val), []);
+}
+export function flatObject(obj, prefix = '') {
+    return Object.keys(obj).reduce((acc, k) => {
+        const pre = prefix.length ? prefix + '.' : '';
+        if (Array.isArray(obj[k]))
+            acc[pre + k] = obj[k];
+        else if (typeof obj[k] === 'object')
+            Object.assign(acc, flatObject(obj[k], pre + k));
+        else
+            acc[pre + k] = obj[k];
+        return acc;
+    }, {});
+}
+export function deepClone(obj) {
+    if (obj) {
+        return JSON.parse(JSON.stringify(obj));
+    }
+    return obj;
+}
+export function uuid() {
+    return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, (c) => {
+        const r = (Math.random() * 16) | 0;
+        const v = c === 'x' ? r : (r & 0x3) | 0x8;
+        return v.toString(16);
+    });
+}
+export function deepEqual(a, b, withoutOrder = false) {
+    if (Array.isArray(a) && Array.isArray(b) && withoutOrder) {
+        if (a.length !== b.length)
+            return false;
+        const uniqueValues = new Set([...a, ...b]);
+        for (const v of uniqueValues) {
+            const aCount = a.filter((e) => e === v).length;
+            const bCount = b.filter((e) => e === v).length;
+            if (aCount !== bCount)
+                return false;
+        }
+        return true;
+    }
+    const keys1 = a != null ? Object.keys(a) : [];
+    const keys2 = b != null ? Object.keys(b) : [];
+    if (keys1.length !== keys2.length) {
+        return false;
+    }
+    for (const key of keys1) {
+        const val1 = a[key];
+        const val2 = b[key];
+        const areObjects = isObject(val1) && isObject(val2);
+        if ((areObjects && !deepEqual(val1, val2)) || (!areObjects && val1 !== val2)) {
+            return false;
+        }
+    }
+    return true;
+}
+export function isObject(object) {
+    return object != null && typeof object === 'object';
+}

package/src/mixins/chart-element.js

@@ -1 +1,153 @@
-var e=function(e){return e&&e.__esModule?e:{default:e}};Object.defineProperty(exports,"__esModule",{value:!0}),exports.ChartElement=void 0;const t=require("lit"),i=require("../lib/i18n"),r=e(require("highcharts")),s=e(require("highcharts/highmaps")),n=require("lit/directives/cache"),a=require("./with-skeleton-attribute");exports.ChartElement=function(e){return class extends((0,a.withSkeletonAttribute)(e)){static get properties(){return{series:{type:Array},options:{type:Array},_additionalOptions:{type:Object,attribute:!1},_series:{type:Array,attribute:!1}}}static get styles(){return[...super.styles,t.css`:host{box-sizing:border-box;display:flex;height:100%;width:100%;flex-direction:column;justify-content:center;align-content:center}.container{flex:1}.tooltip{display:grid}.tooltip-2{grid-template-columns:repeat(2,1fr)}.tooltip-3{grid-template-columns:repeat(3,1fr)}.tooltip-4{grid-template-columns:repeat(4,1fr)}.tooltip-5{grid-template-columns:repeat(5,1fr)}`]}constructor(){super(),this._skeletonAttribute="series",this._eventListener=function(){for(let e=0;e<r.default.charts.length;e++)r.default.charts[e].reflow()}}connectedCallback(){super.connectedCallback(),window.addEventListener("resize",this._eventListener)}disconnectedCallback(){super.disconnectedCallback(),window.removeEventListener("resize",this._eventListener)}async getOptions(){}updated(e){super.updated(e),e.has("_series")&&this.getOptions().then((e=>{this._additionalOptions=e}))}render(){if(this._error)return t.html`<div class="error">${(0,i.i18n)("gv-chart.error")}</div>`;if(this._empty)return t.html`<div class="empty">${(0,i.i18n)("gv-chart.empty")}</div>`;const e=document.createElement("div");if(e.id="container",e.className=this._skeleton||null==this._additionalOptions?"skeleton":"",e.classList.add("container"),this._additionalOptions){const t={chart:{height:"100%",width:"100%"},credits:{enabled:!1},title:{text:""},time:{useUTC:!1},...this._additionalOptions};this._series&&this._series.values&&this._series.values[0]&&this._series.values[0].data&&(t.series=this._series&&this._series.values),setTimeout((()=>{t.chart.map?s.default.mapChart(e,t):r.default.chart(e,t)}))}return t.html`${(0,n.cache)(e)}`}}};
+/*
+ * 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 { html, css } from 'lit';
+import { i18n } from '../lib/i18n';
+import Highcharts from 'highcharts';
+import Highmaps from 'highcharts/highmaps';
+import { cache } from 'lit/directives/cache';
+import { withSkeletonAttribute } from './with-skeleton-attribute';
+/**
+ * This is a mixin for ChartElement
+ * @mixinFunction
+ */
+export function ChartElement(ParentClass) {
+    /**
+     * @mixinClass
+     */
+    return class extends withSkeletonAttribute(ParentClass) {
+        static get properties() {
+            return {
+                /** @required */
+                series: { type: Array },
+                options: { type: Array },
+                _additionalOptions: { type: Object, attribute: false },
+                _series: { type: Array, attribute: false },
+            };
+        }
+        static get styles() {
+            return [
+                ...super.styles,
+                // language=CSS
+                css `
+          :host {
+            box-sizing: border-box;
+            display: flex;
+            height: 100%;
+            width: 100%;
+            flex-direction: column;
+            justify-content: center;
+            align-content: center;
+          }
+
+          .container {
+            flex: 1;
+          }
+
+          .tooltip {
+            display: grid;
+          }
+
+          .tooltip-2 {
+            grid-template-columns: repeat(2, 1fr);
+          }
+
+          .tooltip-3 {
+            grid-template-columns: repeat(3, 1fr);
+          }
+
+          .tooltip-4 {
+            grid-template-columns: repeat(4, 1fr);
+          }
+
+          .tooltip-5 {
+            grid-template-columns: repeat(5, 1fr);
+          }
+        `,
+            ];
+        }
+        constructor() {
+            super();
+            this._skeletonAttribute = 'series';
+            this._eventListener = function eventListener() {
+                for (let i = 0; i < Highcharts.charts.length; i++) {
+                    Highcharts.charts[i].reflow();
+                }
+            };
+        }
+        connectedCallback() {
+            super.connectedCallback();
+            window.addEventListener('resize', this._eventListener);
+        }
+        disconnectedCallback() {
+            super.disconnectedCallback();
+            window.removeEventListener('resize', this._eventListener);
+        }
+        async getOptions() { }
+        updated(changedProperties) {
+            super.updated(changedProperties);
+            if (changedProperties.has('_series')) {
+                this.getOptions().then((options) => {
+                    this._additionalOptions = options;
+                });
+            }
+        }
+        render() {
+            if (this._error) {
+                return html ` <div class="error">${i18n('gv-chart.error')}</div>`;
+            }
+            if (this._empty) {
+                return html ` <div class="empty">${i18n('gv-chart.empty')}</div>`;
+            }
+            const container = document.createElement('div');
+            container.id = 'container';
+            container.className = this._skeleton || this._additionalOptions == null ? 'skeleton' : '';
+            container.classList.add('container');
+            if (this._additionalOptions) {
+                const options = {
+                    ...{
+                        chart: {
+                            height: '100%',
+                            width: '100%',
+                        },
+                        credits: {
+                            enabled: false,
+                        },
+                        title: {
+                            text: '',
+                        },
+                        time: {
+                            useUTC: false,
+                        },
+                    },
+                    ...this._additionalOptions,
+                };
+                const hasData = this._series && this._series.values && this._series.values[0] && this._series.values[0].data;
+                if (hasData) {
+                    options.series = this._series && this._series.values;
+                }
+                setTimeout(() => {
+                    if (options.chart.map) {
+                        Highmaps.mapChart(container, options);
+                    }
+                    else {
+                        Highcharts.chart(container, options);
+                    }
+                });
+            }
+            return html `${cache(container)}`;
+        }
+    };
+}

package/src/mixins/input-element.js

@@ -1 +1,136 @@
-Object.defineProperty(exports,"__esModule",{value:!0}),exports.InputElement=void 0;const t=require("lit");exports.InputElement=function(e){return class extends e{static get properties(){return{disabled:{type:Boolean,reflect:!0},required:{type:Boolean,reflect:!0},readonly:{type:Boolean,reflect:!0},skeleton:{type:Boolean},value:{type:String,reflect:!0},label:{type:String},title:{type:String},name:{type:String},placeholder:{type:String},description:{type:String},autofocus:{type:Boolean},invalid:{type:Boolean,reflect:!0},valid:{type:Boolean,reflect:!0}}}static get styles(){return[t.css`:host{box-sizing:border-box;margin:.2rem;display:block}:host([invalid]) :not(.clipboard) .box-icon-left,:host([invalid]) :not(.clipboard) .input,:host([invalid]) :not(.clipboard) ::slotted(.input),:host([invalid]) :not(.clipboard) input,:host([invalid]) :not(.clipboard) select,:host([invalid]) :not(.clipboard) textarea{box-shadow:inset 3px 0 0 var(--gv-input-invalid--bxshc,var(--gv-theme-color-error,#da1a1b))}:host([readonly]) .input,:host([readonly]) .textarea,:host([readonly]) :not(.clipboard) ::slotted(.input),:host([readonly]) :not(.clipboard) input,:host([readonly]) :not(.clipboard) select{border-left:1px solid var(--gv-input--bdc,var(--gv-theme-neutral-color-dark,#d9d9d9))}:host([readonly]) input::placeholder{color:transparent}`]}constructor(){super(),this._id=`gv-input-${(new Date).getTime()}`,this.valid=!0,this.invalid=!1}updateState(t){this.required&&!this.readonly?this.setValidity(null==t||0===t.length||"string"==typeof t&&""===t.trim(),"field is required"):this.setValidity()}setValidity(t=!1,e=""){const i=this.getInputElement();i&&i.setCustomValidity&&(t?(null!=e&&""!==e.trim()||(e="field is not valid"),i.setCustomValidity(e)):i.setCustomValidity(""),i.reportValidity()),this.invalid=t,this.valid=!this.invalid}firstUpdated(){if(this.autofocus){null!=this.getInputElement()&&this.getInputElement().focus()}this.updateState(this.value)}updated(t){t.has("value")&&this.updateState(this.value)}getInputElement(){return this.shadowRoot?this.shadowRoot.querySelector("input"):null}get offsetHeight(){if(null!=this.description){const t=this.shadowRoot.querySelector(".description");if(null!=t)return super.offsetHeight-t.offsetHeight}return super.offsetHeight}renderLabel(){return this.label?t.html`<label for="${this.id}" title="${this.label}">${this.label}</label>`:""}}};
+/*
+ * 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 } from 'lit';
+export function InputElement(ParentClass) {
+    /**
+     * @mixinClass
+     */
+    return class extends ParentClass {
+        static get properties() {
+            return {
+                disabled: { type: Boolean, reflect: true },
+                required: { type: Boolean, reflect: true },
+                readonly: { type: Boolean, reflect: true },
+                skeleton: { type: Boolean },
+                value: { type: String, reflect: true },
+                label: { type: String },
+                title: { type: String },
+                name: { type: String },
+                placeholder: { type: String },
+                description: { type: String },
+                autofocus: { type: Boolean },
+                invalid: { type: Boolean, reflect: true },
+                valid: { type: Boolean, reflect: true },
+            };
+        }
+        static get styles() {
+            return [
+                // language=CSS
+                css `
+          :host {
+            box-sizing: border-box;
+            margin: 0.2rem;
+            display: block;
+          }
+
+          :host([invalid]) :not(.clipboard) input,
+          :host([invalid]) :not(.clipboard) ::slotted(.input),
+          :host([invalid]) :not(.clipboard) .box-icon-left,
+          :host([invalid]) :not(.clipboard) textarea,
+          :host([invalid]) :not(.clipboard) select,
+          :host([invalid]) :not(.clipboard) .input {
+            box-shadow: inset 3px 0 0 var(--gv-input-invalid--bxshc, var(--gv-theme-color-error, #da1a1b));
+          }
+
+          :host([readonly]) :not(.clipboard) input,
+          :host([readonly]) :not(.clipboard) ::slotted(.input),
+          :host([readonly]) .textarea,
+          :host([readonly]) :not(.clipboard) select,
+          :host([readonly]) .input {
+            border-left: 1px solid var(--gv-input--bdc, var(--gv-theme-neutral-color-dark, #d9d9d9));
+          }
+
+          :host([readonly]) input::placeholder {
+            color: transparent;
+          }
+        `,
+            ];
+        }
+        constructor() {
+            super();
+            this._id = `gv-input-${new Date().getTime()}`;
+            this.valid = true;
+            this.invalid = false;
+        }
+        updateState(value) {
+            if (this.required && !this.readonly) {
+                this.setValidity(value == null || value.length === 0 || (typeof value === 'string' && value.trim() === ''), 'field is required');
+            }
+            else {
+                this.setValidity();
+            }
+        }
+        setValidity(isInvalid = false, violation = '') {
+            const element = this.getInputElement();
+            if (element && element.setCustomValidity) {
+                if (isInvalid) {
+                    if (violation == null || violation.trim() === '') {
+                        violation = 'field is not valid';
+                    }
+                    element.setCustomValidity(violation);
+                }
+                else {
+                    element.setCustomValidity('');
+                }
+                element.reportValidity();
+            }
+            this.invalid = isInvalid;
+            this.valid = !this.invalid;
+        }
+        firstUpdated() {
+            if (this.autofocus) {
+                const input = this.getInputElement();
+                if (input != null) {
+                    this.getInputElement().focus();
+                }
+            }
+            this.updateState(this.value);
+        }
+        updated(changedProperties) {
+            if (changedProperties.has('value')) {
+                this.updateState(this.value);
+            }
+        }
+        getInputElement() {
+            return this.shadowRoot ? this.shadowRoot.querySelector('input') : null;
+        }
+        get offsetHeight() {
+            if (this.description != null) {
+                const element = this.shadowRoot.querySelector('.description');
+                if (element != null) {
+                    return super.offsetHeight - element.offsetHeight;
+                }
+            }
+            return super.offsetHeight;
+        }
+        renderLabel() {
+            if (this.label) {
+                return html `<label for=${this.id} title="${this.label}">${this.label}</label>`;
+            }
+            return '';
+        }
+    };
+}

package/src/mixins/item-resource.js

@@ -1 +1,102 @@
-Object.defineProperty(exports,"__esModule",{value:!0}),exports.ItemResource=void 0;const e=require("lit"),t=require("lit/directives/repeat");require("../molecules/gv-identity-picture");const i=require("../lib/item"),r=require("./with-skeleton-attribute");exports.ItemResource=function(s){return class extends((0,r.withSkeletonAttribute)(s)){static get properties(){return{...super.properties,item:{type:Object},href:{type:String},metrics:{type:Object},_item:{type:Object,attribute:!1}}}constructor(){super(),this._skeletonAttribute="item"}_onImageLoaded(){this._item&&(this._skeleton=!1)}_renderImage(){return this._item&&!this._empty?e.html`<gv-identity-picture .skeleton="${this._skeleton}" .display_name="${(0,i.getPictureDisplayName)(this._item)}" .picture="${(0,i.getPicture)(this._item)}" @load="${this._onImageLoaded}"></gv-identity-picture>`:""}_onTagClick(e,t){t.detail.tagValue=e}_renderLabels(r){const s=(0,i.getLabels)(this._item);return s?(0,t.repeat)(s,(e=>e),(t=>e.html`<gv-tag ?clickable="${r}" @gv-tag:click="${this._onTagClick.bind(this,t)}" ?skeleton="${this._skeleton}" major>${t}</gv-tag>`)):""}_renderStates(){const r=(0,i.getStates)(this._item);return r?(0,t.repeat)(r,(e=>e),(({value:t,major:i,minor:r})=>e.html`<gv-state ?skeleton="${this._skeleton}" ?major="${!0===i}" ?minor="${!0===r}">${t}</gv-state>`)):""}_onClickToMetrics(e){e.detail.item=this._item}_renderMetricsWithRating(){return this.metrics?e.html`<gv-metrics .metrics="${this.metrics}" @gv-metrics:click="${this._onClickToMetrics}">${this._renderInfoRating()}</gv-metrics>`:this._renderInfoRating()}_renderInfoRating(){const t=(0,i.getRating)(this._item);return t&&t.count?e.html`<gv-rating readonly="readonly" .skeleton="${this._skeleton}" .value="${t.average}" .count="${t.count}"></gv-rating>`:""}}};
+/*
+ * 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 { html } from 'lit';
+import { repeat } from 'lit/directives/repeat';
+import '../molecules/gv-identity-picture';
+import { getLabels, getPicture, getStates, getRating, getPictureDisplayName } from '../lib/item';
+import { withSkeletonAttribute } from './with-skeleton-attribute';
+/**
+ * This is a mixin for ItemResource
+ * @mixinFunction
+ */
+export function ItemResource(ParentClass) {
+    /**
+     * @mixinClass
+     */
+    return class extends withSkeletonAttribute(ParentClass) {
+        static get properties() {
+            return {
+                ...super.properties,
+                /** @required */
+                item: { type: Object },
+                href: { type: String },
+                metrics: { type: Object },
+                _item: { type: Object, attribute: false },
+            };
+        }
+        constructor() {
+            super();
+            this._skeletonAttribute = 'item';
+        }
+        _onImageLoaded() {
+            if (this._item) {
+                this._skeleton = false;
+            }
+        }
+        _renderImage() {
+            if (this._item && !this._empty) {
+                return html `<gv-identity-picture
+          .skeleton="${this._skeleton}"
+          .display_name="${getPictureDisplayName(this._item)}"
+          .picture="${getPicture(this._item)}"
+          @load="${this._onImageLoaded}"
+        ></gv-identity-picture>`;
+            }
+            return '';
+        }
+        _onTagClick(tagValue, event) {
+            event.detail.tagValue = tagValue;
+        }
+        _renderLabels(clickable) {
+            const labels = getLabels(this._item);
+            if (labels) {
+                return repeat(labels, (label) => label, (label) => html `<gv-tag ?clickable="${clickable}" @gv-tag:click="${this._onTagClick.bind(this, label)}" ?skeleton="${this._skeleton}" major
+              >${label}</gv-tag
+            >`);
+            }
+            return '';
+        }
+        _renderStates() {
+            const states = getStates(this._item);
+            if (states) {
+                return repeat(states, (state) => state, ({ value, major, minor }) => html `
+            <gv-state ?skeleton="${this._skeleton}" ?major="${major === true}" ?minor="${minor === true}">${value}</gv-state>
+          `);
+            }
+            return '';
+        }
+        _onClickToMetrics(event) {
+            event.detail.item = this._item;
+        }
+        _renderMetricsWithRating() {
+            if (this.metrics) {
+                return html `
+          <gv-metrics .metrics="${this.metrics}" @gv-metrics:click="${this._onClickToMetrics}"> ${this._renderInfoRating()} </gv-metrics>
+        `;
+            }
+            else {
+                return this._renderInfoRating();
+            }
+        }
+        _renderInfoRating() {
+            const rating = getRating(this._item);
+            if (rating && rating.count) {
+                return html `<gv-rating readonly .skeleton="${this._skeleton}" .value="${rating.average}" .count="${rating.count}"></gv-rating>`;
+            }
+            return '';
+        }
+    };
+}