lifecycle-timeline 1.2.3 → 1.2.4

package/README.md

@@ -27,6 +27,9 @@ A premium, interactive Vanilla JS component for visualizing product lifecycles,
 npm install lifecycle-timeline
 ```
 
+> [!TIP]
+> Using Angular? Check out our [Angular Integration Guide](ANGULAR_INTEGRATION.md).
+
 ### Manual Installation
 Download the files from the `dist` folder: `timeline.js` (ESM), `timeline.umd.cjs` (UMD), and `timeline.css`.
 

package/dist/timeline.css

@@ -0,0 +1 @@
+:root{--bg-page: #f9fafb;--bg-card: #ffffff;--bg-track: #e5e7eb;--text-primary: #1f2937;--text-secondary: #6b7280;--text-inverse: #ffffff;--border-color: #e5e7eb;--line-color: #e5e7eb;--grid-line: #9ca3af;--accent-oss: #99e67d;--accent-ent: #ffe88e;--current-date: #086dc3;--font-family: "Inter", system-ui, -apple-system, sans-serif;--tooltip-bg: #ffffff;--tooltip-shadow: rgba(0, 0, 0, .1)}[data-theme=dark]{--bg-page: #111827;--bg-card: #1f2937;--bg-track: #374151;--text-primary: #f9fafb;--text-secondary: #9ca3af;--border-color: #374151;--line-color: #374151;--grid-line: #6b7280;--tooltip-bg: #1f2937;--tooltip-shadow: rgba(0, 0, 0, .5);--accent-oss: #78bd5d;--accent-ent: #e3c456}body{margin:0;padding:0;background-color:var(--bg-page);font-family:var(--font-family);color:var(--text-primary);display:flex;justify-content:center;align-items:center;min-height:100vh;transition:background-color .3s ease,color .3s ease}.page-container{width:100%;max-width:1200px;padding:2rem;background:var(--bg-card);border-radius:12px;box-shadow:0 4px 6px -1px #0000001a,0 2px 4px -1px #0000000f;transition:background-color .3s ease}.timeline-wrapper{position:relative;padding-top:40px;padding-bottom:60px;overflow-x:auto;scrollbar-width:thin}.timeline-header{display:flex;position:sticky;left:0;margin-bottom:20px}.timeline-tracks{position:relative;padding-top:20px}.timeline-axis{display:flex;border-bottom:1px solid var(--border-color);margin-bottom:10px;padding-bottom:8px;position:relative}.timeline-year{flex:1;font-size:.875rem;font-weight:600;color:var(--text-secondary);border-left:1px dashed var(--border-color);padding-left:0;text-align:center;box-sizing:border-box}.timeline-year:first-child{border-left:none}.timeline-row{display:flex;align-items:center;margin-bottom:1.5rem;position:relative;height:36px;z-index:1;opacity:0;transform:translateY(10px);transition:opacity .4s ease,transform .4s ease}.timeline-row.row-visible{opacity:1;transform:translateY(0)}.version-label{width:80px;min-width:80px;box-sizing:border-box;padding:4px;border-radius:12px;flex-shrink:0;font-weight:600;font-size:.85rem;color:var(--text-primary);margin-right:16px;text-align:center;background-color:transparent;cursor:pointer;transition:all .3s ease;position:sticky;left:0;z-index:10}.version-label:hover{background-color:var(--bg-track);transform:scale(1.05);box-shadow:0 4px 12px #0000001a}.version-label a.version-link{text-decoration:none;color:inherit;display:block;width:100%;height:100%}.version-label a.version-link:hover{text-decoration:underline;opacity:.8}.status-oss{background-color:var(--accent-oss);color:#000}.status-ent{background-color:var(--accent-ent);color:#000}.status-expired{background-color:var(--bg-track);color:var(--text-secondary)}.track-container{flex-grow:1;position:relative;height:100%;background:var(--bg-track);border-radius:0;overflow:hidden;transition:background-color .3s ease}.bar-segment{position:absolute;height:100%;top:0;transition:opacity .3s ease;display:flex;align-items:center;justify-content:center;color:#fff;font-size:.75rem;font-weight:500;overflow:hidden;white-space:nowrap;box-shadow:0 1px 2px #0000001a}.bar-oss{background:linear-gradient(to bottom,#dcfce7 0%,var(--accent-oss) 100%);z-index:2;border-radius:0;height:66%;top:auto;bottom:0}[data-theme=dark] .bar-oss{background:linear-gradient(to bottom,#a7f3d0 0%,var(--accent-oss) 100%)}.bar-ent{background:linear-gradient(to bottom,#fef9c3 0%,var(--accent-ent) 100%);z-index:1;border-radius:0;opacity:.9}.grid-lines-container{position:absolute;inset:0 0 0 96px;pointer-events:none;z-index:5}.indicators-container{position:absolute;inset:0 0 0 96px;pointer-events:none;z-index:20}.current-date-indicator{position:absolute;top:-30px;bottom:0;width:3px;background-image:linear-gradient(to bottom,var(--current-date) 60%,transparent 60%);background-size:3px 20px;background-repeat:repeat-y;border-left:none;z-index:20;pointer-events:none}@keyframes pulse-blue{0%{box-shadow:0 0 #086dc3b3}70%{box-shadow:0 0 0 6px #086dc300}to{box-shadow:0 0 #086dc300}}.current-date-badge{position:absolute;top:100%;margin-top:8px;left:50%;transform:translate(-50%);background-color:var(--current-date);color:#fff;padding:4px 12px;border-radius:12px;font-size:.75rem;font-weight:600;white-space:nowrap;box-shadow:0 2px 4px #086dc333;z-index:25;animation:pulse-blue 2s infinite}.year-grid-line{position:absolute;top:0;bottom:0;border-left:2px solid var(--grid-line);opacity:1;z-index:5;pointer-events:none}.timeline-tooltip-overlay{position:absolute;background:var(--tooltip-bg);color:var(--text-primary);padding:10px 14px;border-radius:8px;font-size:.85rem;box-shadow:0 10px 15px -3px var(--tooltip-shadow),0 4px 6px -4px var(--tooltip-shadow);border:1px solid var(--border-color);pointer-events:none;z-index:10000;transition:opacity .15s ease-out;line-height:1.4}.tooltip-header{font-weight:700;margin-bottom:4px;color:var(--current-date);text-transform:uppercase;font-size:.75rem;letter-spacing:.05em}.tooltip-date strong{color:var(--text-secondary)}.timeline-row{transition:opacity .3s ease,transform .3s ease,height .3s ease}.timeline-row[style*="display: none"]{opacity:0;transform:translateY(10px)}.bar-segment{transition:transform .2s ease,box-shadow .2s ease}.bar-segment:hover{box-shadow:0 4px 12px #0000001a}.bar-segment:focus-visible{outline:2px solid var(--text-primary);outline-offset:-2px;z-index:100}.track-container{transition:background-color .3s ease}.release-legend{margin:40px auto 0;padding:24px;background-color:var(--bg-card);border:1px solid var(--border-color);border-radius:12px;display:flex;flex-direction:column;gap:16px;max-width:800px}.legend-block{display:flex;align-items:flex-start;gap:12px}.legend-icon{width:20px;height:20px;border-radius:4px;flex-shrink:0;margin-top:2px}.legend-block h3{margin:0 0 4px;font-size:1rem;font-weight:700;color:var(--text-primary)}.legend-block p{margin:0;font-size:.9rem;color:var(--text-secondary);line-height:1.5}.legend-block.oss .legend-icon{background-color:var(--accent-oss)}.legend-block.commercial .legend-icon{background-color:var(--accent-ent)}.legend-block.eol .legend-icon{background-color:var(--bg-track)}.timeline-toolbar{display:flex;justify-content:flex-start;align-items:center;margin-bottom:24px;gap:16px}.timeline-filter-container{display:flex;align-items:center;gap:12px;background:var(--bg-card);border:1px solid var(--border-color);padding:8px 16px;border-radius:24px;max-width:400px;flex-grow:1;transition:all .3s ease;box-shadow:0 2px 4px #0000000d}.timeline-filter-container:focus-within{border-color:var(--current-date);box-shadow:0 8px 20px #086dc31a}.timeline-filter-input{border:none;outline:none;font-size:.95rem;color:var(--text-primary);background:transparent;width:100%}.highlight-match{background-color:#fde68a;color:#92400e;padding:0 2px;border-radius:2px;font-weight:700}.release-legend{display:flex;flex-wrap:wrap;gap:1.5rem;margin-top:2rem;padding-top:1.5rem;border-top:1px solid var(--border-color)}.legend-item-reactive{cursor:pointer;transition:all .2s ease;padding:8px;border-radius:8px;border:1px solid transparent}.legend-item-reactive:hover{background-color:var(--bg-track);transform:translateY(-2px)}.legend-item-reactive.active-highlight{background-color:var(--bg-track);border-color:var(--grid-line);box-shadow:0 2px 4px #0000001a}.bar-segment,.version-label{transition:opacity .3s ease,filter .3s ease}[class*=highlight-oss] .bar-segment:not(.segment-oss),[class*=highlight-oss] .version-label:not(.status-oss){opacity:.3;filter:grayscale(.5)}[class*=highlight-ent] .bar-segment:not(.segment-ent),[class*=highlight-ent] .version-label:not(.status-ent){opacity:.3;filter:grayscale(.5)}[class*=highlight-eol] .bar-segment,[class*=highlight-eol] .version-label:not(.status-expired){opacity:.3;filter:grayscale(.5)}.timeline-toggle-btn{display:flex;align-items:center;gap:8px;background:var(--bg-card);border:1px solid var(--border-color);padding:8px 16px;border-radius:20px;cursor:pointer;font-size:.875rem;font-weight:500;color:var(--text-primary);box-shadow:0 1px 2px #0000000d;transition:all .2s ease}.timeline-toggle-btn:hover{background:var(--bg-page);border-color:var(--text-secondary);transform:translateY(-1px)}.timeline-toggle-btn:focus-visible{outline:2px solid var(--current-date);outline-offset:2px}.theme-toggle-btn{position:absolute;top:0;right:0;background:var(--bg-card);border:1px solid var(--border-color);color:var(--text-primary);width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .2s ease;z-index:1000;box-shadow:0 4px 6px -1px #0000001a}.theme-toggle-btn:focus-visible{outline:2px solid var(--current-date);outline-offset:2px}#timeline-root{position:relative}.theme-toggle-btn:hover{background-color:var(--bg-track);transform:scale(1.1)}@media(max-width:1024px){.timeline-wrapper{padding-left:0}}@media(max-width:768px){.page-container{padding:1rem}.timeline-toolbar{flex-direction:column;align-items:stretch}.timeline-filter-container{max-width:none}}.timeline-row,.timeline-table tr{transition:opacity .4s ease,transform .4s cubic-bezier(.4,0,.2,1)}.row-hidden{display:none!important;opacity:0;transform:translateY(-10px)}.row-visible{display:flex!important;opacity:1;transform:translateY(0)}.timeline-table tr.row-visible{display:table-row!important}.timeline-tracks,.timeline-table tbody{transition:max-height .5s ease-in-out}.timeline-table-container{margin-top:1rem;margin-bottom:2rem;overflow-x:auto;border-radius:12px;border:1px solid var(--border-color);background-color:var(--bg-card);transition:all .3s ease}.timeline-table{width:100%;border-collapse:collapse;font-size:.85rem;text-align:left}.timeline-table th{background-color:var(--bg-page);color:var(--text-secondary);font-weight:700;padding:14px 16px;border-bottom:1px solid var(--border-color);text-transform:uppercase;font-size:.75rem;letter-spacing:.05em}.timeline-table td{padding:12px 16px;border-bottom:1px solid var(--border-color);color:var(--text-primary);vertical-align:middle}.timeline-table tr:hover td{background-color:var(--bg-page)}.timeline-table tr:last-child td{border-bottom:none}.table-badge{display:inline-block;padding:4px 12px;border-radius:12px;font-size:.85rem;font-weight:600;font-family:var(--font-family);text-align:center;min-width:64px;transition:all .3s ease}.table-version-link{text-decoration:none;color:inherit;display:inline-block}.table-version-link:hover .table-badge{transform:translateY(-1px);box-shadow:0 4px 8px #0000001a}.table-badge.status-oss{background-color:var(--accent-oss);color:#000}.table-badge.status-ent{background-color:var(--accent-ent);color:#000}.table-badge.status-expired{background-color:var(--bg-track);color:var(--text-secondary)}.past-date{color:var(--text-secondary);opacity:.7;font-style:italic}.timeline-table-toggle{display:flex;justify-content:center;padding:10px;background-color:var(--bg-card);border-top:1px solid var(--border-color);border-bottom-left-radius:12px;margin-top:40px}.risk-high{color:#ef4444}.risk-medium{color:#f59e0b}.risk-low{color:#10b981}[data-theme=dark] .details-header{background-color:#0f172a}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "lifecycle-timeline",
-  "version": "1.2.3",
+  "version": "1.2.4",
   "description": "A beautiful, premium JS timeline component for visualizing product lifecycles, OSS support, and enterprise support dates.",
   "type": "module",
   "main": "./dist/timeline.umd.cjs",
@@ -12,7 +12,8 @@
       "import": "./dist/timeline.js",
       "require": "./dist/timeline.umd.cjs"
     },
-    "./style.css": "./dist/timeline.css"
+    "./style.css": "./dist/timeline.css",
+    "./dist/timeline.css": "./dist/timeline.css"
   },
   "files": [
     "dist",