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

package/src/molecules/gv-popover.js

@@ -1,351 +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 { classMap } from 'lit/directives/class-map';
-
-/**
- * Popover component
- *
- * ## Details
- * * has @theme facet
- *
- * @attr {String} event - the event that triggers the opening.
- * @attr {String} delay - the time before closing, useful for a click event
- * @attr {String} arrow - if need arrow
- * @attr {String} small - Small popover
- * @attr {String} medium - Medium popover
- * @attr {String} large - Large popover
- * @attr {String} width - The width of popover
- * @attr {String} position - The position top, right, bottom or left
- * @attr {Boolean} auto - to let the component choose the position
- *
- * @cssprop {Color} [--gv-popover--bgc=var(--gv-theme-neutral-color-lighter, #fafafa)] - Background color
- * @cssprop {Color} [--gv-popover--c=var(--gv-theme-font-color-dark, #262626)] - Color
- * @cssprop {Color} [--gv-popover--bdc=var(--gv-theme-neutral-color, #f5f5f5)] - Border color
- * @cssprop {Length} [--gv-popover--p=0.5rem] - Padding
- */
-export class GvPopover extends LitElement {
-  static get properties() {
-    return {
-      event: { type: String },
-      delay: { type: Number },
-      arrow: { type: Boolean, reflect: true },
-      small: { type: Boolean, reflect: true },
-      medium: { type: Boolean, reflect: true },
-      large: { type: Boolean, reflect: true },
-      width: { type: String },
-      position: { type: String, reflect: true },
-      auto: { type: Boolean },
-      _opened: { type: Boolean, attribute: false },
-    };
-  }
-
-  static get styles() {
-    return [
-      // language=CSS
-      css`
-        :host {
-          cursor: pointer;
-          box-sizing: border-box;
-          display: inline-block;
-          position: relative;
-        }
-
-        .popover {
-          --bgc: var(--gv-popover--bgc, var(--gv-theme-neutral-color-lighter, #fafafa));
-          color: var(--gv-popover--c, var(--gv-theme-font-color-dark, #262626));
-          position: absolute;
-          background-color: var(--bgc);
-          padding: var(--gv-popover--p, 0.5rem);
-          border-radius: 4px;
-          z-index: 1000;
-          margin: 0 auto;
-          text-align: center;
-          width: auto;
-          box-sizing: content-box;
-        }
-
-        :host([position='bottom']) .popover {
-          top: calc(100% + 0.4rem);
-          transform: translateX(-50%);
-          left: 50%;
-          box-shadow: 1px 0 0 0 var(--gv-theme-neutral-color, #f5f5f5), 0 2px 3px var(--gv-theme-neutral-color-dark, #bfbfbf);
-        }
-
-        :host([position='bottom'][arrow]) .popover {
-          top: calc(100% + 0.4rem + 10px);
-        }
-
-        :host([position='bottom'][arrow]) .arrow {
-          top: calc(100% - 8px);
-          transform: translateX(-50%);
-          left: 50%;
-        }
-
-        :host([position='top']) .popover {
-          bottom: calc(100% + 0.4rem);
-          transform: translateX(-50%);
-          left: 50%;
-          box-shadow: 1px 0 0 0 var(--gv-theme-neutral-color, #f5f5f5), 0 -2px 3px var(--gv-theme-neutral-color-dark, #bfbfbf);
-        }
-
-        :host([position='top'][arrow]) .popover {
-          bottom: calc(100% + 0.4rem + 10px);
-        }
-
-        :host([position='top'][arrow]) .arrow {
-          bottom: calc(100% - 8px);
-          transform: translateX(-50%) rotate(180deg);
-          left: 50%;
-        }
-
-        :host([position='left']) .popover {
-          top: 50%;
-          transform: translateY(-50%);
-          right: calc(100% + 0.4rem);
-          box-shadow: -1px 0 0 0 var(--gv-theme-neutral-color, #f5f5f5), -1px 2px 3px var(--gv-theme-neutral-color-dark, #bfbfbf);
-        }
-
-        :host([position='left'][arrow]) .popover {
-          right: calc(100% + 0.4rem + 10px);
-        }
-
-        :host([position='left'][arrow]) .arrow {
-          top: 50%;
-          transform: translateY(-50%) rotate(90deg);
-          right: calc(100% - 8px);
-        }
-
-        :host([position='right']) .popover {
-          top: 50%;
-          transform: translateY(-50%);
-          left: calc(100% + 0.4rem);
-          box-shadow: 1px 0 0 1px var(--gv-theme-neutral-color, #f5f5f5), 1px 1px 1px var(--gv-theme-neutral-color-dark, #bfbfbf);
-        }
-
-        :host([position='right'][arrow]) .popover {
-          left: calc(100% + 0.4rem + 10px);
-        }
-
-        :host([position='right'][arrow]) .arrow {
-          left: calc(100% - 8px);
-          top: 50%;
-          transform: translateY(-50%) rotate(-90deg);
-        }
-
-        .inline .popover {
-          white-space: nowrap;
-        }
-
-        :host([small]) .popover {
-          width: 200px;
-        }
-
-        :host([medium]) .popover {
-          width: 350px;
-        }
-
-        :host([large]) .popover {
-          width: 500px;
-        }
-
-        .content {
-          width: 100%;
-        }
-
-        .popover,
-        .arrow {
-          opacity: 0;
-          visibility: hidden;
-          transition: opacity 0.3s ease-in-out;
-        }
-
-        .open .popover,
-        .open .arrow {
-          display: block;
-          opacity: 1;
-          visibility: visible;
-        }
-
-        .close .popover,
-        .close .arrow {
-        }
-
-        .arrow {
-          width: 25px;
-          height: 25px;
-          z-index: 101;
-          position: absolute;
-          overflow: hidden;
-        }
-
-        .arrow:after {
-          content: '';
-          position: absolute;
-          width: 12px;
-          height: 12px;
-          background: var(--gv-popover--bgc, var(--gv-theme-neutral-color-lighter, #fafafa));
-          transform: rotate(45deg);
-          top: 19px;
-          left: 6px;
-          border: 1px solid var(--gv-popover--bdc, var(--gv-theme-neutral-color, #f5f5f5));
-        }
-      `,
-    ];
-  }
-
-  constructor() {
-    super();
-    this.event = 'mouseover';
-    this._closeHandler = this._close.bind(this);
-    this.delay = 0;
-    this.arrow = false;
-    this.position = 'bottom';
-    this.auto = false;
-  }
-
-  _open(e) {
-    if (this.event === 'click') {
-      window.removeEventListener(this.event, this._closeHandler);
-    }
-    this._opened = true;
-    if (this.event === 'click') {
-      setTimeout(() => window.addEventListener(this.event, this._closeHandler));
-    }
-
-    if (this.delay > 0) {
-      setTimeout(() => this._close({}), this.delay);
-    }
-  }
-
-  close() {
-    this._close({});
-  }
-
-  _close(e) {
-    if (this._opened && (e.target !== this.firstElementChild || this.event !== 'click')) {
-      const openElement = this.shadowRoot.querySelector('.open');
-      openElement.classList.add('close');
-      setTimeout(() => {
-        openElement.classList.remove('close');
-        this._opened = false;
-      }, 200);
-    }
-  }
-
-  render() {
-    const inline = this.width == null && !this.small && !this.medium && !this.large;
-    const classes = { open: this._opened, content: true, inline };
-    return html` <div class="${classMap(classes)}">
-      <slot></slot>
-      ${this.arrow ? html`<div class="arrow"></div>` : ''}
-      <div class="popover">${this.renderContent()}</div>
-    </div>`;
-  }
-
-  renderContent() {
-    return html`<slot name="popover"></slot>`;
-  }
-
-  firstUpdated(_changedProperties) {
-    setTimeout(() => {
-      this.addEventListener(this.event, this._open.bind(this));
-      if (this.event.startsWith('mouse') && this.delay === 0) {
-        this.addEventListener('mouseleave', this._close.bind(this));
-      }
-    });
-  }
-
-  _getContentSize() {
-    const popover = this.shadowRoot.querySelector('.popover');
-    return {
-      width: popover.offsetWidth,
-      height: popover.offsetHeight,
-    };
-  }
-
-  _getPositionPadding() {
-    return 10;
-  }
-
-  _getCenterPosition() {
-    return {
-      x: this.target.x + this.target.width / 2 + window.scrollX,
-      y: this.target.y + this.target.height / 2 + window.scrollY,
-    };
-  }
-
-  _updatePosition() {
-    if (this.position != null && this.auto) {
-      const popover = this.shadowRoot.querySelector('.popover');
-      if (popover) {
-        this.target = this.firstElementChild.getBoundingClientRect();
-        if (
-          (this.position === 'top' && !this._hasTopSpace()) ||
-          (this.position === 'bottom' && !this._hasBottomSpace()) ||
-          (this.position === 'left' && !this._hasLeftSpace()) ||
-          (this.position === 'right' && !this._hasRightSpace())
-        ) {
-          const index = [this._hasTopSpace(), this._hasRightSpace(), this._hasBottomSpace(), this._hasLeftSpace()].indexOf(true);
-          if (index > -1) {
-            this.position = ['top', 'right', 'bottom', 'left'][index];
-          }
-        }
-      }
-    }
-  }
-
-  _getMaxX() {
-    return window.innerWidth - this._getPositionPadding();
-  }
-
-  _getMaxY() {
-    return window.innerHeight - this._getPositionPadding();
-  }
-
-  _hasBottomSpace() {
-    const y = this.target.y + this.target.height + this._getContentSize().height + this._getPositionPadding();
-
-    return y <= this._getMaxY();
-  }
-
-  _hasRightSpace() {
-    const y = this.target.x + this.target.width + this._getContentSize().width + this._getPositionPadding();
-
-    return y <= this._getMaxX();
-  }
-
-  _hasTopSpace() {
-    const y = this.target.y - this._getContentSize().height - this._getPositionPadding();
-
-    return y >= this._getPositionPadding();
-  }
-
-  _hasLeftSpace() {
-    const y = this.target.x - this._getContentSize().width - this._getPositionPadding();
-
-    return y >= this._getPositionPadding();
-  }
-
-  updated(props) {
-    if (props.has('width')) {
-      this.shadowRoot.querySelector('.popover').style.setProperty('width', this.width);
-    }
-    this._updatePosition();
-  }
-}
-
-window.customElements.define('gv-popover', GvPopover);
+Object.defineProperty(exports,"__esModule",{value:!0}),exports.GvPopover=void 0;const t=require("lit"),e=require("lit/directives/class-map");class o extends t.LitElement{static get properties(){return{event:{type:String},delay:{type:Number},arrow:{type:Boolean,reflect:!0},small:{type:Boolean,reflect:!0},medium:{type:Boolean,reflect:!0},large:{type:Boolean,reflect:!0},width:{type:String},position:{type:String,reflect:!0},auto:{type:Boolean},_opened:{type:Boolean,attribute:!1}}}static get styles(){return[t.css`:host{cursor:pointer;box-sizing:border-box;display:inline-block;position:relative}.popover{--bgc:var(--gv-popover--bgc, var(--gv-theme-neutral-color-lighter, #fafafa));color:var(--gv-popover--c,var(--gv-theme-font-color-dark,#262626));position:absolute;background-color:var(--bgc);padding:var(--gv-popover--p,.5rem);border-radius:4px;z-index:1000;margin:0 auto;text-align:center;width:auto;box-sizing:content-box}:host([position=bottom]) .popover{top:calc(100% + .4rem);transform:translateX(-50%);left:50%;box-shadow:1px 0 0 0 var(--gv-theme-neutral-color,#f5f5f5),0 2px 3px var(--gv-theme-neutral-color-dark,#bfbfbf)}:host([position=bottom][arrow]) .popover{top:calc(100% + .4rem + 10px)}:host([position=bottom][arrow]) .arrow{top:calc(100% - 8px);transform:translateX(-50%);left:50%}:host([position=top]) .popover{bottom:calc(100% + .4rem);transform:translateX(-50%);left:50%;box-shadow:1px 0 0 0 var(--gv-theme-neutral-color,#f5f5f5),0 -2px 3px var(--gv-theme-neutral-color-dark,#bfbfbf)}:host([position=top][arrow]) .popover{bottom:calc(100% + .4rem + 10px)}:host([position=top][arrow]) .arrow{bottom:calc(100% - 8px);transform:translateX(-50%) rotate(180deg);left:50%}:host([position=left]) .popover{top:50%;transform:translateY(-50%);right:calc(100% + .4rem);box-shadow:-1px 0 0 0 var(--gv-theme-neutral-color,#f5f5f5),-1px 2px 3px var(--gv-theme-neutral-color-dark,#bfbfbf)}:host([position=left][arrow]) .popover{right:calc(100% + .4rem + 10px)}:host([position=left][arrow]) .arrow{top:50%;transform:translateY(-50%) rotate(90deg);right:calc(100% - 8px)}:host([position=right]) .popover{top:50%;transform:translateY(-50%);left:calc(100% + .4rem);box-shadow:1px 0 0 1px var(--gv-theme-neutral-color,#f5f5f5),1px 1px 1px var(--gv-theme-neutral-color-dark,#bfbfbf)}:host([position=right][arrow]) .popover{left:calc(100% + .4rem + 10px)}:host([position=right][arrow]) .arrow{left:calc(100% - 8px);top:50%;transform:translateY(-50%) rotate(-90deg)}.inline .popover{white-space:nowrap}:host([small]) .popover{width:200px}:host([medium]) .popover{width:350px}:host([large]) .popover{width:500px}.content{width:100%}.arrow,.popover{opacity:0;visibility:hidden;transition:opacity .3s ease-in-out}.open .arrow,.open .popover{display:block;opacity:1;visibility:visible}.arrow{width:25px;height:25px;z-index:101;position:absolute;overflow:hidden}.arrow:after{content:'';position:absolute;width:12px;height:12px;background:var(--gv-popover--bgc,var(--gv-theme-neutral-color-lighter,#fafafa));transform:rotate(45deg);top:19px;left:6px;border:1px solid var(--gv-popover--bdc,var(--gv-theme-neutral-color,#f5f5f5))}`]}constructor(){super(),this.event="mouseover",this._closeHandler=this._close.bind(this),this.delay=0,this.arrow=!1,this.position="bottom",this.auto=!1}_open(t){"click"===this.event&&window.removeEventListener(this.event,this._closeHandler),this._opened=!0,"click"===this.event&&setTimeout((()=>window.addEventListener(this.event,this._closeHandler))),this.delay>0&&setTimeout((()=>this._close({})),this.delay)}close(){this._close({})}_close(t){if(this._opened&&(t.target!==this.firstElementChild||"click"!==this.event)){const t=this.shadowRoot.querySelector(".open");t.classList.add("close"),setTimeout((()=>{t.classList.remove("close"),this._opened=!1}),200)}}render(){const o=null==this.width&&!this.small&&!this.medium&&!this.large,i={open:this._opened,content:!0,inline:o};return t.html`<div class="${(0,e.classMap)(i)}"><slot></slot>${this.arrow?t.html`<div class="arrow"></div>`:""}<div class="popover">${this.renderContent()}</div></div>`}renderContent(){return t.html`<slot name="popover"></slot>`}firstUpdated(t){setTimeout((()=>{this.addEventListener(this.event,this._open.bind(this)),this.event.startsWith("mouse")&&0===this.delay&&this.addEventListener("mouseleave",this._close.bind(this))}))}_getContentSize(){const t=this.shadowRoot.querySelector(".popover");return{width:t.offsetWidth,height:t.offsetHeight}}_getPositionPadding(){return 10}_getCenterPosition(){return{x:this.target.x+this.target.width/2+window.scrollX,y:this.target.y+this.target.height/2+window.scrollY}}_updatePosition(){if(null!=this.position&&this.auto){if(this.shadowRoot.querySelector(".popover")&&(this.target=this.firstElementChild.getBoundingClientRect(),"top"===this.position&&!this._hasTopSpace()||"bottom"===this.position&&!this._hasBottomSpace()||"left"===this.position&&!this._hasLeftSpace()||"right"===this.position&&!this._hasRightSpace())){const t=[this._hasTopSpace(),this._hasRightSpace(),this._hasBottomSpace(),this._hasLeftSpace()].indexOf(!0);t>-1&&(this.position=["top","right","bottom","left"][t])}}}_getMaxX(){return window.innerWidth-this._getPositionPadding()}_getMaxY(){return window.innerHeight-this._getPositionPadding()}_hasBottomSpace(){return this.target.y+this.target.height+this._getContentSize().height+this._getPositionPadding()<=this._getMaxY()}_hasRightSpace(){return this.target.x+this.target.width+this._getContentSize().width+this._getPositionPadding()<=this._getMaxX()}_hasTopSpace(){return this.target.y-this._getContentSize().height-this._getPositionPadding()>=this._getPositionPadding()}_hasLeftSpace(){return this.target.x-this._getContentSize().width-this._getPositionPadding()>=this._getPositionPadding()}updated(t){t.has("width")&&this.shadowRoot.querySelector(".popover").style.setProperty("width",this.width),this._updatePosition()}}exports.GvPopover=o,window.customElements.define("gv-popover",o);

