@gravitee/ui-components 3.25.3-typescript-fdacf14 → 3.25.3-typescript-94e8113

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

@@ -0,0 +1,341 @@
+/*
+ * 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/dist/src/molecules/gv-rating.js

@@ -0,0 +1,234 @@
+/*
+ * 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/dist/src/molecules/gv-row-expandable.js

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