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

package/fesm2020/spicainternational-ngx-sds-components-src-lib-table-actions.mjs

@@ -1,78 +0,0 @@
-import * as i0 from '@angular/core';
-import { Component, Input, HostBinding, NgModule } from '@angular/core';
-import * as i1 from '@angular/common';
-import { CommonModule } from '@angular/common';
-import { faEllipsis } from '@fortawesome/pro-regular-svg-icons';
-import * as i2 from '@fortawesome/angular-fontawesome';
-import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
-import * as i3 from 'devextreme-angular';
-import { DxPopoverModule } from 'devextreme-angular';
-import * as i4 from 'devextreme-angular/ui/nested';
-
-class SdsTableActionsComponent {
-    constructor() {
-        this.dropdownIcon = faEllipsis;
-        // @Input() showShadow: boolean = false;
-        this.dropDownAutoClose = 'true';
-        this.dropdownMinWidth = '10rem';
-        this.hideActionsDropdown = false;
-        this.showDropdown = false;
-    }
-    ngOnInit() { }
-    toggleDropdownMenu() {
-        this.showDropdown = !this.showDropdown;
-    }
-    closeDropdownMenu() {
-        this.showDropdown = false;
-    }
-}
-SdsTableActionsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SdsTableActionsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-SdsTableActionsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: SdsTableActionsComponent, selector: "sds-table-actions", inputs: { dropdownIcon: "dropdownIcon", dropDownAutoClose: "dropDownAutoClose", dropdownMinWidth: "dropdownMinWidth", hideActionsDropdown: "hideActionsDropdown" }, host: { properties: { "class.actions-dropdown-open": "this.showDropdown" } }, ngImport: i0, template: "<div class=\"sds-actions-container me-2\">\r\n    <div class=\"btn-group sds-actions-wrapper\">\r\n        <ng-content select=\"quickActions\"></ng-content>\r\n\r\n        <ng-container *ngIf=\"!hideActionsDropdown\">\r\n            \r\n            <button\r\n                #dropdownButton\r\n                class=\"sds-actions-dropdown-button sds-btn-table\"\r\n                type=\"button\"\r\n                (click)=\"toggleDropdownMenu()\"\r\n            >\r\n                <fa-icon [icon]=\"dropdownIcon\" [fixedWidth]=\"true\" [size]=\"'sm'\">\r\n                </fa-icon>\r\n            </button>\r\n\r\n            <dx-popover\r\n                [target]=\"dropdownButton\"\r\n                [(visible)]=\"showDropdown\"\r\n                [minWidth]=\"dropdownMinWidth\"\r\n                [wrapperAttr]=\"{ class: 'sds-actions-dropdown' }\"\r\n            >\r\n                <dxo-position\r\n                    my=\"right top\"\r\n                    at=\"right bottom\"\r\n                    [of]=\"dropdownButton\"\r\n                >\r\n                    <dxo-offset [y]=\"-7\"></dxo-offset>\r\n                </dxo-position>\r\n\r\n                <ul class=\"sds-table-dropdown-menu\" (click)=\"closeDropdownMenu()\">\r\n                    <ng-content></ng-content>\r\n                </ul>\r\n            </dx-popover>\r\n        </ng-container>\r\n    </div>\r\n</div>\r\n", styles: ["::ng-deep .dx-datagrid-rowsview:has(sds-table-actions){overflow:visible}.sds-actions-dropdown-container{list-style:none}::ng-deep .sds-actions-dropdown .dx-popover-arrow{display:none}::ng-deep .sds-actions-dropdown .dx-popup-content{padding:0rem}::ng-deep .sds-actions-dropdown .sds-table-dropdown-menu{list-style:none;padding-left:0;margin-bottom:.25rem;margin-top:.25rem}::ng-deep .sds-actions-dropdown .sds-table-dropdown-menu .dropdown-item{padding:.5rem 1rem;font-size:.9rem}::ng-deep .sds-actions-dropdown .sds-table-dropdown-menu .dropdown-item:hover{background-color:var(--bs-gray-200)}::ng-deep .sds-actions-dropdown .sds-table-dropdown-menu .dropdown-item:active{background-color:var(--bs-primary);color:#fff}::ng-deep .sds-actions-dropdown .sds-table-dropdown-menu .dropdown-divider{background-color:var(--bs-border-color-translucent);height:1px;margin-top:.25rem;margin-bottom:.25rem}::ng-deep .dx-row:has(sds-table-actions.actions-dropdown-open),.sds-row:has(sds-table-actions.actions-dropdown-open){background-color:var(--bs-gray-300)!important}::ng-deep .dx-row:has(sds-table-actions.actions-dropdown-open) td,.sds-row:has(sds-table-actions.actions-dropdown-open) td{background-color:var(--bs-gray-300)!important}::ng-deep .dx-row:has(sds-table-actions.actions-dropdown-open) sds-table-actions .sds-action-button,::ng-deep .dx-row:has(sds-table-actions.actions-dropdown-open) sds-table-actions .sds-actions-dropdown-button,.sds-row:has(sds-table-actions.actions-dropdown-open) sds-table-actions .sds-action-button,.sds-row:has(sds-table-actions.actions-dropdown-open) sds-table-actions .sds-actions-dropdown-button{border-color:var(--bs-gray-500)!important}::ng-deep .dx-row:has(sds-table-actions.actions-dropdown-open) sds-table-actions .sds-actions-dropdown-button,.sds-row:has(sds-table-actions.actions-dropdown-open) sds-table-actions .sds-actions-dropdown-button{background-color:var(--bs-gray-200)!important}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "animation", "spin", "pulse", "mask", "styles", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "classes", "transform", "a11yRole"] }, { kind: "component", type: i3.DxPopoverComponent, selector: "dx-popover", inputs: ["animation", "closeOnOutsideClick", "container", "contentTemplate", "copyRootClassesToWrapper", "deferRendering", "disabled", "elementAttr", "height", "hideEvent", "hideOnOutsideClick", "hideOnParentScroll", "hint", "hoverStateEnabled", "maxHeight", "maxWidth", "minHeight", "minWidth", "position", "rtlEnabled", "shading", "shadingColor", "showCloseButton", "showEvent", "showTitle", "target", "title", "titleTemplate", "toolbarItems", "visible", "width", "wrapperAttr"], outputs: ["onContentReady", "onDisposing", "onHidden", "onHiding", "onInitialized", "onOptionChanged", "onShowing", "onShown", "onTitleRendered", "animationChange", "closeOnOutsideClickChange", "containerChange", "contentTemplateChange", "copyRootClassesToWrapperChange", "deferRenderingChange", "disabledChange", "elementAttrChange", "heightChange", "hideEventChange", "hideOnOutsideClickChange", "hideOnParentScrollChange", "hintChange", "hoverStateEnabledChange", "maxHeightChange", "maxWidthChange", "minHeightChange", "minWidthChange", "positionChange", "rtlEnabledChange", "shadingChange", "shadingColorChange", "showCloseButtonChange", "showEventChange", "showTitleChange", "targetChange", "titleChange", "titleTemplateChange", "toolbarItemsChange", "visibleChange", "widthChange", "wrapperAttrChange"] }, { kind: "component", type: i4.DxoPositionComponent, selector: "dxo-position", inputs: ["at", "boundary", "boundaryOffset", "collision", "my", "of", "offset"] }, { kind: "component", type: i4.DxoOffsetComponent, selector: "dxo-offset", inputs: ["x", "y"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SdsTableActionsComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'sds-table-actions', template: "<div class=\"sds-actions-container me-2\">\r\n    <div class=\"btn-group sds-actions-wrapper\">\r\n        <ng-content select=\"quickActions\"></ng-content>\r\n\r\n        <ng-container *ngIf=\"!hideActionsDropdown\">\r\n            \r\n            <button\r\n                #dropdownButton\r\n                class=\"sds-actions-dropdown-button sds-btn-table\"\r\n                type=\"button\"\r\n                (click)=\"toggleDropdownMenu()\"\r\n            >\r\n                <fa-icon [icon]=\"dropdownIcon\" [fixedWidth]=\"true\" [size]=\"'sm'\">\r\n                </fa-icon>\r\n            </button>\r\n\r\n            <dx-popover\r\n                [target]=\"dropdownButton\"\r\n                [(visible)]=\"showDropdown\"\r\n                [minWidth]=\"dropdownMinWidth\"\r\n                [wrapperAttr]=\"{ class: 'sds-actions-dropdown' }\"\r\n            >\r\n                <dxo-position\r\n                    my=\"right top\"\r\n                    at=\"right bottom\"\r\n                    [of]=\"dropdownButton\"\r\n                >\r\n                    <dxo-offset [y]=\"-7\"></dxo-offset>\r\n                </dxo-position>\r\n\r\n                <ul class=\"sds-table-dropdown-menu\" (click)=\"closeDropdownMenu()\">\r\n                    <ng-content></ng-content>\r\n                </ul>\r\n            </dx-popover>\r\n        </ng-container>\r\n    </div>\r\n</div>\r\n", styles: ["::ng-deep .dx-datagrid-rowsview:has(sds-table-actions){overflow:visible}.sds-actions-dropdown-container{list-style:none}::ng-deep .sds-actions-dropdown .dx-popover-arrow{display:none}::ng-deep .sds-actions-dropdown .dx-popup-content{padding:0rem}::ng-deep .sds-actions-dropdown .sds-table-dropdown-menu{list-style:none;padding-left:0;margin-bottom:.25rem;margin-top:.25rem}::ng-deep .sds-actions-dropdown .sds-table-dropdown-menu .dropdown-item{padding:.5rem 1rem;font-size:.9rem}::ng-deep .sds-actions-dropdown .sds-table-dropdown-menu .dropdown-item:hover{background-color:var(--bs-gray-200)}::ng-deep .sds-actions-dropdown .sds-table-dropdown-menu .dropdown-item:active{background-color:var(--bs-primary);color:#fff}::ng-deep .sds-actions-dropdown .sds-table-dropdown-menu .dropdown-divider{background-color:var(--bs-border-color-translucent);height:1px;margin-top:.25rem;margin-bottom:.25rem}::ng-deep .dx-row:has(sds-table-actions.actions-dropdown-open),.sds-row:has(sds-table-actions.actions-dropdown-open){background-color:var(--bs-gray-300)!important}::ng-deep .dx-row:has(sds-table-actions.actions-dropdown-open) td,.sds-row:has(sds-table-actions.actions-dropdown-open) td{background-color:var(--bs-gray-300)!important}::ng-deep .dx-row:has(sds-table-actions.actions-dropdown-open) sds-table-actions .sds-action-button,::ng-deep .dx-row:has(sds-table-actions.actions-dropdown-open) sds-table-actions .sds-actions-dropdown-button,.sds-row:has(sds-table-actions.actions-dropdown-open) sds-table-actions .sds-action-button,.sds-row:has(sds-table-actions.actions-dropdown-open) sds-table-actions .sds-actions-dropdown-button{border-color:var(--bs-gray-500)!important}::ng-deep .dx-row:has(sds-table-actions.actions-dropdown-open) sds-table-actions .sds-actions-dropdown-button,.sds-row:has(sds-table-actions.actions-dropdown-open) sds-table-actions .sds-actions-dropdown-button{background-color:var(--bs-gray-200)!important}\n"] }]
-        }], ctorParameters: function () { return []; }, propDecorators: { dropdownIcon: [{
-                type: Input
-            }], dropDownAutoClose: [{
-                type: Input
-            }], dropdownMinWidth: [{
-                type: Input
-            }], hideActionsDropdown: [{
-                type: Input
-            }], showDropdown: [{
-                type: HostBinding,
-                args: ['class.actions-dropdown-open']
-            }] } });
-
-class SdsTableActionsModule {
-}
-SdsTableActionsModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SdsTableActionsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-SdsTableActionsModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.10", ngImport: i0, type: SdsTableActionsModule, declarations: [SdsTableActionsComponent], imports: [CommonModule,
-        FontAwesomeModule,
-        DxPopoverModule], exports: [SdsTableActionsComponent] });
-SdsTableActionsModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SdsTableActionsModule, imports: [CommonModule,
-        FontAwesomeModule,
-        DxPopoverModule] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SdsTableActionsModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    declarations: [
-                        SdsTableActionsComponent
-                    ],
-                    imports: [
-                        CommonModule,
-                        FontAwesomeModule,
-                        DxPopoverModule
-                    ],
-                    exports: [
-                        SdsTableActionsComponent
-                    ]
-                }]
-        }] });
-
-/**
- * Generated bundle index. Do not edit.
- */
-
-export { SdsTableActionsComponent, SdsTableActionsModule };
-//# sourceMappingURL=spicainternational-ngx-sds-components-src-lib-table-actions.mjs.map

