@rxdi/ui-kit/pagination/pagination.component.js

UI Components for building graphql-server website

"use strict";
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;
};
var __metadata = (this && this.__metadata) || function (k, v) {
    if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.PaginationComponent = void 0;
const lit_html_1 = require("@rxdi/lit-html");
/**
 * @customElement rx-pagination
 */
let PaginationComponent = class PaginationComponent extends lit_html_1.LitElement {
    constructor() {
        super(...arguments);
        this.pages = [];
    }
    prev() {
        const index = this.pages.findIndex((v) => v.active);
        if (index === 0) {
            return;
        }
        this.pages = this.pages.filter((p, i) => {
            if (i === index - 1) {
                this.OnChange(i, p);
                p.active = true;
            }
            else {
                p.active = false;
            }
            return p;
        });
    }
    next() {
        const index = this.pages.findIndex((v) => v.active);
        if (index + 1 === this.pages.length) {
            return;
        }
        this.pages = this.pages.filter((p, i) => {
            if (i === index + 1) {
                this.OnChange(i, p);
                p.active = true;
            }
            else {
                p.active = false;
            }
            return p;
        });
    }
    OnChange(index, page) {
        this.dispatchEvent(new CustomEvent('change', {
            detail: { index: index + 1, page },
        }));
    }
    clicked(index) {
        this.pages = this.pages.map((p, i) => {
            if (i === index) {
                this.OnChange(i, p);
                p.active = true;
            }
            else {
                p.active = false;
            }
            return p;
        });
    }
};
__decorate([
    (0, lit_html_1.property)({ type: Array }),
    __metadata("design:type", Array)
], PaginationComponent.prototype, "pages", void 0);
PaginationComponent = __decorate([
    (0, lit_html_1.Component)({
        selector: 'rx-pagination',
        style: (0, lit_html_1.css) `
    .rx-pagination {
      display: flex;
      flex-wrap: wrap;
      margin: 0px;
      padding: 0;
      margin-left: -20px;
      list-style: none;
      user-select: none;
    }

    .rx-pagination > * {
      flex: none;
      padding-left: 20px;
      position: relative;
    }

    .rx-pagination > .rx-active > * {
      color: #5a5a5a;
    }

    a:active {
      color: #a3a3a3;
    }

    a:hover {
      color: #888888;
    }

    li a {
      cursor: pointer;
      font-size: 14px;
      color: #b9b9b9;
    }
    .rx-icon:not(.rx-preserve) [stroke*='#']:not(.rx-preserve) {
      stroke: currentcolor;
    }
  `,
        template() {
            return (0, lit_html_1.html) `
      <ul class="rx-pagination">
        <li class="rx-first-column">
          <a
            ><span
              @click=${() => this.prev()}
              class="rx-icon rx-pagination-previous"
              ><svg width="7" height="14" viewBox="0 0 7 12">
                <polyline
                  fill="none"
                  stroke="#000"
                  stroke-width="1.5"
                  points="6 1 1 6 6 11"
                ></polyline></svg></span
          ></a>
        </li>
        ${this.pages.map((v, index) => (0, lit_html_1.html) `
            <li class=${(0, lit_html_1.classMap)({ 'rx-active': v.active })}>
              <a @click=${() => this.clicked(index)}>${v.value || index + 1}</a>
            </li>
          `)}
        <li>
          <a
            ><span
              @click=${() => this.next()}
              class="rx-icon rx-pagination-next"
              ><svg width="7" height="14" viewBox="0 0 7 12">
                <polyline
                  fill="none"
                  stroke="#000"
                  stroke-width="1.5"
                  points="1 1 6 6 1 11"
                ></polyline></svg></span
          ></a>
        </li>
      </ul>
    `;
        },
    })
], PaginationComponent);
exports.PaginationComponent = PaginationComponent;
//# sourceMappingURL=pagination.component.js.map