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

package/dist/src/molecules/gv-promote.js

@@ -0,0 +1,203 @@
+/*
+ * 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 { classMap } from 'lit/directives/class-map';
+import { dispatchCustomEvent } from '../lib/events';
+import { i18n } from '../lib/i18n';
+import { ItemResource } from '../mixins/item-resource';
+import { getTitle, getDescription, getVersion, getOwner } from '../lib/item';
+import { truncate } from '../lib/utils';
+import '../atoms/gv-image';
+import '../atoms/gv-button';
+import '../molecules/gv-rating';
+import '../molecules/gv-metrics';
+/**
+ * Promote component
+ *
+ * ## Details
+ * * has @theme facet
+ *
+ * @fires gv-promote:click - When click on button for view item
+ * @fires gv-tag:click - When one of the label is clicked
+ *
+ * @attr {Promise<any>} item - an item.
+ *
+ * @cssprop {Color} [--gv-promote-image--bgc=var(--gv-theme-color-light, #86c3d0)] - Image background color
+ * @cssprop {Color} [--gv-promote--bgc=var(--gv-theme-neutral-color-lightest, #ffffff)] - Background color
+ * @cssprop {Length} [--gv-promote-image--h=300px] - Image height
+ * @cssprop {Length} [--gv-promote-image--w=300px] - Image width
+ * @cssprop {Length} [--gv-promote-button--p=19px 80px] - Button padding
+ * @cssprop {Length} [--gv-promote-button--fz=var(--gv-theme-font-size-l, 16px)] - Button font size
+ */
+export class GvPromote extends ItemResource(LitElement) {
+    static get properties() {
+        return {
+            ...super.properties,
+            limit: { type: Number },
+        };
+    }
+    static get styles() {
+        return [
+            ...super.styles,
+            // language=CSS
+            css `
+        :host {
+          box-sizing: border-box;
+          display: inline-block;
+          margin: 0.2rem;
+          vertical-align: middle;
+          --gv-button--p: var(--gv-promote-button--p, 19px 80px);
+          --gv-button--fz: var(--gv-promote-button--fz, var(--gv-theme-font-size-l, 16px));
+          --gv-preview-button: 'none';
+          width: 100%;
+          --gv-icon--s: 20px;
+          --gv-rating--s: 20px;
+        }
+
+        gv-identity-picture {
+          height: var(--gv-promote-image--h, 300px);
+          width: var(--gv-promote-image--w, 300px);
+          --gv-image--of: contain;
+        }
+
+        .container {
+          display: flex;
+          min-height: 420px;
+          max-height: 420px;
+        }
+
+        .image {
+          background-color: var(--gv-promote-image--bgc, var(--gv-theme-color-light, #86c3d0));
+          min-height: 0;
+          min-width: 0;
+          width: 480px;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          border-radius: 4px 0 0 4px;
+        }
+
+        .title {
+          text-transform: capitalize;
+          min-height: 32px;
+          display: flex;
+          align-items: center;
+        }
+
+        .title h2 {
+          font-size: var(--gv-theme-font-size-xl, 26px);
+          flex: 1;
+        }
+
+        .title .version {
+          font-size: var(--gv-theme-font-size-s, 12px);
+          color: var(--gv-theme-neutral-color-dark, #d9d9d9);
+        }
+
+        .owner {
+          --gv-icon--c: var(--gv-theme-neutral-color-dark, #bfbfbf);
+          --gv-icon--s: 16px;
+          color: var(--gv-theme-neutral-color-dark, #bfbfbf);
+          display: flex;
+          padding-bottom: 2px;
+          margin-top: -8px;
+          line-height: initial;
+        }
+
+        .content {
+          flex: 1;
+          padding: 1.5rem;
+          background-color: var(--gv-promote--bgc, var(--gv-theme-neutral-color-lightest, #ffffff));
+          color: var(--gv-theme-font-color-dark, #262626);
+          font-size: var(--gv-theme-font-size-l, 16px);
+          line-height: 24px;
+          border-radius: 0 4px 4px 0;
+          display: flex;
+          flex-direction: column;
+        }
+
+        .description {
+          margin: 24px 0px;
+          flex-grow: 1;
+        }
+
+        .description-large {
+          text-align: justify;
+        }
+
+        .infos {
+          display: flex;
+          justify-content: flex-end;
+          margin: 0.5rem 0.2rem;
+          align-items: center;
+        }
+
+        gv-metrics {
+          display: flex;
+          height: 100%;
+          justify-content: flex-end;
+          align-items: stretch;
+        }
+
+        .labels {
+          text-align: right;
+        }
+      `,
+        ];
+    }
+    _onClick() {
+        dispatchCustomEvent(this, 'click', { data: this._item, href: this.href });
+    }
+    render() {
+        if (this._invisible) {
+            return '';
+        }
+        const owner = getOwner(this._item);
+        return html `<div class="container">
+      <div class="${classMap({ skeleton: this._skeleton, image: true })}">${this._renderImage()}</div>
+      <div class="content">
+        ${this._error && !this._skeleton
+            ? html `<p class="description error">${i18n('gv-promote.error')}</p>`
+            : html `
+              ${this._empty && !this._skeleton
+                ? html `<p class="description empty">${i18n('gv-promote.empty')}</p>`
+                : html ` <div class=${classMap({ skeleton: this._skeleton, title: true })}>
+                      <h2>${getTitle(this._item)}</h2>
+                      <span class="version">${getVersion(this._item)}</span>
+                    </div>
+                    ${owner != null && owner.trim().length > 0
+                    ? html `<div class="owner"><gv-icon shape="general:user" size="8px"></gv-icon>${owner}</div>`
+                    : ''}
+                    <p
+                      class=${classMap({
+                    skeleton: this._skeleton,
+                    description: true,
+                    'description-large': getDescription(this._item).split(' ').length > 10,
+                })}
+                    >
+                      ${truncate(getDescription(this._item), this.limit)}
+                    </p>
+                    <div class=${classMap({ skeleton: this._skeleton, infos: true })}>${this._renderMetricsWithRating()}</div>
+                    <div class="labels">${this._renderLabels(true)}</div>
+                    <gv-button ?skeleton=${this._skeleton} .href="${this.href}" @click="${this._onClick}"
+                      >${i18n('gv-promote.view')}</gv-button
+                    >`}
+            `}
+      </div>
+    </div>`;
+    }
+}
+window.customElements.define('gv-promote', GvPromote);

package/dist/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/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.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";