@spicainternational/ngx-sds-components 7.12.0-beta.2 → 8.0.0

package/fesm2022/spicainternational-ngx-sds-components-src-lib-timeline.mjs

@@ -0,0 +1,546 @@
+import * as i0 from '@angular/core';
+import { EventEmitter, HostListener, ViewChild, Input, Output, Component } from '@angular/core';
+import { NgIf, NgFor, NgStyle, NgClass, NgTemplateOutlet } from '@angular/common';
+
+class SdsTimelineService {
+    constructor(start, end, offSetMinutes, cutOffset) {
+        this.startWithOffset = new Date();
+        this.endWithOffset = new Date();
+        this.start = new Date();
+        this.end = new Date();
+        this.cutOffset = true;
+        this.hourTicks = [];
+        this.cutOffset = cutOffset;
+        this.start = new Date(start);
+        this.startWithOffset = new Date(start);
+        this.startWithOffset.setMinutes(this.startWithOffset.getMinutes() - offSetMinutes);
+        this.end = new Date(end);
+        this.endWithOffset = new Date(end);
+        this.endWithOffset.setMinutes(this.endWithOffset.getMinutes() + offSetMinutes);
+        this.widthPercentPerMinute = (100 / this.diffInMinutes(this.startWithOffset, this.endWithOffset));
+        this.initHourTicks();
+    }
+    getX(time) {
+        const trimmedTime = new Date(time);
+        if (this.cutOffset) {
+            if (trimmedTime < this.start) {
+                trimmedTime.setTime(this.start.getTime());
+            }
+            if (trimmedTime > this.end) {
+                trimmedTime.setTime(this.end.getTime());
+            }
+        }
+        return this.diffInMinutes(this.startWithOffset, trimmedTime) * this.widthPercentPerMinute;
+    }
+    getWidthFromMinutes(minutes) {
+        return minutes * this.widthPercentPerMinute;
+    }
+    getWidthFromTime(start, end) {
+        const trimmedStart = new Date(start);
+        if (this.cutOffset) {
+            if (trimmedStart < this.start) {
+                trimmedStart.setTime(this.start.getTime());
+            }
+            if (trimmedStart > this.end) {
+                trimmedStart.setTime(this.end.getTime());
+            }
+        }
+        const trimmedEnd = new Date(end);
+        if (this.cutOffset) {
+            if (trimmedEnd < this.start) {
+                trimmedEnd.setTime(this.start.getTime());
+            }
+            if (trimmedEnd > this.end) {
+                trimmedEnd.setTime(this.end.getTime());
+            }
+        }
+        return this.getWidthFromMinutes(this.diffInMinutes(trimmedStart, trimmedEnd));
+    }
+    getTick(time) {
+        return {
+            date: new Date(time),
+            x: this.getX(time),
+        };
+    }
+    getHourTicks(frequency = 'hourly') {
+        return this.hourTicks.filter(tick => this.isValidFrequencyHour(tick.date.getHours(), frequency));
+    }
+    getHourLabels(frequency = 'hourly') {
+        const hourLabels = [];
+        const ticks = this.hourTicks.filter(tick => this.isValidFrequencyHour(tick.date.getHours(), frequency));
+        ticks.forEach(tick => {
+            let labelStartTime = new Date(tick.date);
+            hourLabels.push({
+                x: this.getX(labelStartTime),
+                width: 0,
+                label: tick.date.getHours().toString(),
+                date: new Date(labelStartTime),
+                data: null
+            });
+        });
+        return hourLabels;
+    }
+    getDayLabels(locales, customDataFn) {
+        const dayLabels = [];
+        // get start date at the beginning of the day
+        let startDate = new Date(this.startWithOffset);
+        startDate.setHours(0, 0, 0, 0);
+        // get end date at the end of the day
+        let endDate = new Date(this.endWithOffset);
+        endDate.setHours(23, 59, 59, 999);
+        let currentDate = new Date(startDate);
+        while (currentDate <= endDate) {
+            let endOfCurrentDay = new Date(currentDate);
+            endOfCurrentDay.setHours(23, 59, 59, 999);
+            const dayLabelWidth = this.getWidthFromTime(currentDate, endOfCurrentDay);
+            if (dayLabelWidth > 0) {
+                dayLabels.push({
+                    // date: new Date(currentDate),
+                    x: this.getX(new Date(currentDate)),
+                    width: dayLabelWidth,
+                    label: currentDate.toLocaleDateString(locales ?? [], { weekday: 'long', day: 'numeric', month: 'long', year: 'numeric' }),
+                    date: new Date(currentDate),
+                    data: customDataFn ? customDataFn(new Date(currentDate)) : null
+                });
+            }
+            currentDate.setDate(currentDate.getDate() + 1);
+        }
+        return dayLabels;
+    }
+    //#region Private Methods
+    isValidFrequencyHour(hours, frequency) {
+        if (frequency === 'hourly') {
+            return true; // every tick is valid
+        }
+        if (frequency === '2hrs') {
+            return hours % 2 === 0;
+        }
+        if (frequency === '3hrs') {
+            return hours % 3 === 0;
+        }
+        if (frequency === '6hrs') {
+            return hours % 6 === 0;
+        }
+        return false; // unsupported frequency
+    }
+    diffInMinutes(start, end) {
+        return (end.getTime() - start.getTime()) / (1000 * 60);
+        ;
+    }
+    roundHoursUp(time) {
+        let newTime = new Date(time);
+        if (newTime.getMinutes() > 0 || newTime.getSeconds() > 0 || newTime.getMilliseconds() > 0) {
+            newTime.setHours(newTime.getHours() + 1);
+        }
+        newTime.setMinutes(0, 0, 0);
+        return newTime;
+    }
+    roundHoursDown(time) {
+        let newTime = new Date(time);
+        newTime.setMinutes(0, 0, 0);
+        return newTime;
+    }
+    initHourTicks() {
+        this.hourTicks = [];
+        // get first whole hour from start date
+        let startHour = this.roundHoursUp(this.startWithOffset);
+        // get last whole hour from end date
+        let endHour = this.roundHoursDown(this.endWithOffset);
+        let currentHour = new Date(startHour);
+        while (currentHour <= endHour) {
+            this.hourTicks.push(this.getTick(currentHour));
+            currentHour.setHours(currentHour.getHours() + 1);
+        }
+    }
+}
+
+class SdsTimelineComponent {
+    constructor() {
+        /**
+         * The start date and time for the timeline.
+         *
+         * @type {Date}
+         * @memberof SdsTimelineComponent
+         */
+        this.start = new Date();
+        /**
+         * The end date and time for the timeline.
+         *
+         * @type {Date}
+         * @memberof SdsTimelineComponent
+         */
+        this.end = new Date();
+        /**
+         * The period based items to be displayed on the timeline. Specify data if you need
+         * additional data for custom rendering of the items.
+         *
+         * @type {TimelineItem[]}
+         * @memberof SdsTimelineComponent
+         */
+        this.items = [];
+        /**
+         * Items to be displayed on the timeline at a specific point in time.
+         * Specify data if you need additional data for custom rendering of the items.
+         *
+         * @type {TimelinePointInTimeItem[]}
+         * @memberof SdsTimelineComponent
+         */
+        this.pointInTimeItems = [];
+        /**
+         * The template to be used for custom rendering of the items.
+         *
+         * @type {(TemplateRef<any> | undefined)}
+         * @memberof SdsTimelineComponent
+         */
+        this.itemTemplate = undefined;
+        /**
+         * The template to be used for custom rendering of the poin-in-time items.
+         *
+         * @type {(TemplateRef<any> | undefined)}
+         * @memberof SdsTimelineComponent
+         */
+        this.pointInTimeTemplate = undefined;
+        /**
+         * The template to be used for custom rendering of the day labels.
+         *
+         * @type {(TemplateRef<any> | undefined)}
+         * @memberof SdsTimelineComponent
+         */
+        this.dayLabelTemplate = undefined;
+        /**
+         * A custom data function for the day labels.
+         * This function takes a Date object as input and returns any custom data that will be available for the custom template
+         *
+         * @memberof SdsTimelineComponent
+         */
+        this.dayLabelCustomDataFn = undefined;
+        /**
+         * The frequency of the ticks on the timeline.
+         *
+         * @type {TimelineTickFrequency}
+         * @memberof SdsTimelineComponent
+         */
+        this.tickFrequency = 'hourly';
+        /**
+         * The frequency of the hour labels on the timeline.
+         *
+         * @type {TimelineTickFrequency}
+         * @memberof SdsTimelineComponent
+         */
+        this.hourLabelFrequency = '3hrs';
+        /**
+         * The current zoom level of the timeline. In percent.
+         *
+         * @type {number}
+         * @memberof SdsTimelineComponent
+         */
+        this.zoomPercent = 100;
+        this.zoomPercentChange = new EventEmitter();
+        /**
+         * Initial offset of the viewport in percent. This is used in scenarios
+         * with multiple days when you want to show non-first day as defult.
+         *
+         * @type {number}
+         * @memberof SdsTimelineComponent
+         */
+        this.viewOffsetPercent = 0;
+        this.viewOffsetPercentChange = new EventEmitter();
+        /**
+         * The maximum allowed zoom level of the timeline. In percent.
+         *
+         * @type {number}
+         * @memberof SdsTimelineComponent
+         */
+        this.maxZoomPercent = 500;
+        /**
+         * Whether to show hour labels.
+         *
+         * @type {boolean}
+         * @memberof SdsTimelineComponent
+         */
+        this.showHourLabels = true;
+        /**
+         * Whether to show day labels.
+         *
+         * @type {boolean}
+         * @memberof SdsTimelineComponent
+         */
+        this.showDayLabels = false;
+        /**
+         * Whether to show timeline. Useful for hiding the timeline when we only need header.
+         *
+         * @type {boolean}
+         * @memberof SdsTimelineComponent
+         */
+        this.showTimeline = true;
+        /**
+         * The height of the timeline. Default is 2rem.
+         *
+         * @type {string}
+         * @memberof SdsTimelineComponent
+         */
+        this.timelineHeight = '2rem';
+        /**
+         * Whether to enable zoom and drag functionality.
+         *
+         * @type {boolean}
+         * @memberof SdsTimelineComponent
+         */
+        this.enableZoomAndDrag = true;
+        /**
+         * Number of minutes added to start and stop to fit the data on the edges
+         *
+         * @type {number}
+         * @memberof SdsTimelineComponent
+         */
+        this.offSetMinutes = 15;
+        /**
+         * Control if those parts of segments (or whole segments) that fall into the Offset
+         * period are displayed or not
+         *
+         * @type {boolean}
+         * @memberof SdsTimelineComponent
+         */
+        this.cutOffset = false;
+        // protected
+        this.hourTicks = [];
+        this.hourLabels = [];
+        this.dayLabels = [];
+        this._timelineService = new SdsTimelineService(this.start, this.end, this.offSetMinutes, this.cutOffset);
+        this.presentationItems = [];
+        this.presentationPointInTimeItems = [];
+        this.isDragging = false;
+        this.initialDragX = 0;
+        this.viewOffsetPercentDragStart = 0;
+    }
+    ngAfterViewInit() {
+        this.generateTicks();
+    }
+    ngOnChanges(changes) {
+        if (this.start && this.end) {
+            this._timelineService = new SdsTimelineService(this.start, this.end, this.offSetMinutes, this.cutOffset);
+            this.generateTicks();
+            this.generateInternalTimelineItems();
+        }
+        if (changes['start'] || changes['end'] || changes['offSetMinutes'] || changes['cutOffset']) {
+            this._timelineService = new SdsTimelineService(this.start, this.end, this.offSetMinutes, this.cutOffset);
+            this.generateTicks();
+            this.generateInternalTimelineItems();
+        }
+        if (changes['items']) {
+            this.generateInternalTimelineItems();
+        }
+        if (changes['pointInTimeItems']) {
+            this.generateInternalTimelinePointInTimeItems();
+        }
+        if (changes['zoomPercent']) {
+            // this.viewOffsetPercent = (this.zoomPercent - 100) / -2;
+        }
+        if (changes['showDayLabels'] || changes['showHourLabels']) {
+            this.generateTicks();
+        }
+    }
+    ngOnInit() { }
+    //#region mouse wheel zoom
+    onScroll(event) {
+        if (this.enableZoomAndDrag) {
+            event.preventDefault();
+            const delta = Math.sign(event.deltaY);
+            const newZoomPercent = Math.min(Math.max(this.zoomPercent + -delta * 20, 100), this.maxZoomPercent);
+            const deltaZoomPercent = newZoomPercent - this.zoomPercent;
+            this.zoomPercent = newZoomPercent;
+            this.zoomPercentChange.emit(this.zoomPercent);
+            // get the relative position of the cursor on the viewport so we can zoom in into this position
+            const x = event.clientX - this._viewport?.nativeElement.getBoundingClientRect().left;
+            const cursorRelativePosition = x / this._viewport?.nativeElement.getBoundingClientRect().width;
+            // this.viewOffsetPercent = this.viewOffsetPercent - deltaZoomPercent * cursorRelativePosition;
+            this.constrainOffset(this.viewOffsetPercent - deltaZoomPercent * cursorRelativePosition);
+        }
+    }
+    //#endregion
+    //#region dragging
+    onDragStart(event) {
+        if (this.enableZoomAndDrag && this.zoomPercent > 100) {
+            event.preventDefault();
+            this.isDragging = true;
+            this.viewOffsetPercentDragStart = this.viewOffsetPercent;
+            if (event instanceof MouseEvent) {
+                this.initialDragX = event.clientX;
+            }
+            else if (event instanceof TouchEvent) {
+                this.initialDragX = event.touches[0].clientX;
+            }
+        }
+    }
+    onDragMove(event) {
+        if (this.enableZoomAndDrag) {
+            if (this.isDragging) {
+                const currentX = event.clientX;
+                this.moveElement(currentX);
+            }
+        }
+    }
+    onDragMoveTouch(event) {
+        if (this.enableZoomAndDrag) {
+            if (this.isDragging) {
+                const currentX = event.touches[0].clientX;
+                this.moveElement(currentX);
+            }
+        }
+    }
+    onDragEnd(event) {
+        if (this.enableZoomAndDrag) {
+            this.isDragging = false;
+        }
+    }
+    moveElement(currentX) {
+        const diff = currentX - this.initialDragX;
+        if (this._viewport && this._viewport.nativeElement) {
+            const diffInPercent = (diff / this._viewport?.nativeElement.getBoundingClientRect().width) * 100;
+            // this.viewOffsetPercent = this.viewOffsetPercentDragStart + diffInPercent;
+            this.constrainOffset(this.viewOffsetPercentDragStart + diffInPercent);
+        }
+    }
+    //#endregion
+    constrainOffset(newOffset) {
+        if (this.zoomPercent + newOffset < 100) {
+            newOffset = -this.zoomPercent + 100;
+        }
+        newOffset = Math.min(0, newOffset);
+        if (newOffset != this.viewOffsetPercent) {
+            this.viewOffsetPercent = newOffset;
+            this.viewOffsetPercentChange.emit(this.viewOffsetPercent);
+        }
+    }
+    generateTicks() {
+        this.hourTicks = this._timelineService.getHourTicks(this.tickFrequency);
+        this.dayLabels = this._timelineService.getDayLabels(this.locales, this.dayLabelCustomDataFn);
+        this.hourLabels = this._timelineService.getHourLabels(this.hourLabelFrequency);
+    }
+    generateInternalTimelineItems() {
+        const cuttOffStart = this.cutOffset ? this.start : new Date(this.start.getTime() - this.offSetMinutes * 60000);
+        const cuttOffEnd = this.cutOffset ? this.end : new Date(this.end.getTime() + this.offSetMinutes * 60000);
+        this.presentationItems = this.items
+            .filter((item) => item.end < cuttOffStart || item.start > cuttOffEnd ? false : true)
+            .map((item) => {
+            const startTime = new Date(item.start).toLocaleTimeString(this.locales ?? [], { hour: 'numeric', minute: '2-digit' });
+            const endTime = new Date(item.end).toLocaleTimeString(this.locales ?? [], { hour: 'numeric', minute: '2-digit' });
+            const timeRange = `${startTime} - ${endTime}`;
+            return {
+                data: item.data,
+                x: this._timelineService.getX(item.start),
+                width: this._timelineService.getWidthFromTime(item.start, item.end),
+                hint: item.hint ?? timeRange,
+                backgroundColor: item.backgroundColor,
+                top: item.top ?? '50%',
+                height: item.height ?? '60%',
+                class: item.class,
+            };
+        });
+    }
+    generateInternalTimelinePointInTimeItems() {
+        const cuttOffStart = this.cutOffset ? this.start : new Date(this.start.getTime() - this.offSetMinutes * 60000);
+        const cuttOffEnd = this.cutOffset ? this.end : new Date(this.end.getTime() + this.offSetMinutes * 60000);
+        this.presentationPointInTimeItems = this.pointInTimeItems
+            .filter((item) => item.date < cuttOffStart || item.date > cuttOffEnd ? false : true)
+            .map((item) => {
+            const timePointString = new Date(item.date).toLocaleTimeString(this.locales ?? [], { hour: 'numeric', minute: '2-digit' });
+            return {
+                data: item.data,
+                x: this._timelineService.getX(item.date),
+                hint: item.hint ?? timePointString,
+                top: item.top ?? '20%',
+                height: item.height ?? '1rem',
+                width: item.width ?? '1rem',
+                class: item.class,
+                backgroundColor: item.backgroundColor,
+            };
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: SdsTimelineComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: SdsTimelineComponent, isStandalone: true, selector: "sds-timeline", inputs: { start: "start", end: "end", items: "items", pointInTimeItems: "pointInTimeItems", itemTemplate: "itemTemplate", pointInTimeTemplate: "pointInTimeTemplate", dayLabelTemplate: "dayLabelTemplate", dayLabelCustomDataFn: "dayLabelCustomDataFn", tickFrequency: "tickFrequency", hourLabelFrequency: "hourLabelFrequency", zoomPercent: "zoomPercent", viewOffsetPercent: "viewOffsetPercent", maxZoomPercent: "maxZoomPercent", showHourLabels: "showHourLabels", hourLabelClass: "hourLabelClass", showDayLabels: "showDayLabels", dayLabelClass: "dayLabelClass", showTimeline: "showTimeline", hourTickClass: "hourTickClass", timelineHeight: "timelineHeight", enableZoomAndDrag: "enableZoomAndDrag", offSetMinutes: "offSetMinutes", locales: "locales", cutOffset: "cutOffset" }, outputs: { zoomPercentChange: "zoomPercentChange", viewOffsetPercentChange: "viewOffsetPercentChange" }, host: { listeners: { "window:mousemove": "onDragMove($event)", "window:touchmove": "onDragMoveTouch($event)", "window:mouseup": "onDragEnd($event)", "window:touchend": "onDragEnd($event)" } }, viewQueries: [{ propertyName: "_viewport", first: true, predicate: ["viewport"], descendants: true, static: true }], usesOnChanges: true, ngImport: i0, template: "<ng-template #defaultItemTemplate let-item=\"item\">\r\n    <div \r\n        class=\"sds-timeline-item h-100\"\r\n        [title]=\"item.hint\"\r\n        >\r\n    </div>\r\n</ng-template>\r\n\r\n<ng-template #defaultPointInTimeItemTemplate let-item=\"item\">\r\n    <div \r\n        class=\"sds-timeline-item h-100\"\r\n        [title]=\"item.hint\"\r\n        >\r\n    </div>\r\n</ng-template>\r\n\r\n<ng-template #defaultDayLabelTemplate let-label=\"label\">\r\n    {{label.label}}\r\n</ng-template>\r\n\r\n<div \r\n    #viewport\r\n    class=\"sds-timeline-viewport\"\r\n    (wheel)=\"onScroll($event)\"\r\n\r\n    (mousedown)=\"onDragStart($event)\"\r\n    (touchstart)=\"onDragStart($event)\"\r\n    >\r\n\r\n    <div \r\n        class=\"sds-timeline-container d-flex flex-column\"\r\n        [style.left.%]=\"viewOffsetPercent\"\r\n        [style.width.%]=\"zoomPercent\"\r\n        [style.cursor]=\"isDragging ? 'ew-resize' : 'default'\"\r\n        >\r\n\r\n        <div\r\n            *ngIf=\"showDayLabels\" \r\n            class=\"sds-timeline-day-header\">\r\n\r\n            <div \r\n                *ngFor=\"let label of dayLabels\"\r\n                class=\"sds-day-label\"  \r\n                [ngClass]=\"dayLabelClass ?? null\"\r\n                [style.left.%]=\"label.x\"\r\n                [style.width.%]=\"label.width\"\r\n            >\r\n                <ng-container \r\n                    [ngTemplateOutlet]=\"dayLabelTemplate ? dayLabelTemplate : defaultDayLabelTemplate\"\r\n                    [ngTemplateOutletContext]=\"{label: label}\">\r\n                </ng-container>  \r\n            </div>\r\n        </div>\r\n\r\n        <div \r\n            *ngIf=\"showHourLabels\" \r\n            class=\"sds-timeline-hour-header\">\r\n\r\n            <div \r\n                *ngFor=\"let label of hourLabels;\"\r\n                class=\"sds-hour-label\"  \r\n                [ngClass]=\"hourLabelClass ?? null\"\r\n                [style.left.%]=\"label.x\"\r\n                [style.width.rem]=\"1.2\"\r\n                [ngStyle]=\"{'left': 'calc(' + label.x + '% - 0.6rem)'}\"\r\n            >\r\n                \r\n                {{label.label}}\r\n                \r\n            </div>\r\n        </div>\r\n\r\n        <div \r\n            *ngIf=\"showTimeline\"\r\n            class=\"sds-timeline flex-grow-1\"\r\n            [style.height]=\"timelineHeight\"\r\n            >\r\n\r\n            <div \r\n                *ngFor=\"let tick of hourTicks\"\r\n                class=\"sds-timeline-tick\"  \r\n                [ngClass]=\"hourTickClass ?? null\"\t\r\n                [ngStyle]=\"tick.x == 100 ? {'left': 'calc(' + tick.x +'% - 1px)'} : {'left': 'calc(' + tick.x + '% - 0.5px)'}\"\r\n            >\r\n            </div>\r\n\r\n            <div \r\n                *ngFor=\"let item of presentationItems\"\r\n                class=\"sds-timeline-item-container\"\r\n                [ngClass]=\"item.class ?? null\"\r\n                [ngStyle]=\"{\r\n                    'width': 'max(' + item.width +'%, 1px)',\r\n                    'top': 'calc(' + item.top + ' - max(calc(' + item.height +'/2), 1px))', \r\n                }\"\r\n\r\n                [style.left.%]=\"item.x\"\r\n                [style.height]=\"item.height\"\r\n                [style.backgroundColor]=\"item.backgroundColor\"\r\n                >\r\n\r\n                <ng-container \r\n                    [ngTemplateOutlet]=\"itemTemplate ? itemTemplate : defaultItemTemplate\"\r\n                    [ngTemplateOutletContext]=\"{item: item}\">\r\n                </ng-container>  \r\n            </div>\r\n\r\n\r\n            <!-- [ngClass]=\"item.class\"\t -->\r\n            <div *ngFor=\"let item of presentationPointInTimeItems\"\r\n                class=`sds-timeline-point-in-time-item-container ${item.class}`\r\n                [style.height]=\"item.height\"\r\n                [style.width]=\"item.width\"\r\n                [ngStyle]=\"{\r\n                    'top': 'calc(' + item.top + ' - max(calc(' + item.height +'/2), 1px))', \r\n                    'left': 'calc(' + item.x + '% - max( calc(' + item.width +'/2), 1px))',\r\n                    \r\n                }\"\r\n                [style.backgroundColor]=\"item.backgroundColor\"\r\n                >\r\n\r\n                <ng-container \r\n                    [ngTemplateOutlet]=\"pointInTimeTemplate ? pointInTimeTemplate : defaultPointInTimeItemTemplate\"\r\n                    [ngTemplateOutletContext]=\"{item: item}\">\r\n                </ng-container>  \r\n\r\n            </div>\r\n\r\n        </div>\r\n    </div>\r\n</div>\r\n", styles: [".sds-timeline-viewport{overflow:hidden}.sds-timeline-viewport .sds-timeline-container{width:100%;min-height:0;position:relative;-webkit-user-select:none;user-select:none}.sds-timeline-viewport .sds-timeline-container .sds-timeline-day-header{height:1.6rem;position:relative}.sds-timeline-viewport .sds-timeline-container .sds-timeline-day-header .sds-day-label{position:absolute;display:inline;text-align:center;font-size:.875rem}.sds-timeline-viewport .sds-timeline-container .sds-timeline-hour-header{height:1.6rem;position:relative;font-size:.8em}.sds-timeline-viewport .sds-timeline-container .sds-timeline-hour-header .sds-hour-label{position:absolute;display:inline;text-align:center;font-size:.875rem}.sds-timeline-viewport .sds-timeline-container .sds-timeline{position:relative}.sds-timeline-viewport .sds-timeline-container .sds-timeline .sds-timeline-tick{border-left:1px solid rgb(187,187,187);height:100%;position:absolute;display:inline}.sds-timeline-viewport .sds-timeline-container .sds-timeline .sds-timeline-item-container{height:100%;position:absolute;display:inline;top:20%;height:60%}.sds-timeline-viewport .sds-timeline-container .sds-timeline .sds-timeline-item-container .sds-timeline-item{position:relative;width:100%}.sds-timeline-viewport .sds-timeline-container .sds-timeline .sds-timeline-point-in-time-item-container{width:1px;height:1px;position:absolute}.sds-timeline-viewport .sds-timeline-container .sds-timeline .sds-timeline-point-in-time-item-container .sds-timeline-item{position:relative;width:100%}\n"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: SdsTimelineComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'sds-timeline', standalone: true, imports: [
+                        NgIf,
+                        NgFor,
+                        NgStyle,
+                        NgClass,
+                        NgTemplateOutlet,
+                    ], template: "<ng-template #defaultItemTemplate let-item=\"item\">\r\n    <div \r\n        class=\"sds-timeline-item h-100\"\r\n        [title]=\"item.hint\"\r\n        >\r\n    </div>\r\n</ng-template>\r\n\r\n<ng-template #defaultPointInTimeItemTemplate let-item=\"item\">\r\n    <div \r\n        class=\"sds-timeline-item h-100\"\r\n        [title]=\"item.hint\"\r\n        >\r\n    </div>\r\n</ng-template>\r\n\r\n<ng-template #defaultDayLabelTemplate let-label=\"label\">\r\n    {{label.label}}\r\n</ng-template>\r\n\r\n<div \r\n    #viewport\r\n    class=\"sds-timeline-viewport\"\r\n    (wheel)=\"onScroll($event)\"\r\n\r\n    (mousedown)=\"onDragStart($event)\"\r\n    (touchstart)=\"onDragStart($event)\"\r\n    >\r\n\r\n    <div \r\n        class=\"sds-timeline-container d-flex flex-column\"\r\n        [style.left.%]=\"viewOffsetPercent\"\r\n        [style.width.%]=\"zoomPercent\"\r\n        [style.cursor]=\"isDragging ? 'ew-resize' : 'default'\"\r\n        >\r\n\r\n        <div\r\n            *ngIf=\"showDayLabels\" \r\n            class=\"sds-timeline-day-header\">\r\n\r\n            <div \r\n                *ngFor=\"let label of dayLabels\"\r\n                class=\"sds-day-label\"  \r\n                [ngClass]=\"dayLabelClass ?? null\"\r\n                [style.left.%]=\"label.x\"\r\n                [style.width.%]=\"label.width\"\r\n            >\r\n                <ng-container \r\n                    [ngTemplateOutlet]=\"dayLabelTemplate ? dayLabelTemplate : defaultDayLabelTemplate\"\r\n                    [ngTemplateOutletContext]=\"{label: label}\">\r\n                </ng-container>  \r\n            </div>\r\n        </div>\r\n\r\n        <div \r\n            *ngIf=\"showHourLabels\" \r\n            class=\"sds-timeline-hour-header\">\r\n\r\n            <div \r\n                *ngFor=\"let label of hourLabels;\"\r\n                class=\"sds-hour-label\"  \r\n                [ngClass]=\"hourLabelClass ?? null\"\r\n                [style.left.%]=\"label.x\"\r\n                [style.width.rem]=\"1.2\"\r\n                [ngStyle]=\"{'left': 'calc(' + label.x + '% - 0.6rem)'}\"\r\n            >\r\n                \r\n                {{label.label}}\r\n                \r\n            </div>\r\n        </div>\r\n\r\n        <div \r\n            *ngIf=\"showTimeline\"\r\n            class=\"sds-timeline flex-grow-1\"\r\n            [style.height]=\"timelineHeight\"\r\n            >\r\n\r\n            <div \r\n                *ngFor=\"let tick of hourTicks\"\r\n                class=\"sds-timeline-tick\"  \r\n                [ngClass]=\"hourTickClass ?? null\"\t\r\n                [ngStyle]=\"tick.x == 100 ? {'left': 'calc(' + tick.x +'% - 1px)'} : {'left': 'calc(' + tick.x + '% - 0.5px)'}\"\r\n            >\r\n            </div>\r\n\r\n            <div \r\n                *ngFor=\"let item of presentationItems\"\r\n                class=\"sds-timeline-item-container\"\r\n                [ngClass]=\"item.class ?? null\"\r\n                [ngStyle]=\"{\r\n                    'width': 'max(' + item.width +'%, 1px)',\r\n                    'top': 'calc(' + item.top + ' - max(calc(' + item.height +'/2), 1px))', \r\n                }\"\r\n\r\n                [style.left.%]=\"item.x\"\r\n                [style.height]=\"item.height\"\r\n                [style.backgroundColor]=\"item.backgroundColor\"\r\n                >\r\n\r\n                <ng-container \r\n                    [ngTemplateOutlet]=\"itemTemplate ? itemTemplate : defaultItemTemplate\"\r\n                    [ngTemplateOutletContext]=\"{item: item}\">\r\n                </ng-container>  \r\n            </div>\r\n\r\n\r\n            <!-- [ngClass]=\"item.class\"\t -->\r\n            <div *ngFor=\"let item of presentationPointInTimeItems\"\r\n                class=`sds-timeline-point-in-time-item-container ${item.class}`\r\n                [style.height]=\"item.height\"\r\n                [style.width]=\"item.width\"\r\n                [ngStyle]=\"{\r\n                    'top': 'calc(' + item.top + ' - max(calc(' + item.height +'/2), 1px))', \r\n                    'left': 'calc(' + item.x + '% - max( calc(' + item.width +'/2), 1px))',\r\n                    \r\n                }\"\r\n                [style.backgroundColor]=\"item.backgroundColor\"\r\n                >\r\n\r\n                <ng-container \r\n                    [ngTemplateOutlet]=\"pointInTimeTemplate ? pointInTimeTemplate : defaultPointInTimeItemTemplate\"\r\n                    [ngTemplateOutletContext]=\"{item: item}\">\r\n                </ng-container>  \r\n\r\n            </div>\r\n\r\n        </div>\r\n    </div>\r\n</div>\r\n", styles: [".sds-timeline-viewport{overflow:hidden}.sds-timeline-viewport .sds-timeline-container{width:100%;min-height:0;position:relative;-webkit-user-select:none;user-select:none}.sds-timeline-viewport .sds-timeline-container .sds-timeline-day-header{height:1.6rem;position:relative}.sds-timeline-viewport .sds-timeline-container .sds-timeline-day-header .sds-day-label{position:absolute;display:inline;text-align:center;font-size:.875rem}.sds-timeline-viewport .sds-timeline-container .sds-timeline-hour-header{height:1.6rem;position:relative;font-size:.8em}.sds-timeline-viewport .sds-timeline-container .sds-timeline-hour-header .sds-hour-label{position:absolute;display:inline;text-align:center;font-size:.875rem}.sds-timeline-viewport .sds-timeline-container .sds-timeline{position:relative}.sds-timeline-viewport .sds-timeline-container .sds-timeline .sds-timeline-tick{border-left:1px solid rgb(187,187,187);height:100%;position:absolute;display:inline}.sds-timeline-viewport .sds-timeline-container .sds-timeline .sds-timeline-item-container{height:100%;position:absolute;display:inline;top:20%;height:60%}.sds-timeline-viewport .sds-timeline-container .sds-timeline .sds-timeline-item-container .sds-timeline-item{position:relative;width:100%}.sds-timeline-viewport .sds-timeline-container .sds-timeline .sds-timeline-point-in-time-item-container{width:1px;height:1px;position:absolute}.sds-timeline-viewport .sds-timeline-container .sds-timeline .sds-timeline-point-in-time-item-container .sds-timeline-item{position:relative;width:100%}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { start: [{
+                type: Input
+            }], end: [{
+                type: Input
+            }], items: [{
+                type: Input
+            }], pointInTimeItems: [{
+                type: Input
+            }], itemTemplate: [{
+                type: Input
+            }], pointInTimeTemplate: [{
+                type: Input
+            }], dayLabelTemplate: [{
+                type: Input
+            }], dayLabelCustomDataFn: [{
+                type: Input
+            }], tickFrequency: [{
+                type: Input
+            }], hourLabelFrequency: [{
+                type: Input
+            }], zoomPercent: [{
+                type: Input
+            }], zoomPercentChange: [{
+                type: Output
+            }], viewOffsetPercent: [{
+                type: Input
+            }], viewOffsetPercentChange: [{
+                type: Output
+            }], maxZoomPercent: [{
+                type: Input
+            }], showHourLabels: [{
+                type: Input
+            }], hourLabelClass: [{
+                type: Input
+            }], showDayLabels: [{
+                type: Input
+            }], dayLabelClass: [{
+                type: Input
+            }], showTimeline: [{
+                type: Input
+            }], hourTickClass: [{
+                type: Input
+            }], timelineHeight: [{
+                type: Input
+            }], enableZoomAndDrag: [{
+                type: Input
+            }], offSetMinutes: [{
+                type: Input
+            }], locales: [{
+                type: Input
+            }], cutOffset: [{
+                type: Input
+            }], _viewport: [{
+                type: ViewChild,
+                args: ['viewport', { static: true }]
+            }], onDragMove: [{
+                type: HostListener,
+                args: ['window:mousemove', ['$event']]
+            }], onDragMoveTouch: [{
+                type: HostListener,
+                args: ['window:touchmove', ['$event']]
+            }], onDragEnd: [{
+                type: HostListener,
+                args: ['window:mouseup', ['$event']]
+            }, {
+                type: HostListener,
+                args: ['window:touchend', ['$event']]
+            }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { SdsTimelineComponent };
+//# sourceMappingURL=spicainternational-ngx-sds-components-src-lib-timeline.mjs.map