@gravitee/ui-components 3.25.3-typescript-ad6021f → 3.25.3-typescript-bfd8f67

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

@@ -1,365 +1 @@
-/*
- * Copyright (C) 2015 The Gravitee team (http://gravitee.io)
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *         http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-import { css, LitElement, html } from 'lit';
-import { 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);
+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);

package/src/molecules/gv-rating.js

@@ -1,253 +1 @@
-/*
- * Copyright (C) 2015 The Gravitee team (http://gravitee.io)
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *         http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-import { css, LitElement, html } from 'lit';
-import { 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);
+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);

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

@@ -1,45 +1 @@
-/*
- * Copyright (C) 2015 The Gravitee team (http://gravitee.io)
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *         http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-import { css } 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);
+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);