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

package/src/molecules/gv-rating-list.js

@@ -1 +1,341 @@
-Object.defineProperty(exports,"__esModule",{value:!0}),exports.GvRatingList=void 0;const e=require("lit"),t=require("lit/directives/repeat");require("./../atoms/gv-relative-time"),require("./gv-identity-picture"),require("./gv-rating"),require("./gv-confirm");const i=require("../styles/skeleton"),s=require("../styles/link"),r=require("../lib/i18n"),n=require("lit/directives/class-map"),a=require("../lib/events");class l extends e.LitElement{static get properties(){return{ratings:{type:Array},user:{type:Object},permissions:{type:Object},required:{type:Boolean,attribute:"required"},_permissions:{type:Object,attribute:!1},_ratings:{type:Array,attribute:!1}}}static get styles(){return[i.skeleton,s.link,e.css`:host{--s:var(--gv-rating-list--s, 18px);--gv-icon--s:var(--s);--gv-rating--s:var(--s);margin:.2rem;box-sizing:border-box}.rating-list{background-color:var(--gv-rating-list--bgc,var(--gv-theme-neutral-color-lightest,#fff))}.rating.parent{border-bottom:1px solid var(--gv-rating-list--bdc,var(--gv-theme-neutral-color,#f5f5f5))}.rating{display:flex;padding:1rem 0}.answer .rating{padding:1rem 0 0 0}.sub-title{color:grey;display:flex;line-height:20px}gv-confirm{align-self:center}.sub-title a.link{text-decoration:underline}gv-identity-picture{margin:0 1rem;height:60px;width:60px}.title{display:flex;line-height:20px}.rating-content,.title b{flex:1}.link-answer{display:inline-block;padding:1rem 0}.link-answer gv-icon{margin-right:.2rem;--gv-icon--s:var(--s)}.delete-answer,.delete-rating,.fake-icon{--gv-icon--s:var(--s);min-width:var(--s);display:inline-flex}.delete-rating{padding-right:1rem}.answer{padding:1rem;margin-top:1rem;background-color:var(--gv-rating-list-answer--bgc,var(--gv-theme-neutral-color-lighter,#fafafa))}.answer-form{display:flex;flex-direction:column}.display-name:after{content:'|';margin:2px}.actions{text-align:right}`]}constructor(){super(),this._ratings=[],this._permissions={update:!1,delete:!1,addAnswer:!1,deleteAnswer:!1}}set ratings(e){Promise.resolve(e).then((e=>{e?(this._skeleton=!1,this._ratings=e):this._skeleton=!0})).catch((()=>{this._skeleton=!1}))}set permissions(e){e&&"object"==typeof e&&(this._permissions=Object.assign({},this._permissions,e))}render(){return e.html`<div class="rating-list">${(0,t.repeat)(this._ratings,(e=>this._render(e)))}</div>`}_editAnswer(e,t){t.stopPropagation(),this._ratings.forEach((e=>e._edit=!1)),e._edit=!0,this.performUpdate()}_getAnswerValue(){const e=this.shadowRoot.querySelector("gv-text");return e?e.value:""}_onAnswer(e){const t=this._getAnswerValue();t.trim().length>0&&(0,a.dispatchCustomEvent)(this,"add-answer",{rating:e,answer:t})}_hasValidAnswer(){return this._getAnswerValue().trim().length>0}_onClose(e){delete e._edit,this.performUpdate()}_renderAnswer(t,i){return e.html`<div class="answer">${this._render(i,t)}</div>`}_renderAnswers(i){return e.html`${i.answers?e.html`${this._canAddAnswer()?e.html`<a class="link link-answer" @click="${this._editAnswer.bind(this,i)}"><gv-icon class="link" shape="communication:chat#5"></gv-icon>${(0,r.i18n)("gv-rating-list.reply")}</a>`:""} ${i._edit?e.html`<div class="answer answer-form"><gv-text rows="4" label="${(0,r.i18n)("gv-rating-list.answerLabel")}" required @input="${this.performUpdate}"></gv-text><div class="actions"><gv-button primary outlined @click="${this._onClose.bind(this,i)}">${(0,r.i18n)("gv-rating-list.cancel")}</gv-button><gv-button primary @click="${this._onAnswer.bind(this,i)}" .disabled="${!this._hasValidAnswer()}">${(0,r.i18n)("gv-rating-list.send")}</gv-button></div></div>`:""}<div>${(0,t.repeat)(i.answers,(e=>this._renderAnswer(i,e)))}</div>`:""}`}_onDelete(e){(0,a.dispatchCustomEvent)(this,"delete",{rating:e})}_onDeleteAnswer(e,t){(0,a.dispatchCustomEvent)(this,"delete-answer",{rating:e,answer:t})}_renderActions(t,i){return i?e.html`${this._canDeleteAnswer()?e.html`<gv-confirm danger icon="home:trash" @gv-confirm:ok="${this._onDeleteAnswer.bind(this,i,t)}" message="${(0,r.i18n)("gv-rating-list.confirmAnswerDelete")}"><gv-icon title="${(0,r.i18n)("gv-rating-list.deleteAnswer")}" class="link delete-answer" shape="home:trash"></gv-icon></gv-confirm>`:""}`:e.html`${this._canDelete(t.id)?e.html`<gv-confirm danger icon="home:trash" @gv-confirm:ok="${this._onDelete.bind(this,t)}" message="${(0,r.i18n)("gv-rating-list.confirmRatingDelete")}"><gv-icon title="${(0,r.i18n)("gv-rating-list.deleteRating")}" class="link delete-rating" shape="home:trash"></gv-icon></gv-confirm>`:e.html`<div class="fake-icon"></div>`}`}_render(t,i){const s={rating:!0,skeleton:this._skeleton,parent:null==i},r=t.author&&t.author.display_name?t.author.display_name:null,a=t.author&&t.author._links&&t.author._links.avatar?t.author._links.avatar:null;return e.html`<div class="${(0,n.classMap)(s)}"><gv-identity-picture rounded .display_name="${r}" .picture="${a}"></gv-identity-picture><div class="rating-content"><div class="title"><b>${t.title?t.title:t.author.display_name}</b>${i?"":e.html`<gv-rating .readonly="${!this._canUpdate(t.id)}" @input="${this._onUpdateRating.bind(this,t)}" value="${t.value}"></gv-rating>`}${this._renderActions(t,i)}</div><div class="sub-title">${this._getDisplayName(t)}<gv-relative-time datetime="${t.date}" noFuture></gv-relative-time></div><p class="comment">${t.comment}</p>${i?"":this._renderAnswers(t)}</div></div>`}_onUpdateRating(e,t){e.value=t.target.value,(0,a.dispatchCustomEvent)(this,"update",{rating:e})}_canAddAnswer(){return!0===this._permissions.addAnswer}_canDeleteAnswer(){return!0===this._permissions.deleteAnswer}_canUpdate(e){return Array.isArray(this._permissions.update)?this._permissions.update.includes(e):!0===this._permissions.update}_canDelete(e){return Array.isArray(this._permissions.delete)?this._permissions.delete.includes(e):!0===this._permissions.delete}_getDisplayName(t){return t.title?e.html`<span class="display-name">${t.author.display_name}</span>`:""}}exports.GvRatingList=l,window.customElements.define("gv-rating-list",l);
+/*
+ * 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 { repeat } from 'lit/directives/repeat';
+import './../atoms/gv-relative-time';
+import './gv-identity-picture';
+import './gv-rating';
+import './gv-confirm';
+import { skeleton } from '../styles/skeleton';
+import { link } from '../styles/link';
+import { i18n } from '../lib/i18n';
+import { classMap } from 'lit/directives/class-map';
+import { dispatchCustomEvent } from '../lib/events';
+/**
+ * List of ratings with answer form
+ *
+ * ## Details
+ * * has @theme facet
+ *
+ * ## Attribute `permissions` details
+ * * `delete` and `update` properties supports booleans or arrays of rating identifier.
+ * * `addAnswer` and `deleteAnswer` only accept booleans.
+ *
+ * @fires gv-rating-list:add-answer - When user submit answer
+ * @fires gv-rating-list:delete - When user delete rating
+ * @fires gv-rating-list:delete-answer - When user delete answer
+ * @fires gv-rating-list:update - When user update rating
+ *
+ * @attr {Promise<Array>} ratings - ratings
+ * @attr {id, avatar, display_name} user - a current user
+ * @attr {Object<{update, delete, addAnswer, deleteAnswer}>} permissions - The permissions
+ * @cssprop {Color} [--gv-rating-list--bgc=var(--gv-theme-neutral-color-lightest, #ffffff)] - Background color
+ * @cssprop {Color} [--gv-rating-list-answer--bgc=var(--gv-theme-neutral-color-lighter, #fafafa)] - Answer background color
+ * @cssprop {Color} [--gv-rating-list--bdc=var(--gv-theme-neutral-color, #f5f5f5)] - Border color
+ * @cssprop {Length} [--gv-rating-list--s=18px] - Height and star width
+ */
+export class GvRatingList extends LitElement {
+    static get properties() {
+        return {
+            ratings: { type: Array },
+            user: { type: Object },
+            permissions: { type: Object },
+            required: { type: Boolean, attribute: 'required' },
+            _permissions: { type: Object, attribute: false },
+            _ratings: { type: Array, attribute: false },
+        };
+    }
+    static get styles() {
+        return [
+            skeleton,
+            link,
+            // language=CSS
+            css `
+        :host {
+          --s: var(--gv-rating-list--s, 18px);
+          --gv-icon--s: var(--s);
+          --gv-rating--s: var(--s);
+          margin: 0.2rem;
+          box-sizing: border-box;
+        }
+
+        .rating-list {
+          background-color: var(--gv-rating-list--bgc, var(--gv-theme-neutral-color-lightest, #ffffff));
+        }
+
+        .rating.parent {
+          border-bottom: 1px solid var(--gv-rating-list--bdc, var(--gv-theme-neutral-color, #f5f5f5));
+        }
+
+        .rating {
+          display: flex;
+          padding: 1rem 0;
+        }
+
+        .answer .rating {
+          padding: 1rem 0 0 0;
+        }
+
+        .sub-title {
+          color: grey;
+          display: flex;
+          line-height: 20px;
+        }
+
+        gv-confirm {
+          align-self: center;
+        }
+
+        .sub-title a.link {
+          text-decoration: underline;
+        }
+
+        gv-identity-picture {
+          margin: 0 1rem;
+          height: 60px;
+          width: 60px;
+        }
+
+        .title {
+          display: flex;
+          line-height: 20px;
+        }
+
+        .title b,
+        .rating-content {
+          flex: 1;
+        }
+
+        .link-answer {
+          display: inline-block;
+          padding: 1rem 0;
+        }
+
+        .link-answer gv-icon {
+          margin-right: 0.2rem;
+          --gv-icon--s: var(--s);
+        }
+
+        .delete-rating,
+        .delete-answer,
+        .fake-icon {
+          --gv-icon--s: var(--s);
+          min-width: var(--s);
+          display: inline-flex;
+        }
+
+        .delete-rating {
+          padding-right: 1rem;
+        }
+
+        .answer {
+          padding: 1rem;
+          margin-top: 1rem;
+          background-color: var(--gv-rating-list-answer--bgc, var(--gv-theme-neutral-color-lighter, #fafafa));
+        }
+
+        .answer-form {
+          display: flex;
+          flex-direction: column;
+        }
+
+        .display-name:after {
+          content: '|';
+          margin: 2px;
+        }
+
+        .actions {
+          text-align: right;
+        }
+      `,
+        ];
+    }
+    constructor() {
+        super();
+        this._ratings = [];
+        this._permissions = {
+            update: false,
+            delete: false,
+            addAnswer: false,
+            deleteAnswer: false,
+        };
+    }
+    set ratings(value) {
+        Promise.resolve(value)
+            .then((value) => {
+            if (value) {
+                this._skeleton = false;
+                this._ratings = value;
+            }
+            else {
+                this._skeleton = true;
+            }
+        })
+            .catch(() => {
+            this._skeleton = false;
+        });
+    }
+    set permissions(permissions) {
+        if (permissions && typeof permissions === 'object') {
+            this._permissions = Object.assign({}, this._permissions, permissions);
+        }
+    }
+    render() {
+        return html ` <div class="rating-list">${repeat(this._ratings, (rating) => this._render(rating))}</div> `;
+    }
+    _editAnswer(rating, e) {
+        e.stopPropagation();
+        this._ratings.forEach((rating) => (rating._edit = false));
+        rating._edit = true;
+        this.performUpdate();
+    }
+    _getAnswerValue() {
+        const element = this.shadowRoot.querySelector('gv-text');
+        if (element) {
+            return element.value;
+        }
+        return '';
+    }
+    _onAnswer(rating) {
+        const answer = this._getAnswerValue();
+        if (answer.trim().length > 0) {
+            dispatchCustomEvent(this, 'add-answer', { rating, answer });
+        }
+    }
+    _hasValidAnswer() {
+        const answer = this._getAnswerValue();
+        return answer.trim().length > 0;
+    }
+    _onClose(rating) {
+        delete rating._edit;
+        this.performUpdate();
+    }
+    _renderAnswer(rating, answer) {
+        return html `<div class="answer">${this._render(answer, rating)}</div>`;
+    }
+    _renderAnswers(rating) {
+        return html ` ${rating.answers
+            ? html ` ${this._canAddAnswer()
+                ? html `<a class="link link-answer" @click="${this._editAnswer.bind(this, rating)}">
+                <gv-icon class="link" shape="communication:chat#5"></gv-icon> ${i18n('gv-rating-list.reply')}</a
+              >`
+                : ''}
+          ${rating._edit
+                ? html `
+                <div class="answer answer-form">
+                  <gv-text rows="4" label="${i18n('gv-rating-list.answerLabel')}" required @input="${this.performUpdate}"></gv-text>
+                  <div class="actions">
+                    <gv-button primary outlined @click="${this._onClose.bind(this, rating)}">${i18n('gv-rating-list.cancel')}</gv-button>
+                    <gv-button primary @click="${this._onAnswer.bind(this, rating)}" .disabled="${!this._hasValidAnswer()}"
+                      >${i18n('gv-rating-list.send')}</gv-button
+                    >
+                  </div>
+                </div>
+              `
+                : ''}
+          <div>${repeat(rating.answers, (answer) => this._renderAnswer(rating, answer))}</div>`
+            : ''}`;
+    }
+    _onDelete(rating) {
+        dispatchCustomEvent(this, 'delete', { rating });
+    }
+    _onDeleteAnswer(rating, answer) {
+        dispatchCustomEvent(this, 'delete-answer', { rating, answer });
+    }
+    _renderActions(data, parent) {
+        if (parent) {
+            return html `
+        ${this._canDeleteAnswer()
+                ? html `<gv-confirm
+              danger
+              icon="home:trash"
+              @gv-confirm:ok="${this._onDeleteAnswer.bind(this, parent, data)}"
+              message="${i18n('gv-rating-list.confirmAnswerDelete')}"
+            >
+              <gv-icon title="${i18n('gv-rating-list.deleteAnswer')}" class="link delete-answer" shape="home:trash"></gv-icon>
+            </gv-confirm>`
+                : ''}
+      `;
+        }
+        else {
+            return html `
+        ${this._canDelete(data.id)
+                ? html `<gv-confirm
+              danger
+              icon="home:trash"
+              @gv-confirm:ok="${this._onDelete.bind(this, data)}"
+              message="${i18n('gv-rating-list.confirmRatingDelete')}"
+            >
+              <gv-icon title="${i18n('gv-rating-list.deleteRating')}" class="link delete-rating" shape="home:trash"></gv-icon>
+            </gv-confirm>`
+                : html `<div class="fake-icon"></div>`}
+      `;
+        }
+    }
+    _render(data, parent) {
+        const classes = { rating: true, skeleton: this._skeleton, parent: parent == null };
+        const displayName = data.author && data.author.display_name ? data.author.display_name : null;
+        const picture = data.author && data.author._links && data.author._links.avatar ? data.author._links.avatar : null;
+        return html `
+      <div class="${classMap(classes)}">
+        <gv-identity-picture rounded .display_name="${displayName}" .picture="${picture}"></gv-identity-picture>
+        <div class="rating-content">
+          <div class="title">
+            <b>${data.title ? data.title : data.author.display_name}</b>${parent
+            ? ''
+            : html `<gv-rating
+                  .readonly="${!this._canUpdate(data.id)}"
+                  @input="${this._onUpdateRating.bind(this, data)}"
+                  value="${data.value}"
+                ></gv-rating>`}${this._renderActions(data, parent)}
+          </div>
+          <div class="sub-title">${this._getDisplayName(data)}<gv-relative-time datetime="${data.date}" noFuture></gv-relative-time></div>
+          <p class="comment">${data.comment}</p>
+          ${parent ? '' : this._renderAnswers(data)}
+        </div>
+      </div>
+    `;
+    }
+    _onUpdateRating(rating, e) {
+        rating.value = e.target.value;
+        dispatchCustomEvent(this, 'update', { rating });
+    }
+    _canAddAnswer() {
+        return this._permissions.addAnswer === true;
+    }
+    _canDeleteAnswer() {
+        return this._permissions.deleteAnswer === true;
+    }
+    _canUpdate(ratingId) {
+        if (Array.isArray(this._permissions.update)) {
+            return this._permissions.update.includes(ratingId);
+        }
+        return this._permissions.update === true;
+    }
+    _canDelete(ratingId) {
+        if (Array.isArray(this._permissions.delete)) {
+            return this._permissions.delete.includes(ratingId);
+        }
+        return this._permissions.delete === true;
+    }
+    _getDisplayName(data) {
+        if (data.title) {
+            return html `<span class="display-name">${data.author.display_name}</span>`;
+        }
+        return '';
+    }
+}
+window.customElements.define('gv-rating-list', GvRatingList);

