@affinda/wc 0.6.1 → 0.7.0

package/dist/collection/components/af-timeline/af-timeline.js

@@ -0,0 +1,380 @@
+import { h, Host } from "@stencil/core";
+/**
+ * Horizontal Gantt-style timeline for displaying project phases and milestones.
+ * Items are positioned based on their date ranges relative to the timeline bounds.
+ *
+ * @slot heading - Optional timeline title
+ * @slot - `af-timeline-item` children
+ *
+ * @example
+ * ```html
+ * <af-timeline start-date="2024-01-01" end-date="2024-06-30" unit="month">
+ *   <span slot="heading">Project Timeline</span>
+ *   <af-timeline-item start-date="2024-01-01" end-date="2024-02-28" label="Phase 1" status="complete">
+ *   </af-timeline-item>
+ *   <af-timeline-item start-date="2024-03-01" end-date="2024-04-30" label="Phase 2" status="active">
+ *   </af-timeline-item>
+ * </af-timeline>
+ * ```
+ */
+export class AfTimeline {
+    constructor() {
+        /**
+         * Time axis granularity.
+         */
+        this.unit = 'month';
+        /**
+         * Display time axis labels at top.
+         */
+        this.showAxis = true;
+        /**
+         * Highlight current date with a marker.
+         */
+        this.showToday = true;
+        this.context = null;
+        this.axisLabels = [];
+        this.todayPosition = null;
+        this.targetPosition = null;
+        this.scrollState = { progress: 0, thumbWidth: 100, showScrollbar: false };
+        this.draggingScrollbar = false;
+        this.updateScrollState = () => {
+            if (!this.ganttEl)
+                return;
+            const { scrollWidth, clientWidth, scrollLeft } = this.ganttEl;
+            const maxScroll = scrollWidth - clientWidth;
+            const showScrollbar = scrollWidth > clientWidth;
+            const thumbWidth = showScrollbar ? (clientWidth / scrollWidth) * 100 : 100;
+            const progress = maxScroll > 0 ? scrollLeft / maxScroll : 0;
+            this.scrollState = { progress, thumbWidth, showScrollbar };
+        };
+        this.handleGanttScroll = () => {
+            this.updateScrollState();
+        };
+        this.handleScrollbarPointerDown = (event) => {
+            if (!this.scrollState.showScrollbar || !this.ganttEl)
+                return;
+            event.preventDefault();
+            this.draggingScrollbar = true;
+            event.currentTarget.setPointerCapture?.(event.pointerId);
+            this.scrollToPointerPosition(event);
+        };
+        this.handleScrollbarPointerMove = (event) => {
+            if (!this.draggingScrollbar)
+                return;
+            event.preventDefault();
+            this.scrollToPointerPosition(event);
+        };
+        this.handleScrollbarPointerUp = (event) => {
+            this.draggingScrollbar = false;
+            event.currentTarget.releasePointerCapture?.(event.pointerId);
+        };
+        this.scrollToPointerPosition = (event) => {
+            if (!this.ganttEl)
+                return;
+            const track = event.currentTarget;
+            const rect = track.getBoundingClientRect();
+            const ratio = rect.width > 0 ? (event.clientX - rect.left) / rect.width : 0;
+            const clampedRatio = Math.max(0, Math.min(1, ratio));
+            const maxScroll = this.ganttEl.scrollWidth - this.ganttEl.clientWidth;
+            this.ganttEl.scrollLeft = clampedRatio * maxScroll;
+        };
+    }
+    componentWillLoad() {
+        this.updateContext();
+    }
+    componentDidLoad() {
+        this.updateScrollState();
+    }
+    handleDateChange() {
+        this.updateContext();
+    }
+    parseDate(dateStr) {
+        if (!dateStr)
+            return null;
+        const parsed = new Date(dateStr);
+        return isNaN(parsed.getTime()) ? null : parsed;
+    }
+    updateContext() {
+        const start = this.parseDate(this.startDate);
+        const end = this.parseDate(this.endDate);
+        if (!start || !end) {
+            this.context = null;
+            return;
+        }
+        const totalDays = Math.ceil((end.getTime() - start.getTime()) / (1000 * 60 * 60 * 24));
+        this.context = {
+            startDate: start,
+            endDate: end,
+            totalDays: Math.max(totalDays, 1),
+            unit: this.unit,
+        };
+        this.calculateAxisLabels();
+        this.calculateTodayPosition();
+        this.calculateTargetPosition();
+        this.syncItemPositions();
+    }
+    calculateAxisLabels() {
+        if (!this.context)
+            return;
+        const { startDate, endDate, unit } = this.context;
+        const labels = [];
+        const current = new Date(startDate);
+        const months = [
+            'Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
+            'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec',
+        ];
+        while (current <= endDate) {
+            const position = this.getPositionForDate(current);
+            let label = '';
+            switch (unit) {
+                case 'day':
+                    label = `${current.getDate()}`;
+                    current.setDate(current.getDate() + 1);
+                    break;
+                case 'week':
+                    label = `W${Math.ceil(current.getDate() / 7)}`;
+                    current.setDate(current.getDate() + 7);
+                    break;
+                case 'month':
+                    label = months[current.getMonth()];
+                    current.setMonth(current.getMonth() + 1);
+                    break;
+                case 'quarter':
+                    label = `Q${Math.ceil((current.getMonth() + 1) / 3)}`;
+                    current.setMonth(current.getMonth() + 3);
+                    break;
+            }
+            if (position >= 0 && position <= 100) {
+                labels.push({ label, position });
+            }
+        }
+        this.axisLabels = labels;
+    }
+    calculateTodayPosition() {
+        if (!this.context || !this.showToday) {
+            this.todayPosition = null;
+            return;
+        }
+        const today = new Date();
+        today.setHours(0, 0, 0, 0);
+        const position = this.getPositionForDate(today);
+        this.todayPosition = position >= 0 && position <= 100 ? position : null;
+    }
+    calculateTargetPosition() {
+        if (!this.context || !this.targetDate) {
+            this.targetPosition = null;
+            return;
+        }
+        const target = this.parseDate(this.targetDate);
+        if (!target) {
+            this.targetPosition = null;
+            return;
+        }
+        const position = this.getPositionForDate(target);
+        this.targetPosition = position >= 0 && position <= 100 ? position : null;
+    }
+    getPositionForDate(date) {
+        if (!this.context)
+            return 0;
+        const { startDate, totalDays } = this.context;
+        const daysDiff = Math.ceil((date.getTime() - startDate.getTime()) / (1000 * 60 * 60 * 24));
+        return (daysDiff / totalDays) * 100;
+    }
+    syncItemPositions() {
+        if (!this.context)
+            return;
+        const items = this.el.querySelectorAll('af-timeline-item');
+        const { startDate, totalDays } = this.context;
+        items.forEach((item) => {
+            const itemEl = item;
+            const itemStart = this.parseDate(itemEl.startDate || '');
+            const itemEnd = itemEl.endDate ? this.parseDate(itemEl.endDate) : null;
+            if (itemStart) {
+                const startDiff = Math.ceil((itemStart.getTime() - startDate.getTime()) / (1000 * 60 * 60 * 24));
+                const startPos = (startDiff / totalDays) * 100;
+                let width = 2; // Milestone default
+                if (itemEnd) {
+                    const endDiff = Math.ceil((itemEnd.getTime() - startDate.getTime()) / (1000 * 60 * 60 * 24));
+                    width = ((endDiff - startDiff) / totalDays) * 100;
+                }
+                itemEl._startPosition = Math.max(0, Math.min(100, startPos));
+                itemEl._width = Math.max(1, Math.min(100 - startPos, width));
+            }
+        });
+    }
+    getThumbStyle() {
+        const { progress, thumbWidth } = this.scrollState;
+        const maxLeft = 100 - thumbWidth;
+        return {
+            left: `${progress * maxLeft}%`,
+            width: `${thumbWidth}%`,
+        };
+    }
+    render() {
+        if (!this.context) {
+            return (h(Host, { class: "timeline timeline--invalid" }, h("p", { class: "timeline__error" }, "Invalid date range")));
+        }
+        return (h(Host, { class: "timeline" }, h("div", { class: "timeline__heading" }, h("slot", { name: "heading" })), h("div", { class: "timeline__gantt", ref: (el) => (this.ganttEl = el), onScroll: this.handleGanttScroll }, this.showAxis && (h("div", { class: "timeline__axis" }, this.axisLabels.map((tick) => (h("span", { class: "timeline__axis-label", style: { left: `${tick.position}%` } }, tick.label))))), h("div", { class: "timeline__body" }, this.todayPosition !== null && (h("div", { class: "timeline__marker timeline__marker--today", style: { left: `${this.todayPosition}%` }, "aria-label": "Today" }, h("span", { class: "timeline__marker-label" }, "Today"))), this.targetPosition !== null && (h("div", { class: "timeline__marker timeline__marker--target", style: { left: `${this.targetPosition}%` }, "aria-label": "Target date" }, h("span", { class: "timeline__marker-label" }, "Target"))), h("div", { class: "timeline__items" }, h("slot", null)))), this.scrollState.showScrollbar && (h("div", { class: "timeline__scrollbar", role: "scrollbar", "aria-label": "Timeline scroll position", "aria-valuenow": Math.round(this.scrollState.progress * 100), "aria-valuemin": 0, "aria-valuemax": 100, tabIndex: 0, onPointerDown: this.handleScrollbarPointerDown, onPointerMove: this.handleScrollbarPointerMove, onPointerUp: this.handleScrollbarPointerUp, onPointerCancel: this.handleScrollbarPointerUp }, h("div", { class: "timeline__scrollbar-track" }, h("div", { class: "timeline__scrollbar-thumb", style: this.getThumbStyle() }))))));
+    }
+    static get is() { return "af-timeline"; }
+    static get encapsulation() { return "scoped"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["af-timeline.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["af-timeline.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "startDate": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": true,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Timeline start date (ISO format YYYY-MM-DD or label)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "start-date"
+            },
+            "endDate": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": true,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Timeline end date (ISO format YYYY-MM-DD or label)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "end-date"
+            },
+            "unit": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "TimelineUnit",
+                    "resolved": "\"day\" | \"month\" | \"quarter\" | \"week\"",
+                    "references": {
+                        "TimelineUnit": {
+                            "location": "local",
+                            "path": "/home/runner/work/affinda-website-npm-publish/affinda-website-npm-publish/packages/wc/src/components/af-timeline/af-timeline.tsx",
+                            "id": "src/components/af-timeline/af-timeline.tsx::TimelineUnit"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Time axis granularity."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "unit",
+                "defaultValue": "'month'"
+            },
+            "showAxis": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Display time axis labels at top."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "show-axis",
+                "defaultValue": "true"
+            },
+            "showToday": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Highlight current date with a marker."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "show-today",
+                "defaultValue": "true"
+            },
+            "targetDate": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Highlight a specific target/goal date."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "target-date"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "context": {},
+            "axisLabels": {},
+            "todayPosition": {},
+            "targetPosition": {},
+            "scrollState": {}
+        };
+    }
+    static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "startDate",
+                "methodName": "handleDateChange"
+            }, {
+                "propName": "endDate",
+                "methodName": "handleDateChange"
+            }, {
+                "propName": "unit",
+                "methodName": "handleDateChange"
+            }];
+    }
+}

