@gravitee/ui-components 3.25.3-typescript-8a53edf → 3.25.3-typescript-e7256ca

package/src/molecules/gv-rating-list.d.ts

@@ -0,0 +1,77 @@
+/**
+ * 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(): {
+        ratings: {
+            type: ArrayConstructor;
+        };
+        user: {
+            type: ObjectConstructor;
+        };
+        permissions: {
+            type: ObjectConstructor;
+        };
+        required: {
+            type: BooleanConstructor;
+            attribute: string;
+        };
+        _permissions: {
+            type: ObjectConstructor;
+            attribute: boolean;
+        };
+        _ratings: {
+            type: ArrayConstructor;
+            attribute: boolean;
+        };
+    };
+    static get styles(): import("lit").CSSResult[];
+    _ratings: any[];
+    _permissions: {
+        update: boolean;
+        delete: boolean;
+        addAnswer: boolean;
+        deleteAnswer: boolean;
+    };
+    set ratings(arg: any);
+    _skeleton: boolean | undefined;
+    set permissions(arg: any);
+    _editAnswer(rating: any, e: any): void;
+    _getAnswerValue(): any;
+    _onAnswer(rating: any): void;
+    _hasValidAnswer(): boolean;
+    _onClose(rating: any): void;
+    _renderAnswer(rating: any, answer: any): any;
+    _renderAnswers(rating: any): any;
+    _onDelete(rating: any): void;
+    _onDeleteAnswer(rating: any, answer: any): void;
+    _renderActions(data: any, parent: any): import("lit-html").TemplateResult<1>;
+    _render(data: any, parent: any): any;
+    _onUpdateRating(rating: any, e: any): void;
+    _canAddAnswer(): boolean;
+    _canDeleteAnswer(): boolean;
+    _canUpdate(ratingId: any): boolean;
+    _canDelete(ratingId: any): boolean;
+    _getDisplayName(data: any): "" | import("lit-html").TemplateResult<1>;
+}
+import { LitElement } from "lit-element/lit-element";

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.d.ts

@@ -0,0 +1,55 @@
+/**
+ * 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(): {
+        value: {
+            type: NumberConstructor;
+            reflect: boolean;
+        };
+        count: {
+            type: StringConstructor;
+        };
+        skeleton: {
+            type: BooleanConstructor;
+        };
+        readonly: {
+            type: BooleanConstructor;
+        };
+        _candidate: {
+            type: NumberConstructor;
+            attribute: boolean;
+        };
+        withDescription: {
+            type: BooleanConstructor;
+            attribute: string;
+        };
+    };
+    static get styles(): import("lit").CSSResult[];
+    value: number;
+    count: number;
+    readonly: boolean;
+    _candidate: number;
+    isSelected: boolean;
+    _getTitle(): string;
+    _onMouseEnter(index: any): void;
+    description: string | null | undefined;
+    _onMouseOut(): void;
+    _onClick(index: any): void;
+    _getAverage(): number;
+    _renderStar(star: any, index: any): import("lit-html").TemplateResult<1>;
+    _getCountTitle(): string;
+}
+import { LitElement } from "lit-element/lit-element";