package/src/molecules/gv-rating.js

@@ -1 +1,234 @@
-Object.defineProperty(exports,"__esModule",{value:!0}),exports.GvRating=void 0;const t=require("lit"),e=require("lit/directives/repeat");require("../atoms/gv-icon");const i=require("../styles/skeleton"),s=require("lit/directives/class-map"),n=require("../lib/i18n");class r extends t.LitElement{static get properties(){return{value:{type:Number,reflect:!0},count:{type:String},skeleton:{type:Boolean},readonly:{type:Boolean},_candidate:{type:Number,attribute:!1},withDescription:{type:Boolean,attribute:"with-description"}}}static get styles(){return[t.css`:host{--gv-icon--c:var(--gv-rating--c, var(--gv-theme-color, #5a7684));--size:var(--gv-rating--s, 13px);--gv-icon--s:var(--size);font-size:var(--gv-theme-font-size-m,14px);cursor:default}.content,.rate{justify-content:space-evenly;display:inline-flex;align-items:flex-end;vertical-align:middle;height:100%}.info-title{font-size:var(--gv-theme-font-size-m,14px);line-height:16px;align-self:center;min-width:35px;text-align:center}.info-subtitle{font-size:var(--gv-theme-font-size-xs,10px);line-height:10px;opacity:.5;text-align:center}.icon{display:inline-flex;align-self:center;margin-right:calc(var(--size)/ 4);align-items:center}.edit{cursor:pointer}.edit gv-icon:hover{transform:translateY(-.5px)}gv-input{flex:1}.icon{min-height:30px}.description{min-width:100px;line-height:calc(var(--size) + 4px);margin:auto 4px}`,i.skeleton]}constructor(){super(),this.value=0,this.count=0,this.readonly=!1,this._candidate=-1,this.isSelected=!1}_getTitle(){return`${this._getAverage()}/5`}_onMouseEnter(t){if(this._candidate=t+1,this.withDescription)switch(this._candidate){case 1:this.description=(0,n.i18n)("gv-rating.description-1");break;case 2:this.description=(0,n.i18n)("gv-rating.description-2");break;case 3:this.description=(0,n.i18n)("gv-rating.description-3");break;case 4:this.description=(0,n.i18n)("gv-rating.description-4");break;case 5:this.description=(0,n.i18n)("gv-rating.description-5")}}_onMouseOut(){this._candidate=-1,this.withDescription&&!this.isSelected&&(this.description=null)}_onClick(t){this._candidate=-1,this.isSelected=!0,this.value=t+1,this.dispatchEvent(new Event("input"),{bubbles:!0,cancelable:!0})}_getAverage(){const t=parseFloat(this.value);return t>=0&&t<=5?t:0}_renderStar(e,i){return this.readonly?t.html`<gv-icon shape="general:${e}"></gv-icon>`:t.html`<gv-icon @mouseenter="${this._onMouseEnter.bind(this,i)}" @click="${this._onClick.bind(this,i)}" shape="general:${e}"></gv-icon>`}render(){const i=this._getAverage();let n=1*i;this.readonly||(n=this._candidate>-1?this._candidate:i);const r=[];for(let t=1;t<=5;t+=1)n>=t?r.push("star"):n>=t-.7?r.push("half-star"):r.push("no-star");return t.html`<div class="${(0,s.classMap)({skeleton:this.skeleton,edit:!this.readonly,content:!0})}"><div class="${(0,s.classMap)({content:!0})}"><div class="${(0,s.classMap)({rate:!0})}"><div class="icon" title="${this._getTitle()}">${this.withDescription?t.html`<div class="description">${this.description}</div>`:""} ${(0,e.repeat)(r,(t=>t),((e,i)=>t.html`${this._renderStar(e,i)}`))}</div>${this.count?t.html`<div><div class="info-title">${this.count||""}</div><div class="info-subtitle">${this._getCountTitle()}</div></div>`:""}</div></div></div>`}firstUpdated(){this.readonly||this.shadowRoot.querySelector(".edit").addEventListener("mouseout",this._onMouseOut.bind(this))}_getCountTitle(){return this.count?this.count>1?(0,n.i18n)("gv-rating.notes"):(0,n.i18n)("gv-rating.note"):""}}exports.GvRating=r,window.customElements.define("gv-rating",r);
+/*
+ * 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 { repeat } from 'lit/directives/repeat';
+import '../atoms/gv-icon';
+import { skeleton } from '../styles/skeleton';
+import { classMap } from 'lit/directives/class-map';
+import { i18n } from '../lib/i18n';
+const MAX_RATE = 5;
+/**
+ * Rating component
+ *
+ * ## Details
+ * * has @theme facet
+ *
+ * @attr {Length} value - average of ratings between 1 and 5
+ * @attr {String} count - total count for the average
+ * @attr {Boolean} skeleton - skeleton mode
+ * @attr {Boolean} readonly - readonly mode
+ * @attr {Boolean} with-description - if true, show rate description on hover
+ *
+ * @cssprop {Color} [--gv-rating--c=var(--gv-theme-color, #5a7684)] - Color
+ * @cssprop {Length} [--gv-rating--s=13px] - Size
+ */
+export class GvRating extends LitElement {
+    static get properties() {
+        return {
+            value: { type: Number, reflect: true },
+            count: { type: String },
+            skeleton: { type: Boolean },
+            readonly: { type: Boolean },
+            _candidate: { type: Number, attribute: false },
+            withDescription: { type: Boolean, attribute: 'with-description' },
+        };
+    }
+    static get styles() {
+        return [
+            // language=CSS
+            css `
+        :host {
+          --gv-icon--c: var(--gv-rating--c, var(--gv-theme-color, #5a7684));
+          --size: var(--gv-rating--s, 13px);
+          --gv-icon--s: var(--size);
+
+          font-size: var(--gv-theme-font-size-m, 14px);
+          cursor: default;
+        }
+
+        .content,
+        .rate {
+          justify-content: space-evenly;
+          display: inline-flex;
+          align-items: flex-end;
+          vertical-align: middle;
+          height: 100%;
+        }
+
+        .info-title {
+          font-size: var(--gv-theme-font-size-m, 14px);
+          line-height: 16px;
+          align-self: center;
+          min-width: 35px;
+          text-align: center;
+        }
+
+        .info-subtitle {
+          font-size: var(--gv-theme-font-size-xs, 10px);
+          line-height: 10px;
+          opacity: 0.5;
+          text-align: center;
+        }
+
+        .icon {
+          display: inline-flex;
+          align-self: center;
+          margin-right: calc(var(--size) / 4);
+          align-items: center;
+        }
+
+        .edit {
+          cursor: pointer;
+        }
+
+        .edit gv-icon:hover {
+          transform: translateY(-0.5px);
+        }
+
+        gv-input {
+          flex: 1;
+        }
+
+        .icon {
+          min-height: 30px;
+        }
+
+        .description {
+          min-width: 100px;
+          line-height: calc(var(--size) + 4px);
+          margin: auto 4px;
+        }
+      `,
+            skeleton,
+        ];
+    }
+    constructor() {
+        super();
+        this.value = 0;
+        this.count = 0;
+        this.readonly = false;
+        this._candidate = -1;
+        this.isSelected = false;
+    }
+    _getTitle() {
+        return `${this._getAverage()}/${MAX_RATE}`;
+    }
+    _onMouseEnter(index) {
+        this._candidate = index + 1;
+        if (this.withDescription) {
+            switch (this._candidate) {
+                case 1:
+                    this.description = i18n('gv-rating.description-1');
+                    break;
+                case 2:
+                    this.description = i18n('gv-rating.description-2');
+                    break;
+                case 3:
+                    this.description = i18n('gv-rating.description-3');
+                    break;
+                case 4:
+                    this.description = i18n('gv-rating.description-4');
+                    break;
+                case 5:
+                    this.description = i18n('gv-rating.description-5');
+                    break;
+            }
+        }
+    }
+    _onMouseOut() {
+        this._candidate = -1;
+        if (this.withDescription && !this.isSelected) {
+            this.description = null;
+        }
+    }
+    _onClick(index) {
+        this._candidate = -1;
+        this.isSelected = true;
+        this.value = index + 1;
+        this.dispatchEvent(new Event('input'), { bubbles: true, cancelable: true });
+    }
+    _getAverage() {
+        const _value = parseFloat(this.value);
+        if (_value >= 0 && _value <= MAX_RATE) {
+            return _value;
+        }
+        return 0;
+    }
+    _renderStar(star, index) {
+        if (this.readonly) {
+            return html `<gv-icon shape="general:${star}"></gv-icon>`;
+        }
+        else {
+            return html `<gv-icon
+        @mouseenter=${this._onMouseEnter.bind(this, index)}
+        @click=${this._onClick.bind(this, index)}
+        shape="general:${star}"
+      ></gv-icon>`;
+        }
+    }
+    render() {
+        const average = this._getAverage();
+        let trunc = average * 1;
+        if (!this.readonly) {
+            trunc = this._candidate > -1 ? this._candidate : average;
+        }
+        const stars = [];
+        for (let star = 1; star <= MAX_RATE; star += 1) {
+            if (trunc >= star) {
+                stars.push('star');
+            }
+            else if (trunc >= star - 0.7) {
+                stars.push('half-star');
+            }
+            else {
+                stars.push('no-star');
+            }
+        }
+        return html `
+      <div class="${classMap({ skeleton: this.skeleton, edit: !this.readonly, content: true })}">
+        <div class="${classMap({ content: true })}">
+          <div class="${classMap({ rate: true })}">
+            <div class="icon" title="${this._getTitle()}">
+              ${this.withDescription ? html `<div class="description">${this.description}</div>` : ''}
+              ${repeat(stars, (star) => star, (star, index) => html ` ${this._renderStar(star, index)} `)}
+            </div>
+            ${this.count
+            ? html `<div>
+                  <div class="info-title">${this.count || ''}</div>
+                  <div class="info-subtitle">${this._getCountTitle()}</div>
+                </div>`
+            : ''}
+          </div>
+        </div>
+      </div>
+    `;
+    }
+    firstUpdated() {
+        if (!this.readonly) {
+            this.shadowRoot.querySelector('.edit').addEventListener('mouseout', this._onMouseOut.bind(this));
+        }
+    }
+    _getCountTitle() {
+        if (this.count) {
+            if (this.count > 1) {
+                return i18n('gv-rating.notes');
+            }
+            return i18n('gv-rating.note');
+        }
+        return '';
+    }
+}
+window.customElements.define('gv-rating', GvRating);

