• API Docs for Version:

    • APIs

    Show:

    Source\flexygo\Proyectos\FlexyGo\FlexyGo\js\flexygo\ui\wc\flx-timeline.js File

    1. /**
    2.  * @namespace flexygo.ui.wc
    3.  */
    4. var flexygo;
    5. (function (flexygo) {
    6.     var ui;
    7.     (function (ui) {
    8.         var wc;
    9.         (function (wc) {
    10.             /**
    11.             * Library for the FlxTimelineElement
    12.             *
    13.             * @class FlxTimelineElement
    14.             * @constructor
    15.             * @return {FlxTimelineElement} .
    16.             */
    17.             class FlxTimelineElement extends HTMLElement {
    18.                 constructor() {
    19.                     //If a constructor is defined, is REQUIRED call the super constructor
    20.                     super();
    21.                     /**
    22.                     * Vis Timeline
    23.                     * @property timelineranges {flexygo.api.timeline.timelineRanges}
    24.                     */
    25.                     this.timelineRanges = { Hour: 18E5, Day: 432E5, Week: 3024E5, Month: 1296E6, Year: 158112E5 };
    26.                 }
    27.                 /**
    28.                 * Array of observed attributes. REQUIRED
    29.                 * @property observedAttributes {Array}
    30.                 */
    31.                 static get observedAttributes() {
    32.                     return ['ModuleName', 'ObjectName', 'ObjectWhere'];
    33.                 }
    34.                 /**
    35.                 * Init the webcomponent. REQUIRED.
    36.                 * @method init
    37.                 */
    38.                 init() {
    39.                     try {
    40.                         let me = $(this);
    41.                         me.removeAttr('manualInit');
    42.                         this.filterValues = null;
    43.                         this.activeFilter = null;
    44.                         this.wcParentModule = me.closest('flx-module')[0];
    45.                         if (!this.wcParentModule) {
    46.                             flexygo.msg.error('flx-timeline has to be inside a flx-module');
    47.                             throw 'flx-timeline has to be inside a flx-module';
    48.                         }
    49.                         let history = flexygo.history.get(me);
    50.                         if (history && history.filtersValues && history.filtersValues[this.wcParentModule.moduleName]) {
    51.                             let filterHistoryValue = history.filtersValues[this.wcParentModule.moduleName];
    52.                             if (filterHistoryValue.activeFilter) {
    53.                                 this.activeFilter = filterHistoryValue.activeFilter;
    54.                             }
    55.                             if (filterHistoryValue.properties) {
    56.                                 this.filterValues = filterHistoryValue.properties;
    57.                             }
    58.                         }
    59.                         this.getTimeline();
    60.                     }
    61.                     catch (ex) {
    62.                         console.error('FlexyGo Timeline', ex);
    63.                     }
    64.                 }
    65.                 /**
    66.                 * Refresh of webcomponent. REQUIRED.
    67.                 * @method refresh
    68.                 */
    69.                 refresh() {
    70.                     if ($(this).attr('manualInit') != 'true') {
    71.                         this.init();
    72.                     }
    73.                 }
    74.                 /**
    75.                 * Set filter of webcomponent. REQUIRED.
    76.                 * @method refresh
    77.                 */
    78.                 setFilter() {
    79.                     if ($(this).attr('manualInit') != 'true') {
    80.                         //TODO: Modificar pedir solo los items a el controller
    81.                         this.getTimeline();
    82.                     }
    83.                 }
    84.                 /**
    85.                 * Render HTML data.
    86.                 * @method render
    87.                 */
    88.                 render() {
    89.                     try {
    90.                         let itemsWithoutGroup = `<aside id="items_without_group" class="folded">
    91.                                                         <div>
    92.                                                             <h4>${this.timelineSetting.TitleItemsWithoutGroup}</h4>
    93.                                                         </div>
    94.                                                         <div id="items-container"></div>
    95.                                                         <div class="fold"> 
    96.                                                             <i class="flx-icon icon-arrow-head-5"/> 
    97.                                                         </div>
    98.                                                     </aside>`;
    99.                         let controls = `<div id="controls">
    100.                                             <div>                            
    101.                                                 <button type="button" method="navigation" value="0.9" accesskey="l"><i class="fa fa-angle-left"/></button>
    102.                                                 <button type="button" method="today" accesskey="t">${flexygo.localization.translate('flxtimeline.today')}</button>
    103.                                                 <button type="button" method="navigation" value="-0.9" value="0.9" accesskey="r"><i class="fa fa-angle-right"/></button>                           
    104.                                             </div>
    105.                                             <div>
    106.                                                 <button type="button" method="changeRange" range="Hour" value="${this.timelineRanges.Hour}" accesskey="1">${flexygo.localization.translate('flxtimeline.hour')}</button>
    107.                                                 <button type="button" method="changeRange" range="Day" value="${this.timelineRanges.Day}" accesskey="2">${flexygo.localization.translate('flxtimeline.day')}</button>
    108.                                                 <button type="button" method="changeRange" range="Week" value="${this.timelineRanges.Week}" accesskey="3">${flexygo.localization.translate('flxtimeline.week')}</button>
    109.                                                 <button type="button" method="changeRange" range="Month" value="${this.timelineRanges.Month}" accesskey="4">${flexygo.localization.translate('flxtimeline.month')}</button>
    110.                                                 <button type="button" method="changeRange" range="Year" value="${this.timelineRanges.Year}" accesskey="5">${flexygo.localization.translate('flxtimeline.year')}</button>
    111.                                             </div>                                         
    112.                                         </div>`;
    113.                         let title = `<div id="title">
    114.                                             <h3>${this.timelineSetting.TimelineSettingDescrip}</h3>
    115.                                         </div>`;
    116.                         $(this).html(`<section id="timeline_container" ShowControls="${this.timelineSetting.ShowControls}" layout="${(this.timelineSetting.WithGroups && this.timelineSetting.Editable && this.timelineSetting.ShowItemsWithoutGroup && this.timelineSetting.LayoutName) ? this.timelineSetting.LayoutName : ''}">
    117.                                ${(this.timelineSetting.WithGroups && this.timelineSetting.Editable && this.timelineSetting.ShowItemsWithoutGroup) ? itemsWithoutGroup : ''}
    118.                                 <div id="vis">
    119.                                     <div class="help">
    120.                                         <i class="fa fa-question-circle"/> 
    121.                                     </div>
    122.                                 ${(this.timelineSetting.ShowControls) ? controls + title : ''} 
    123.                                 </div>
    124.                                 <div id="not_supported">
    125.                                     <h1>${flexygo.localization.translate('flxtimeline.notsupported')}</h1>
    126.                                 </div>
    127.                             </section>`);
    128.                         if (!flexygo.utils.isBlank(this.timelineSetting.DefaultRangeName)) {
    129.                             $(this).find(`#controls > div > button[range="${this.timelineSetting.DefaultRangeName}"]`).addClass('active');
    130.                         }
    131.                         this.setStructureEvents();
    132.                     }
    133.                     catch (ex) {
    134.                         console.error('FlexyGo Timeline', ex);
    135.                     }
    136.                 }
    137.                 /**
    138.                 * Set Structure Events.
    139.                 * @method setStructureEvents
    140.                 */
    141.                 setStructureEvents() {
    142.                     let removeActiveRangeEvent = (e) => {
    143.                         $(this).find('#controls > div > button.active').removeClass('active');
    144.                     };
    145.                     let flagEventMousewheel, flagAccessKeyVisible = false;
    146.                     $(this).find('#vis > div.help').off('click.timeline').on('click.timeline', (e) => {
    147.                         $.sweetModal({
    148.                             title: `${flexygo.localization.translate('flxtimeline.title')} 🙊`,
    149.                             content: `<div id="timeline-help">
    150.                                 <table>
    151.                                     <thead>
    152.                                         <tr>
    153.                                             <th>
    154.                                                 <h2>${flexygo.localization.translate('flxtimeline.description')}</h2>
    155.                                             </th>
    156.                                             <th>
    157.                                                 <h2>${flexygo.localization.translate('flxtimeline.action')}</h2>
    158.                                             </th>                        
    159.                                         </tr>
    160.                                     </thead>
    161.                                     <tbody>
    162.                                     <tr class="bgseparator">
    163.                                         <th>
    164.                                             <h4>SHORTCUTS</h4>
    165.                                           </th>
    166.                                         </tr>
    167.                                          <tr>
    168.                                             <td>${flexygo.localization.translate('flxtimeline.zoom')}</td>
    169.                                             <td>
    170.                                                 <kbd>
    171.                                                    Alt
    172.                                                 </kbd>
    173.                                                 <kbd>
    174.                                                    L
    175.                                                 </kbd>
    176.                                                 ${flexygo.localization.translate('flxtimeline.or')}
    177.                                                 <kbd>
    178.                                                    T
    179.                                                 </kbd>
    180.                                                 ${flexygo.localization.translate('flxtimeline.or')}
    181.                                                 <kbd>
    182.                                                    R
    183.                                                 </kbd>
    184.                                             </td>
    185.                                         </tr>
    186.                                          <tr>
    187.                                             <td>${flexygo.localization.translate('flxtimeline.navigationtime')}</td>
    188.                                             <td>
    189.                                                   
    190.                                                 <kbd>
    191.                                                    Alt
    192.                                                 </kbd>
    193.                                                 <kbd>
    194.                                                    1
    195.                                                 </kbd>                                                
    196.                                                     ${flexygo.localization.translate('flxtimeline.to')}                                           
    197.                                                 <kbd>
    198.                                                    5
    199.                                                 </kbd>                                              
    200.                                             </td>                                            
    201.                                         </tr>
    202.                                     <tr class="bgseparator">
    203.                                         <th>
    204.                                             <h4>HELP</h4>
    205.                                           </th>
    206.                                         </tr>
    207.                                         <tr>                                           
    208.                                             <td>${flexygo.localization.translate('flxtimeline.selectitem')}</td>
    209.                                             <td>
    210.                                                 <kbd>
    211.                                                     <i class="fa fa-hand-pointer-o"/>
    212.                                                 </kbd>
    213.                                             </td>
    214.                                         </tr>
    215.                                         <tr>
    216.                                             <td>${flexygo.localization.translate('flxtimeline.multiselectitems')}</td>
    217.                                             <td>
    218.                                                 <kbd>
    219.                                                     Ctrl
    220.                                                 </kbd>
    221.                                                 <kbd>
    222.                                                     <i class="fa fa-hand-pointer-o"/>
    223.                                                 </kbd>
    224.                                                 ${flexygo.localization.translate('flxtimeline.or')}
    225.                                                 <kbd>
    226.                                                     <i class="fa fa-hand-pointer-o"/> 
    227.                                                     <span>1s</span>
    228.                                                 </kbd>
    229.                                             </td>
    230.                                         </tr>
    231.                                         <tr>
    232.                                             <td>${flexygo.localization.translate('flxtimeline.multiselectbyrange')}</td>
    233.                                             <td>
    234.                                                 <kbd>
    235.                                                     Shift
    236.                                                 </kbd>
    237.                                                 <kbd>
    238.                                                     <i class="fa fa-hand-pointer-o"/>
    239.                                                 </kbd>
    240.                                             </td>
    241.                                         </tr>
    242.                                         <tr class="separator">
    243.                                             <td>${flexygo.localization.translate('flxtimeline.multiselectbyrangegroup')}</td>
    244.                                             <td>
    245.                                                 <kbd>
    246.                                                     Shift
    247.                                                 </kbd>
    248.                                                 <kbd>
    249.                                                     G
    250.                                                 </kbd>
    251.                                                 <kbd>
    252.                                                     <i class="fa fa-hand-pointer-o"/>
    253.                                                 </kbd>
    254.                                             </td>
    255.                                         </tr>
    256.                                         <tr>
    257.                                             <td>${flexygo.localization.translate('flxtimeline.createitem')}</td>
    258.                                             <td>
    259.                                                 <kbd>
    260.                                                     <i class="fa fa-hand-pointer-o"/> 
    261.                                                     <span>2x</span>
    262.                                                 </kbd>
    263.                                             </td>
    264.                                         </tr>
    265.                                         <tr>
    266.                                             <td>${flexygo.localization.translate('flxtimeline.createitemwithrange')}</td>
    267.                                             <td>
    268.                                                 <kbd>
    269.                                                     Ctrl
    270.                                                 </kbd>
    271.                                                 <kbd>
    272.                                                     <i class="fa fa-hand-pointer-o"/>
    273.                                                 </kbd>
    274.                                                 <kbd>
    275.                                                     <i class="fa fa-arrows-h"/> 
    276.                                                 </kbd>
    277.                                             </td>
    278.                                         </tr>
    279.                                         <tr>
    280.                                             <td>${flexygo.localization.translate('flxtimeline.edititem')}</td>
    281.                                             <td>
    282.                                                 <kbd>
    283.                                                     <i class="fa fa-hand-pointer-o"/> 
    284.                                                 </kbd>
    285.                                                 <span class="vertical-separator"/>
    286.                                                 <kbd>
    287.                                                     <i class="flx-icon icon-drag"/> 
    288.                                                 </kbd>
    289.                                                    ${flexygo.localization.translate('flxtimeline.or')}
    290.                                                 <kbd>
    291.                                                     <i class="fa fa-arrows-h"/> 
    292.                                                 </kbd>
    293.                                                    ${flexygo.localization.translate('flxtimeline.or')}
    294.                                                 <kbd>
    295.                                                     <i class="flx-icon icon-remove"/> 
    296.                                                 </kbd>
    297.  
    298.                                             </td>
    299.                                         </tr>
    300.                                         <tr class="separator">
    301.                                             <td>${flexygo.localization.translate('flxtimeline.openeditview')}</td>
    302.                                             <td>
    303.                                                 <kbd>
    304.                                                     <i class="fa fa-hand-pointer-o"/> 
    305.                                                     <span>2x</span>
    306.                                                 </kbd>
    307.                                             </td>
    308.                                         </tr>
    309.                                         <tr>
    310.                                             <td>${flexygo.localization.translate('flxtimeline.zoom')} (Zoom)</td>
    311.                                             <td>
    312.                                                 <kbd>
    313.                                                     Ctrl
    314.                                                 </kbd>
    315.                                                 <kbd>
    316.                                                     <svg id="mouseAnimation" width="18px" height="100%" viewBox="0 0 247 390" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:1.5;">
    317. 	                                                    <style>
    318. 		                                                    @keyframes scroll {
    319. 			                                                    0% {
    320. 				                                                    transform: translateY(0);
    321. 			                                                    }
    322. 			                                                    30% {
    323. 				                                                    transform: translateY(60px);
    324. 			                                                    }
    325. 		                                                    }
    326.  
    327. 		                                                    svg#mouseAnimation #wheel {
    328. 			                                                    animation: scroll ease 2s infinite;
    329. 		                                                    }
    330. 	                                                    </style>
    331. 	                                                    <path id="wheel" d="M123.359,79.775l0,32.843" style="fill:none;stroke:var(--timeline-light-color);stroke-width:15px;"/>
    332. 	                                                    <path id="mouse" d="M236.717,123.359c0,-62.565 -50.794,-113.359 -113.358,-113.359c-62.565,0 -113.359,50.794 -113.359,113.359l0,143.237c0,62.565 50.794,113.359 113.359,113.359c62.564,0 113.358,-50.794 113.358,-113.359l0,-143.237Z" style="fill:none;stroke:var(--timeline-light-color);stroke-width:15px;"/>
    333.                                                     </svg>
    334.                                                 </kbd>
    335.                                             </td>
    336.                                         </tr>
    337.                                         <tr>
    338.                                             <td>${flexygo.localization.translate('flxtimeline.navigationtime')}</td>
    339.                                             <td>
    340.                                                 <kbd>
    341.                                                     <i class="fa fa-hand-pointer-o"/>
    342.                                                 </kbd>
    343.                                                 <kbd>
    344.                                                     <i class="flx-icon icon-drag"/>
    345.                                                 </kbd>
    346.                                             </td>
    347.                                         </tr>
    348.                                     </tbody>
    349.                                 </table>
    350.                              </div>`,
    351.                             width: '60%',
    352.                             theme: $.sweetModal.THEME_LIGHT
    353.                         });
    354.                     });
    355.                     if (this.timelineSetting.WithGroups && this.timelineSetting.Editable && this.timelineSetting.ShowItemsWithoutGroup) {
    356.                         $(this).find('#items_without_group > div.fold').off('click.timeline').on('click.timeline', () => {
    357.                             let itemsWithoutGroup = $(this).find('#items_without_group');
    358.                             (itemsWithoutGroup.hasClass('folded')) ? itemsWithoutGroup.removeClass('folded') : itemsWithoutGroup.addClass('folded');
    359.                         });
    360.                     }
    361.                     $(document).off('keydown.timeline keyup.timeline').on({
    362.                         'keydown.timeline': (e) => {
    363.                             if (e.shiftKey && e.keyCode === 71 && !this.visTimeline.itemSet.options.multiselectPerGroup) {
    364.                                 this.visTimeline.setOptions({ multiselectPerGroup: true });
    365.                             }
    366.                             if (e.ctrlKey && !flagEventMousewheel) {
    367.                                 flagEventMousewheel = true;
    368.                                 this.visTimeline.on('mousewheel', removeActiveRangeEvent);
    369.                             }
    370.                             /*Show access key*/
    371.                             if ((e.altKey || e.key === 'Alt') && !e.ctrlKey && !flagAccessKeyVisible) {
    372.                                 e.preventDefault();
    373.                                 e.stopPropagation();
    374.                                 flagAccessKeyVisible = true;
    375.                                 $(this).find('[accesskey]').filter(':visible').each((index, elem) => {
    376.                                     let jElem = $(elem);
    377.                                     let overlay = $(`<div class="accesskey_overlay">${jElem.attr('accesskey')}</div>`);
    378.                                     let overlayParent;
    379.                                     if (elem.tagName.toLowerCase() === "input") {
    380.                                         /* special case for the input that has an access key defined.
    381.                                         We cannot set the overlay on the input itself, only on its parent.*/
    382.                                         overlayParent = jElem.parent();
    383.                                     }
    384.                                     else {
    385.                                         overlayParent = jElem;
    386.                                     }
    387.                                     if (overlayParent.css('position') !== 'absolute') {
    388.                                         overlayParent.css('position', 'relative');
    389.                                     }
    390.                                     overlay.appendTo(overlayParent);
    391.                                 });
    392.                             }
    393.                         },
    394.                         'keyup.timeline': (e) => {
    395.                             if ((e.keyCode === 16 || e.keyCode === 71) && this.visTimeline.itemSet.options.multiselectPerGroup) {
    396.                                 this.visTimeline.setOptions({ multiselectPerGroup: false });
    397.                             }
    398.                             if (e.keyCode === 17 && flagEventMousewheel) {
    399.                                 flagEventMousewheel = false;
    400.                                 this.visTimeline.off('mousewheel', removeActiveRangeEvent);
    401.                             }
    402.                             /*Hide access Key*/
    403.                             if ((e.altKey || e.key === 'Alt') && !e.ctrlKey && flagAccessKeyVisible) {
    404.                                 e.preventDefault();
    405.                                 e.stopPropagation();
    406.                                 flagAccessKeyVisible = false;
    407.                                 let overlays = $(this).find('.accesskey_overlay');
    408.                                 if (overlays.length)
    409.                                     overlays.remove();
    410.                             }
    411.                         }
    412.                     });
    413.                     if (this.timelineSetting.ShowControls) {
    414.                         $(this).find('#controls > div > button').off('click.timeline').on('click.timeline', (e) => {
    415.                             let element = $(e.currentTarget);
    416.                             let method = element.attr('method');
    417.                             let value = parseFloat(element.attr('value'));
    418.                             let range = this.visTimeline.getWindow();
    419.                             switch (method) {
    420.                                 case 'navigation':
    421.                                     let intervalArrows = range.end.getTime() - range.start.getTime();
    422.                                     this.visTimeline.setWindow(range.start.valueOf() - intervalArrows * value, range.end.valueOf() - intervalArrows * value);
    423.                                     break;
    424.                                 case 'today':
    425.                                     this.visTimeline.moveTo(moment().format());
    426.                                     break;
    427.                                 case 'changeRange':
    428.                                     let interval = moment((range.start.getTime() + range.end.getTime()) / 2).format();
    429.                                     this.visTimeline.setWindow(moment(interval).subtract(value, 'millisecond'), moment(interval).add(value, 'millisecond'));
    430.                                     $(this).find('#controls > div > button.active').removeClass('active');
    431.                                     element.addClass('active');
    432.                                     break;
    433.                             }
    434.                         });
    435.                         $(this).find('#controls > div:nth-child(1)').tooltip({ title: flexygo.localization.translate('flxtimeline.navigation'), placement: 'right', trigger: 'hover' });
    436.                         $(this).find('#controls > div:nth-child(2)').tooltip({ title: flexygo.localization.translate('flxtimeline.range'), placement: 'right', trigger: 'hover' });
    437.                     }
    438.                 }
    439.                 /**
    440.                 * Init Vis Timeline.
    441.                 * @method initVisTimeline
    442.                 * @param {vis.DataItemCollectionType} visItems Items Data.
    443.                 * @param {vis.DataGroupCollectionType} visGroups Groups Data.
    444.                 * @param {vis.TimelineOptions} visOptions Options Data.
    445.                 */
    446.                 initVisTimeline(visItems, visGroups, visOptions = {}) {
    447.                     try {
    448.                         this.visTimeline = new vis.Timeline($(this).find('#timeline_container > #vis')[0], visItems, visGroups, visOptions);
    449.                     }
    450.                     catch (ex) {
    451.                         console.error('FlexyGo Timeline', ex);
    452.                         flexygo.msg.error(ex.message, null, 'Error initializing the timeline');
    453.                     }
    454.                 }
    455.                 /**
    456.                 * Init Vis Timeline.
    457.                 * @method setItemsWithoutGroups
    458.                 * @param {vis.DataItemCollectionType} visItems Items Data.
    459.                 * @param {vis.DataGroupCollectionType} visGroups Groups Data.
    460.                 * @param {vis.TimelineOptions} visOptions Options Data.
    461.                 */
    462.                 setItemsWithoutGroups(visItems) {
    463.                     if (visItems.length === 0) {
    464.                         $(this).find('#timeline_container > #items_without_group > #items-container').append(`<span>${flexygo.localization.translate('flxtimeline.withoutRegisters')}</span>`);
    465.                     }
    466.                     else {
    467.                         for (const item of visItems) {
    468.                             let visItemData = this.buildVisItem(item, true);
    469.                             $((`<div class="item ${!flexygo.utils.isBlank(visItemData.className) ? visItemData.className : ''}" ${!flexygo.utils.isBlank(visItemData.style) ? `style="${visItemData.style}"` : ''} draggable= "true"> 
    470.                                                                                         ${(this.timelineSetting.ItemContentTemplate) ? flexygo.utils.parser.recursiveCompile(item, this.timelineSetting.ItemContentTemplate) : item[(this.timelineSetting.Advanced) ? this.timelineSetting.ItemDescripField : this.timelineSetting.PropertyDescrip]} 
    471.                                                                                      </div>`)).appendTo($(this).find('#timeline_container > #items_without_group > #items-container'))[0].visItemData = visItemData;
    472.                         }
    473.                         $(this).find('#timeline_container > #items_without_group > #items-container > .item').off('dragstart.timeline').on('dragstart.timeline', (event) => {
    474.                             event.originalEvent.dataTransfer.effectAllowed = 'move';
    475.                             event.originalEvent.dataTransfer.setData("text", JSON.stringify(event.currentTarget.visItemData));
    476.                         });
    477.                     }
    478.                 }
    479.                 /**
    480.                 * Get Timeline.
    481.                 * @method getTimeline
    482.                 */
    483.                 getTimeline() {
    484.                     let params = {
    485.                         PageName: flexygo.history.getPageName($(this)),
    486.                         ModuleName: this.moduleName,
    487.                         ObjectName: $(this).attr('ObjectName'),
    488.                         ObjectWhere: $(this).attr('ObjectWhere'),
    489.                         SearchId: this.activeFilter,
    490.                         FilterValues: this.filterValues
    491.                     };
    492.                     flexygo.ajax.post('~/api/Timeline', 'GetTimeline', params, (response) => {
    493.                         if (response) {
    494.                             let visItems = new vis.DataSet(), visGroups;
    495.                             this.timelineSetting = response.TimelineSetting;
    496.                             this.defaults = (response.Defaults) ? response.Defaults : {};
    497.                             this.toolbar = response.Toolbar;
    498.                             this.searchSettings = response.SearchSettings;
    499.                             this.savedSearches = response.SavedSearches;
    500.                             this.objectName = this.timelineSetting.EntityConfiguration.ObjectName;
    501.                             this.objectWhere = response.ObjectWhere;
    502.                             this.filterWhere = response.FilterWhere;
    503.                             this.render();
    504.                             this.wcParentModule.setButtons(this.toolbar, this.timelineSetting.EntityConfiguration.CollectionName, this.objectWhere);
    505.                             this.loadFilters();
    506.                             for (const item of response.Items.filter(item => !(this.timelineSetting.WithGroups && flexygo.utils.isBlank(item[(this.timelineSetting.Advanced) ? this.timelineSetting.ItemGroupField : this.timelineSetting.PropertyGroup])))) {
    507.                                 visItems.add(this.buildVisItem(item));
    508.                             }
    509.                             if (this.timelineSetting.WithGroups) {
    510.                                 let groups = [];
    511.                                 for (let i = 0; i < response.Groups.length; i++) {
    512.                                     groups.push(this.buildVisGroup(response.Groups[i], i));
    513.                                 }
    514.                                 visGroups = new vis.DataSet(groups);
    515.                             }
    516.                             else {
    517.                                 visGroups = null;
    518.                             }
    519.                             if (this.timelineSetting.WithGroups && this.timelineSetting.Editable && this.timelineSetting.ShowItemsWithoutGroup) {
    520.                                 this.setItemsWithoutGroups(response.Items.filter(item => flexygo.utils.isBlank(item[(this.timelineSetting.Advanced) ? this.timelineSetting.ItemGroupField : this.timelineSetting.PropertyGroup])));
    521.                             }
    522.                             this.initVisTimeline(visItems, visGroups, this.buildVisOptions());
    523.                             this.wcParentModule.moduleLoaded(this);
    524.                         }
    525.                     });
    526.                 }
    527.                 /**
    528.                 * Build Vis Options.
    529.                 * @method buildVisOptions
    530.                 * @param {object} visTimelineOptions.
    531.                 */
    532.                 buildVisOptions() {
    533.                     let visOptions = {
    534.                         /*align: 'auto',*/
    535.                         /*autoResize: true,*/
    536.                         /*clickToUse: false,*/
    537.                         /*configure: false,*/
    538.                         /*dataAttributes: false,*/
    539.                         editable: (this.timelineSetting.Editable) ? { add: this.timelineSetting.EntityConfiguration.CanInsert, remove: this.timelineSetting.EntityConfiguration.CanDelete, updateGroup: this.timelineSetting.EntityConfiguration.CanUpdate && this.timelineSetting.CanEditPropertyGroup, updateTime: this.timelineSetting.EntityConfiguration.CanUpdate && (this.timelineSetting.CanEditPropertyStartDate || this.timelineSetting.CanEditPropertyEndDate), overrideItems: false } : this.timelineSetting.Editable,
    540.                         end: moment().add(this.timelineRanges[this.timelineSetting.DefaultRangeName], 'millisecond').format(),
    541.                         /*format: none,*/
    542.                         /*groupEditable: { add: false, remove: false, order: false },*/
    543.                         groupOrder: function (a, b) {
    544.                             return a.value - b.value;
    545.                         },
    546.                         /*groupOrderSwap: none,*/
    547.                         /*groupTemplate: none,*/
    548.                         height: (this.timelineSetting.ShowControls) ? 'calc(100% - 42px)' : '100%',
    549.                         /*hiddenDates: none,*/
    550.                         /*horizontalScroll: false,*/
    551.                         /*itemsAlwaysDraggable: {item: false, range: false},*/
    552.                         locale: flexygo.context.currentUserLang,
    553.                         /*locales: none*/
    554.                         /*moment: vis.moment,*/
    555.                         /* moment: function (date) {
    556.                              return (<any>vis).moment(date).utc();
    557.                          },*/
    558.                         /*margin: {axis: 20, item: { horizontal: 10, vertical: 10}},*/
    559.                         margin: { item: { horizontal: -1 } },
    560.                         max: moment().add('years', 25).format(),
    561.                         /*maxHeight: none*/
    562.                         /*maxMinorChars: 7,*/
    563.                         min: moment().add('years', -25).format(),
    564.                         /*minHeight: none,*/
    565.                         /*moveable: true,*/
    566.                         multiselect: true,
    567.                         /*multiselectPerGroup: false, (Modified On The Fly)*/
    568.                         onAdd: (item, callback) => {
    569.                             this.objectActions(item, (item.withOutGroup) ? 'update' : 'insert').then((data) => {
    570.                                 callback(data);
    571.                                 if (data) {
    572.                                     $(this).find(`#timeline_container > #items_without_group > #items-container > .item`).filter((index, element) => element.visItemData.id === data.id).remove();
    573.                                     this.visTimeline.focus(data.id);
    574.                                 }
    575.                             }, function (error) {
    576.                                 callback(null);
    577.                                 console.error('FlexyGo Timeline', error);
    578.                             });
    579.                         },
    580.                         /*onAddGroup: none,*/
    581.                         /*onDropObjectOnItem: none, (Used Bellow)*/
    582.                         /*onInitialDrawComplete: none,*/
    583.                         onMove: (item, callback) => {
    584.                             this.objectActions(item, 'update').then((data) => {
    585.                                 callback(data);
    586.                                 if (data)
    587.                                     this.visTimeline.focus(data.id);
    588.                             }, function (error) {
    589.                                 callback(null);
    590.                                 console.error('FlexyGo Timeline', error);
    591.                             });
    592.                         },
    593.                         /*onMoveGroup: none,*/
    594.                         /*onMoving: none, (Used Bellow)*/
    595.                         onRemove: (item, callback) => {
    596.                             this.objectActions(item, 'delete').then((data) => {
    597.                                 callback(data);
    598.                             }, function (error) {
    599.                                 callback(null);
    600.                                 console.error('FlexyGo Timeline', error);
    601.                             });
    602.                         },
    603.                         /*onRemoveGroup: 'none',*/
    604.                         onUpdate: (item, callback) => {
    605.                             if (item.editable === undefined || (item.editable && typeof (item.editable) === 'boolean') || (item.editable && typeof (item.editable) === 'object' && (item.editable.updateGroup || item.editable.updateTime || item.editable.remove))) {
    606.                                 this.objectActions(item, 'edit').then((data) => {
    607.                                     callback(data);
    608.                                     if (data)
    609.                                         this.visTimeline.focus(data.id);
    610.                                 }, function (error) {
    611.                                     callback(null);
    612.                                     console.error('FlexyGo Timeline', error);
    613.                                 });
    614.                             }
    615.                         },
    616.                         /*order: none*/
    617.                         orientation: { axis: 'top', item: 'top' },
    618.                         /*rollingMode: { follow: false, offset: 0.5 },*/
    619.                         /*rtl: false,*/
    620.                         /*selectable: true,*/
    621.                         /*showCurrentTime: true,*/
    622.                         /*showMajorLabels: true,*/
    623.                         /*showMinorLabels: true,*/
    624.                         /*showTooltips: true,*/
    625.                         /*stack: true,*/
    626.                         /*stackSubgroups: true,*/
    627.                         /*snap: function,*/
    628.                         start: moment().subtract(this.timelineRanges[this.timelineSetting.DefaultRangeName], 'millisecond').format(),
    629.                         /*template: none,*/
    630.                         /*visibleFrameTemplate: none, (Used Bellow)*/
    631.                         /*timeAxis: { scale: none, step: 1 },*/
    632.                         /*type: none,*/
    633.                         /*tooltip: { followMouse: false, overflowMethod: 'flip' },*/
    634.                         tooltipOnItemUpdateTime: {
    635.                             template: (item) => {
    636.                                 return `<div>
    637.                                     <i class="fa fa-hourglass-1"/></i> ${moment(item.start).utc().format('l')} ${moment(item.start).utc().format('LT')}
    638.                                 </div>
    639.                                 ${(item.end) ? `<div>
    640.                                                     ${moment(item.end).utc().format('l')} ${moment(item.end).utc().format('LT')} <i class="fa fa-hourglass-end"></i>
    641.                                                 </div>` : ''}`;
    642.                             }
    643.                         },
    644.                         verticalScroll: true,
    645.                         /*width: '100%',*/
    646.                         /*zoomable: true,*/
    647.                         zoomKey: 'ctrlKey',
    648.                         zoomMax: 157680000000,
    649.                         zoomMin: 60000,
    650.                     };
    651.                     if (this.timelineSetting.Advanced && !flexygo.utils.isBlank(this.timelineSetting.OnDropObjectOnItemFunction)) {
    652.                         visOptions.onDropObjectOnItem = (objectData, item, callback) => {
    653.                             new Function('objectData', 'item', `return new Promise((resolve, reject) => { try {${this.timelineSetting.OnDropObjectOnItemFunction}} catch (ex) { reject(ex); } });`).call(this, objectData, item).then(function (data) { callback(data); }, function (error) { callback(item); console.error('FlexyGo Timeline', 'OnDropObjectOnItemFunction', error); });
    654.                         };
    655.                     }
    656.                     if (this.timelineSetting.Advanced && !flexygo.utils.isBlank(this.timelineSetting.OnMovingFunction)) {
    657.                         visOptions.onMoving = (item, callback) => {
    658.                             new Function('item', `return new Promise((resolve, reject) => { try {${this.timelineSetting.OnMovingFunction}} catch (ex) { reject(ex); } });`).call(this, item).then(function (data) { callback(data); }, function (error) { callback(item); console.error('FlexyGo Timeline', 'onMovingFunction', error); });
    659.                         };
    660.                     }
    661.                     if (this.timelineSetting.Advanced && !flexygo.utils.isBlank(this.timelineSetting.ItemVisibleFrameTemplate)) {
    662.                         visOptions.visibleFrameTemplate = (item, element) => {
    663.                             return (item && item.data) ? flexygo.utils.parser.recursiveCompile(item.data, this.timelineSetting.ItemVisibleFrameTemplate) : '';
    664.                         };
    665.                     }
    666.                     return $.extend(true, visOptions, this.isJson(this.timelineSetting.CustomOptions) ? JSON.parse(this.timelineSetting.CustomOptions, (key, value) => (value && (typeof value === 'string') && value.indexOf('function') === 0) ? new Function('return ' + value)() : value) : null);
    667.                 }
    668.                 /**
    669.                 * Build Vis Item.
    670.                 * @method buildVisItem
    671.                 * @param {object} data Data item.
    672.                 */
    673.                 buildVisItem(data, isNew = false) {
    674.                     if (data) {
    675.                         let id = new Array;
    676.                         this.timelineSetting.EntityConfiguration.ObjectKeys.forEach((key) => id.push({ [key]: data[key] }));
    677.                         let item = {
    678.                             id: JSON.stringify(id),
    679.                             group: data[(this.timelineSetting.Advanced) ? this.timelineSetting.ItemGroupField : this.timelineSetting.PropertyGroup],
    680.                             content: (this.timelineSetting.ItemContentTemplate) ? flexygo.utils.parser.recursiveCompile(data, this.timelineSetting.ItemContentTemplate) : (data[(this.timelineSetting.Advanced) ? this.timelineSetting.ItemDescripField : this.timelineSetting.PropertyDescrip]) ? data[(this.timelineSetting.Advanced) ? this.timelineSetting.ItemDescripField : this.timelineSetting.PropertyDescrip] : flexygo.localization.translate('flxtimeline.withoutDescription'),
    681.                             start: (data[(this.timelineSetting.Advanced) ? this.timelineSetting.ItemStartDateField : this.timelineSetting.PropertyStartDate]) ? moment(data[(this.timelineSetting.Advanced) ? this.timelineSetting.ItemStartDateField : this.timelineSetting.PropertyStartDate]).utc().format("YYYY-MM-DD HH:mm") : null,
    682.                             end: (data[(this.timelineSetting.Advanced) ? this.timelineSetting.ItemEndDateField : this.timelineSetting.PropertyEndDate]) ? moment(data[(this.timelineSetting.Advanced) ? this.timelineSetting.ItemEndDateField : this.timelineSetting.PropertyEndDate]).utc().format("YYYY-MM-DD HH:mm") : null,
    683.                             title: data[(this.timelineSetting.Advanced) ? this.timelineSetting.ItemDescripField : this.timelineSetting.PropertyDescrip],
    684.                             withOutGroup: (data[(this.timelineSetting.Advanced) ? this.timelineSetting.ItemGroupField : this.timelineSetting.PropertyGroup]) ? false : true,
    685.                             editable: (this.timelineSetting.Advanced && this.timelineSetting.Editable && this.checkEditableProperty(data[this.timelineSetting.ItemEditableField])) ? JSON.parse(data[this.timelineSetting.ItemEditableField]) : undefined,
    686.                             className: (this.timelineSetting.Advanced) ? data[this.timelineSetting.ItemClassNameField] : null,
    687.                             style: (this.timelineSetting.Advanced) ? data[this.timelineSetting.ItemStyleField] : null,
    688.                             type: (this.timelineSetting.Advanced && data[this.timelineSetting.ItemTypeField]) ? data[this.timelineSetting.ItemTypeField].trim().toLowerCase() : null,
    689.                             data: data
    690.                         };
    691.                         if (isNew) {
    692.                             item.start = null;
    693.                             item.end = null;
    694.                         }
    695.                         return item;
    696.                     }
    697.                     else {
    698.                         return null;
    699.                     }
    700.                 }
    701.                 /**
    702.                 * Build Vis Group.
    703.                 * @method buildVisGroup
    704.                 * @param {object} data Data group.
    705.                 */
    706.                 buildVisGroup(data, order) {
    707.                     return (data) ? {
    708.                         value: order,
    709.                         id: data[this.timelineSetting.GroupIdField] || data[this.timelineSetting.PropertyGroup],
    710.                         content: (this.timelineSetting.GroupContentTemplate) ? flexygo.utils.parser.recursiveCompile(data, this.timelineSetting.GroupContentTemplate) : data[this.timelineSetting.GroupDescripField] || data[this.timelineSetting.PropertyGroup],
    711.                         //title: data[this.timelineSetting.GroupDescripField] || data[this.timelineSetting.PropertyGroup],
    712.                         className: (this.timelineSetting.Advanced) ? data[this.timelineSetting.GroupClassNameField] : null,
    713.                         style: (this.timelineSetting.Advanced) ? data[this.timelineSetting.GroupStyleField] : null,
    714.                         data: data
    715.                         /* Not Implemented
    716.                         subgroupStack
    717.                         visible
    718.                         nestedGroups
    719.                         showNested
    720.                         */
    721.                     } : null;
    722.                 }
    723.                 /**
    724.                 * Object Actions.
    725.                 * @method objectActions
    726.                 * @param {flexygo.api.timeline.visTimelineItem} object item object.
    727.                 * @param {string} action action.
    728.                 */
    729.                 objectActions(object, action) {
    730.                     return new Promise((resolve, reject) => {
    731.                         try {
    732.                             let objectEntity = new flexygo.obj.Entity(this.timelineSetting.EntityConfiguration.ObjectName, (this.hasIdStructure(object.id.toString())) ? this.getObjectWhere(JSON.parse(object.id.toString())) : null);
    733.                             switch (action) {
    734.                                 case 'insert':
    735.                                 case 'edit':
    736.                                 case 'update':
    737.                                     if (!(object.end)) {
    738.                                         object.end = moment(object.start).add(this.timelineSetting.DefaultTime, 'minutes').format("YYYY-MM-DD HH:mm");
    739.                                     }
    740.                                     ;
    741.                                     if ((action === 'insert' && this.timelineSetting.OnInsertOpenNewWithDefaults) || action === 'edit') {
    742.                                         this.openObjectEdit(object, objectEntity).then(function (data) { resolve(data); }, function (error) { throw error; });
    743.                                     }
    744.                                     else {
    745.                                         if (objectEntity.read()) {
    746.                                             $.extend(true, objectEntity.data, { [this.timelineSetting.PropertyGroup]: this.timelineSetting.WithGroups && this.timelineSetting.PropertyGroup ? { Value: object.group } : undefined, [this.timelineSetting.PropertyStartDate]: { Value: moment(object.start).format("YYYY-MM-DD HH:mm") }, [this.timelineSetting.PropertyEndDate]: this.timelineSetting.PropertyEndDate ? { Value: object.end ? moment(object.end).format("YYYY-MM-DD HH:mm") : object.end } : undefined });
    747.                                             if ((action === 'insert') ? objectEntity.insert() : objectEntity.update()) {
    748.                                                 objectEntity.objectName = this.timelineSetting.EntityConfiguration.CollectionName;
    749.                                                 resolve(this.buildVisItem(objectEntity.getView((this.timelineSetting.Advanced) ? this.timelineSetting.ItemViewName : null, null, null, null, null, null, true)[0]));
    750.                                             }
    751.                                             else {
    752.                                                 resolve(null);
    753.                                             }
    754.                                         }
    755.                                         else {
    756.                                             resolve(null);
    757.                                         }
    758.                                     }
    759.                                     break;
    760.                                 case 'delete':
    761.                                     flexygo.msg.confirm(flexygo.localization.translate('flxeditgrid.deleteconfirm'), (result) => {
    762.                                         if (result) {
    763.                                             if (this.timelineSetting.OnDeleteFunction) {
    764.                                                 let delFun = new Function("entity", "timeline", this.timelineSetting.OnDeleteFunction);
    765.                                                 resolve((delFun.call(objectEntity, objectEntity, this)) ? object : null);
    766.                                             }
    767.                                             else {
    768.                                                 resolve((objectEntity.delete()) ? object : null);
    769.                                             }
    770.                                         }
    771.                                     });
    772.                                     break;
    773.                                 default:
    774.                                     resolve(null);
    775.                                     break;
    776.                             }
    777.                         }
    778.                         catch (ex) {
    779.                             reject(ex);
    780.                         }
    781.                     });
    782.                 }
    783.                 /**
    784.                 * Open Object Edit.
    785.                 * @method openObjectEdit
    786.                 * @param {flexygo.api.timeline.visTimelineItem} object item object.
    787.                 * @param {flexygo.obj.Entity} objectEntity object Entity.
    788.                 */
    789.                 openObjectEdit(object, objectEntity) {
    790.                     return new Promise((resolve, reject) => {
    791.                         try {
    792.                             flexygo.nav.openPage(this.timelineSetting.EventPageTypeId, objectEntity.objectName, objectEntity.objectWhere, JSON.stringify(Object.assign(this.defaults, { [this.timelineSetting.PropertyStartDate]: moment(object.start).format("YYYY-MM-DD HH:mm"), [this.timelineSetting.PropertyEndDate]: this.timelineSetting.PropertyEndDate ? object.end ? moment(object.end).format("YYYY-MM-DD HH:mm") : object.end : undefined, [this.timelineSetting.PropertyGroup]: this.timelineSetting.WithGroups && this.timelineSetting.PropertyGroup ? object.group : undefined })), 'modal');
    793.                             flexygo.events.on(this, 'entity', 'all', (e) => {
    794.                                 if (this === e.context && e.sender.objectName === objectEntity.objectName) {
    795.                                     flexygo.events.off(this, 'entity', 'all');
    796.                                     flexygo.events.off(this, 'dialog', 'closed');
    797.                                     if (e.type === 'deleted') {
    798.                                         resolve(null);
    799.                                         this.visTimeline.itemsData.remove(object.id);
    800.                                     }
    801.                                     else {
    802.                                         e.sender.objectName = this.timelineSetting.EntityConfiguration.CollectionName;
    803.                                         resolve(this.buildVisItem(e.sender.getView((this.timelineSetting.Advanced) ? this.timelineSetting.ItemViewName : null, null, null, null, null, null, true)[0]));
    804.                                     }
    805.                                     flexygo.nav.closePage($(`flx-edit[objectname="${objectEntity.objectName}"]`));
    806.                                 }
    807.                             });
    808.                             flexygo.events.on(this, 'dialog', 'closed', (e) => {
    809.                                 if (this === e.context && e.sender.objectname === objectEntity.objectName) {
    810.                                     flexygo.events.off(this, 'entity', 'all');
    811.                                     flexygo.events.off(this, 'dialog', 'closed');
    812.                                     resolve(null);
    813.                                 }
    814.                             });
    815.                         }
    816.                         catch (ex) {
    817.                             reject(ex);
    818.                         }
    819.                     });
    820.                 }
    821.                 /**
    822.                 * Get Object Where.
    823.                 * @method getObjectWhere
    824.                 * @param {Array} id id object.
    825.                 */
    826.                 getObjectWhere(id) {
    827.                     let where = ``;
    828.                     id.forEach((value, index) => {
    829.                         where += `[${this.timelineSetting.EntityConfiguration.TableName}].[${Object.keys(value)[0]}] = '${value[Object.keys(value)[0]]}'${(index < (id.length - 1)) ? ` AND ` : ``}`;
    830.                     });
    831.                     return where;
    832.                 }
    833.                 /**
    834.                 * Has id structure.
    835.                 * @method hasIdStructure
    836.                 * @param {string} id id object.
    837.                 */
    838.                 hasIdStructure(id) {
    839.                     try {
    840.                         if (isNaN(JSON.parse(id))) {
    841.                             return true;
    842.                         }
    843.                         else {
    844.                             return false;
    845.                         }
    846.                     }
    847.                     catch (e) {
    848.                         return false;
    849.                     }
    850.                 }
    851.                 /**
    852.                 * Has id structure.
    853.                 * @method hasIdStructure
    854.                 * @param {string} json JSON String
    855.                 */
    856.                 isJson(json) {
    857.                     try {
    858.                         JSON.parse(json);
    859.                     }
    860.                     catch (e) {
    861.                         return false;
    862.                     }
    863.                     return true;
    864.                 }
    865.                 /**
    866.                 * Check Editable Property.
    867.                 * @method checkEditableProperty
    868.                 * @param {string} valueJson JSON String
    869.                 */
    870.                 checkEditableProperty(valueJson) {
    871.                     let value;
    872.                     if (this.isJson(valueJson) && valueJson) {
    873.                         value = JSON.parse(valueJson);
    874.                         if (typeof (value) === 'boolean') {
    875.                             return true;
    876.                         }
    877.                         else if (typeof (value) === 'object') {
    878.                             for (const key of ['updateGroup', 'updateTime', 'remove']) {
    879.                                 if (key in value) {
    880.                                     return true;
    881.                                 }
    882.                             }
    883.                             return false;
    884.                         }
    885.                         else {
    886.                             return false;
    887.                         }
    888.                     }
    889.                     return false;
    890.                 }
    891.                 /**
    892.                 * Load filters
    893.                 * @method loadFilters
    894.                 */
    895.                 loadFilters() {
    896.                     if (this.searchSettings) {
    897.                         let pane = $(this.wcParentModule).find('.cntBodyHeader .filterPanel');
    898.                         let filter = $('<flx-filter></flx-filter>');
    899.                         let wcFilter = filter[0];
    900.                         if (pane.length == 0 && this.toolbar && Object.keys(this.toolbar).length > 0) {
    901.                             pane = $('<div class="filterPanel"/>');
    902.                             $(this.wcParentModule).find('.cntBodyHeader').append(pane);
    903.                         }
    904.                         pane.html(filter);
    905.                         if (wcFilter) {
    906.                             wcFilter.settings = this.searchSettings;
    907.                             wcFilter.key = this.timelineSetting.EntityConfiguration.ObjectName + '-' + this.moduleName;
    908.                             wcFilter.grid = this;
    909.                             wcFilter.init();
    910.                         }
    911.                     }
    912.                 }
    913.                 /**
    914.                * Establish webcomponent settings
    915.                * @method configure
    916.                */
    917.                 configure() {
    918.                     flexygo.nav.openPage('edit', 'sysTimeline_Setting', `[Timelines_Settings].[TimelineSettingName]='${this.timelineSetting.TimelineSettingName}'`, null, 'popup', true);
    919.                 }
    920.                 /**
    921.                 * Fires when element is attached to DOM
    922.                 * @method connectedCallback
    923.                 */
    924.                 connectedCallback() {
    925.                     let element = $(this);
    926.                     this.connected = true;
    927.                     this.moduleName = element.attr('ModuleName');
    928.                     this.objectName = element.attr('ObjectName');
    929.                     this.objectWhere = element.attr('ObjectWhere');
    930.                     if (element.attr('manualInit') != 'true') {
    931.                         this.init();
    932.                     }
    933.                 }
    934.                 /**
    935.                 * Fires when element is detached to DOM
    936.                 * @method disconnectedCallback
    937.                 */
    938.                 disconnectedCallback() {
    939.                     flexygo.events.off(this, 'entity', 'all');
    940.                     flexygo.events.off(this, 'dialog', 'closed');
    941.                     $(document).off('keydown.timeline keyup.timeline');
    942.                 }
    943.                 /**
    944.                 * Fires when the attribute value of the element is changed.
    945.                 * @method attributeChangedCallback
    946.                 */
    947.                 attributeChangedCallback(attrName, oldVal, newVal) {
    948.                     let needInit = false;
    949.                     if (attrName.toLowerCase() == 'modulename' && newVal) {
    950.                         this.moduleName = newVal;
    951.                         needInit = true;
    952.                     }
    953.                     else if (attrName.toLowerCase() == 'objectname' && newVal) {
    954.                         this.objectName = newVal;
    955.                         needInit = true;
    956.                     }
    957.                     else if (attrName.toLowerCase() == 'objectwhere' && newVal) {
    958.                         this.objectWhere = newVal;
    959.                         needInit = true;
    960.                     }
    961.                     if (this.connected && needInit) {
    962.                         this.init();
    963.                     }
    964.                 }
    965.             }
    966.             wc.FlxTimelineElement = FlxTimelineElement;
    967.             /**
    968.             * Library for the FlxTimelineProgressBar
    969.             *
    970.             * @class FlxTimelineProgressBar
    971.             * @constructor
    972.             * @return {FlxTimelineProgressBar} .
    973.             */
    974.             class FlxTimelineProgressBar extends HTMLElement {
    975.                 constructor() {
    976.                     //If a constructor is defined, is REQUIRED call the super constructor
    977.                     super();
    978.                     /**
    979.                     * Set if element has been connected to DOM
    980.                     * @property connected {boolean}
    981.                     */
    982.                     this.connected = false;
    983.                 }
    984.                 /**
    985.                 * Array of observed attributes. REQUIRED
    986.                 * @property observedAttributes {Array}
    987.                 */
    988.                 static get observedAttributes() {
    989.                     return ['color', 'percentage'];
    990.                 }
    991.                 /**
    992.                 * Init the webcomponent. REQUIRED.
    993.                 * @method init
    994.                 */
    995.                 init() {
    996.                     this.render();
    997.                 }
    998.                 /**
    999.                 * Refresh de webcomponent. REQUIRED.
    1000.                 * @method refresh
    1001.                 */
    1002.                 refresh() {
    1003.                     this.init();
    1004.                 }
    1005.                 /**
    1006.                 * Render HTML data.
    1007.                 * @method render
    1008.                 */
    1009.                 render() {
    1010.                     let element = $(this);
    1011.                     element.html(`<div class="progressbar-container">                
    1012.                             <div class="bar" style="width: ${this.percentage}%${(this.color) ? ';background-color:' + this.color : ''}; "> </div>
    1013.                             <div class="template" style="${(!this.percentage) ? 'color:#b31512' : ''}">${(this.percentage) ? (this.template.trim()) ? this.template : this.percentage + '%' : flexygo.localization.translate('flxtimeline.withoutpercentage')}</div>                       
    1014.                         </div>`);
    1015.                 }
    1016.                 /**
    1017.                 * Fires when element is attached to DOM
    1018.                 * @method connectedCallback
    1019.                 */
    1020.                 connectedCallback() {
    1021.                     let element = $(this);
    1022.                     if (!this.connected) {
    1023.                         this.template = element.html();
    1024.                     }
    1025.                     this.connected = true;
    1026.                     this.color = element.attr("color");
    1027.                     this.percentage = element.attr("percentage");
    1028.                     this.init();
    1029.                 }
    1030.                 /**
    1031.                 * Fires when the attribute value of the element is changed.
    1032.                 * @method attributeChangedCallback
    1033.                 */
    1034.                 attributeChangedCallback(attrName, oldVal, newVal) {
    1035.                     let needInit = false;
    1036.                     if (attrName.toLowerCase() == 'color' && newVal) {
    1037.                         this.color = newVal;
    1038.                         needInit = true;
    1039.                     }
    1040.                     else if (attrName.toLowerCase() == 'percentage' && newVal) {
    1041.                         this.percentage = newVal;
    1042.                         needInit = true;
    1043.                     }
    1044.                     if (this.connected && needInit) {
    1045.                         this.init();
    1046.                     }
    1047.                 }
    1048.             }
    1049.             wc.FlxTimelineProgressBar = FlxTimelineProgressBar;
    1050.         })(wc = ui.wc || (ui.wc = {}));
    1051.     })(ui = flexygo.ui || (flexygo.ui = {}));
    1052. })(flexygo || (flexygo = {}));
    1053. window.customElements.define('flx-timeline', flexygo.ui.wc.FlxTimelineElement);
    1054. window.customElements.define('flx-timeline-progressbar', flexygo.ui.wc.FlxTimelineProgressBar);
    1055. //# sourceMappingURL=flx-timeline.js.map
    1056.