package/dist/collection/components/af-timeline-item/af-timeline-item.css

@@ -0,0 +1,301 @@
+:host {
+  display: block;
+  position: relative;
+}
+
+/* ==========================================================================
+   Gantt Bar View (Desktop)
+   ========================================================================== */
+
+.timeline-item__bar {
+  position: relative;
+  height: 32px;
+  min-width: 20px;
+}
+
+.timeline-item__fill {
+  height: 100%;
+  border-radius: var(--radius-sm, 6px);
+  display: flex;
+  align-items: center;
+  padding: 0 var(--space-2, 8px);
+  overflow: visible;
+  cursor: pointer;
+  transition: box-shadow var(--motion-duration-fast, 150ms) var(--motion-easing-standard);
+}
+
+.timeline-item__fill:hover,
+.timeline-item__fill:focus-visible {
+  outline: 2px solid var(--colour-brand-ice, #a6fffb);
+  outline-offset: 2px;
+}
+
+/* Status Colors */
+.timeline-item--planned .timeline-item__fill {
+  background-color: var(--af-timeline-planned, var(--colour-inkwell-100, #d0d6d8));
+}
+
+.timeline-item--active .timeline-item__fill {
+  background-color: var(--af-timeline-active, var(--colour-brand-mist-green, #c6d5d1));
+}
+
+.timeline-item--complete .timeline-item__fill {
+  background-color: var(--af-timeline-complete, var(--colour-tints-mist-green-600, #b2c0bc));
+}
+
+.timeline-item__label {
+  font-family: var(--typography-primaryfont, 'NeuSans', sans-serif);
+  font-size: 12px;
+  line-height: 16px;
+  font-weight: var(--font-weight-book, 500);
+  color: var(--af-timeline-label, var(--colour-brand-inkwell, #14343b));
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+/* ==========================================================================
+   Milestone Diamond
+   ========================================================================== */
+
+.timeline-item__diamond {
+  width: 16px;
+  height: 16px;
+  transform: rotate(45deg);
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  margin-top: -8px;
+  margin-left: -8px;
+  cursor: pointer;
+  transition: box-shadow var(--motion-duration-fast, 150ms) var(--motion-easing-standard);
+}
+
+.timeline-item__diamond:hover,
+.timeline-item__diamond:focus-visible {
+  outline: 2px solid var(--colour-brand-ice, #a6fffb);
+  outline-offset: 2px;
+}
+
+.timeline-item--planned .timeline-item__diamond {
+  background-color: var(--af-timeline-planned, var(--colour-inkwell-100, #d0d6d8));
+  border: 2px solid var(--colour-inkwell-200, #a1aeb1);
+}
+
+.timeline-item--active .timeline-item__diamond {
+  background-color: var(--af-timeline-active, var(--colour-brand-mist-green, #c6d5d1));
+  border: 2px solid var(--colour-tints-mist-green-600, #b2c0bc);
+}
+
+.timeline-item--complete .timeline-item__diamond {
+  background-color: var(--af-timeline-complete, var(--colour-tints-mist-green-600, #b2c0bc));
+  border: 2px solid var(--colour-tints-mist-green-700, #9eaaa7);
+}
+
+/* ==========================================================================
+   Tooltip
+   ========================================================================== */
+
+.timeline-item__tooltip {
+  position: absolute;
+  bottom: calc(100% + 8px);
+  left: 50%;
+  transform: translateX(-50%);
+  background-color: var(--af-timeline-tooltip-bg, var(--colour-brand-inkwell, #14343b));
+  color: var(--af-timeline-tooltip-text, var(--colour-brand-white, #ffffff));
+  padding: var(--space-3, 12px);
+  border-radius: var(--radius-md, 12px);
+  font-family: var(--typography-primaryfont, 'NeuSans', sans-serif);
+  font-size: 14px;
+  line-height: 20px;
+  min-width: 180px;
+  max-width: 280px;
+  opacity: 0;
+  visibility: hidden;
+  transition: opacity var(--motion-duration-fast, 150ms) var(--motion-easing-standard),
+    visibility var(--motion-duration-fast, 150ms) var(--motion-easing-standard);
+  z-index: 20;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+}
+
+.timeline-item__tooltip::after {
+  content: '';
+  position: absolute;
+  top: 100%;
+  left: 50%;
+  margin-left: -6px;
+  border: 6px solid transparent;
+  border-top-color: var(--af-timeline-tooltip-bg, var(--colour-brand-inkwell, #14343b));
+}
+
+.timeline-item__bar:hover .timeline-item__tooltip,
+.timeline-item__fill:focus .timeline-item__tooltip,
+.timeline-item__diamond:focus .timeline-item__tooltip {
+  opacity: 1;
+  visibility: visible;
+}
+
+.timeline-item__tooltip-label {
+  font-weight: var(--font-weight-book, 500);
+  margin-bottom: 4px;
+}
+
+.timeline-item__tooltip-dates {
+  font-size: 12px;
+  opacity: 0.8;
+  margin-bottom: 8px;
+}
+
+.timeline-item__tooltip-content {
+  font-size: 13px;
+  line-height: 18px;
+  opacity: 0.9;
+}
+
+.timeline-item__tooltip-content:empty {
+  display: none;
+}
+
+/* ==========================================================================
+   Mobile List View
+   ========================================================================== */
+
+.timeline-item__list-item {
+  display: none;
+  padding: var(--space-4, 16px);
+  gap: var(--space-3, 12px);
+  align-items: flex-start;
+}
+
+.timeline-item__list-status {
+  flex-shrink: 0;
+  width: 24px;
+  height: 24px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.timeline-item__list-indicator {
+  width: 12px;
+  height: 12px;
+  border-radius: 50%;
+}
+
+.timeline-item--planned .timeline-item__list-indicator {
+  background-color: var(--af-timeline-planned, var(--colour-inkwell-100, #d0d6d8));
+}
+
+.timeline-item--active .timeline-item__list-indicator {
+  background-color: var(--af-timeline-active, var(--colour-brand-mist-green, #c6d5d1));
+}
+
+.timeline-item--complete .timeline-item__list-indicator {
+  background-color: var(--af-timeline-complete, var(--colour-tints-mist-green-600, #b2c0bc));
+}
+
+.timeline-item__list-diamond {
+  width: 10px;
+  height: 10px;
+  transform: rotate(45deg);
+}
+
+.timeline-item--planned .timeline-item__list-diamond {
+  background-color: var(--af-timeline-planned, var(--colour-inkwell-100, #d0d6d8));
+}
+
+.timeline-item--active .timeline-item__list-diamond {
+  background-color: var(--af-timeline-active, var(--colour-brand-mist-green, #c6d5d1));
+}
+
+.timeline-item--complete .timeline-item__list-diamond {
+  background-color: var(--af-timeline-complete, var(--colour-tints-mist-green-600, #b2c0bc));
+}
+
+.timeline-item__list-content {
+  flex: 1;
+  min-width: 0;
+}
+
+.timeline-item__list-label {
+  font-family: var(--typography-primaryfont, 'NeuSans', sans-serif);
+  font-weight: var(--font-weight-book, 500);
+  font-size: 16px;
+  line-height: 22px;
+  color: var(--af-typography-heading-primary, #14343b);
+  margin-bottom: 2px;
+}
+
+.timeline-item__list-dates {
+  font-family: var(--typography-primaryfont, 'NeuSans', sans-serif);
+  font-size: 13px;
+  line-height: 18px;
+  color: var(--af-typography-body-subtle, #60767b);
+  margin-bottom: 4px;
+}
+
+.timeline-item__list-description {
+  font-family: var(--typography-primaryfont, 'NeuSans', sans-serif);
+  font-size: 14px;
+  line-height: 20px;
+  color: var(--af-typography-body-default, #2b484f);
+}
+
+.timeline-item__list-description:empty {
+  display: none;
+}
+
+.timeline-item__list-badge {
+  flex-shrink: 0;
+}
+
+.timeline-item__status-badge {
+  display: inline-block;
+  font-family: var(--typography-primaryfont, 'NeuSans', sans-serif);
+  font-size: 11px;
+  line-height: 16px;
+  font-weight: var(--font-weight-book, 500);
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+  padding: 2px 8px;
+  border-radius: var(--radius-sm, 6px);
+}
+
+.timeline-item__status-badge--planned {
+  background-color: var(--colour-inkwell-50, #e8ebeb);
+  color: var(--colour-inkwell-400, #2b484f);
+}
+
+.timeline-item__status-badge--active {
+  background-color: var(--colour-tints-mist-green-100, #f4f7f6);
+  color: var(--colour-tints-mist-green-700, #9eaaa7);
+}
+
+.timeline-item__status-badge--complete {
+  background-color: rgba(62, 143, 110, 0.15);
+  color: var(--status-ok, #3e8f6e);
+}
+
+/* ==========================================================================
+   Mobile Responsive
+   ========================================================================== */
+
+@media (max-width: 767px) {
+  .timeline-item__bar {
+    display: none;
+  }
+
+  .timeline-item__list-item {
+    display: flex;
+  }
+}
+
+@media (min-width: 768px) {
+  .timeline-item__list-item {
+    display: none;
+  }
+
+  .timeline-item__bar {
+    display: block;
+  }
+}