import { css, html, nothing } from 'lit'; import { customElement } from 'lit/decorators.js'; import type { GetAngelNumberResponse } from '../types/index.js'; import { buildMeaningSections } from '../utils/angel-sections.js'; import { RoxyDataElement } from '../utils/base-element.js'; import { baseStyles } from '../utils/base-styles.js'; /** * Angel number card. Renders /angel-numbers/numbers/{number}: the number as a hero numeral, its title and core message, the pattern type / digit root / energy badges, keyword chips, the life-area interpretations (spiritual, love, career, money, twin flame) plus the biblical and shadow readings as an exclusive accordion, the affirmation, and the action steps. */ @customElement('roxy-angel-number-card') export class RoxyAngelNumberCard extends RoxyDataElement { static styles = [ baseStyles, css` .card { background: var(--roxy-surface, #fff); color: var(--roxy-fg, #0a0a0a); border: 1px solid var(--roxy-border, #e4e4e7); border-radius: var(--roxy-radius-md, 8px); padding: var(--roxy-space-lg, 1.5rem); box-shadow: var(--roxy-shadow-sm); display: grid; gap: var(--roxy-space-md, 1rem); } .hero { display: flex; align-items: center; gap: var(--roxy-space-md, 1rem); } .numeral { font-size: 3rem; line-height: 1; font-weight: var(--roxy-weight-bold, 600); color: var(--roxy-accent-ink, #b45309); font-variant-numeric: tabular-nums; } .label { margin: 0; font-size: var(--roxy-text-xs, 0.75rem); color: var(--roxy-muted, #71717a); text-transform: uppercase; letter-spacing: 0.06em; } .title { margin: 0; font-size: var(--roxy-text-lg, 1.125rem); font-weight: var(--roxy-weight-bold, 600); } .core { margin: 0; color: var(--roxy-fg, #0a0a0a); line-height: 1.6; } .badges { display: flex; flex-wrap: wrap; gap: var(--roxy-space-xs, 0.25rem); } .badge { display: inline-flex; align-items: center; gap: var(--roxy-space-xs, 0.25rem); padding: 3px 10px; border-radius: var(--roxy-radius-full, 9999px); font-size: var(--roxy-text-xs, 0.75rem); font-weight: var(--roxy-weight-bold, 600); background: color-mix(in srgb, var(--roxy-border, #e4e4e7) 35%, transparent); color: var(--roxy-fg, #0a0a0a); text-transform: capitalize; } .badge.positive { background: color-mix(in srgb, var(--roxy-success, #16a34a) 16%, transparent); color: var(--roxy-success-fg, #166534); } .badge.cautionary { background: color-mix(in srgb, var(--roxy-danger, #dc2626) 16%, transparent); color: var(--roxy-danger-fg, #991b1b); } .badge.neutral { background: color-mix(in srgb, var(--roxy-info, #0284c7) 16%, transparent); color: var(--roxy-info-fg, #075985); } .chips { display: flex; flex-wrap: wrap; gap: var(--roxy-space-xs, 0.25rem); } .chips span { background: color-mix(in srgb, var(--roxy-accent, #f59e0b) 14%, transparent); padding: 2px 8px; border-radius: var(--roxy-radius-full, 9999px); font-size: var(--roxy-text-xs, 0.75rem); } .sections { display: grid; gap: var(--roxy-space-xs, 0.25rem); border-top: 1px solid var(--roxy-border, #e4e4e7); padding-top: var(--roxy-space-md, 1rem); } details { border: 1px solid var(--roxy-border, #e4e4e7); border-radius: var(--roxy-radius-sm, 4px); overflow: hidden; } summary { cursor: pointer; padding: var(--roxy-space-sm, 0.5rem) var(--roxy-space-md, 1rem); font-weight: var(--roxy-weight-bold, 600); font-size: var(--roxy-text-sm, 0.875rem); list-style-position: inside; } details p { margin: 0; padding: 0 var(--roxy-space-md, 1rem) var(--roxy-space-md, 1rem); font-size: var(--roxy-text-sm, 0.875rem); color: var(--roxy-fg, #0a0a0a); line-height: 1.6; } .affirmation { margin: 0; background: color-mix(in srgb, var(--roxy-accent, #f59e0b) 12%, transparent); border-left: 3px solid var(--roxy-accent, #f59e0b); padding: var(--roxy-space-sm, 0.5rem) var(--roxy-space-md, 1rem); border-radius: var(--roxy-radius-sm, 4px); font-style: italic; color: var(--roxy-fg, #0a0a0a); } .steps h3 { margin: 0 0 var(--roxy-space-xs, 0.25rem); font-size: var(--roxy-text-xs, 0.75rem); color: var(--roxy-muted, #71717a); text-transform: uppercase; letter-spacing: 0.06em; } .steps ul { margin: 0; padding-left: var(--roxy-space-md, 1rem); font-size: var(--roxy-text-sm, 0.875rem); color: var(--roxy-fg, #0a0a0a); display: grid; gap: 2px; } `, ]; protected renderData(d: GetAngelNumberResponse) { const energy = (d.energy ?? '').toLowerCase(); const energyClass = energy === 'positive' || energy === 'cautionary' || energy === 'neutral' ? energy : ''; const keywords = d.keywords ?? []; const steps = d.actionSteps ?? []; return html`
${d.number ? html`
${d.number}
` : nothing}

Angel number

${d.title ? html`

${d.title}

` : nothing}
${d.coreMessage ? html`

${d.coreMessage}

` : nothing}
${d.type ? html`${d.type}` : nothing} ${typeof d.digitRoot === 'number' ? html`Digit root ${d.digitRoot}` : nothing} ${d.energy ? html`${d.energy}` : nothing}
${ keywords.length > 0 ? html`
${keywords.map((k) => html`${k}`)}
` : nothing } ${this.renderSections(d)} ${d.affirmation ? html`

${d.affirmation}

` : nothing} ${ steps.length > 0 ? html`

Action steps

    ${steps.map((s) => html`
  • ${s}
  • `)}
` : nothing }
`; } protected renderEmpty() { return html`
No angel number
`; } private renderSections(d: NonNullable) { const sections = buildMeaningSections(d.meaning, d.biblical, d.shadow); if (sections.length === 0) return nothing; return html`
${sections.map( (s, i) => html`
${s.label}

${s.body}

`, )}
`; } } declare global { interface HTMLElementTagNameMap { 'roxy-angel-number-card': RoxyAngelNumberCard; } }