smart-webcomponents-angular
Version:
[](https://jqwidgets.com/license/)
705 lines (701 loc) • 135 kB
JavaScript
if(typeof window !== 'undefined') {
if (!window['Smart']) {
window['Smart'] = { RenderMode: 'manual' };
}
else {
window['Smart'].RenderMode = 'manual';
}
}
import './../source/modules/smart.ganttchart';
import { __awaiter } from 'tslib';
import * as i0 from '@angular/core';
import { EventEmitter, Directive, Output, Input, NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
class BaseElement {
constructor(ref) {
this.onCreate = new EventEmitter();
this.onReady = new EventEmitter();
this.onAttach = new EventEmitter();
this.onDetach = new EventEmitter();
const that = this;
this.nativeElement = ref.nativeElement;
that.nativeElement.onAttached = () => {
that.onAttach.emit(that.nativeElement);
};
that.nativeElement.onDetached = () => {
that.onDetach.emit(that.nativeElement);
};
}
addEventListener(type, listener, options = false) {
this.nativeElement.addEventListener(type, listener, options);
}
removeEventListener(type, listener, options = false) {
this.nativeElement.removeEventListener(type, listener, options);
}
dispatchEvent(event) {
return this.nativeElement.dispatchEvent(event);
}
blur() {
this.nativeElement.blur();
}
click() {
this.nativeElement.click();
}
focus(options) {
this.nativeElement.focus(options);
}
/** @description Sets or gets the license. */
get license() {
return this.nativeElement ? this.nativeElement.license : undefined;
}
set license(value) {
this.nativeElement ? this.nativeElement.license = value : undefined;
}
/** @description Sets or gets the language. Used in conjunction with the property messages. */
get locale() {
return this.nativeElement ? this.nativeElement.locale : undefined;
}
set locale(value) {
this.nativeElement ? this.nativeElement.locale = value : undefined;
}
/** @description Callback used to customize the format of the messages that are returned from the Localization Module. */
get localizeFormatFunction() {
return this.nativeElement ? this.nativeElement.localizeFormatFunction : undefined;
}
set localizeFormatFunction(value) {
this.nativeElement ? this.nativeElement.localizeFormatFunction = value : undefined;
}
/** @description Sets or gets an object specifying strings used in the widget that can be localized. Used in conjunction with the property locale. */
get messages() {
return this.nativeElement ? this.nativeElement.messages : undefined;
}
set messages(value) {
this.nativeElement ? this.nativeElement.messages = value : undefined;
}
/** @description Sets or gets the value indicating whether the element is aligned to support locales using right-to-left fonts. */
get rightToLeft() {
return this.nativeElement ? this.nativeElement.rightToLeft : undefined;
}
set rightToLeft(value) {
this.nativeElement ? this.nativeElement.rightToLeft = value : undefined;
}
/** @description Determines the theme. Theme defines the look of the element */
get theme() {
return this.nativeElement ? this.nativeElement.theme : undefined;
}
set theme(value) {
this.nativeElement ? this.nativeElement.theme = value : undefined;
}
}
BaseElement.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.6", ngImport: i0, type: BaseElement, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
BaseElement.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.2.6", type: BaseElement, inputs: { license: "license", locale: "locale", localizeFormatFunction: "localizeFormatFunction", messages: "messages", rightToLeft: "rightToLeft", theme: "theme" }, outputs: { onCreate: "onCreate", onReady: "onReady", onAttach: "onAttach", onDetach: "onDetach" }, ngImport: i0 });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.6", ngImport: i0, type: BaseElement, decorators: [{
type: Directive
}], ctorParameters: function () { return [{ type: i0.ElementRef }]; }, propDecorators: { onCreate: [{
type: Output
}], onReady: [{
type: Output
}], onAttach: [{
type: Output
}], onDetach: [{
type: Output
}], license: [{
type: Input
}], locale: [{
type: Input
}], localizeFormatFunction: [{
type: Input
}], messages: [{
type: Input
}], rightToLeft: [{
type: Input
}], theme: [{
type: Input
}] } });
let Smart;
if (typeof window !== "undefined") {
Smart = window.Smart;
}
class GanttChartComponent extends BaseElement {
constructor(ref) {
super(ref);
this.eventHandlers = [];
/** @description This event is triggered when a batch update was started after executing the beginUpdate method.
* @param event. The custom event. */
this.onBeginUpdate = new EventEmitter();
/** @description This event is triggered when a batch update was ended from after executing the endUpdate method.
* @param event. The custom event. */
this.onEndUpdate = new EventEmitter();
/** @description This event is triggered when the user starts connecting one task to another. This event allows to cancel the operation by calling event.preventDefault() in the event handler function.
* @param event. The custom event. Custom event was created with: event.detail( startIndex)
* startIndex - The index of the task that a connection is started from.
*/
this.onConnectionStart = new EventEmitter();
/** @description This event is triggered when the user completes a connection between two tasks.
* @param event. The custom event. Custom event was created with: event.detail( id, startTaskId, startIndex, endIndex, endTaskId, type)
* id - The id of the connection that was created.
* startTaskId - The id of the task that a connection is started from.
* startIndex - The index of the task that a connection is started from.
* endIndex - The index of the task that a connection ended to.
* endTaskId - The id of the task that a connection ended to.
* type - The type of connection. Fours types are available: <ul><li><b>0</b> - start-to-start</li><li><b>1</b> - end-to-start</li><li><b>2</b> - end-to-end</li><li><b>3</b> - start-to-end</li></ul>
*/
this.onConnectionEnd = new EventEmitter();
/** @description This event is triggered when a Task is selected/unselected.
* @param event. The custom event. Custom event was created with: event.detail( value, oldValue)
* value - The index of the new selected task.
* oldValue - The index of the previously selected task.
*/
this.onChange = new EventEmitter();
/** @description This event is triggered when a Tree column is resized. Column resizing is controled by the columnResize property.
* @param event. The custom event. Custom event was created with: event.detail( dataField, headerCellElement, widthInPercentages, width)
* dataField - The name of the column. Corresponds to the <b>value</b> attribute of a <b>taskColumns/resourceColumns</b> object.
* headerCellElement - The HTMLElement column cell element that was resized.
* widthInPercentages - The new width of the column in percentages.
* width - The new width of the column in pixels.
*/
this.onColumnResize = new EventEmitter();
/** @description This event is triggered just before the window for task editing or tooltip is closing. The closing operation can be canceled by calling event.preventDefault() in the event handler function.
* @param event. The custom event. Custom event was created with: event.detail( owner, item, target, type)
* owner - The HTMLElement that is the owner of the tooltip. This attribute is defined only when the event is related to the tooltip.
* item - The item object that is related to the tooltip owner. It can be a task/segment/resource/indicator object. This attribute is defined only when the event is related to the tooltip.
* target - The instance of the window/tooltip that is going to close.
* type - The type of window/tooltip that is going to close. There are three types of windows inside GanttChart: <ul><li><b>confirm</b> - a confirm window. This type of window is usually used to confirm the deletion of a task.</li><li><b>task</b> - a window used for task editing.</li><li><b>connection</b> - a window used to delete a connection.</li></ul>. If the event is a tooltip event, there are several tooltip types: <ul><li>indicator - when the tooltip owner is an indicator.</li><li>segment - when the tooltip owner is a task segment.</li><li>task - when the tooltip owner is a task.</li><li>resource - when the tooltip target is a resource.</li></ul>
*/
this.onClosing = new EventEmitter();
/** @description This event is triggered when the window for task editing is closed( hidden )
* @param event. The custom event. Custom event was created with: event.detail( owner, item, target, type)
* owner - The HTMLElement that is the owner of the tooltip. This attribute is defined only when the event is related to the tooltip
* item - The item object that is related to the tooltip owner. It can be a task/segment/resource/indicator object. This attribute is defined only when the event is related to the tooltip.
* target - The instance of the window/tooltip that is closed.
* type - The type of window/tooltip that is closed. There are three types of windows inside GanttChart: <ul><li><b>confirm</b> - a confirm window. This type of window is usually used to confirm the deletion of a task.</li><li><b>task</b> - a window used for task editing.</li><li><b>connection</b> - a window used to delete a connection.</li></ul>. If the event is a tooltip event, there are several tooltip types: <ul><li>indicator - when the tooltip owner is an indicator.</li><li>segment - when the tooltip owner is a task segment.</li><li>task - when the tooltip owner is a task.</li><li>resource - when the tooltip target is a resource.</li></ul>
*/
this.onClose = new EventEmitter();
/** @description This event is triggered when an item is collapsed.
* @param event. The custom event. Custom event was created with: event.detail( isGroup, item, index, label, value)
* isGroup - A boolean flag indicating whether the collapsed item is a resource group. This is the case when <b>groupByResoruces</b> is enabled.
* item - The object details of the collapsed item.
* index - The index of the collapsed item.
* label - The label of the collapsed item.
* value - The value of the collapsed item.
*/
this.onCollapse = new EventEmitter();
/** @description This event is triggered when dragging of a task starts. This event allows to cancel the operation by calling event.preventDefault() in the event handler function.
* @param event. The custom event. Custom event was created with: event.detail( id, item, dateStart, dateEnd, segment)
* id - The id of the task that is going to be dragged.
* item - The object of the task that is going to be dragged.
* dateStart - The start date of the task that is going to be dragged.
* dateEnd - The end date of the task that is going to be dragged.
* segment - The segment object that is going to be dragged. This attribute is undefined if a segment is not going to be dragged.
*/
this.onDragStart = new EventEmitter();
/** @description This event is triggered when dragging of a task finishes.
* @param event. The custom event. Custom event was created with: event.detail( id, item, dateStart, dateEnd, segment)
* id - The id of the task that is was dragged.
* item - The object of the task that is was dragged.
* dateStart - The start date of the task that is was dragged.
* dateEnd - The end date of the task that is was dragged.
* segment - The segment object that was dragged. This attribute is undefined if a segment has not been dragged.
*/
this.onDragEnd = new EventEmitter();
/** @description This event is triggered when an item is expanded.
* @param event. The custom event. Custom event was created with: event.detail( isGroup, item, index, label, value)
* isGroup - A boolean flag indicating whether the collapsed item is a resource group. This is the case when <b>groupByResoruces</b> is enabled.
* item - The index of the expanded item.
* index - The index of the expanded item.
* label - The label of the expanded item.
* value - The value of the expanded item.
*/
this.onExpand = new EventEmitter();
/** @description This event is triggered when the GanttChart is filtered.
* @param event. The custom event. Custom event was created with: event.detail( type, action, filters)
* type - The type of items that have been filtered ( task or resource ).
* action - The name of the filtering action (whether filtering is added or removed).
* filters - The filters that have been applied. Filters represent JQX.Utilities.FilterGroup objects.
*/
this.onFilter = new EventEmitter();
/** @description This event is triggered when a task, resource or connection is clicked inside the Timeline or the Tree columns.
* @param event. The custom event. Custom event was created with: event.detail( id, item, type, originalEvent)
* id - The id of the task.
* item - The item that was clicked. It can be a task, resource or connection.
* type - The type of item. Possible values are: 'task', 'project', 'resource', 'connection'.
* originalEvent - The original DOM event.
*/
this.onItemClick = new EventEmitter();
/** @description This event is triggered when a Task/Resource/Connection is inserted.
* @param event. The custom event. Custom event was created with: event.detail( type, item)
* type - The type of item that has been modified. The type could be: 'connection', 'task', 'project', 'resource'.
* item - An object that represents the actual item with it's attributes.
*/
this.onItemInsert = new EventEmitter();
/** @description This event is triggered when a Task/Resource/Connection is removed.
* @param event. The custom event. Custom event was created with: event.detail( id, type, item)
* id - The id of the task.
* type - The type of item that has been modified. The type could be: 'connection', 'task', 'project', 'resource'.
* item - An object that represents the actual item with it's attributes.
*/
this.onItemRemove = new EventEmitter();
/** @description This event is triggered when a Task/Resource/Connection is updated.
* @param event. The custom event. Custom event was created with: event.detail( id, type, item)
* id - The id of the task.
* type - The type of item that has been modified. The type could be: 'connection', 'task', 'project', 'resource'.
* item - An object that represents the actual item with it's attributes.
*/
this.onItemUpdate = new EventEmitter();
/** @description This event is triggered just before the window for task editing or tooltip is opening. The opening operation can be canceled by calling event.preventDefault() in the event handler function.
* @param event. The custom event. Custom event was created with: event.detail( owner, item, target, type)
* owner - The HTMLElement that is the owner of the tooltip. This attribute is defined only when the event is related to the tooltip
* item - The item object that is related to the tooltip owner. It can be a task/segment/resource/indicator object. This attribute is defined only when the event is related to the tooltip.
* target - The instance of the window/tooltip that is going to open.
* type - The type of window/tooltip that is going to open. There are three types of windows inside GanttChart: <ul><li><b>confirm</b> - a confirm window. This type of window is usually used to confirm the deletion of a task.</li><li><b>task</b> - a window used for task editing.</li><li><b>connection</b> - a window used to delete a connection.</li></ul>. If the event is a tooltip event, there are several tooltip types: <ul><li>indicator - when the tooltip owner is an indicator.</li><li>segment - when the tooltip owner is a task segment.</li><li>task - when the tooltip owner is a task.</li><li>resource - when the tooltip target is a resource.</li></ul>
*/
this.onOpening = new EventEmitter();
/** @description This event is triggered when the window for task editing is opened( visible ) or when the tooltip is opened.
* @param event. The custom event. Custom event was created with: event.detail( owner, item, target, type)
* owner - The HTMLElement that is the owner of the tooltip. This attribute is defined only when the event is related to the tooltip
* item - The item object that is related to the tooltip owner. It can be a task/segment/resource/indicator object. This attribute is defined only when the event is related to the tooltip.
* target - The instance of the window/tooltip that is opened.
* type - The type of window/tooltip that is opened. There are three types of windows inside GanttChart: <ul><li><b>confirm</b> - a confirm window. This type of window is usually used to confirm the deletion of a task.</li><li><b>task</b> - a window used for task editing.</li><li><b>connection</b> - a window used to delete a connection.</li></ul>. If the event is a tooltip event, there are several tooltip types: <ul><li>indicator - when the tooltip owner is an indicator.</li><li>segment - when the tooltip owner is a task segment.</li><li>task - when the tooltip owner is a task.</li><li>resource - when the tooltip target is a resource.</li></ul>
*/
this.onOpen = new EventEmitter();
/** @description This event is triggered when the progress of a task bar starts to change as a result of user interaction. This event allows to cancel the operation by calling event.preventDefault() in the event handler function.
* @param event. The custom event. Custom event was created with: event.detail( id, index, progress)
* id - The id of the task.
* index - The index of the task which progress is going to be changed.
* progress - The progress of the task before it is changed.
*/
this.onProgressChangeStart = new EventEmitter();
/** @description This event is triggered when the progress of a task is changed.
* @param event. The custom event. Custom event was created with: event.detail( id, index, progress)
* id - The id of the task.
* index - The index of the task which progress is has been changed.
* progress - The progress of the task after it was changed.
*/
this.onProgressChangeEnd = new EventEmitter();
/** @description This event is triggered when resizing of a task starts. This event allows to cancel the operation by calling event.preventDefault() in the event handler function.
* @param event. The custom event. Custom event was created with: event.detail( id, item, dateStart, dateEnd, segment)
* id - The id of the task that is going to be resized.
* item - The object of the task that is going to be resized.
* dateStart - The start date of the task that is going to be resized.
* dateEnd - The end date of the task that is going to be resized.
* segment - The segment object that is going to be resized. This attribute is undefined if a segment is not going to be resized.
*/
this.onResizeStart = new EventEmitter();
/** @description This event is triggered when the resizing of a task finishes.
* @param event. The custom event. Custom event was created with: event.detail( id, item, dateStart, dateEnd, segment)
* id - The id of the task that was resized.
* item - The object of the task that was resized.
* dateStart - The start date of the task that was resized.
* dateEnd - The end date of the task that was resized.
* segment - The segment object that was resized. This attribute is undefined if a segment has not been resized.
*/
this.onResizeEnd = new EventEmitter();
/** @description This event is triggered when the GanttChart is sorted by some column.
* @param event. The custom event. Custom event was created with: event.detail( type, columns, sortDataFields, sortOrders, sortDataTypes)
* type - The type of columns that have been sorted ( task or resource column ).
* columns - An array of objects that contains the currently sorted column objects.
* sortDataFields - The dataFields of the columns that have been sorted. The dataField corresponds to the <b>value</b> property of a <b>taskColumns/resourceColumns</b> object.
* sortOrders - The orders of the columns that have been sorted.
* sortDataTypes - The data types of the columns that have been sorted.
*/
this.onSort = new EventEmitter();
/** @description This event is triggered when the Timeline has been scrolled to the bottom.
* @param event. The custom event. */
this.onScrollBottomReached = new EventEmitter();
/** @description This event is triggered when the Timeline has been scrolled to the top.
* @param event. The custom event. */
this.onScrollTopReached = new EventEmitter();
/** @description This event is triggered when the Timeline has been scrolled to the beginning (horizontally).
* @param event. The custom event. */
this.onScrollLeftReached = new EventEmitter();
/** @description This event is triggered when the Timeline has been scrolled to the end (horizontally).
* @param event. The custom event. */
this.onScrollRightReached = new EventEmitter();
this.nativeElement = ref.nativeElement;
}
/** @description Creates the component on demand.
* @param properties An optional object of properties, which will be added to the template binded ones.
*/
createComponent(properties = {}) {
this.nativeElement = document.createElement('smart-gantt-chart');
for (let propertyName in properties) {
this.nativeElement[propertyName] = properties[propertyName];
}
return this.nativeElement;
}
/** @description Determines whether nonworkingDays/nonworkingHours are taken into considuration when determining the dateEnd of the tasks. When this property is enabled the dateEnd of the tasks is calculated to include only the actual working time. By default it's disabled and only calendar time is used. */
get adjustToNonworkingTime() {
return this.nativeElement ? this.nativeElement.adjustToNonworkingTime : undefined;
}
set adjustToNonworkingTime(value) {
this.nativeElement ? this.nativeElement.adjustToNonworkingTime = value : undefined;
}
/** @description Recalculates the tasks that are connected and re-schedules them according to their connections. If no connections are present, autoScheduling has no effect until a connection is created. Connection types determines the start/end date limits of the tasks. */
get autoSchedule() {
return this.nativeElement ? this.nativeElement.autoSchedule : undefined;
}
set autoSchedule(value) {
this.nativeElement ? this.nativeElement.autoSchedule = value : undefined;
}
/** @description Affects the tasks only when autoSchedule is enabled. When set to true, the tasks are strictly scheduled ( according to their connections ) and dragging is not allowed. Users can set lag to specific connections to determine a delay of overlap of between the two tasks ( interval of time in miliseconds ). Lag one of the attributes of a task connection and should be set in the dataSource where the task connections are defined. */
get autoScheduleStrictMode() {
return this.nativeElement ? this.nativeElement.autoScheduleStrictMode : undefined;
}
set autoScheduleStrictMode(value) {
this.nativeElement ? this.nativeElement.autoScheduleStrictMode = value : undefined;
}
/** @description Determines the scroll speed when dragging when autoScroll property is set. */
get autoScrollStep() {
return this.nativeElement ? this.nativeElement.autoScrollStep : undefined;
}
set autoScrollStep(value) {
this.nativeElement ? this.nativeElement.autoScrollStep = value : undefined;
}
/** @description Enabled/Disables the colummn header menu. When enabled and the user hovers a column header, a drop down button will appear that triggers a column menu for quick actions like sorting, filtering, etc. The actions depend on the enabled Gantt features, for example the filtering action will be available only if filtering is enabled for the element. */
get columnMenu() {
return this.nativeElement ? this.nativeElement.columnMenu : undefined;
}
set columnMenu(value) {
this.nativeElement ? this.nativeElement.columnMenu = value : undefined;
}
/** @description Determines whether the Table columns are resizable or not. When enabled it is possible to resize the columns from the header cells of the Table in both Task and Resource timelines. */
get columnResize() {
return this.nativeElement ? this.nativeElement.columnResize : undefined;
}
set columnResize(value) {
this.nativeElement ? this.nativeElement.columnResize = value : undefined;
}
/** @description Determines resize feedback is used during column resizing. This property is applicable only when columnResize is enabled. */
get columnResizeFeedback() {
return this.nativeElement ? this.nativeElement.columnResizeFeedback : undefined;
}
set columnResizeFeedback(value) {
this.nativeElement ? this.nativeElement.columnResizeFeedback = value : undefined;
}
/** @description Gantt's current time. By default it is the today's date. */
get currentTime() {
return this.nativeElement ? this.nativeElement.currentTime : undefined;
}
set currentTime(value) {
this.nativeElement ? this.nativeElement.currentTime = value : undefined;
}
/** @description Enables/Disables the current time indicator. Current time indicator shows the current time in the appropriate view cells. */
get currentTimeIndicator() {
return this.nativeElement ? this.nativeElement.currentTimeIndicator : undefined;
}
set currentTimeIndicator(value) {
this.nativeElement ? this.nativeElement.currentTimeIndicator = value : undefined;
}
/** @description Determines the refresh interval in seconds for the currentTimeIndicator. */
get currentTimeIndicatorInterval() {
return this.nativeElement ? this.nativeElement.currentTimeIndicatorInterval : undefined;
}
set currentTimeIndicatorInterval(value) {
this.nativeElement ? this.nativeElement.currentTimeIndicatorInterval = value : undefined;
}
/** @description Sets the GanttChart's Data Export options. */
get dataExport() {
return this.nativeElement ? this.nativeElement.dataExport : undefined;
}
set dataExport(value) {
this.nativeElement ? this.nativeElement.dataExport = value : undefined;
}
/** @description Determines the tasks that will be loaded inside the Timeline. Each item represents an object that should contain the following properties: label - the label of the TaskdateStart - the starting date of the Task. Should be a string representing a valid date.dateEnd - the ending date of the Task. Should be a string representing a valid date.type - determines the type of the task. Whether it's a simple task, a project or a milestone. Each type of task has specific behavior and additional attributes.. Additional properties: connections - an array of objects representing the connection between two tasks. Each connection (object) should have the following properties : target - a number representing the index of the target tasktype - a number representing the type of the connection. Four types of connections are available: 0 - is a connection of type Start-to-Start 1 - is a connection of type End-to-Start 2 - is a connection of type End-to-End3 - is a connection of type Start-to-End lag - a number that determines the delay between two connected auto scheduled tasks. Lag property can be a positive or a negative number. When negative it determines the overlap between two connected tasks. This property is used in conjuction with autoSchedule.duration - determines the duration of a Task in days, hours, minutes, seconds or miliseconds. Very usefull when the the dateEnd of a Task is unknown. The duration always shows the calendar time whether it is in days/hours or other.minDuration - sets the minimum duration of a task. maxDuration - sets the maximum duration of a task.minDateStart - determines the mininum date that a task can start from. Must be if type string and should represent a valid date.maxDateStart - determines the maximum date that a task can start from. Must be if type string and should represent a valid date.minDateEnd - determines the mininum date that a task can end. Must be if type string and should represent a valid date.maxDateEnd - determines the maximum date that a task can end. Must be if type string and should represent a valid date.progress - a number that determines the progress of a task ( from 0 to 100 ).overdue - a boolean that indicates whether the task's dateEnd has surpassed it's deadline date.disableDrag - a boolean property that disables the dragging of a task when set to true.disableResize - a boolean property that disables the resizing of a task when set to true.dragProject - a boolean that determines whether or not the whole project (along with the tasks) can be dragged while dragging the project task. Applicalbe only to Projects.segments - an array of objects that allows to devide a task into multiple segements. Each segment (except the first) can have a different starting date, duration and label.synchronized - a boolean that if set the project task's start/end dates are automatically calculated based on the tasks. By default a synchronized project task can't be dragged alone. Applicable only to Project tasks.expanded - a boolean that determines if a project is expanded or not. If not all of it's sub-tasks are not visible. Only the project task itself is visible. By default no projects are expanded. Applicable only to project tasks..GanttChart also accepts a DataAdapter instance as dataSource. You can read more about the dataAdapter here - https://www.htmlelements.com/docs/data-adapter/. */
get dataSource() {
return this.nativeElement ? this.nativeElement.dataSource : undefined;
}
set dataSource(value) {
this.nativeElement ? this.nativeElement.dataSource = value : undefined;
}
/** @description Determines the format of the dates in the timeline header when they represent days. */
get dayFormat() {
return this.nativeElement ? this.nativeElement.dayFormat : undefined;
}
set dayFormat(value) {
this.nativeElement ? this.nativeElement.dayFormat = value : undefined;
}
/** @description Determines a specific end date for the Timeline. Usefull when the user wants custom ending date for the Timeline. If no date is set the end date of the timeline is automatically determined from the tasks. */
get dateEnd() {
return this.nativeElement ? this.nativeElement.dateEnd : undefined;
}
set dateEnd(value) {
this.nativeElement ? this.nativeElement.dateEnd = value : undefined;
}
/** @description Determines a specific starting date for the Timeline. Usefull when the user wants custom starting date for the Timeline. If no date is set the start date of the timeline is automatically determined from the tasks. */
get dateStart() {
return this.nativeElement ? this.nativeElement.dateStart : undefined;
}
set dateStart(value) {
this.nativeElement ? this.nativeElement.dateStart = value : undefined;
}
/** @description Determines the date markers that will be displayed inside the timeline. Date markers allow to mark and even label specific dates (including time) inside the GanttChart timeline. */
get dateMarkers() {
return this.nativeElement ? this.nativeElement.dateMarkers : undefined;
}
set dateMarkers(value) {
this.nativeElement ? this.nativeElement.dateMarkers = value : undefined;
}
/** @description Enables or disables the element. */
get disabled() {
return this.nativeElement ? this.nativeElement.disabled : undefined;
}
set disabled(value) {
this.nativeElement ? this.nativeElement.disabled = value : undefined;
}
/** @description Disables auto scrolling while dragging/resizing a task bar inside the Timeline. */
get disableAutoScroll() {
return this.nativeElement ? this.nativeElement.disableAutoScroll : undefined;
}
set disableAutoScroll(value) {
this.nativeElement ? this.nativeElement.disableAutoScroll = value : undefined;
}
/** @description Disables dragging of tasks in the Timeline. */
get disableTaskDrag() {
return this.nativeElement ? this.nativeElement.disableTaskDrag : undefined;
}
set disableTaskDrag(value) {
this.nativeElement ? this.nativeElement.disableTaskDrag = value : undefined;
}
/** @description Disables task progress changing in the Timeline. */
get disableTaskProgressChange() {
return this.nativeElement ? this.nativeElement.disableTaskProgressChange : undefined;
}
set disableTaskProgressChange(value) {
this.nativeElement ? this.nativeElement.disableTaskProgressChange = value : undefined;
}
/** @description Disables resizing of tasks in the Timeline. */
get disableTaskResize() {
return this.nativeElement ? this.nativeElement.disableTaskResize : undefined;
}
set disableTaskResize(value) {
this.nativeElement ? this.nativeElement.disableTaskResize = value : undefined;
}
/** @description Disables the selection inside the GanttChart. */
get disableSelection() {
return this.nativeElement ? this.nativeElement.disableSelection : undefined;
}
set disableSelection(value) {
this.nativeElement ? this.nativeElement.disableSelection = value : undefined;
}
/** @description Disables the task segment dragging. */
get disableSegmentDrag() {
return this.nativeElement ? this.nativeElement.disableSegmentDrag : undefined;
}
set disableSegmentDrag(value) {
this.nativeElement ? this.nativeElement.disableSegmentDrag = value : undefined;
}
/** @description Disables the task segment resizing. */
get disableSegmentResize() {
return this.nativeElement ? this.nativeElement.disableSegmentResize : undefined;
}
set disableSegmentResize(value) {
this.nativeElement ? this.nativeElement.disableSegmentResize = value : undefined;
}
/** @description Disables the window editor for the GanttChart. */
get disableWindowEditor() {
return this.nativeElement ? this.nativeElement.disableWindowEditor : undefined;
}
set disableWindowEditor(value) {
this.nativeElement ? this.nativeElement.disableWindowEditor = value : undefined;
}
/** @description Determines in what unit is task duration property measured. */
get durationUnit() {
return this.nativeElement ? this.nativeElement.durationUnit : undefined;
}
set durationUnit(value) {
this.nativeElement ? this.nativeElement.durationUnit = value : undefined;
}
/** @description Determines whether a dedicated filter row is used for Table filtering instead of the default filter input. This property has no effect if filtering is not enabled. */
get filterRow() {
return this.nativeElement ? this.nativeElement.filterRow : undefined;
}
set filterRow(value) {
this.nativeElement ? this.nativeElement.filterRow = value : undefined;
}
/** @description Determines the view start day. Sunday is 0, Monday is 1, Saturday is 6. By default it's Sunday. */
get firstDayOfWeek() {
return this.nativeElement ? this.nativeElement.firstDayOfWeek : undefined;
}
set firstDayOfWeek(value) {
this.nativeElement ? this.nativeElement.firstDayOfWeek = value : undefined;
}
/** @description Groups the tasks inside the Task timeline according to the resources they are assigned to. Unassigned tasks are placed in a default group labeled 'Unassigned'. */
get groupByResources() {
return this.nativeElement ? this.nativeElement.groupByResources : undefined;
}
set groupByResources(value) {
this.nativeElement ? this.nativeElement.groupByResources = value : undefined;
}
/** @description Allows to create a custom header content for the Task Panel. The attribute accepts an HTMLTemplate element, it's id or a function. */
get headerTemplate() {
return this.nativeElement ? this.nativeElement.headerTemplate : undefined;
}
set headerTemplate(value) {
this.nativeElement ? this.nativeElement.headerTemplate = value : undefined;
}
/** @description Determines whether the dateMarkers are visible or not. */
get hideDateMarkers() {
return this.nativeElement ? this.nativeElement.hideDateMarkers : undefined;
}
set hideDateMarkers(value) {
this.nativeElement ? this.nativeElement.hideDateMarkers = value : undefined;
}
/** @description By default the Timeline has a three level header - timeline details, timeline second details and timeline header. This property hides the header container( the bottom container ). */
get hideTimelineHeader() {
return this.nativeElement ? this.nativeElement.hideTimelineHeader : undefined;
}
set hideTimelineHeader(value) {
this.nativeElement ? this.nativeElement.hideTimelineHeader = value : undefined;
}
/** @description By default the Timeline has a three level header - timeline details, timeline second details and timeline header. This property hides the header details container( the top container ). */
get hideTimelineHeaderDetails() {
return this.nativeElement ? this.nativeElement.hideTimelineHeaderDetails : undefined;
}
set hideTimelineHeaderDetails(value) {
this.nativeElement ? this.nativeElement.hideTimelineHeaderDetails = value : undefined;
}
/** @description By default the Timeline has a three level header - timeline details and timeline header. This property hides the second header details container( the middle container ). */
get hideTimelineSecondHeaderDetails() {
return this.nativeElement ? this.nativeElement.hideTimelineSecondHeaderDetails : undefined;
}
set hideTimelineSecondHeaderDetails(value) {
this.nativeElement ? this.nativeElement.hideTimelineSecondHeaderDetails = value : undefined;
}
/** @description Hides the Resource panel regardless of the resources availability By default the Resource panel is visible if resources are added to the GanttChart. This property allows to hide the Resource panel permanently. */
get hideResourcePanel() {
return this.nativeElement ? this.nativeElement.hideResourcePanel : undefined;
}
set hideResourcePanel(value) {
this.nativeElement ? this.nativeElement.hideResourcePanel = value : undefined;
}
/** @description Determines weather or not horizontal scrollbar is shown. */
get horizontalScrollBarVisibility() {
return this.nativeElement ? this.nativeElement.horizontalScrollBarVisibility : undefined;
}
set horizontalScrollBarVisibility(value) {
this.nativeElement ? this.nativeElement.horizontalScrollBarVisibility = value : undefined;
}
/** @description Determines the format of the dates inside the timeline header when they represent hours. */
get hourFormat() {
return this.nativeElement ? this.nativeElement.hourFormat : undefined;
}
set hourFormat(value) {
this.nativeElement ? this.nativeElement.hourFormat = value : undefined;
}
/** @description When enabled, scrolling to the end of the horizotal timeline, triggers the creation of additional to extend the time range. The number of cells to be added when the scrollbar reaches the end position is determined by the infiniteTimelineStep. */
get infiniteTimeline() {
return this.nativeElement ? this.nativeElement.infiniteTimeline : undefined;
}
set infiniteTimeline(value) {
this.nativeElement ? this.nativeElement.infiniteTimeline = value : undefined;
}
/** @description Determines the number of cells to be added when the horizontal scroll bar of the Timeline reaches it's end position when infiniteTimeline is enabled. */
get infiniteTimelineStep() {
return this.nativeElement ? this.nativeElement.infiniteTimelineStep : undefined;
}
set infiniteTimelineStep(value) {
this.nativeElement ? this.nativeElement.infiniteTimelineStep = value : undefined;
}
/** @description When set the Timeline is positioned on the left side while the Task Tree is positioned on the right. By default it's vice versa. */
get inverted() {
return this.nativeElement ? this.nativeElement.inverted : undefined;
}
set inverted(value) {
this.nativeElement ? this.nativeElement.inverted = value : undefined;
}
/** @description Determines whether keyboard navigation inside the Table is enabled or not. Keyboard navigation affects both Task and Resource Tables. It allows to navigate between items. the following keyboard shortcut keys are available for focused tasks inside the Task Table: Enter - opens the Window editor to edit the currently focused task.Delete - opens a confirmation window regarding the deletion of the currently focused task. */
get keyboardNavigation() {
return this.nativeElement ? this.nativeElement.keyboardNavigation : undefined;
}
set keyboardNavigation(value) {
this.nativeElement ? this.nativeElement.keyboardNavigation = value : undefined;
}
/** @description Sets or gets the unlockKey which unlocks the product. */
get unlockKey() {
return this.nativeElement ? this.nativeElement.unlockKey : undefined;
}
set unlockKey(value) {
this.nativeElement ? this.nativeElement.unlockKey = value : undefined;
}
/** @description Determines the language of the GanttChart. */
get locale() {
return this.nativeElement ? this.nativeElement.locale : undefined;
}
set locale(value) {
this.nativeElement ? this.nativeElement.locale = value : undefined;
}
/** @description Detetmines the maximum possible date of the Timeline. */
get max() {
return this.nativeElement ? this.nativeElement.max : undefined;
}
set max(value) {
this.nativeElement ? this.nativeElement.max = value : undefined;
}
/** @description Detetmines the minimum possible date of the Timeline. */
get min() {
return this.nativeElement ? this.nativeElement.min : undefined;
}
set min(value) {
this.nativeElement ? this.nativeElement.min = value : undefined;
}
/** @description Sets or gets an object specifying strings used in the widget that can be localized. Used in conjunction with the property locale. */
get messages() {
return this.nativeElement ? this.nativeElement.messages : undefined;
}
set messages(value) {
this.nativeElement ? this.nativeElement.messages = value : undefined;
}
/** @description Determines the format of the dates the timeline header when they represent months. */
get monthFormat() {
return this.nativeElement ? this.nativeElement.monthFormat : undefined;
}
set monthFormat(value) {
this.nativeElement ? this.nativeElement.monthFormat = value : undefined;
}
/** @description Determines the scale in Month view. */
get monthScale() {
return this.nativeElement ? this.nativeElement.monthScale : undefined;
}
set monthScale(value) {
this.nativeElement ? this.nativeElement.monthScale = value : undefined;
}
/** @description Determines the nonworking days of the week from 0 to 6, where 0 is the first day of the week and 6 is the last day. Nonworking days will be displayed with colored cells inside the timeline and will not affect the dateEnd of the tasks unless the adjustToNonworkingTime property is enabled. */
get nonworkingDays() {
return this.nativeElement ? this.nativeElement.nonworkingDays : undefined;
}
set nonworkingDays(value) {
this.nativeElement ? this.nativeElement.nonworkingDays = value : undefined;
}
/** @description Determines the nonworking hours of a day. Hours are represented as numbers inside an array (e.g. [1,2,3] - means 1,2 and 3 AM) or number ranges represented as nested arrays(e.g. [[0,6]] - means from 0 to 6 AM). In the timline the cells that represent nonworking days are colored differently from the rest and will not affect the dateEnd of the tasks unless the adjustToNonworkingTime property is enabled. */
get nonworkingHours() {
return this.nativeElement ? this.nativeElement.nonworkingHours : undefined;
}
set nonworkingHours(value) {
this.nativeElement ? this.nativeElement.nonworkingHours = value : undefined;
}
/** @description A function that can be used to completly customize the task element. The function has five arguments: task - the task object.segment - the task current segment object. If the task has only one segment, the task object is passed again.taskElement - the task's html element.segmentElement - the task's segment html element.labelElement - the task's segment label html element. */
get onTaskRender() {
return this.nativeElement ? this.nativeElement.onTaskRender : undefined;
}
set onTaskRender(value) {
this.nativeElement ? this.nativeElement.onTaskRender = value : undefined;
}
/** @description A function that can be used to completly customize the task element. The function has two arguments: task - the task object.taskElement - the task's html element. */
get taskFormatFunction() {
return this.nativeElement ? this.nativeElement.taskFormatFunction : undefined;
}
set taskFormatFunction(value) {
this.nativeElement ? this.nativeElement.taskFormatFunction = value : undefined;
}
/** @description A function that can be used to completly customize the tooltip. The function has three arguments: tooltipObject - the tooltip object.event - the event that triggered the tooltip.content - the tooltip's label element. */
get tooltipFormatFunction() {
return this.nativeElement ? this.nativeElement.tooltipFormatFunction : undefined;
}
set tooltipFormatFunction(value) {
this.nativeElement ? this.nativeElement.tooltipFormatFunction = value : undefined;
}
/** @description A function that can be used to completly customize the popup Window that is used to interact width tasks by changing their properties. The function as three arguments: target - the target popup Window that is about to be opened.type - the type of the window. The type determines the purpose of the window. Three possible values: 'task' (task editing), 'confirm' ( confirmation window), 'connection' (used when deleting a connection between tasks). item - the connection/task object that is the target of the window. */
get popupWindowCustomizationFunction() {
return this.nativeElement ? this.nativeElement.popupWindowCustomizationFunction : undefined;
}
set popupWindowCustomizationFunction(value) {
this.nativeElement ? this.nativeElement.p