package/fesm2020/spicainternational-ngx-sds-components-src-lib-table-actions.mjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"spicainternational-ngx-sds-components-src-lib-table-actions.mjs","sources":["../../../projects/ngx-sds-components/src/lib/table-actions/table-actions.component.ts","../../../projects/ngx-sds-components/src/lib/table-actions/table-actions.component.html","../../../projects/ngx-sds-components/src/lib/table-actions/table-actions.module.ts","../../../projects/ngx-sds-components/src/lib/table-actions/spicainternational-ngx-sds-components-src-lib-table-actions.ts"],"sourcesContent":["import { AfterContentInit, Component, HostBinding, Input, OnInit } from '@angular/core';\r\nimport { IconProp } from '@fortawesome/fontawesome-svg-core';\r\nimport { faEllipsis } from '@fortawesome/pro-regular-svg-icons';\r\nimport { HidingEvent } from 'devextreme/ui/popover';\r\n\r\n@Component({\r\n    selector: 'sds-table-actions',\r\n    templateUrl: './table-actions.component.html',\r\n    styleUrls: ['./table-actions.component.scss'],\r\n})\r\nexport class SdsTableActionsComponent implements OnInit {\r\n\r\n    @Input() dropdownIcon: IconProp = faEllipsis;\r\n    // @Input() showShadow: boolean = false;\r\n    @Input() dropDownAutoClose: 'true' | 'false' | 'inside' | 'outside' = 'true';\r\n    @Input() dropdownMinWidth: string = '10rem';\r\n    @Input() hideActionsDropdown: boolean = false;\r\n\r\n    @HostBinding('class.actions-dropdown-open') protected showDropdown: boolean = false;\r\n    \r\n\r\n    constructor(\r\n\r\n    ) {}\r\n\r\n    ngOnInit(): void {}\r\n\r\n\r\n   \r\n    protected toggleDropdownMenu(): void {\r\n        this.showDropdown = !this.showDropdown;\r\n    }\r\n\r\n    protected closeDropdownMenu(): void {\r\n        this.showDropdown = false;\r\n    }\r\n\r\n}\r\n","<div class=\"sds-actions-container me-2\">\r\n    <div class=\"btn-group sds-actions-wrapper\">\r\n        <ng-content select=\"quickActions\"></ng-content>\r\n\r\n        <ng-container *ngIf=\"!hideActionsDropdown\">\r\n            \r\n            <button\r\n                #dropdownButton\r\n                class=\"sds-actions-dropdown-button sds-btn-table\"\r\n                type=\"button\"\r\n                (click)=\"toggleDropdownMenu()\"\r\n            >\r\n                <fa-icon [icon]=\"dropdownIcon\" [fixedWidth]=\"true\" [size]=\"'sm'\">\r\n                </fa-icon>\r\n            </button>\r\n\r\n            <dx-popover\r\n                [target]=\"dropdownButton\"\r\n                [(visible)]=\"showDropdown\"\r\n                [minWidth]=\"dropdownMinWidth\"\r\n                [wrapperAttr]=\"{ class: 'sds-actions-dropdown' }\"\r\n            >\r\n                <dxo-position\r\n                    my=\"right top\"\r\n                    at=\"right bottom\"\r\n                    [of]=\"dropdownButton\"\r\n                >\r\n                    <dxo-offset [y]=\"-7\"></dxo-offset>\r\n                </dxo-position>\r\n\r\n                <ul class=\"sds-table-dropdown-menu\" (click)=\"closeDropdownMenu()\">\r\n                    <ng-content></ng-content>\r\n                </ul>\r\n            </dx-popover>\r\n        </ng-container>\r\n    </div>\r\n</div>\r\n","import { NgModule } from '@angular/core';\r\nimport { CommonModule } from '@angular/common';\r\nimport { SdsTableActionsComponent } from './table-actions.component';\r\nimport { FontAwesomeModule } from '@fortawesome/angular-fontawesome';\r\nimport { DxPopoverModule } from 'devextreme-angular';\r\n\r\n\r\n\r\n@NgModule({\r\n  declarations: [\r\n    SdsTableActionsComponent\r\n  ],\r\n  imports: [\r\n    CommonModule,\r\n    FontAwesomeModule,\r\n    DxPopoverModule\r\n  ],\r\n  exports: [\r\n    SdsTableActionsComponent\r\n  ]\r\n})\r\nexport class SdsTableActionsModule { }\r\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}

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

@@ -1,511 +0,0 @@
-import * as i0 from '@angular/core';
-import { EventEmitter, Component, Input, Output, ViewChild, HostListener, NgModule } from '@angular/core';
-import * as i1 from '@angular/common';
-import { CommonModule } from '@angular/common';
-
-class SdsTimelineService {
-    // public dayLabels: TimelineIntervalLabel[] = [];
-    // public hourLabels: TimelineIntervalLabel[] = [];
-    constructor(start, end, offSetMinutes) {
-        this.start = new Date();
-        this.end = new Date();
-        this.hourTicks = [];
-        this.start = new Date(start);
-        this.start.setMinutes(this.start.getMinutes() - offSetMinutes);
-        this.end = new Date(end);
-        this.end.setMinutes(this.end.getMinutes() + offSetMinutes);
-        this.widthPercentPerMinute = (100 / this.diffInMinutes(this.start, this.end));
-        this.initHourTicks();
-        //this.initDayLabels();
-        // this.initHourLabels();
-    }
-    getX(time) {
-        return this.diffInMinutes(this.start, time) * this.widthPercentPerMinute;
-    }
-    getWidthFromMinutes(minutes) {
-        return minutes * this.widthPercentPerMinute;
-    }
-    getWidthFromTime(start, end) {
-        return this.getWidthFromMinutes(this.diffInMinutes(start, end));
-    }
-    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.start);
-        startDate.setHours(0, 0, 0, 0);
-        // get end date at the end of the day
-        let endDate = new Date(this.end);
-        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);
-            dayLabels.push({
-                // date: new Date(currentDate),
-                x: this.getX(new Date(currentDate)),
-                width: this.getWidthFromTime(currentDate, endOfCurrentDay),
-                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.start);
-        // get last whole hour from end date
-        let endHour = this.roundHoursDown(this.end);
-        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;
-        // protected
-        this.hourTicks = [];
-        this.hourLabels = [];
-        this.dayLabels = [];
-        this._timelineService = new SdsTimelineService(this.start, this.end, this.offSetMinutes);
-        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.generateTicks();
-            this.generateInternalTimelineItems();
-        }
-        if (changes['start'] || changes['end'] || changes['offSetMinutes']) {
-            this._timelineService = new SdsTimelineService(this.start, this.end, this.offSetMinutes);
-            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() {
-        this.presentationItems = this.items.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() {
-        this.presentationPointInTimeItems = this.pointInTimeItems.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,
-            };
-        });
-    }
-}
-SdsTimelineComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SdsTimelineComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-SdsTimelineComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: SdsTimelineComponent, 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" }, 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            <div *ngFor=\"let item of presentationPointInTimeItems\"\r\n                class=\"sds-timeline-point-in-time-item-container\"\r\n                [ngClass]=\"item.class\"\t\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: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SdsTimelineComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'sds-timeline', 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            <div *ngFor=\"let item of presentationPointInTimeItems\"\r\n                class=\"sds-timeline-point-in-time-item-container\"\r\n                [ngClass]=\"item.class\"\t\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: function () { return []; }, 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
-            }], _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']]
-            }] } });
-
-class SdsTimelineModule {
-}
-SdsTimelineModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SdsTimelineModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-SdsTimelineModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.10", ngImport: i0, type: SdsTimelineModule, declarations: [SdsTimelineComponent], imports: [CommonModule], exports: [SdsTimelineComponent] });
-SdsTimelineModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SdsTimelineModule, imports: [CommonModule] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SdsTimelineModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    declarations: [
-                        SdsTimelineComponent
-                    ],
-                    imports: [
-                        CommonModule
-                    ],
-                    exports: [
-                        SdsTimelineComponent
-                    ],
-                }]
-        }] });
-
-/**
- * Generated bundle index. Do not edit.
- */
-
-export { SdsTimelineComponent, SdsTimelineModule };
-//# sourceMappingURL=spicainternational-ngx-sds-components-src-lib-timeline.mjs.map