package/src/molecules/gv-promote.js

@@ -1,209 +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 { 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);
+Object.defineProperty(exports,"__esModule",{value:!0}),exports.GvPromote=void 0;const e=require("lit"),t=require("lit/directives/class-map"),i=require("../lib/events"),r=require("../lib/i18n"),s=require("../mixins/item-resource"),o=require("../lib/item"),n=require("../lib/utils");require("../atoms/gv-image"),require("../atoms/gv-button"),require("../molecules/gv-rating"),require("../molecules/gv-metrics");class l extends((0,s.ItemResource)(e.LitElement)){static get properties(){return{...super.properties,limit:{type:Number}}}static get styles(){return[...super.styles,e.css`:host{box-sizing:border-box;display:inline-block;margin:.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,#fff));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 0;flex-grow:1}.description-large{text-align:justify}.infos{display:flex;justify-content:flex-end;margin:.5rem .2rem;align-items:center}gv-metrics{display:flex;height:100%;justify-content:flex-end;align-items:stretch}.labels{text-align:right}`]}_onClick(){(0,i.dispatchCustomEvent)(this,"click",{data:this._item,href:this.href})}render(){if(this._invisible)return"";const i=(0,o.getOwner)(this._item);return e.html`<div class="container"><div class="${(0,t.classMap)({skeleton:this._skeleton,image:!0})}">${this._renderImage()}</div><div class="content">${this._error&&!this._skeleton?e.html`<p class="description error">${(0,r.i18n)("gv-promote.error")}</p>`:e.html`${this._empty&&!this._skeleton?e.html`<p class="description empty">${(0,r.i18n)("gv-promote.empty")}</p>`:e.html`<div class="${(0,t.classMap)({skeleton:this._skeleton,title:!0})}"><h2>${(0,o.getTitle)(this._item)}</h2><span class="version">${(0,o.getVersion)(this._item)}</span></div>${null!=i&&i.trim().length>0?e.html`<div class="owner"><gv-icon shape="general:user" size="8px"></gv-icon>${i}</div>`:""}<p class="${(0,t.classMap)({skeleton:this._skeleton,description:!0,"description-large":(0,o.getDescription)(this._item).split(" ").length>10})}">${(0,n.truncate)((0,o.getDescription)(this._item),this.limit)}</p><div class="${(0,t.classMap)({skeleton:this._skeleton,infos:!0})}">${this._renderMetricsWithRating()}</div><div class="labels">${this._renderLabels(!0)}</div><gv-button ?skeleton="${this._skeleton}" .href="${this.href}" @click="${this._onClick}">${(0,r.i18n)("gv-promote.view")}</gv-button>`}`}</div></div>`}}exports.GvPromote=l,window.customElements.define("gv-promote",l);