@vidal-community/vidal-web-components/vidal-reco-clic/vidal-reco-clic-reco-selector.js

Vidal Web Components

var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
    return c > 3 && r && Object.defineProperty(target, key, r), r;
};
import { css, html, LitElement } from 'lit';
import { customElement, property } from 'lit/decorators.js';
let VidalRecoClicRecoSelector = class VidalRecoClicRecoSelector extends LitElement {
    constructor() {
        super(...arguments);
        this.isOpen = false;
    }
    clickOnLink(reco) {
        this.currentReco = reco;
        this.switchReco(reco);
    }
    render() {
        var _a, _b;
        this.currentReco = this.currentReco
            ? this.currentReco
            : this.recos && ((_a = this.recos) === null || _a === void 0 ? void 0 : _a.length) > 0
                ? this.recos[0]
                : undefined;
        const getHtml = (reco) => {
            var _a;
            return html `<div
        class="reco-item-option"
        @click="${() => this.clickOnLink(reco)}"
      >
        <a
          class="${((_a = this.currentReco) === null || _a === void 0 ? void 0 : _a.recoId) === reco.recoId ? 'selected' : ''}"
          id="${reco.recoId}"
          >${reco.sharedText.querySelector('.titreco')
                .innerText}</a
        >
      </div>`;
        };
        return html ` <div class="${this.isOpen ? 'wrapper open' : 'wrapper close'}">
      ${(_b = this.recos) === null || _b === void 0 ? void 0 : _b.map((reco) => getHtml(reco))}
    </div>`;
    }
};
VidalRecoClicRecoSelector.styles = css `
    .wrapper {
      position: absolute;
      border-width: 8px 0.1px;
      border-style: solid;
      border-color: rgb(67, 67, 67);
      border-radius: 10px;
      background: white;
      padding: 10px;
      top: 50px;
      max-height: 75vh;
      width: 300px;
      color: black;
      font-size: 11px;
      z-index: 2;
      overflow: auto;
      display: flex;
      flex-direction: column;
      justify-content: flex-start;
      align-items: flex-start;
    }
    .wrapper.close {
      visibility: hidden;
    }

    .wrapper.open {
      visibility: visible;
    }

    .wrapper .reco-item-option:before {
      content: '\\27A4';
      margin-right: 5px;
      font-size: 0.7em;
    }

    .wrapper .reco-item-option {
      width: 100%;
      padding: 15px 0px;
      border-bottom: 2px solid grey;
      cursor: pointer;
    }

    .wrapper .reco-item-option a {
      text-transform: uppercase;
      text-decoration: none;
      color: black;
      font-weight: bold;
    }
    .wrapper .reco-item-option a.selected {
      color: red;
    }
  `;
__decorate([
    property({ type: Array })
], VidalRecoClicRecoSelector.prototype, "recos", void 0);
__decorate([
    property({ attribute: false })
], VidalRecoClicRecoSelector.prototype, "switchReco", void 0);
__decorate([
    property({ type: Boolean })
], VidalRecoClicRecoSelector.prototype, "isOpen", void 0);
VidalRecoClicRecoSelector = __decorate([
    customElement('vidal-reco-clic-reco-selector')
], VidalRecoClicRecoSelector);
export { VidalRecoClicRecoSelector };
//# sourceMappingURL=vidal-reco-clic-reco-selector.js.map