@memberjunction/ng-timeline 5.11.0 → 5.12.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -1942,11 +1942,11 @@ export class TimelineComponent {
|
|
|
1942
1942
|
i0.ɵɵconditional(ctx.virtualScroll.enabled && ctx.scrollState.hasMore ? 5 : -1);
|
|
1943
1943
|
i0.ɵɵadvance();
|
|
1944
1944
|
i0.ɵɵconditional(ctx.scrollState.isLoading && ctx.virtualScroll.showLoadingIndicator ? 6 : -1);
|
|
1945
|
-
} }, dependencies: [i1.NgClass, i1.NgTemplateOutlet], styles: ["/**\n * MJ Timeline Component Styles\n * Kendo-inspired design with vertical alternating and horizontal layouts\n */\n\n/* ============================================================================\n CSS VARIABLES (Theming)\n ============================================================================ */\n\nmj-timeline {\n /* Colors */\n --mj-timeline-bg: transparent;\n --mj-timeline-line-color: #d0d7de;\n --mj-timeline-marker-bg: #ffffff;\n --mj-timeline-marker-border: #4678a8;\n --mj-timeline-marker-fill: #4678a8;\n --mj-timeline-card-bg: #ffffff;\n --mj-timeline-card-border: #d0d7de;\n --mj-timeline-card-shadow: 0 1px 3px rgba(31, 35, 40, 0.08);\n --mj-timeline-card-shadow-hover: 0 4px 12px rgba(31, 35, 40, 0.12);\n --mj-timeline-card-radius: 6px;\n --mj-timeline-text-primary: #1f2328;\n --mj-timeline-text-secondary: #656d76;\n --mj-timeline-text-muted: #8c959f;\n --mj-timeline-accent: #4678a8;\n --mj-timeline-accent-light: rgba(70, 120, 168, 0.08);\n --mj-timeline-segment-bg: #4678a8;\n --mj-timeline-segment-text: #ffffff;\n --mj-timeline-focus-ring: 0 0 0 2px rgba(70, 120, 168, 0.3);\n\n /* Sizing */\n --mj-timeline-line-width: 2px;\n --mj-timeline-marker-size: 14px;\n --mj-timeline-card-padding: 16px;\n --mj-timeline-card-max-width: 400px;\n --mj-timeline-card-min-width: 200px;\n --mj-timeline-gap: 24px;\n --mj-timeline-segment-gap: 16px;\n --mj-timeline-axis-offset: 50%;\n\n /* Animation */\n --mj-timeline-transition: 0.15s ease;\n\n display: block;\n width: 100%;\n height: 100%;\n}\n\n/* Dark mode */\n.dark-theme mj-timeline,\n[data-theme=\"dark\"] mj-timeline {\n --mj-timeline-line-color: #3d444d;\n --mj-timeline-card-bg: #161b22;\n --mj-timeline-card-border: #3d444d;\n --mj-timeline-card-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);\n --mj-timeline-text-primary: #e6edf3;\n --mj-timeline-text-secondary: #8b949e;\n --mj-timeline-text-muted: #6e7681;\n --mj-timeline-accent: #58a6ff;\n --mj-timeline-accent-light: rgba(88, 166, 255, 0.1);\n --mj-timeline-marker-border: #58a6ff;\n --mj-timeline-marker-fill: #58a6ff;\n --mj-timeline-segment-bg: #58a6ff;\n}\n\n/* ============================================================================\n MAIN CONTAINER\n ============================================================================ */\n\n.mj-timeline {\n position: relative;\n width: 100%;\n height: 100%;\n padding: 0;\n background: var(--mj-timeline-bg);\n outline: none;\n overflow-y: auto;\n overflow-x: hidden;\n}\n\n/* Subtle scrollbar */\n.mj-timeline::-webkit-scrollbar {\n width: 6px;\n}\n\n.mj-timeline::-webkit-scrollbar-track {\n background: transparent;\n}\n\n.mj-timeline::-webkit-scrollbar-thumb {\n background: rgba(0, 0, 0, 0.15);\n border-radius: 3px;\n}\n\n.mj-timeline::-webkit-scrollbar-thumb:hover {\n background: rgba(0, 0, 0, 0.25);\n}\n\n.mj-timeline:focus-visible {\n box-shadow: inset var(--mj-timeline-focus-ring);\n}\n\n/* ============================================================================\n LOADING & EMPTY STATES\n ============================================================================ */\n\n.mj-timeline__loading {\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n padding: 48px 24px;\n gap: 12px;\n}\n\n.mj-timeline__loading-spinner {\n width: 24px;\n height: 24px;\n border: 2px solid var(--mj-timeline-line-color);\n border-top-color: var(--mj-timeline-accent);\n border-radius: 50%;\n animation: mj-timeline-spin 0.6s linear infinite;\n}\n\n.mj-timeline__loading-spinner--small {\n width: 14px;\n height: 14px;\n}\n\n.mj-timeline__loading-text {\n color: var(--mj-timeline-text-muted);\n font-size: 13px;\n}\n\n.mj-timeline__loading-more {\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 16px;\n gap: 8px;\n color: var(--mj-timeline-text-muted);\n font-size: 12px;\n}\n\n@keyframes mj-timeline-spin {\n to { transform: rotate(360deg); }\n}\n\n.mj-timeline__empty {\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n padding: 64px 24px;\n gap: 8px;\n text-align: center;\n}\n\n.mj-timeline__empty-icon {\n font-size: 32px;\n color: var(--mj-timeline-text-muted);\n opacity: 0.4;\n}\n\n.mj-timeline__empty-text {\n color: var(--mj-timeline-text-secondary);\n font-size: 13px;\n}\n\n/* ============================================================================\n TIME SEGMENTS - Year/Month badges on the axis\n ============================================================================ */\n\n.mj-timeline__segment {\n margin-bottom: var(--mj-timeline-segment-gap);\n position: relative;\n}\n\n.mj-timeline__segment:last-child {\n margin-bottom: 0;\n}\n\n.mj-timeline__segment-header {\n display: inline-flex;\n align-items: center;\n gap: 8px;\n padding: 6px 16px;\n margin-bottom: var(--mj-timeline-gap);\n background: var(--mj-timeline-segment-bg);\n border-radius: 4px;\n font-weight: 600;\n font-size: 13px;\n color: var(--mj-timeline-segment-text);\n user-select: none;\n box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);\n position: relative;\n z-index: 10;\n}\n\n.mj-timeline__segment-header--clickable {\n cursor: pointer;\n transition: all var(--mj-timeline-transition);\n}\n\n.mj-timeline__segment-header--clickable:hover {\n filter: brightness(1.1);\n box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);\n}\n\n.mj-timeline__segment-toggle {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 16px;\n height: 16px;\n color: inherit;\n font-size: 10px;\n opacity: 0.9;\n transition: transform var(--mj-timeline-transition);\n}\n\n.mj-timeline__segment--collapsed .mj-timeline__segment-toggle {\n transform: rotate(-90deg);\n}\n\n.mj-timeline__segment-label {\n font-size: inherit;\n font-weight: inherit;\n color: inherit;\n}\n\n.mj-timeline__segment-count {\n display: none;\n}\n\n.mj-timeline__segment-line {\n display: none;\n}\n\n.mj-timeline__segment-content {\n overflow: visible;\n transition: max-height 0.25s ease, opacity 0.2s ease;\n padding-top: 8px;\n}\n\n.mj-timeline__segment-content--hidden {\n max-height: 0;\n opacity: 0;\n pointer-events: none;\n}\n\n/* ============================================================================\n TIMELINE AXIS - Vertical line in center\n ============================================================================ */\n\n.mj-timeline__axis {\n position: relative;\n padding-left: 0;\n}\n\n/* Vertical center line */\n.mj-timeline__axis::before {\n content: '';\n position: absolute;\n left: 50%;\n top: 0;\n bottom: 0;\n width: var(--mj-timeline-line-width);\n background: var(--mj-timeline-line-color);\n transform: translateX(-50%);\n}\n\n/* ============================================================================\n TIMELINE EVENT - Alternating left/right by default\n ============================================================================ */\n\n.mj-timeline__event {\n position: relative;\n display: flex;\n align-items: flex-start;\n margin-bottom: var(--mj-timeline-gap);\n width: 100%;\n}\n\n/* Even events (0, 2, 4...) - card on LEFT, date on RIGHT */\n.mj-timeline__event {\n padding-right: calc(50% + 32px);\n justify-content: flex-end;\n}\n\n/* Odd events (1, 3, 5...) - card on RIGHT, date on LEFT */\n.mj-timeline__event--odd {\n padding-right: 0;\n padding-left: calc(50% + 32px);\n justify-content: flex-start;\n flex-direction: row;\n}\n\n.mj-timeline__event:last-child {\n margin-bottom: 0;\n}\n\n/* ============================================================================\n MARKER - Circular dot on the axis\n ============================================================================ */\n\n.mj-timeline__marker {\n position: absolute;\n left: 50%;\n top: 12px;\n transform: translateX(-50%);\n width: var(--mj-timeline-marker-size);\n height: var(--mj-timeline-marker-size);\n background: var(--mj-timeline-marker-fill);\n border: 2px solid var(--mj-timeline-marker-bg);\n border-radius: 50%;\n box-shadow: 0 0 0 2px var(--mj-timeline-marker-fill);\n z-index: 5;\n transition: transform var(--mj-timeline-transition);\n}\n\n.mj-timeline__marker-icon {\n display: none;\n}\n\n.mj-timeline__event:hover .mj-timeline__marker {\n transform: translateX(-50%) scale(1.2);\n}\n\n.mj-timeline__connector {\n display: none;\n}\n\n/* ============================================================================\n DATE LABEL - Positioned opposite the card\n ============================================================================ */\n\n.mj-timeline__date-label {\n position: absolute;\n top: 10px;\n font-size: 13px;\n font-weight: 500;\n color: var(--mj-timeline-text-secondary);\n white-space: nowrap;\n}\n\n/* Even events - date on RIGHT side of axis */\n.mj-timeline__event:not(.mj-timeline__event--odd) .mj-timeline__date-label {\n left: calc(50% + 24px);\n text-align: left;\n}\n\n/* Odd events - date on LEFT side of axis */\n.mj-timeline__event--odd .mj-timeline__date-label {\n right: calc(50% + 24px);\n text-align: right;\n}\n\n/* ============================================================================\n EVENT CARD - Clean design matching Kendo\n ============================================================================ */\n\n.mj-timeline__card {\n background: var(--mj-timeline-card-bg);\n border: 1px solid var(--mj-timeline-card-border);\n border-radius: var(--mj-timeline-card-radius);\n box-shadow: var(--mj-timeline-card-shadow);\n overflow: hidden;\n transition: all var(--mj-timeline-transition);\n cursor: pointer;\n max-width: var(--mj-timeline-card-max-width);\n min-width: var(--mj-timeline-card-min-width);\n width: 100%;\n}\n\n/* Card arrow/pointer toward the axis */\n.mj-timeline__card::before {\n content: '';\n position: absolute;\n top: 14px;\n width: 10px;\n height: 10px;\n background: var(--mj-timeline-card-bg);\n border: 1px solid var(--mj-timeline-card-border);\n transform: rotate(45deg);\n}\n\n/* Even events - arrow points RIGHT toward axis */\n.mj-timeline__event:not(.mj-timeline__event--odd) .mj-timeline__card::before {\n right: -6px;\n border-left: none;\n border-bottom: none;\n}\n\n/* Odd events - arrow points LEFT toward axis */\n.mj-timeline__event--odd .mj-timeline__card::before {\n left: -6px;\n border-right: none;\n border-top: none;\n}\n\n/* Hover state */\n.mj-timeline__card:hover {\n box-shadow: var(--mj-timeline-card-shadow-hover);\n border-color: var(--mj-timeline-accent);\n}\n\n/* Selected/Focused state - prominent highlight with animation */\n.mj-timeline__event--focused .mj-timeline__card {\n background: var(--mj-timeline-accent-light);\n border-color: var(--mj-timeline-accent);\n box-shadow:\n 0 0 0 3px var(--mj-timeline-accent),\n 0 8px 24px rgba(70, 120, 168, 0.25);\n transform: scale(1.02);\n}\n\n/* Selected marker - larger and more prominent */\n.mj-timeline__event--focused .mj-timeline__marker {\n transform: translateX(-50%) scale(1.4);\n box-shadow:\n 0 0 0 3px var(--mj-timeline-marker-fill),\n 0 0 12px rgba(70, 120, 168, 0.5);\n}\n\n/* Pulse animation for selected marker */\n.mj-timeline__event--focused .mj-timeline__marker::after {\n content: '';\n position: absolute;\n top: -4px;\n left: -4px;\n right: -4px;\n bottom: -4px;\n border-radius: 50%;\n border: 2px solid var(--mj-timeline-accent);\n animation: mj-timeline-pulse 1.5s ease-out infinite;\n}\n\n@keyframes mj-timeline-pulse {\n 0% {\n transform: scale(1);\n opacity: 0.8;\n }\n 100% {\n transform: scale(1.8);\n opacity: 0;\n }\n}\n\n/* Selected date label - bolder */\n.mj-timeline__event--focused .mj-timeline__date-label {\n color: var(--mj-timeline-accent);\n font-weight: 600;\n}\n\n/* Card arrow gets accent color when selected */\n.mj-timeline__event--focused .mj-timeline__card::before {\n border-color: var(--mj-timeline-accent);\n background: var(--mj-timeline-accent-light);\n}\n\n/* ============================================================================\n CARD HEADER\n ============================================================================ */\n\n.mj-timeline__card-header {\n display: flex;\n align-items: flex-start;\n padding: var(--mj-timeline-card-padding);\n gap: 10px;\n}\n\n.mj-timeline__card-header-content {\n flex: 1;\n display: flex;\n align-items: flex-start;\n gap: 10px;\n min-width: 0;\n}\n\n.mj-timeline__card-icon {\n display: none;\n}\n\n.mj-timeline__card-titles {\n flex: 1;\n min-width: 0;\n}\n\n.mj-timeline__card-title {\n margin: 0;\n font-size: 15px;\n font-weight: 600;\n color: var(--mj-timeline-text-primary);\n line-height: 1.35;\n}\n\n.mj-timeline__card-subtitle {\n display: block;\n font-size: 13px;\n color: var(--mj-timeline-text-secondary);\n margin-top: 4px;\n}\n\n.mj-timeline__card-date {\n display: block;\n font-size: 12px;\n color: var(--mj-timeline-text-muted);\n margin-top: 6px;\n}\n\n.mj-timeline__card-date::before {\n display: none;\n}\n\n.mj-timeline__card-toggle {\n flex-shrink: 0;\n display: flex;\n align-items: center;\n justify-content: center;\n width: 28px;\n height: 28px;\n border: none;\n background: transparent;\n color: var(--mj-timeline-text-muted);\n border-radius: 4px;\n cursor: pointer;\n transition: all var(--mj-timeline-transition);\n font-size: 14px;\n}\n\n.mj-timeline__card-toggle:hover {\n background: var(--mj-timeline-accent-light);\n color: var(--mj-timeline-accent);\n}\n\n/* ============================================================================\n CARD IMAGE\n ============================================================================ */\n\n.mj-timeline__card-image {\n overflow: hidden;\n border-radius: 4px;\n flex-shrink: 0;\n}\n\n.mj-timeline__card-image img {\n display: block;\n width: 100%;\n height: 100%;\n object-fit: cover;\n}\n\n.mj-timeline__card-image--left.mj-timeline__card-image--small {\n width: 48px;\n height: 48px;\n}\n\n.mj-timeline__card-image--left.mj-timeline__card-image--medium {\n width: 72px;\n height: 72px;\n}\n\n.mj-timeline__card-image--left.mj-timeline__card-image--large {\n width: 96px;\n height: 96px;\n}\n\n.mj-timeline__card-image--top {\n width: calc(100% - 32px);\n max-height: 180px;\n margin: 0 16px 12px;\n}\n\n/* ============================================================================\n CARD BODY\n ============================================================================ */\n\n.mj-timeline__card-body {\n padding: 0 var(--mj-timeline-card-padding) var(--mj-timeline-card-padding);\n}\n\n.mj-timeline__card-body--collapsed {\n display: none;\n}\n\n.mj-timeline__card-description {\n font-size: 13px;\n line-height: 1.6;\n color: var(--mj-timeline-text-secondary);\n margin-bottom: 12px;\n}\n\n.mj-timeline__card-description--clamped {\n display: -webkit-box;\n -webkit-box-orient: vertical;\n overflow: hidden;\n}\n\n.mj-timeline__card-description:last-child {\n margin-bottom: 0;\n}\n\n/* ============================================================================\n CARD FIELDS\n ============================================================================ */\n\n.mj-timeline__card-fields {\n display: flex;\n flex-wrap: wrap;\n gap: 4px 12px;\n}\n\n.mj-timeline__card-fields--summary {\n padding-top: 12px;\n border-top: 1px solid var(--mj-timeline-line-color);\n margin-top: 12px;\n}\n\n.mj-timeline__card-fields--expanded {\n margin-top: 12px;\n padding-top: 12px;\n border-top: 1px solid var(--mj-timeline-line-color);\n}\n\n.mj-timeline__card-field {\n display: flex;\n align-items: center;\n gap: 5px;\n font-size: 12px;\n}\n\n.mj-timeline__card-field-icon {\n color: var(--mj-timeline-text-muted);\n font-size: 10px;\n}\n\n.mj-timeline__card-field-label {\n color: var(--mj-timeline-text-muted);\n}\n\n.mj-timeline__card-field-value {\n color: var(--mj-timeline-text-secondary);\n font-weight: 500;\n}\n\n/* ============================================================================\n CARD ACTIONS\n ============================================================================ */\n\n.mj-timeline__card-actions {\n display: flex;\n flex-wrap: wrap;\n gap: 6px;\n padding: 0 var(--mj-timeline-card-padding) var(--mj-timeline-card-padding);\n justify-content: flex-end;\n}\n\n.mj-timeline__card-actions--hover-only {\n opacity: 0;\n transition: opacity var(--mj-timeline-transition);\n}\n\n.mj-timeline__card:hover .mj-timeline__card-actions--hover-only,\n.mj-timeline__card:focus-within .mj-timeline__card-actions--hover-only {\n opacity: 1;\n}\n\n.mj-timeline__action {\n display: inline-flex;\n align-items: center;\n gap: 5px;\n padding: 6px 12px;\n font-size: 12px;\n font-weight: 500;\n border: 1px solid;\n border-radius: 4px;\n cursor: pointer;\n transition: all var(--mj-timeline-transition);\n}\n\n.mj-timeline__action:disabled {\n opacity: 0.4;\n cursor: not-allowed;\n}\n\n.mj-timeline__action i {\n font-size: 10px;\n}\n\n.mj-timeline__action--primary {\n background: var(--mj-timeline-accent);\n border-color: var(--mj-timeline-accent);\n color: #ffffff;\n}\n\n.mj-timeline__action--primary:hover:not(:disabled) {\n filter: brightness(1.1);\n}\n\n.mj-timeline__action--secondary {\n background: transparent;\n border-color: var(--mj-timeline-card-border);\n color: var(--mj-timeline-text-primary);\n}\n\n.mj-timeline__action--secondary:hover:not(:disabled) {\n background: var(--mj-timeline-accent-light);\n border-color: var(--mj-timeline-accent);\n color: var(--mj-timeline-accent);\n}\n\n.mj-timeline__action--danger {\n background: #cf222e;\n border-color: #cf222e;\n color: #ffffff;\n}\n\n.mj-timeline__action--link {\n background: transparent;\n border-color: transparent;\n color: var(--mj-timeline-accent);\n}\n\n.mj-timeline__action--link:hover:not(:disabled) {\n text-decoration: underline;\n}\n\n/* ============================================================================\n VIRTUAL SCROLL\n ============================================================================ */\n\n.mj-timeline-scroll-sentinel {\n height: 1px;\n width: 100%;\n visibility: hidden;\n}\n\n/* ============================================================================\n SINGLE LAYOUT - Cards only on right side\n ============================================================================ */\n\n.mj-timeline--single .mj-timeline__axis::before {\n left: 24px;\n transform: none;\n}\n\n.mj-timeline--single .mj-timeline__segment-header {\n margin-left: 12px;\n}\n\n.mj-timeline--single .mj-timeline__event {\n padding-right: 0;\n padding-left: 56px;\n justify-content: flex-start;\n}\n\n.mj-timeline--single .mj-timeline__event--odd {\n padding-left: 56px;\n flex-direction: row;\n}\n\n.mj-timeline--single .mj-timeline__marker {\n left: 24px;\n transform: translateX(-50%);\n}\n\n.mj-timeline--single .mj-timeline__date-label {\n display: none;\n}\n\n.mj-timeline--single .mj-timeline__card::before {\n left: -6px;\n right: auto;\n border-right: none;\n border-top: none;\n border-left: 1px solid var(--mj-timeline-card-border);\n border-bottom: 1px solid var(--mj-timeline-card-border);\n}\n\n.mj-timeline--single .mj-timeline__card {\n max-width: none;\n}\n\n/* ============================================================================\n ALTERNATING LAYOUT - Explicit class (same as default vertical)\n ============================================================================ */\n\n.mj-timeline--alternating .mj-timeline__segment-header {\n left: 50%;\n transform: translateX(-50%);\n}\n\n/* ============================================================================\n HORIZONTAL LAYOUT\n ============================================================================ */\n\n.mj-timeline--horizontal {\n display: flex;\n flex-direction: row;\n flex-wrap: nowrap;\n align-items: flex-start;\n overflow-x: auto;\n overflow-y: hidden;\n padding: 80px 40px 24px;\n min-width: 100%;\n}\n\n.mj-timeline--horizontal .mj-timeline__segment {\n flex: 0 0 auto;\n display: flex;\n flex-direction: column;\n margin-bottom: 0;\n margin-right: 40px;\n position: relative;\n}\n\n.mj-timeline--horizontal .mj-timeline__segment:last-child {\n margin-right: 0;\n}\n\n.mj-timeline--horizontal .mj-timeline__segment-header {\n position: absolute;\n top: -56px;\n left: 0;\n margin-bottom: 0;\n white-space: nowrap;\n}\n\n.mj-timeline--horizontal .mj-timeline__segment-content {\n display: flex;\n flex-direction: row;\n align-items: flex-start;\n}\n\n.mj-timeline--horizontal .mj-timeline__axis {\n display: flex;\n flex-direction: row;\n align-items: flex-start;\n padding-left: 0;\n min-width: max-content;\n gap: 0;\n}\n\n/* Horizontal axis line */\n.mj-timeline--horizontal .mj-timeline__axis::before {\n left: 0;\n right: 0;\n top: 0;\n bottom: auto;\n width: 100%;\n height: var(--mj-timeline-line-width);\n transform: none;\n}\n\n.mj-timeline--horizontal .mj-timeline__event {\n flex-direction: column;\n align-items: center;\n margin-bottom: 0;\n margin-right: 48px;\n padding: 0;\n padding-top: 32px;\n min-width: 180px;\n max-width: 280px;\n width: auto;\n}\n\n.mj-timeline--horizontal .mj-timeline__event--odd {\n padding-left: 0;\n flex-direction: column;\n}\n\n.mj-timeline--horizontal .mj-timeline__event:last-child {\n margin-right: 0;\n}\n\n.mj-timeline--horizontal .mj-timeline__marker {\n position: absolute;\n left: 50%;\n /* Position so marker is centered on the axis line (top: 0 of axis) */\n /* Event has padding-top: 32px, marker is 14px, so top: -(32 + 7) = -39px for center */\n top: calc(-32px - var(--mj-timeline-marker-size) / 2);\n transform: translateX(-50%);\n margin: 0;\n}\n\n.mj-timeline--horizontal .mj-timeline__event:hover .mj-timeline__marker {\n transform: translateX(-50%) scale(1.2);\n}\n\n.mj-timeline--horizontal .mj-timeline__date-label {\n position: absolute;\n top: -40px;\n left: 50%;\n right: auto;\n transform: translateX(-50%);\n text-align: center;\n font-size: 12px;\n}\n\n.mj-timeline--horizontal .mj-timeline__card {\n max-width: none;\n width: 100%;\n min-width: 0;\n}\n\n.mj-timeline--horizontal .mj-timeline__card::before {\n display: none;\n}\n\n/* Horizontal focused marker override */\n.mj-timeline--horizontal .mj-timeline__event--focused .mj-timeline__marker {\n transform: translateX(-50%) scale(1.4);\n}\n\n/* Horizontal collapsed segment - rotate 90\u00B0 CCW and compress */\n.mj-timeline--horizontal .mj-timeline__segment--collapsed {\n flex: 0 0 auto;\n width: 32px;\n min-width: 32px;\n margin-right: 4px;\n}\n\n.mj-timeline--horizontal .mj-timeline__segment--collapsed .mj-timeline__segment-header {\n writing-mode: vertical-rl;\n text-orientation: mixed;\n transform: rotate(180deg);\n white-space: nowrap;\n padding: 8px 4px;\n margin: 0;\n top: 0;\n position: relative;\n}\n\n.mj-timeline--horizontal .mj-timeline__segment--collapsed .mj-timeline__segment-content {\n display: none;\n}\n\n/* ============================================================================\n RESPONSIVE\n ============================================================================ */\n\n@media (max-width: 900px) {\n /* Force single layout on smaller screens */\n .mj-timeline--alternating .mj-timeline__axis::before {\n left: 24px;\n transform: none;\n }\n\n .mj-timeline--alternating .mj-timeline__segment-header {\n left: auto;\n transform: none;\n margin-left: 12px;\n }\n\n .mj-timeline--alternating .mj-timeline__event {\n padding-right: 0;\n padding-left: 56px;\n justify-content: flex-start;\n }\n\n .mj-timeline--alternating .mj-timeline__event--odd {\n padding-left: 56px;\n padding-right: 0;\n flex-direction: row;\n }\n\n .mj-timeline--alternating .mj-timeline__marker {\n left: 24px;\n transform: translateX(-50%);\n }\n\n .mj-timeline--alternating .mj-timeline__event:hover .mj-timeline__marker {\n transform: translateX(-50%) scale(1.2);\n }\n\n .mj-timeline--alternating .mj-timeline__date-label {\n display: none;\n }\n\n .mj-timeline--alternating .mj-timeline__card::before {\n left: -6px;\n right: auto;\n border-right: none;\n border-top: none;\n border-left: 1px solid var(--mj-timeline-card-border);\n border-bottom: 1px solid var(--mj-timeline-card-border);\n }\n\n .mj-timeline--alternating .mj-timeline__card {\n max-width: none;\n }\n}\n\n@media (max-width: 600px) {\n mj-timeline {\n --mj-timeline-card-padding: 12px;\n --mj-timeline-gap: 16px;\n --mj-timeline-marker-size: 12px;\n }\n\n .mj-timeline {\n padding: 16px 12px;\n }\n\n .mj-timeline__card-title {\n font-size: 14px;\n }\n\n .mj-timeline--horizontal .mj-timeline__event {\n min-width: 160px;\n max-width: 220px;\n margin-right: 32px;\n }\n}\n\n/* Touch devices */\n@media (hover: none) and (pointer: coarse) {\n .mj-timeline__card-actions--hover-only {\n opacity: 1;\n }\n\n .mj-timeline__action {\n min-height: 40px;\n }\n}\n\n/* Reduced motion */\n@media (prefers-reduced-motion: reduce) {\n .mj-timeline__card,\n .mj-timeline__marker,\n .mj-timeline__segment-toggle {\n transition: none;\n }\n}\n"], encapsulation: 2, changeDetection: 0 });
|
|
1945
|
+
} }, dependencies: [i1.NgClass, i1.NgTemplateOutlet], styles: ["/**\n * MJ Timeline Component Styles\n * Kendo-inspired design with vertical alternating and horizontal layouts\n */\n\n/* ============================================================================\n CSS VARIABLES (Theming)\n ============================================================================ */\n\nmj-timeline {\n /* Colors */\n --mj-timeline-bg: transparent;\n --mj-timeline-line-color: var(--mj-border-default);\n --mj-timeline-marker-bg: var(--mj-bg-surface);\n --mj-timeline-marker-border: var(--mj-brand-primary);\n --mj-timeline-marker-fill: var(--mj-brand-primary);\n --mj-timeline-card-bg: var(--mj-bg-surface);\n --mj-timeline-card-border: var(--mj-border-default);\n --mj-timeline-card-shadow: var(--mj-shadow-sm);\n --mj-timeline-card-shadow-hover: var(--mj-shadow-md);\n --mj-timeline-card-radius: var(--mj-radius-md);\n --mj-timeline-text-primary: var(--mj-text-primary);\n --mj-timeline-text-secondary: var(--mj-text-muted);\n --mj-timeline-text-muted: var(--mj-text-disabled);\n --mj-timeline-accent: var(--mj-brand-primary);\n --mj-timeline-accent-light: color-mix(in srgb, var(--mj-brand-primary) 8%, transparent);\n --mj-timeline-segment-bg: var(--mj-brand-primary);\n --mj-timeline-segment-text: var(--mj-text-inverse);\n --mj-timeline-focus-ring: 0 0 0 2px color-mix(in srgb, var(--mj-brand-primary) 30%, transparent);\n\n /* Sizing */\n --mj-timeline-line-width: 2px;\n --mj-timeline-marker-size: 14px;\n --mj-timeline-card-padding: 16px;\n --mj-timeline-card-max-width: 400px;\n --mj-timeline-card-min-width: 200px;\n --mj-timeline-gap: 24px;\n --mj-timeline-segment-gap: 16px;\n --mj-timeline-axis-offset: 50%;\n\n /* Animation */\n --mj-timeline-transition: 0.15s ease;\n\n display: block;\n width: 100%;\n height: 100%;\n}\n\n/* Dark mode handled automatically by --mj-* semantic tokens */\n\n/* ============================================================================\n MAIN CONTAINER\n ============================================================================ */\n\n.mj-timeline {\n position: relative;\n width: 100%;\n height: 100%;\n padding: 0;\n background: var(--mj-timeline-bg);\n outline: none;\n overflow-y: auto;\n overflow-x: hidden;\n}\n\n/* Subtle scrollbar */\n.mj-timeline::-webkit-scrollbar {\n width: 6px;\n}\n\n.mj-timeline::-webkit-scrollbar-track {\n background: transparent;\n}\n\n.mj-timeline::-webkit-scrollbar-thumb {\n background: rgba(0, 0, 0, 0.15);\n border-radius: 3px;\n}\n\n.mj-timeline::-webkit-scrollbar-thumb:hover {\n background: rgba(0, 0, 0, 0.25);\n}\n\n.mj-timeline:focus-visible {\n box-shadow: inset var(--mj-timeline-focus-ring);\n}\n\n/* ============================================================================\n LOADING & EMPTY STATES\n ============================================================================ */\n\n.mj-timeline__loading {\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n padding: 48px 24px;\n gap: 12px;\n}\n\n.mj-timeline__loading-spinner {\n width: 24px;\n height: 24px;\n border: 2px solid var(--mj-timeline-line-color);\n border-top-color: var(--mj-timeline-accent);\n border-radius: var(--mj-radius-full);\n animation: mj-timeline-spin 0.6s linear infinite;\n}\n\n.mj-timeline__loading-spinner--small {\n width: 14px;\n height: 14px;\n}\n\n.mj-timeline__loading-text {\n color: var(--mj-timeline-text-muted);\n font-size: var(--mj-text-sm);\n}\n\n.mj-timeline__loading-more {\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 16px;\n gap: 8px;\n color: var(--mj-timeline-text-muted);\n font-size: var(--mj-text-xs);\n}\n\n@keyframes mj-timeline-spin {\n to { transform: rotate(360deg); }\n}\n\n.mj-timeline__empty {\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n padding: 64px 24px;\n gap: 8px;\n text-align: center;\n}\n\n.mj-timeline__empty-icon {\n font-size: 32px;\n color: var(--mj-timeline-text-muted);\n opacity: 0.4;\n}\n\n.mj-timeline__empty-text {\n color: var(--mj-timeline-text-secondary);\n font-size: var(--mj-text-sm);\n}\n\n/* ============================================================================\n TIME SEGMENTS - Year/Month badges on the axis\n ============================================================================ */\n\n.mj-timeline__segment {\n margin-bottom: var(--mj-timeline-segment-gap);\n position: relative;\n}\n\n.mj-timeline__segment:last-child {\n margin-bottom: 0;\n}\n\n.mj-timeline__segment-header {\n display: inline-flex;\n align-items: center;\n gap: 8px;\n padding: 6px 16px;\n margin-bottom: var(--mj-timeline-gap);\n background: var(--mj-timeline-segment-bg);\n border-radius: var(--mj-radius-sm);\n font-weight: 600;\n font-size: var(--mj-text-sm);\n color: var(--mj-timeline-segment-text);\n user-select: none;\n box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);\n position: relative;\n z-index: 10;\n}\n\n.mj-timeline__segment-header--clickable {\n cursor: pointer;\n transition: all var(--mj-timeline-transition);\n}\n\n.mj-timeline__segment-header--clickable:hover {\n filter: brightness(1.1);\n box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);\n}\n\n.mj-timeline__segment-toggle {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 16px;\n height: 16px;\n color: inherit;\n font-size: var(--mj-text-xs);\n opacity: 0.9;\n transition: transform var(--mj-timeline-transition);\n}\n\n.mj-timeline__segment--collapsed .mj-timeline__segment-toggle {\n transform: rotate(-90deg);\n}\n\n.mj-timeline__segment-label {\n font-size: inherit;\n font-weight: inherit;\n color: inherit;\n}\n\n.mj-timeline__segment-count {\n display: none;\n}\n\n.mj-timeline__segment-line {\n display: none;\n}\n\n.mj-timeline__segment-content {\n overflow: visible;\n transition: max-height 0.25s ease, opacity 0.2s ease;\n padding-top: 8px;\n}\n\n.mj-timeline__segment-content--hidden {\n max-height: 0;\n opacity: 0;\n pointer-events: none;\n}\n\n/* ============================================================================\n TIMELINE AXIS - Vertical line in center\n ============================================================================ */\n\n.mj-timeline__axis {\n position: relative;\n padding-left: 0;\n}\n\n/* Vertical center line */\n.mj-timeline__axis::before {\n content: '';\n position: absolute;\n left: 50%;\n top: 0;\n bottom: 0;\n width: var(--mj-timeline-line-width);\n background: var(--mj-timeline-line-color);\n transform: translateX(-50%);\n}\n\n/* ============================================================================\n TIMELINE EVENT - Alternating left/right by default\n ============================================================================ */\n\n.mj-timeline__event {\n position: relative;\n display: flex;\n align-items: flex-start;\n margin-bottom: var(--mj-timeline-gap);\n width: 100%;\n}\n\n/* Even events (0, 2, 4...) - card on LEFT, date on RIGHT */\n.mj-timeline__event {\n padding-right: calc(50% + 32px);\n justify-content: flex-end;\n}\n\n/* Odd events (1, 3, 5...) - card on RIGHT, date on LEFT */\n.mj-timeline__event--odd {\n padding-right: 0;\n padding-left: calc(50% + 32px);\n justify-content: flex-start;\n flex-direction: row;\n}\n\n.mj-timeline__event:last-child {\n margin-bottom: 0;\n}\n\n/* ============================================================================\n MARKER - Circular dot on the axis\n ============================================================================ */\n\n.mj-timeline__marker {\n position: absolute;\n left: 50%;\n top: 12px;\n transform: translateX(-50%);\n width: var(--mj-timeline-marker-size);\n height: var(--mj-timeline-marker-size);\n background: var(--mj-timeline-marker-fill);\n border: 2px solid var(--mj-timeline-marker-bg);\n border-radius: var(--mj-radius-full);\n box-shadow: 0 0 0 2px var(--mj-timeline-marker-fill);\n z-index: 5;\n transition: transform var(--mj-timeline-transition);\n}\n\n.mj-timeline__marker-icon {\n display: none;\n}\n\n.mj-timeline__event:hover .mj-timeline__marker {\n transform: translateX(-50%) scale(1.2);\n}\n\n.mj-timeline__connector {\n display: none;\n}\n\n/* ============================================================================\n DATE LABEL - Positioned opposite the card\n ============================================================================ */\n\n.mj-timeline__date-label {\n position: absolute;\n top: 10px;\n font-size: var(--mj-text-sm);\n font-weight: 500;\n color: var(--mj-timeline-text-secondary);\n white-space: nowrap;\n}\n\n/* Even events - date on RIGHT side of axis */\n.mj-timeline__event:not(.mj-timeline__event--odd) .mj-timeline__date-label {\n left: calc(50% + 24px);\n text-align: left;\n}\n\n/* Odd events - date on LEFT side of axis */\n.mj-timeline__event--odd .mj-timeline__date-label {\n right: calc(50% + 24px);\n text-align: right;\n}\n\n/* ============================================================================\n EVENT CARD - Clean design matching Kendo\n ============================================================================ */\n\n.mj-timeline__card {\n background: var(--mj-timeline-card-bg);\n border: 1px solid var(--mj-timeline-card-border);\n border-radius: var(--mj-timeline-card-radius);\n box-shadow: var(--mj-timeline-card-shadow);\n overflow: hidden;\n transition: all var(--mj-timeline-transition);\n cursor: pointer;\n max-width: var(--mj-timeline-card-max-width);\n min-width: var(--mj-timeline-card-min-width);\n width: 100%;\n}\n\n/* Card arrow/pointer toward the axis */\n.mj-timeline__card::before {\n content: '';\n position: absolute;\n top: 14px;\n width: 10px;\n height: 10px;\n background: var(--mj-timeline-card-bg);\n border: 1px solid var(--mj-timeline-card-border);\n transform: rotate(45deg);\n}\n\n/* Even events - arrow points RIGHT toward axis */\n.mj-timeline__event:not(.mj-timeline__event--odd) .mj-timeline__card::before {\n right: -6px;\n border-left: none;\n border-bottom: none;\n}\n\n/* Odd events - arrow points LEFT toward axis */\n.mj-timeline__event--odd .mj-timeline__card::before {\n left: -6px;\n border-right: none;\n border-top: none;\n}\n\n/* Hover state */\n.mj-timeline__card:hover {\n box-shadow: var(--mj-timeline-card-shadow-hover);\n border-color: var(--mj-timeline-accent);\n}\n\n/* Selected/Focused state - prominent highlight with animation */\n.mj-timeline__event--focused .mj-timeline__card {\n background: var(--mj-timeline-accent-light);\n border-color: var(--mj-timeline-accent);\n box-shadow:\n 0 0 0 3px var(--mj-timeline-accent),\n 0 8px 24px color-mix(in srgb, var(--mj-brand-primary) 25%, transparent);\n transform: scale(1.02);\n}\n\n/* Selected marker - larger and more prominent */\n.mj-timeline__event--focused .mj-timeline__marker {\n transform: translateX(-50%) scale(1.4);\n box-shadow:\n 0 0 0 3px var(--mj-timeline-marker-fill),\n 0 0 12px color-mix(in srgb, var(--mj-brand-primary) 50%, transparent);\n}\n\n/* Pulse animation for selected marker */\n.mj-timeline__event--focused .mj-timeline__marker::after {\n content: '';\n position: absolute;\n top: -4px;\n left: -4px;\n right: -4px;\n bottom: -4px;\n border-radius: var(--mj-radius-full);\n border: 2px solid var(--mj-timeline-accent);\n animation: mj-timeline-pulse 1.5s ease-out infinite;\n}\n\n@keyframes mj-timeline-pulse {\n 0% {\n transform: scale(1);\n opacity: 0.8;\n }\n 100% {\n transform: scale(1.8);\n opacity: 0;\n }\n}\n\n/* Selected date label - bolder */\n.mj-timeline__event--focused .mj-timeline__date-label {\n color: var(--mj-timeline-accent);\n font-weight: 600;\n}\n\n/* Card arrow gets accent color when selected */\n.mj-timeline__event--focused .mj-timeline__card::before {\n border-color: var(--mj-timeline-accent);\n background: var(--mj-timeline-accent-light);\n}\n\n/* ============================================================================\n CARD HEADER\n ============================================================================ */\n\n.mj-timeline__card-header {\n display: flex;\n align-items: flex-start;\n padding: var(--mj-timeline-card-padding);\n gap: 10px;\n}\n\n.mj-timeline__card-header-content {\n flex: 1;\n display: flex;\n align-items: flex-start;\n gap: 10px;\n min-width: 0;\n}\n\n.mj-timeline__card-icon {\n display: none;\n}\n\n.mj-timeline__card-titles {\n flex: 1;\n min-width: 0;\n}\n\n.mj-timeline__card-title {\n margin: 0;\n font-size: var(--mj-text-base);\n font-weight: 600;\n color: var(--mj-timeline-text-primary);\n line-height: 1.35;\n}\n\n.mj-timeline__card-subtitle {\n display: block;\n font-size: var(--mj-text-sm);\n color: var(--mj-timeline-text-secondary);\n margin-top: 4px;\n}\n\n.mj-timeline__card-date {\n display: block;\n font-size: var(--mj-text-xs);\n color: var(--mj-timeline-text-muted);\n margin-top: 6px;\n}\n\n.mj-timeline__card-date::before {\n display: none;\n}\n\n.mj-timeline__card-toggle {\n flex-shrink: 0;\n display: flex;\n align-items: center;\n justify-content: center;\n width: 28px;\n height: 28px;\n border: none;\n background: transparent;\n color: var(--mj-timeline-text-muted);\n border-radius: 4px;\n cursor: pointer;\n transition: all var(--mj-timeline-transition);\n font-size: var(--mj-text-sm);\n}\n\n.mj-timeline__card-toggle:hover {\n background: var(--mj-timeline-accent-light);\n color: var(--mj-timeline-accent);\n}\n\n/* ============================================================================\n CARD IMAGE\n ============================================================================ */\n\n.mj-timeline__card-image {\n overflow: hidden;\n border-radius: var(--mj-radius-sm);\n flex-shrink: 0;\n}\n\n.mj-timeline__card-image img {\n display: block;\n width: 100%;\n height: 100%;\n object-fit: cover;\n}\n\n.mj-timeline__card-image--left.mj-timeline__card-image--small {\n width: 48px;\n height: 48px;\n}\n\n.mj-timeline__card-image--left.mj-timeline__card-image--medium {\n width: 72px;\n height: 72px;\n}\n\n.mj-timeline__card-image--left.mj-timeline__card-image--large {\n width: 96px;\n height: 96px;\n}\n\n.mj-timeline__card-image--top {\n width: calc(100% - 32px);\n max-height: 180px;\n margin: 0 16px 12px;\n}\n\n/* ============================================================================\n CARD BODY\n ============================================================================ */\n\n.mj-timeline__card-body {\n padding: 0 var(--mj-timeline-card-padding) var(--mj-timeline-card-padding);\n}\n\n.mj-timeline__card-body--collapsed {\n display: none;\n}\n\n.mj-timeline__card-description {\n font-size: var(--mj-text-sm);\n line-height: 1.6;\n color: var(--mj-timeline-text-secondary);\n margin-bottom: 12px;\n}\n\n.mj-timeline__card-description--clamped {\n display: -webkit-box;\n -webkit-box-orient: vertical;\n overflow: hidden;\n}\n\n.mj-timeline__card-description:last-child {\n margin-bottom: 0;\n}\n\n/* ============================================================================\n CARD FIELDS\n ============================================================================ */\n\n.mj-timeline__card-fields {\n display: flex;\n flex-wrap: wrap;\n gap: 4px 12px;\n}\n\n.mj-timeline__card-fields--summary {\n padding-top: 12px;\n border-top: 1px solid var(--mj-timeline-line-color);\n margin-top: 12px;\n}\n\n.mj-timeline__card-fields--expanded {\n margin-top: 12px;\n padding-top: 12px;\n border-top: 1px solid var(--mj-timeline-line-color);\n}\n\n.mj-timeline__card-field {\n display: flex;\n align-items: center;\n gap: 5px;\n font-size: var(--mj-text-xs);\n}\n\n.mj-timeline__card-field-icon {\n color: var(--mj-timeline-text-muted);\n font-size: var(--mj-text-xs);\n}\n\n.mj-timeline__card-field-label {\n color: var(--mj-timeline-text-muted);\n}\n\n.mj-timeline__card-field-value {\n color: var(--mj-timeline-text-secondary);\n font-weight: 500;\n}\n\n/* ============================================================================\n CARD ACTIONS\n ============================================================================ */\n\n.mj-timeline__card-actions {\n display: flex;\n flex-wrap: wrap;\n gap: 6px;\n padding: 0 var(--mj-timeline-card-padding) var(--mj-timeline-card-padding);\n justify-content: flex-end;\n}\n\n.mj-timeline__card-actions--hover-only {\n opacity: 0;\n transition: opacity var(--mj-timeline-transition);\n}\n\n.mj-timeline__card:hover .mj-timeline__card-actions--hover-only,\n.mj-timeline__card:focus-within .mj-timeline__card-actions--hover-only {\n opacity: 1;\n}\n\n.mj-timeline__action {\n display: inline-flex;\n align-items: center;\n gap: 5px;\n padding: 6px 12px;\n font-size: var(--mj-text-xs);\n font-weight: 500;\n border: 1px solid;\n border-radius: var(--mj-radius-sm);\n cursor: pointer;\n transition: all var(--mj-timeline-transition);\n}\n\n.mj-timeline__action:disabled {\n opacity: 0.4;\n cursor: not-allowed;\n}\n\n.mj-timeline__action i {\n font-size: var(--mj-text-xs);\n}\n\n.mj-timeline__action--primary {\n background: var(--mj-timeline-accent);\n border-color: var(--mj-timeline-accent);\n color: var(--mj-text-inverse);\n}\n\n.mj-timeline__action--primary:hover:not(:disabled) {\n filter: brightness(1.1);\n}\n\n.mj-timeline__action--secondary {\n background: transparent;\n border-color: var(--mj-timeline-card-border);\n color: var(--mj-timeline-text-primary);\n}\n\n.mj-timeline__action--secondary:hover:not(:disabled) {\n background: var(--mj-timeline-accent-light);\n border-color: var(--mj-timeline-accent);\n color: var(--mj-timeline-accent);\n}\n\n.mj-timeline__action--danger {\n background: var(--mj-status-error);\n border-color: var(--mj-status-error);\n color: var(--mj-text-inverse);\n}\n\n.mj-timeline__action--link {\n background: transparent;\n border-color: transparent;\n color: var(--mj-timeline-accent);\n}\n\n.mj-timeline__action--link:hover:not(:disabled) {\n text-decoration: underline;\n}\n\n/* ============================================================================\n VIRTUAL SCROLL\n ============================================================================ */\n\n.mj-timeline-scroll-sentinel {\n height: 1px;\n width: 100%;\n visibility: hidden;\n}\n\n/* ============================================================================\n SINGLE LAYOUT - Cards only on right side\n ============================================================================ */\n\n.mj-timeline--single .mj-timeline__axis::before {\n left: 24px;\n transform: none;\n}\n\n.mj-timeline--single .mj-timeline__segment-header {\n margin-left: 12px;\n}\n\n.mj-timeline--single .mj-timeline__event {\n padding-right: 0;\n padding-left: 56px;\n justify-content: flex-start;\n}\n\n.mj-timeline--single .mj-timeline__event--odd {\n padding-left: 56px;\n flex-direction: row;\n}\n\n.mj-timeline--single .mj-timeline__marker {\n left: 24px;\n transform: translateX(-50%);\n}\n\n.mj-timeline--single .mj-timeline__date-label {\n display: none;\n}\n\n.mj-timeline--single .mj-timeline__card::before {\n left: -6px;\n right: auto;\n border-right: none;\n border-top: none;\n border-left: 1px solid var(--mj-timeline-card-border);\n border-bottom: 1px solid var(--mj-timeline-card-border);\n}\n\n.mj-timeline--single .mj-timeline__card {\n max-width: none;\n}\n\n/* ============================================================================\n ALTERNATING LAYOUT - Explicit class (same as default vertical)\n ============================================================================ */\n\n.mj-timeline--alternating .mj-timeline__segment-header {\n left: 50%;\n transform: translateX(-50%);\n}\n\n/* ============================================================================\n HORIZONTAL LAYOUT\n ============================================================================ */\n\n.mj-timeline--horizontal {\n display: flex;\n flex-direction: row;\n flex-wrap: nowrap;\n align-items: flex-start;\n overflow-x: auto;\n overflow-y: hidden;\n padding: 80px 40px 24px;\n min-width: 100%;\n}\n\n.mj-timeline--horizontal .mj-timeline__segment {\n flex: 0 0 auto;\n display: flex;\n flex-direction: column;\n margin-bottom: 0;\n margin-right: 40px;\n position: relative;\n}\n\n.mj-timeline--horizontal .mj-timeline__segment:last-child {\n margin-right: 0;\n}\n\n.mj-timeline--horizontal .mj-timeline__segment-header {\n position: absolute;\n top: -56px;\n left: 0;\n margin-bottom: 0;\n white-space: nowrap;\n}\n\n.mj-timeline--horizontal .mj-timeline__segment-content {\n display: flex;\n flex-direction: row;\n align-items: flex-start;\n}\n\n.mj-timeline--horizontal .mj-timeline__axis {\n display: flex;\n flex-direction: row;\n align-items: flex-start;\n padding-left: 0;\n min-width: max-content;\n gap: 0;\n}\n\n/* Horizontal axis line */\n.mj-timeline--horizontal .mj-timeline__axis::before {\n left: 0;\n right: 0;\n top: 0;\n bottom: auto;\n width: 100%;\n height: var(--mj-timeline-line-width);\n transform: none;\n}\n\n.mj-timeline--horizontal .mj-timeline__event {\n flex-direction: column;\n align-items: center;\n margin-bottom: 0;\n margin-right: 48px;\n padding: 0;\n padding-top: 32px;\n min-width: 180px;\n max-width: 280px;\n width: auto;\n}\n\n.mj-timeline--horizontal .mj-timeline__event--odd {\n padding-left: 0;\n flex-direction: column;\n}\n\n.mj-timeline--horizontal .mj-timeline__event:last-child {\n margin-right: 0;\n}\n\n.mj-timeline--horizontal .mj-timeline__marker {\n position: absolute;\n left: 50%;\n /* Position so marker is centered on the axis line (top: 0 of axis) */\n /* Event has padding-top: 32px, marker is 14px, so top: -(32 + 7) = -39px for center */\n top: calc(-32px - var(--mj-timeline-marker-size) / 2);\n transform: translateX(-50%);\n margin: 0;\n}\n\n.mj-timeline--horizontal .mj-timeline__event:hover .mj-timeline__marker {\n transform: translateX(-50%) scale(1.2);\n}\n\n.mj-timeline--horizontal .mj-timeline__date-label {\n position: absolute;\n top: -40px;\n left: 50%;\n right: auto;\n transform: translateX(-50%);\n text-align: center;\n font-size: var(--mj-text-xs);\n}\n\n.mj-timeline--horizontal .mj-timeline__card {\n max-width: none;\n width: 100%;\n min-width: 0;\n}\n\n.mj-timeline--horizontal .mj-timeline__card::before {\n display: none;\n}\n\n/* Horizontal focused marker override */\n.mj-timeline--horizontal .mj-timeline__event--focused .mj-timeline__marker {\n transform: translateX(-50%) scale(1.4);\n}\n\n/* Horizontal collapsed segment - rotate 90\u00B0 CCW and compress */\n.mj-timeline--horizontal .mj-timeline__segment--collapsed {\n flex: 0 0 auto;\n width: 32px;\n min-width: 32px;\n margin-right: 4px;\n}\n\n.mj-timeline--horizontal .mj-timeline__segment--collapsed .mj-timeline__segment-header {\n writing-mode: vertical-rl;\n text-orientation: mixed;\n transform: rotate(180deg);\n white-space: nowrap;\n padding: 8px 4px;\n margin: 0;\n top: 0;\n position: relative;\n}\n\n.mj-timeline--horizontal .mj-timeline__segment--collapsed .mj-timeline__segment-content {\n display: none;\n}\n\n/* ============================================================================\n RESPONSIVE\n ============================================================================ */\n\n@media (max-width: 900px) {\n /* Force single layout on smaller screens */\n .mj-timeline--alternating .mj-timeline__axis::before {\n left: 24px;\n transform: none;\n }\n\n .mj-timeline--alternating .mj-timeline__segment-header {\n left: auto;\n transform: none;\n margin-left: 12px;\n }\n\n .mj-timeline--alternating .mj-timeline__event {\n padding-right: 0;\n padding-left: 56px;\n justify-content: flex-start;\n }\n\n .mj-timeline--alternating .mj-timeline__event--odd {\n padding-left: 56px;\n padding-right: 0;\n flex-direction: row;\n }\n\n .mj-timeline--alternating .mj-timeline__marker {\n left: 24px;\n transform: translateX(-50%);\n }\n\n .mj-timeline--alternating .mj-timeline__event:hover .mj-timeline__marker {\n transform: translateX(-50%) scale(1.2);\n }\n\n .mj-timeline--alternating .mj-timeline__date-label {\n display: none;\n }\n\n .mj-timeline--alternating .mj-timeline__card::before {\n left: -6px;\n right: auto;\n border-right: none;\n border-top: none;\n border-left: 1px solid var(--mj-timeline-card-border);\n border-bottom: 1px solid var(--mj-timeline-card-border);\n }\n\n .mj-timeline--alternating .mj-timeline__card {\n max-width: none;\n }\n}\n\n@media (max-width: 600px) {\n mj-timeline {\n --mj-timeline-card-padding: 12px;\n --mj-timeline-gap: 16px;\n --mj-timeline-marker-size: 12px;\n }\n\n .mj-timeline {\n padding: 16px 12px;\n }\n\n .mj-timeline__card-title {\n font-size: var(--mj-text-sm);\n }\n\n .mj-timeline--horizontal .mj-timeline__event {\n min-width: 160px;\n max-width: 220px;\n margin-right: 32px;\n }\n}\n\n/* Touch devices */\n@media (hover: none) and (pointer: coarse) {\n .mj-timeline__card-actions--hover-only {\n opacity: 1;\n }\n\n .mj-timeline__action {\n min-height: 40px;\n }\n}\n\n/* Reduced motion */\n@media (prefers-reduced-motion: reduce) {\n .mj-timeline__card,\n .mj-timeline__marker,\n .mj-timeline__segment-toggle {\n transition: none;\n }\n}\n"], encapsulation: 2, changeDetection: 0 });
|
|
1946
1946
|
}
|
|
1947
1947
|
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(TimelineComponent, [{
|
|
1948
1948
|
type: Component,
|
|
1949
|
-
args: [{ standalone: false, selector: 'mj-timeline', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<!--\nMJ Timeline Component Template\n\nStructure:\n- Loading state\n- Empty state\n- Timeline container (vertical/horizontal)\n- Time segments (collapsible)\n- Segment header\n- Event cards within segment\n- Or flat list of events (when segmentGrouping='none')\n- Virtual scroll sentinel\n-->\n\n<div\n class=\"mj-timeline\"\n [class.mj-timeline--vertical]=\"orientation === 'vertical'\"\n [class.mj-timeline--horizontal]=\"orientation === 'horizontal'\"\n [class.mj-timeline--single]=\"layout === 'single'\"\n [class.mj-timeline--alternating]=\"layout === 'alternating'\"\n [attr.aria-label]=\"ariaLabel\"\n role=\"list\"\n tabindex=\"0\"\n (keydown)=\"onKeyDown($event)\"\n #scrollContainer\n (scroll)=\"onScroll($event)\">\n\n <!-- Loading State -->\n @if (isLoading && !isInitialized) {\n @if (loadingTemplate) {\n <ng-container *ngTemplateOutlet=\"loadingTemplate\"></ng-container>\n } @else {\n <div class=\"mj-timeline__loading\">\n <div class=\"mj-timeline__loading-spinner\"></div>\n <span class=\"mj-timeline__loading-text\">{{ loadingMessage }}</span>\n </div>\n }\n }\n\n <!-- Empty State -->\n @if (isInitialized && allEvents.length === 0 && !isLoading) {\n @if (emptyTemplate) {\n <ng-container *ngTemplateOutlet=\"emptyTemplate\"></ng-container>\n } @else {\n <div class=\"mj-timeline__empty\">\n <i [class]=\"emptyIcon\" class=\"mj-timeline__empty-icon\"></i>\n <span class=\"mj-timeline__empty-text\">{{ emptyMessage }}</span>\n </div>\n }\n }\n\n <!-- Timeline Content -->\n @if (isInitialized && allEvents.length > 0) {\n <!-- Segmented View -->\n @if (segmentGrouping !== 'none') {\n @for (segment of segments; track trackBySegmentLabel(segmentIndex, segment); let segmentIndex = $index) {\n <div\n class=\"mj-timeline__segment\"\n [class.mj-timeline__segment--collapsed]=\"!segment.isExpanded\"\n [attr.data-segment-label]=\"segment.label\">\n <!-- Segment Header -->\n <div\n class=\"mj-timeline__segment-header\"\n [class.mj-timeline__segment-header--clickable]=\"segmentsCollapsible\"\n (click)=\"onSegmentClick(segment)\"\n role=\"button\"\n [attr.aria-expanded]=\"segment.isExpanded\"\n [attr.aria-controls]=\"'segment-content-' + segmentIndex\">\n @if (segmentHeaderTemplate) {\n <ng-container *ngTemplateOutlet=\"segmentHeaderTemplate; context: { segment: segment }\"></ng-container>\n } @else {\n @if (segmentsCollapsible) {\n <span class=\"mj-timeline__segment-toggle\">\n <i [class]=\"segment.isExpanded ? 'fa-solid fa-chevron-down' : 'fa-solid fa-chevron-right'\"></i>\n </span>\n }\n <span class=\"mj-timeline__segment-label\">{{ segment.label }}</span>\n <span class=\"mj-timeline__segment-count\">({{ segment.eventCount }} {{ segment.eventCount === 1 ? 'event' : 'events' }})</span>\n <span class=\"mj-timeline__segment-line\"></span>\n }\n </div>\n <!-- Segment Content -->\n <div\n class=\"mj-timeline__segment-content\"\n [id]=\"'segment-content-' + segmentIndex\"\n [class.mj-timeline__segment-content--hidden]=\"!segment.isExpanded\">\n <div class=\"mj-timeline__axis\">\n <!-- Events in Segment -->\n @for (event of segment.events; track trackByEventId(eventIndex, event); let eventIndex = $index; let isOdd = $odd) {\n <ng-container *ngTemplateOutlet=\"eventCard; context: {\n event: event,\n index: eventIndex,\n isOdd: isOdd,\n globalIndex: getGlobalIndex(event)\n }\"></ng-container>\n }\n </div>\n </div>\n </div>\n }\n }\n <!-- Flat View (no segments) -->\n @if (segmentGrouping === 'none') {\n <div class=\"mj-timeline__axis\">\n @for (event of allEvents; track trackByEventId(eventIndex, event); let eventIndex = $index; let isOdd = $odd) {\n <ng-container *ngTemplateOutlet=\"eventCard; context: {\n event: event,\n index: eventIndex,\n isOdd: isOdd,\n globalIndex: eventIndex\n }\"></ng-container>\n }\n </div>\n }\n }\n\n <!-- Virtual Scroll Sentinel -->\n @if (virtualScroll.enabled && scrollState.hasMore) {\n <div\n class=\"mj-timeline-scroll-sentinel\"\n >\n </div>\n }\n\n <!-- Loading More Indicator -->\n @if (scrollState.isLoading && virtualScroll.showLoadingIndicator) {\n <div\n class=\"mj-timeline__loading-more\"\n >\n <div class=\"mj-timeline__loading-spinner mj-timeline__loading-spinner--small\"></div>\n <span>{{ virtualScroll.loadingMessage }}</span>\n </div>\n }\n\n</div>\n\n<!-- Event Card Template -->\n<ng-template #eventCard let-event=\"event\" let-index=\"index\" let-isOdd=\"isOdd\" let-globalIndex=\"globalIndex\">\n <div\n class=\"mj-timeline__event\"\n [class.mj-timeline__event--odd]=\"isOdd && layout === 'alternating'\"\n [class.mj-timeline__event--even]=\"!isOdd && layout === 'alternating'\"\n [class.mj-timeline__event--expanded]=\"event.isExpanded\"\n [class.mj-timeline__event--focused]=\"isEventSelected(event, globalIndex)\"\n [attr.data-event-id]=\"event.id\"\n role=\"listitem\"\n [attr.aria-expanded]=\"event.isExpanded\">\n\n <!-- Timeline Marker -->\n <div class=\"mj-timeline__marker\" [style.background-color]=\"getColor(event)\">\n <i [class]=\"getIcon(event)\" class=\"mj-timeline__marker-icon\"></i>\n </div>\n\n <!-- Connector Line -->\n <div class=\"mj-timeline__connector\" [style.background-color]=\"getColor(event)\"></div>\n\n <!-- Date Label (for alternating layout) -->\n @if (layout === 'alternating') {\n <div class=\"mj-timeline__date-label\">\n {{ formatDate(event.date) }}\n </div>\n }\n\n <!-- Event Card -->\n <div\n class=\"mj-timeline__card\"\n [ngClass]=\"getEffectiveCardConfig(event).cssClass\"\n [style.max-width]=\"getEffectiveCardConfig(event).maxWidth\"\n [style.min-width]=\"getEffectiveCardConfig(event).minWidth\"\n [style.border-left-color]=\"getColor(event)\"\n (click)=\"onEventClick(event, globalIndex, $event)\"\n (mouseenter)=\"onEventMouseEnter(event, globalIndex, $event)\"\n (mouseleave)=\"onEventMouseLeave(event, globalIndex, $event)\">\n\n <!-- Custom Card Template -->\n @if (cardTemplate) {\n <ng-container *ngTemplateOutlet=\"cardTemplate; context: {\n event: event,\n group: groups[event.groupIndex]\n }\"></ng-container>\n } @else {\n <!-- Card Header -->\n <div class=\"mj-timeline__card-header\">\n <!-- Image (left position) -->\n @if (event.imageUrl && getEffectiveCardConfig(event).imagePosition === 'left') {\n <div\n class=\"mj-timeline__card-image mj-timeline__card-image--left\"\n [class.mj-timeline__card-image--small]=\"getEffectiveCardConfig(event).imageSize === 'small'\"\n [class.mj-timeline__card-image--medium]=\"getEffectiveCardConfig(event).imageSize === 'medium'\"\n [class.mj-timeline__card-image--large]=\"getEffectiveCardConfig(event).imageSize === 'large'\">\n <img [src]=\"event.imageUrl\" [alt]=\"event.title\" />\n </div>\n }\n <div class=\"mj-timeline__card-header-content\">\n <!-- Custom Header Template -->\n @if (headerTemplate) {\n <ng-container *ngTemplateOutlet=\"headerTemplate; context: { event: event }\"></ng-container>\n } @else {\n <!-- Icon -->\n @if (getEffectiveCardConfig(event).showIcon) {\n <span\n class=\"mj-timeline__card-icon\"\n [style.color]=\"getColor(event)\">\n <i [class]=\"getIcon(event)\"></i>\n </span>\n }\n <!-- Title & Subtitle -->\n <div class=\"mj-timeline__card-titles\">\n <h4 class=\"mj-timeline__card-title\">{{ event.title }}</h4>\n @if (event.subtitle && getEffectiveCardConfig(event).showSubtitle) {\n <span\n class=\"mj-timeline__card-subtitle\"\n >\n {{ event.subtitle }}\n </span>\n }\n @if (getEffectiveCardConfig(event).showDate && layout !== 'alternating') {\n <span\n class=\"mj-timeline__card-date\"\n >\n {{ formatDate(event.date, getEffectiveCardConfig(event).dateFormat) }}\n </span>\n }\n </div>\n <!-- Expand/Collapse Toggle -->\n @if (getEffectiveCardConfig(event).collapsible) {\n <button\n class=\"mj-timeline__card-toggle\"\n (click)=\"onToggleExpand(event, globalIndex, $event)\"\n [attr.aria-label]=\"event.isExpanded ? 'Collapse' : 'Expand'\"\n type=\"button\">\n <i [class]=\"event.isExpanded ? 'fa-solid fa-chevron-up' : 'fa-solid fa-chevron-down'\"></i>\n </button>\n }\n }\n </div>\n </div>\n <!-- Image (top position) -->\n @if (event.imageUrl && getEffectiveCardConfig(event).imagePosition === 'top') {\n <div\n class=\"mj-timeline__card-image mj-timeline__card-image--top\"\n >\n <img [src]=\"event.imageUrl\" [alt]=\"event.title\" />\n </div>\n }\n <!-- Card Body -->\n <div\n class=\"mj-timeline__card-body\"\n [class.mj-timeline__card-body--collapsed]=\"!event.isExpanded && getEffectiveCardConfig(event).collapsible\">\n <!-- Custom Body Template -->\n @if (bodyTemplate) {\n <ng-container *ngTemplateOutlet=\"bodyTemplate; context: { event: event }\"></ng-container>\n } @else {\n <!-- Summary Fields (always visible) -->\n @if (getEffectiveCardConfig(event).summaryFields?.length) {\n <div\n class=\"mj-timeline__card-fields mj-timeline__card-fields--summary\"\n >\n @for (field of getEffectiveCardConfig(event).summaryFields; track field) {\n <div class=\"mj-timeline__card-field\" [ngClass]=\"field.cssClass\">\n @if (field.icon) {\n <i [ngClass]=\"field.icon\" class=\"mj-timeline__card-field-icon\"></i>\n }\n @if (!field.hideLabel && field.label) {\n <span class=\"mj-timeline__card-field-label\">{{ field.label }}:</span>\n }\n <span class=\"mj-timeline__card-field-value\">{{ getFieldValue(event, field) }}</span>\n </div>\n }\n </div>\n }\n <!-- Description (expanded view) -->\n @if (event.description && event.isExpanded) {\n <div\n class=\"mj-timeline__card-description\"\n [class.mj-timeline__card-description--clamped]=\"(getEffectiveCardConfig(event).descriptionMaxLines ?? 0) > 0\"\n [style.-webkit-line-clamp]=\"getEffectiveCardConfig(event).descriptionMaxLines || null\">\n @if (getEffectiveCardConfig(event).allowHtmlDescription) {\n <div [innerHTML]=\"event.description\"></div>\n } @else {\n {{ event.description }}\n }\n </div>\n }\n <!-- Expanded Fields -->\n @if (event.isExpanded && getEffectiveCardConfig(event).expandedFields?.length) {\n <div\n class=\"mj-timeline__card-fields mj-timeline__card-fields--expanded\"\n >\n @for (field of getEffectiveCardConfig(event).expandedFields; track field) {\n <div class=\"mj-timeline__card-field\" [ngClass]=\"field.cssClass\">\n @if (field.icon) {\n <i [ngClass]=\"field.icon\" class=\"mj-timeline__card-field-icon\"></i>\n }\n @if (!field.hideLabel) {\n <span class=\"mj-timeline__card-field-label\">{{ field.label || field.fieldName }}:</span>\n }\n <span class=\"mj-timeline__card-field-value\">{{ getFieldValue(event, field) }}</span>\n </div>\n }\n </div>\n }\n }\n </div>\n <!-- Card Actions -->\n @if (getActions(event).length > 0) {\n <div\n class=\"mj-timeline__card-actions\"\n [class.mj-timeline__card-actions--hover-only]=\"getEffectiveCardConfig(event).actionsOnHover\"\n >\n <!-- Custom Actions Template -->\n @if (actionsTemplate) {\n <ng-container *ngTemplateOutlet=\"actionsTemplate; context: {\n event: event,\n actions: getActions(event)\n }\"></ng-container>\n } @else {\n @for (action of getActions(event); track action) {\n <button\n class=\"mj-timeline__action\"\n [class.mj-timeline__action--primary]=\"action.variant === 'primary'\"\n [class.mj-timeline__action--secondary]=\"action.variant === 'secondary' || !action.variant\"\n [class.mj-timeline__action--danger]=\"action.variant === 'danger'\"\n [class.mj-timeline__action--link]=\"action.variant === 'link'\"\n [ngClass]=\"action.cssClass\"\n [disabled]=\"action.disabled\"\n [title]=\"action.tooltip || ''\"\n (click)=\"onActionClick(event, action, globalIndex, $event)\"\n type=\"button\">\n @if (action.icon) {\n <i [ngClass]=\"action.icon\"></i>\n }\n <span>{{ action.label }}</span>\n </button>\n }\n }\n </div>\n }\n }\n\n <!-- Default Card Template -->\n </div>\n </div>\n</ng-template>\n", styles: ["/**\n * MJ Timeline Component Styles\n * Kendo-inspired design with vertical alternating and horizontal layouts\n */\n\n/* ============================================================================\n CSS VARIABLES (Theming)\n ============================================================================ */\n\nmj-timeline {\n /* Colors */\n --mj-timeline-bg: transparent;\n --mj-timeline-line-color: #d0d7de;\n --mj-timeline-marker-bg: #ffffff;\n --mj-timeline-marker-border: #4678a8;\n --mj-timeline-marker-fill: #4678a8;\n --mj-timeline-card-bg: #ffffff;\n --mj-timeline-card-border: #d0d7de;\n --mj-timeline-card-shadow: 0 1px 3px rgba(31, 35, 40, 0.08);\n --mj-timeline-card-shadow-hover: 0 4px 12px rgba(31, 35, 40, 0.12);\n --mj-timeline-card-radius: 6px;\n --mj-timeline-text-primary: #1f2328;\n --mj-timeline-text-secondary: #656d76;\n --mj-timeline-text-muted: #8c959f;\n --mj-timeline-accent: #4678a8;\n --mj-timeline-accent-light: rgba(70, 120, 168, 0.08);\n --mj-timeline-segment-bg: #4678a8;\n --mj-timeline-segment-text: #ffffff;\n --mj-timeline-focus-ring: 0 0 0 2px rgba(70, 120, 168, 0.3);\n\n /* Sizing */\n --mj-timeline-line-width: 2px;\n --mj-timeline-marker-size: 14px;\n --mj-timeline-card-padding: 16px;\n --mj-timeline-card-max-width: 400px;\n --mj-timeline-card-min-width: 200px;\n --mj-timeline-gap: 24px;\n --mj-timeline-segment-gap: 16px;\n --mj-timeline-axis-offset: 50%;\n\n /* Animation */\n --mj-timeline-transition: 0.15s ease;\n\n display: block;\n width: 100%;\n height: 100%;\n}\n\n/* Dark mode */\n.dark-theme mj-timeline,\n[data-theme=\"dark\"] mj-timeline {\n --mj-timeline-line-color: #3d444d;\n --mj-timeline-card-bg: #161b22;\n --mj-timeline-card-border: #3d444d;\n --mj-timeline-card-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);\n --mj-timeline-text-primary: #e6edf3;\n --mj-timeline-text-secondary: #8b949e;\n --mj-timeline-text-muted: #6e7681;\n --mj-timeline-accent: #58a6ff;\n --mj-timeline-accent-light: rgba(88, 166, 255, 0.1);\n --mj-timeline-marker-border: #58a6ff;\n --mj-timeline-marker-fill: #58a6ff;\n --mj-timeline-segment-bg: #58a6ff;\n}\n\n/* ============================================================================\n MAIN CONTAINER\n ============================================================================ */\n\n.mj-timeline {\n position: relative;\n width: 100%;\n height: 100%;\n padding: 0;\n background: var(--mj-timeline-bg);\n outline: none;\n overflow-y: auto;\n overflow-x: hidden;\n}\n\n/* Subtle scrollbar */\n.mj-timeline::-webkit-scrollbar {\n width: 6px;\n}\n\n.mj-timeline::-webkit-scrollbar-track {\n background: transparent;\n}\n\n.mj-timeline::-webkit-scrollbar-thumb {\n background: rgba(0, 0, 0, 0.15);\n border-radius: 3px;\n}\n\n.mj-timeline::-webkit-scrollbar-thumb:hover {\n background: rgba(0, 0, 0, 0.25);\n}\n\n.mj-timeline:focus-visible {\n box-shadow: inset var(--mj-timeline-focus-ring);\n}\n\n/* ============================================================================\n LOADING & EMPTY STATES\n ============================================================================ */\n\n.mj-timeline__loading {\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n padding: 48px 24px;\n gap: 12px;\n}\n\n.mj-timeline__loading-spinner {\n width: 24px;\n height: 24px;\n border: 2px solid var(--mj-timeline-line-color);\n border-top-color: var(--mj-timeline-accent);\n border-radius: 50%;\n animation: mj-timeline-spin 0.6s linear infinite;\n}\n\n.mj-timeline__loading-spinner--small {\n width: 14px;\n height: 14px;\n}\n\n.mj-timeline__loading-text {\n color: var(--mj-timeline-text-muted);\n font-size: 13px;\n}\n\n.mj-timeline__loading-more {\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 16px;\n gap: 8px;\n color: var(--mj-timeline-text-muted);\n font-size: 12px;\n}\n\n@keyframes mj-timeline-spin {\n to { transform: rotate(360deg); }\n}\n\n.mj-timeline__empty {\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n padding: 64px 24px;\n gap: 8px;\n text-align: center;\n}\n\n.mj-timeline__empty-icon {\n font-size: 32px;\n color: var(--mj-timeline-text-muted);\n opacity: 0.4;\n}\n\n.mj-timeline__empty-text {\n color: var(--mj-timeline-text-secondary);\n font-size: 13px;\n}\n\n/* ============================================================================\n TIME SEGMENTS - Year/Month badges on the axis\n ============================================================================ */\n\n.mj-timeline__segment {\n margin-bottom: var(--mj-timeline-segment-gap);\n position: relative;\n}\n\n.mj-timeline__segment:last-child {\n margin-bottom: 0;\n}\n\n.mj-timeline__segment-header {\n display: inline-flex;\n align-items: center;\n gap: 8px;\n padding: 6px 16px;\n margin-bottom: var(--mj-timeline-gap);\n background: var(--mj-timeline-segment-bg);\n border-radius: 4px;\n font-weight: 600;\n font-size: 13px;\n color: var(--mj-timeline-segment-text);\n user-select: none;\n box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);\n position: relative;\n z-index: 10;\n}\n\n.mj-timeline__segment-header--clickable {\n cursor: pointer;\n transition: all var(--mj-timeline-transition);\n}\n\n.mj-timeline__segment-header--clickable:hover {\n filter: brightness(1.1);\n box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);\n}\n\n.mj-timeline__segment-toggle {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 16px;\n height: 16px;\n color: inherit;\n font-size: 10px;\n opacity: 0.9;\n transition: transform var(--mj-timeline-transition);\n}\n\n.mj-timeline__segment--collapsed .mj-timeline__segment-toggle {\n transform: rotate(-90deg);\n}\n\n.mj-timeline__segment-label {\n font-size: inherit;\n font-weight: inherit;\n color: inherit;\n}\n\n.mj-timeline__segment-count {\n display: none;\n}\n\n.mj-timeline__segment-line {\n display: none;\n}\n\n.mj-timeline__segment-content {\n overflow: visible;\n transition: max-height 0.25s ease, opacity 0.2s ease;\n padding-top: 8px;\n}\n\n.mj-timeline__segment-content--hidden {\n max-height: 0;\n opacity: 0;\n pointer-events: none;\n}\n\n/* ============================================================================\n TIMELINE AXIS - Vertical line in center\n ============================================================================ */\n\n.mj-timeline__axis {\n position: relative;\n padding-left: 0;\n}\n\n/* Vertical center line */\n.mj-timeline__axis::before {\n content: '';\n position: absolute;\n left: 50%;\n top: 0;\n bottom: 0;\n width: var(--mj-timeline-line-width);\n background: var(--mj-timeline-line-color);\n transform: translateX(-50%);\n}\n\n/* ============================================================================\n TIMELINE EVENT - Alternating left/right by default\n ============================================================================ */\n\n.mj-timeline__event {\n position: relative;\n display: flex;\n align-items: flex-start;\n margin-bottom: var(--mj-timeline-gap);\n width: 100%;\n}\n\n/* Even events (0, 2, 4...) - card on LEFT, date on RIGHT */\n.mj-timeline__event {\n padding-right: calc(50% + 32px);\n justify-content: flex-end;\n}\n\n/* Odd events (1, 3, 5...) - card on RIGHT, date on LEFT */\n.mj-timeline__event--odd {\n padding-right: 0;\n padding-left: calc(50% + 32px);\n justify-content: flex-start;\n flex-direction: row;\n}\n\n.mj-timeline__event:last-child {\n margin-bottom: 0;\n}\n\n/* ============================================================================\n MARKER - Circular dot on the axis\n ============================================================================ */\n\n.mj-timeline__marker {\n position: absolute;\n left: 50%;\n top: 12px;\n transform: translateX(-50%);\n width: var(--mj-timeline-marker-size);\n height: var(--mj-timeline-marker-size);\n background: var(--mj-timeline-marker-fill);\n border: 2px solid var(--mj-timeline-marker-bg);\n border-radius: 50%;\n box-shadow: 0 0 0 2px var(--mj-timeline-marker-fill);\n z-index: 5;\n transition: transform var(--mj-timeline-transition);\n}\n\n.mj-timeline__marker-icon {\n display: none;\n}\n\n.mj-timeline__event:hover .mj-timeline__marker {\n transform: translateX(-50%) scale(1.2);\n}\n\n.mj-timeline__connector {\n display: none;\n}\n\n/* ============================================================================\n DATE LABEL - Positioned opposite the card\n ============================================================================ */\n\n.mj-timeline__date-label {\n position: absolute;\n top: 10px;\n font-size: 13px;\n font-weight: 500;\n color: var(--mj-timeline-text-secondary);\n white-space: nowrap;\n}\n\n/* Even events - date on RIGHT side of axis */\n.mj-timeline__event:not(.mj-timeline__event--odd) .mj-timeline__date-label {\n left: calc(50% + 24px);\n text-align: left;\n}\n\n/* Odd events - date on LEFT side of axis */\n.mj-timeline__event--odd .mj-timeline__date-label {\n right: calc(50% + 24px);\n text-align: right;\n}\n\n/* ============================================================================\n EVENT CARD - Clean design matching Kendo\n ============================================================================ */\n\n.mj-timeline__card {\n background: var(--mj-timeline-card-bg);\n border: 1px solid var(--mj-timeline-card-border);\n border-radius: var(--mj-timeline-card-radius);\n box-shadow: var(--mj-timeline-card-shadow);\n overflow: hidden;\n transition: all var(--mj-timeline-transition);\n cursor: pointer;\n max-width: var(--mj-timeline-card-max-width);\n min-width: var(--mj-timeline-card-min-width);\n width: 100%;\n}\n\n/* Card arrow/pointer toward the axis */\n.mj-timeline__card::before {\n content: '';\n position: absolute;\n top: 14px;\n width: 10px;\n height: 10px;\n background: var(--mj-timeline-card-bg);\n border: 1px solid var(--mj-timeline-card-border);\n transform: rotate(45deg);\n}\n\n/* Even events - arrow points RIGHT toward axis */\n.mj-timeline__event:not(.mj-timeline__event--odd) .mj-timeline__card::before {\n right: -6px;\n border-left: none;\n border-bottom: none;\n}\n\n/* Odd events - arrow points LEFT toward axis */\n.mj-timeline__event--odd .mj-timeline__card::before {\n left: -6px;\n border-right: none;\n border-top: none;\n}\n\n/* Hover state */\n.mj-timeline__card:hover {\n box-shadow: var(--mj-timeline-card-shadow-hover);\n border-color: var(--mj-timeline-accent);\n}\n\n/* Selected/Focused state - prominent highlight with animation */\n.mj-timeline__event--focused .mj-timeline__card {\n background: var(--mj-timeline-accent-light);\n border-color: var(--mj-timeline-accent);\n box-shadow:\n 0 0 0 3px var(--mj-timeline-accent),\n 0 8px 24px rgba(70, 120, 168, 0.25);\n transform: scale(1.02);\n}\n\n/* Selected marker - larger and more prominent */\n.mj-timeline__event--focused .mj-timeline__marker {\n transform: translateX(-50%) scale(1.4);\n box-shadow:\n 0 0 0 3px var(--mj-timeline-marker-fill),\n 0 0 12px rgba(70, 120, 168, 0.5);\n}\n\n/* Pulse animation for selected marker */\n.mj-timeline__event--focused .mj-timeline__marker::after {\n content: '';\n position: absolute;\n top: -4px;\n left: -4px;\n right: -4px;\n bottom: -4px;\n border-radius: 50%;\n border: 2px solid var(--mj-timeline-accent);\n animation: mj-timeline-pulse 1.5s ease-out infinite;\n}\n\n@keyframes mj-timeline-pulse {\n 0% {\n transform: scale(1);\n opacity: 0.8;\n }\n 100% {\n transform: scale(1.8);\n opacity: 0;\n }\n}\n\n/* Selected date label - bolder */\n.mj-timeline__event--focused .mj-timeline__date-label {\n color: var(--mj-timeline-accent);\n font-weight: 600;\n}\n\n/* Card arrow gets accent color when selected */\n.mj-timeline__event--focused .mj-timeline__card::before {\n border-color: var(--mj-timeline-accent);\n background: var(--mj-timeline-accent-light);\n}\n\n/* ============================================================================\n CARD HEADER\n ============================================================================ */\n\n.mj-timeline__card-header {\n display: flex;\n align-items: flex-start;\n padding: var(--mj-timeline-card-padding);\n gap: 10px;\n}\n\n.mj-timeline__card-header-content {\n flex: 1;\n display: flex;\n align-items: flex-start;\n gap: 10px;\n min-width: 0;\n}\n\n.mj-timeline__card-icon {\n display: none;\n}\n\n.mj-timeline__card-titles {\n flex: 1;\n min-width: 0;\n}\n\n.mj-timeline__card-title {\n margin: 0;\n font-size: 15px;\n font-weight: 600;\n color: var(--mj-timeline-text-primary);\n line-height: 1.35;\n}\n\n.mj-timeline__card-subtitle {\n display: block;\n font-size: 13px;\n color: var(--mj-timeline-text-secondary);\n margin-top: 4px;\n}\n\n.mj-timeline__card-date {\n display: block;\n font-size: 12px;\n color: var(--mj-timeline-text-muted);\n margin-top: 6px;\n}\n\n.mj-timeline__card-date::before {\n display: none;\n}\n\n.mj-timeline__card-toggle {\n flex-shrink: 0;\n display: flex;\n align-items: center;\n justify-content: center;\n width: 28px;\n height: 28px;\n border: none;\n background: transparent;\n color: var(--mj-timeline-text-muted);\n border-radius: 4px;\n cursor: pointer;\n transition: all var(--mj-timeline-transition);\n font-size: 14px;\n}\n\n.mj-timeline__card-toggle:hover {\n background: var(--mj-timeline-accent-light);\n color: var(--mj-timeline-accent);\n}\n\n/* ============================================================================\n CARD IMAGE\n ============================================================================ */\n\n.mj-timeline__card-image {\n overflow: hidden;\n border-radius: 4px;\n flex-shrink: 0;\n}\n\n.mj-timeline__card-image img {\n display: block;\n width: 100%;\n height: 100%;\n object-fit: cover;\n}\n\n.mj-timeline__card-image--left.mj-timeline__card-image--small {\n width: 48px;\n height: 48px;\n}\n\n.mj-timeline__card-image--left.mj-timeline__card-image--medium {\n width: 72px;\n height: 72px;\n}\n\n.mj-timeline__card-image--left.mj-timeline__card-image--large {\n width: 96px;\n height: 96px;\n}\n\n.mj-timeline__card-image--top {\n width: calc(100% - 32px);\n max-height: 180px;\n margin: 0 16px 12px;\n}\n\n/* ============================================================================\n CARD BODY\n ============================================================================ */\n\n.mj-timeline__card-body {\n padding: 0 var(--mj-timeline-card-padding) var(--mj-timeline-card-padding);\n}\n\n.mj-timeline__card-body--collapsed {\n display: none;\n}\n\n.mj-timeline__card-description {\n font-size: 13px;\n line-height: 1.6;\n color: var(--mj-timeline-text-secondary);\n margin-bottom: 12px;\n}\n\n.mj-timeline__card-description--clamped {\n display: -webkit-box;\n -webkit-box-orient: vertical;\n overflow: hidden;\n}\n\n.mj-timeline__card-description:last-child {\n margin-bottom: 0;\n}\n\n/* ============================================================================\n CARD FIELDS\n ============================================================================ */\n\n.mj-timeline__card-fields {\n display: flex;\n flex-wrap: wrap;\n gap: 4px 12px;\n}\n\n.mj-timeline__card-fields--summary {\n padding-top: 12px;\n border-top: 1px solid var(--mj-timeline-line-color);\n margin-top: 12px;\n}\n\n.mj-timeline__card-fields--expanded {\n margin-top: 12px;\n padding-top: 12px;\n border-top: 1px solid var(--mj-timeline-line-color);\n}\n\n.mj-timeline__card-field {\n display: flex;\n align-items: center;\n gap: 5px;\n font-size: 12px;\n}\n\n.mj-timeline__card-field-icon {\n color: var(--mj-timeline-text-muted);\n font-size: 10px;\n}\n\n.mj-timeline__card-field-label {\n color: var(--mj-timeline-text-muted);\n}\n\n.mj-timeline__card-field-value {\n color: var(--mj-timeline-text-secondary);\n font-weight: 500;\n}\n\n/* ============================================================================\n CARD ACTIONS\n ============================================================================ */\n\n.mj-timeline__card-actions {\n display: flex;\n flex-wrap: wrap;\n gap: 6px;\n padding: 0 var(--mj-timeline-card-padding) var(--mj-timeline-card-padding);\n justify-content: flex-end;\n}\n\n.mj-timeline__card-actions--hover-only {\n opacity: 0;\n transition: opacity var(--mj-timeline-transition);\n}\n\n.mj-timeline__card:hover .mj-timeline__card-actions--hover-only,\n.mj-timeline__card:focus-within .mj-timeline__card-actions--hover-only {\n opacity: 1;\n}\n\n.mj-timeline__action {\n display: inline-flex;\n align-items: center;\n gap: 5px;\n padding: 6px 12px;\n font-size: 12px;\n font-weight: 500;\n border: 1px solid;\n border-radius: 4px;\n cursor: pointer;\n transition: all var(--mj-timeline-transition);\n}\n\n.mj-timeline__action:disabled {\n opacity: 0.4;\n cursor: not-allowed;\n}\n\n.mj-timeline__action i {\n font-size: 10px;\n}\n\n.mj-timeline__action--primary {\n background: var(--mj-timeline-accent);\n border-color: var(--mj-timeline-accent);\n color: #ffffff;\n}\n\n.mj-timeline__action--primary:hover:not(:disabled) {\n filter: brightness(1.1);\n}\n\n.mj-timeline__action--secondary {\n background: transparent;\n border-color: var(--mj-timeline-card-border);\n color: var(--mj-timeline-text-primary);\n}\n\n.mj-timeline__action--secondary:hover:not(:disabled) {\n background: var(--mj-timeline-accent-light);\n border-color: var(--mj-timeline-accent);\n color: var(--mj-timeline-accent);\n}\n\n.mj-timeline__action--danger {\n background: #cf222e;\n border-color: #cf222e;\n color: #ffffff;\n}\n\n.mj-timeline__action--link {\n background: transparent;\n border-color: transparent;\n color: var(--mj-timeline-accent);\n}\n\n.mj-timeline__action--link:hover:not(:disabled) {\n text-decoration: underline;\n}\n\n/* ============================================================================\n VIRTUAL SCROLL\n ============================================================================ */\n\n.mj-timeline-scroll-sentinel {\n height: 1px;\n width: 100%;\n visibility: hidden;\n}\n\n/* ============================================================================\n SINGLE LAYOUT - Cards only on right side\n ============================================================================ */\n\n.mj-timeline--single .mj-timeline__axis::before {\n left: 24px;\n transform: none;\n}\n\n.mj-timeline--single .mj-timeline__segment-header {\n margin-left: 12px;\n}\n\n.mj-timeline--single .mj-timeline__event {\n padding-right: 0;\n padding-left: 56px;\n justify-content: flex-start;\n}\n\n.mj-timeline--single .mj-timeline__event--odd {\n padding-left: 56px;\n flex-direction: row;\n}\n\n.mj-timeline--single .mj-timeline__marker {\n left: 24px;\n transform: translateX(-50%);\n}\n\n.mj-timeline--single .mj-timeline__date-label {\n display: none;\n}\n\n.mj-timeline--single .mj-timeline__card::before {\n left: -6px;\n right: auto;\n border-right: none;\n border-top: none;\n border-left: 1px solid var(--mj-timeline-card-border);\n border-bottom: 1px solid var(--mj-timeline-card-border);\n}\n\n.mj-timeline--single .mj-timeline__card {\n max-width: none;\n}\n\n/* ============================================================================\n ALTERNATING LAYOUT - Explicit class (same as default vertical)\n ============================================================================ */\n\n.mj-timeline--alternating .mj-timeline__segment-header {\n left: 50%;\n transform: translateX(-50%);\n}\n\n/* ============================================================================\n HORIZONTAL LAYOUT\n ============================================================================ */\n\n.mj-timeline--horizontal {\n display: flex;\n flex-direction: row;\n flex-wrap: nowrap;\n align-items: flex-start;\n overflow-x: auto;\n overflow-y: hidden;\n padding: 80px 40px 24px;\n min-width: 100%;\n}\n\n.mj-timeline--horizontal .mj-timeline__segment {\n flex: 0 0 auto;\n display: flex;\n flex-direction: column;\n margin-bottom: 0;\n margin-right: 40px;\n position: relative;\n}\n\n.mj-timeline--horizontal .mj-timeline__segment:last-child {\n margin-right: 0;\n}\n\n.mj-timeline--horizontal .mj-timeline__segment-header {\n position: absolute;\n top: -56px;\n left: 0;\n margin-bottom: 0;\n white-space: nowrap;\n}\n\n.mj-timeline--horizontal .mj-timeline__segment-content {\n display: flex;\n flex-direction: row;\n align-items: flex-start;\n}\n\n.mj-timeline--horizontal .mj-timeline__axis {\n display: flex;\n flex-direction: row;\n align-items: flex-start;\n padding-left: 0;\n min-width: max-content;\n gap: 0;\n}\n\n/* Horizontal axis line */\n.mj-timeline--horizontal .mj-timeline__axis::before {\n left: 0;\n right: 0;\n top: 0;\n bottom: auto;\n width: 100%;\n height: var(--mj-timeline-line-width);\n transform: none;\n}\n\n.mj-timeline--horizontal .mj-timeline__event {\n flex-direction: column;\n align-items: center;\n margin-bottom: 0;\n margin-right: 48px;\n padding: 0;\n padding-top: 32px;\n min-width: 180px;\n max-width: 280px;\n width: auto;\n}\n\n.mj-timeline--horizontal .mj-timeline__event--odd {\n padding-left: 0;\n flex-direction: column;\n}\n\n.mj-timeline--horizontal .mj-timeline__event:last-child {\n margin-right: 0;\n}\n\n.mj-timeline--horizontal .mj-timeline__marker {\n position: absolute;\n left: 50%;\n /* Position so marker is centered on the axis line (top: 0 of axis) */\n /* Event has padding-top: 32px, marker is 14px, so top: -(32 + 7) = -39px for center */\n top: calc(-32px - var(--mj-timeline-marker-size) / 2);\n transform: translateX(-50%);\n margin: 0;\n}\n\n.mj-timeline--horizontal .mj-timeline__event:hover .mj-timeline__marker {\n transform: translateX(-50%) scale(1.2);\n}\n\n.mj-timeline--horizontal .mj-timeline__date-label {\n position: absolute;\n top: -40px;\n left: 50%;\n right: auto;\n transform: translateX(-50%);\n text-align: center;\n font-size: 12px;\n}\n\n.mj-timeline--horizontal .mj-timeline__card {\n max-width: none;\n width: 100%;\n min-width: 0;\n}\n\n.mj-timeline--horizontal .mj-timeline__card::before {\n display: none;\n}\n\n/* Horizontal focused marker override */\n.mj-timeline--horizontal .mj-timeline__event--focused .mj-timeline__marker {\n transform: translateX(-50%) scale(1.4);\n}\n\n/* Horizontal collapsed segment - rotate 90\u00B0 CCW and compress */\n.mj-timeline--horizontal .mj-timeline__segment--collapsed {\n flex: 0 0 auto;\n width: 32px;\n min-width: 32px;\n margin-right: 4px;\n}\n\n.mj-timeline--horizontal .mj-timeline__segment--collapsed .mj-timeline__segment-header {\n writing-mode: vertical-rl;\n text-orientation: mixed;\n transform: rotate(180deg);\n white-space: nowrap;\n padding: 8px 4px;\n margin: 0;\n top: 0;\n position: relative;\n}\n\n.mj-timeline--horizontal .mj-timeline__segment--collapsed .mj-timeline__segment-content {\n display: none;\n}\n\n/* ============================================================================\n RESPONSIVE\n ============================================================================ */\n\n@media (max-width: 900px) {\n /* Force single layout on smaller screens */\n .mj-timeline--alternating .mj-timeline__axis::before {\n left: 24px;\n transform: none;\n }\n\n .mj-timeline--alternating .mj-timeline__segment-header {\n left: auto;\n transform: none;\n margin-left: 12px;\n }\n\n .mj-timeline--alternating .mj-timeline__event {\n padding-right: 0;\n padding-left: 56px;\n justify-content: flex-start;\n }\n\n .mj-timeline--alternating .mj-timeline__event--odd {\n padding-left: 56px;\n padding-right: 0;\n flex-direction: row;\n }\n\n .mj-timeline--alternating .mj-timeline__marker {\n left: 24px;\n transform: translateX(-50%);\n }\n\n .mj-timeline--alternating .mj-timeline__event:hover .mj-timeline__marker {\n transform: translateX(-50%) scale(1.2);\n }\n\n .mj-timeline--alternating .mj-timeline__date-label {\n display: none;\n }\n\n .mj-timeline--alternating .mj-timeline__card::before {\n left: -6px;\n right: auto;\n border-right: none;\n border-top: none;\n border-left: 1px solid var(--mj-timeline-card-border);\n border-bottom: 1px solid var(--mj-timeline-card-border);\n }\n\n .mj-timeline--alternating .mj-timeline__card {\n max-width: none;\n }\n}\n\n@media (max-width: 600px) {\n mj-timeline {\n --mj-timeline-card-padding: 12px;\n --mj-timeline-gap: 16px;\n --mj-timeline-marker-size: 12px;\n }\n\n .mj-timeline {\n padding: 16px 12px;\n }\n\n .mj-timeline__card-title {\n font-size: 14px;\n }\n\n .mj-timeline--horizontal .mj-timeline__event {\n min-width: 160px;\n max-width: 220px;\n margin-right: 32px;\n }\n}\n\n/* Touch devices */\n@media (hover: none) and (pointer: coarse) {\n .mj-timeline__card-actions--hover-only {\n opacity: 1;\n }\n\n .mj-timeline__action {\n min-height: 40px;\n }\n}\n\n/* Reduced motion */\n@media (prefers-reduced-motion: reduce) {\n .mj-timeline__card,\n .mj-timeline__marker,\n .mj-timeline__segment-toggle {\n transition: none;\n }\n}\n"] }]
|
|
1949
|
+
args: [{ standalone: false, selector: 'mj-timeline', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<!--\nMJ Timeline Component Template\n\nStructure:\n- Loading state\n- Empty state\n- Timeline container (vertical/horizontal)\n- Time segments (collapsible)\n- Segment header\n- Event cards within segment\n- Or flat list of events (when segmentGrouping='none')\n- Virtual scroll sentinel\n-->\n\n<div\n class=\"mj-timeline\"\n [class.mj-timeline--vertical]=\"orientation === 'vertical'\"\n [class.mj-timeline--horizontal]=\"orientation === 'horizontal'\"\n [class.mj-timeline--single]=\"layout === 'single'\"\n [class.mj-timeline--alternating]=\"layout === 'alternating'\"\n [attr.aria-label]=\"ariaLabel\"\n role=\"list\"\n tabindex=\"0\"\n (keydown)=\"onKeyDown($event)\"\n #scrollContainer\n (scroll)=\"onScroll($event)\">\n\n <!-- Loading State -->\n @if (isLoading && !isInitialized) {\n @if (loadingTemplate) {\n <ng-container *ngTemplateOutlet=\"loadingTemplate\"></ng-container>\n } @else {\n <div class=\"mj-timeline__loading\">\n <div class=\"mj-timeline__loading-spinner\"></div>\n <span class=\"mj-timeline__loading-text\">{{ loadingMessage }}</span>\n </div>\n }\n }\n\n <!-- Empty State -->\n @if (isInitialized && allEvents.length === 0 && !isLoading) {\n @if (emptyTemplate) {\n <ng-container *ngTemplateOutlet=\"emptyTemplate\"></ng-container>\n } @else {\n <div class=\"mj-timeline__empty\">\n <i [class]=\"emptyIcon\" class=\"mj-timeline__empty-icon\"></i>\n <span class=\"mj-timeline__empty-text\">{{ emptyMessage }}</span>\n </div>\n }\n }\n\n <!-- Timeline Content -->\n @if (isInitialized && allEvents.length > 0) {\n <!-- Segmented View -->\n @if (segmentGrouping !== 'none') {\n @for (segment of segments; track trackBySegmentLabel(segmentIndex, segment); let segmentIndex = $index) {\n <div\n class=\"mj-timeline__segment\"\n [class.mj-timeline__segment--collapsed]=\"!segment.isExpanded\"\n [attr.data-segment-label]=\"segment.label\">\n <!-- Segment Header -->\n <div\n class=\"mj-timeline__segment-header\"\n [class.mj-timeline__segment-header--clickable]=\"segmentsCollapsible\"\n (click)=\"onSegmentClick(segment)\"\n role=\"button\"\n [attr.aria-expanded]=\"segment.isExpanded\"\n [attr.aria-controls]=\"'segment-content-' + segmentIndex\">\n @if (segmentHeaderTemplate) {\n <ng-container *ngTemplateOutlet=\"segmentHeaderTemplate; context: { segment: segment }\"></ng-container>\n } @else {\n @if (segmentsCollapsible) {\n <span class=\"mj-timeline__segment-toggle\">\n <i [class]=\"segment.isExpanded ? 'fa-solid fa-chevron-down' : 'fa-solid fa-chevron-right'\"></i>\n </span>\n }\n <span class=\"mj-timeline__segment-label\">{{ segment.label }}</span>\n <span class=\"mj-timeline__segment-count\">({{ segment.eventCount }} {{ segment.eventCount === 1 ? 'event' : 'events' }})</span>\n <span class=\"mj-timeline__segment-line\"></span>\n }\n </div>\n <!-- Segment Content -->\n <div\n class=\"mj-timeline__segment-content\"\n [id]=\"'segment-content-' + segmentIndex\"\n [class.mj-timeline__segment-content--hidden]=\"!segment.isExpanded\">\n <div class=\"mj-timeline__axis\">\n <!-- Events in Segment -->\n @for (event of segment.events; track trackByEventId(eventIndex, event); let eventIndex = $index; let isOdd = $odd) {\n <ng-container *ngTemplateOutlet=\"eventCard; context: {\n event: event,\n index: eventIndex,\n isOdd: isOdd,\n globalIndex: getGlobalIndex(event)\n }\"></ng-container>\n }\n </div>\n </div>\n </div>\n }\n }\n <!-- Flat View (no segments) -->\n @if (segmentGrouping === 'none') {\n <div class=\"mj-timeline__axis\">\n @for (event of allEvents; track trackByEventId(eventIndex, event); let eventIndex = $index; let isOdd = $odd) {\n <ng-container *ngTemplateOutlet=\"eventCard; context: {\n event: event,\n index: eventIndex,\n isOdd: isOdd,\n globalIndex: eventIndex\n }\"></ng-container>\n }\n </div>\n }\n }\n\n <!-- Virtual Scroll Sentinel -->\n @if (virtualScroll.enabled && scrollState.hasMore) {\n <div\n class=\"mj-timeline-scroll-sentinel\"\n >\n </div>\n }\n\n <!-- Loading More Indicator -->\n @if (scrollState.isLoading && virtualScroll.showLoadingIndicator) {\n <div\n class=\"mj-timeline__loading-more\"\n >\n <div class=\"mj-timeline__loading-spinner mj-timeline__loading-spinner--small\"></div>\n <span>{{ virtualScroll.loadingMessage }}</span>\n </div>\n }\n\n</div>\n\n<!-- Event Card Template -->\n<ng-template #eventCard let-event=\"event\" let-index=\"index\" let-isOdd=\"isOdd\" let-globalIndex=\"globalIndex\">\n <div\n class=\"mj-timeline__event\"\n [class.mj-timeline__event--odd]=\"isOdd && layout === 'alternating'\"\n [class.mj-timeline__event--even]=\"!isOdd && layout === 'alternating'\"\n [class.mj-timeline__event--expanded]=\"event.isExpanded\"\n [class.mj-timeline__event--focused]=\"isEventSelected(event, globalIndex)\"\n [attr.data-event-id]=\"event.id\"\n role=\"listitem\"\n [attr.aria-expanded]=\"event.isExpanded\">\n\n <!-- Timeline Marker -->\n <div class=\"mj-timeline__marker\" [style.background-color]=\"getColor(event)\">\n <i [class]=\"getIcon(event)\" class=\"mj-timeline__marker-icon\"></i>\n </div>\n\n <!-- Connector Line -->\n <div class=\"mj-timeline__connector\" [style.background-color]=\"getColor(event)\"></div>\n\n <!-- Date Label (for alternating layout) -->\n @if (layout === 'alternating') {\n <div class=\"mj-timeline__date-label\">\n {{ formatDate(event.date) }}\n </div>\n }\n\n <!-- Event Card -->\n <div\n class=\"mj-timeline__card\"\n [ngClass]=\"getEffectiveCardConfig(event).cssClass\"\n [style.max-width]=\"getEffectiveCardConfig(event).maxWidth\"\n [style.min-width]=\"getEffectiveCardConfig(event).minWidth\"\n [style.border-left-color]=\"getColor(event)\"\n (click)=\"onEventClick(event, globalIndex, $event)\"\n (mouseenter)=\"onEventMouseEnter(event, globalIndex, $event)\"\n (mouseleave)=\"onEventMouseLeave(event, globalIndex, $event)\">\n\n <!-- Custom Card Template -->\n @if (cardTemplate) {\n <ng-container *ngTemplateOutlet=\"cardTemplate; context: {\n event: event,\n group: groups[event.groupIndex]\n }\"></ng-container>\n } @else {\n <!-- Card Header -->\n <div class=\"mj-timeline__card-header\">\n <!-- Image (left position) -->\n @if (event.imageUrl && getEffectiveCardConfig(event).imagePosition === 'left') {\n <div\n class=\"mj-timeline__card-image mj-timeline__card-image--left\"\n [class.mj-timeline__card-image--small]=\"getEffectiveCardConfig(event).imageSize === 'small'\"\n [class.mj-timeline__card-image--medium]=\"getEffectiveCardConfig(event).imageSize === 'medium'\"\n [class.mj-timeline__card-image--large]=\"getEffectiveCardConfig(event).imageSize === 'large'\">\n <img [src]=\"event.imageUrl\" [alt]=\"event.title\" />\n </div>\n }\n <div class=\"mj-timeline__card-header-content\">\n <!-- Custom Header Template -->\n @if (headerTemplate) {\n <ng-container *ngTemplateOutlet=\"headerTemplate; context: { event: event }\"></ng-container>\n } @else {\n <!-- Icon -->\n @if (getEffectiveCardConfig(event).showIcon) {\n <span\n class=\"mj-timeline__card-icon\"\n [style.color]=\"getColor(event)\">\n <i [class]=\"getIcon(event)\"></i>\n </span>\n }\n <!-- Title & Subtitle -->\n <div class=\"mj-timeline__card-titles\">\n <h4 class=\"mj-timeline__card-title\">{{ event.title }}</h4>\n @if (event.subtitle && getEffectiveCardConfig(event).showSubtitle) {\n <span\n class=\"mj-timeline__card-subtitle\"\n >\n {{ event.subtitle }}\n </span>\n }\n @if (getEffectiveCardConfig(event).showDate && layout !== 'alternating') {\n <span\n class=\"mj-timeline__card-date\"\n >\n {{ formatDate(event.date, getEffectiveCardConfig(event).dateFormat) }}\n </span>\n }\n </div>\n <!-- Expand/Collapse Toggle -->\n @if (getEffectiveCardConfig(event).collapsible) {\n <button\n class=\"mj-timeline__card-toggle\"\n (click)=\"onToggleExpand(event, globalIndex, $event)\"\n [attr.aria-label]=\"event.isExpanded ? 'Collapse' : 'Expand'\"\n type=\"button\">\n <i [class]=\"event.isExpanded ? 'fa-solid fa-chevron-up' : 'fa-solid fa-chevron-down'\"></i>\n </button>\n }\n }\n </div>\n </div>\n <!-- Image (top position) -->\n @if (event.imageUrl && getEffectiveCardConfig(event).imagePosition === 'top') {\n <div\n class=\"mj-timeline__card-image mj-timeline__card-image--top\"\n >\n <img [src]=\"event.imageUrl\" [alt]=\"event.title\" />\n </div>\n }\n <!-- Card Body -->\n <div\n class=\"mj-timeline__card-body\"\n [class.mj-timeline__card-body--collapsed]=\"!event.isExpanded && getEffectiveCardConfig(event).collapsible\">\n <!-- Custom Body Template -->\n @if (bodyTemplate) {\n <ng-container *ngTemplateOutlet=\"bodyTemplate; context: { event: event }\"></ng-container>\n } @else {\n <!-- Summary Fields (always visible) -->\n @if (getEffectiveCardConfig(event).summaryFields?.length) {\n <div\n class=\"mj-timeline__card-fields mj-timeline__card-fields--summary\"\n >\n @for (field of getEffectiveCardConfig(event).summaryFields; track field) {\n <div class=\"mj-timeline__card-field\" [ngClass]=\"field.cssClass\">\n @if (field.icon) {\n <i [ngClass]=\"field.icon\" class=\"mj-timeline__card-field-icon\"></i>\n }\n @if (!field.hideLabel && field.label) {\n <span class=\"mj-timeline__card-field-label\">{{ field.label }}:</span>\n }\n <span class=\"mj-timeline__card-field-value\">{{ getFieldValue(event, field) }}</span>\n </div>\n }\n </div>\n }\n <!-- Description (expanded view) -->\n @if (event.description && event.isExpanded) {\n <div\n class=\"mj-timeline__card-description\"\n [class.mj-timeline__card-description--clamped]=\"(getEffectiveCardConfig(event).descriptionMaxLines ?? 0) > 0\"\n [style.-webkit-line-clamp]=\"getEffectiveCardConfig(event).descriptionMaxLines || null\">\n @if (getEffectiveCardConfig(event).allowHtmlDescription) {\n <div [innerHTML]=\"event.description\"></div>\n } @else {\n {{ event.description }}\n }\n </div>\n }\n <!-- Expanded Fields -->\n @if (event.isExpanded && getEffectiveCardConfig(event).expandedFields?.length) {\n <div\n class=\"mj-timeline__card-fields mj-timeline__card-fields--expanded\"\n >\n @for (field of getEffectiveCardConfig(event).expandedFields; track field) {\n <div class=\"mj-timeline__card-field\" [ngClass]=\"field.cssClass\">\n @if (field.icon) {\n <i [ngClass]=\"field.icon\" class=\"mj-timeline__card-field-icon\"></i>\n }\n @if (!field.hideLabel) {\n <span class=\"mj-timeline__card-field-label\">{{ field.label || field.fieldName }}:</span>\n }\n <span class=\"mj-timeline__card-field-value\">{{ getFieldValue(event, field) }}</span>\n </div>\n }\n </div>\n }\n }\n </div>\n <!-- Card Actions -->\n @if (getActions(event).length > 0) {\n <div\n class=\"mj-timeline__card-actions\"\n [class.mj-timeline__card-actions--hover-only]=\"getEffectiveCardConfig(event).actionsOnHover\"\n >\n <!-- Custom Actions Template -->\n @if (actionsTemplate) {\n <ng-container *ngTemplateOutlet=\"actionsTemplate; context: {\n event: event,\n actions: getActions(event)\n }\"></ng-container>\n } @else {\n @for (action of getActions(event); track action) {\n <button\n class=\"mj-timeline__action\"\n [class.mj-timeline__action--primary]=\"action.variant === 'primary'\"\n [class.mj-timeline__action--secondary]=\"action.variant === 'secondary' || !action.variant\"\n [class.mj-timeline__action--danger]=\"action.variant === 'danger'\"\n [class.mj-timeline__action--link]=\"action.variant === 'link'\"\n [ngClass]=\"action.cssClass\"\n [disabled]=\"action.disabled\"\n [title]=\"action.tooltip || ''\"\n (click)=\"onActionClick(event, action, globalIndex, $event)\"\n type=\"button\">\n @if (action.icon) {\n <i [ngClass]=\"action.icon\"></i>\n }\n <span>{{ action.label }}</span>\n </button>\n }\n }\n </div>\n }\n }\n\n <!-- Default Card Template -->\n </div>\n </div>\n</ng-template>\n", styles: ["/**\n * MJ Timeline Component Styles\n * Kendo-inspired design with vertical alternating and horizontal layouts\n */\n\n/* ============================================================================\n CSS VARIABLES (Theming)\n ============================================================================ */\n\nmj-timeline {\n /* Colors */\n --mj-timeline-bg: transparent;\n --mj-timeline-line-color: var(--mj-border-default);\n --mj-timeline-marker-bg: var(--mj-bg-surface);\n --mj-timeline-marker-border: var(--mj-brand-primary);\n --mj-timeline-marker-fill: var(--mj-brand-primary);\n --mj-timeline-card-bg: var(--mj-bg-surface);\n --mj-timeline-card-border: var(--mj-border-default);\n --mj-timeline-card-shadow: var(--mj-shadow-sm);\n --mj-timeline-card-shadow-hover: var(--mj-shadow-md);\n --mj-timeline-card-radius: var(--mj-radius-md);\n --mj-timeline-text-primary: var(--mj-text-primary);\n --mj-timeline-text-secondary: var(--mj-text-muted);\n --mj-timeline-text-muted: var(--mj-text-disabled);\n --mj-timeline-accent: var(--mj-brand-primary);\n --mj-timeline-accent-light: color-mix(in srgb, var(--mj-brand-primary) 8%, transparent);\n --mj-timeline-segment-bg: var(--mj-brand-primary);\n --mj-timeline-segment-text: var(--mj-text-inverse);\n --mj-timeline-focus-ring: 0 0 0 2px color-mix(in srgb, var(--mj-brand-primary) 30%, transparent);\n\n /* Sizing */\n --mj-timeline-line-width: 2px;\n --mj-timeline-marker-size: 14px;\n --mj-timeline-card-padding: 16px;\n --mj-timeline-card-max-width: 400px;\n --mj-timeline-card-min-width: 200px;\n --mj-timeline-gap: 24px;\n --mj-timeline-segment-gap: 16px;\n --mj-timeline-axis-offset: 50%;\n\n /* Animation */\n --mj-timeline-transition: 0.15s ease;\n\n display: block;\n width: 100%;\n height: 100%;\n}\n\n/* Dark mode handled automatically by --mj-* semantic tokens */\n\n/* ============================================================================\n MAIN CONTAINER\n ============================================================================ */\n\n.mj-timeline {\n position: relative;\n width: 100%;\n height: 100%;\n padding: 0;\n background: var(--mj-timeline-bg);\n outline: none;\n overflow-y: auto;\n overflow-x: hidden;\n}\n\n/* Subtle scrollbar */\n.mj-timeline::-webkit-scrollbar {\n width: 6px;\n}\n\n.mj-timeline::-webkit-scrollbar-track {\n background: transparent;\n}\n\n.mj-timeline::-webkit-scrollbar-thumb {\n background: rgba(0, 0, 0, 0.15);\n border-radius: 3px;\n}\n\n.mj-timeline::-webkit-scrollbar-thumb:hover {\n background: rgba(0, 0, 0, 0.25);\n}\n\n.mj-timeline:focus-visible {\n box-shadow: inset var(--mj-timeline-focus-ring);\n}\n\n/* ============================================================================\n LOADING & EMPTY STATES\n ============================================================================ */\n\n.mj-timeline__loading {\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n padding: 48px 24px;\n gap: 12px;\n}\n\n.mj-timeline__loading-spinner {\n width: 24px;\n height: 24px;\n border: 2px solid var(--mj-timeline-line-color);\n border-top-color: var(--mj-timeline-accent);\n border-radius: var(--mj-radius-full);\n animation: mj-timeline-spin 0.6s linear infinite;\n}\n\n.mj-timeline__loading-spinner--small {\n width: 14px;\n height: 14px;\n}\n\n.mj-timeline__loading-text {\n color: var(--mj-timeline-text-muted);\n font-size: var(--mj-text-sm);\n}\n\n.mj-timeline__loading-more {\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 16px;\n gap: 8px;\n color: var(--mj-timeline-text-muted);\n font-size: var(--mj-text-xs);\n}\n\n@keyframes mj-timeline-spin {\n to { transform: rotate(360deg); }\n}\n\n.mj-timeline__empty {\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n padding: 64px 24px;\n gap: 8px;\n text-align: center;\n}\n\n.mj-timeline__empty-icon {\n font-size: 32px;\n color: var(--mj-timeline-text-muted);\n opacity: 0.4;\n}\n\n.mj-timeline__empty-text {\n color: var(--mj-timeline-text-secondary);\n font-size: var(--mj-text-sm);\n}\n\n/* ============================================================================\n TIME SEGMENTS - Year/Month badges on the axis\n ============================================================================ */\n\n.mj-timeline__segment {\n margin-bottom: var(--mj-timeline-segment-gap);\n position: relative;\n}\n\n.mj-timeline__segment:last-child {\n margin-bottom: 0;\n}\n\n.mj-timeline__segment-header {\n display: inline-flex;\n align-items: center;\n gap: 8px;\n padding: 6px 16px;\n margin-bottom: var(--mj-timeline-gap);\n background: var(--mj-timeline-segment-bg);\n border-radius: var(--mj-radius-sm);\n font-weight: 600;\n font-size: var(--mj-text-sm);\n color: var(--mj-timeline-segment-text);\n user-select: none;\n box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);\n position: relative;\n z-index: 10;\n}\n\n.mj-timeline__segment-header--clickable {\n cursor: pointer;\n transition: all var(--mj-timeline-transition);\n}\n\n.mj-timeline__segment-header--clickable:hover {\n filter: brightness(1.1);\n box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);\n}\n\n.mj-timeline__segment-toggle {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 16px;\n height: 16px;\n color: inherit;\n font-size: var(--mj-text-xs);\n opacity: 0.9;\n transition: transform var(--mj-timeline-transition);\n}\n\n.mj-timeline__segment--collapsed .mj-timeline__segment-toggle {\n transform: rotate(-90deg);\n}\n\n.mj-timeline__segment-label {\n font-size: inherit;\n font-weight: inherit;\n color: inherit;\n}\n\n.mj-timeline__segment-count {\n display: none;\n}\n\n.mj-timeline__segment-line {\n display: none;\n}\n\n.mj-timeline__segment-content {\n overflow: visible;\n transition: max-height 0.25s ease, opacity 0.2s ease;\n padding-top: 8px;\n}\n\n.mj-timeline__segment-content--hidden {\n max-height: 0;\n opacity: 0;\n pointer-events: none;\n}\n\n/* ============================================================================\n TIMELINE AXIS - Vertical line in center\n ============================================================================ */\n\n.mj-timeline__axis {\n position: relative;\n padding-left: 0;\n}\n\n/* Vertical center line */\n.mj-timeline__axis::before {\n content: '';\n position: absolute;\n left: 50%;\n top: 0;\n bottom: 0;\n width: var(--mj-timeline-line-width);\n background: var(--mj-timeline-line-color);\n transform: translateX(-50%);\n}\n\n/* ============================================================================\n TIMELINE EVENT - Alternating left/right by default\n ============================================================================ */\n\n.mj-timeline__event {\n position: relative;\n display: flex;\n align-items: flex-start;\n margin-bottom: var(--mj-timeline-gap);\n width: 100%;\n}\n\n/* Even events (0, 2, 4...) - card on LEFT, date on RIGHT */\n.mj-timeline__event {\n padding-right: calc(50% + 32px);\n justify-content: flex-end;\n}\n\n/* Odd events (1, 3, 5...) - card on RIGHT, date on LEFT */\n.mj-timeline__event--odd {\n padding-right: 0;\n padding-left: calc(50% + 32px);\n justify-content: flex-start;\n flex-direction: row;\n}\n\n.mj-timeline__event:last-child {\n margin-bottom: 0;\n}\n\n/* ============================================================================\n MARKER - Circular dot on the axis\n ============================================================================ */\n\n.mj-timeline__marker {\n position: absolute;\n left: 50%;\n top: 12px;\n transform: translateX(-50%);\n width: var(--mj-timeline-marker-size);\n height: var(--mj-timeline-marker-size);\n background: var(--mj-timeline-marker-fill);\n border: 2px solid var(--mj-timeline-marker-bg);\n border-radius: var(--mj-radius-full);\n box-shadow: 0 0 0 2px var(--mj-timeline-marker-fill);\n z-index: 5;\n transition: transform var(--mj-timeline-transition);\n}\n\n.mj-timeline__marker-icon {\n display: none;\n}\n\n.mj-timeline__event:hover .mj-timeline__marker {\n transform: translateX(-50%) scale(1.2);\n}\n\n.mj-timeline__connector {\n display: none;\n}\n\n/* ============================================================================\n DATE LABEL - Positioned opposite the card\n ============================================================================ */\n\n.mj-timeline__date-label {\n position: absolute;\n top: 10px;\n font-size: var(--mj-text-sm);\n font-weight: 500;\n color: var(--mj-timeline-text-secondary);\n white-space: nowrap;\n}\n\n/* Even events - date on RIGHT side of axis */\n.mj-timeline__event:not(.mj-timeline__event--odd) .mj-timeline__date-label {\n left: calc(50% + 24px);\n text-align: left;\n}\n\n/* Odd events - date on LEFT side of axis */\n.mj-timeline__event--odd .mj-timeline__date-label {\n right: calc(50% + 24px);\n text-align: right;\n}\n\n/* ============================================================================\n EVENT CARD - Clean design matching Kendo\n ============================================================================ */\n\n.mj-timeline__card {\n background: var(--mj-timeline-card-bg);\n border: 1px solid var(--mj-timeline-card-border);\n border-radius: var(--mj-timeline-card-radius);\n box-shadow: var(--mj-timeline-card-shadow);\n overflow: hidden;\n transition: all var(--mj-timeline-transition);\n cursor: pointer;\n max-width: var(--mj-timeline-card-max-width);\n min-width: var(--mj-timeline-card-min-width);\n width: 100%;\n}\n\n/* Card arrow/pointer toward the axis */\n.mj-timeline__card::before {\n content: '';\n position: absolute;\n top: 14px;\n width: 10px;\n height: 10px;\n background: var(--mj-timeline-card-bg);\n border: 1px solid var(--mj-timeline-card-border);\n transform: rotate(45deg);\n}\n\n/* Even events - arrow points RIGHT toward axis */\n.mj-timeline__event:not(.mj-timeline__event--odd) .mj-timeline__card::before {\n right: -6px;\n border-left: none;\n border-bottom: none;\n}\n\n/* Odd events - arrow points LEFT toward axis */\n.mj-timeline__event--odd .mj-timeline__card::before {\n left: -6px;\n border-right: none;\n border-top: none;\n}\n\n/* Hover state */\n.mj-timeline__card:hover {\n box-shadow: var(--mj-timeline-card-shadow-hover);\n border-color: var(--mj-timeline-accent);\n}\n\n/* Selected/Focused state - prominent highlight with animation */\n.mj-timeline__event--focused .mj-timeline__card {\n background: var(--mj-timeline-accent-light);\n border-color: var(--mj-timeline-accent);\n box-shadow:\n 0 0 0 3px var(--mj-timeline-accent),\n 0 8px 24px color-mix(in srgb, var(--mj-brand-primary) 25%, transparent);\n transform: scale(1.02);\n}\n\n/* Selected marker - larger and more prominent */\n.mj-timeline__event--focused .mj-timeline__marker {\n transform: translateX(-50%) scale(1.4);\n box-shadow:\n 0 0 0 3px var(--mj-timeline-marker-fill),\n 0 0 12px color-mix(in srgb, var(--mj-brand-primary) 50%, transparent);\n}\n\n/* Pulse animation for selected marker */\n.mj-timeline__event--focused .mj-timeline__marker::after {\n content: '';\n position: absolute;\n top: -4px;\n left: -4px;\n right: -4px;\n bottom: -4px;\n border-radius: var(--mj-radius-full);\n border: 2px solid var(--mj-timeline-accent);\n animation: mj-timeline-pulse 1.5s ease-out infinite;\n}\n\n@keyframes mj-timeline-pulse {\n 0% {\n transform: scale(1);\n opacity: 0.8;\n }\n 100% {\n transform: scale(1.8);\n opacity: 0;\n }\n}\n\n/* Selected date label - bolder */\n.mj-timeline__event--focused .mj-timeline__date-label {\n color: var(--mj-timeline-accent);\n font-weight: 600;\n}\n\n/* Card arrow gets accent color when selected */\n.mj-timeline__event--focused .mj-timeline__card::before {\n border-color: var(--mj-timeline-accent);\n background: var(--mj-timeline-accent-light);\n}\n\n/* ============================================================================\n CARD HEADER\n ============================================================================ */\n\n.mj-timeline__card-header {\n display: flex;\n align-items: flex-start;\n padding: var(--mj-timeline-card-padding);\n gap: 10px;\n}\n\n.mj-timeline__card-header-content {\n flex: 1;\n display: flex;\n align-items: flex-start;\n gap: 10px;\n min-width: 0;\n}\n\n.mj-timeline__card-icon {\n display: none;\n}\n\n.mj-timeline__card-titles {\n flex: 1;\n min-width: 0;\n}\n\n.mj-timeline__card-title {\n margin: 0;\n font-size: var(--mj-text-base);\n font-weight: 600;\n color: var(--mj-timeline-text-primary);\n line-height: 1.35;\n}\n\n.mj-timeline__card-subtitle {\n display: block;\n font-size: var(--mj-text-sm);\n color: var(--mj-timeline-text-secondary);\n margin-top: 4px;\n}\n\n.mj-timeline__card-date {\n display: block;\n font-size: var(--mj-text-xs);\n color: var(--mj-timeline-text-muted);\n margin-top: 6px;\n}\n\n.mj-timeline__card-date::before {\n display: none;\n}\n\n.mj-timeline__card-toggle {\n flex-shrink: 0;\n display: flex;\n align-items: center;\n justify-content: center;\n width: 28px;\n height: 28px;\n border: none;\n background: transparent;\n color: var(--mj-timeline-text-muted);\n border-radius: 4px;\n cursor: pointer;\n transition: all var(--mj-timeline-transition);\n font-size: var(--mj-text-sm);\n}\n\n.mj-timeline__card-toggle:hover {\n background: var(--mj-timeline-accent-light);\n color: var(--mj-timeline-accent);\n}\n\n/* ============================================================================\n CARD IMAGE\n ============================================================================ */\n\n.mj-timeline__card-image {\n overflow: hidden;\n border-radius: var(--mj-radius-sm);\n flex-shrink: 0;\n}\n\n.mj-timeline__card-image img {\n display: block;\n width: 100%;\n height: 100%;\n object-fit: cover;\n}\n\n.mj-timeline__card-image--left.mj-timeline__card-image--small {\n width: 48px;\n height: 48px;\n}\n\n.mj-timeline__card-image--left.mj-timeline__card-image--medium {\n width: 72px;\n height: 72px;\n}\n\n.mj-timeline__card-image--left.mj-timeline__card-image--large {\n width: 96px;\n height: 96px;\n}\n\n.mj-timeline__card-image--top {\n width: calc(100% - 32px);\n max-height: 180px;\n margin: 0 16px 12px;\n}\n\n/* ============================================================================\n CARD BODY\n ============================================================================ */\n\n.mj-timeline__card-body {\n padding: 0 var(--mj-timeline-card-padding) var(--mj-timeline-card-padding);\n}\n\n.mj-timeline__card-body--collapsed {\n display: none;\n}\n\n.mj-timeline__card-description {\n font-size: var(--mj-text-sm);\n line-height: 1.6;\n color: var(--mj-timeline-text-secondary);\n margin-bottom: 12px;\n}\n\n.mj-timeline__card-description--clamped {\n display: -webkit-box;\n -webkit-box-orient: vertical;\n overflow: hidden;\n}\n\n.mj-timeline__card-description:last-child {\n margin-bottom: 0;\n}\n\n/* ============================================================================\n CARD FIELDS\n ============================================================================ */\n\n.mj-timeline__card-fields {\n display: flex;\n flex-wrap: wrap;\n gap: 4px 12px;\n}\n\n.mj-timeline__card-fields--summary {\n padding-top: 12px;\n border-top: 1px solid var(--mj-timeline-line-color);\n margin-top: 12px;\n}\n\n.mj-timeline__card-fields--expanded {\n margin-top: 12px;\n padding-top: 12px;\n border-top: 1px solid var(--mj-timeline-line-color);\n}\n\n.mj-timeline__card-field {\n display: flex;\n align-items: center;\n gap: 5px;\n font-size: var(--mj-text-xs);\n}\n\n.mj-timeline__card-field-icon {\n color: var(--mj-timeline-text-muted);\n font-size: var(--mj-text-xs);\n}\n\n.mj-timeline__card-field-label {\n color: var(--mj-timeline-text-muted);\n}\n\n.mj-timeline__card-field-value {\n color: var(--mj-timeline-text-secondary);\n font-weight: 500;\n}\n\n/* ============================================================================\n CARD ACTIONS\n ============================================================================ */\n\n.mj-timeline__card-actions {\n display: flex;\n flex-wrap: wrap;\n gap: 6px;\n padding: 0 var(--mj-timeline-card-padding) var(--mj-timeline-card-padding);\n justify-content: flex-end;\n}\n\n.mj-timeline__card-actions--hover-only {\n opacity: 0;\n transition: opacity var(--mj-timeline-transition);\n}\n\n.mj-timeline__card:hover .mj-timeline__card-actions--hover-only,\n.mj-timeline__card:focus-within .mj-timeline__card-actions--hover-only {\n opacity: 1;\n}\n\n.mj-timeline__action {\n display: inline-flex;\n align-items: center;\n gap: 5px;\n padding: 6px 12px;\n font-size: var(--mj-text-xs);\n font-weight: 500;\n border: 1px solid;\n border-radius: var(--mj-radius-sm);\n cursor: pointer;\n transition: all var(--mj-timeline-transition);\n}\n\n.mj-timeline__action:disabled {\n opacity: 0.4;\n cursor: not-allowed;\n}\n\n.mj-timeline__action i {\n font-size: var(--mj-text-xs);\n}\n\n.mj-timeline__action--primary {\n background: var(--mj-timeline-accent);\n border-color: var(--mj-timeline-accent);\n color: var(--mj-text-inverse);\n}\n\n.mj-timeline__action--primary:hover:not(:disabled) {\n filter: brightness(1.1);\n}\n\n.mj-timeline__action--secondary {\n background: transparent;\n border-color: var(--mj-timeline-card-border);\n color: var(--mj-timeline-text-primary);\n}\n\n.mj-timeline__action--secondary:hover:not(:disabled) {\n background: var(--mj-timeline-accent-light);\n border-color: var(--mj-timeline-accent);\n color: var(--mj-timeline-accent);\n}\n\n.mj-timeline__action--danger {\n background: var(--mj-status-error);\n border-color: var(--mj-status-error);\n color: var(--mj-text-inverse);\n}\n\n.mj-timeline__action--link {\n background: transparent;\n border-color: transparent;\n color: var(--mj-timeline-accent);\n}\n\n.mj-timeline__action--link:hover:not(:disabled) {\n text-decoration: underline;\n}\n\n/* ============================================================================\n VIRTUAL SCROLL\n ============================================================================ */\n\n.mj-timeline-scroll-sentinel {\n height: 1px;\n width: 100%;\n visibility: hidden;\n}\n\n/* ============================================================================\n SINGLE LAYOUT - Cards only on right side\n ============================================================================ */\n\n.mj-timeline--single .mj-timeline__axis::before {\n left: 24px;\n transform: none;\n}\n\n.mj-timeline--single .mj-timeline__segment-header {\n margin-left: 12px;\n}\n\n.mj-timeline--single .mj-timeline__event {\n padding-right: 0;\n padding-left: 56px;\n justify-content: flex-start;\n}\n\n.mj-timeline--single .mj-timeline__event--odd {\n padding-left: 56px;\n flex-direction: row;\n}\n\n.mj-timeline--single .mj-timeline__marker {\n left: 24px;\n transform: translateX(-50%);\n}\n\n.mj-timeline--single .mj-timeline__date-label {\n display: none;\n}\n\n.mj-timeline--single .mj-timeline__card::before {\n left: -6px;\n right: auto;\n border-right: none;\n border-top: none;\n border-left: 1px solid var(--mj-timeline-card-border);\n border-bottom: 1px solid var(--mj-timeline-card-border);\n}\n\n.mj-timeline--single .mj-timeline__card {\n max-width: none;\n}\n\n/* ============================================================================\n ALTERNATING LAYOUT - Explicit class (same as default vertical)\n ============================================================================ */\n\n.mj-timeline--alternating .mj-timeline__segment-header {\n left: 50%;\n transform: translateX(-50%);\n}\n\n/* ============================================================================\n HORIZONTAL LAYOUT\n ============================================================================ */\n\n.mj-timeline--horizontal {\n display: flex;\n flex-direction: row;\n flex-wrap: nowrap;\n align-items: flex-start;\n overflow-x: auto;\n overflow-y: hidden;\n padding: 80px 40px 24px;\n min-width: 100%;\n}\n\n.mj-timeline--horizontal .mj-timeline__segment {\n flex: 0 0 auto;\n display: flex;\n flex-direction: column;\n margin-bottom: 0;\n margin-right: 40px;\n position: relative;\n}\n\n.mj-timeline--horizontal .mj-timeline__segment:last-child {\n margin-right: 0;\n}\n\n.mj-timeline--horizontal .mj-timeline__segment-header {\n position: absolute;\n top: -56px;\n left: 0;\n margin-bottom: 0;\n white-space: nowrap;\n}\n\n.mj-timeline--horizontal .mj-timeline__segment-content {\n display: flex;\n flex-direction: row;\n align-items: flex-start;\n}\n\n.mj-timeline--horizontal .mj-timeline__axis {\n display: flex;\n flex-direction: row;\n align-items: flex-start;\n padding-left: 0;\n min-width: max-content;\n gap: 0;\n}\n\n/* Horizontal axis line */\n.mj-timeline--horizontal .mj-timeline__axis::before {\n left: 0;\n right: 0;\n top: 0;\n bottom: auto;\n width: 100%;\n height: var(--mj-timeline-line-width);\n transform: none;\n}\n\n.mj-timeline--horizontal .mj-timeline__event {\n flex-direction: column;\n align-items: center;\n margin-bottom: 0;\n margin-right: 48px;\n padding: 0;\n padding-top: 32px;\n min-width: 180px;\n max-width: 280px;\n width: auto;\n}\n\n.mj-timeline--horizontal .mj-timeline__event--odd {\n padding-left: 0;\n flex-direction: column;\n}\n\n.mj-timeline--horizontal .mj-timeline__event:last-child {\n margin-right: 0;\n}\n\n.mj-timeline--horizontal .mj-timeline__marker {\n position: absolute;\n left: 50%;\n /* Position so marker is centered on the axis line (top: 0 of axis) */\n /* Event has padding-top: 32px, marker is 14px, so top: -(32 + 7) = -39px for center */\n top: calc(-32px - var(--mj-timeline-marker-size) / 2);\n transform: translateX(-50%);\n margin: 0;\n}\n\n.mj-timeline--horizontal .mj-timeline__event:hover .mj-timeline__marker {\n transform: translateX(-50%) scale(1.2);\n}\n\n.mj-timeline--horizontal .mj-timeline__date-label {\n position: absolute;\n top: -40px;\n left: 50%;\n right: auto;\n transform: translateX(-50%);\n text-align: center;\n font-size: var(--mj-text-xs);\n}\n\n.mj-timeline--horizontal .mj-timeline__card {\n max-width: none;\n width: 100%;\n min-width: 0;\n}\n\n.mj-timeline--horizontal .mj-timeline__card::before {\n display: none;\n}\n\n/* Horizontal focused marker override */\n.mj-timeline--horizontal .mj-timeline__event--focused .mj-timeline__marker {\n transform: translateX(-50%) scale(1.4);\n}\n\n/* Horizontal collapsed segment - rotate 90\u00B0 CCW and compress */\n.mj-timeline--horizontal .mj-timeline__segment--collapsed {\n flex: 0 0 auto;\n width: 32px;\n min-width: 32px;\n margin-right: 4px;\n}\n\n.mj-timeline--horizontal .mj-timeline__segment--collapsed .mj-timeline__segment-header {\n writing-mode: vertical-rl;\n text-orientation: mixed;\n transform: rotate(180deg);\n white-space: nowrap;\n padding: 8px 4px;\n margin: 0;\n top: 0;\n position: relative;\n}\n\n.mj-timeline--horizontal .mj-timeline__segment--collapsed .mj-timeline__segment-content {\n display: none;\n}\n\n/* ============================================================================\n RESPONSIVE\n ============================================================================ */\n\n@media (max-width: 900px) {\n /* Force single layout on smaller screens */\n .mj-timeline--alternating .mj-timeline__axis::before {\n left: 24px;\n transform: none;\n }\n\n .mj-timeline--alternating .mj-timeline__segment-header {\n left: auto;\n transform: none;\n margin-left: 12px;\n }\n\n .mj-timeline--alternating .mj-timeline__event {\n padding-right: 0;\n padding-left: 56px;\n justify-content: flex-start;\n }\n\n .mj-timeline--alternating .mj-timeline__event--odd {\n padding-left: 56px;\n padding-right: 0;\n flex-direction: row;\n }\n\n .mj-timeline--alternating .mj-timeline__marker {\n left: 24px;\n transform: translateX(-50%);\n }\n\n .mj-timeline--alternating .mj-timeline__event:hover .mj-timeline__marker {\n transform: translateX(-50%) scale(1.2);\n }\n\n .mj-timeline--alternating .mj-timeline__date-label {\n display: none;\n }\n\n .mj-timeline--alternating .mj-timeline__card::before {\n left: -6px;\n right: auto;\n border-right: none;\n border-top: none;\n border-left: 1px solid var(--mj-timeline-card-border);\n border-bottom: 1px solid var(--mj-timeline-card-border);\n }\n\n .mj-timeline--alternating .mj-timeline__card {\n max-width: none;\n }\n}\n\n@media (max-width: 600px) {\n mj-timeline {\n --mj-timeline-card-padding: 12px;\n --mj-timeline-gap: 16px;\n --mj-timeline-marker-size: 12px;\n }\n\n .mj-timeline {\n padding: 16px 12px;\n }\n\n .mj-timeline__card-title {\n font-size: var(--mj-text-sm);\n }\n\n .mj-timeline--horizontal .mj-timeline__event {\n min-width: 160px;\n max-width: 220px;\n margin-right: 32px;\n }\n}\n\n/* Touch devices */\n@media (hover: none) and (pointer: coarse) {\n .mj-timeline__card-actions--hover-only {\n opacity: 1;\n }\n\n .mj-timeline__action {\n min-height: 40px;\n }\n}\n\n/* Reduced motion */\n@media (prefers-reduced-motion: reduce) {\n .mj-timeline__card,\n .mj-timeline__marker,\n .mj-timeline__segment-toggle {\n transition: none;\n }\n}\n"] }]
|
|
1950
1950
|
}], () => [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }, { type: i0.NgZone }], { groups: [{
|
|
1951
1951
|
type: Input
|
|
1952
1952
|
}], allowLoad: [{
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@memberjunction/ng-timeline",
|
|
3
|
-
"version": "5.
|
|
3
|
+
"version": "5.12.0",
|
|
4
4
|
"description": "MemberJunction: Responsive timeline component for Angular. Works with MemberJunction entities or plain JavaScript objects. No external dependencies.",
|
|
5
5
|
"main": "./dist/public-api.js",
|
|
6
6
|
"typings": "./dist/public-api.d.ts",
|
|
@@ -37,7 +37,7 @@
|
|
|
37
37
|
}
|
|
38
38
|
},
|
|
39
39
|
"dependencies": {
|
|
40
|
-
"@memberjunction/core": "5.
|
|
40
|
+
"@memberjunction/core": "5.12.0",
|
|
41
41
|
"rxjs": "~7.8.2",
|
|
42
42
|
"tslib": "^2.8.1"
|
|
43
43
|
},
|