package/src/molecules/gv-row-expandable.js

@@ -1 +1,42 @@
-Object.defineProperty(exports,"__esModule",{value:!0}),exports.GvRowExpandable=void 0;const e=require("lit"),r=require("./gv-expandable");class o extends r.GvExpandable{constructor(){super(),this.icon="general:other#2",this.iconOpened="general:other#2",this.clickable=!0}static get styles(){return[...super.styles,e.css`.box:hover{background-color:var(--gv-theme-neutral-color,#f5f5f5)}`]}}exports.GvRowExpandable=o,window.customElements.define("gv-row-expandable",o);
+/*
+ * 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 } from 'lit';
+import { GvExpandable } from './gv-expandable';
+/**
+ * Expandable row
+ *  @extends GvExpandable
+ *
+ */
+export class GvRowExpandable extends GvExpandable {
+    constructor() {
+        super();
+        this.icon = 'general:other#2';
+        this.iconOpened = 'general:other#2';
+        this.clickable = true;
+    }
+    static get styles() {
+        return [
+            ...super.styles,
+            // language=CSS
+            css `
+        .box:hover {
+          background-color: var(--gv-theme-neutral-color, #f5f5f5);
+        }
+      `,
+        ];
+    }
+}
+window.customElements.define('gv-row-expandable', GvRowExpandable);