poe-custom-elements/dist/elements/item-info/poe-item-info-content.js

Path of Exile custom elements

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);
};
import { LitElement, html, css, nothing } from 'lit';
import { customElement, property } from 'lit/decorators.js';
import './poe-item-info-separator.js';
import './poe-item-info-property.js';
import './poe-item-info-requirements.js';
import { frameKind } from '../../lib/internal.js';
let PoeItemInfoContentElement = class PoeItemInfoContentElement extends LitElement {
    render() {
        return html `<div class="content">
			${[
            this.properties.length
                ? html `<ul>
							${this.properties.map(property => {
                    return html `<li>
									<poe-item-info-property .property=${property}></poe-item-info-property>
								</li>`;
                })}
						</ul> `
                : nothing,
            this.item.itemLevel
                ? html `<p>Monster Level: <span class="monster-level">${this.item.itemLevel}</span></p>`
                : nothing,
            this.requirements.length
                ? html ` <poe-item-info-requirements
							.requirements=${this.requirements}
						></poe-item-info-requirements>`
                : nothing,
            this.enchantments.length
                ? html `${this.enchantments.map(enc => enc.split('\n').map(enc => html `<p class="enchant">${enc}</p>`))}`
                : nothing,
            this.implicits.length
                ? html ` ${this.implicits.map(imp => html `<p class="implicitMod">${imp}</p>`)} `
                : nothing,
            this.explicits.length || this.crafts.length || this.fracturedMods.length
                ? html `
							${this.fracturedMods.map(frac => html `<p class="fractured">${frac}</p>`)}
							${this.explicits.map(exp => html `<p class="explicitMod">${exp}</p>`)}
							${this.crafts.map(craft => html `<p class="craft">${craft}</p>`)}
						`
                : nothing,
            this.item.identified ? nothing : html ` <p class="unidentified">Unidentified</p>`,
            this.item.corrupted ? html ` <p class="corrupted">corrupted</p>` : nothing,
            this.item.flavourText
                ? html `${this.item.flavourText.map((line, i, arr) => {
                    if (i === arr.length - 1 && line.includes('<default>')) {
                        return html `<p class="flavour-text_default mt-16">
									${line.match(/{(.*?)}/)?.[1] ?? ''}
								</p>`;
                    }
                    else {
                        return html `<p class="flavour-text">${line}</p>`;
                    }
                })}`
                : nothing,
            this.item.descrText ? html `<p class="description-text">${this.item.descrText}</p>` : nothing,
        ]
            .filter(el => el !== nothing)
            .flatMap((el, index, arr) => index === arr.length - 1
            ? [el]
            : [
                el,
                html `<poe-item-info-separator
									.kind=${frameKind(this.item.frameType) ?? 'rare'}
								></poe-item-info-separator>`,
            ])}
		</div>`;
    }
    firstUpdated() {
        this.style.setProperty('--description-width', window.getComputedStyle(this).width);
    }
    get enchantments() {
        return this.item.enchantMods ?? [];
    }
    get properties() {
        return this.item.properties ?? [];
    }
    get requirements() {
        return this.item.requirements ?? [];
    }
    get implicits() {
        return this.item.implicitMods ?? [];
    }
    get explicits() {
        return this.item.explicitMods ?? [];
    }
    get crafts() {
        return this.item.craftedMods ?? [];
    }
    get fracturedMods() {
        return this.item.fracturedMods ?? [];
    }
    static { this.styles = css `
		* {
			padding: 0;
			margin: 0;
			box-sizing: border-box;
		}

		ul {
			list-style: none;
		}

		:host {
			font-family: fontin;
			display: inline-block;
			background-color: rgba(0, 0, 0, 0.8);
			width: 100%;
			height: 100%;
			color: #7f7f7f;
			--description-width: 300px;
			max-width: 500px;
		}

		.content {
			padding-top: 0.4rem;
			padding-bottom: 0.5rem;
			text-align: center;
			display: grid;
			gap: 0.05rem;
		}

		.augmented,
		.implicitMod,
		.explicitMod {
			color: #88f;
		}

		.craft,
		.enchant {
			color: #b4b4ff;
		}

		.fractured {
			color: #a29162;
		}

		.unidentified,
		.corrupted {
			color: #d20000;
		}

		.monster-level {
			color: #fff;
		}

		.flavour-text {
			color: #af6025;
			font-style: italic;
		}
		.flavour-text_default {
			color: #7f7f7f;
			font-style: italic;
		}

		.mt-16 {
			margin-top: 1rem;
		}

		.description-text {
			margin-inline: auto;
			display: flex;
			font-style: italic;
			max-width: var(--description-width);
			text-wrap: balance;
		}
	`; }
};
__decorate([
    property({ type: Object }),
    __metadata("design:type", Object)
], PoeItemInfoContentElement.prototype, "item", void 0);
PoeItemInfoContentElement = __decorate([
    customElement('poe-item-info-content')
], PoeItemInfoContentElement);
export { PoeItemInfoContentElement };
//# sourceMappingURL=poe-item-info-content.js.map