intervention-pages/dist/common/layout/status/etools-status.js

PD pages

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 { LitElement, html, property, customElement } from 'lit-element';
import '@polymer/iron-icons/iron-icons';
import { completedStatusIcon } from './status-icons';
import { layoutHorizontal, layoutCenter } from '../../styles/flex-layout-styles';
/**
 * @LitElement
 * @customElement
 */
let EtoolsStatus = class EtoolsStatus extends LitElement {
    constructor() {
        super(...arguments);
        this.activeStatus = 'submitted-accepted';
        this.activeStatusIndex = 0;
        // init with a default list of statuses (for testing)
        this.statuses = [
            {
                status: 'draft',
                label: 'Draft'
            },
            {
                status: 'submitted-accepted',
                label: 'Submitted/Accepted'
            },
            {
                statusOptions: [
                    // some statuses may share the same position
                    {
                        status: 'report-submitted',
                        label: 'Report submitted'
                    },
                    {
                        status: 'rejected',
                        label: 'Rejected'
                    }
                ]
            },
            {
                status: 'completed',
                label: 'Completed'
            }
        ];
    }
    render() {
        // language=HTML
        return html `
      <style>
        :host {
          ${layoutHorizontal}
          ${layoutCenter}
          border-bottom: 1px solid var(--dark-divider-color);
          padding: 24px;
          background-color: var(--primary-background-color);
        }

        .status {
          ${layoutHorizontal}
          ${layoutCenter}
          color: var(--secondary-text-color);
          font-size: 16px;
        }

        .status:not(:last-of-type)::after {
          content: '';
          display: inline-block;
          vertical-align: middle;
          width: 40px;
          height: 1px;
          margin: 0 24px;
          border-top: 1px solid var(--secondary-text-color);
        }

        .status .icon {
          display: inline-block;
          text-align: center;
          width: 24px;
          height: 24px;
          border-radius: 50%;
          color: #fff;
          background-color: var(--secondary-text-color);
          margin-right: 8px;
          font-size: 14px;
          line-height: 24px;
        }

        .status.active .icon {
          background-color: var(--primary-color);
        }

        .status.completed .icon {
          background-color: var(--success-color);
          fill: #ffffff;
        }
      </style>
      ${this.filteredStatuses.map((item, index) => this.getStatusHtml(item, index))}
    `;
    }
    get filteredStatuses() {
        return this.filterStatuses(this.statuses, this.activeStatus);
    }
    getStatusHtml(item, index) {
        const completed = this.isCompleted(index, this.activeStatusIndex);
        return html `
      <div class="status ${this.getStatusClasses(index, this.activeStatusIndex)}">
        <span class="icon">
          ${completed ? html `${completedStatusIcon}` : html `${this.getBaseOneIndex(index)}`}
        </span>
        <span class="label">${item.label}</span>
      </div>
    `;
    }
    /**
     * Filter statuses list and prepare the ones that will be displayed
     * @param statuses
     * @param activeStatus
     */
    filterStatuses(statuses, activeStatus) {
        let displayStatuses = [];
        if (statuses.length > 0) {
            displayStatuses = statuses.map((s, index) => {
                if (s.statusOptions && s.statusOptions.length > 0) {
                    const aStatus = s.statusOptions.find((st) => st.status === activeStatus);
                    // return the active status from a list of statuses that can share the same position
                    // if active status is not in this list, return first IEtoolsStatusItem
                    if (aStatus) {
                        // set active status index
                        this.activeStatusIndex = index;
                    }
                    return aStatus ? aStatus : s.statusOptions[0];
                }
                else {
                    if (s.status === activeStatus) {
                        this.activeStatusIndex = index;
                    }
                    return s;
                }
            });
        }
        return displayStatuses;
    }
    /**
     * Get status icon or icon placeholder
     * @param index
     */
    getBaseOneIndex(index) {
        return index + 1;
    }
    isCompleted(index, activeStatusIndex) {
        return index < activeStatusIndex || activeStatusIndex === this.statuses.length - 1;
    }
    getStatusClasses(index, activeStatusIndex) {
        const classes = [];
        if (index === activeStatusIndex) {
            classes.push('active');
        }
        if (this.isCompleted(index, activeStatusIndex)) {
            classes.push('completed');
        }
        return classes.join(' ');
    }
};
__decorate([
    property({ type: String })
], EtoolsStatus.prototype, "activeStatus", void 0);
__decorate([
    property({ type: Number })
], EtoolsStatus.prototype, "activeStatusIndex", void 0);
__decorate([
    property({ type: Array })
], EtoolsStatus.prototype, "statuses", void 0);
EtoolsStatus = __decorate([
    customElement('etools-status')
], EtoolsStatus);
export { EtoolsStatus };