File size: 2,960 Bytes
46c141f |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 |
class ProcessPhase extends HTMLElement {
connectedCallback() {
const phase = this.getAttribute('phase') || 'Discovery';
const color = this.getAttribute('color') || 'blue-100';
const start = this.getAttribute('start') || '1';
const span = this.getAttribute('span') || '4';
const icon = this.getAttribute('icon') || 'search';
const title = this.getAttribute('title') || 'Process Step';
const desc = this.getAttribute('desc') || '';
this.attachShadow({ mode: 'open' });
this.shadowRoot.innerHTML = `
<style>
.phase-container {
position: relative;
grid-column-start: ${start};
grid-column-end: span ${span};
margin-bottom: 1rem;
}
.phase-pill {
border-radius: 9999px;
padding: 0.75rem 1.5rem;
display: flex;
align-items: center;
background-color: rgba(219, 234, 254, 0.8);
backdrop-filter: blur(4px);
box-shadow: 0 1px 3px rgba(0,0,0,0.1);
transition: all 0.3s ease;
}
.phase-pill:hover {
box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}
.phase-icon {
flex-shrink: 0;
height: 2.5rem;
width: 2.5rem;
border-radius: 9999px;
background: white;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 1px 2px rgba(0,0,0,0.05);
}
.phase-content {
margin-left: 1rem;
}
.phase-title {
color: #1f2937;
font-weight: 500;
font-size: 0.9375rem;
margin: 0;
}
.phase-desc {
color: #4b5563;
font-size: 0.75rem;
margin-top: 0.25rem;
}
</style>
<div class="phase-container">
<div class="phase-pill">
<div class="phase-icon">
<i data-feather="${icon}"></i>
</div>
<div class="phase-content">
<h3 class="phase-title">${title}</h3>
${desc ? `<p class="phase-desc">${desc}</p>` : ''}
</div>
</div>
</div>
`;
// Initialize feather icons in shadow DOM
if (window.feather) {
window.feather.replace({ class: 'phase-icon i' });
}
}
}
customElements.define('process-phase', ProcessPhase); |