From fc9020b6df6649a32cc319a860c807b18118e756 Mon Sep 17 00:00:00 2001 From: pipeline Date: Mon, 27 Mar 2023 10:53:18 +0000 Subject: [PATCH] v21.1.35 is released --- config.json | 3 +- index.html | 2 +- package.json | 3 +- sampleOrder.json | 12 +- src/accordion/keyboard-interaction.ts | 10 + src/arc-gauge/default.ts | 10 +- src/arc-gauge/sample.json | 5 - src/auto-complete/data-binding.ts | 2 +- src/auto-complete/highlight.html | 4 + .../accumulation-distribution-indicator.html | 9 +- .../accumulation-distribution-indicator.ts | 31 +- src/chart/area-negative-point.html | 7 +- src/chart/area-segments.html | 4 +- src/chart/area.ts | 6 +- src/chart/average-true-range-indicator.html | 9 +- src/chart/average-true-range-indicator.ts | 30 +- src/chart/axes-crossing.html | 15 +- src/chart/axes-crossing.ts | 7 +- src/chart/bollinger.html | 9 +- src/chart/bollinger.ts | 26 +- src/chart/box-and-whisker.html | 43 +- src/chart/box-and-whisker.ts | 71 +- src/chart/bubble.html | 4 +- src/chart/candle-stick.html | 9 +- src/chart/candle-stick.ts | 40 +- src/chart/category.html | 9 +- src/chart/category.ts | 23 +- src/chart/cross-hair.html | 10 +- src/chart/data-editing.html | 7 +- src/chart/data-editing.ts | 47 +- src/chart/data-label-template.html | 4 +- src/chart/data-label-template.ts | 1 + src/chart/date-time-category.html | 10 +- src/chart/date-time-category.ts | 20 +- src/chart/date-time.html | 7 +- src/chart/date-time.ts | 8 +- src/chart/donut.html | 9 +- src/chart/donut.ts | 85 +- src/chart/drill-down-pie.ts | 6 +- src/chart/empty-point.html | 9 +- src/chart/empty-point.ts | 9 +- src/chart/error-bar.html | 88 +- src/chart/error-bar.ts | 120 +- .../exponential-moving-average-indicator.html | 9 +- .../exponential-moving-average-indicator.ts | 26 +- src/chart/export.html | 4 +- src/chart/export.ts | 32 +- src/chart/financial-data.ts | 2974 ++++++- src/chart/hilo-open-close.html | 7 +- src/chart/hilo-open-close.ts | 31 +- src/chart/hilo.html | 8 +- src/chart/hilo.ts | 27 +- src/chart/histogram.html | 12 +- src/chart/histogram.ts | 8 +- src/chart/indexed-axis.html | 12 +- src/chart/indexed-axis.ts | 30 +- src/chart/inversed.html | 9 +- src/chart/inversed.ts | 12 +- src/chart/keyboard.html | 2 +- src/chart/line-segments.ts | 5 - src/chart/local-data.html | 10 +- src/chart/local-data.ts | 12 +- src/chart/logarithmic-scale.html | 9 +- src/chart/logarithmic-scale.ts | 4 +- src/chart/marker-chart.html | 8 +- src/chart/marker-chart.ts | 64 +- src/chart/momentum.html | 8 +- src/chart/momentum.ts | 29 +- ...rage-convergence-divergence-indicator.html | 8 +- ...verage-convergence-divergence-indicator.ts | 32 +- src/chart/multi-level-label.html | 7 +- src/chart/multi-series-chart.html | 8 +- src/chart/multi-series-chart.ts | 31 +- src/chart/multiple-axes.ts | 32 +- src/chart/multiple-axis.html | 17 +- src/chart/multiple-axis.ts | 12 +- src/chart/numeric.html | 9 +- src/chart/numeric.ts | 17 +- src/chart/overview.ts | 10 +- src/chart/pareto.html | 9 +- src/chart/pareto.ts | 16 +- src/chart/pie-annotation.html | 299 +- src/chart/pie-annotation.ts | 156 +- src/chart/polar-area.html | 10 +- src/chart/polar-area.ts | 12 +- src/chart/polar-column.html | 11 +- src/chart/polar-column.ts | 21 +- src/chart/polar-line.html | 20 +- src/chart/polar-line.ts | 19 +- src/chart/polar-range-column.html | 10 +- src/chart/polar-range-column.ts | 12 +- src/chart/polar-scatter.html | 11 +- src/chart/polar-scatter.ts | 27 +- src/chart/polar-spline.html | 2 +- src/chart/polar-spline.ts | 5 +- src/chart/polar-stacking-area.html | 12 +- src/chart/polar-stacking-area.ts | 26 +- src/chart/polar-stacking-column.html | 32 +- src/chart/polar-stacking-column.ts | 39 +- src/chart/print.html | 11 +- src/chart/print.ts | 27 +- src/chart/range-area.html | 2 +- src/chart/range-selection.html | 9 +- src/chart/range-selection.ts | 1 + src/chart/range-step-area.html | 29 + src/chart/range-step-area.ts | 92 + .../relative-strength-index-indicator.html | 8 +- .../relative-strength-index-indicator.ts | 35 +- src/chart/remote-data.html | 6 +- src/chart/remote-data.ts | 33 +- src/chart/right-to-left.html | 6 +- src/chart/right-to-left.ts | 11 +- src/chart/sample.json | 303 +- src/chart/scatter-plot.html | 4 +- src/chart/scatter-plot.ts | 2 - src/chart/selection.html | 6 +- src/chart/semi-pie.html | 2 +- src/chart/semi-pie.ts | 2 +- .../simple-moving-average-indicator.html | 8 +- src/chart/simple-moving-average-indicator.ts | 28 +- src/chart/smart-axis-labels.html | 12 +- src/chart/smart-axis-labels.ts | 6 +- src/chart/spline-range-area.html | 6 +- src/chart/stacked-area-100.html | 2 +- src/chart/stacked-step-area.html | 7 +- src/chart/step-area.html | 2 +- src/chart/step-area.ts | 5 +- src/chart/stochastic.html | 8 +- src/chart/stochastic.ts | 39 +- src/chart/strip-line-recurrence.html | 15 +- src/chart/strip-line-recurrence.ts | 9 +- src/chart/strip-line.html | 34 +- src/chart/strip-line.ts | 150 +- src/chart/tooltip-template.html | 11 +- src/chart/tooltip-template.ts | 6 +- src/chart/trackball.html | 12 +- src/chart/trackball.ts | 15 +- src/chart/trend-lines.html | 90 +- src/chart/trend-lines.ts | 122 +- .../triangular-moving-average-indicator.html | 8 +- .../triangular-moving-average-indicator.ts | 30 +- src/chart/vertical.html | 5 +- src/chart/vertical.ts | 72 +- src/chart/waterfall.html | 8 +- src/chart/waterfall.ts | 29 +- src/chart/zooming.html | 9 +- src/chart/zooming.ts | 16 +- src/combo-box/data-binding.ts | 2 +- src/common/index.ts | 5 +- src/common/sampleOrder.json | 4 +- src/dashboard-layout/properties.ts | 11 +- src/diagram/hierarchical-model.html | 3 + src/diagram/hierarchical-model.ts | 16 + src/dialog/dialog-contents-via-ajax.html | 4 +- src/document-editor/auto-save.ts | 5 +- src/document-editor/bullets-and-numbering.ts | 6 +- src/document-editor/character-formatting.ts | 5 +- src/document-editor/chart.ts | 5 +- src/document-editor/comments.ts | 5 +- src/document-editor/custom-context-menu.ts | 5 +- .../data-bullets-and-numbering.json | 784 +- .../data-character-formatting.json | 716 +- src/document-editor/data-chart.json | 5254 +------------ src/document-editor/data-comments.json | 2 +- src/document-editor/data-default.json | 2174 +----- .../data-document-protection.json | 1448 +--- src/document-editor/data-form-fields.json | 2 +- .../data-headers-and-footers.json | 1822 +---- .../data-links-and-bookmarks.json | 2 +- src/document-editor/data-mail-merge.json | 4008 +--------- .../data-multiple-columns.json | 1 + src/document-editor/data-notes.json | 2721 +------ .../data-paragraph-formatting.json | 2 +- src/document-editor/data-print.json | 3117 +------- src/document-editor/data-right-to-left.json | 1394 +--- .../data-section-formatting.json | 5612 +------------- src/document-editor/data-styles.json | 484 +- .../data-table-formatting.json | 6825 +---------------- .../data-table-of-contents.json | 1478 +--- .../data-toolbar-customization.json | 1423 +--- src/document-editor/data-track-changes.json | 2409 +----- src/document-editor/data-web-layout.json | 3117 +------- src/document-editor/default.ts | 5 +- src/document-editor/document-loader.ts | 2 +- src/document-editor/document-protection.ts | 5 +- src/document-editor/form-fields.ts | 5 +- src/document-editor/headers-and-footers.ts | 5 +- src/document-editor/links-and-bookmarks.ts | 6 +- src/document-editor/mail-merge.ts | 7 +- src/document-editor/multiple-columns.html | 86 + src/document-editor/multiple-columns.ts | 28 + src/document-editor/notes.ts | 5 +- src/document-editor/paragraph-formatting.ts | 5 +- src/document-editor/print.ts | 2 +- src/document-editor/right-to-left.ts | 5 +- src/document-editor/sample.json | 119 +- src/document-editor/section-formatting.ts | 5 +- src/document-editor/styles.ts | 5 +- src/document-editor/table-formatting.ts | 5 +- src/document-editor/table-of-contents.ts | 5 +- src/document-editor/toolbar-customization.ts | 5 +- src/document-editor/track-changes.ts | 5 +- src/document-editor/web-layout.ts | 5 +- src/drop-down-list/data-binding.ts | 2 +- src/drop-down-list/inline.html | 7 +- src/file-manager/amazon-s3-provider.ts | 5 + src/file-manager/azure-service.ts | 5 + src/file-manager/custom-thumbnail.ts | 5 + src/file-manager/default.html | 73 +- src/file-manager/default.ts | 49 +- src/file-manager/drag-drop.ts | 5 + src/file-manager/firebase.ts | 7 +- src/file-manager/ftp-file-provider.ts | 5 + .../ibm-cos-node-file-provider.ts | 5 + src/file-manager/nodejs-file-provider.ts | 5 + src/file-manager/overview.ts | 20 +- src/file-manager/sample.json | 9 +- src/file-manager/sql-server-provider.ts | 5 + src/file-manager/virtualization.html | 7 +- src/file-manager/virtualization.ts | 23 +- src/gantt/remote-data.ts | 2 +- src/gantt/resource-multi-taskbar.html | 19 +- src/gantt/resource-multi-taskbar.ts | 28 +- src/gantt/sample.json | 3 +- src/grid/column-resize.html | 31 +- src/grid/column-resize.ts | 15 +- src/grid/detail-template.html | 1 + src/grid/filter-menu.html | 41 +- src/grid/filter.html | 41 +- src/grid/flexible-data.html | 210 + src/grid/flexible-data.ts | 223 + src/grid/foreign-key.ts | 2 - src/grid/grid-overview.html | 29 +- src/grid/grid-overview.ts | 30 +- src/grid/keyboard-navigation.ts | 2 + src/grid/live-data.html | 266 + src/grid/live-data.ts | 1363 ++++ src/grid/loading-animation.html | 10 +- src/grid/loading-animation.ts | 2 +- src/grid/remote-data.ts | 7 +- src/grid/sample.json | 12 +- src/heatmap-chart/empty-points.html | 2 +- src/heatmap-chart/empty-points.ts | 2 +- src/image-editor/default.html | 3 +- src/image-editor/default.ts | 10 + src/image-editor/locale.json | 91 +- src/image-editor/profile-picture.html | 5 +- src/kanban/remote-data.ts | 4 +- src/mention/multiple-list.ts | 2 +- src/message/customization.html | 2 +- src/message/default.html | 2 +- src/message/icons.html | 2 +- src/message/variants.html | 2 +- src/multi-select/data-binding.ts | 2 +- src/pdfviewer/annotations.ts | 2 +- src/pdfviewer/custom-toolbar.ts | 2 +- src/pdfviewer/default.ts | 2 +- src/pdfviewer/form-filling.ts | 2 +- src/pdfviewer/formdesigner.ts | 2 +- src/pdfviewer/hand-written.ts | 2 +- src/pdfviewer/right-to-left.ts | 6 +- src/pivot-table/Drill-Down.html | 6 - src/pivot-table/custom-sorting.ts | 2 +- src/pivot-table/filtering.ts | 2 +- src/pivot-table/grouping.ts | 2 +- src/pivot-table/hyper-link.ts | 6 +- src/pivot-table/label-filtering.ts | 2 +- src/pivot-table/overview.ts | 16 +- src/pivot-table/sample.json | 13 +- src/pivot-table/value-filtering.ts | 2 +- src/pivot-table/virtual-scrolling.ts | 2 +- src/progress-bar/linear.html | 8 +- src/progress-bar/linear.ts | 29 + src/progress-bar/progress_segment.ts | 3 +- src/progress-bar/sample.json | 21 +- src/progress-bar/tooltip.html | 54 + src/progress-bar/tooltip.ts | 107 + src/range-navigator/date-time.ts | 5 - src/rating/sample.json | 3 +- src/rating/template.ts | 3 +- src/ribbon/default.html | 187 + src/ribbon/default.ts | 542 ++ src/ribbon/resize.html | 200 + src/ribbon/resize.ts | 536 ++ src/ribbon/sample.json | 27 + src/ribbon/simplified.html | 187 + src/ribbon/simplified.ts | 543 ++ src/rich-text-editor/format-painter.html | 112 + src/rich-text-editor/format-painter.ts | 42 + src/rich-text-editor/insert-emoticons.html | 3 - src/rich-text-editor/mention-integration.html | 4 +- src/rich-text-editor/online-html-editor.html | 3 - src/rich-text-editor/online-html-editor.ts | 11 +- src/rich-text-editor/resize-editor.ts | 2 +- src/rich-text-editor/sample.json | 23 +- src/rich-text-editor/smart-suggestion.html | 280 + src/rich-text-editor/smart-suggestion.ts | 211 + src/rich-text-editor/tribute.html | 116 - src/rich-text-editor/tribute.ts | 38 - src/schedule/context-menu.ts | 5 + src/schedule/date-header-template.html | 4 + src/schedule/external-drag-drop.ts | 5 + src/schedule/overview.html | 825 +- src/schedule/overview.ts | 309 +- src/schedule/remote-data.ts | 2 +- src/schedule/sample.json | 2 - src/slider/azure-pricing.html | 22 + src/speed-dial/styles.html | 30 +- src/speed-dial/styles.ts | 56 +- src/spreadsheet/chart.ts | 4 +- src/spreadsheet/conditional-formatting.ts | 4 +- src/spreadsheet/default.ts | 4 +- src/spreadsheet/freeze-pane.ts | 4 +- src/spreadsheet/image.ts | 4 +- src/spreadsheet/locale.json | 55 +- src/spreadsheet/protect-sheet.ts | 4 +- src/spreadsheet/remote-data-binding.ts | 6 +- src/spreadsheet/sorting-and-filtering.ts | 4 +- src/tab/drag-and-drop.html | 8 + src/toolbar/sample.json | 5 +- src/tree-grid/adaptive.ts | 2 +- src/tree-grid/custom-aggregate.ts | 5 +- src/tree-grid/custom-context-menu.ts | 2 - src/tree-grid/data-source.ts | 117 +- src/tree-grid/inline-editing.ts | 2 +- src/tree-grid/loading-animation.ts | 2 +- src/tree-grid/remote-data.ts | 2 +- src/tree-grid/sample.json | 5 +- src/tree-grid/treegrid-overview.ts | 2 +- src/uploader/file-upload-with-forms.html | 13 +- styles/index.css | 8 +- 331 files changed, 11179 insertions(+), 48088 deletions(-) create mode 100644 src/chart/range-step-area.html create mode 100644 src/chart/range-step-area.ts create mode 100644 src/document-editor/data-multiple-columns.json create mode 100644 src/document-editor/multiple-columns.html create mode 100644 src/document-editor/multiple-columns.ts create mode 100644 src/grid/flexible-data.html create mode 100644 src/grid/flexible-data.ts create mode 100644 src/grid/live-data.html create mode 100644 src/grid/live-data.ts create mode 100644 src/progress-bar/tooltip.html create mode 100644 src/progress-bar/tooltip.ts create mode 100644 src/ribbon/default.html create mode 100644 src/ribbon/default.ts create mode 100644 src/ribbon/resize.html create mode 100644 src/ribbon/resize.ts create mode 100644 src/ribbon/sample.json create mode 100644 src/ribbon/simplified.html create mode 100644 src/ribbon/simplified.ts create mode 100644 src/rich-text-editor/format-painter.html create mode 100644 src/rich-text-editor/format-painter.ts create mode 100644 src/rich-text-editor/smart-suggestion.html create mode 100644 src/rich-text-editor/smart-suggestion.ts delete mode 100644 src/rich-text-editor/tribute.html delete mode 100644 src/rich-text-editor/tribute.ts diff --git a/config.json b/config.json index 661d296e..53fc3ac0 100644 --- a/config.json +++ b/config.json @@ -176,6 +176,7 @@ "workflow", "form-validator", "signature", - "multiline-textbox" + "multiline-textbox", + null ] } \ No newline at end of file diff --git a/index.html b/index.html index 612b2685..74466c2e 100644 --- a/index.html +++ b/index.html @@ -432,7 +432,7 @@
-
65+ high-performance and responsive UI components
+
80+ high-performance and responsive UI components
diff --git a/package.json b/package.json index 97589add..89d65d0e 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@syncfusion/ej2-samples", - "version": "20.4.38", + "version": "21.1.35", "description": "Samples for Syncfusion Essential JS 2", "author": "Syncfusion Inc.", "license": "SEE LICENSE IN license", @@ -50,6 +50,7 @@ "@types/marked": "^0.3.0", "@types/codemirror": "0.0.56", "@types/es6-promise": "0.0.28", + "@types/node": "12.12.25", "hasher": "^1.2.0", "moment-timezone": "0.5.13", "tributejs": "^3.7.3" diff --git a/sampleOrder.json b/sampleOrder.json index d0b3454c..2730ce41 100644 --- a/sampleOrder.json +++ b/sampleOrder.json @@ -509,7 +509,7 @@ } }, "gantt": { - "ControlName": "Gantt", + "ControlName": "Gantt Chart", "Samples": { "default": "Default Functionalities", "local-data": "Local Data", @@ -903,6 +903,14 @@ "navigation": "Keyboard Navigations" } }, + "ribbon": { + "ControlName": "Ribbon", + "Samples": { + "default":"Default Functionalities", + "simplified": "Simplified Mode", + "resize": "Ribbon Resizing" + } + }, "rich-text-editor": { "ControlName": "Rich Text Editor", "Samples": { @@ -1265,4 +1273,4 @@ "custom-drop-area": "Custom Drop Area" } } -} +} \ No newline at end of file diff --git a/src/accordion/keyboard-interaction.ts b/src/accordion/keyboard-interaction.ts index ee80c469..d0177ec6 100644 --- a/src/accordion/keyboard-interaction.ts +++ b/src/accordion/keyboard-interaction.ts @@ -16,4 +16,14 @@ import { loadCultureFiles } from '../common/culture-loader'; }); // tslint:enable:max-line-length acrdnObj.appendTo('#Accordion_keyboard_interaction'); //Render initialized Accordion component + + //Focus the Accordion header (alt+j) key combination + document.body.addEventListener('keydown', (e: KeyboardEvent) => { + let accordionElement: HTMLElement = document.querySelector( + '#Accordion_keyboard_interaction .e-acrdn-header' + ); + if (e.altKey && e.keyCode === 74 && accordionElement) { + accordionElement.focus(); + } + }); }; \ No newline at end of file diff --git a/src/arc-gauge/default.ts b/src/arc-gauge/default.ts index e46c60f9..7db418f7 100644 --- a/src/arc-gauge/default.ts +++ b/src/arc-gauge/default.ts @@ -137,7 +137,7 @@ let circulargauge: CircularGauge = new CircularGauge({ color: '#7a7f82', startWidth: 1, endWidth: 1, - radius: '90%', + radius: '89%', }, { start: 0, @@ -153,7 +153,7 @@ let circulargauge: CircularGauge = new CircularGauge({ color: '#7a7f82', startWidth: 1, endWidth: 1, - radius: '76%', + radius: '75%', }, { start: 0, @@ -169,7 +169,7 @@ let circulargauge: CircularGauge = new CircularGauge({ color: '#7a7f82', startWidth: 1, endWidth: 1, - radius: '63%', + radius: '61%', }, { start: 0, @@ -185,7 +185,7 @@ let circulargauge: CircularGauge = new CircularGauge({ color: '#7a7f82', startWidth: 1, endWidth: 1, - radius: '49%', + radius: '47%', }, { start: 0, @@ -201,7 +201,7 @@ let circulargauge: CircularGauge = new CircularGauge({ color: '#7a7f82', startWidth: 1, endWidth: 1, - radius: '35%', + radius: '34%', }, ], pointers: [], diff --git a/src/arc-gauge/sample.json b/src/arc-gauge/sample.json index 1d036a82..90af5eb5 100644 --- a/src/arc-gauge/sample.json +++ b/src/arc-gauge/sample.json @@ -2,34 +2,29 @@ "name": "Arc Gauge", "directory": "arc-gauge", "category": "Data Visualization", - "type":"new", "ftName": "arcgauge", "samples": [ { "url": "default", "name": "Default Functionalities", - "type":"new", "description": "This Essential JS2 Arc Gauge demo shows the gauge's basic rendering.", "category": "Arc Gauge" }, { "url": "customer-satisfaction-score", "name": "Customer Satisfaction Score", - "type":"new", "description": "This Essential JS2 Arc Gauge demo shows how the gauge can be customized to represent a customer satisfaction score scenario.", "category": "Arc Gauge" }, { "url": "key-performance-indicator", "name": "Key Performance Indicator", - "type":"new", "description": "This Essential JS2 Arc Gauge demo shows how the gauge can be customized to represent a key performance indicator scenario.", "category": "Arc Gauge" }, { "url": "patterns", "name": "Patterns", - "type":"new", "description": "This Essential JS2 Arc Gauge demo shows how the gauge can be rendered in many ways to demonstrate different user interfaces by customizing its axis, range, pointer, etc.", "category": "Arc Gauge" } diff --git a/src/auto-complete/data-binding.ts b/src/auto-complete/data-binding.ts index bed59e11..7ab72802 100644 --- a/src/auto-complete/data-binding.ts +++ b/src/auto-complete/data-binding.ts @@ -14,7 +14,7 @@ import * as data from './dataSource.json'; let atcObj1: AutoComplete = new AutoComplete({ // bind the DataManager instance to dataSource property dataSource: new DataManager({ - url: 'https://ej2services.syncfusion.com/production/web-services/api/Employees', + url: 'https://ej2services.syncfusion.com/js/development/api/Employees', adaptor: new WebApiAdaptor, crossDomain: true }), diff --git a/src/auto-complete/highlight.html b/src/auto-complete/highlight.html index feb24897..aea19ea9 100644 --- a/src/auto-complete/highlight.html +++ b/src/auto-complete/highlight.html @@ -40,5 +40,9 @@ width: 50%; padding-left: 10px; } + + .e-dropdownbase .e-list-item .e-highlight { + color: red; + } \ No newline at end of file diff --git a/src/chart/accumulation-distribution-indicator.html b/src/chart/accumulation-distribution-indicator.html index 09b4fc67..e4bbd5ec 100644 --- a/src/chart/accumulation-distribution-indicator.html +++ b/src/chart/accumulation-distribution-indicator.html @@ -3,16 +3,15 @@

- This sample illustrates a stock chart with candle series and an accumulation distribution indicator. Trackball shows the information about the stock and signal value of a day. + This sample illustrates a chart with candle series and an accumulation distribution indicator. The trackball shows information about the stock rates and signal values each day.

- In this example, you can see how to render and configure the Accumulation Distribution Indicator. You can use border, - fill properties to customize the area. + In this example, you can see how to render and configure an accumulation distribution indicator. This uses volume and price to identify whether stock is accumulated or distributed. It also identifies divergences between the stock price and volume flow.

- Tooltip is enabled in this example, to see the tooltip in action, hover a point or tap on a point in touch enabled devices. + Tooltip is enabled in this example, to see the tooltip in action, hover a point or tap on a point in touch enabled devices.


Injecting Module

@@ -22,7 +21,7 @@

More information on the Accumulation Distribution Indicator can be found in this - documentation section. + documentation section.

\ No newline at end of file diff --git a/src/chart/axes-crossing.ts b/src/chart/axes-crossing.ts index d00a9290..a2d43222 100644 --- a/src/chart/axes-crossing.ts +++ b/src/chart/axes-crossing.ts @@ -1,8 +1,8 @@ import { loadCultureFiles } from '../common/culture-loader'; import { DropDownList } from '@syncfusion/ej2-dropdowns'; import { NumericTextBox } from '@syncfusion/ej2-inputs'; -import { Chart, LineSeries, ScatterSeries, SplineSeries, Tooltip, Legend, ILoadedEventArgs, ChartTheme } from '@syncfusion/ej2-charts'; -Chart.Inject(LineSeries, ScatterSeries, SplineSeries, Tooltip, Legend); +import { Chart, LineSeries, ScatterSeries, SplineSeries, Tooltip, Legend, ILoadedEventArgs, ChartTheme, Highlight } from '@syncfusion/ej2-charts'; +Chart.Inject(LineSeries, ScatterSeries, SplineSeries, Tooltip, Legend, Highlight); /** * Axes Crossing Sample @@ -56,7 +56,7 @@ Chart.Inject(LineSeries, ScatterSeries, SplineSeries, Tooltip, Legend); { x: -6, y: 2 }, { x: -3, y: -4 }, { x: 1.5, y: 3.5 }, { x: 6, y: 4.5 }, ], fill: 'Red', name: 'Data Points', xName: 'x', width: 2, - yName: 'y', marker: { visible: false, width: 12, height: 12 } + yName: 'y', marker: { visible: false, width: 7, height: 7 } } ], load: (args: ILoadedEventArgs) => { @@ -66,6 +66,7 @@ Chart.Inject(LineSeries, ScatterSeries, SplineSeries, Tooltip, Legend); selectedTheme.slice(1)).replace(/-dark/i, 'Dark').replace(/contrast/i,  'Contrast'); }, tooltip: { enable: true }, + legendSettings: { enableHighlight: true }, title: 'Spline Interpolation', }); chart.appendTo('#container'); diff --git a/src/chart/bollinger.html b/src/chart/bollinger.html index 34c81974..df10dc06 100644 --- a/src/chart/bollinger.html +++ b/src/chart/bollinger.html @@ -3,16 +3,15 @@

- This sample illustrates a stock chart with candle series and a Bollinger band indicator. - Trackball shows the information about the stock, signalline, upperline, and lowerline value of a day. + This sample illustrates a chart with candle series and a Bollinger band indicator. The trackball shows information about the stock, signal line, upper line, and lower line values each day.

- In this example, you can see how to render and configure the BollingerBands type Indicator. + In this example, you can see how to render and configure a Bollinger band indicator. This indicator shows the upper and lower limits of normal price movements based on the standard deviation of prices. The bands offer insights into price and volatility.

- Tooltip is enabled in this example, to see the tooltip in action, hover a point or tap on a point in touch enabled devices. + Tooltip is enabled in this example, to see the tooltip in action, hover a point or tap on a point in touch enabled devices.


Injecting Module

@@ -22,7 +21,7 @@

More information on the BollingerIndicator can be found in this - documentation section. + documentation section.

\ No newline at end of file diff --git a/src/chart/indexed-axis.ts b/src/chart/indexed-axis.ts index 3b7085cf..3cce228d 100644 --- a/src/chart/indexed-axis.ts +++ b/src/chart/indexed-axis.ts @@ -4,7 +4,8 @@ import { Legend, ILoadedEventArgs, ChartTheme, DataLabel } from '@syncfusion/ej2-charts'; import { Browser } from '@syncfusion/ej2/base'; -Chart.Inject(ColumnSeries, LineSeries, Category, Legend, DataLabel); +import { Tooltip } from '@syncfusion/ej2/charts'; +Chart.Inject(ColumnSeries, LineSeries, Category, Legend, DataLabel, Tooltip); /** * Sample for Indexed Category Axis @@ -19,18 +20,17 @@ Chart.Inject(ColumnSeries, LineSeries, Category, Legend, DataLabel); isIndexed: true, labelRotation: Browser.isDevice ? -45 : 0, labelIntersectAction: Browser.isDevice ? 'None' : 'Rotate45', - majorTickLines: {width : 0}, - minorTickLines: {width: 0} + majorTickLines: { width: 0 }, crosshairTooltip: { enable: true } }, //Initializing Primary Y Axis primaryYAxis: { - labelFormat: '{value}%' + labelFormat: '{value}%', majorTickLines: { width: 0 } }, chartArea: { - border: { + border: { width: 0 } }, @@ -39,11 +39,11 @@ Chart.Inject(ColumnSeries, LineSeries, Category, Legend, DataLabel); { type: 'Column', dataSource: [ - { x: 'Myanmar', y: 7.3 }, - { x: 'India', y: 7.9 }, - { x: 'Bangladesh', y: 6.8 }, - { x: 'Cambodia', y: 7.0 }, - { x: 'China', y: 6.9 } + { x: "India", y: 7.9 }, + { x: "Myanmar", y: 7.3 }, + { x: "Bangladesh", y: 6.0 }, + { x: "Cambodia", y: 7.0 }, + { x: "China", y: 6.9 }, ], xName: 'x', width: 2, marker: { visible: false, height: 10, width: 10, dataLabel: { visible: true, position: 'Top', font: { size : Browser.isDevice ? '8px' : '11px'}}}, yName: 'y', name: '2015', @@ -51,11 +51,11 @@ Chart.Inject(ColumnSeries, LineSeries, Category, Legend, DataLabel); { type: 'Column', dataSource: [ - { x: 'Poland', y: 2.7 }, - { x: 'Australia', y: 2.5 }, - { x: 'Singapore', y: 2.0 }, - { x: 'Canada', y: 1.4 }, - { x: 'Germany', y: 1.8 } + { x: "Australia", y: 2.5 }, + { x: "Poland", y: 2.7 }, + { x: "Singapore", y: 2.0 }, + { x: "Canada", y: 1.4 }, + { x: "Germany", y: 1.8 }, ], xName: 'x', width: 2, marker: { visible: false, height: 10, width: 10, dataLabel: { visible: true, position: 'Top', font: { size : Browser.isDevice ? '8px' : '11px'}}}, yName: 'y', name: '2016', diff --git a/src/chart/inversed.html b/src/chart/inversed.html index bd725cb3..e20d5c1b 100644 --- a/src/chart/inversed.html +++ b/src/chart/inversed.html @@ -5,21 +5,20 @@

- This sample illustrates inversed axis in chart to plot exchange rate over a period. + This sample uses an inverse axis in a chart to plot an exchange rate over a period of time.

- In this example, you can see how to inverse an axis in chart. Here both the X and Y axis are inversed using isInversed property. + In this example, you can see how to invert the axis of the chart. Here, both X and Y axis are inverse by setting the isInversed property in axis to true.

-

DataLabel are used to represent individual data and its value.

- Tooltip is enabled in this example, to see the tooltip in action, hover a point or tap on a point in touch enabled devices. + Tooltip is enabled in this example, to see the tooltip in action, hover a point or tap on a point in touch enabled devices.


More information on inversed axis can be found in this - documentation section. + documentation section.

\ No newline at end of file + #gradient-chart stop { + stop-color: rgb(247, 206, 105, 0.5); + } + .chart-gradient stop[offset="0"] { + stop-opacity: 0.9; + } + .chart-gradient stop[offset="1"] { + stop-opacity: 0.3; + } + div[id*=_Annotation_3] { + transform: translate(0%, -50%) !important; + } + ellipse[id*=_Trackball_0] { + fill: rgb(247, 206, 105) !important; + stroke: rgb(247, 206, 105,0.5) !important; + } + ellipse[id*=_Trackball_1] { + fill: rgb(247, 206, 105) !important; + stroke-width: 1 !important; + stroke: white !important; + } + .e-view.highcontrast .box-bottom,.e-view.tailwind .box-bottom, .e-view.fluent .box-bottom,.e-view.material .box-bottom, .e-view.bootstrap .box-bottom,.e-view.bootstrap5 .box-bottom,.e-view.bootstrap4 .box-bottom, .e-view.fabric .box-bottom,.e-view.highcontrast .first-box-bottom, + .e-view.tailwind .first-box-bottom, .e-view.fluent .first-box-bottom,.e-view.material .first-box-bottom,.e-view.bootstrap .first-box-bottom, .e-view.bootstrap5 .first-box-bottom, .e-view.bootstrap4 .first-box-bottom ,.e-view.fabric .first-box-bottom, .e-view.highcontrast .first-box-bottom, + .e-view.tailwind .first-box-bottom, .e-view.fluent .second-box-bottom,.e-view.material .second-box-bottom,.e-view.bootstrap .second-box-bottom, .e-view.bootstrap5 .second-box-bottom,.e-view.bootstrap4 .second-box-bottom, .e-view.fabric .second-box-bottom, .e-view.highcontrast .third-box-bottom, + .e-view.tailwind .first-box-bottom, .e-view.fluent .third-box-bottom,.e-view.material .third-box-bottom,.e-view.bootstrap .third-box-bottom,.e-view.bootstrap5 .third-box-bottom,.e-view.bootstrap4 .third-box-bottom,.e-view.fabric .third-box-bottom,.e-view.highcontrast .box-left, + .e-view.material .first-box-bottom,.e-view.tailwind .first-box-bottom, .e-view.fluent .box-left,.e-view.bootstrap .box-left, .e-view.bootstrap5 .box-left, .e-view.bootstrap4 .box-left,.e-view.fabric .box-left { + position: relative; + background: #fdf7e7; + border: 1.5px solid black; + padding: 2px 3px 2px 3px; + border-radius: 0.2em; + font-size: 12px; + color: 'black' + } + .e-view.highcontrast .box-bottom,.e-view.material-dark .box-bottom,.e-view.tailwind-dark .box-bottom, .e-view.fluent-dark .box-bottom, .e-view.bootstrap-dark .box-bottom,.e-view.bootstrap5-dark .box-bottom,.e-view.fabric-dark .box-bottom,.e-view.highcontrast .first-box-bottom, + .e-view.material-dark .first-box-bottom,.e-view.tailwind-dark .first-box-bottom, .e-view.fluent-dark .first-box-bottom,.e-view.bootstrap-dark .first-box-bottom, .e-view.bootstrap5-dark .first-box-bottom ,.e-view.fabric-dark .first-box-bottom, .e-view.highcontrast .second-box-bottom, + .e-view.material-dark .second-box-bottom, .e-view.fluent-dark .second-box-bottom,.e-view.bootstrap-dark .second-box-bottom, .e-view.bootstrap5-dark .second-box-bottom, .e-view.fabric-dark .second-box-bottom, .e-view.highcontrast .third-box-bottom, + .e-view.material-dark .third-box-bottom, .e-view.fluent-dark .third-box-bottom,.e-view.bootstrap-dark .third-box-bottom,.e-view.bootstrap5-dark .third-box-bottom,.e-view.fabric-dark .third-box-bottom,.e-view.highcontrast .box-left, + .e-view.material-dark .box-left, .e-view.fluent-dark .box-left,.e-view.bootstrap-dark .box-left, .e-view.bootstrap5-dark .box-left, .e-view.fabric-dark .box-left { + position: relative; + background: black; + border: 1.5px solid black; + padding: 2px 3px 2px 3px; + border-radius: 0.2em; + font-size: 12px; + color: 'white' + } + .box-bottom:after, .box-bottom:before, .first-box-bottom:after, .first-box-bottom:before, + .second-box-bottom:after, .second-box-bottom:before, .third-box-bottom:after, .third-box-bottom:before { + bottom: 100%; + border: solid transparent; + content: ""; + position: absolute; + } + .e-view.highcontrast .box-bottom:after, .e-view.tailwind .box-bottom:after,.e-view.fluent .box-bottom:after,.e-view.material .box-bottom:after,.e-view.bootstrap .box-bottom:after,.e-view.bootstrap5 .box-bottom:after, .e-view.bootstrap4 .box-bottom:after, .e-view.fabric .box-bottom:after { + border-color: transparent; + border-width: 6.2px; + left: 50%; + margin-left: -6.1px; + margin-bottom: -1px; + border-bottom-color: #fdf7e7; + } + .e-view.highcontrast .box-bottom:after,.e-view.tailwind-dark .box-bottom:after,.e-view.fluent-dark .box-bottom:after,.e-view.material-dark .box-bottom:after,.e-view.bootstrap-dark .box-bottom:after,.e-view.bootstrap5-dark .box-bottom:after, .e-view.bootstrap4-dark .box-bottom:after, .e-view.fabric-dark .box-bottom:after { + border-color: transparent; + border-width: 6.2px; + left: 50%; + margin-left: -6.1px; + margin-bottom: -1px; + border-bottom-color: black; + } + .box-bottom:before { + border-color: transparent; + border-bottom-color: black; + border-width: 7px; + left: 50%; + margin-left: -7px; + margin-bottom: 0.5px; + } + .e-view.highcontrast .first-box-bottom:after,.e-view.tailwind .first-box-bottom:after,.e-view.fluent .first-box-bottom:after,.e-view.material .first-box-bottom:after,.e-view.bootstrap .first-box-bottom:after,.e-view.bootstrap5 .first-box-bottom:after,.e-view.bootstrap4 .first-box-bottom:after, .e-view.fabric .first-box-bottom:after { + border-color: transparent; + border-width: 6.2px; + left: 50%; + margin-left: -6.1px; + margin-bottom: -1px; + border-bottom-color: #fdf7e7; + } + .e-view.highcontrast .first-box-bottom:after,.e-view.tailwind-dark .first-box-bottom:after,.e-view.fluent-dark .first-box-bottom:after,.e-view.material-dark .first-box-bottom:after,.e-view.bootstrap-dark .first-box-bottom:after,.e-view.bootstrap5-dark .first-box-bottom:after,.e-view.bootstrap4-dark .first-box-bottom:after, .e-view.fabric-dark .first-box-bottom:after { + border-color: transparent; + border-width: 6.2px; + left: 50%; + margin-left: -6.1px; + margin-bottom: -1px; + border-bottom-color: black; + } + .first-box-bottom:before { + border-color: transparent; + border-bottom-color: black; + border-width: 7px; + left: 50%; + margin-left: -7px; + margin-bottom: 0.5px; + } + .e-view.highcontrast .second-box-bottom:after,.e-view.tailwind .second-box-bottom:after,.e-view.fluent .second-box-bottom:after,.e-view.material .second-box-bottom:after, .e-view.bootstrap .second-box-bottom:after, .e-view.bootstrap5 .second-box-bottom:after,.e-view.bootstrap4 .second-box-bottom:after, .e-view.fabric .second-box-bottom:after { + border-color: transparent; + border-width: 6.2px; + left: 50%; + margin-left: -6.3px; + margin-bottom: -1px; + border-bottom-color: #fdf7e7; + } + .e-view.highcontrast .second-box-bottom:after,.e-view.tailwind-dark .second-box-bottom:after,.e-view.fluent-dark .second-box-bottom:after,.e-view.material-dark .second-box-bottom:after, .e-view.bootstrap-dark .second-box-bottom:after, .e-view.bootstrap5-dark .second-box-bottom:after,.e-view.bootstrap4-dark .second-box-bottom:after, .e-view.fabric-dark .second-box-bottom:after { + border-color: transparent; + border-width: 6.2px; + left: 50%; + margin-left: -6.3px; + margin-bottom: -1px; + border-bottom-color: black; + } + .second-box-bottom:before { + border-color: transparent; + border-bottom-color: black; + border-width: 7px; + left: 50%; + margin-left: -7px; + margin-bottom: 0.5px; + } + .e-view.highcontrast .third-box-bottom:after,.e-view.tailwind .third-box-bottom:after ,.e-view.fluent .third-box-bottom:after ,.e-view.material .third-box-bottom:after ,.e-view.bootstrap .third-box-bottom:after ,.e-view.bootstrap5 .third-box-bottom:after , .e-view.bootstrap4 .third-box-bottom:after , .e-view.fabric .third-box-bottom:after { + border-color: transparent; + border-width: 6px; + left: 50%; + margin-left: -6px; + margin-bottom: -1px; + border-bottom-color: #fdf7e7; + } + .e-view.highcontrast .third-box-bottom:after ,.e-view.tailwind-dark .third-box-bottom:after ,.e-view.fluent-dark .third-box-bottom:after ,.e-view.material-dark .third-box-bottom:after ,.e-view.bootstrap-dark .third-box-bottom:after ,.e-view.bootstrap5-dark .third-box-bottom:after , .e-view.bootstrap4-dark .third-box-bottom:after , .e-view.fabric-dark .third-box-bottom:after { + border-color: transparent; + border-width: 6px; + left: 50%; + margin-left: -6px; + margin-bottom: -1px; + border-bottom-color: black; + } + .third-box-bottom:before { + border-color: transparent; + border-bottom-color: black; + border-width: 6px; + left: 50%; + margin-left: -6px; + margin-bottom: 1px; + } + .box-left:after, .box-left:before { + right: 100%; + top: 18%; + border: solid transparent; + content: ""; + position: absolute; + } + .e-view.highcontrast .box-left:after,.e-view.tailwind .box-left:after,.e-view.fluent .box-left:after,.e-view.material .box-left:after,.e-view.bootstrap .box-left:after,.e-view.bootstrap5 .box-left:after, .e-view.bootstrap4 .box-left:after, .e-view.fabric .box-left:after { + border-color: transparent; + border-width: 6.5px; + margin-right: -1px; + border-right-color: #fdf7e7; + } + .e-view.highcontrast .box-left:after,.e-view.tailwind-dark .box-left:after,.e-view.fluent-dark .box-left:after,.e-view.material-dark .box-left:after,.e-view.bootstrap-dark .box-left:after,.e-view.bootstrap5-dark .box-left:after, .e-view.bootstrap4-dark .box-left:after, .e-view.fabric-dark .box-left:after { + border-color: transparent; + border-width: 6.5px; + margin-right: -1px; + border-right-color: black; + } + .box-left:before { + border-color: transparent; + border-right-color: black; + border-width: 6.2px; + margin-right: 1px; + } + .e-view.highcontrast .box-top,.e-view.tailwind .box-top,.e-view.fluent .box-top,.e-view.material .box-top,.e-view.bootstrap .box-top,.e-view.bootstrap5 .box-top ,.e-view.bootstrap4 .box-top , .e-view.fabric .box-top, + .e-view.highcontrast .box-top-left,.e-view.tailwind .box-top,.e-view.fluent .box-top-left,.e-view.material .box-top-left,.e-view.bootstrap .box-top-left,.e-view.bootstrap5 .box-top-left, .e-view.bootstrap4 .box-top-left, .e-view.fabric .box-top-left { + position: relative; + color: white; + background: black; + border: 1.5px solid black; + padding: 2px 3px 2px 3px; + border-radius: 0.2em; + font-size: 12px; + color: white; + } + .e-view.highcontrast .box-top,.e-view.tailwind-dark .box-top,.e-view.fluent-dark .box-top,.e-view.material-dark .box-top,.e-view.bootstrap-dark .box-top,.e-view.bootstrap5-dark .box-top ,.e-view.bootstrap4-dark .box-top , .e-view.fabric-dark .box-top, + .e-view.highcontrast .box-top-left,.e-view.tailwind-dark .box-top,.e-view.fluent-dark .box-top-left,.e-view.material-dark .box-top-left,.e-view.bootstrap-dark .box-top-left,.e-view.bootstrap5-dark .box-top-left, .e-view.bootstrap4-dark .box-top-left, .e-view.fabric-dark .box-top-left { + position: relative; + color: white; + background: #fdf7e7; + border: 1.5px solid black; + padding: 2px 3px 2px 3px; + border-radius: 0.2em; + font-size: 12px; + color: black; + } + .box-top:after, .box-top:before, .box-top-left:after, .box-top-left:before { + top: 100%; + border: solid transparent; + content: ""; + position: absolute; + } + .e-view.highcontrast .box-top:after,.e-view.tailwind .box-top:after,.e-view.fluent .box-top:after,.e-view.material .box-top:after, .e-view.bootstrap .box-top:after, .e-view.bootstrap5 .box-top:after, .e-view.bootstrap4 .box-top:after, .e-view.fabric .box-top:after { + border-color: transparent; + border-width: 7.5px; + border-top-color:black; + right: 50%; + margin-right: -7.5px; + margin-top: -1.5px; + } + .e-view.highcontrast .box-top:after,.e-view.tailwind-dark .box-top:after,.e-view.fluent-dark .box-top:after,.e-view.material-dark .box-top:after, .e-view.bootstrap-dark .box-top:after, .e-view.bootstrap5-dark .box-top:after, .e-view.bootstrap4-dark .box-top:after, .e-view.fabric-dark .box-top:after { + border-color: transparent; + border-width: 7.5px; + border-top-color: #fdf7e7; + right: 50%; + margin-right: -7.5px; + margin-top: -1.5px; + } + .e-view.highcontrast .box-top:before, .e-view.tailwind .box-top:before,.e-view.fluent .box-top:before,.e-view.material .box-top:before,.e-view.bootstrap .box-top:before,.e-view.bootstrap5 .box-top:before,.e-view.bootstrap4 .box-top:before , .e-view.fabric .box-top:before { + border-color: transparent; + border-top-color:black; + border-width: 8px; + right: 50%; + margin-right: -8px; + } + .e-view.highcontrast .box-top:before,.e-view.tailwind-dark .box-top:before,.e-view.fluent-dark .box-top:before,.e-view.material-dark .box-top:before,.e-view.bootstrap-dark .box-top:before,.e-view.bootstrap5-dark .box-top:before,.e-view.bootstrap4-dark .box-top:before , .e-view.fabric-dark .box-top:before { + border-color: transparent; + border-top-color:#fdf7e7; + border-width: 8px; + right: 50%; + margin-right: -8px; + } + .e-view.highcontrast .box-top-left:after,.e-view.tailwind .box-top-left:after,.e-view.fluent .box-top-left:after,.e-view.material .box-top-left:after,.e-view.bootstrap .box-top-left:after,.e-view.bootstrap5 .box-top-left:after,.e-view.bootstrap4 .box-top-left:after, .e-view.fabric .box-top-left:after { + border-color: transparent; + border-width: 7.5px; + border-top-color: black; + right: 20%; + margin-right: -7.5px; + margin-bottom: -1.5px; + } + .e-view.highcontrast .box-top-left:after,.e-view.tailwind-dark .box-top-left:after,.e-view.fluent-dark .box-top-left:after,.e-view.material-dark .box-top-left:after,.e-view.bootstrap-dark .box-top-left:after,.e-view.bootstrap5-dark .box-top-left:after,.e-view.bootstrap4-dark .box-top-left:after, .e-view.fabric-dark .box-top-left:after { + border-color: transparent; + border-width: 7.5px; + border-top-color: #fdf7e7; + right: 20%; + margin-right: -7.5px; + margin-bottom: -1.5px; + } + .e-view.highcontrast .box-top-left:before,.e-view.tailwind .box-top-left:before,.e-view.fluent .box-top-left:before,.e-view.material .box-top-left:before,.e-view.bootstrap .box-top-left:before,.e-view.bootstrap5 .box-top-left:before, .e-view.bootstrap4 .box-top-left:before , .e-view.fabric .box-top-left:before { + border-color: transparent; + border-top-color: black; + border-width: 8px; + right: 20%; + margin-right: -8px; + } + .e-view.highcontrast .box-top-left:before,.e-view.tailwind-dark .box-top-left:before,.e-view.fluent-dark .box-top-left:before,.e-view.material-dark .box-top-left:before,.e-view.bootstrap-dark .box-top-left:before,.e-view.bootstrap5-dark .box-top-left:before, .e-view.bootstrap4-dark .box-top-left:before , .e-view.fabric-dark .box-top-left:before { + border-color: transparent; + border-top-color: #fdf7e7; + border-width: 8px; + right: 20%; + margin-right: -8px; + } + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/src/chart/pie-annotation.ts b/src/chart/pie-annotation.ts index 5c11418c..1e8b9861 100644 --- a/src/chart/pie-annotation.ts +++ b/src/chart/pie-annotation.ts @@ -1,125 +1,99 @@ import { loadCultureFiles } from '../common/culture-loader'; import { - Chart, StackingColumnSeries, Category, Legend, ILoadedEventArgs, Selection, IMouseEventArgs, IAccLoadedEventArgs, - ChartAnnotation, AccumulationChart, AccumulationDataLabel, IAnimationCompleteEventArgs, AccumulationTheme, ChartTheme, - Series, IAccResizeEventArgs -} from '@syncfusion/ej2-charts'; -Chart.Inject(StackingColumnSeries, Category, Legend, Selection, ChartAnnotation); -AccumulationChart.Inject(AccumulationChart, AccumulationDataLabel); + Chart, AreaSeries, DateTime, Legend, ILoadedEventArgs, Selection, IAxisLabelRenderEventArgs, + ChartAnnotation, ChartTheme, Tooltip} from '@syncfusion/ej2-charts'; +Chart.Inject(AreaSeries, DateTime, Legend, Selection, ChartAnnotation, Tooltip); +import { annotateData } from './financial-data'; import { Browser } from '@syncfusion/ej2-base'; + +let selectedTheme: string = location.hash.split('/')[1]; + selectedTheme = selectedTheme ? selectedTheme : 'Material'; + let theme: ChartTheme = (selectedTheme.charAt(0).toUpperCase() + + selectedTheme.slice(1)).replace(/-dark/i, 'Dark').replace(/contrast/i, 'Contrast'); + let themes : string[] = ['bootstrap5', 'bootstrap5dark', 'tailwind', 'tailwinddark', 'material', 'materialdark', 'bootstrap4', 'bootstrap', 'bootstrapdark', 'fabric', 'fabricdark', 'highcontrast', 'Fluent', 'FluentDark']; + let borderColor : string[] = ['#262E0B', '#5ECB9B', '#5A61F6', '#8B5CF6', '#00bdae', '#9ECB08', '#a16ee5', '#a16ee5', '#a16ee5', '#4472c4', '#4472c4', '#79ECE4', '#614570', '#8AB113']; + let fill : string = 'url(#' + selectedTheme + '-gradient-chart)'; /** * Sample for annotation in chart */ -export function getValue(series: Series[], pointIndex: number, y: number): string { - let totalValue: number = 0; - for (let ser of series) { - totalValue += ser.points[pointIndex].y as number; - } - return (Math.round((y / totalValue) * 100)) + '%'; -} //tslint:disable:max-func-body-length (window as any).default = (): void => { loadCultureFiles(); - let pie: AccumulationChart; let isRender: boolean = false; - let dataSource: Object = [ - { x: '2014', y0: 51, y1: 77, y2: 66, y3: 34 }, { x: '2015', y0: 67, y1: 49, y2: 19, y3: 38 }, - { x: '2016', y0: 143, y1: 121, y2: 91, y3: 44 }, { x: '2017', y0: 19, y1: 28, y2: 65, y3: 51 }, - { x: '2018', y0: 30, y1: 66, y2: 32, y3: 61 }, { x: '2019', y0: 189, y1: 128, y2: 122, y3: 76 }, - { x: '2020', y0: 72, y1: 97, y2: 65, y3: 82 } - ]; - let pieDataSource: Object[] = [ - { x: 'UK', y: 51, text: '22%' }, { x: 'Germany', y: 77, text: '34%' }, - { x: 'France', y: 66, text: '29%' }, { x: 'Italy', y: 34, text: '15%' } - ]; let chart: Chart = new Chart({ //Initializing Primary X Axis primaryXAxis: { - valueType: 'Category', majorGridLines: { width: 0 }, minorGridLines: { width: 1 }, - minorTickLines: { width: 0 }, interval: 1, labelIntersectAction: 'Rotate45',majorTickLines: {width : 0}, + majorGridLines: { width: 0 }, labelFormat: 'n2', title: "Distance", }, //Initializing Primary Y Axis primaryYAxis: { - title: 'Sales', lineStyle: { width: 0 }, minimum: 0, maximum: 700, interval: 100, - majorGridLines: { width: 1 }, minorGridLines: { width: 1 }, - minorTickLines: { width: 0 }, labelFormat: '{value}B', majorTickLines: { width: 0 } + title: 'Speed (KM/H)', lineStyle: { width: 0 }, minimum: 50, maximum: 400, + minorTickLines: { width: 0 } }, + annotations: [ + { + content : '
Senna S
', x:'0.360', y:'80' , coordinateUnits:'Point' + }, + { + content : '
Descida do Lego
', x:'1.400', y:'130' , coordinateUnits:'Point' + }, + { + content : '
Ferradura
', x:'2.100', y:'200' , coordinateUnits:'Point' + }, + { + content :'
Curva do Sol
', x:'0.85', y:'155' , coordinateUnits:'Point' + }, + { + content :'
Reta Oposta
', x:'0.700', y:'292' ,coordinateUnits:'Point' + }, + { + content : '
Bico de Pato
', x:'2.750', y:'80' , coordinateUnits:'Point' + }, + { + content : '
Mergulho
', x:'3.136', y:'284' , coordinateUnits:'Point' + }, + { + content : Browser.isDevice ? '' :'
Junção
', x:'3.270', y:'98' , coordinateUnits:'Point' + }, + { + content : Browser.isDevice ? '' :'
Subida dos
Boxes
', x:'3.800', y:'312' , coordinateUnits:'Point' + }, + { + content : Browser.isDevice ? '' :'
Max, accelertion
5.00 g at 5th gear
', x:'1.65', y:'300' , coordinateUnits:'Point' + }, + { + content : Browser.isDevice ? '' :'
Max, accelertion
4.58 g at 5th gear
', x:'2.60', y:'250' ,coordinateUnits:'Point' + } + ], //Initializing Series series: [ - { type: 'StackingColumn', xName: 'x', width: 2, yName: 'y0', name: 'UK', dataSource: dataSource }, - { type: 'StackingColumn', xName: 'x', width: 2, yName: 'y1', name: 'Germany', dataSource: dataSource }, - { type: 'StackingColumn', xName: 'x', width: 2, yName: 'y2', name: 'France', dataSource: dataSource }, - { type: 'StackingColumn', xName: 'x', width: 2, yName: 'y3', name: 'Italy', dataSource: dataSource } + { type: 'Area', xName: 'Distance', yName: 'Speed', dataSource: annotateData, border: { width: 2.5 , color: '#000000' }, + marker: { height: 7, width: 7, fill: 'rgb(247, 206, 105,0.7)'}, animation: { enable: false } + }, ], - chartArea: { border: { width: 0 } }, title: 'Mobile Game Market by Country', + chartArea: { border: { width: 0 } }, title: 'Speed Data Plot for Interlagos Circuit', //Initializing Selection - selectionMode: 'Cluster', selectedDataIndexes: [{ series: 0, point: 0 }], width: Browser.isDevice ? '100%' : '75%', + tooltip:{ enable: true, header: '' , enableMarker: true, format: 'Distance: ${point.x} KM
${point.y} KM/H', fill: 'white', border:{ color: 'rgb(247, 206, 105)', width: 2 }, textStyle:{ color: '#000000'}}, load: (args: ILoadedEventArgs) => { let selectedTheme: string = location.hash.split('/')[1]; selectedTheme = selectedTheme ? selectedTheme : 'Material'; args.chart.theme = (selectedTheme.charAt(0).toUpperCase() + selectedTheme.slice(1)).replace(/-dark/i, 'Dark').replace(/contrast/i,  'Contrast'); + if (selectedTheme.match('Dark')) { + args.chart.series[0].fill = 'url(#dark-gradient-chart)'; + } + else { + args.chart.series[0].fill = 'url(#gradient-chart)'; + } + //FillColor = IsDarkTheme ? "url(#dark-gradient-chart)" : "url(#gradient-chart)"; }, legendSettings: { visible: true, toggleVisibility: false }, + axisLabelRender: (args: IAxisLabelRenderEventArgs) => { + if (args.axis.name === 'primaryXAxis') { args.text = args.text + ' KM'; } + }, //Initializing Annotation - annotations: [{ - content: '
', - x: '20%', y: '25%', coordinateUnits: 'Pixel', region: 'Series' - }], - chartMouseUp: (args: IMouseEventArgs) => { - if (args.target.indexOf('Point') > -1 && args.target.indexOf('annotation') === -1) { - let pointIndex: number = parseInt(args.target[args.target.length - 1], 10); - pieDataSource = []; - for (let series of chart.visibleSeries) { - let value: number = series.points[pointIndex].y as number; - pieDataSource.push({ - 'x': series.name, 'y': value, 'text': getValue(chart.visibleSeries, pointIndex, value) - }); - } - pie.series[0].dataSource = pieDataSource; - pie.series[0].xName = 'x'; pie.series[0].yName = 'y'; - pie.refresh(); - } - }, - loaded: (args: ILoadedEventArgs) => { - if (isRender) { - pie.destroy(); - pie = new AccumulationChart({ - background: 'transparent', - series: [{ - radius: '65%', animation: { enable: false }, - dataSource: pieDataSource, border: { color: 'transparent'}, - xName: 'x', yName: 'y', dataLabel: { visible: true, position: 'Inside', font: { color: 'white' }, name: 'text' }, - }], - load: (args: IAccLoadedEventArgs) => { - let selectedTheme: string = location.hash.split('/')[1]; - selectedTheme = selectedTheme ? selectedTheme : 'Material'; - args.accumulation.theme = (selectedTheme.charAt(0).toUpperCase() + - selectedTheme.slice(1)).replace(/-dark/i, 'Dark').replace(/contrast/i,  'Contrast'); - }, - legendSettings: { visible: false } - }); - pie.appendTo('#chart_annotation'); - } - }, - animationComplete: (args: IAnimationCompleteEventArgs) => { - isRender = true; - let selectedTheme: string = location.hash.split('/')[1]; - pie = new AccumulationChart({ - background: 'transparent', - series: [{ - radius: '65%', animation: { enable: false }, - dataSource: pieDataSource, border: { color: 'transparent'}, - xName: 'x', yName: 'y', dataLabel: { visible: true, position: 'Inside', name: 'text' }, - }], - theme: (selectedTheme.charAt(0).toUpperCase() + selectedTheme.slice(1).replace(/-dark/i, 'Dark').replace(/contrast/i,  'Contrast')), - legendSettings: { visible: false }, - resized: (args: IAccResizeEventArgs) => { location.reload(); } - }); - pie.appendTo('#chart_annotation'); - } }); chart.appendTo('#container'); }; \ No newline at end of file diff --git a/src/chart/polar-area.html b/src/chart/polar-area.html index 82e0bb3c..8b0d03ac 100644 --- a/src/chart/polar-area.html +++ b/src/chart/polar-area.html @@ -23,16 +23,14 @@

- This sample demonstrates polar series with area type for average sales comparison of products in recent year. The switching between polar and radar series can be done by using Series Type in property panel. + This sample shows the average product sales comparison for 6 years in polar and radar charts.

- In this example, you can see how to render and configure the area type charts. Similar to line type series, but the area - get closed and filled with series color. You can use border, fill properties to - customize the area. marker and dataLabel are used to represent individual data and its - value. Legend is enabled in this example with series type shape. + In this example, you can see how to render and configure polar and radar charts with an area series. Switching between polar and radar series can be done using Series Type in the property panel

+

Tooltip is enabled in this example. To see the tooltip in action, hover a point or tap on a point in touch enabled devices.


Injecting Module

@@ -42,7 +40,7 @@

More information on the Polar series can be found in this - documentation section. + documentation section.

\ No newline at end of file diff --git a/src/chart/polar-line.ts b/src/chart/polar-line.ts index 377fc705..f6b08255 100644 --- a/src/chart/polar-line.ts +++ b/src/chart/polar-line.ts @@ -1,11 +1,12 @@ import { loadCultureFiles } from '../common/culture-loader'; import { Chart, Tooltip, Legend, PolarSeries, RadarSeries, Category, LineSeries, ChartDrawType, ILoadedEventArgs, - ChartTheme + ChartTheme, + Highlight } from '@syncfusion/ej2-charts'; import { DropDownList } from '@syncfusion/ej2-dropdowns'; import { Browser } from '@syncfusion/ej2-base'; -Chart.Inject(Tooltip, Legend, PolarSeries, Category, LineSeries, RadarSeries); +Chart.Inject(Tooltip, Legend, PolarSeries, Category, LineSeries, RadarSeries, Highlight); /** * Sample for Polar Series with DrawType Line @@ -40,11 +41,12 @@ Chart.Inject(Tooltip, Legend, PolarSeries, Category, LineSeries, RadarSeries); { x: 'Sep', y: 13.1 }, { x: 'Oct', y: 4.1 }, { x: 'Nov', y: -3.8 }, { x: 'Dec', y: -6.8 }, ], - xName: 'x', width: 2, yName: 'y', name: 'Warmest', type: 'Polar', + xName: 'x', width: 2, yName: 'y', name: 'Germany', type: 'Polar',opacity: 1, marker: { visible: true, - height: 10, width: 10, + height: 7, width: 7, shape: 'Pentagon', + isFilled: true } }, { dataSource: [ @@ -55,14 +57,15 @@ Chart.Inject(Tooltip, Legend, PolarSeries, Category, LineSeries, RadarSeries); { x: 'Sep', y: 2.6 }, { x: 'Oct', y: -4.9 }, { x: 'Nov', y: -13.4 }, { x: 'Dec', y: -16.4 }, ], - xName: 'x', width: 2, yName: 'y', name: 'Coldest', type: 'Polar', + xName: 'x', width: 2, yName: 'y', name: 'England', type: 'Polar', marker: { - visible: true, height: 10, width: 10, shape: 'Diamond', + visible: true, height: 7, width: 7, shape: 'Diamond', isFilled: true } } ], //Initializing Chart title title: 'Alaska Weather Statistics - 2016', + legendSettings: { enableHighlight: true }, //Initializing User Interaction Tooltip tooltip: { enable: true @@ -89,8 +92,8 @@ Chart.Inject(Tooltip, Legend, PolarSeries, Category, LineSeries, RadarSeries); change: () => { chart.series[0].type = polarType.value; chart.series[1].type = polarType.value; - chart.series[0].animation.enable = true; - chart.series[1].animation.enable = true; + chart.series[0].animation.enable = false; + chart.series[1].animation.enable = false; chart.refresh(); } }); diff --git a/src/chart/polar-range-column.html b/src/chart/polar-range-column.html index e5189bdf..af7e01c5 100644 --- a/src/chart/polar-range-column.html +++ b/src/chart/polar-range-column.html @@ -23,17 +23,15 @@

- This sample demonstrates polar series with range column type for temperature variation. The switching between polar and radar series can be done by using Series Type in property panel. + This sample shows minimum and maximum temperature variations in polar and radar charts using a range column series.

- In this example, you can see how to render and configure the range column type chart You can use border, - fill properties to customize the area. dataLabel are used to represent individual data - and its value. + In this example, you can see how to render and configure polar and radar charts with a range column series. Switching between polar and radar series can be done using Series Type in the property panel.

- Tooltip is enabled in this example, to see the tooltip in action, hover a point or tap on a point in touch enabled devices. + Tooltip is enabled in this example, to see the tooltip in action, hover a point or tap on a point in touch enabled devices.


Injecting Module

@@ -44,7 +42,7 @@

More information on the range column series can be found in this - documentation section. + documentation section.

\ No newline at end of file diff --git a/src/chart/range-selection.ts b/src/chart/range-selection.ts index bb37e15c..c623723c 100644 --- a/src/chart/range-selection.ts +++ b/src/chart/range-selection.ts @@ -21,6 +21,7 @@ import { DropDownList } from '@syncfusion/ej2-dropdowns'; }, //Initializing Primary Y Axis primaryYAxis: { + title: 'Sales', labelFormat: '{value}%', interval: 25, minimum: 0, diff --git a/src/chart/range-step-area.html b/src/chart/range-step-area.html new file mode 100644 index 00000000..f6027f03 --- /dev/null +++ b/src/chart/range-step-area.html @@ -0,0 +1,29 @@ +
+
+
+
+

+ This range step area chart example illustrates the minimum and maximum temperatures for different days using the default range step area series. +

+
+
+

+ In this example, you can see how to render and configure a range step area type chart. You can use border and fill properties to customize the range step area. Both marker and dataLabel are used to represent data points and their values. +

+

The tooltip is enabled in this example. To see the tooltip in action, hover over a point or tap on a point in touch-enabled devices.

+
+

Injecting Module

+

+ The Charts component’s features are segregated into individual feature modules by feature. To use the range step area series, we need to inject the RangeStepAreaSeries module using + Chart.Inject(RangeStepAreaSeries) method. +

+

+ More information about the area type series can be found in this + documentation section. +

+
+ \ No newline at end of file diff --git a/src/chart/range-step-area.ts b/src/chart/range-step-area.ts new file mode 100644 index 00000000..9e61f112 --- /dev/null +++ b/src/chart/range-step-area.ts @@ -0,0 +1,92 @@ +import { loadCultureFiles } from '../common/culture-loader'; +import { + Chart, ILoadedEventArgs, DateTime, + ChartTheme, ISeriesRenderEventArgs, DataLabel, LineSeries, Tooltip, RangeStepAreaSeries +} from '@syncfusion/ej2-charts'; +Chart.Inject(RangeStepAreaSeries, DateTime, DataLabel, LineSeries, Tooltip); +import { Browser } from '@syncfusion/ej2-base'; +import { chartDataValues } from './financial-data'; + +/** + * Sample for RangeArea series + */ +(window as any).default = (): void => { + loadCultureFiles(); + + + let chart: Chart = new Chart({ + + //Initializing Primary X Axis + primaryXAxis: { + valueType: 'DateTime', + labelFormat: 'dd MMM', + edgeLabelPlacement: (Browser.isDevice) ? 'Shift' : 'Hide', + majorGridLines: { width: 0 } + }, + chartArea: { + border: { + width: 0 + } + }, + //Initializing Primary Y Axis + primaryYAxis: + { + labelFormat: '{value}˚C', + lineStyle: { width: 0 }, + minimum: -10, + maximum: 25, + interval: 5, + majorTickLines: { width: 0 } + }, + + //Initializing Chart Series + series: [ + { + type: 'RangeStepArea', + dataSource: chartDataValues, + xName: 'x', high: 'high', low: 'low', opacity: 0.5, width: 2, + border: { + width: 2 + }, + marker: { + visible: false, + + } + }, + + ], + width: Browser.isDevice ? '100%' : '75%', + //Initializing Chart Title + title: 'Temperature Variation by Month', + tooltip: { + enable: true, + format: 'Temperature : ${point.low} - ${point.high}', + shared: false, + header: '${point.x}' + }, + load: (args: ILoadedEventArgs) => { + let selectedTheme: string = location.hash.split('/')[1]; + selectedTheme = selectedTheme ? selectedTheme : 'Material'; + args.chart.theme = (selectedTheme.charAt(0).toUpperCase() + + selectedTheme.slice(1)).replace(/-dark/i, 'Dark').replace(/contrast/i, 'Contrast'); + switch (selectedTheme) { + case 'bootstrap5': + { + chart.series[0].fill = '#BDD9F5'; + chart.series[0].border.color = '#539DE3'; + } + break; + case 'fluent': + { + chart.series[0].fill = '#C3A6DB'; + chart.series[0].border.color = '#9E71C2'; + } + break; + } + }, + legendSettings: { + visible: false + } + }); + chart.appendTo('#container'); +}; diff --git a/src/chart/relative-strength-index-indicator.html b/src/chart/relative-strength-index-indicator.html index caf3bc58..5543178b 100644 --- a/src/chart/relative-strength-index-indicator.html +++ b/src/chart/relative-strength-index-indicator.html @@ -3,15 +3,15 @@

- This sample illustrates a stock chart with candle series and a Relative Strength Index indicator. Trackball shows the information about the stock, signalline, lowerline, and upperline value of a day. + This sample illustrates a chart with candle series and a relative strength index indicator. The trackball shows information about the day’s stock, signal line, lower line, and upper line values.

- In this example, you can see how to render and configure the RSI Indicator. + In this example, you can see how to render and configure a relative strength index indicator. RSA measures the speed and magnitude of price movements studying the average gains and average losses, and shows how strongly the stock is moving in its current direction.

- Tooltip is enabled in this example, to see the tooltip in action, hover a point or tap on a point in touch enabled devices. + Tooltip is enabled in this example, to see the tooltip in action, hover a point or tap on a point in touch enabled devices.


Injecting Module

@@ -21,7 +21,7 @@

More information on the RSI Indicator can be found in this - documentation section. + documentation section.

\ No newline at end of file diff --git a/src/chart/strip-line-recurrence.ts b/src/chart/strip-line-recurrence.ts index 5d82e05d..7e89f98e 100644 --- a/src/chart/strip-line-recurrence.ts +++ b/src/chart/strip-line-recurrence.ts @@ -1,6 +1,6 @@ import { loadCultureFiles } from '../common/culture-loader'; -import { ChartTheme, Chart, ColumnSeries, Legend, Tooltip, ILoadedEventArgs, DateTime, StripLine } from '@syncfusion/ej2-charts'; -Chart.Inject(ColumnSeries, DateTime, Legend, Tooltip, StripLine); +import { ChartTheme, Chart, ColumnSeries, Legend, Tooltip, ILoadedEventArgs, DateTime, StripLine, Highlight } from '@syncfusion/ej2-charts'; +Chart.Inject(ColumnSeries, DateTime, Legend, Tooltip, StripLine, Highlight); /** * Sample for Column Series @@ -32,14 +32,14 @@ Chart.Inject(ColumnSeries, DateTime, Legend, Tooltip, StripLine); //Initializing Chart Series series: [ { - type: 'Column', xName: 'x', width: 2, yName: 'y', name: 'All sources', + type: 'Column', xName: 'x', width: 2, yName: 'y', name: 'All sources', columnSpacing: 0.1, dataSource: [{ x: new Date(1970, 1, 1), y: 16500 }, { x: new Date(1975, 1, 1), y: 16000 }, { x: new Date(1980, 1, 1), y: 15400 }, { x: new Date(1985, 1, 1), y: 15800 }, { x: new Date(1990, 1, 1), y: 14000 }, { x: new Date(1995, 1, 1), y: 10500 }, { x: new Date(2000, 1, 1), y: 13300 }, { x: new Date(2005, 1, 1), y: 12800 }] }, { - type: 'Column', xName: 'x', width: 2, yName: 'y', name: 'Autos & Light Trucks', + type: 'Column', xName: 'x', width: 2, yName: 'y', name: 'Autos & Light Trucks', columnSpacing: 0.1, dataSource: [{ x: new Date(1970, 1, 1), y: 8000 }, { x: new Date(1975, 1, 1), y: 7600 }, { x: new Date(1980, 1, 1), y: 6400 }, { x: new Date(1985, 1, 1), y: 3700 }, { x: new Date(1990, 1, 1), y: 7200 }, { x: new Date(1995, 1, 1), y: 2300 }, @@ -48,6 +48,7 @@ Chart.Inject(ColumnSeries, DateTime, Legend, Tooltip, StripLine); ], //Initializing Chart title title: 'World Pollution Report', tooltip: { enable: true, format: ' Year: ${point.x}
Tons Per Day: ${point.y}' }, + legendSettings:{ enableHighlight: true}, load: (args: ILoadedEventArgs) => { let selectedTheme: string = location.hash.split('/')[1]; selectedTheme = selectedTheme ? selectedTheme : 'Material'; diff --git a/src/chart/strip-line.html b/src/chart/strip-line.html index 80123fb1..8d85a71c 100644 --- a/src/chart/strip-line.html +++ b/src/chart/strip-line.html @@ -1,40 +1,20 @@
-
-
-
-
- - - - - -
-
StripLine Types:
- 		-
- -
-
+
+

- This sample highlights certain range in an axis by using stripline feature. + This sample highlights a certain temperature range recorded over a year using the strip line feature.

- In this example, you can see how to render and configure the stripline charts. You can use stripline by enable the - visible property. Striplines are rendered in the specified - start and - end range and you can add more than one stripline for an axis. + In this example, you can see how to render and configure a strip line for the chart. Use the start and end + properties in the chartStripline option to add a strip line to an axis. You can add more than one strip line to the axis.

- Tooltip is enabled in this example, to see the tooltip in action, hover a point or tap on a point in touch enabled devices. + Tooltip is enabled in this example, to see the tooltip in action, hover a point or tap on a point in touch enabled devices.


Injecting Module

@@ -45,7 +25,7 @@

More information on the strip line can be found in this - documentation section. + documentation section.

+ \ No newline at end of file diff --git a/src/document-editor/multiple-columns.ts b/src/document-editor/multiple-columns.ts new file mode 100644 index 00000000..6af7c71e --- /dev/null +++ b/src/document-editor/multiple-columns.ts @@ -0,0 +1,28 @@ +import { loadCultureFiles } from '../common/culture-loader'; +import { DocumentEditorContainer, Toolbar } from '@syncfusion/ej2-documenteditor'; +import { TitleBar } from './title-bar'; +import * as data from './data-multiple-columns.json'; + +/** + * Default document editor sample + */ +(window as any).default = (): void => { + loadCultureFiles(); + + let hostUrl: string = 'https://services.syncfusion.com/js/production/api/documenteditor/'; + + let container: DocumentEditorContainer = new DocumentEditorContainer({ serviceUrl:hostUrl,enableToolbar: true, height: '590px' }); + DocumentEditorContainer.Inject(Toolbar); + container.appendTo('#container'); + + let titleBar: TitleBar = new TitleBar(document.getElementById('documenteditor_titlebar'), container.documentEditor, true); + container.documentEditor.open(JSON.stringify((data))); + container.documentEditor.documentName = 'Multiple Columns'; + titleBar.updateDocumentTitle(); + + container.documentChange = (): void => { + titleBar.updateDocumentTitle(); + container.documentEditor.focusIn(); + }; + +}; \ No newline at end of file diff --git a/src/document-editor/notes.ts b/src/document-editor/notes.ts index b9801087..282d615b 100644 --- a/src/document-editor/notes.ts +++ b/src/document-editor/notes.ts @@ -9,11 +9,10 @@ import * as data from './data-notes.json'; (window as any).default = (): void => { loadCultureFiles(); - let hostUrl: string = 'https://ej2services.syncfusion.com/production/web-services/'; + let hostUrl: string = 'https://services.syncfusion.com/js/production/api/documenteditor/'; - let container: DocumentEditorContainer = new DocumentEditorContainer({ enableToolbar: true, height: '590px' }); + let container: DocumentEditorContainer = new DocumentEditorContainer({ serviceUrl:hostUrl,enableToolbar: true, height: '590px' }); DocumentEditorContainer.Inject(Toolbar); - container.serviceUrl = hostUrl + 'api/documenteditor/'; container.appendTo('#container'); let titleBar: TitleBar = new TitleBar(document.getElementById('documenteditor_titlebar'), container.documentEditor, true); diff --git a/src/document-editor/paragraph-formatting.ts b/src/document-editor/paragraph-formatting.ts index 9535599c..31d5e645 100644 --- a/src/document-editor/paragraph-formatting.ts +++ b/src/document-editor/paragraph-formatting.ts @@ -10,11 +10,10 @@ import * as data from './data-paragraph-formatting.json'; (window as any).default = (): void => { loadCultureFiles(); - let hostUrl: string = 'https://ej2services.syncfusion.com/production/web-services/'; + let hostUrl: string = 'https://services.syncfusion.com/js/production/api/documenteditor/'; - let container: DocumentEditorContainer = new DocumentEditorContainer({ enableToolbar: true, height: '590px' }); + let container: DocumentEditorContainer = new DocumentEditorContainer({ serviceUrl:hostUrl,enableToolbar: true, height: '590px' }); DocumentEditorContainer.Inject(Toolbar); - container.serviceUrl = hostUrl + 'api/documenteditor/'; container.appendTo('#container'); container.documentEditorSettings.showHiddenMarks = true; diff --git a/src/document-editor/print.ts b/src/document-editor/print.ts index ada1d4e4..5b5ffd08 100644 --- a/src/document-editor/print.ts +++ b/src/document-editor/print.ts @@ -70,7 +70,7 @@ DocumentEditor.Inject(Print); function onLoadDefault(): void { // tslint:disable - let defaultDocument: Object = { "sections": [{ "sectionFormat": { "pageWidth": 612, "pageHeight": 792, "leftMargin": 72, "rightMargin": 72, "topMargin": 72, "bottomMargin": 72, "differentFirstPage": false, "differentOddAndEvenPages": false, "headerDistance": 36, "footerDistance": 36 }, "blocks": [{ "paragraphFormat": { "styleName": "Title", "listFormat": {} }, "characterFormat": {}, "inlines": [{ "characterFormat": {}, "text": "The Giant Panda" }] }, { "paragraphFormat": { "styleName": "Normal", "listFormat": {} }, "characterFormat": {}, "inlines": [{ "characterFormat": { "fontFamily": "Calibri" }, "text": "The giant panda, which only " }, { "characterFormat": { "fontFamily": "Calibri" }, "text": "lives " }, { "characterFormat": { "fontFamily": "Calibri" }, "text": "in China outside of captivity, has captured the hearts of people of all ages across " }, { "characterFormat": { "fontFamily": "Calibri" }, "text": "the globe." }, { "characterFormat": {}, "text": " " }, { "characterFormat": { "fontFamily": "Calibri" }, "text": "From their furry black and white bodies to their shy and docile nature, they are considered one of the " }, { "characterFormat": { "fontFamily": "Calibri" }, "text": "world's most loved animals." }] }, { "paragraphFormat": { "styleName": "Normal", "listFormat": {} }, "characterFormat": {}, "inlines": [{ "characterFormat": {}, "imageString": "data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEAYABgAAD/2wBDAAgGBgcGBQgHBwcJCQgKDBQNDAsLDBkSEw8UHRofHh0aHBwgJC4nICIsIxwcKDcpLDAxNDQ0Hyc5PTgyPC4zNDL/2wBDAQkJCQwLDBgNDRgyIRwhMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjL/wAARCAFeAm8DASIAAhEBAxEB/8QAHwAAAQUBAQEBAQEAAAAAAAAAAAECAwQFBgcICQoL/8QAtRAAAgEDAwIEAwUFBAQAAAF9AQIDAAQRBRIhMUEGE1FhByJxFDKBkaEII0KxwRVS0fAkM2JyggkKFhcYGRolJicoKSo0NTY3ODk6Q0RFRkdISUpTVFVWV1hZWmNkZWZnaGlqc3R1dnd4eXqDhIWGh4iJipKTlJWWl5iZmqKjpKWmp6ipqrKztLW2t7i5usLDxMXGx8jJytLT1NXW19jZ2uHi4+Tl5ufo6erx8vP09fb3+Pn6/8QAHwEAAwEBAQEBAQEBAQAAAAAAAAECAwQFBgcICQoL/8QAtREAAgECBAQDBAcFBAQAAQJ3AAECAxEEBSExBhJBUQdhcRMiMoEIFEKRobHBCSMzUvAVYnLRChYkNOEl8RcYGRomJygpKjU2Nzg5OkNERUZHSElKU1RVVldYWVpjZGVmZ2hpanN0dXZ3eHl6goOEhYaHiImKkpOUlZaXmJmaoqOkpaanqKmqsrO0tba3uLm6wsPExcbHyMnK0tPU1dbX2Nna4uPk5ebn6Onq8vP09fb3+Pn6/9oADAMBAAIRAxEAPwCkzKc/3qrpI3mZ3AYqwkRcbjjHvUZMML5OM+9bvYz6kkjkpjNUo0RmzklienYU65ImT5JNuaWyhUMSJCR0qOYajqadrKtuuxVG5vXvUF4m9SCOW6dqk3S7DsXd68cioZGXyyshyR2J6VothN+8QWMLB2VzwPxrPvLRxqIcNuYEdq2UaKKLKtnjPXmqUe1rzJHB5yalvSw7a3NywZ7WAyuCuRg+ophPmOcKXDHgnk0+5dGtUjXCZPOBzVS2iuI8gMjAdCW5/KmtdBbEspBAigBGB82Rg1h3yeUzGQnJ4BIPatlZZEJlfBYn+7yajuUju4F2uZH6sT1X2FRVVo3Lp6yscuTO8Eghl2joR3/Csy0nvGulHzyBDjnnn+ldJc6csO4YyxwfxNYKSSxXcqltrkkA4yeKyi76lVFZ2Oj8+RYBESyJjkdz6Vu+DkJ1s5iwBExUkE+1cxFdyrbxMwAOBw4rtPAci3N5cOnRYSF49SOKqT90xlocl4uTy7+Xg4J49q45mzn5u/Su88ceW985OVJ6iuAl2KxAYZ9jTg7ol7kUjlQfeqjvjrUshHY81A3XJHSruCsRn5jSD7vzdaezDO5Rg0mAcY61LNBE5445q2pxHt45qoFIIqyc7B60Etij7gHfNSqSIcjuaiBIJ47VIg3QbfSghluzbEgGe9fQPgWD7T4fhbcM5xivn20O2Rc9hXp/gnxM9q8FtuPlglse54qX5lwPYhpCt16GqraEzA881paVfi9h3jp/kVpcGloanGz6PLGyjB5qo9jMnVTXdtGrdRUb2sbDBUUaDucH5bjqtArs5tMikDfKOaxrzSHiA2DOBzSsNMx8UYqaS3kiOGGKixQh7hilFIBTgKqxIc0tOApcUWAZTgKMUuKVguAFOpKXFTYpMQ00in0nSixVxtIRTsUEYpFXGEUmKdTaLDuIetKRSUU7CbCkxRR9adiLhionAqWmSCiwrkanBp+KhHBqwoyKLAmRsMVGRU7rgVERRYTIjSYp5FJinYkbilpcUmKLCbEIpyjikxTh0oaJI2FNA5qRqj71DREh3tSH3oFB61nYSE6UU7AxSU0WmNIyKYR2qXFNYZpoortwajPSpmFRMMVotSbkZ6VGxqVhxUD9auw+YwZFaGE4yc1mSq0vII4681Yv5pFQ8ED1rMiu8MQRWk1dijoOkkEQ2Jnnqav6TC0r5/SqMkRc7+DmrtskghwnDGoepSLdws0Dna2c/wANV5cswYxkjoc1YgjLMI7gsfwzRcyCEbYwBt9e9aPSOpD1loKkflxglVU9QM1R1G5WQboVCt0IB5pq3kly+zbtA6HqKfa6bLdkyKi/KfmPrUN3WhpHVl/QmleIvP8AOACRlM0kkN0135jyLDCegYcmqSXUlteCEfKg6rjk1duf3wCs+3uo64qaadrjqcqdguJ38sAMSVB4GOPxqOxVYF82eXLyDcAo9fU+tVbpb3cIomQof424IHvUVsWjcrP0xuVuoOPSqlK6IinF3L98onWZVO59uRtrkWhdbxYtpJznBHavQNLns7O1afcDcFS2HyAB6e9c5rOh3dxdf2hZzqxkI/drwR/jUKFrM0lNPcgdPMQuepGcY/Diu5+HUJVL59w27FG3v35/SuJZJwoRv3bgfMMdT7V3Pw7kH2m7Ta2TGpJPQYPT9aVXSJhJ3scx458uS5ZsEMO/rXmso2yHIGM969s8daIZ1eaKNuOflHA+orxq+ieGV1YdD2pUpXQblM5BJ6CombJHc+tIWySDnNOWF5CAATWxIzYTjjqeMU8Rk84OauQWLllz0rWTRpCu5VLEHO09/pUORXM7aHPRIzSbRzVmaFkUZH1roItJBkTK444J7Go9UshGhXbgdcelCZLuc7nnt0qaMrjBxzzULxOSCBz7VoWel3M7Kqxn5sjGO4pjbGRZbOAeBn9a7LwtYSyxyzBCSoXbj1JOKraJ4OvruaaIxlXXacEd89K9e8IeEX02zRZk+csGIPbFS2VBHU+G7ZrfS4Vf7+0ZrdB4qCCERRqo6AVYAxUmotFFFMBaayBuop1FAFO4sIpgcqM+tZFxoe1SUJJ9K6OkIzQBxU9lLbn5lOKr13E1uky4Zc1h6hpAjUyRdB1qkBiinYpMFTginAZp2ATFLinBc0YoATFGKXFHNKw7iUhxTqSiwXExTTmnUEUrDuRmkp5FNIosO43FGKWlwadh8xGeKKUqaTaaLE3CmuOKfg0hHFFhXK2OasRciomWpITyKBEjLUTLirRXIqJ1osMqlaNtSleaQrQSyLFNxU200hSmQ2RYpQOKcVoxxUsRC2abUhFMJqCXqJRzRTgcioEJzR1pwpCKVihOlNNOxTSKtIfMQt1qMip2Wo2WrSJuQMKicZFWCDTCua0sByF6m1GU4JrKjiwSwUD1966DU4QhbjJzxWXHHuzvyPbFO+hpbUh8wNwK0rS5MLhVj3H3rOaJBPvRs1oKyCRCQfmHHHepi7SKteLNRjHtaR/ldh/dxisSWWL7QUzvBOD2q/Kd0W1nfdjjGDXOXUcon2IG65J9BW09TKOhqi3toAXSLP1bJ/Kpl1jZH5ccxXsR6Cs+3tzsJM4zjnmudulmS6OwyOCxwBk81EpWGrs1ZpZrnU28o+YTjg+laMqTzwgbkjKkLu5OKj0m0Edq19KQsp4xjvini9iuY2jcjcvOCepqY7alTaK0sgiUwmTzZAPmfuPatDSojNGWflVwuetZ3kMZOUJJOeR1rqLLTnjsg0ZVGJz8x25qWNLUfM8UTJGbOAbx94tyD647VQ1GMW8HmIApGOrZxzjirV/E+7Y+xHKZy2MEdO3vWReSNJi2ll8mVuS4HTHTH1qm0Llu7sqyyMpUMcNg5wOCa7X4eGRri9kIwHCng8VwTSK7Jt/eIoILA/rXr3wz0qD+yZpwVdmkxuHXGM4P5molHmiRNPZGxdaaNQQxPFnNcdrPwe+3BpbWcK552v8A4164kCRgYUZFOYgCphFQ2KUO58yar8J9d05y/wBm82MfxpgiqVpocsTeXPAUZTjDCvpe7mCqc8rXHa1p1tckyBF3U5vsPkR5raaImQrRgHHGf4hWr/YyhFx0/lW3b2G1gGQlfWtiLSw4x/Ssk2xqNjgXsiYiNhyvcCq76DPqoAhTLjGQeM16vb+HYdoJUEjocf54rQtdBtYWLpGFYjmtE7C5bnk+nfDoi4bzAXHYEfp/9eu90XwbZwRQsYF3KxDHH1/xrr1tE4IH0qzHGqdutF2NRSM+00a2tpmkjjALDDcVqLGBwBSgCnUFCgYpaTNLQAUtJmimAtFJS0ALRiiigBKRkDqQRxTqKAMq50iJwSgwaxJrZoXIYV15FU7yzWdc9CKpPuBzAWl21Zlt2icgjimba0sTch2Ubal20m2lYLkW2m7Kn20uykFytsoKVZ2UhjoGVthpNntVnZSbKAK2znpS7KsGP2pRHTsFyt5ftS+V7VZEdOEdFgKZSmmPirrRe1RlKQGe8eKYgw1X3iqu0eGpNDJl5FNZKkiXIp7rTQimUppFWCKjYYp2EyEikpzHmmE4pMhiMKTHFIWpC1QwuRv1qM05jTSRmobJbCkBxSFqbuqSUyXNKOaiBp6mmWPAo20op4FUkIhKVGyVZIpjDNaJBYqFaaUqwVphWqFscNe34muyuc+mKRUEjFAeT61Q+zvEGZs5z1p1kZpJmKbgB780W1NOYvvpxt2ACgk89KmtI1lmMZALY4Y9qsRyFY8Eh3+nNUmuFimxgKCeo7VpKKWwoy11NKa2434/4HmuduImW7ODhcc981rLK7sds+7dz8uRis+WBXnZjM2/HTrz71N7jY21myGHy4HOCvArNubTz77ILIo67TS6hNPEpTO49itJo0xVxNcglQRnmsqj1sVDqaPkqtrtkkLIOEGf6CqFvaRS3IPky53fePAq/cvAZfNjdjEOiMf5c1c09Tc3S+YuxDySWz/+qqbJUbnR6X4cjnsvNlm8rGCCV4wPrVa7BgG3aXwcKA2FPuTWpNexkLb7n7Hc3K/Un25rD1m9jMqCJ1lRTgswOOe44ocVY0UuVmXJcXEzSKxGDzuc7s1mztHO7l3CyIACFwBgfhW1ImMtgrkc49a5wyyrqU6OgdGPUnrjAFQyVISUZkyGOMdW7ivcfhWqjwsxVgcykkdwcD/61eJxIokToGPG48gCvd/h5am08KROxGZ3aTj8v6U09BfaR1jtiqssowaWZ8jANUysrHGM0iyC4O/OAaprZGVuV4rXSAHhhU6QqnQUmgMyPS4gB8gBq3HZRIPuj8qubR6UhHpSAiWJVHFOC804ZXrSgj0pXGAGKeOcUAA04DkUAKKXFLilxTEJRS4pKACgUYoxQAtFFFMBc0uabRQA6im5ozQAtHWkzRQBWurYTJ71jywGN9uK6Gq1zbCQZA+aqixNGHso8urLxlHINNxVXFYg2UuypttGKm4yHZRsqbFGKLgQbKbsqxik207hYh2UoWpNtAFO4DNlOCU8CnAUrjIWSoylWSKiIoAgZOKrOnNXiOKqyDGaAEiXFSMKjjPNPc8UxMgYVC/SpXaoHaqJZCxqF3p8jYqq7UmSx++gtxUG/mhpOOtQyLjnamFqjZ6YXrNkNkm/mk3VFu5pc0hXJQ1Sqarg1MhxTRadyytPBqJDxT81SKHnpTDRmkzVoGNIzTWFSUx6pMlvQ4G9uYtjII854yO1QaUu+Qjnr07VHfeZkhcL7AVd0q2dohIOoHehyfMjZL3SzdfuyRF8rYwQDWTM7BsyAnHTvmtO4AjbEbZz2HNZWo2TXacOFVT82KcmEYotW2o24h2KcFux659qz9UYS/MsgEhPI5BFMg0iSPa3nxGMdM5z+VF2ImlKzMAoGA2MZos+or22IrSB7gmJWEsh5GeBWysMMEPkKqebt+ZR0/OsKzvVSNoo1KZPEgOSalnjeFGdZ90oGSB/iKLLclNmxpghAlLrmQZCjrW5a6ZFbWpumLMh6tjCrxxz/WuKgvmjgjKk+Y/J9q6q01B/sYX7SWG3JXng1FrmsZWKYmmTJZXVfu43feqMXStdRxpGSh5KyHkflxxmoNRvIDIyGXcwAbjvn/Jq1p7PLbqyo7EjJL9Ripd3oVpe5ZKs0O1mHXI2d/r7Vz/lqZ5AxO0ksD754H8q2QHR2GMA8YIrKQmIsstvtB7kEHnvz+FTJO4Qa5XcqW7ASYzjL9+vWvoPwz/o/huwhGflhH68/wBa8NtLZprm2h8tVHdyMZPvXvekW5Gn24fhhGoOPpVpaGenMXVUv7VMqYpyrgU8CkWMxS4p3akNIBNtNxTiaByKQDfalK45FOxS0rDEC08Ckp1MQtFFFMAooooAKUUUtACUUtFACUlLSH6UAIRTWP50+mlc0AIG7U+omGKFekBLRSA5paYFW5tw4yODWcyFTggituqtzDuGQOaaYGbiinsjIeRTcUmITFFPAoK+tCYyPFGKfxSYFO4DMUU7FNNO4AKcKjpwNACmomqQ1ExoAaarTVYLYqtKaAIkODUjNxVfcA1Kz8VSENkbFVnalkeqzyVRLEkaqztRJLVaSX3pEMkL801nqt5vNL5gqJGZIXppeoWfJphes2QycPmngiqofFSo1ICypqVTVdTUytmmmUtCwrU/dUCnFSCmaIkJo3U2kNUgY/dTGamFsUwvTuQzi7+GONljU7mzzT4ZZ4UCx/d9MUWyrNdK0gUAHB561dubyKzYjy12Hjd3rRK8rm7fumbNKzzMSMHsD2qHeVRsJl8dSa0IooLkNJG4993eiSAglDjJxwOgFJuyuEdXYz7cTmElVGB6Vh6tcSRFoJFO1ug7ZrsokFuSkzuU/ur0/Gs7VdGGoNuhjJcDO7t9PrQ3eNw5NbdTmIIlgt1ZZN5P8I6ZprPmaOFF2u33st2p32CeBz9oYx4PHsasW+mtcyPcF2ZR0OMZNSncTjrYfa26y321k4HA56V1h0wxwKqbV3r904HP1rn7G1mWcsgy7DALHp71u2q7JD5g3tkL8xJxx2qo2sErpnKatp8setxpHllJVsbscemfzrp7O0vtPDK5Uwg/Lhx7/nWT4jt5prmO4gYZHyrzVrT3ufspjvYyFVgI8Z2jPv8A1qFa+hpLYvvjfgHDk8c4x7/WsmVvMtgj4PB2nPT604ectxcu6s0efkYNx06elT2VnPdOiBcKy7c+XTtcjY7PwR4cNu0c8oMnGQeMfSvUYlCKAFwPSuX8KaGdMsEUySMTySxzXVqMDg05vohQXVjgaWmgigtjrWZoOppNJuHrTSaVwFJ4pVpnHelFIY/nNKOaaDTxQAopaSlpgLS0lLmgQUUUUwFFLSCloAKKKKACiiigBDTTTqSgCM89Kj6VORxTGU9qTQCoeKfVcgg8VMp4oQDqa7hRyaGPFcp4o1w6fblEBMjevAA9TTA1LrULbccuMLyeapLqlqxO2QccV41q3i+WeZkikYRk5Jz1NZreILpwcSsq/WqtcR7Ze+JdPskJknX6Dmubu/iFbqWEKFj254ryS51KeVvmcnHqap/aZW7HGaagQ5pHrEfxAO45APNaFv45jlYAryfevG1lckkHBqzBcSI33v8AGq5UPnPerLW4rldzOi+2a1EmWRcqc14Pa6w8B+Vzmu20LxWWCo5yfepcSk7noRNAaqFtfrcICD1qx5npUsonLVEzYphl4qCSYClcCRmqCV+KjaaoJJvemIa74NI0vFVpJhmoDOPWriJk0ktVZJfeopJveqks/WqIuSSTdeapyTc1DNN71UaUk0GbLgm561IJOKoR5LVaI2rUtEu5J5lLuzUKnNPFQ4kD91SRmouDTl4qbCLauMYNSKcVUDVOjVLKiWlbNSKcVWU1KHpXNET7qazVEZOKieQmq5gY93qFpveonkqu7mi5mzj7m7aG7VArbu3FbVlZfa0BYZc/w5/nWPqFqrXmUOWHvmteCZ7S3DZy3TFdS3sbNWLv2e2s3+/uI+8MAj6Cq+8M7MnA64JoEpk5XABOCM/1o2vKSgQggdAetRUNadr3RWldrm6IUdep/wDr1oWc62agKcyj/PNQ26+RHkr8w96jZ5biTCKAmSC3AzRDVWCompcwzXPLnEUkwQOx5CrgGrGnWsJt9scSxqgyxJzurL1K4WZVjRnaUN82RwPTHrW1ZHNip2MhyPmPc/jRHWTsKWybFEJuLkRpFtOOOMfj7VTuI5ITtYjJ5z3z6jHbFaweWK1bcuZD93J7HvWBf6lJHqwSPZI7LyBzjp3pWsNu4SKq2wLyKdr8j61oSfvYkCKYVVdgTv75PcVka41w1tGPKXazggjpwOlaFg80tnHI5CE4Uktgc9ufypLcltpJGewc3k8DtmMgDaP4GI/lXeeDNDuIpvNnQ7R0Oetc5psMsWuuscPnbtoZSM/oa9c01XS3RfLEYA4UYqtlcT1djRiG2MDj8KkzURx0p3brWTNB+RR9KaCO+aC2D0pAL25GKOKaWOaQtxSGPIFH0pgb0pQaAH5xSg803qKAQOvH1oESj1p9Rg0buKYEhNFMBp4oAUUUUtMApaSloAKKKKACikooAWkozRQAhppbin0mKAIjzRnHenkUwj3FIA3cV5v8SYZX053BOzBDNnAxXoUqkjjOK4fx/EJNElBdd6j5VPrTRMtjwJmJnIXBwevapHyMAHJqrN+4uDnk56HvTZJizdQPxrRIyciwZEUEsDkdSTxVSa8y21Rge1QuzNxwOamjVccnJ+lUS0ItwSep/Gp0nwc4OahZSM7T+NR7wTgnJ+lAkmakdx8w3GtzSrsRSqQwNcqjDvV+ymCMPmzSuaxdj17R9T3BRu/M10S3OV4Neb6FdEkc/rXa28+6Mf0qJo1TL73RHeq8l0T3qtLJg1UeU+tQMvG496he596qeZ71DJIaaESyXHXJqubj3qrLIagMpzWkSJMtvNVWWWo2kJqIkmqMwJyeaAvNAFPVaLgTQIKmcYFRw8U6U0mK3QbkCnA1Ep9aUnFFiHEkBp4aoA3FO3YNRIknBqePrVVTmrUVZNDitSwg4p9MBpc1JrYGqF2p5qJqAIWqNgc1IeaNtMykcyyMt1vddo7/AJ1sfa42gWJl3qeoXv7Vm3lx58ZTOHHA4rOs/NhnJST5vQtyK6VK0rHS4tq5rLCIXYCQoP7mOn41dsLqFUZXUvJn0zmsyaFj+/lkJz/Cp4FOtdzkIpbHVgO9VuxfCWbqcvLs3MqNwFIxikjUImS2VXuece1RlkaYmVfnVuCDwKkyZDhnPrycj8sU1ZEybe5U1cROkc8I+cnkYAHHvWnpuXtt8xMiIuBzkCsrVYCtqpbCljkbRjIqPQdXfzxp9yOp+Q5AH15qFpJlvWKN1nufMAS5XP3SuOVz2H41jpCYtbkLsNxUHLHOP8+lbVxbugOJRubkMCOa51ZWj1eQON2T0PHYce1Ke6Kjomy9qUF3dQ/uonby2BBJyMc9u1VVVzbjJ5Y8RpnaMe1dI8TxtHIsqrhPu7yHHXHHesC9vGOryxSgLMiAIckdT1yO9J7hujr/AAaqW8jItzh+N0Ljn8zXpNtL8vJ/DFeQ+GZ9RN6waJngP8ZA2/nnrXqVhcFlAYge9OTVtCI7s1sZ5HIpuxj93imByDjPFSKxPtWZoOCnvTSpzT+o4NNzzikBGcnqDxQMDgVMFDU0xj1NKwxq4PX9KcAB7+9Gz0/OnKPamIPpzSEZFPwo5PAqOW4hj4Zx0zTsAvI6Uqknis8avakkCRSUOWx2HrV6KaKZQ8bhl7EGiwEyDmpFGKYhqQUALRRSZoAWjNJRQAuaCaSigAzRS0lABmkzzS5pPegBaQmjNFADW96bSvnFVyzA8igCSQkrxXFeLLS4ubCVI03FuPn5z9K6+SZUTLGs29uI5YWUPgkcbeTQtxM+XtcspLC8dGDZBweKx/OcNgrjPrXffEC0ggvT5Yn8zqTJJuFedSyNv54xWuxha5ZEjEdeKkJKj72DVFJW65/WmyTOaTKUS21wRlQ1RGYk5qtuJOCPxqVQTyTwKCrWLKuSfer1qW3jpWcrAYFX7aQKw/rTRmzsNHuCjLmu8024EiDBNeY6fdBJB0ruNGvgwAyKJbGsGb87dqps1W7gbowwqjnBrIt7jtxqKRuKlzkVEyU0BTk5NREVZkXBNVm61SM5DCuKQCpwuRQE56VRFiMLzUirUipkU7ZilcBqcUPzUiqBSMKL3J6kFIxqQrSbOaLhJ3I+RSgmn7QKMVDaI2HoatIeKqoOatJUSKTJgaduqOnCpNUhxPFREVKOaaRUXsOViBhjmk6080yncykYVpaG5GS2FBz9ayrlRb6oGLdPQ09tTjhyjNg59az2ZrvURsYqSAc11TSumjohJtNG/I6yIDnIPOKgePyisigvzynr+NWLe3LRcnOP1qu8iPdFJVQRKSCGbAP1FLm94OX3TRhmhmx50CQbR3yxq2lzpgKiWVmB5DKmR+XFUWurOSPETbWBAbCjjHTn0qSSK0jiLTxMT2MXQ/4Vtexja47VYTqVqXhkBtof9XxjP/16w10aQuknlEhT0B5rQS88iKWMOIw4w3Py49TWxbanYwWTIJAXYfKQM/r2rCabmbxcVDUofblgtvsrSNCxB2sx3YHoeOBWBAZrm9uMMhkD556nHpUutI0N5EIJQ/mttkJP5/Srh0xjaSFYzlclSF3DAx1NKTdx043NG0jMkomS486Zhn5R8p47+lc7erJLrqTAOuQOW5JUEjNayg+SzFtu3klRs4A7etUblYWulu5EmZBzt3jaAcZ9xTZKsdh4dlnaJ23ng7cDAwK7DTLoiTbKAR79q4nQ3a4tAEhAQcKFPT61tWskyS7mLAA9T29s0pOxMT0CAIygqMe1TgHutZNhcKUXI29iM1rCRSAN34GkUO6dc0vFN8wD0x60x50QjcRg0DJgfSncGo1lXg54+tSb1AyTQABRnNBwBk0NLGiFiwA964/xX4ti0+2ZISS/8LxsMZ9CDTSAs654wttMDIu1m6Dnv9K851XxrPMxCAqOdv8As57A1y2ravPezvIzZZj6jFYUzXAOWAJ9jWySRlKTOjfxBd8SJOY35IIPrWjpPjq/0ueJg4aPBDITx04P51wa3Zd/LbIPvVlH86PyzwwHX1pN3EmfT3h7WIdb0qG7iP3x8y/3T6Vsg968f+EOqGSCay+b5eRke/NevKeKyZqndD80U3NLnkUhhmlpvelzQAUucUmeaMigAzQSKQmmkjHSgBS3PAo3GmUoORnNADs0u4etNAo/E0AKSD71BIwGT0qUnHaq1wWKHC0AVXKykj5j7VTmgWEE/dHoDU7SNGpyD+NUp5/Nj5nCj9KEJnmHxJjt3tgfmUjO3aRgn3HWvF7gBWwRjmvafHbpHbSK4+YcqQvI/GvF7zmRsc5PetDJPUrDrjNP201egqUCgvcYEGcYqZF5x60qAHrU+wcEGmTJ2GiPmrccW1chiDTIQA3UHnvVwISPlYdKRDYsJk3g5yfrXYaA7F1DZrl7O3LsOld3oOn7dpI5FJsumdXwbUZqiw+ar+0iILVZk5zis0avUiA4prCpDxUbGqAryiqpxmrcnIqqQc00RIenSnBeaRFqTGKdyJPTQWlCk0AZFSqtZuRFxoTApjjFWccVG65ouDK2KUA1IV5pVX1o5ibsh20BMnpU+0UoSlzCsxipipVFOC04ACpuNAFp22lApcGkaXYg96QilwaQiokDdxjYpmMmpduacIwKjmM5HlWpwsbolQOvQnFa+l26x2nmyHMh6EHrUU8KXV2DwxrXs7RET5V+boF9K7oq7Z0vTYfbSMIjntSXFiGUEEtkZODjP41JNEu0qGAI649abBMJ8qzH5fkXHc0mrMqLuRxWEkEZmLII2zn5snHvVYzk/IkrYXjeDk/SrssVxPAyxgFejAmsK8tp7BAI5Rg87AM4rV7XMXvYht3L6lLHNiRWO0knjGK6hLe1mhAt7fG0BWDN8p+lcjoRZrzeSBP5ny7hwfz4rsWnaEmOXMZPOMDbn+Q9aS1Q3dMxNRaJb2CNFKBMhtxyScDn6Vq/bbsWIiE6vFzzHwOaw9bV2vbNt553c7gcjitqyjuJbParMM4QEAZHuKm6V2N3shttaPE2xnWQkDDhTjGewrT+wqSiowVi2doABI/HgVuaVoIto98hLtjln6/iOlMnjhGohz5mUPCjuPfiuOGJVStyR2RHNcuW6T21t5ccQC/xEqD/AJFPEeSHZQGH93gH8KnjvgAqMMj/AGeSKJ4/MXdHhlPXFdE2aRWhrWF2oj2MT+I61qq+9AU59q5ywQvEAX2MvRif51tQM4A3KPqpqE7llgyMAQHwR68VnzaiodkYj0Kt2NRatK0cZkDMrKOBnr+NcJqmveanlXWMg8EcEfjVJAdFf+IHsCxV229GGeR9R3rPfxnJ5W+O52v0KNnBI9PSuJvtUeVyWlLEDbu9R71R88MoZmznjKjitowM5TsdVe+Lb2bcfPO3+5jg1yWpaw7ykE7s/wB6hkdmKsWK1m3NuCOVPHvWjVjPmbNPR4E1C7ImAZFRmI7cAmq+meHLrxBfO2mxyrBkEEnOz8+tXfCt1b299C06sFyUl9Np4z+tF1cat4aubixtZTDHIQyyrxvXsQaqPKleRDvJ+6Y+t6PNpt1JYXW03CjKSofvf/XrItbiURnJxg4PFXE8+8uS80pbMhxuPzMT1/8A10jWpjjlYAYLfrWb8ikrnpXwgu0GrGEqd7xtgj8D/Svc1+7Xk/wd8Oy2NjJqt2MPPxCD2TPX8f6V6sDmspG0NiSjpSL70hPNSWKDlsUZ4zTKOp68UAPzxQfWm565NNMo3daAHM2PrTWz3OKfnI4x+NRyAFTuJx6jigCJirMBvNSCTsMVWVYhkhsk981Kjrj7x/GgCbzPel3Z7j8qZww6D8KZ6jd+dAD2XPQimhW7nFR8o3JY/SnGQEd8+9ADZoFlXD9PWsLUYTBE2zeR1yGxmtxnDcMeazdS8p4Cj5GehFUiWeReMpJntiuSUB6OMkfiK8rvYcs2Bz24r1Pxjbz+a0W75DypxXm2oWzxEgjg+ho6mD0MHBXIP6VKnPFLjBII5pQrA9eKsq44Ic1MoKkd80mAVz0NPi6n+tAm7kiOe1adqgkAGOTVKKNWYbTjPatqws3kcdvoKGJbmlpunFpAdh69xXoOlWSxQg4way9EsSirvX8q6RfkUAVlJm2kUKyVC8XHSrCsDTiuRUjTMqRDVdwa05oupqlKmDVJjKje9RbOasld1N2YNUmRMai04rUiRmnlKlsh7EGKkQUbTUirWbZncMcU1hUuKCKlsTZXIpMVI4qPHNK4mxyipQoxTVXAqVeaLjuIFOKUJk1MF4pwSk5FJEYXFBXjpUuygrS5hldlxTQDmrBXNN2Vm5hYYFp+KcBikJxWTkJo8zsY3hlZyN2DXQQMtwpkVdpPHFYcUgIYKSQO9b1lERY8cbudx6V68Y2eh0dBklttQkks2fXio9PtNz72ZevfpV6JAsRVgCDxk96zpUkdTHEDknAwM0SsEU1qLdxS28uUlBLH7pOBj2NJOjy25coqqByc5z7UW0WxxFcb355HXFSXs7fZjbwGNY1OCo/rV2tEneRjwWkceJT8pJ4rQlnW7thFsb5MZDfwgd6vDStluvmzLHuXgEf1rHj3QTm3a5bDNyACzHH6VktEXJa3K97E0tzZmMsQCQcdjxwK7/Q9NlEUaMSEB3Yx3rI0zQEk1CN1XKdSc9TXfQQCCMY9K8rG4lpunHcwqzWiRFPshgYs2ABnrXKMouL9z9skC7ssFP8API6fStXX7oRxnJ/DOK463mklvSI7pwDywA/qOarLqHs7yfUiOp2EDqu5gsjL03uMH8Kk811bKbm55HeqiNK6qr3akYxhmySPxp8cMoI/iXPQnIP0rumdETc04723pkbvvZ7GughRQm08965zT5oVcMCc459R/jXRRyggFWBU85FEdiirqNss1q6uTgjrXkGvrJa3MkL4mRehcYKj617XKd6EDHIrzXxjocrxvcQqCRy204/If0qkwex50Gy52MV9AaejMHGApbvg4zVB5HimKkFecfN0qxEzFckBW69cg/SumL0OaT1NDznxyjH1GeRRIiyfdXr1z/WqRmwwVjtPTAGM1ZhmLsFCnPbNVcRX+zGNiyqM+ue9dFp+qQTW62Gp26zxD/VseTGfY9cVnKyEZJxj8qsW+n3dwfMgiYjGc7etGw4mrPaaOto/kWMSPgb5F4J9h7dO9YSaXJd30ccS5UybQD069K3k0jVbthbwwkkEdsYrqfCXgy8guS+owBduNjZznmpm1Y01Z2fhm3lh0yGOQYZF2n61vqoFMgi8tAMDPf61PXOzVbDCKaT61J0pmPWkMjbrgdT39KTJA2qM0rYAyxxVaacA4VSQOp7UwHu+EYk8YrOa8jjlAZ/wz0qveXchR+SkSjJJNeda144tLQzLDMpdTg/xGkyXKx6bPqywxmV2Cxjoc1hXPjqzUlVdWPp1rwzVPGOqarKYo5dkI6ep+tJp97K0yo7N1HtmnZkc57Uniw3Dcj5SePmxityy1H7Qo3smPbmvMbFZI0SQK5B6nrmujsppWUGNMOOx4P4VnqnqWnc9AW4QAYI+p6UruGGQAfpXNRXuYwJFdDjGRV22mbflTkfTrTuUaLyEY3ZwfepYmBHJJ/GoQ4dcPgH0I60/91jO0g+xpoAkCFjtYZ9jzVG6+7tkUsD0NXWkB5CBvfIzVS7bgMFUKeoaqRLOE8RWW5sYyD7dK4DX9AmFuZo49y98CvWr+2eacDaNp9BkitG10CC5tjFLGCrDB4pmfLc+W5rdo22sDkdjTliAXnqOa9b8ZfDKW0d7mxUvDjJHUj2rzefSJ4TjYf8ACquJqyM3ywy4z0FPiibjjt1q0NOm3A7DWrY6XM7ruiOD3obElcoWtq7uPk+uBXa6JpkwKtsyKv6b4bieJWZSG966m2tktowoA4HWoctNDSMUtx1vGI4h8uDSs1OZ6iJ71nclu5Ijc1OpyKqr1qZWxU3LjsK4BqpNGatjk0rRZFO49zL8vB5FKI89qutF7U0R4o5hNESRcUjx8VaUCmyLxUuRMloUSCKFOKlZaZ0NQ5GLHDpTGOKfu4qFzSuSNJzTaQmkBzVJEkwOamjqugNWEoZZYUZqQLUSmp1ORWUnYtBtGKYw55qXFMYVjKYyPFIVp1ITWEqgWGkYFMPWnMajY1PtBNHmdlHI6sAOWPbrXWb5bW1RQmQBjOOKydLgaJA3G7GRn9K02ZmC+ednoCa+jSubN2RXub54gzKirnrk9qo2N9MZCUAZtxwWPWpNTa3MRCyfOD93FGmAvAF6J/sjPPvR9olt8ppFlILyBlkfvgUtna2kkxYITKowdw/nVOUtAWRB5hJwCVJNY8utyWssoSLG4YZT7U5yXUUUzsLpluV8tAhC/LvB4Brn7WCS68SKkg4iH3gMipdLvFukV4pd6jnYeMe59a6jRNPjkvjOoyDzkjFceLmqcfaFuq1BwZ0em2KQxKQuKnu5hDGc1aA8uMVjavJuh+8ik9NxrxcLSlWqc7ON6uxx3iG9MrkE/JnqfrXOwXKRTYbycHsJPmA6dq2NYjiklZAyucgMQcqPWqIttPimDKxcg7SwAIzXvqPLojpjG0S/YtauxMc7DP3QWJGK6iymkhVVxn1YVg2pUYC26hcfeWtO2nDvtWSM+1RIqJur85yUG7sRxWrZSsByO/IPBrJtX5CM3OeM1qpJjCv0PQn/ABqUWaS4NQ3ditxE2QDnjkZqaFu2KtpGD24NaoDxTxh4Xe3driKHhsk4H6fT3rg/KkTgrwDj0xX0/faRFeRkOMg9x1HvXHyfDi1bU3fBCPyCuPlPuP8ACtYsznG543AJNu1snPQkZrqtE8GapqkqeVE4jOD5h4GPrXp+nfDjSrSfzZE8xR0Q5xn19q7G1sre1TZBEqD0ApuaWwlT7nF6V8NNOgMct3vlkUcqzfKT68V19tpFlaoyxW8ag9QoxV8UtZObZqopFdLSGNQFjUfhTxGF7CpaSlcY3vS4prHHTrTUfd+FADiab2yafxUchIXPX2oAhdg/TgDvWXd3HlKSCOvcirN3cLBEzvnH04riNZ1zbvMckQx91ckke+B0qkiGzn/iR4tnsdMa3gnVJZTtUKO3c5rxEymaQtISc/qa6Dxlq02pagd8okVOAFGOa5pYJGTewYrnGQOPpmmkZs07V8kYC49zWvazrC4x8pHtkVz0RMYwN3HQir0Nwsnys5Vs8HsapEarY9L8PasGiEUxUpjoB/8AWroYHjV94bCnkDGa4TwkwN0FkbKk4PGfxr0uOz2D9116gEY/LNZzV2awZesblJesat2IOcmtWGMKQ0OAuOVJ5H0rBRCpBZT15AAq9bTxrlcNv7c9fwrM0OhhlBTa2D2wwo8k53EYHs2ayrV9wLJKxH8Ub9atC8WA4YsPryKaAsyQMUyjfQg1nyFo9yzAY7FTnFWlvo3G4MOf7tZ99ciQ/Iehq0S2LbxB5socqO1dFbIoUYXFYmmIWwT1FdFEPlHFNjQs0KSxFXUEEdDXm2v+GLRrtyIgoY9q9N7Vha5DG0RY4GO9Ta6FJHmkfh62QFZEDAdCRV+DS7eBcKoxV2QgMQKaDxUIlMRVEYwBQWyKDSUbidxDTD1p/akC5NJgkKop1AFOArJuxqkOU1OgyKiVanRanmAjZKjZauFcioXSochMrdKazUsnFVy3NHMRewNUDdamJqJutK5jITsajYVJimkVSZJAaFHNPK805VrVCsOWpV60xRUi0pWGiRelTqcCoQeKeprmmyyfPFNPNNDUFq5JyGmMY4FMJpWNRmueUtRsRjTGORSmmk04sTOaJjCjYAAOKY8QJ3GYsuM8dankW2Mfll+c9D0qjDGwmKo5GTgArnFfUwvY2qGdettYKIuvGWOTitXTI3iX5AV3/dIGcVWvLfZcBG5Y8n0q/FerFGsLxbYx1ap+2PaI5A0cm11LE55B5z9Kh1KO1u7QqyoZAeOMMfWmC8KF3UfMflGPSqV5M7uoV8gcZx1qpNOIoPllc0dDsVjdVhPJPzAelek6XZCCJeOa5Twhpj7y7DO7nd6134URR+mBXkYluq1Doc9ad5sp6hcLBFkmuC13UTI4EZHHPJ4Nafi3VvIULuAycVxEc0k7uzHI6jHpXZhqaghQi92QT3i8sFcFmyFHO3H86yr53EJkBJ+cZP3f/wBVa0qROcqpB7kdazdVKJbBEDckEHtWzOpFmzuBK/7udm44wT1rorUSxw/umGT0IHNc3pUfmsGVck4HB4HrXZ2m1ACsOEQYDEZyfQUW0M9bl/Tby5+5Id6+45Fb0DOynaWI7qeornGd1IZyq8dBVyz1BoCG6gdyc4/GsmjROx2Fn5hUFeCPUda6GFNyA4xxzXOaZdecVZGHPOAa6iDlARxWqVkFyRYwBS+WOtPFLQUMHpTsUUCkA6ikooAWkooNADTUBcJwBgdKnNVnQltxPA9+tNADzgEc9ahe7ZwVhUM3Xk0/ymkXGMccHNRrYx2zmVSeR+VNCZTv3UWUn2pk6ckDGK8V8VxTWczNApRHOFJ7j2r2y5DtKVePdGeQRzXGeO9FifRnmRCzIdwP4VasZtHgOrxssSSNkknknvVCFnZQucgc4PSty+SZ13LjC9RWYbdGIOFB75ptGfNbcpncjZQ5wOue9To/7xWHHqKsfZ1ZQM7j04HSrK2IKp0Bz6UrC3R2XhC0klUOoIH8Ljr/APXrv4LqWOMRzuSB36Guf8IabtsQQAQR92t9o5C21iSR1/yaylpqawWhr2+2UKRKTx1/z/jUklr5o3g7cex4rPs/Ll/dkrnuG4qcwXELjypWAHbdnipvc0NS2eLABbcw4Jzu/PvU1xgIWVCcfQVmwxtKQ24GUfwk8/hV9I5gPl49VPFUhEaTKQpCqVPBXPSi5iBPKqVPIOOakS1Utu8sKc8kcVYkjAQADI9+1WiWS6bHgCtkcDis6yTaorRBGKTKQjSYFYmryK0RDsRWpczrChOM1yOra9btIYP3m70C1UY3FJlKRFJJU5qMjHFPiwY93PPqaClYtWZD0IjzSYp5GKSgEyI5zT1FGO5pRUtjjuOxQOtFArCRqTIKsIKgjqylZNgPxUMgqx2qJ+ai5EihMO9U361fnGAaoSHmqRlcQUhWhetSYoJZFtppFT7aYy1okQyHbSgU/bS4rS4hmKeppNppQDmkxkgpwOKYKWueY7ji1JuppzSZ4rlmhpgWppPNBNMJ5rn5SrgTUZNOJzTDVxiS2czJYM5M55A/GrEcnkwZ27W7Edar2k8joS7bh/dNEssrhiFwvoeMCvq0kkayk2Ps7YXd2zsx2YzkjFXXFisbIvEo4G8ZFYMWqeTclEk9MD0rVl01r5UkkO4kcetSlvYblfQq/YmB3kF1JzuXnPtVm0sTdMieWq7jlhnmpYrVrUbXlC7echsgH0ra8NRedcHcoLZ++O9ZVXywZMm1qddotitrbKAMcVLqk4igY56VcLLb2+TgYFcbrmsxlmRX6fjn2rzKUXKRha7scH4tvWlu41wcs2V57VLaQNLbKMbQAG9OfrWRr1xDLeJIqspBGQ3rVixujfMY4y4Ea5JJ4r0YWvY6uW0UjUksWjAY7Wz6Csa+VZIAjAhmcAZOc81r6pdtHat858xdoUg/nmuXur1J9VhjiPC8nB6miVthra5vWPl2QOUUE9F9PrXS2d0TAJJHGScKuMgfhXK2+1mVAwIHLNjp6mtoXsPlfugGPQECmtjJ7m58k6c4AP8AEKhEPkygg7Mj7uetMtp2BC5JcnhQOn1qyIvPkLNKHYnIwvP14qXEtO50ehsPl/djI646H3ruLXBQEHP1rjfD+nyIVLSZT0FdrAuxAKt6IqJMKKKWoLExS0UUAFFGKKADNNJpTSE0AIRnrRtGScc4peOtNL4pgBwBUMhLAjtTJJywwnXr+FMzx1PNMVxQCFwRkVjeIbaO50maFgwVlPTqPpW28mEyenesPVJybKXYRkDOc4xjnrTRLPne6Rra6lifBKtjjofeoBbwvzs9xUviW5Ua1dH5RukJ+WsyK5O7a7cA8EelaqSOeW5eS1jRsgfQYqdVDYxjI61QN0VU7vmA71JHKVIdAdp7jn8DRcXqel+FNWjhtvKmAYZ6/wCFdgYILyMSK+5SfvBga8t0G7jnCxkmOTqGzXodhG+0YYCQj+E43d/xrCV7nRHYdPpzq3mI/wAwwdy8D/6xq7aebIgEpyB03dj9aiS4uInUyJlRwTjGa17dI5Y/MjwG6Y7f/WqLa6FXM9wTOQ2Y5U4PuPX3Fattc+cojkyG7E/41I0ENwoWSPDr3P8AjVRIxauTGWMY+8h7e9VawGntIxzj9aGjOQe36U+3kWZBjpT2TBypq0Jk8CgCpznHFVopOKl80DrSGilenC/PnFcbqtza7y3AXPPHNdbqNwQjLtBU984rzvXVIdpFYge4Ga2gZy3NS0likGIjkVb28VzmhXAZsF811KAOuc1y1NGEysyVGVq26YqNl4rK5mmVSKMVKVNN2Gi5SYzFOA5p2MUdKzkbxQ9OKsoeKrJUymsWBPnioyeaAaRjxU2M2yvcD5TWXJ1Nacx+Q1mPyxrWKM2hEqcVXXg1Op4oZLFNNNPIpppoTG0u2nAU7bVCIiKSpiKjIpNhcbnmjPNIeKZmuebuDY8mkJxTN1JmueV2FxS1NJpCabmpSByFzSHpSbhSFh2q1EXMczahwnzLjb+tWcCaJgQoPbjvUsMkTwh3f5+5x0qOeRI0Yh8+4619HF6HXJanNtbyR6n5gAPPYV09tetaQFWYqXGM9xWRahWuvm5weprXmgt5iqxkI4GfU0oysmyZJIhOJGwwJzzuPJrp/Dk8Mcp2EbAOvrWGLO4giDheQOtMhu3so2YkKx6kVzynGorJhbmR0XirxOlvbmGOQBiK4G1vnviyySny+WJXlqu6kv2wKwk804wXH8q5xbeSDUGgVwqBgGOfz/CopRUHYv2XLDmRBr2fOhdQwU5wSCD9K6Dw7ZrdWu4E4T5uvH61n66ka2kbNIXCMBu9Pam6RdSuyW9t/FyEI61sl7wpaxubF5Yk8Lgs3bHPvXHpYS2mryRvjcGJ46V3jh/KYkqGwF47Z/8Ar1hXcI/tGRu5XAqZ6ahHXQrMLrzTCo2xjDEg8mtq1mghiG8qzDA2ZwB7k+tVHUpaSOq4LdDnJArOEsMchDszAMAQOOlUmZzVjsoZ5LsARtsjwBwPvf8A1q2dOtASAxPYbW71yFrdq7goWCE8BRk4H8q7XTJVdUL52joDyRVJCTO20XYsSgOpPsMCugQ5FczYzxooJYDFbVpepN9wgj1okjSJoUZpobNIWAFQaD80oNV45VLnnpUhkAOMiiwEtJmo/MXPXrTtwpALSH60hOeP0puTu/2RTAQk4xmo2OTj8qkI79KruxBxjp3piM4yGCVAeQeKc93g56ccVS1MH74blTms+K8ckJIQRnAam2SjoWn3Rg9ieoNc5qN/FK0sYBUshU85FXlu1Csmfk6DBri9evInScoQGVid47GpBy0PHfEW3+1p+O/PGKyoWK45yBVvW3k+1ssuSwJwx7g1mQvsfP5g+lWmZ8tzWimAXBA4H51aR1D7Qvytz1rMSZNhAB9eeoqzCQ4CHOf4T3p3It0Og03clwpRgQeeR2r1HQJN1qu4kqOA4G7HtXlGnpIWTsw6N616P4Zv3gG2aJjEfvDriob1NY7HWO8sZV92VYcgHg1ZtriMMELMu7oxA6+9QHyTEzIw2dRnkVUaRMghvLJORzlTU7FG20jAbX49GHRqfAuTyOe3of8ACsuxvElzDKShB4YdvY+1bMYaMFgNwPcVS1AsWsQQEL06ipnYA89aLdgyAgY9qpX85iYEdM1QFuOQbsVPKiuuR1rFS4YncvPcVbivVkO3O1h/CaSQ7mVri3McLNBtx6k/zFcDqmqK4aOZQrdDgYrt/EV5JDbu0TtnHZc/oa8f1S5E12zE/Nnpt21qtEZXuza02dEmBVuPfiu60+4WRANwNeZ2rZjBBzXWaDc4IDMaxnG6LnsdeygjNQOBUyOGQUxx3rkdzArstJtxUpFNxU3KREVppWpSKaaT2NkxFp2aYKN1ZMTZKGpc8VDupwNBBDcNxVA8tV24qmB81apWEGzJpwGOKlVeKQrzUtiewoHFJingcUhFNEMSl6UmcUhOKskUmmMaM01jgVDC4xjULNipDTCvNYyRLYgNLmmE7aYWzWTRPMSMaYx4pN1JSsJyEJxTC1OaoyapIm5y1rKzArIhOe+av7RGAzL06g+lYraosVxhQp56YqcXrXSnHGB3r3Ez0thmo3AVt9uNuT27VpeHJZbicecNxzxxWalg8q+YE+TBJ962/CkTLekE/LngelcmKqOEGwqR9y52E9ofs3QDiuN1l2iJ2k5A7V6LcxZtfwrzTxD5/wBpKIox3Oa8vLK3PJkQWgy0UW8X72QGQ/wr0FcxrN0Yp51iALsQODWkkxET+acOo43VQjije6WWUDaTnJr2Z73OiDvGzKMSXVxbkzFmwQQG6cVPp06JdqFdlOeecYrtLWG0njW3toklVuXY8Yqle6LpzTObYoJFwTgkgt3FNQkveBuElZD2d5XTdvIIAQAZ/wD1VHqkb2txC0yMisnBIrYsJoGghCxxNKR0zjBrG8U3BOqRxzYyAOFNaSiramCfYo3kiJalmJ3MdoYv/IVzs9xEOB5j5PXOMmte+VGgJjBIHcnOK5q5k8tycc1PUjc6LSb1bUhiNi9SM8k+lei6XqbSRRtKCoAA64/+vXisGpC3cE53Z+91wPau40bXjKkZwBGvGGPX61a2JaaPTxMGAZgpz0ANb+iXcrnbgbR7dK4vT7hrkxEqoQ9MjGTW9YTR290sZuArfxc9/SnY0Uro7hJMcZpWlA4zgmqaSblBDfpUF5c7ejEnsBS5SuY57x3rdzouktPbPtkaQKG9KxdD+JsN1bRx3W7z+jsela/jDTjrXhyaJOZgN6georwF/NtrnJyu085GMU7WIk+qPp6016wuCAk6OT0rU+1Kw+Uj6CvnPSdWnsyJ0fK8fKTwceteiaV4qjvYcKyiUYBGOMntT5AU7aM9Jjn3gkdvXipVfeOtc3YakrHDPuzwvPArYF2mAQRgcfWocbGilc0OtRumQaqNfopOWA9OalS7DjGRUlGLquYw21dzAZx7VjW8aPakq5yOcVuaxOodcc54rCdRvfBCgjdgUluJlW8n8lWkWQYbBH1rlr1/NjmYqCGPzHb/AErob+wuJFj8twIT94k9PrWJe2c9nHuhdZE5yA+f0psyZ5/relJcHerH34ziuZk0qZZCFQ4HUjvXohjgaUlg6MfTmmSpADwc+zLis3UBHBQ6ZccEKfoa17LSpMAspFdLDsX+AY9hWhbpBJIFkYRt2YjApKpcprqUrLTyAABu4/GujsF2FSGdO2cZwfelgsvKGTGPwPB+nrWhHFG0ZcDdt+/64oaGmTxXzw5EkYGeGx91vf2NLINuHhIaM9QOo/CnLbxyx/I3OMqw6H61H5YiPkvgK3APXaadmMt2DZkzIPxHcV1VsDtUg5wMcGuSskkE+MYYHn3rrLIYQMOPUVcQL25Y1yP0rMuwJ2BU9an1GXyrdm6YHUdq51L9i5V25zkHtWlibmvD+6ba2AeuD3qxdRxvBvPbuByKw5NZibbG5GRxnNU9Q1yS2hYb+OmaaQpSKOvau0WUYrnoGHf2IrzvUHM9yTjv/nmtfVtSN0cSMA2eu7giszYpIzz79auQoK5Jbny4ufStDTrwpMADVL5Qu3NW9OiRphlsfhWZcnod9ptwHiXJrQJBrK02NVjXDA1rfw1w1LXMXa5GabSt1pM8VmJMY1RE81I3SozzSbNIsKYetKTio2apYNkgNO3VBupwNCZKYkxyKqAfNU8p4qBT81aX0BllBxSnrSIeKfgVAdBp4phpxIzTTzVGbGmm4yafijbVk3GYppGRg1KRUbmoYmyFuKY3Ap7EVCzVnLUzuNam4zTutAFQ0IQLSkUooIpWAjYcVEwqVjiomNIGchNp9t52SDhjnOeaesMFsvAJHqTmqE880kvU/WpvLkMJy/avd0Wx6F7svtqg8vYsgweuBWx4UYyXhPXmvOC8y3GMseeBXpPgyEoA56tXnZh79Fk1NI6nf3RxaE+1eT+Ips3TgHnPJr1S8ObUgeleeXuktc3pO3vXkZVH2bbYoz0Obt0klcOef61P/ZbuBmE4Pau+0rwxAsal1Ga6GPQrcKBtFelPFty91ExxFk0eXRRTWsAgSNkjPJwOT70okeO3lJjcyN8ob09zXqo8P2zclAaH8O2rEExLx7VssVPqiPbPseM2+laih3xS4xyOTWfPYahJer56u7bupPWveU0C1Ax5a/lSP4atG58sZ+lX7dvoP21+h4heWjwWgOcA53A9K5K/AJBHf2r3rXvBiXMREf5V5jrXg+5t3J8tsD0q41E9xwnFvU4XJVwGRWJ7MK1rXULu3VFjgAPrjv8ASoLu0aykO8yAY6bQR+tQwy2wly7nA6/uxW8Xoazv2PSPDOrXCpJdSkM0eBubgAnsPwzXU2+oQZDI3JOQwGTivMbXUYWsliTcsSOXwFAHbH49a3NO1hGIVEwD1LVV9TJOx7LpusRz2ioHJYDHJqdwCCGJBY5NebQXzxOJLbJYDIrqNK1trmPZM2ZMcn0q1qPmtub0NwkbeUAu3v8A414/8QfDy2moy3ERKwTcjjvXp73CqHwQWHvXKavO2pxyW16CVGSDjmqcRc3RnlSXr28RTB4ottYuLedZIpCrA5qfXLJbUiNTyGOT6jtWPFEQ5LHA7GsXdDO5svHs8Cr54JKj7y9zXSWnxBguIx+92nH3c/lXkM7AZw2eKph8EfPj8aXMJJo+gdM8RrfyFXlHynCjt7V1GnXrFCN/GcgmvnLR9ZmsplLSEqeOteq6B4jWWzJyw4yCahyNIs7K8m33mGb5cZ9abFA9zIXfOAcA+oqhpkkl3A0rnOT0HauitFZU4U4PIoiaPUY1uVhKK4GR3FchqqtbyNC+3J+6Mbc/0rtpThOTtH+0M1xviO7QAhnDOvTnFVLYhnHXqmRjsGG9PWqCxOzcg/lUs9350hLdvWnRzjIyc8dfWuR6stbCxQMrAZ4q9EGiG2ePcnrjpUYnTyxuXI65HUVPFcsq7cCSP6f0ppITNSFngtcwyF4hyvqD6GpIdQLFZUADfdZcc/8A1xVa1lSAiSPmNuGXrxU1xZr5nmwfKeuAeorTXoJGp5mcSQAjofdTU87LcWaMEG7qCB0I7VU04sxx37g8GtEW5wQhyp5q1qgJrBN+x1+93HrXSxsI4tx4GOayLCARKHIxik1LVI7eF1LcdDj0rSKBsr+IdUjFu8fmbdwIDgZx9a4S31uWKZ1kZXUEZKn9abrmoOs7FGJifG4dcj1riY72SOd/mzzggccVRnc6XUtSdrhpYnO0n5l/xFQL4km8r7PKRJHnjd1A+tZxuhKgdmzIvGeh+tVZnSaXoMnnNVcViWe5WYEFSCDkZNSWsxAwTkVQltXAypweuKLe4Mb4YH8aTKR0caiRQRzVy0hcSjaAaoWcwKg1qW0uyUHP5UWuU9jstLRxGu6tQ9Ky9NlDxg81p54rzqujMXuMY0wmnN1phrEQ0moyeac1R980FcwNUZHNPNNNJsVxnenjpSUDpU3KTI5TUIPzVJMcCq6nLVsloDZaXpT99MUfLUTsVNSwuT5z0o6dajVsinZpXM2x1LTQaQmtEZNtik1BIaezVExzSYn2Im60wjmnmmGpJYlOxxSU4UmhxsJ0pCeKVqY3Ss2NdiNxmoXqY1C5rO47HJ22nzTSn5eDW3b6DNJHgp+ldLpthbx8tgmtpfJQDGK48bnlSnpCJ163PNpPCE3nFwCB7V1Ghae9pt3jpXQvPbouWIqnLfW8algRxWOFzKtiVyzjuKouYtXNwoj25rnru8jtjuJFULzW99wVDYArC1i9MqY6+9exRw9i6cLRszoY/GMcUioGratPFkTqMsBn3ryQwCMCXzNxzkjHQVetZWaJg77QOnHNdPsIxkHsIctz1weLbZCAX/WrsHiS0nwBIufTNeGiS4+0EtIWFaFpPPDJuEhI9DxirlypHPKi0tGe2Pq8CLuLjFZ8viu0R9okUn615RqHiGaKLBc4A5rH0qe4v71mdm2Hn6UQhzERoyetz1u/8bWsOQSCa5bUvGtrMrDaDXHaqSbhsH5VGBXN3juJMbs8mtPZo0jRSerNDxBrEF0xKAVzcJLuWDIFHJyQKhuWLScntUGcVrFJI7eVWNj7U7YU3BCA9FyRVixu445Qd8jAHPpn/P8AWsSN+MD1qSOQI2FbtxxTM3DQ9N8Na0kzMsnAxk+grrp3IgDW647rj+deN6femM43HYpGST1/+tXo+la/FLbqJGA+UYz69qpNmFrbmrbXlytwIxI2O5PPTvVq81CJlIdDkcZ96ihlgY5IGfamz2wlbrkHk+1L2g+VHLXmkyarcs6L+6Q8D1qvP4ehMbKG2PnHSupSMwSHYfl7ilkt0mPmqRuA5B9KcbMUro8/n8J3LciRSKgXwtKjfO613E8ZyQg28c1F9hLumXJyuTWUovoVGRzEGgxQkFjubriut0XTpnCAcKvaiKyCFSQDjrk1t2K4kG0ZQHHFZpa6lXR0ul4jgRAMEH5q6WJgiA7hj1x0rl7W7jhckMM96rav4gjgQlG2tjGB0NbXQcxpeItdtLeHBlCyA43DkZ/CvMNS1h5ZH/eiQH2PNR6rcSXUxk3lg1ZqpzyDz61z1KjeiKiurFEgcll+UnqP8KmXLpnuOtCQ85xirUcRCkgZ45rJFiQvu+UnitG3t2K5Q5HWqixDcGxjNX7QOsuFOCe3Y1SESokkWCuSPSt61jMsSMoBx0xwarRrlVZlyp4J/un0Na2nKqsAAME9K1ihWJLa2VWGeM8fjWrHGEYFhjPXHrSBETJbgVnX+t29pmN2wcfKfXFdEYkN2NC91BLOFuQARwa8u1jxK7XZMcm0AlSvpUHibxRJIzokjDkFSp4NcS9y0zGQtk85FU30J3OjvdUE0YB684KmsF5lluGZTw2M/Wqk0jqPlPA5qskxEm7t3qeo7aG9CS2ARz/OpnTBHPANVbKUSDrzVwsGfHcdaolMmExeEA9RVEg+dwePSrZT5ciq+wpJnqDQxpmtYkgDNbdty4zWFb/KBWxZSgMM0y3sdppgPlr81bI+71rE0uVGUYrZByBXmV/iMWIaCOKKCeKwuSQvURp8h5qPPNS5AB6U2ndqaOtJsYuKXjFApCeKcRorXB4qrG2Xqe5PFVIj+8rqjsNs00+7UUop6Himyc1mQ2InSn5qJDSk1LM3IfuwaQtTM0macSWwLcU09KOKQ0xIaelMNOY80080gYnendqbjmnVLBDT1pjHinscVExzWbKGMeKgc96mbmoHqbBqZVxrssL/ACP37GpIfEM8gwGJNc9dhSzFjio7efKbV4P869J4Gi90dcldnTXGsSSIQHye4zVSHUJZFKluTWJO0kSllbJ74p1tcBADnnGapYenBWiikkia43rPnPWmzudgJOT6UxjvYtmoJgzcE8elbKKHcjLM7eg9KvRAbQCazyzLwB1qXe6gA5rGcW2RK7RpxRITVxYBtPFVNPt5ZWGAa6SDS5GQfKfyrknJJ7mDk1ocPrcPyEDHXpTdOnltLdtgHJwD3FdZqXhuWYZCGs5vD1xHEQI2yBXRSrR7msZrlOVnvWMjZ5J9ay7kmTn1NdLNoFwAQUOT7Ulv4YuJSAU4JrR1YrqNSXc4K5RvNPp9KhCE9iK9Uj8BmTlutUr7wULdcgjilHE03omdKaZ51jHGPrUiBcA7jnuMVrX+lrak5INYztsbANbqV1oNoleU48scKOoz3rRtb+SGzwD0dT+hrGByck1IJisLx5+8QSfpQmRKJ3OneJiWAJwBzk11tprsbx5ZvmYd68biuWjfduJx0rUsNQuTISGLMeKlozcGtj1wXEZQnePm6VB5hRyVbgfrWVodhfXm0tu28Ak1oawy6dGRu5xmsrtPQzunoy2biNlTzD83zHil8+3wMMM44rhzrTearK/HI5pJNWbcVD4xx171Tk2g2Z36rFICwPTk49KfNqAs5R5bfw5rkdI1hmuny3BjbIzx0qe+vw1sjjjqufbrR0uNG5d3zTMHhLAuMgD+VZNzdySR/Mx465rMi1RzCBu4VuD6VdlZbi3E0eMtwwHY/wCeazk7lRsQxlm6dO4FWVhB6D3+tUoZVWQDPeryTBSMHIrMtSuPEJBBQZFWYkwhOSOMcUQuhUleSOopfNAl+UgiqSC5MEG0hlyODVq3tg7KyGqss4Rh6cZ9qsWl9Cjgb1B6MCatIls6O1iHlYk6n+dTvGICHRsAVSjvohDIWIATqfT3+lZN34lh8wxrIME4Vh3OOlbxiTc6e61dEgLHlSPm9q8w8Y6oyzKyPkHPGeD+vvWq+qGeGWP7rMMg9jXnWuXU0kmxweD+fvWl7ExTkyJr43Z8t84B+Ug0iKQxBOOOai02AvKCRmr19GYiCKnU3asrFWQFXHcdxTPJIY4+uKmD70wetNyQQCfbNMx2LVmSpGDzWm3zYbuRWYgKgMOvWrsEu5OmR3HpVIllyIuuMj5T3FPaPnIqSDaV61MUVl4ptDiRoMLxVy2c7gKrKNhxnNWoAN/FCLOu0SVuA1dQjZWuW0djtXIrpo2GwV5uJ3MpscSfWmO1KxqMnNcbZFxrc02pQMioyMGpsA0ntSZpTxTCaYXH5prNSbqQnAq4iuVblvlNVIW/eVYum+WqcJy9dUV7pRpq2BQzZFIgJWhulZtGd2mNTrTzUaHmnsaRnN2YhphalJzUZahCbHZpC1N3Ug60BcdnNLjpSgcUVLZcUJikYYp5NRsaTY2MY1Gac1JSsCYwjioXFWD0qBxWbKbOB1CUmQxt1zREnlxg7s02+jM0zOo5zTIldV+c4xXtHZYmVhJKE7d+asG3HVRgVBBCCxk3fSrf2tBheM0CJorf5ckcCmShd/AGKSW8Hl7U6n0plupYksBk0BcgnUFlUYDZHSrdtYrJIu48Cs+73LdrkHHXitBJnKjZnpUTXMmkKWx2ulQ2cKKPlzXSwtbBRjFeU/b5YFBDkmtrT9ZleIZY5rxK2Aqc10zCfundT3Vsgw2KzLzU7OOIn5a5K+1SQybQxrH1C5by1Bc7jWtHAyWrY4xbOgudYttxIxVU+IYIVyMda4uSeQsASaz7yeRYic45rsjhI9S1BHZ3XjkRZCkda53UPGctxkbutcXLOzuSTUJYnvW0MPCPQ6lGKRq3eotcnJYcms3OTn1ptJ3rdKw7jgPTqaMZpAPStXSNHm1CdVRM5PpQIrWlhJcuFVSSa9K8IeBnmZJZlO3rzXUeEfh/HFGktxHz7iu7nFpo9pxtXaKxqTeyMKlXojHuo7TQ9NZsKpC4rxfxLrxvbiZQ3A4HPvWp458am8laC3f5QcZHevOZZmdSSfvHNVCL3YU4aXZcW5JQjP40T3Deb1PTI/GqUb7gRnkdBSSSF9gPVRitLGiirmxBqDwRko3JXafpUsmtFrJUydzMc+wwKxEkZSAehHNLLGSodDlAPyoSE4o6GO9AhVQwwOp9atw62IYpIt2Txtx69j/OuREreWRmmLKw79PaocA5DrY9WxJvYgndWwL+PK/OOmD/AI1wAumU5BIOc1L9ukVMKSc+tS6YuRncJq4hZ9xwBwDn2yP5VVt9a2zj5soDn8K45tQlZCCck9frSLcuuMf3ccVSgg5D0C81dS6uGG0jsfQ/zrLvNTaKUOkmc9ifvD2Ncob2QxhCeASRn360xrqR02kk85xVciDkO7g8Vuy7GbLbdu1u/HQ1zl1fF5meIlBkZXPT6VhrKykHNSJIclietVqOMEmen+Fp11AbJOTjAz2qDxZoYhYuq8GsfwhqYtbtdxwAa6bxRrMNxCApB4pW1uXy2d0cnpsSRkk9qZqMqO5UEYqjLetGDs71T+0M75Jp63FJXLaja4bPFPkUfeXmoojvXpzUinH8qaMXoTRMSuB+VSwyeXJzkVHD8r5xxUki5bIpkXRr27/KGzVwuvUHBrNtXAjAJpZJCvAz9KoNC95mR71YtXJkANZcEpzg1q2yF2BUUi0zs9EXKg10ygba5jRXZUCkGuiVvlFefiE+Y56khzHFM601npEOWrk5dTFSJwcLULHk1I52rVdmptGqYjGo880jtTN1TYLokzgVGXzTS9RlqqKsTKRFct8tV7c5f8adcvxUVsfmrrj8JaehroRikkPFRo3FJIxrFvUi4Ifmp7EVXVvmqVjxQZSGs1RE5pzGmUmQOFPXrUeQKcDUXLRMDxSZpm6kzUmiY4000hNNLcU0h3QhPNFNJozVWFcVqgbk1Mx4qBulTYTkefLcHdg+tR3c4K4FW4NOlkY/KafPok5IIU16kppbndFra5Vt3KwgE9qjb7+VqVrV7c/vFI/CnKFcgCmrND5tCSBN4561qWsPykkfmKrwKsdXhOqxnH061SSQrlOW3MkhITPcYqtsfzfL/i9K10dfKbJ2k9KoSSJbzb3bINQ+479CX7AzR/Pjj0p8Km3BBGKJdZtoogqJu96x59bbaRswDRJJoiSuXjIZbogGqmqyKmRnLY/KqdvcsS0rZI9qo3Mz3M55PPejZWC1iVGDqWzkjtWZqEgKbAOma0vs5ji3g8DjnvWRfE7SPyoKjZswm5JpMUN940VRuL2pO9Gaeil2Axk0BYuabZPeTqijqa928BeDo7eFJ5oxnGea4f4f6CLi5SWRflHPIr0/xB4ptvDWmiNCPN28Cpk+hnUbb5Ub2ta9Y6BZEu6ggcCvCfF3jy51ad0jkKxA4ABrD8ReLLvWblmkkYqe2a5kuzcmhRQRpJasfLK0z7mOSfemN1wM46UhJ/ClqjQVG2nPftTnC5DL0Pb0ph74zSg5xQAmcYyOlSxztEcr3GCDyD9aZgYyaaaY7DpHVm3KuPbPFMxSUo7UCAjmndhToYjK+0d66Gz8MXFzFv2npUuSW47WOaxRnB4rW1HRprMncpFZOMNgjpTTvsIUdeTS4GfWm5PpS5x60ALjipNuFxmo1JFSKc8c/nTAntp2gfKtjBq3NfPOAWYkVmEYbOanT5lxQJk24OM0zGCfShR3p45ouSh0bsr8VdjYPg+tUSOhHSpYmwaERJXRopxgelWiM46VTR/lBqwsnAqjOxajO1elK3znOagSTdxU0YIPPNBN0WIV59639MA3qDWIntWrp8hEi03sUtjvbGFfLBArQzgYrM02b9yK0C+RXnVb3OSq9RGNOi61Cx5qSM4GaxS1M4u7JJm4qqxp8j5NQseKbNbiE1ESSaeeajPWoAM00mlJ4pjNR1FYq3HJpkHBFLO3NMhOWroi/dNL6Gkh+WhzxTEbilY8Vk2ZPcYv3qnPSqob56s5ytF9BSRGxqMtmpW6VFiouRYOtKM0mcUbqm40iTOKTNRl6b5mKaLRKTgUwvUZlqIye9aKIJ6ku7Jp+arh+akVqLDfkSN05qFjUjsMVXZqLENnRW/hyKEcqKnOkwAY2it58eVWRPMVk4oqS5kdDg1qjnNY8OpLGzKtcHeWT2chGOlewhvNjII61x/iDT0LM/FYYbFNT5Gbw0RxlrI8j7W5NWWtJFcYbINLDbhZsg96uSsI1zjOK9LmvI2toNaDbECTz2qrPYSS4JHFNGpsZ9u32rXWXzIBkc1s1dGSl72pzslosC45PNZV6qhc+9dHdgbipHPrXPakmMY70raA37xZt0SSBUUDJHrTHt4bXLs3J6VFp8nlRl+pxxVW7naaXmmS2OmnMjkrwB2rKvypTg1oshEW4HjqaybskqaCoq7Mg9TSUNSCqOgWtPSLRrm5UAd6zo03sBXfeF9MQJ5pwSBUydkNHVWOow+HdKLnAk28CvNvEfiCfVrxnZ2IzwKueKb+R7kwgkKDjFV7LQ0ubQys4zjNJWSuxqKirnNtzSCrN7AIJSoNVQasTH8EUDpSdBT413GkAgUmpFj28mrkVuMZqK5IWmkUkVXbBxUeaCctR16UiWFA4oHFFAi9YyIkylvWvWPCupWssSxNt3YrxoMRyDzWvpGpTW06lWPXis6lPnQSXMrHr/iLQ7e8tGeNRnGeBXkGqaY9rO/HAr1rRNVa+tBHIDyKp67oEMyNJkA1lB8nusypNxfKzxsjBNITxWvqmni2lbBFZLcGupM3aAdKcDg5zTR6Uv8AF9KCR/DNx61MCFGO9QqfmzTn+9xQwuWY2BXFKCM4qBc59qcTtIpCZcCZSnRL82OKZCxxj8Kepw1UY3Lqr8hWnRA5xUaNwD7ULKVenYkvImKk3YFQrIWApTyaLEWRegfNbumruda5q2YhxXV6ONxWm9ilodfYLtiFXSaqW52xipC5rzqj1OCrK7H55p27AqLNIzGsHIiI4nJpppAaM5NLc2QHio2608niomanYGwJqJzxTieKhc0JBcrzHmkhOGpspoiNb290q+hfVgBQzZHWoFbNSCsJGLnqMz89WlPy1VYfNmp1Py0i29BWNRkmnE1Ex5xRYyTFJNJuphaoy3NCQ7kheomemu2Ki3ZNaKI1K+hIW96TPNM3UhfmrKSRLnB61IHqsHzTtxp2BssFzUbHNRFjio95FLlIkz//2Q==", "width": 467.4500099999999, "height": 262.75 }] }, { "paragraphFormat": { "afterSpacing": 0, "lineSpacing": 1, "lineSpacingType": "Multiple", "styleName": "Normal", "listFormat": {} }, "characterFormat": {}, "inlines": [{ "characterFormat": { "bold": true }, "text": "Quick Fact" }, { "characterFormat": {}, "text": " The estimated number of giant pandas in the wild varies between 1,500 and 3,000." }] }, { "paragraphFormat": { "styleName": "Heading 1", "listFormat": {} }, "characterFormat": {}, "inlines": [{ "characterFormat": {}, "text": "Intriguing Giant Panda Mysteries" }] }, { "paragraphFormat": { "afterSpacing": 6, "styleName": "Normal", "listFormat": {} }, "characterFormat": {}, "inlines": [{ "characterFormat": { "fontFamily": "Calibri" }, "text": "While most adore their fluffy fur and round heads, which help give them their cuddly bear quality, others are " }, { "characterFormat": { "fontFamily": "Calibri" }, "text": "fascinated by the many mysteries of the giant panda." }, { "characterFormat": {}, "text": " " }, { "characterFormat": { "fontFamily": "Calibri" }, "text": "Did you know that the giant panda may " }, { "characterFormat": { "fontFamily": "Calibri" }, "text": "actually be" }, { "characterFormat": { "fontFamily": "Calibri" }, "text": " a raccoon, " }, { "characterFormat": { "fontFamily": "Calibri" }, "text": "they have an opposable pseudo thumb, and that they’re technically a carnivore even though their diet is primarily " }, { "characterFormat": { "fontFamily": "Calibri" }, "text": "vegetarian?" }, { "characterFormat": {}, "text": " " }, { "characterFormat": { "fontFamily": "Calibri" }, "text": "These things and more have baffled scientists and naturalists for hundreds of years." }, { "characterFormat": {}, "text": " " }] }, { "paragraphFormat": { "styleName": "Heading 2", "listFormat": {} }, "characterFormat": {}, "inlines": [{ "characterFormat": {}, "text": "Opposable Pseudo Thumb" }] }, { "paragraphFormat": { "afterSpacing": 6, "styleName": "Normal", "listFormat": {} }, "characterFormat": {}, "inlines": [{ "characterFormat": { "fontFamily": "Calibri" }, "text": "A characteristic of the giant panda that has mystified scientists is their movable, elongated wrist bone that acts like " }, { "characterFormat": { "fontFamily": "Calibri" }, "text": "an opposable thumb." }, { "characterFormat": {}, "text": " " }, { "characterFormat": { "fontFamily": "Calibri" }, "text": "This human-like quality that helps give them even more of a cuddly-bear appearance enables " }, { "characterFormat": { "fontFamily": "Calibri" }, "text": "the giant panda to pick up objects and even eat sitting up" }, { "characterFormat": {}, "text": ". " }] }, { "paragraphFormat": { "afterSpacing": 6, "styleName": "Normal", "listFormat": {} }, "characterFormat": {}, "inlines": [{ "characterFormat": { "bold": true }, "text": "Quick Fact" }, { "characterFormat": {}, "text": " Giant pandas have five clawed toes and one pseudo thumb." }] }, { "paragraphFormat": { "afterSpacing": 6, "styleName": "Normal", "listFormat": {} }, "characterFormat": {}, "inlines": [{ "characterFormat": {}, "bookmarkType": 0, "name": "_GoBack" }, { "characterFormat": {}, "bookmarkType": 1, "name": "_GoBack" }, { "characterFormat": { "fontFamily": "Calibri" }, "text": "Their pseudo thumb, along with pads of skin, help the giant panda strip the more nutritious small bamboo shoots " }, { "characterFormat": { "fontFamily": "Calibri" }, "text": "and leaves while holding the stalk in their mouth." }] }, { "paragraphFormat": { "styleName": "Heading 2", "listFormat": {} }, "characterFormat": {}, "inlines": [{ "characterFormat": {}, "text": "Small Bear or Large Raccoon?" }] }, { "paragraphFormat": { "styleName": "Normal", "listFormat": {} }, "characterFormat": {}, "inlines": [{ "characterFormat": { "fontFamily": "Calibri" }, "text": "Giant pandas are generally referred to as bears and are typically called panda bears rather than giant pandas." }, { "characterFormat": {}, "text": " " }, { "characterFormat": { "fontFamily": "Calibri" }, "text": "Though we may think they look like bears, there has been a great deal of discussion for decades about where giant " }, { "characterFormat": { "fontFamily": "Calibri" }, "text": "pandas " }, { "characterFormat": { "fontFamily": "Calibri" }, "text": "fit" }, { "characterFormat": { "fontFamily": "Calibri" }, "text": " in the animal kingdom." }, { "characterFormat": {}, "text": " " }, { "characterFormat": { "fontFamily": "Calibri" }, "text": "Much of the debate has been whether they are more closely related to the red " }, { "characterFormat": { "fontFamily": "Calibri" }, "text": "panda, once thought to be a member of the raccoon family, than the bear family." }] }, { "paragraphFormat": { "styleName": "Normal", "listFormat": {} }, "characterFormat": {}, "inlines": [{ "characterFormat": { "fontFamily": "Calibri" }, "text": "While a giant panda has a body that resembles a small bear and climbs trees like a bear, it also has several " }, { "characterFormat": { "fontFamily": "Calibri" }, "text": "characteristics in common with the red panda." }, { "characterFormat": {}, "text": " " }, { "characterFormat": { "fontFamily": "Calibri" }, "text": "For example, both giant pandas and red pandas eat bamboo and " }, { "characterFormat": { "fontFamily": "Calibri" }, "text": "have the same pseudo thumb." }, { "characterFormat": {}, "text": " " }, { "characterFormat": { "fontFamily": "Calibri" }, "text": "The table below lists the main characteristics the giant panda shares with bears and " }, { "characterFormat": { "fontFamily": "Calibri" }, "text": "red pandas." }] }, { "rows": [{ "cells": [{ "blocks": [{ "paragraphFormat": { "textAlignment": "Center", "styleName": "Normal", "listFormat": {} }, "characterFormat": { "bold": true, "fontColor": "#FFFFFFFF" }, "inlines": [{ "characterFormat": { "bold": true, "fontColor": "#FFFFFFFF" }, "text": "Bear" }] }], "cellFormat": { "borders": { "top": { "color": "#00CC66FF", "hasNoneStyle": false, "lineStyle": "Single", "lineWidth": 1, "shadow": false, "space": 0 }, "left": { "color": "#00CC66FF", "hasNoneStyle": false, "lineStyle": "Single", "lineWidth": 1, "shadow": false, "space": 0 }, "right": { "color": "#00CC66FF", "hasNoneStyle": false, "lineStyle": "Single", "lineWidth": 1, "shadow": false, "space": 0 }, "bottom": { "color": "#00CC66FF", "hasNoneStyle": false, "lineStyle": "Single", "lineWidth": 1, "shadow": false, "space": 0 }, "diagonalDown": { "color": "#000000", "hasNoneStyle": false, "lineStyle": "None", "lineWidth": 0, "shadow": false, "space": 0 }, "diagonalUp": { "color": "#000000", "hasNoneStyle": false, "lineStyle": "None", "lineWidth": 0, "shadow": false, "space": 0 }, "horizontal": { "color": "#000000", "hasNoneStyle": false, "lineStyle": "None", "lineWidth": 0, "shadow": false, "space": 0 }, "vertical": { "color": "#000000", "hasNoneStyle": false, "lineStyle": "None", "lineWidth": 0, "shadow": false, "space": 0 } }, "shading": { "backgroundColor": "#00CC66FF", "foregroundColor": "empty", "textureStyle": "TextureNone" }, "preferredWidth": 50, "preferredWidthType": "Percent", "cellWidth": 234, "columnSpan": 1, "rowSpan": 1, "verticalAlignment": "Center" }, "columnIndex": 0 }, { "blocks": [{ "paragraphFormat": { "textAlignment": "Center", "styleName": "Normal", "listFormat": {} }, "characterFormat": { "bold": true, "fontColor": "#FFFFFFFF" }, "inlines": [{ "characterFormat": { "bold": true, "fontColor": "#FFFFFFFF" }, "text": "Red Panda" }] }], "cellFormat": { "borders": { "top": { "color": "#00CC66FF", "hasNoneStyle": false, "lineStyle": "Single", "lineWidth": 1, "shadow": false, "space": 0 }, "left": { "color": "#00CC66FF", "hasNoneStyle": false, "lineStyle": "Single", "lineWidth": 1, "shadow": false, "space": 0 }, "right": { "color": "#00CC66FF", "hasNoneStyle": false, "lineStyle": "Single", "lineWidth": 1, "shadow": false, "space": 0 }, "bottom": { "color": "#00CC66FF", "hasNoneStyle": false, "lineStyle": "Single", "lineWidth": 1, "shadow": false, "space": 0 }, "diagonalDown": { "color": "#000000", "hasNoneStyle": false, "lineStyle": "None", "lineWidth": 0, "shadow": false, "space": 0 }, "diagonalUp": { "color": "#000000", "hasNoneStyle": false, "lineStyle": "None", "lineWidth": 0, "shadow": false, "space": 0 }, "horizontal": { "color": "#000000", "hasNoneStyle": false, "lineStyle": "None", "lineWidth": 0, "shadow": false, "space": 0 }, "vertical": { "color": "#000000", "hasNoneStyle": false, "lineStyle": "None", "lineWidth": 0, "shadow": false, "space": 0 } }, "shading": { "backgroundColor": "#00CC66FF", "foregroundColor": "empty", "textureStyle": "TextureNone" }, "preferredWidth": 50, "preferredWidthType": "Percent", "cellWidth": 234, "columnSpan": 1, "rowSpan": 1, "verticalAlignment": "Center" }, "columnIndex": 1 }], "rowFormat": { "height": 18, "allowBreakAcrossPages": true, "heightType": "AtLeast", "isHeader": false, "borders": { "top": { "color": "#A6A6A6FF", "hasNoneStyle": false, "lineStyle": "Single", "lineWidth": 0.75, "shadow": false, "space": 0 }, "left": { "color": "#A6A6A6FF", "hasNoneStyle": false, "lineStyle": "Single", "lineWidth": 0.75, "shadow": false, "space": 0 }, "right": { "color": "#A6A6A6FF", "hasNoneStyle": false, "lineStyle": "Single", "lineWidth": 0.75, "shadow": false, "space": 0 }, "bottom": { "color": "#A6A6A6FF", "hasNoneStyle": false, "lineStyle": "Single", "lineWidth": 0.75, "shadow": false, "space": 0 }, "diagonalDown": { "color": "#000000", "hasNoneStyle": false, "lineStyle": "None", "lineWidth": 0, "shadow": false, "space": 0 }, "diagonalUp": { "color": "#000000", "hasNoneStyle": false, "lineStyle": "None", "lineWidth": 0, "shadow": false, "space": 0 }, "horizontal": { "color": "#A6A6A6FF", "hasNoneStyle": false, "lineStyle": "Single", "lineWidth": 0.75, "shadow": false, "space": 0 }, "vertical": { "color": "#A6A6A6FF", "hasNoneStyle": false, "lineStyle": "Single", "lineWidth": 0.75, "shadow": false, "space": 0 } }, "gridBefore": 0, "gridBeforeWidth": 0, "gridBeforeWidthType": "Point", "gridAfter": 0, "gridAfterWidth": 0, "gridAfterWidthType": "Point" } }, { "cells": [{ "blocks": [{ "paragraphFormat": { "textAlignment": "Center", "styleName": "Normal", "listFormat": {} }, "characterFormat": {}, "inlines": [{ "characterFormat": {}, "text": "Shape" }] }], "cellFormat": { "borders": { "top": { "color": "#00CC66FF", "hasNoneStyle": false, "lineStyle": "Single", "lineWidth": 1, "shadow": false, "space": 0 }, "left": { "color": "#000000", "hasNoneStyle": false, "lineStyle": "None", "lineWidth": 0, "shadow": false, "space": 0 }, "right": { "color": "#000000", "hasNoneStyle": false, "lineStyle": "None", "lineWidth": 0, "shadow": false, "space": 0 }, "bottom": { "color": "#000000", "hasNoneStyle": false, "lineStyle": "None", "lineWidth": 0, "shadow": false, "space": 0 }, "diagonalDown": { "color": "#000000", "hasNoneStyle": false, "lineStyle": "None", "lineWidth": 0, "shadow": false, "space": 0 }, "diagonalUp": { "color": "#000000", "hasNoneStyle": false, "lineStyle": "None", "lineWidth": 0, "shadow": false, "space": 0 }, "horizontal": { "color": "#000000", "hasNoneStyle": false, "lineStyle": "None", "lineWidth": 0, "shadow": false, "space": 0 }, "vertical": { "color": "#000000", "hasNoneStyle": false, "lineStyle": "None", "lineWidth": 0, "shadow": false, "space": 0 } }, "shading": { "backgroundColor": "#ffffff", "foregroundColor": "empty", "textureStyle": "TextureNone" }, "preferredWidth": 50, "preferredWidthType": "Percent", "cellWidth": 234, "columnSpan": 1, "rowSpan": 1, "verticalAlignment": "Center" }, "columnIndex": 0 }, { "blocks": [{ "paragraphFormat": { "textAlignment": "Center", "styleName": "Normal", "listFormat": {} }, "characterFormat": {}, "inlines": [{ "characterFormat": {}, "text": "Diet" }] }], "cellFormat": { "borders": { "top": { "color": "#00CC66FF", "hasNoneStyle": false, "lineStyle": "Single", "lineWidth": 1, "shadow": false, "space": 0 }, "left": { "color": "#000000", "hasNoneStyle": false, "lineStyle": "None", "lineWidth": 0, "shadow": false, "space": 0 }, "right": { "color": "#000000", "hasNoneStyle": false, "lineStyle": "None", "lineWidth": 0, "shadow": false, "space": 0 }, "bottom": { "color": "#000000", "hasNoneStyle": false, "lineStyle": "None", "lineWidth": 0, "shadow": false, "space": 0 }, "diagonalDown": { "color": "#000000", "hasNoneStyle": false, "lineStyle": "None", "lineWidth": 0, "shadow": false, "space": 0 }, "diagonalUp": { "color": "#000000", "hasNoneStyle": false, "lineStyle": "None", "lineWidth": 0, "shadow": false, "space": 0 }, "horizontal": { "color": "#000000", "hasNoneStyle": false, "lineStyle": "None", "lineWidth": 0, "shadow": false, "space": 0 }, "vertical": { "color": "#000000", "hasNoneStyle": false, "lineStyle": "None", "lineWidth": 0, "shadow": false, "space": 0 } }, "shading": { "backgroundColor": "#ffffff", "foregroundColor": "empty", "textureStyle": "TextureNone" }, "preferredWidth": 50, "preferredWidthType": "Percent", "cellWidth": 234, "columnSpan": 1, "rowSpan": 1, "verticalAlignment": "Center" }, "columnIndex": 1 }], "rowFormat": { "height": 18, "allowBreakAcrossPages": true, "heightType": "AtLeast", "isHeader": false, "borders": { "top": { "color": "#A6A6A6FF", "hasNoneStyle": false, "lineStyle": "Single", "lineWidth": 0.75, "shadow": false, "space": 0 }, "left": { "color": "#A6A6A6FF", "hasNoneStyle": false, "lineStyle": "Single", "lineWidth": 0.75, "shadow": false, "space": 0 }, "right": { "color": "#A6A6A6FF", "hasNoneStyle": false, "lineStyle": "Single", "lineWidth": 0.75, "shadow": false, "space": 0 }, "bottom": { "color": "#A6A6A6FF", "hasNoneStyle": false, "lineStyle": "Single", "lineWidth": 0.75, "shadow": false, "space": 0 }, "diagonalDown": { "color": "#000000", "hasNoneStyle": false, "lineStyle": "None", "lineWidth": 0, "shadow": false, "space": 0 }, "diagonalUp": { "color": "#000000", "hasNoneStyle": false, "lineStyle": "None", "lineWidth": 0, "shadow": false, "space": 0 }, "horizontal": { "color": "#A6A6A6FF", "hasNoneStyle": false, "lineStyle": "Single", "lineWidth": 0.75, "shadow": false, "space": 0 }, "vertical": { "color": "#A6A6A6FF", "hasNoneStyle": false, "lineStyle": "Single", "lineWidth": 0.75, "shadow": false, "space": 0 } }, "gridBefore": 0, "gridBeforeWidth": 0, "gridBeforeWidthType": "Point", "gridAfter": 0, "gridAfterWidth": 0, "gridAfterWidthType": "Point" } }, { "cells": [{ "blocks": [{ "paragraphFormat": { "textAlignment": "Center", "styleName": "Normal", "listFormat": {} }, "characterFormat": {}, "inlines": [{ "characterFormat": {}, "text": "Size" }] }], "cellFormat": { "borders": { "top": { "color": "#000000", "hasNoneStyle": false, "lineStyle": "None", "lineWidth": 0, "shadow": false, "space": 0 }, "left": { "color": "#000000", "hasNoneStyle": false, "lineStyle": "None", "lineWidth": 0, "shadow": false, "space": 0 }, "right": { "color": "#000000", "hasNoneStyle": false, "lineStyle": "None", "lineWidth": 0, "shadow": false, "space": 0 }, "bottom": { "color": "#000000", "hasNoneStyle": false, "lineStyle": "None", "lineWidth": 0, "shadow": false, "space": 0 }, "diagonalDown": { "color": "#000000", "hasNoneStyle": false, "lineStyle": "None", "lineWidth": 0, "shadow": false, "space": 0 }, "diagonalUp": { "color": "#000000", "hasNoneStyle": false, "lineStyle": "None", "lineWidth": 0, "shadow": false, "space": 0 }, "horizontal": { "color": "#000000", "hasNoneStyle": false, "lineStyle": "None", "lineWidth": 0, "shadow": false, "space": 0 }, "vertical": { "color": "#000000", "hasNoneStyle": false, "lineStyle": "None", "lineWidth": 0, "shadow": false, "space": 0 } }, "shading": { "backgroundColor": "#ffffff", "foregroundColor": "empty", "textureStyle": "TextureNone" }, "preferredWidth": 50, "preferredWidthType": "Percent", "cellWidth": 234, "columnSpan": 1, "rowSpan": 1, "verticalAlignment": "Center" }, "columnIndex": 0 }, { "blocks": [{ "paragraphFormat": { "textAlignment": "Center", "styleName": "Normal", "listFormat": {} }, "characterFormat": {}, "inlines": [{ "characterFormat": {}, "text": "Paws" }] }], "cellFormat": { "borders": { "top": { "color": "#000000", "hasNoneStyle": false, "lineStyle": "None", "lineWidth": 0, "shadow": false, "space": 0 }, "left": { "color": "#000000", "hasNoneStyle": false, "lineStyle": "None", "lineWidth": 0, "shadow": false, "space": 0 }, "right": { "color": "#000000", "hasNoneStyle": false, "lineStyle": "None", "lineWidth": 0, "shadow": false, "space": 0 }, "bottom": { "color": "#000000", "hasNoneStyle": false, "lineStyle": "None", "lineWidth": 0, "shadow": false, "space": 0 }, "diagonalDown": { "color": "#000000", "hasNoneStyle": false, "lineStyle": "None", "lineWidth": 0, "shadow": false, "space": 0 }, "diagonalUp": { "color": "#000000", "hasNoneStyle": false, "lineStyle": "None", "lineWidth": 0, "shadow": false, "space": 0 }, "horizontal": { "color": "#000000", "hasNoneStyle": false, "lineStyle": "None", "lineWidth": 0, "shadow": false, "space": 0 }, "vertical": { "color": "#000000", "hasNoneStyle": false, "lineStyle": "None", "lineWidth": 0, "shadow": false, "space": 0 } }, "shading": { "backgroundColor": "#ffffff", "foregroundColor": "empty", "textureStyle": "TextureNone" }, "preferredWidth": 50, "preferredWidthType": "Percent", "cellWidth": 234, "columnSpan": 1, "rowSpan": 1, "verticalAlignment": "Center" }, "columnIndex": 1 }], "rowFormat": { "height": 18, "allowBreakAcrossPages": true, "heightType": "AtLeast", "isHeader": false, "borders": { "top": { "color": "#A6A6A6FF", "hasNoneStyle": false, "lineStyle": "Single", "lineWidth": 0.75, "shadow": false, "space": 0 }, "left": { "color": "#A6A6A6FF", "hasNoneStyle": false, "lineStyle": "Single", "lineWidth": 0.75, "shadow": false, "space": 0 }, "right": { "color": "#A6A6A6FF", "hasNoneStyle": false, "lineStyle": "Single", "lineWidth": 0.75, "shadow": false, "space": 0 }, "bottom": { "color": "#A6A6A6FF", "hasNoneStyle": false, "lineStyle": "Single", "lineWidth": 0.75, "shadow": false, "space": 0 }, "diagonalDown": { "color": "#000000", "hasNoneStyle": false, "lineStyle": "None", "lineWidth": 0, "shadow": false, "space": 0 }, "diagonalUp": { "color": "#000000", "hasNoneStyle": false, "lineStyle": "None", "lineWidth": 0, "shadow": false, "space": 0 }, "horizontal": { "color": "#A6A6A6FF", "hasNoneStyle": false, "lineStyle": "Single", "lineWidth": 0.75, "shadow": false, "space": 0 }, "vertical": { "color": "#A6A6A6FF", "hasNoneStyle": false, "lineStyle": "Single", "lineWidth": 0.75, "shadow": false, "space": 0 } }, "gridBefore": 0, "gridBeforeWidth": 0, "gridBeforeWidthType": "Point", "gridAfter": 0, "gridAfterWidth": 0, "gridAfterWidthType": "Point" } }, { "cells": [{ "blocks": [{ "paragraphFormat": { "textAlignment": "Center", "styleName": "Normal", "listFormat": {} }, "characterFormat": {}, "inlines": [{ "characterFormat": {}, "text": "Shaggy " }, { "characterFormat": {}, "text": "fur" }] }], "cellFormat": { "borders": { "top": { "color": "#000000", "hasNoneStyle": false, "lineStyle": "None", "lineWidth": 0, "shadow": false, "space": 0 }, "left": { "color": "#000000", "hasNoneStyle": false, "lineStyle": "None", "lineWidth": 0, "shadow": false, "space": 0 }, "right": { "color": "#000000", "hasNoneStyle": false, "lineStyle": "None", "lineWidth": 0, "shadow": false, "space": 0 }, "bottom": { "color": "#000000", "hasNoneStyle": false, "lineStyle": "None", "lineWidth": 0, "shadow": false, "space": 0 }, "diagonalDown": { "color": "#000000", "hasNoneStyle": false, "lineStyle": "None", "lineWidth": 0, "shadow": false, "space": 0 }, "diagonalUp": { "color": "#000000", "hasNoneStyle": false, "lineStyle": "None", "lineWidth": 0, "shadow": false, "space": 0 }, "horizontal": { "color": "#000000", "hasNoneStyle": false, "lineStyle": "None", "lineWidth": 0, "shadow": false, "space": 0 }, "vertical": { "color": "#000000", "hasNoneStyle": false, "lineStyle": "None", "lineWidth": 0, "shadow": false, "space": 0 } }, "shading": { "backgroundColor": "#ffffff", "foregroundColor": "empty", "textureStyle": "TextureNone" }, "preferredWidth": 50, "preferredWidthType": "Percent", "cellWidth": 234, "columnSpan": 1, "rowSpan": 1, "verticalAlignment": "Center" }, "columnIndex": 0 }, { "blocks": [{ "paragraphFormat": { "textAlignment": "Center", "styleName": "Normal", "listFormat": {} }, "characterFormat": {}, "inlines": [{ "characterFormat": {}, "text": "Eyes" }] }], "cellFormat": { "borders": { "top": { "color": "#000000", "hasNoneStyle": false, "lineStyle": "None", "lineWidth": 0, "shadow": false, "space": 0 }, "left": { "color": "#000000", "hasNoneStyle": false, "lineStyle": "None", "lineWidth": 0, "shadow": false, "space": 0 }, "right": { "color": "#000000", "hasNoneStyle": false, "lineStyle": "None", "lineWidth": 0, "shadow": false, "space": 0 }, "bottom": { "color": "#000000", "hasNoneStyle": false, "lineStyle": "None", "lineWidth": 0, "shadow": false, "space": 0 }, "diagonalDown": { "color": "#000000", "hasNoneStyle": false, "lineStyle": "None", "lineWidth": 0, "shadow": false, "space": 0 }, "diagonalUp": { "color": "#000000", "hasNoneStyle": false, "lineStyle": "None", "lineWidth": 0, "shadow": false, "space": 0 }, "horizontal": { "color": "#000000", "hasNoneStyle": false, "lineStyle": "None", "lineWidth": 0, "shadow": false, "space": 0 }, "vertical": { "color": "#000000", "hasNoneStyle": false, "lineStyle": "None", "lineWidth": 0, "shadow": false, "space": 0 } }, "shading": { "backgroundColor": "#ffffff", "foregroundColor": "empty", "textureStyle": "TextureNone" }, "preferredWidth": 50, "preferredWidthType": "Percent", "cellWidth": 234, "columnSpan": 1, "rowSpan": 1, "verticalAlignment": "Center" }, "columnIndex": 1 }], "rowFormat": { "height": 18, "allowBreakAcrossPages": true, "heightType": "AtLeast", "isHeader": false, "borders": { "top": { "color": "#A6A6A6FF", "hasNoneStyle": false, "lineStyle": "Single", "lineWidth": 0.75, "shadow": false, "space": 0 }, "left": { "color": "#A6A6A6FF", "hasNoneStyle": false, "lineStyle": "Single", "lineWidth": 0.75, "shadow": false, "space": 0 }, "right": { "color": "#A6A6A6FF", "hasNoneStyle": false, "lineStyle": "Single", "lineWidth": 0.75, "shadow": false, "space": 0 }, "bottom": { "color": "#A6A6A6FF", "hasNoneStyle": false, "lineStyle": "Single", "lineWidth": 0.75, "shadow": false, "space": 0 }, "diagonalDown": { "color": "#000000", "hasNoneStyle": false, "lineStyle": "None", "lineWidth": 0, "shadow": false, "space": 0 }, "diagonalUp": { "color": "#000000", "hasNoneStyle": false, "lineStyle": "None", "lineWidth": 0, "shadow": false, "space": 0 }, "horizontal": { "color": "#A6A6A6FF", "hasNoneStyle": false, "lineStyle": "Single", "lineWidth": 0.75, "shadow": false, "space": 0 }, "vertical": { "color": "#A6A6A6FF", "hasNoneStyle": false, "lineStyle": "Single", "lineWidth": 0.75, "shadow": false, "space": 0 } }, "gridBefore": 0, "gridBeforeWidth": 0, "gridBeforeWidthType": "Point", "gridAfter": 0, "gridAfterWidth": 0, "gridAfterWidthType": "Point" } }, { "cells": [{ "blocks": [{ "paragraphFormat": { "textAlignment": "Center", "styleName": "Normal", "listFormat": {} }, "characterFormat": {}, "inlines": [{ "characterFormat": {}, "text": "Gait" }] }], "cellFormat": { "borders": { "top": { "color": "#000000", "hasNoneStyle": false, "lineStyle": "None", "lineWidth": 0, "shadow": false, "space": 0 }, "left": { "color": "#000000", "hasNoneStyle": false, "lineStyle": "None", "lineWidth": 0, "shadow": false, "space": 0 }, "right": { "color": "#000000", "hasNoneStyle": false, "lineStyle": "None", "lineWidth": 0, "shadow": false, "space": 0 }, "bottom": { "color": "#000000", "hasNoneStyle": false, "lineStyle": "None", "lineWidth": 0, "shadow": false, "space": 0 }, "diagonalDown": { "color": "#000000", "hasNoneStyle": false, "lineStyle": "None", "lineWidth": 0, "shadow": false, "space": 0 }, "diagonalUp": { "color": "#000000", "hasNoneStyle": false, "lineStyle": "None", "lineWidth": 0, "shadow": false, "space": 0 }, "horizontal": { "color": "#000000", "hasNoneStyle": false, "lineStyle": "None", "lineWidth": 0, "shadow": false, "space": 0 }, "vertical": { "color": "#000000", "hasNoneStyle": false, "lineStyle": "None", "lineWidth": 0, "shadow": false, "space": 0 } }, "shading": { "backgroundColor": "#ffffff", "foregroundColor": "empty", "textureStyle": "TextureNone" }, "preferredWidth": 50, "preferredWidthType": "Percent", "cellWidth": 234, "columnSpan": 1, "rowSpan": 1, "verticalAlignment": "Center" }, "columnIndex": 0 }, { "blocks": [{ "paragraphFormat": { "textAlignment": "Center", "styleName": "Normal", "listFormat": {} }, "characterFormat": {}, "inlines": [{ "characterFormat": {}, "text": "Nose " }, { "characterFormat": {}, "text": "and teeth" }] }], "cellFormat": { "borders": { "top": { "color": "#000000", "hasNoneStyle": false, "lineStyle": "None", "lineWidth": 0, "shadow": false, "space": 0 }, "left": { "color": "#000000", "hasNoneStyle": false, "lineStyle": "None", "lineWidth": 0, "shadow": false, "space": 0 }, "right": { "color": "#000000", "hasNoneStyle": false, "lineStyle": "None", "lineWidth": 0, "shadow": false, "space": 0 }, "bottom": { "color": "#000000", "hasNoneStyle": false, "lineStyle": "None", "lineWidth": 0, "shadow": false, "space": 0 }, "diagonalDown": { "color": "#000000", "hasNoneStyle": false, "lineStyle": "None", "lineWidth": 0, "shadow": false, "space": 0 }, "diagonalUp": { "color": "#000000", "hasNoneStyle": false, "lineStyle": "None", "lineWidth": 0, "shadow": false, "space": 0 }, "horizontal": { "color": "#000000", "hasNoneStyle": false, "lineStyle": "None", "lineWidth": 0, "shadow": false, "space": 0 }, "vertical": { "color": "#000000", "hasNoneStyle": false, "lineStyle": "None", "lineWidth": 0, "shadow": false, "space": 0 } }, "shading": { "backgroundColor": "#ffffff", "foregroundColor": "empty", "textureStyle": "TextureNone" }, "preferredWidth": 50, "preferredWidthType": "Percent", "cellWidth": 234, "columnSpan": 1, "rowSpan": 1, "verticalAlignment": "Center" }, "columnIndex": 1 }], "rowFormat": { "height": 18, "allowBreakAcrossPages": true, "heightType": "AtLeast", "isHeader": false, "borders": { "top": { "color": "#A6A6A6FF", "hasNoneStyle": false, "lineStyle": "Single", "lineWidth": 0.75, "shadow": false, "space": 0 }, "left": { "color": "#A6A6A6FF", "hasNoneStyle": false, "lineStyle": "Single", "lineWidth": 0.75, "shadow": false, "space": 0 }, "right": { "color": "#A6A6A6FF", "hasNoneStyle": false, "lineStyle": "Single", "lineWidth": 0.75, "shadow": false, "space": 0 }, "bottom": { "color": "#A6A6A6FF", "hasNoneStyle": false, "lineStyle": "Single", "lineWidth": 0.75, "shadow": false, "space": 0 }, "diagonalDown": { "color": "#000000", "hasNoneStyle": false, "lineStyle": "None", "lineWidth": 0, "shadow": false, "space": 0 }, "diagonalUp": { "color": "#000000", "hasNoneStyle": false, "lineStyle": "None", "lineWidth": 0, "shadow": false, "space": 0 }, "horizontal": { "color": "#A6A6A6FF", "hasNoneStyle": false, "lineStyle": "Single", "lineWidth": 0.75, "shadow": false, "space": 0 }, "vertical": { "color": "#A6A6A6FF", "hasNoneStyle": false, "lineStyle": "Single", "lineWidth": 0.75, "shadow": false, "space": 0 } }, "gridBefore": 0, "gridBeforeWidth": 0, "gridBeforeWidthType": "Point", "gridAfter": 0, "gridAfterWidth": 0, "gridAfterWidthType": "Point" } }], "grid": [234, 234], "tableFormat": { "borders": { "top": { "color": "#A6A6A6FF", "hasNoneStyle": false, "lineStyle": "Single", "lineWidth": 0.75, "shadow": false, "space": 0 }, "left": { "color": "#A6A6A6FF", "hasNoneStyle": false, "lineStyle": "Single", "lineWidth": 0.75, "shadow": false, "space": 0 }, "right": { "color": "#A6A6A6FF", "hasNoneStyle": false, "lineStyle": "Single", "lineWidth": 0.75, "shadow": false, "space": 0 }, "bottom": { "color": "#A6A6A6FF", "hasNoneStyle": false, "lineStyle": "Single", "lineWidth": 0.75, "shadow": false, "space": 0 }, "diagonalDown": { "color": "#000000", "hasNoneStyle": false, "lineStyle": "None", "lineWidth": 0, "shadow": false, "space": 0 }, "diagonalUp": { "color": "#000000", "hasNoneStyle": false, "lineStyle": "None", "lineWidth": 0, "shadow": false, "space": 0 }, "horizontal": { "color": "#A6A6A6FF", "hasNoneStyle": false, "lineStyle": "Single", "lineWidth": 0.75, "shadow": false, "space": 0 }, "vertical": { "color": "#A6A6A6FF", "hasNoneStyle": false, "lineStyle": "Single", "lineWidth": 0.75, "shadow": false, "space": 0 } }, "shading": { "backgroundColor": "#ffffff", "foregroundColor": "empty", "textureStyle": "TextureNone" }, "cellSpacing": 0, "leftIndent": 0, "tableAlignment": "Left", "topMargin": 0, "rightMargin": 5.75, "leftMargin": 5.75, "bottomMargin": 0, "preferredWidth": 100, "preferredWidthType": "Percent" }, "description": null, "title": null }, { "paragraphFormat": { "styleName": "Normal", "listFormat": {} }, "characterFormat": {}, "inlines": [] }, { "paragraphFormat": { "styleName": "Heading 3", "listFormat": {} }, "characterFormat": {}, "inlines": [{ "characterFormat": {}, "text": "Cat-like features" }] }, { "paragraphFormat": { "styleName": "Normal", "listFormat": {} }, "characterFormat": {}, "inlines": [{ "characterFormat": { "fontFamily": "Calibri" }, "text": "While the body of a giant panda looks like that of a bear and the dark circles around its eyes resemble those of a " }, { "characterFormat": { "fontFamily": "Calibri" }, "text": "red panda or raccoon, its pupils have vertical slits like the eyes of a cat." }, { "characterFormat": {}, "text": " Because of the" }, { "characterFormat": {}, "text": "ir " }, { "characterFormat": {}, "text": "unusual eyes" }, { "characterFormat": {}, "text": ", a popular " }, { "characterFormat": {}, "text": "Chinese name for " }, { "characterFormat": {}, "text": "panda" }, { "characterFormat": {}, "text": " i" }, { "characterFormat": {}, "text": "s " }, { "characterFormat": {}, "text": "‘big bear cat’ or" }, { "characterFormat": {}, "text": "大" }, { "characterFormat": {}, "text": "‍" }, { "characterFormat": {}, "text": "熊" }, { "characterFormat": {}, "text": "‍" }, { "characterFormat": {}, "text": "貓" }, { "characterFormat": {}, "text": " /" }, { "characterFormat": {}, "text": "dà" }, { "characterFormat": {}, "text": " " }, { "characterFormat": {}, "text": "xióng" }, { "characterFormat": {}, "text": " " }, { "characterFormat": {}, "text": "māo" }, { "characterFormat": {}, "text": ", pronounced as dah-" }, { "characterFormat": {}, "text": "sshyong" }, { "characterFormat": {}, "text": "-" }, { "characterFormat": {}, "text": "maow" }, { "characterFormat": {}, "text": "." }] }, { "paragraphFormat": { "styleName": "Heading 3", "listFormat": {} }, "characterFormat": {}, "inlines": [{ "characterFormat": {}, "text": "DNA " }, { "characterFormat": {}, "text": "r" }, { "characterFormat": {}, "text": "esults" }] }, { "paragraphFormat": { "styleName": "Normal", "listFormat": {} }, "characterFormat": {}, "inlines": [{ "characterFormat": {}, "text": "DNA analysis" }, { "characterFormat": {}, "text": " has put one mystery to rest" }, { "characterFormat": {}, "text": ". " }, { "characterFormat": { "fontFamily": "Calibri" }, "text": "It has revealed that while the red panda is a distant relation, the giant " }, { "characterFormat": { "fontFamily": "Calibri" }, "text": "panda's closest relative is the spectacled bear from South America." }] }, { "paragraphFormat": { "styleName": "Heading 2", "listFormat": {} }, "characterFormat": {}, "inlines": [{ "characterFormat": {}, "text": "Mostly Vegetarian Diet" }] }, { "paragraphFormat": { "styleName": "Normal", "listFormat": {} }, "characterFormat": {}, "inlines": [{ "characterFormat": {}, "text": "Giant pandas " }, { "characterFormat": {}, "text": "love" }, { "characterFormat": {}, "text": " bamboo! In fact, their diet is 99% bamboo. Along with bamboo, they eat other plants, small " }, { "characterFormat": {}, "text": "rodents, and occasionally fish. The mystery behind their diet is they have the digestive system of a carnivore. " }] }, { "paragraphFormat": { "styleName": "Normal", "listFormat": {} }, "characterFormat": {}, "inlines": [{ "characterFormat": {}, "text": "Their ability to digest bamboo is attributed to tiny microbes that live within their digestive system. " }, { "characterFormat": { "fontFamily": "Calibri" }, "text": "As they can only " }, { "characterFormat": { "fontFamily": "Calibri" }, "text": "digest about 20% of what they eat, the average giant panda consumes around 14 kilograms (30 pounds) of bamboo " }, { "characterFormat": { "fontFamily": "Calibri" }, "text": "a day." }, { "characterFormat": {}, "text": " In comparison, humans eat about 2 kilograms (5 pounds) of food a day. This enormous diet means the giant " }, { "characterFormat": {}, "text": "panda spends more than 12 hours a day eating to stay nourished. " }] }, { "paragraphFormat": { "beforeSpacing": 7, "styleName": "Normal", "listFormat": {} }, "characterFormat": {}, "inlines": [{ "characterFormat": { "bold": true }, "text": "Quick Fact " }, { "characterFormat": {}, "text": "As the seasons change, the giant panda prefers different species and parts of bamboo." }] }, { "paragraphFormat": { "styleName": "Heading 2", "listFormat": {} }, "characterFormat": {}, "inlines": [{ "characterFormat": {}, "text": "Tiny Cubs" }] }, { "paragraphFormat": { "styleName": "Normal", "listFormat": {} }, "characterFormat": {}, "inlines": [{ "characterFormat": { "fontFamily": "Calibri" }, "text": "An infant giant panda cub is about the size of a croissant, weighs less than a teacup and is about 900 times smaller " }, { "characterFormat": { "fontFamily": "Calibri" }, "text": "than its mother. " }, { "characterFormat": {}, "text": "An average adult mother weighs around 91 kilograms (200 pounds) while " }, { "characterFormat": {}, "text": "newborn weighs" }, { "characterFormat": {}, "text": " only 83 " }, { "characterFormat": {}, "text": "to 190 grams (3 to 4 ounces)." }] }, { "paragraphFormat": { "styleName": "Heading 1", "listFormat": {} }, "characterFormat": {}, "inlines": [{ "characterFormat": {}, "text": "Other Fun Giant Panda Facts" }] }, { "paragraphFormat": { "leftIndent": 28.799999237060547, "styleName": "List Paragraph", "listFormat": { "listId": 1, "listLevelNumber": 0 } }, "characterFormat": {}, "inlines": [{ "characterFormat": { "fontFamily": "Calibri" }, "text": "Researchers have recently discovered that the gene responsible for tasting " }, { "characterFormat": { "fontFamily": "Calibri" }, "text": "savory" }, { "characterFormat": { "fontFamily": "Calibri" }, "text": " or umami " }, { "characterFormat": { "fontFamily": "Calibri" }, "text": "flavors" }, { "characterFormat": { "fontFamily": "Calibri" }, "text": ", such as " }, { "characterFormat": { "fontFamily": "Calibri" }, "text": "meat, is inactive in giant pandas." }] }, { "paragraphFormat": { "leftIndent": 28.799999237060547, "styleName": "List Paragraph", "listFormat": { "listId": 1, "listLevelNumber": 0 } }, "characterFormat": {}, "inlines": [{ "characterFormat": {}, "text": "For many centuries, giant pandas were thought to be a mythical creature" }, { "characterFormat": {}, "text": "," }, { "characterFormat": {}, "text": " " }, { "characterFormat": {}, "text": "like" }, { "characterFormat": {}, "text": " a dragon or unicorn" }, { "characterFormat": {}, "text": "." }] }, { "paragraphFormat": { "leftIndent": 28.799999237060547, "styleName": "List Paragraph", "listFormat": { "listId": 1, "listLevelNumber": 0 } }, "characterFormat": {}, "inlines": [{ "characterFormat": {}, "text": "Unlike other bears in the region, giant pandas don’t hibernate. " }] }, { "paragraphFormat": { "leftIndent": 28.799999237060547, "styleName": "List Paragraph", "listFormat": { "listId": 1, "listLevelNumber": 0 } }, "characterFormat": {}, "inlines": [{ "characterFormat": {}, "text": "Giant pandas can stand erect on their hind legs but rarely walk." }] }, { "paragraphFormat": { "leftIndent": 28.799999237060547, "styleName": "List Paragraph", "listFormat": { "listId": 1, "listLevelNumber": 0 } }, "characterFormat": {}, "inlines": [{ "characterFormat": {}, "text": "The " }, { "characterFormat": {}, "text": "Qinling" }, { "characterFormat": {}, "text": " panda, another giant panda species with a dark brown and light brown coat, live" }, { "characterFormat": {}, "text": "s" }, { "characterFormat": {}, "text": " only in the " }, { "characterFormat": {}, "text": "mountains of Shaanxi. " }] }, { "paragraphFormat": { "leftIndent": 28.799999237060547, "styleName": "List Paragraph", "listFormat": { "listId": 1, "listLevelNumber": 0 } }, "characterFormat": {}, "inlines": [{ "characterFormat": {}, "text": "Giant pandas have very sensitive hearing and smell" }, { "characterFormat": {}, "text": "," }, { "characterFormat": {}, "text": " but " }, { "characterFormat": {}, "text": "they " }, { "characterFormat": {}, "text": "have poor eyesight." }] }, { "paragraphFormat": { "leftIndent": 28.799999237060547, "styleName": "List Paragraph", "listFormat": { "listId": 1, "listLevelNumber": 0 } }, "characterFormat": {}, "inlines": [{ "characterFormat": {}, "text": "A newborn giant panda is blind and look" }, { "characterFormat": {}, "text": "s" }, { "characterFormat": {}, "text": " like " }, { "characterFormat": {}, "text": "a " }, { "characterFormat": {}, "text": "tiny" }, { "characterFormat": {}, "text": "," }, { "characterFormat": {}, "text": " pink" }, { "characterFormat": {}, "text": "," }, { "characterFormat": {}, "text": " hairless " }, { "characterFormat": {}, "text": "mouse" }, { "characterFormat": {}, "text": "." }] }], "headersFooters": { "header": { "blocks": [{ "paragraphFormat": { "styleName": "Header", "listFormat": {} }, "characterFormat": {}, "inlines": [] }] }, "footer": { "blocks": [{ "paragraphFormat": { "styleName": "Footer", "listFormat": {} }, "characterFormat": {}, "inlines": [] }] }, "evenHeader": { "blocks": [{ "paragraphFormat": { "styleName": "Header", "listFormat": {} }, "characterFormat": {}, "inlines": [] }] }, "evenFooter": { "blocks": [{ "paragraphFormat": { "styleName": "Footer", "listFormat": {} }, "characterFormat": {}, "inlines": [] }] }, "firstPageHeader": { "blocks": [{ "paragraphFormat": { "styleName": "Header", "listFormat": {} }, "characterFormat": {}, "inlines": [] }] }, "firstPageFooter": { "blocks": [{ "paragraphFormat": { "styleName": "Footer", "listFormat": {} }, "characterFormat": {}, "inlines": [] }] } } }], "characterFormat": { "fontSize": 11, "fontFamily": "Calibri" }, "paragraphFormat": { "afterSpacing": 10, "lineSpacing": 1.149999976158142, "lineSpacingType": "Multiple", "listFormat": {} }, "styles": [{ "name": "Normal", "type": "Paragraph", "paragraphFormat": { "listFormat": {} }, "characterFormat": { "fontSize": 10, "fontColor": "#595959FF" }, "next": "Normal" }, { "name": "Heading 1", "type": "Paragraph", "paragraphFormat": { "beforeSpacing": 24, "afterSpacing": 0, "outlineLevel": "Level1", "listFormat": {} }, "characterFormat": { "fontSize": 18, "fontFamily": "Segoe UI" }, "basedOn": "Normal", "link": "Heading 1 Char", "next": "Normal" }, { "name": "Heading 1 Char", "type": "Character", "characterFormat": { "fontSize": 14, "fontFamily": "Segoe UI", "fontColor": "#595959FF" }, "basedOn": "Default Paragraph Font" }, { "name": "Default Paragraph Font", "type": "Character", "characterFormat": {} }, { "name": "Heading 2", "type": "Paragraph", "paragraphFormat": { "beforeSpacing": 12, "afterSpacing": 0, "outlineLevel": "Level2", "listFormat": {} }, "characterFormat": { "bold": true, "fontSize": 12, "fontFamily": "Segoe UI", "fontColor": "#00CC66FF" }, "basedOn": "Normal", "link": "Heading 2 Char", "next": "Normal" }, { "name": "Heading 2 Char", "type": "Character", "characterFormat": { "bold": true, "fontSize": 13, "fontFamily": "Segoe UI", "fontColor": "#00CC66FF" }, "basedOn": "Default Paragraph Font" }, { "name": "Heading 3", "type": "Paragraph", "paragraphFormat": { "beforeSpacing": 5, "afterSpacing": 0, "outlineLevel": "Level3", "listFormat": {} }, "characterFormat": { "bold": true }, "basedOn": "Normal", "link": "Heading 3 Char", "next": "Normal" }, { "name": "Heading 3 Char", "type": "Character", "characterFormat": { "bold": true, "fontSize": 10, "fontColor": "#595959FF" }, "basedOn": "Default Paragraph Font" }, { "name": "Title", "type": "Paragraph", "paragraphFormat": { "afterSpacing": 30, "lineSpacing": 1, "lineSpacingType": "Multiple", "listFormat": {} }, "characterFormat": { "fontSize": 40, "fontFamily": "Segoe UI Light", "fontColor": "#00CC66FF" }, "basedOn": "Normal", "link": "Title Char", "next": "Normal" }, { "name": "Title Char", "type": "Character", "characterFormat": { "fontSize": 40, "fontFamily": "Segoe UI Light", "fontColor": "#00CC66FF" }, "basedOn": "Default Paragraph Font" }, { "name": "Quote", "type": "Paragraph", "paragraphFormat": { "lineSpacing": 1, "lineSpacingType": "Multiple", "listFormat": {} }, "characterFormat": { "fontSize": 16, "fontFamily": "Segoe UI Light", "fontColor": "#00CC66FF" }, "basedOn": "Normal", "link": "Quote Char", "next": "Normal" }, { "name": "Quote Char", "type": "Character", "characterFormat": { "fontSize": 16, "fontFamily": "Segoe UI Light", "fontColor": "#00CC66FF" }, "basedOn": "Default Paragraph Font" }, { "name": "Balloon Text", "type": "Paragraph", "paragraphFormat": { "afterSpacing": 0, "lineSpacing": 1, "lineSpacingType": "Multiple", "listFormat": {} }, "characterFormat": { "fontSize": 8, "fontFamily": "Tahoma" }, "basedOn": "Normal", "link": "Balloon Text Char" }, { "name": "Balloon Text Char", "type": "Character", "characterFormat": { "fontSize": 8, "fontFamily": "Tahoma", "fontColor": "#595959FF" }, "basedOn": "Default Paragraph Font" }, { "name": "Quick Fact", "type": "Paragraph", "paragraphFormat": { "afterSpacing": 0, "lineSpacing": 1, "lineSpacingType": "Multiple", "listFormat": {} }, "characterFormat": { "italic": true, "fontFamily": "Cambria" }, "basedOn": "Normal" }, { "name": "List Paragraph", "type": "Paragraph", "paragraphFormat": { "leftIndent": 36, "beforeSpacing": 10, "listFormat": {} }, "characterFormat": {}, "basedOn": "Normal", "next": "List Paragraph" }, { "name": "annotation reference", "type": "Character", "characterFormat": { "fontSize": 8 }, "basedOn": "Default Paragraph Font" }, { "name": "annotation text", "type": "Paragraph", "paragraphFormat": { "lineSpacing": 1, "lineSpacingType": "Multiple", "listFormat": {} }, "characterFormat": {}, "basedOn": "Normal", "link": "Comment Text Char" }, { "name": "Comment Text Char", "type": "Character", "characterFormat": { "fontSize": 10, "fontColor": "#595959FF" }, "basedOn": "Default Paragraph Font" }, { "name": "annotation subject", "type": "Paragraph", "paragraphFormat": { "listFormat": {} }, "characterFormat": { "bold": true }, "basedOn": "annotation text", "link": "Comment Subject Char", "next": "annotation text" }, { "name": "Comment Subject Char", "type": "Character", "characterFormat": { "bold": true, "fontSize": 10, "fontColor": "#595959FF" }, "basedOn": "Comment Text Char" }, { "name": "Header", "type": "Paragraph", "paragraphFormat": { "afterSpacing": 0, "lineSpacing": 1, "lineSpacingType": "Multiple", "listFormat": {}, "tabs": [{ "position": 234, "deletePosition": 0, "tabJustification": "Center", "tabLeader": "None" }, { "position": 468, "deletePosition": 0, "tabJustification": "Right", "tabLeader": "None" }] }, "characterFormat": {}, "basedOn": "Normal", "link": "Header Char", "next": "Normal" }, { "name": "Header Char", "type": "Character", "characterFormat": { "fontSize": 10, "fontColor": "#595959FF" }, "basedOn": "Default Paragraph Font" }, { "name": "Footer", "type": "Paragraph", "paragraphFormat": { "afterSpacing": 0, "lineSpacing": 1, "lineSpacingType": "Multiple", "listFormat": {}, "tabs": [{ "position": 234, "deletePosition": 0, "tabJustification": "Center", "tabLeader": "None" }, { "position": 468, "deletePosition": 0, "tabJustification": "Right", "tabLeader": "None" }] }, "characterFormat": {}, "basedOn": "Normal", "link": "Footer Char", "next": "Normal" }, { "name": "Footer Char", "type": "Character", "characterFormat": { "fontSize": 10, "fontColor": "#595959FF" }, "basedOn": "Default Paragraph Font" }, { "name": "Hyperlink", "type": "Character", "characterFormat": { "underline": "Single", "fontColor": "#085296FF" }, "basedOn": "Default Paragraph Font" }], "lists": [{ "abstractListId": 1, "listId": 1 }], "abstractLists": [{ "abstractListId": 1, "levels": [{ "characterFormat": { "fontFamily": "Wingdings" }, "paragraphFormat": { "leftIndent": 36, "firstLineIndent": -18, "listFormat": {} }, "followCharacter": "Tab", "listLevelPattern": "Bullet", "numberFormat": "", "restartLevel": 0, "startAt": 0 }, { "characterFormat": { "fontFamily": "Courier New" }, "paragraphFormat": { "leftIndent": 72, "firstLineIndent": -18, "listFormat": {} }, "followCharacter": "Tab", "listLevelPattern": "Bullet", "numberFormat": "o", "restartLevel": 0, "startAt": 0 }, { "characterFormat": { "fontFamily": "Wingdings" }, "paragraphFormat": { "leftIndent": 108, "firstLineIndent": -18, "listFormat": {} }, "followCharacter": "Tab", "listLevelPattern": "Bullet", "numberFormat": "", "restartLevel": 0, "startAt": 0 }, { "characterFormat": { "fontFamily": "Symbol" }, "paragraphFormat": { "leftIndent": 144, "firstLineIndent": -18, "listFormat": {} }, "followCharacter": "Tab", "listLevelPattern": "Bullet", "numberFormat": "", "restartLevel": 0, "startAt": 0 }, { "characterFormat": { "fontFamily": "Courier New" }, "paragraphFormat": { "leftIndent": 180, "firstLineIndent": -18, "listFormat": {} }, "followCharacter": "Tab", "listLevelPattern": "Bullet", "numberFormat": "o", "restartLevel": 0, "startAt": 0 }, { "characterFormat": { "fontFamily": "Wingdings" }, "paragraphFormat": { "leftIndent": 216, "firstLineIndent": -18, "listFormat": {} }, "followCharacter": "Tab", "listLevelPattern": "Bullet", "numberFormat": "", "restartLevel": 0, "startAt": 0 }, { "characterFormat": { "fontFamily": "Symbol" }, "paragraphFormat": { "leftIndent": 252, "firstLineIndent": -18, "listFormat": {} }, "followCharacter": "Tab", "listLevelPattern": "Bullet", "numberFormat": "", "restartLevel": 0, "startAt": 0 }, { "characterFormat": { "fontFamily": "Courier New" }, "paragraphFormat": { "leftIndent": 288, "firstLineIndent": -18, "listFormat": {} }, "followCharacter": "Tab", "listLevelPattern": "Bullet", "numberFormat": "o", "restartLevel": 0, "startAt": 0 }, { "characterFormat": { "fontFamily": "Wingdings" }, "paragraphFormat": { "leftIndent": 324, "firstLineIndent": -18, "listFormat": {} }, "followCharacter": "Tab", "listLevelPattern": "Bullet", "numberFormat": "", "restartLevel": 0, "startAt": 0 }] }] }; + let defaultDocument: Object = {"sfdt":"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"}; // tslint: enable let waitingPopUp: HTMLElement = document.getElementById('waiting-popup'); let overlay: HTMLElement = document.getElementById('popup-overlay'); diff --git a/src/document-editor/right-to-left.ts b/src/document-editor/right-to-left.ts index 2b602dab..67bd1e59 100644 --- a/src/document-editor/right-to-left.ts +++ b/src/document-editor/right-to-left.ts @@ -515,14 +515,13 @@ L10n.load({ */ (window as any).default = (): void => { loadCultureFiles(); - let hostUrl: string = 'https://ej2services.syncfusion.com/production/web-services/'; + let hostUrl: string = 'https://services.syncfusion.com/js/production/api/documenteditor/'; let container: DocumentEditorContainer = new DocumentEditorContainer({ - enableToolbar: true, + serviceUrl:hostUrl,enableToolbar: true, height: '590px', enableRtl: true, locale: 'ar-AE' }); DocumentEditorContainer.Inject(Toolbar); - container.serviceUrl = hostUrl + 'api/documenteditor/'; container.appendTo('#container'); let titleBar: TitleBar = new TitleBar(document.getElementById('documenteditor_titlebar'), container.documentEditor, true, true); diff --git a/src/document-editor/sample.json b/src/document-editor/sample.json index 37b603b6..8d0e9ddf 100644 --- a/src/document-editor/sample.json +++ b/src/document-editor/sample.json @@ -585,6 +585,7 @@ "url": "links-and-bookmarks", "name": "Hyperlinks and Bookmarks", "category": "Editing Features", + "type": "update", "description": "The Document Editor supports hyperlinks and bookmarks. The link can be a file, mail, webpage, or bookmark.", "api": { "DocumentEditor": [ @@ -1490,6 +1491,122 @@ "canRedo" ] } - } + }, + { + "url": "multiple-columns", + "name": "Multiple Columns", + "category": "Editing Features", + "type": "new", + "description": "The Document Editor supports add or remove columns.", + "api": { + "DocumentEditor": [ + "isReadOnly", + "enableAllModules", + "acceptTab", + "documentName", + "pageOutline", + "selection", + "editor", + "editorHistory", + "enableLocalPaste", + "pageCount", + "zoomFactor", + "documentChange", + "viewChange", + "selectionChange", + "requestNavigate", + "contentChange", + "open", + "print", + "openBlank", + "focusIn", + "save", + "showDialog", + "showOptionsPane", + "fitPage", + "getStyleNames", + "resize" + ], + "Selection": [ + "contextType", + "characterFormat", + "paragraphFormat", + "sectionFormat", + "cellFormat", + "imageFormat", + "goToPage", + "goToHeader", + "goToFooter", + "closeHeaderFooter" + ], + "SelectionCharacterFormat": [ + "bold", + "italic", + "underline", + "fontFamily", + "fontSize", + "fontColor", + "highlightColor", + "strikethrough", + "baselineAlignment" + ], + "SelectionParagraphFormat": [ + "textAlignment", + "lineSpacing", + "styleName" + ], + "SelectionSectionFormat": [ + "differentFirstPage", + "differentOddAndEvenPages", + "headerDistance", + "footerDistance" + ], + "SelectionCellFormat": [ + "topMargin", + "bottomMargin", + "leftMargin", + "rightMargin", + "verticalAlignment", + "background" + ], + "SelectionImageFormat": [ + "width", + "height", + "resize" + ], + "Editor": [ + "insertImage", + "toggleBold", + "toggleItalic", + "toggleUnderline", + "toggleStrikethrough", + "toggleSubscript", + "toggleSuperscript", + "toggleTextAlignment", + "increaseIndent", + "decreaseIndent", + "applyNumbering", + "applyBullet", + "applyStyle", + "clearList", + "clearFormatting", + "canMergeCells", + "mergeCells", + "applyBorders", + "insertPageNumber", + "insertTableOfContents", + "insertRow", + "insertColumn", + "deleteRow", + "deleteColumn" + ], + "EditorHistory": [ + "undo", + "redo", + "canUndo", + "canRedo" + ] + } + } ] } diff --git a/src/document-editor/section-formatting.ts b/src/document-editor/section-formatting.ts index 6a9a733f..fdb0de28 100644 --- a/src/document-editor/section-formatting.ts +++ b/src/document-editor/section-formatting.ts @@ -9,11 +9,10 @@ import * as data from './data-section-formatting.json'; (window as any).default = (): void => { loadCultureFiles(); - let hostUrl: string = 'https://ej2services.syncfusion.com/production/web-services/'; + let hostUrl: string = 'https://services.syncfusion.com/js/production/api/documenteditor/'; - let container: DocumentEditorContainer = new DocumentEditorContainer({ enableToolbar: true, height: '590px' }); + let container: DocumentEditorContainer = new DocumentEditorContainer({ serviceUrl:hostUrl,enableToolbar: true, height: '590px' }); DocumentEditorContainer.Inject(Toolbar); - container.serviceUrl = hostUrl + 'api/documenteditor/'; container.appendTo('#container'); let titleBar: TitleBar = new TitleBar(document.getElementById('documenteditor_titlebar'), container.documentEditor, true); diff --git a/src/document-editor/styles.ts b/src/document-editor/styles.ts index c5f7672b..6c4a62cc 100644 --- a/src/document-editor/styles.ts +++ b/src/document-editor/styles.ts @@ -9,11 +9,10 @@ import * as data from './data-styles.json'; (window as any).default = (): void => { loadCultureFiles(); - let hostUrl: string = 'https://ej2services.syncfusion.com/production/web-services/'; + let hostUrl: string = 'https://services.syncfusion.com/js/production/api/documenteditor/'; - let container: DocumentEditorContainer = new DocumentEditorContainer({ enableToolbar: true, height: '590px' }); + let container: DocumentEditorContainer = new DocumentEditorContainer({ serviceUrl:hostUrl,enableToolbar: true, height: '590px' }); DocumentEditorContainer.Inject(Toolbar); - container.serviceUrl = hostUrl + 'api/documenteditor/'; container.appendTo('#container'); let titleBar: TitleBar = new TitleBar(document.getElementById('documenteditor_titlebar'), container.documentEditor, true); diff --git a/src/document-editor/table-formatting.ts b/src/document-editor/table-formatting.ts index 208e464e..41ec0b32 100644 --- a/src/document-editor/table-formatting.ts +++ b/src/document-editor/table-formatting.ts @@ -9,11 +9,10 @@ import * as data from './data-table-formatting.json'; (window as any).default = (): void => { loadCultureFiles(); - let hostUrl: string = 'https://ej2services.syncfusion.com/production/web-services/'; + let hostUrl: string = 'https://services.syncfusion.com/js/production/api/documenteditor/'; - let container: DocumentEditorContainer = new DocumentEditorContainer({ enableToolbar: true, height: '590px' }); + let container: DocumentEditorContainer = new DocumentEditorContainer({ serviceUrl:hostUrl,enableToolbar: true, height: '590px' }); DocumentEditorContainer.Inject(Toolbar); - container.serviceUrl = hostUrl + 'api/documenteditor/'; container.appendTo('#container'); let titleBar: TitleBar = new TitleBar(document.getElementById('documenteditor_titlebar'), container.documentEditor, true); diff --git a/src/document-editor/table-of-contents.ts b/src/document-editor/table-of-contents.ts index 5ecba8a9..9457a139 100644 --- a/src/document-editor/table-of-contents.ts +++ b/src/document-editor/table-of-contents.ts @@ -9,11 +9,10 @@ import * as data from './data-table-of-contents.json'; (window as any).default = (): void => { loadCultureFiles(); - let hostUrl: string = 'https://ej2services.syncfusion.com/production/web-services/'; + let hostUrl: string = 'https://services.syncfusion.com/js/production/api/documenteditor/'; - let container: DocumentEditorContainer = new DocumentEditorContainer({ enableToolbar: true, height: '590px' }); + let container: DocumentEditorContainer = new DocumentEditorContainer({ serviceUrl:hostUrl, enableToolbar: true, height: '590px' }); DocumentEditorContainer.Inject(Toolbar); - container.serviceUrl = hostUrl + 'api/documenteditor/'; container.appendTo('#container'); let titleBar: TitleBar = new TitleBar(document.getElementById('documenteditor_titlebar'), container.documentEditor, true); diff --git a/src/document-editor/toolbar-customization.ts b/src/document-editor/toolbar-customization.ts index c224bdea..6b5842d5 100644 --- a/src/document-editor/toolbar-customization.ts +++ b/src/document-editor/toolbar-customization.ts @@ -11,12 +11,11 @@ import * as data from './data-toolbar-customization.json'; */ (window as any).default = (): void => { loadCultureFiles(); - let hostUrl: string = 'https://ej2services.syncfusion.com/production/web-services/'; + let hostUrl: string = 'https://services.syncfusion.com/js/production/api/documenteditor/'; let container: DocumentEditorContainer = new DocumentEditorContainer({ - enableToolbar: true, height: '590px'}); + serviceUrl:hostUrl,enableToolbar: true, height: '590px'}); DocumentEditorContainer.Inject(Toolbar); MultiSelect.Inject(CheckBoxSelection); - container.serviceUrl = hostUrl + 'api/documenteditor/'; container.appendTo('#container'); let titleBar: TitleBar = new TitleBar(document.getElementById('documenteditor_titlebar'), container.documentEditor, true); container.documentEditor.open(JSON.stringify((data))); diff --git a/src/document-editor/track-changes.ts b/src/document-editor/track-changes.ts index 9fffd5b2..cfc2c142 100644 --- a/src/document-editor/track-changes.ts +++ b/src/document-editor/track-changes.ts @@ -9,14 +9,13 @@ import * as data from './data-track-changes.json'; */ (window as any).default = (): void => { loadCultureFiles(); - let hostUrl: string = 'https://ej2services.syncfusion.com/production/web-services/'; + let hostUrl: string = 'https://services.syncfusion.com/js/production/api/documenteditor/'; let container: DocumentEditorContainer = new DocumentEditorContainer({ - enableToolbar: true, height: '590px', showPropertiesPane: false, + serviceUrl:hostUrl,enableToolbar: true, height: '590px', showPropertiesPane: false, enableTrackChanges: true, userColor: '#b70f34' }); DocumentEditorContainer.Inject(Toolbar); - container.serviceUrl = hostUrl + 'api/documenteditor/'; container.appendTo('#container'); container.documentEditor.currentUser = 'Nancy Davolio'; let titleBar: TitleBar = new TitleBar(document.getElementById('documenteditor_titlebar'), container.documentEditor, true); diff --git a/src/document-editor/web-layout.ts b/src/document-editor/web-layout.ts index a22266ec..98b8d076 100644 --- a/src/document-editor/web-layout.ts +++ b/src/document-editor/web-layout.ts @@ -9,14 +9,13 @@ import * as data from './data-web-layout.json'; */ (window as any).default = (): void => { loadCultureFiles(); - let hostUrl: string = 'https://ej2services.syncfusion.com/production/web-services/'; + let hostUrl: string = 'https://services.syncfusion.com/js/production/api/documenteditor/'; let container: DocumentEditorContainer = new DocumentEditorContainer({ - enableToolbar: true, + serviceUrl:hostUrl,enableToolbar: true, height: '590px', layoutType: 'Continuous' }); DocumentEditorContainer.Inject(Toolbar); - container.serviceUrl = hostUrl + 'api/documenteditor/'; container.appendTo('#container'); let titleBar: TitleBar = new TitleBar(document.getElementById('documenteditor_titlebar'), container.documentEditor, true); diff --git a/src/drop-down-list/data-binding.ts b/src/drop-down-list/data-binding.ts index bc87662e..02ce43b4 100644 --- a/src/drop-down-list/data-binding.ts +++ b/src/drop-down-list/data-binding.ts @@ -14,7 +14,7 @@ import * as data from './dataSource.json'; let dropDownListObj: DropDownList = new DropDownList({ // bind the DataManager instance to dataSource property dataSource: new DataManager({ - url: 'https://ej2services.syncfusion.com/production/web-services/api/Employees', + url: 'https://ej2services.syncfusion.com/js/development/api/Employees', adaptor: new WebApiAdaptor , crossDomain: true }), diff --git a/src/drop-down-list/inline.html b/src/drop-down-list/inline.html index f13dfaf9..7ad71785 100644 --- a/src/drop-down-list/inline.html +++ b/src/drop-down-list/inline.html @@ -127,7 +127,12 @@ .tailwind-dark #contentText .e-input-group.e-control-wrapper.e-ddl:hover, .tailwind-dark #contentText .e-input-group.e-ddl.e-input-focus, .tailwind-dark #contentText .e-input-group.e-ddl.e-input-focus::before, - .tailwind-dark #contentText .e-input-group.e-ddl.e-input-focus::after { + .tailwind-dark #contentText .e-input-group.e-ddl.e-input-focus::after, + .fluent-dark #contentText .e-input-group.e-control-wrapper.e-ddl, + .fluent-dark #contentText .e-input-group.e-control-wrapper.e-ddl:hover, + .fluent-dark #contentText .e-input-group.e-ddl.e-input-focus, + .fluent-dark #contentText .e-input-group.e-ddl.e-input-focus::before, + .fluent-dark #contentText .e-input-group.e-ddl.e-input-focus::after { border-bottom: 1px dashed #f0f0f0; } \ No newline at end of file diff --git a/src/file-manager/amazon-s3-provider.ts b/src/file-manager/amazon-s3-provider.ts index 5958f55f..c968ba75 100644 --- a/src/file-manager/amazon-s3-provider.ts +++ b/src/file-manager/amazon-s3-provider.ts @@ -16,6 +16,11 @@ FileManager.Inject(Toolbar, NavigationPane, DetailsView, ContextMenu); uploadUrl: hostUrl + 'AmazonS3Upload', downloadUrl: hostUrl + 'AmazonS3Download' }, + toolbarSettings: { items: ['NewFolder', 'SortBy', 'Cut', 'Copy', 'Paste', 'Delete', 'Refresh', 'Download', 'Rename', 'Selection', 'View', 'Details'] }, + contextMenuSettings: { + layout: ["SortBy", "View", "Refresh", "|", "Paste", "|", "NewFolder", "|", "Details", "|", "SelectAll"], + visible: true + }, searchSettings: {allowSearchOnTyping: false} }); fileObject.appendTo('#filemanager'); diff --git a/src/file-manager/azure-service.ts b/src/file-manager/azure-service.ts index 760cd33f..e4833b02 100644 --- a/src/file-manager/azure-service.ts +++ b/src/file-manager/azure-service.ts @@ -15,6 +15,11 @@ FileManager.Inject(Toolbar, NavigationPane, DetailsView, ContextMenu); getImageUrl: hostUrl + 'api/AzureFileManager/AzureGetImage', uploadUrl: hostUrl + 'api/AzureFileManager/AzureUpload', downloadUrl: hostUrl + 'api/AzureFileManager/AzureDownload' + }, + toolbarSettings: { items: ['NewFolder', 'SortBy', 'Cut', 'Copy', 'Paste', 'Delete', 'Refresh', 'Download', 'Rename', 'Selection', 'View', 'Details'] }, + contextMenuSettings: { + layout: ["SortBy", "View", "Refresh", "|", "Paste", "|", "NewFolder", "|", "Details", "|", "SelectAll"], + visible: true } }); fileObject.appendTo('#filemanager'); diff --git a/src/file-manager/custom-thumbnail.ts b/src/file-manager/custom-thumbnail.ts index 0a0055ba..be3ff2bf 100644 --- a/src/file-manager/custom-thumbnail.ts +++ b/src/file-manager/custom-thumbnail.ts @@ -17,6 +17,11 @@ FileManager.Inject(Toolbar, NavigationPane, DetailsView, ContextMenu); uploadUrl: hostUrl + 'api/FileManager/Upload', downloadUrl: hostUrl + 'api/FileManager/Download' }, + toolbarSettings: { items: ['NewFolder', 'SortBy', 'Cut', 'Copy', 'Paste', 'Delete', 'Refresh', 'Download', 'Rename', 'Selection', 'View', 'Details'] }, + contextMenuSettings: { + layout: ["SortBy", "View", "Refresh", "|", "Paste", "|", "NewFolder", "|", "Details", "|", "SelectAll"], + visible: true + }, showThumbnail: false, view: 'LargeIcons' }); diff --git a/src/file-manager/default.html b/src/file-manager/default.html index fb730737..5a69e870 100644 --- a/src/file-manager/default.html +++ b/src/file-manager/default.html @@ -11,9 +11,59 @@
Toolbar
- +
- + +
+ + + + +
allowMultipleSelection
+ + +
+ +
+ + + + +
showFileExtension
+ + +
+ +
+ + + + +
showThumbnail
+ + +
+ +
+ + + + +
Enable
+ + +
+ +
+ + + + +
Disable
+ + +
+
@@ -23,16 +73,21 @@
-

This sample demonstrates the properties of FileManager component from the property pane. Select any properties - from the property pane to customize the FileManager.

+

The File Manager component in the property pane displays its features in this sample. The visibility of the toolbar, multi-selection, file extensions + and image thumbnails can all be easily controlled by checking or unchecking the respective checkboxes. Additionally, specific toolbar items can be + enabled or disabled by selecting values in the Dropdown List.

-

The File Manager component is used to explore a file system through a web application, similar to the windows - explorer for windows. It supports the basic file operations such as create, rename, delete.

- +

In this demo, the above mentioned requirements are achieved by using the following API properties and method of the File Manager component.

+

toolbarSettings defines the group of items in the toolbar that are aligned horizontally.

+

allowMultiSelection property enables or disables the File Manager's multiple folder or file selection.

+

showFileExtension property shows or hides the file extension in the File Manager.

+

showThumbnail property shows or hides thumbnail images in the large icons view. .

+

enableToolbarItems specifies which items should be enabled in the toolbar.

+

disableToolbarItems specifies which items should be disabled in the toolbar.

Note: File Manager’s upload functionality is restricted in the online demo. If you need to test upload functionality, please install - Syncfusion Essential Studio on your machine and run the demo.

+ Syncfusion Essential Studio on your machine and run the demo.

\ No newline at end of file + diff --git a/src/file-manager/default.ts b/src/file-manager/default.ts index 0e0fdbb6..b69a76d0 100644 --- a/src/file-manager/default.ts +++ b/src/file-manager/default.ts @@ -1,6 +1,7 @@ import { loadCultureFiles } from '../common/culture-loader'; import { FileManager, Toolbar, NavigationPane, DetailsView, ContextMenu } from '@syncfusion/ej2-filemanager'; import { CheckBox } from '@syncfusion/ej2-buttons'; +import { DropDownList } from '@syncfusion/ej2-dropdowns'; FileManager.Inject(Toolbar, NavigationPane, DetailsView, ContextMenu); @@ -17,17 +18,53 @@ FileManager.Inject(Toolbar, NavigationPane, DetailsView, ContextMenu); uploadUrl: hostUrl + 'api/FileManager/Upload', downloadUrl: hostUrl + 'api/FileManager/Download' }, + toolbarSettings: { items: ['NewFolder', 'SortBy', 'Cut', 'Copy', 'Paste', 'Delete', 'Refresh', 'Download', 'Rename', 'Selection', 'View', 'Details'] }, + contextMenuSettings: { + layout: ["SortBy", "View", "Refresh", "|", "Paste", "|", "NewFolder", "|", "Details", "|", "SelectAll"], + visible: true + }, navigationPaneSettings: { visible: false }, view: 'LargeIcons' }); fileObject.appendTo('#file'); - let toggleCheckbox: CheckBox = new CheckBox({ checked: true, change: onChange }); - toggleCheckbox.appendTo('#toolbar_checkbox'); + let checkBoxObj : CheckBox = new CheckBox({ checked: true, change: onToolbarChange }); + checkBoxObj.appendTo('#toolbar'); + let multiSelectObj : CheckBox= new CheckBox({ checked: true, change: onToolbarChange }); + multiSelectObj.appendTo('#multiSelect'); + let fileExtendObj : CheckBox = new CheckBox({ checked: true, change: onToolbarChange }); + fileExtendObj.appendTo('#fileExtension'); + let thumbnailObj : CheckBox= new CheckBox({ checked: true, change: onToolbarChange }); + thumbnailObj.appendTo('#thumbnail'); + let enableItems = ['NewFolder', 'Cut', 'Copy', 'Paste', 'Download', 'Delete', 'Refresh', 'Selection', 'View', 'Details']; + let enableObj : DropDownList= new DropDownList({ dataSource: enableItems, placeholder: "Select item" ,change: onItemChange }); + enableObj.appendTo('#enable'); + let disableItems = ['NewFolder', 'Cut', 'Copy', 'Paste', 'Download', 'Delete', 'Refresh', 'Selection', 'View', 'Details']; + let disableObj : DropDownList = new DropDownList({ dataSource: disableItems, placeholder: "Select item", change: onItemChange }); + disableObj.appendTo('#disable'); - - function onChange(args: any): void { - fileObject.toolbarSettings.visible = args.checked; + function onToolbarChange(args: any): void { + if (args.event.target.previousElementSibling.id == "toolbar") { + fileObject.toolbarSettings.visible = args.checked; + } + if (args.event.target.previousElementSibling.id == "multiSelect") { + fileObject.allowMultiSelection = args.checked; + } + if (args.event.target.previousElementSibling.id == "fileExtension") { + fileObject.showFileExtension = args.checked; + } + if (args.event.target.previousElementSibling.id == "thumbnail") { + fileObject.showThumbnail = args.checked; + } } -}; \ No newline at end of file + function onItemChange(args: any): void { + var changedItem = args.itemData.value; + if (args.element.id == "enable") { + fileObject.enableToolbarItems([changedItem]); + } + else { + fileObject.disableToolbarItems([changedItem]); + } + } +}; diff --git a/src/file-manager/drag-drop.ts b/src/file-manager/drag-drop.ts index c2294ed5..176116c3 100644 --- a/src/file-manager/drag-drop.ts +++ b/src/file-manager/drag-drop.ts @@ -17,6 +17,11 @@ FileManager.Inject(Toolbar, NavigationPane, DetailsView, ContextMenu); uploadUrl: hostUrl + 'api/FileManager/Upload', downloadUrl: hostUrl + 'api/FileManager/Download' }, + toolbarSettings: { items: ['NewFolder', 'SortBy', 'Cut', 'Copy', 'Paste', 'Delete', 'Refresh', 'Download', 'Rename', 'Selection', 'View', 'Details'] }, + contextMenuSettings: { + layout: ["SortBy", "View", "Refresh", "|", "Paste", "|", "NewFolder", "|", "Details", "|", "SelectAll"], + visible: true + }, allowDragAndDrop: true }); fileObject.appendTo('#filemanager'); diff --git a/src/file-manager/firebase.ts b/src/file-manager/firebase.ts index d47054bc..8de77efa 100644 --- a/src/file-manager/firebase.ts +++ b/src/file-manager/firebase.ts @@ -15,7 +15,12 @@ FileManager.Inject(Toolbar, NavigationPane, DetailsView, ContextMenu); getImageUrl: hostUrl + 'api/FirebaseProvider/FirebaseRealtimeGetImage', uploadUrl: hostUrl + 'api/FirebaseProvider/FirebaseRealtimeUpload', downloadUrl: hostUrl + 'api/FirebaseProvider/FirebaseRealtimeDownload' - } + }, + toolbarSettings: { items: ['NewFolder', 'SortBy', 'Cut', 'Copy', 'Paste', 'Delete', 'Refresh', 'Download', 'Rename', 'Selection', 'View', 'Details'] }, + contextMenuSettings: { + layout: ["SortBy", "View", "Refresh", "|", "Paste", "|", "NewFolder", "|", "Details", "|", "SelectAll"], + visible: true + } }); fileObject.appendTo('#filemanager'); }; \ No newline at end of file diff --git a/src/file-manager/ftp-file-provider.ts b/src/file-manager/ftp-file-provider.ts index 247fd8ea..a3f73e38 100644 --- a/src/file-manager/ftp-file-provider.ts +++ b/src/file-manager/ftp-file-provider.ts @@ -15,6 +15,11 @@ FileManager.Inject(Toolbar, NavigationPane, DetailsView, ContextMenu); getImageUrl: hostUrl + 'api/FTPProvider/FTPGetImage', uploadUrl: hostUrl + 'api/FTPProvider/FTPUpload', downloadUrl: hostUrl + 'api/FTPProvider/FTPDownload' + }, + toolbarSettings: { items: ['NewFolder', 'SortBy', 'Cut', 'Copy', 'Paste', 'Delete', 'Refresh', 'Download', 'Rename', 'Selection', 'View', 'Details'] }, + contextMenuSettings: { + layout: ["SortBy", "View", "Refresh", "|", "Paste", "|", "NewFolder", "|", "Details", "|", "SelectAll"], + visible: true } }); fileObject.appendTo('#ftpFilemanager'); diff --git a/src/file-manager/ibm-cos-node-file-provider.ts b/src/file-manager/ibm-cos-node-file-provider.ts index 7bc5308a..17fbbe98 100644 --- a/src/file-manager/ibm-cos-node-file-provider.ts +++ b/src/file-manager/ibm-cos-node-file-provider.ts @@ -16,6 +16,11 @@ FileManager.Inject(Toolbar, NavigationPane, DetailsView, ContextMenu); uploadUrl: hostUrl + 'Upload', downloadUrl: hostUrl + 'Download' }, + toolbarSettings: { items: ['NewFolder', 'SortBy', 'Cut', 'Copy', 'Paste', 'Delete', 'Refresh', 'Download', 'Rename', 'Selection', 'View', 'Details'] }, + contextMenuSettings: { + layout: ["SortBy", "View", "Refresh", "|", "Paste", "|", "NewFolder", "|", "Details", "|", "SelectAll"], + visible: true + }, rootAliasName: 'Files' }); fileObject.appendTo('#filemanager'); diff --git a/src/file-manager/nodejs-file-provider.ts b/src/file-manager/nodejs-file-provider.ts index 54b79fb4..ac3ad704 100644 --- a/src/file-manager/nodejs-file-provider.ts +++ b/src/file-manager/nodejs-file-provider.ts @@ -15,6 +15,11 @@ FileManager.Inject(Toolbar, NavigationPane, DetailsView, ContextMenu); getImageUrl: hostUrl + 'GetImage', uploadUrl: hostUrl + 'Upload', downloadUrl: hostUrl + 'Download' + }, + toolbarSettings: { items: ['NewFolder', 'SortBy', 'Cut', 'Copy', 'Paste', 'Delete', 'Refresh', 'Download', 'Rename', 'Selection', 'View', 'Details'] }, + contextMenuSettings: { + layout: ["SortBy", "View", "Refresh", "|", "Paste", "|", "NewFolder", "|", "Details", "|", "SelectAll"], + visible: true } }); fileObject.appendTo('#filemanager'); diff --git a/src/file-manager/overview.ts b/src/file-manager/overview.ts index d7bc375d..a118f719 100644 --- a/src/file-manager/overview.ts +++ b/src/file-manager/overview.ts @@ -16,7 +16,25 @@ FileManager.Inject(Toolbar, NavigationPane, DetailsView, ContextMenu); uploadUrl: hostUrl + 'api/FileManager/Upload', downloadUrl: hostUrl + 'api/FileManager/Download' }, - view: 'Details' + toolbarSettings: { items: ['NewFolder', 'SortBy', 'Cut', 'Copy', 'Paste', 'Delete', 'Refresh', 'Download', 'Rename', 'Selection', 'View', 'Details'] }, + contextMenuSettings: { + layout: ["SortBy", "View", "Refresh", "|", "Paste", "|", "NewFolder", "|", "Details", "|", "SelectAll"], + visible: true + }, + view: 'Details', + detailsViewSettings: { + columns: [ + { + field: 'name', headerText: 'Name', customAttributes: { class: 'e-fe-grid-name' } + }, + { + field: '_fm_modified', headerText: 'DateModified', format: 'MM/dd/yyyy hh:mm a' + }, + { + field: 'size', headerText: 'Size', template: '${size}', format: 'n2' + } + ] + } }); fileObject.appendTo('#filemanager'); }; \ No newline at end of file diff --git a/src/file-manager/sample.json b/src/file-manager/sample.json index 7ca864ab..7a21e454 100644 --- a/src/file-manager/sample.json +++ b/src/file-manager/sample.json @@ -39,6 +39,13 @@ "api": { "FileManager": ["ajaxSettings", "view"] }, "description": "This example demonstrates how to upload the folder (directory) in a JavaScript File Manager." }, + { + "url": "virtualization", + "name": "Virtualization", + "category": "File Manager", + "api": { "FileManager": ["ajaxSettings", "view"] }, + "description": "This example demonstrates on how to enable the virtual scrolling feature in a JavaScript File Manager." + }, { "url": "usecase", "name": "File Upload", @@ -96,4 +103,4 @@ "description": "This example demonstrates how to configure and use the IBM Cloud Object Storage file provider service in a JavaScript (TypeScript) File Manager." } ] -} \ No newline at end of file +} diff --git a/src/file-manager/sql-server-provider.ts b/src/file-manager/sql-server-provider.ts index b7e2232e..5cf9dd34 100644 --- a/src/file-manager/sql-server-provider.ts +++ b/src/file-manager/sql-server-provider.ts @@ -15,6 +15,11 @@ FileManager.Inject(Toolbar, NavigationPane, DetailsView, ContextMenu); getImageUrl: hostUrl + 'api/FileManager/GetImage', uploadUrl: hostUrl + 'api/FileManager/Upload', downloadUrl: hostUrl + 'api/FileManager/Download' + }, + toolbarSettings: { items: ['NewFolder', 'SortBy', 'Cut', 'Copy', 'Paste', 'Delete', 'Refresh', 'Download', 'Rename', 'Selection', 'View', 'Details'] }, + contextMenuSettings: { + layout: ["SortBy", "View", "Refresh", "|", "Paste", "|", "NewFolder", "|", "Details", "|", "SelectAll"], + visible: true } }); fileObject.appendTo('#filemanager'); diff --git a/src/file-manager/virtualization.html b/src/file-manager/virtualization.html index 995ee66f..e97701e3 100644 --- a/src/file-manager/virtualization.html +++ b/src/file-manager/virtualization.html @@ -10,12 +10,7 @@
-

In the demo, enabled virtualization by using virtualizationSettings.enable property as true. Specify the number of files/folders to render on initial rendering through following APIs. -

    -
  • For details view, specify count by usingvirtualizationSettings.detailsViewItemsCount
    • -
  • For large icons view, specify count by using virtualizationSettings.largeIconsViewItemsCount
    • -
-

+

In the demo, enabled virtualization by using enableVirtualization property as true.

To use virtual scrolling feature, inject Virtualization module using the FileManager.Inject(Virtualization) section.

Note: File Manager’s upload functionality is restricted in the online demo. If you need to test upload functionality, please install Syncfusion Essential Studio on your machine and run the demo.

diff --git a/src/file-manager/virtualization.ts b/src/file-manager/virtualization.ts index 98bc6e5a..8c607a19 100644 --- a/src/file-manager/virtualization.ts +++ b/src/file-manager/virtualization.ts @@ -17,17 +17,22 @@ FileManager.Inject(Toolbar, NavigationPane, DetailsView, ContextMenu, Virtualiza downloadUrl: hostUrl + 'api/FileManager/Download' }, view: 'Details', - virtualizationSettings: { - enable: true, - detailsViewItemsCount: 30, - largeIconsViewItemsCount: 50 + toolbarSettings: { items: ['NewFolder', 'SortBy', 'Cut', 'Copy', 'Paste', 'Delete', 'Refresh', 'Download', 'Rename', 'View', 'Details'] }, + contextMenuSettings: { + layout: ["SortBy", "View", "Refresh", "|", "Paste", "|", "NewFolder", "|", "Details", "|", "SelectAll"], + visible: true }, + enableVirtualization: true, beforeSend: function(args) { - var data = JSON.parse(args.ajaxSettings.data); - // Add custom parameter rootFolderName - data["rootFolderName"] = "FileBrowser"; - // Add custom parameter in ajax settings - args.ajaxSettings.data = JSON.stringify(data); + args.ajaxSettings.beforeSend = function (args: any) { + args.httpRequest.setRequestHeader('Authorization', 'FileBrowser'); + }; + }, + beforeImageLoad: function(args) { + args.imageUrl = args.imageUrl + '&rootName=' + 'FileBrowser'; + }, + beforeDownload: function(args) { + args.data['rootFolderName'] = 'FileBrowser'; }, }); fileObject.appendTo('#filemanager'); diff --git a/src/gantt/remote-data.ts b/src/gantt/remote-data.ts index a417ef24..e1ff06d6 100644 --- a/src/gantt/remote-data.ts +++ b/src/gantt/remote-data.ts @@ -9,7 +9,7 @@ Gantt.Inject(Selection, DayMarkers); (window as any).default = (): void => { loadCultureFiles(); let dataSource: DataManager = new DataManager({ - url: 'https://ej2services.syncfusion.com/production/web-services/api/GanttData', + url: 'https://services.syncfusion.com/js/production/api/GanttData', adaptor: new WebApiAdaptor, crossDomain: true }); diff --git a/src/gantt/resource-multi-taskbar.html b/src/gantt/resource-multi-taskbar.html index be8d901d..286da03a 100644 --- a/src/gantt/resource-multi-taskbar.html +++ b/src/gantt/resource-multi-taskbar.html @@ -1,5 +1,19 @@ -
+
+
+
+ +
+ +
+
+
+ +
+ +
+
+
@@ -12,6 +26,9 @@
+

+ In this example, you can enable taskbar drag and drop from one resource to another resource vertically by enabling allowTaskbarDragAndDrop property. Also, you can prevent the taskbar overlap in resource task by disabling the allowTaskbarOverlap property. +

In this example, you can see that, the resource breaks down from a bulk of tasks can be done by mapping the pre-defined resource ID-s to each task and the resource information can be shown by using the labelSetting property. Using the toolbar action, you can perform the CRUD operation for the resource allocation based on their availability and task complexity. diff --git a/src/gantt/resource-multi-taskbar.ts b/src/gantt/resource-multi-taskbar.ts index ffff5c6c..1d7ebf43 100644 --- a/src/gantt/resource-multi-taskbar.ts +++ b/src/gantt/resource-multi-taskbar.ts @@ -2,11 +2,12 @@ import { loadCultureFiles } from '../common/culture-loader'; import { multiTaskbarData, resources } from './data-source'; -import { Gantt, Selection, DayMarkers, Toolbar, Edit, Resize } from '@syncfusion/ej2-gantt'; +import { Gantt, Selection, DayMarkers, Toolbar, Edit, Resize, RowDD } from '@syncfusion/ej2-gantt'; +import { CheckBox, Switch } from '@syncfusion/ej2-buttons'; /** * ResourceView Gantt sample */ -Gantt.Inject(Selection, DayMarkers, Toolbar, Edit, Resize); +Gantt.Inject(Selection, DayMarkers, Toolbar, Edit, Resize, RowDD); (window as any).default = (): void => { loadCultureFiles(); let gantt: Gantt = new Gantt( @@ -67,4 +68,27 @@ Gantt.Inject(Selection, DayMarkers, Toolbar, Edit, Resize); projectEndDate: new Date('05/18/2019') }); gantt.appendTo('#ResourceMultiTaskbar'); + + let taskbarDragDrop: Switch = new Switch({ value: 'allowTaskbarDragAndDrop', change: dragDropChange}); + taskbarDragDrop.appendTo('#checked'); + + let taskbarOverlap: Switch = new Switch({ value: 'allowTaskbarOverlap',checked: true, change: overlapChange }); + taskbarOverlap.appendTo('#unchecked'); + + function dragDropChange(args: any) { + let gantt = (document.getElementsByClassName('e-gantt')[0] as any).ej2_instances[0]; + if (args.checked) { + gantt.allowTaskbarDragAndDrop = true; + } else { + gantt.allowTaskbarDragAndDrop = false; + } + } + function overlapChange(args: any) { + let gantt = (document.getElementsByClassName('e-gantt')[0] as any).ej2_instances[0]; + if (args.checked) { + gantt.allowTaskbarOverlap = true; + } else { + gantt.allowTaskbarOverlap = false; + } + } }; diff --git a/src/gantt/sample.json b/src/gantt/sample.json index c1dc0f1f..740f1e5d 100644 --- a/src/gantt/sample.json +++ b/src/gantt/sample.json @@ -57,7 +57,6 @@ "url": "virtual-scroll", "name": "Virtual Scrolling", "category": "Gantt", - "type": "update", "api": { "Gantt": [ "dataSource", @@ -89,7 +88,6 @@ "url": "loading-animation", "name": "Loading Animation", "category": "Gantt", - "type": "new", "api": { "Gantt": [ "dataSource", @@ -616,6 +614,7 @@ "url": "resource-multi-taskbar", "name": "Resource Multi Taskbar", "category": "Resources", + "type": "update", "api": { "Gantt": [ "dataSource", diff --git a/src/grid/column-resize.html b/src/grid/column-resize.html index deeb3525..603b9371 100644 --- a/src/grid/column-resize.html +++ b/src/grid/column-resize.html @@ -1,23 +1,26 @@

-
+
+
+
-

This sample demonstrates the Grid column resizing feature. Click and drag at the right corner of each column header to - resize the column. -

+

This sample demonstrates the Grid column rendering with a specified width. This sample also shows how to enable the resizing feature. Click and drag the right corner of each column header to resize it.

-

The Grid columns can be resized by clicking and dragging at the right edge of columns header. To enable column, resize behavior, set By default, if the total width of the columns is less than the width of the Grid, columns will automatically fill to the grid's width. The Grid's AutoFit feature prevents Grid columns from filling more than their specified width by enabling the autoFit as true.

+
+ +

The Grid columns can be resized by clicking and dragging at the right edge of column's header. To enable column, resize behavior, set the allowResizing - property as true. You can also prevent the resize of the particular column by setting + property to true. You can also prevent the resize of a particular column by setting columns->allowResizing - as false in columns definition. + to false in columns definition. - And, by double clicking at the right edge of column header, the respective column width will get auto adjusted to its fit by autoFitColumns method. @@ -25,18 +28,18 @@

- In this demo, allowResizing feature have enabled through by setting the allowResizing property to true and Order ID column can be resized - between the range of minWidth (120px) + In this demo, the allowResizing feature is enabled by setting the allowResizing property to true and Order ID column can be resized + between the range of minWidth (100px) and maxWidth (300px). - Also, column resizing has been disabled in the Shipped Date column. + href="http://ej2.syncfusion.com/documentation/grid/api-column.html#maxwidth">maxWidth (200px). + Also, column resizing is disabled for the Shipped Date column.

Injecting Module:

Grid features are segregated into individual feature-wise modules. - To use resize feature, we need to inject + To use resize feature, inject the Resize module using the Grid.Inject(Resize) section.

\ No newline at end of file diff --git a/src/grid/column-resize.ts b/src/grid/column-resize.ts index cae5e92d..a574475c 100644 --- a/src/grid/column-resize.ts +++ b/src/grid/column-resize.ts @@ -14,18 +14,17 @@ Grid.Inject(Selection, Resize); dataSource: orderDetails, allowResizing: true, height: 400, + width: 850, + autoFit: true, columns: [ - { field: 'OrderID', headerText: 'Order ID', minWidth: 120, width: 200, maxWidth: 300, textAlign: 'Right' }, - { field: 'CustomerName', headerText: 'Customer Name', minWidth: 8, width: 200 }, - { field: 'OrderDate', headerText: 'Order Date', width: 200, minWidth: 8, format: 'yMd', textAlign: 'Right' }, - { field: 'Freight', width: 150, format: 'C2', minWidth: 8, textAlign: 'Right' }, - { field: 'ShipName', headerText: 'Ship Name', minWidth: 8, width: 300 }, + { field: 'OrderID', headerText: 'Order ID', minWidth: 100, width: 150, maxWidth: 200, textAlign: 'Right' }, + { field: 'CustomerName', headerText: 'Customer Name', minWidth: 8, width: 150 }, + { field: 'Freight', width: 120, format: 'C2', minWidth: 8, textAlign: 'Right' }, { field: 'ShippedDate', headerText: 'Shipped Date', minWidth: 8, - width: 200, format: 'yMd', textAlign: 'Right', allowResizing: false + width: 150, format: 'yMd', textAlign: 'Right', allowResizing: false }, - { field: 'ShipCountry', headerText: 'Ship Country', minWidth: 8, width: 200 }, - { field: 'ShipCity', headerText: 'Ship City', minWidth: 8, width: 200 } + { field: 'ShipCountry', headerText: 'Ship Country', minWidth: 8, width: 150 } ] }); grid.appendTo('#Grid'); diff --git a/src/grid/detail-template.html b/src/grid/detail-template.html index 767cf516..8b4216cb 100644 --- a/src/grid/detail-template.html +++ b/src/grid/detail-template.html @@ -6,6 +6,7 @@ overflow: hidden; text-overflow: ellipsis; white-space: nowrap; + font-weight: normal; } .photo { diff --git a/src/grid/filter-menu.html b/src/grid/filter-menu.html index 29338840..05b3e978 100644 --- a/src/grid/filter-menu.html +++ b/src/grid/filter-menu.html @@ -7,9 +7,9 @@

- This sample demonstrates the way of filtering Grid columns using menu, checkbox and excel filter UI. In this sample, click the filtering - icon from column header to show filter UI for a particular column. You can change the filter type from the properties - panel and while Excel filter type is selected, you can sort the column using the sorting option available in the excel filter dialog. + This sample demonstrates filtering Grid columns using menu, checkbox, and Excel filter UI. + In this sample, click the filter icon on the column header to filter a particular column. + You can change the filter type on the properties panel. When Excel filter type is selected, you can sort the column using the sort option in the Excel filter dialog.

@@ -30,11 +30,10 @@
-

The filtering feature enables the user to view the reduced amount of records based on filter criteria. It can be enabled - by setting The filtering feature enables the user to view a reduced number of records based on the filter criteria. It can be enabled by setting the allowFiltering - property as true.

-

Grid supports the following filter types. They are

+ property to true.

+

Grid supports the following filter types.

  • FilterBar
  • Menu
    • @@ -43,6 +42,30 @@
you can change the filter type by setting filterSettings->type -

In this demo, filter menu enabled by default , you can switch to other filter type by using dropdown.

+

Now, the following additional filter operators are incorporated with the already existing operators.

+

String type columns: +

    +
  • Not Equal
    • +
  • Does Not Start With
    • +
  • Does Not End With
    • +
  • Does Not Contain
    • +
  • Empty
    • +
  • Not Empty
    • +
  • Like
    • +
+

+

Number and Date type columns: +

    +
  • Null
    • +
  • Not Null
    • +
+

+

For example, when the Like search operator is used:

+
    +
  • %a% - Filters words containing the character 'a'
    • +
  • a% - Filters words ending with 'a'
    • +
  • %a - Filters words starting with 'a'
    • +
+

In this demo, filter menu is enabled by default. You can switch to other filter types using the dropdown.

-
\ No newline at end of file +
diff --git a/src/grid/filter.html b/src/grid/filter.html index 1794d31a..6677c91a 100644 --- a/src/grid/filter.html +++ b/src/grid/filter.html @@ -7,8 +7,7 @@

- This sample demonstrates the Grid Default Filtering feature. In this sample, type the value in the filterbar and press enter - to filter particular column. + This sample demonstrates the Grid's default filtering feature. Type a value in the filterbar and press enter to filter a particular column.

@@ -28,34 +27,44 @@
-

The filtering feature enables the user to view the reduced amount of records based on filter criteria. It can be enabled - by setting The filtering feature enables the user to view a reduced amount of records based on filter criteria. It can be enabled + by setting the allowFiltering - property as true. A filter bar row will be rendered next to header which allows the end-users to filter + property to true. A filter bar row will be rendered next to header which allows users to filter data by entering text within its cells.

-

Filterbar uses two modes which specifies how to start filtering. They are,

+

The Filterbar uses two modes which specifies how to start filtering. They are,

-

In this demo, you can type the text in the filter bar cells to filter the Grid.

-

Additionally, the grid records can also be filtered based on the selected filterbar operator. It can be enabled by setting +

In this demo, you can type the text in the filter bar cells to filter.

+

Additionally, the records can also be filtered based on the selected filterbar operator. It can be enabled by setting
- filterSettings->showFilterBarOperator property as true.

-

In this demo,

+ filterSettings->showFilterBarOperator property to true.

+

In this demo,

  • To enable or disable filterbar operator feature, check or uncheck the checkbox in the properties panel.
    • -
  • Now select the required filtering operator in the dropdown list on the filter bar cell and - type the text in the filter bar cell to filter the Grid.
    • +
  • Select the required filtering operator in the dropdown list on the filter bar cell and type the text to start filtering.
    • +
  • Now, the addition of new filter operators such as "Does Not Contain", "Does Not End With", "Does Not Start With", "Empty", "Not Empty", "Null", "Not Null", "Like", and "Wildcard search" greatly enhance the filtering feature of the Grid.
    • +
+

For example, when the Like search operator is used:

+
    +
  • %a% - Filters words containing the character 'a'
    • +
  • a% - Filters words ending with 'a'
    • +
  • %a - Filters words starting with 'a'
    • +
+

For example when the Wildcard search operator is used:

+
    +
  • a*b - Filters words that start with 'a' and end with 'b'

Injecting Module:

- Grid features are segregated into individual feature-wise modules. To use filtering feature, we need to inject + Grid features are segregated into individual feature-wise modules. To use filtering feature, inject the Filter using the Grid.Inject(Filter) method. diff --git a/src/grid/flexible-data.html b/src/grid/flexible-data.html new file mode 100644 index 00000000..b95d9d99 --- /dev/null +++ b/src/grid/flexible-data.html @@ -0,0 +1,210 @@ + + + + +

+
+
+
+
+
+
+

This sample demonstrates how to bind a data from various remote services to the Grid component. +

+
+ +
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+
Service
+ 		+
+ +
+
+
Adaptor
+ 		+
+ +
+
+ +
+
Additional Parameters
+
+
+ +
+ 		+
+ +
+
+
+ +
+ 		+
+ +
+
+
HTTP Headers
+
+
+ +
+ 		+
+ +
+
+
+ +
+ 		+
+ +
+
+
+ +
+
+
+
+
+ +
+

The Grid supports data binding. The + dataSource property can be assigned with the instance of + DataManager to bind remote data.

+ +

The DataManager, which will act as an interface between the service endpoint and the Grid, will require the below + minimal information to interact with service endpoint properly. +

+
    +
  • DataManager->url - Defines the service endpoint to fetch data
    • +
  • DataManager->adaptor - Defines the adaptor option.
    • +
+

Adaptor is responsible for + processing response and request from/to the service endpoint. + @syncfusion/ej2-data package provides some predefined adaptors which are designed to interact with + particular service endpoints. They are, +

+
    +
  • UrlAdaptor - Use this to interact any remote services. This is the base adaptor for all remote + based + adaptors.
    • +
  • ODataAdaptor - Use this to interact with OData endpoints.
    • +
  • ODataV4Adaptor - Use this to interact with OData V4 endpoints.
    • +
  • WebApiAdaptor - Use this to interact with Web API created under OData standards.
    • +
  • Own Service - Custom databinding is used where data actions like paging, sorting are perfromed in + dataStateChange event of grid. +
    • +
+

By default ODataAdaptor is used in this demo. The adaptor type will be automatically assigned based on the selected + data service.


+

The dataSource of grid can be dynamically changed using changeDataSource method by following the below + steps

+
    +
  • Select any URL from the Service dropdown.
    • +
  • To enable or disable the paging feature, check or uncheck the Enable Paging checkbox.
    • +
  • Enter the name and value in the respective input boxes, then click the Add button to send + extra parameters with the grid query. + However, note that this demonstration only covers the skip and take query from the additional + parameters, excluding the custom binding feature.
    • +
  • In this demo, if you enable pagination by checking the Enable Paging checkbox, the additional parameter + of + skip and take query will not be processed separately, + as it will be processed inbuilt with the pagination feature. +
    • +
  • To add http request headers enter the key and value in the respective input fields and click the + Add + button. +
    • +
  • In this demo, custom headers are not included in the payload information due to the limitations of both + the OData service and the custom binding service. + These services do not accept any additional headers based on the CORS policy. To send HTTP headers, it + is important to ensure the CORS policy in your service.
    • +
  • Multiple headers and parameters can be added as well.
    • +
  • Press the Connect button to update the grid dataSource.
    • +
  • The connected service with the respective adaptor, the parameters and header that passed along with the grid + query will be listed under Payload Information.
    • +
+

+ More information on the data binding can be found in this + + documentation section. +

+
\ No newline at end of file diff --git a/src/grid/flexible-data.ts b/src/grid/flexible-data.ts new file mode 100644 index 00000000..c1f2b143 --- /dev/null +++ b/src/grid/flexible-data.ts @@ -0,0 +1,223 @@ +import { loadCultureFiles } from '../common/culture-loader'; +import { Grid, Filter, Page, Selection, ColumnModel, CheckBoxChangeEventArgs, DataStateChangeEventArgs, Sorts } from '@syncfusion/ej2-grids'; +import { CheckBox } from '@syncfusion/ej2-buttons'; +import { ChangeEventArgs, DropDownList } from '@syncfusion/ej2-dropdowns'; +import { AdaptorOptions, DataManager, DataResult, ODataAdaptor, ODataV4Adaptor, Query, UrlAdaptor, WebApiAdaptor } from '@syncfusion/ej2/data'; +import { addClass, Ajax, removeClass } from '@syncfusion/ej2/base'; +import { TextBox } from '@syncfusion/ej2/inputs'; + +Grid.Inject(Filter, Page, Selection); + +(window as any).default = (): void => { + loadCultureFiles(); + let changedAdaptor: string = 'ODataV4Adaptor'; + let selectedService: string = 'https://services.odata.org/V4/Northwind/Northwind.svc/Orders/'; + let defaultParam: string; + let defaultHeader: string; + let header: [string]; + let params: [string]; + const serviceURL: { [key: string]: Object }[] = [ + { text: 'https://services.odata.org/V4/Northwind/Northwind.svc/Orders/', value: 'ODataV4Adaptor' }, + { text: 'https://js.syncfusion.com/ejServices/Wcf/Northwind.svc/Orders/', value: 'ODataAdaptor' }, + { text: 'https://services.syncfusion.com/js/production/api/Orders', value: 'WebApiAdaptor' }, + { text: 'https://services.syncfusion.com/js/production/api/UrlDataSource', value: 'UrlAdaptor' }, + { text: 'https://js.syncfusion.com/demos/ejServices/Wcf/Northwind.svc/Orders', value: 'Custom Binding' } + ]; + let defaultColumns: ColumnModel[] = [ + { field: 'OrderID', headerText: 'Order ID', textAlign: 'Right', width: 120, type: 'number' }, + { field: 'CustomerID', width: 140, headerText: 'Customer ID' }, + { field: 'EmployeeID', headerText: 'Employee ID', width: 120, textAlign: 'Right' }, + { field: 'ShipCity', headerText: 'Ship City', width: 140 }, + ]; + let empColumns: ColumnModel[] = [ + { field: 'EmployeeID', headerText: 'Employee ID', width: 130, textAlign: 'Right' }, + { field: 'Employees', headerText: 'Employee Name', width: 150 }, + { field: 'Designation', headerText: 'Designation', width: 130 }, + { field: 'CurrentSalary', headerText: 'Current Salary', format: "C2", textAlign: 'Right', width: 140 } + ]; + let serviceDropdown: DropDownList = new DropDownList({ + dataSource: serviceURL, + popupWidth: 'auto', + text: 'https://services.odata.org/V4/Northwind/Northwind.svc/Orders/', + fields: { text: 'text', value: 'value' }, + change: function (e: ChangeEventArgs) { + selectedService = e.itemData.text; + changedAdaptor = e.itemData.value; + (document.getElementById('adaptor_txt') as any).value = changedAdaptor; + let paramElements = document.querySelectorAll('.params_show_hide'); + let headerElements = document.querySelectorAll('.header_show_hide'); + removeClass(paramElements, 'hide_elem'); + removeClass(headerElements, 'hide_elem'); + if (changedAdaptor === 'ODataAdaptor') { + addClass(headerElements, 'hide_elem'); + } + if (changedAdaptor === 'Custom Binding') { + addClass(paramElements, 'hide_elem'); + addClass(headerElements, 'hide_elem'); + } + } + }); + serviceDropdown.appendTo('#service_drop'); + + let adaptorTxtBox = new TextBox({ + value: 'ODataV4Adaptor', + readonly: true, + }); + adaptorTxtBox.appendTo('#adaptor_txt'); + + var defaultData = new DataManager({ + url: 'https://services.odata.org/V4/Northwind/Northwind.svc/Orders/', + adaptor: new ODataV4Adaptor(), + crossDomain: true + }); + var grid = new Grid({ + dataSource: defaultData, + columns: defaultColumns, + allowPaging: true, + }); + grid.appendTo('#Grid'); + + document.getElementById('payload-detail').innerHTML = "Payload Information
Service URL: 'https://services.odata.org/V4/Northwind/Northwind.svc/Orders/'
Adaptor Type: ODataV4Adaptor"; + + var pagerCheckbox: CheckBox = new CheckBox({ + checked: true, + cssClass: "prop_page", + label: 'Enable Paging' + }); + pagerCheckbox.appendTo('#pageCheckbox'); + + document.getElementById('additionalParams').addEventListener('click', () => { + httpAdditionalInfo("paramsKey", "paramsValue", "addParams") + }) + + document.getElementById('headerId').addEventListener('click', () => { + httpAdditionalInfo("hkey", "hvalue", "hdvalue") + }) + + function createObjectArray(headers: any) { + let result = headers.trim().split('\n').map((head: any) => JSON.parse(head)) + return result; + } + + const BASE_URL = 'https://js.syncfusion.com/demos/ejServices/Wcf/Northwind.svc/Orders'; + const ajax: Ajax = new Ajax({ + type: 'GET', mode: true, + onFailure: (e: Error) => { return false; } + }); + + async function executeCustomData(state: DataStateChangeEventArgs) { + let result = await getData(state); + grid.changeDataSource(result, defaultColumns) + } + + function getData(state: DataStateChangeEventArgs): Promise { + defaultParam = (document.getElementById("addParams") as any).value + params = defaultParam ? createObjectArray(defaultParam) : []; + const pageQuery = `$skip=${state.skip}&$top=${state.take}`; + if (document.getElementById("pageCheckbox")['ej2_instances'][0].checked) { + ajax.url = BASE_URL + "?" + pageQuery + "&$inlinecount=allpages&$format=json"; + } + else { + ajax.url = BASE_URL + "?" + "&$inlinecount=allpages&$format=json"; + } + ajax.data = Object.assign({}, ...params); + return ajax.send().then((response: any) => { + let data: any = JSON.parse(response); + return { result: data['d']['results'], count: parseInt(data['d']['__count'], 10) }; + }); + } + + changedAdaptor = (document.getElementById('service_drop') as any).ej2_instances[0].value + document.getElementById('validateSubmit').onclick = function (e) { + grid.query.params = []; + grid.query.queries = []; + defaultParam = (document.getElementById("addParams") as any).value + defaultHeader = (document.getElementById('hdvalue') as any).value; + header = defaultHeader ? createObjectArray(defaultHeader) : []; + params = defaultParam ? createObjectArray(defaultParam) : []; + let newDataSource: any; + let checkboxState: boolean = document.getElementById("pageCheckbox")['ej2_instances'][0].checked; + let newQuery: Query = new Query(); + params.forEach((obj: any) => { + for (const key in obj) { + if (Object.prototype.hasOwnProperty.call(obj, key)) { + const value = obj[key]; + newQuery.addParams(key, value); + if (changedAdaptor !== 'UrlAdaptor' && changedAdaptor !== 'Custom Binding' && !checkboxState) { + if (key == 'skip') { + newQuery.skip(value); + } + if (key == 'take') { + newQuery.take(value); + } + } + } + } + }); + grid.setProperties({ query: newQuery, allowPaging: checkboxState }, true); + if (changedAdaptor === 'Custom Binding') { + let state = { skip: 0, take: 12 }; + executeCustomData(state); + grid.dataStateChange = function (args: DataStateChangeEventArgs) { + executeCustomData(args); + }; + } + else { + let col = changedAdaptor === 'UrlAdaptor' ? empColumns : defaultColumns; + if (changedAdaptor === 'ODataV4Adaptor') { + newDataSource = new DataManager({ + url: 'https://services.syncfusion.com/js/production/api/Orders', + adaptor: new ODataV4Adaptor(), + headers: header, + crossDomain: true + }); + } + else if (changedAdaptor === 'UrlAdaptor') { + newDataSource = new DataManager({ + url: 'https://services.syncfusion.com/js/production/api/UrlDataSource', + adaptor: new UrlAdaptor(), + headers: header, + crossDomain: true + }); + } + else if (changedAdaptor === 'WebApiAdaptor') { + newDataSource = new DataManager({ + url: 'https://services.syncfusion.com/js/production/api/Orders', + adaptor: new WebApiAdaptor(), + headers: header, + crossDomain: true + }); + } + else if (changedAdaptor === 'ODataAdaptor') { + newDataSource = new DataManager({ + url: 'https://js.syncfusion.com/demos/ejServices/Wcf/Northwind.svc/Orders', + adaptor: new ODataAdaptor(), + crossDomain: true + }); + } + grid.changeDataSource(newDataSource, col) + } + let payloadInfo: string; + if (changedAdaptor === 'Custom Binding') { + payloadInfo = `Payload Information
Custom Binding
Service URL: ${selectedService}`; + } + else if (changedAdaptor === 'ODataAdaptor') { + payloadInfo = `Payload Information
Service URL: ${selectedService}
Adaptor Type: ${changedAdaptor}
Additional Parameters: ${defaultParam}`; + } + else { + payloadInfo = `Payload Information
Service URL: ${selectedService}
Adaptor Type: ${changedAdaptor}
Additional Parameters: ${defaultParam}
Headers: ${defaultHeader}`; + } + document.getElementById('payload-detail').innerHTML = ''; + document.getElementById('payload-detail').innerHTML += payloadInfo; + (document.getElementById("addParams") as any).value = ''; + (document.getElementById("hdvalue") as any).value = ''; + } + + var httpAdditionalInfo = (name: string, val: string, btn: string) => { + let parameterKey = (document.getElementById(name) as any).value; + let parameterValue = (document.getElementById(val) as any).value; + parameterKey && parameterValue ? (document.getElementById(btn) as any).value += `{"${parameterKey}": "${parameterValue}"}\n` : null; + (document.getElementById(name) as any).value = ''; + (document.getElementById(val) as any).value = ''; + } +}; diff --git a/src/grid/foreign-key.ts b/src/grid/foreign-key.ts index c9c7fde8..800daf7e 100644 --- a/src/grid/foreign-key.ts +++ b/src/grid/foreign-key.ts @@ -1,4 +1,3 @@ -import { loadCultureFiles } from '../common/culture-loader'; import { Grid, Sort, Page, Filter, Edit, Toolbar, ForeignKey } from '@syncfusion/ej2-grids'; import { orderDetails, customerData } from './data-source'; @@ -9,7 +8,6 @@ Grid.Inject(Page, Sort, Filter, Edit, Toolbar, ForeignKey); */ (window as any).default = (): void => { - loadCultureFiles(); let grid: Grid = new Grid( { dataSource: orderDetails, diff --git a/src/grid/grid-overview.html b/src/grid/grid-overview.html index c94e5b45..6280db7a 100644 --- a/src/grid/grid-overview.html +++ b/src/grid/grid-overview.html @@ -57,6 +57,7 @@ height: 27px; width: 29px; border-radius: 14px; + background-color:#e3165b; } .e-grid.e-rtl #Emptext{ @@ -92,19 +93,6 @@ top: -2px; } - .rating .star { - font-size: 132%; - color: lightgrey; - } - - .rating .star.checked { - color: #ffa600; - } - - .rating .star:before { - content: '★'; - } - td.e-rowcell.e-selectionbackground.e-active { background-color: transparent; } @@ -229,12 +217,27 @@ font-size: 10px; color: white; } + .custom-rating.e-rating-container .e-rating-item-container .e-rating-icon { + -webkit-text-fill-color: lightgrey; + -webkit-text-stroke: 1px lightgrey; + font-size: 11px; + } + + .custom-rating.e-rating-container .e-rating-item-container.e-rating-selected .e-rating-icon { + background: linear-gradient(to right, #ffa600 var(--rating-value), #ffa600 var(--rating-value)); + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; + -webkit-text-stroke: 1px #ffa600; + } + diff --git a/src/grid/grid-overview.ts b/src/grid/grid-overview.ts index 65ba79ce..438b1646 100644 --- a/src/grid/grid-overview.ts +++ b/src/grid/grid-overview.ts @@ -2,6 +2,7 @@ import { loadCultureFiles } from '../common/culture-loader'; import { Grid, VirtualScroll, Sort, Filter, Selection } from '@syncfusion/ej2-grids'; import { isNullOrUndefined, closest } from '@syncfusion/ej2-base'; import { DropDownList } from '@syncfusion/ej2-dropdowns'; +import { Rating } from '@syncfusion/ej2-inputs'; import { getTradeData } from './data-source'; import { DataManager, Query, UrlAdaptor } from '@syncfusion/ej2-data'; @@ -42,21 +43,16 @@ function startTimer(args: any): void { } (<{ratingDetail?: Function}>window).ratingDetail = (e: any): any => { - const div: Element = document.createElement('div'); - div.className = 'rating'; - let span: Element; - for (let i: number = 0; i < 5; i++) { - if (i < e.Rating) { - span = document.createElement('span'); - span.className = 'star checked'; - div.appendChild(span); - } else { - span = document.createElement('span'); - span.className = 'star'; - div.appendChild(span); - } - } - return div.outerHTML; + let temp: HTMLTemplateElement = document.getElementsByTagName("template")[0]; + var cloneTemplate: any = temp.content.cloneNode(true); + let ratingElement: HTMLElement = cloneTemplate.querySelector(".rating"); + const rating: Rating = new Rating({ + value: e.Rating, + readOnly: true, + cssClass: 'custom-rating' + }); + rating.appendTo(ratingElement); + return (ratingElement as any).ej2_instances[0].wrapper.outerHTML; }; (<{progessDetail?: Function}>window).progessDetail = (e: any): any => { @@ -119,7 +115,7 @@ function startTimer(args: any): void { }; let urlapi: DataManager = new DataManager({ - url: "https://ej2services.syncfusion.com/production/web-services/api/UrlDataSource", + url: "https://services.syncfusion.com/js/production/api/UrlDataSource", adaptor: new UrlAdaptor() }); @@ -137,7 +133,7 @@ let urlapi: DataManager = new DataManager({ selectionSettings: { persistSelection: true, type: 'Multiple', checkboxOnly: true }, enableHover: false, enableHeaderFocus: true, - height: 600, + height: 400, rowHeight: 38, columns: [ { type: 'checkbox', allowFiltering: false, allowSorting: false, width: '60' }, diff --git a/src/grid/keyboard-navigation.ts b/src/grid/keyboard-navigation.ts index adf822d9..496006b9 100644 --- a/src/grid/keyboard-navigation.ts +++ b/src/grid/keyboard-navigation.ts @@ -17,6 +17,8 @@ Grid.Inject(Page, Selection, Sort, Group, Filter, Reorder, Edit, Toolbar); allowGrouping: true, allowSorting: true, height: 365, + allowSelection: true, + selectionSettings: { type: 'Multiple' }, editSettings: { allowEditing: true, allowAdding: true, allowDeleting: true, mode: 'Normal' }, allowFiltering: true, filterSettings: { type: 'Menu' }, diff --git a/src/grid/live-data.html b/src/grid/live-data.html new file mode 100644 index 00000000..928b4ac0 --- /dev/null +++ b/src/grid/live-data.html @@ -0,0 +1,266 @@ + +
+
+
+

Feed Delay(ms):

+ + + +
+
+
+
+ + +
+

+ This sample demonstrates how frequently Grid cells are updated in real-time data at a set interval. +

+
+ +
+

The updating of Grid cells can be done without any performance lagging by using the setCellValue + method. + The style of Grid cells can be customized using the queryCellInfo event.

+

In this demo,

+
    +
  • Clicking the start update button triggers automatic updates of Grid cells at the interval set in the feed delay + text box which is a milliseconds format.
    • +
  • Clicking the stop update button will halt the automatic updating of Grid cells.
    • +
+

+ More information on the queryCellInfo can be found in this + documentation + section. +

+ +
\ No newline at end of file diff --git a/src/grid/live-data.ts b/src/grid/live-data.ts new file mode 100644 index 00000000..08b24cdc --- /dev/null +++ b/src/grid/live-data.ts @@ -0,0 +1,1363 @@ +import { loadCultureFiles } from '../common/culture-loader'; +import { Grid, Selection, VirtualScroll, QueryCellInfoEventArgs } from '@syncfusion/ej2-grids'; +import { NumericTextBox } from '@syncfusion/ej2-inputs'; +import { Button } from '@syncfusion/ej2-buttons'; + +Grid.Inject(Selection, VirtualScroll); + +/** + * Live Data sample + */ +(window as any).default = (): void => { + loadCultureFiles(); + const getTradeData: object = [ + { + id: 1, + CountryCode: 'US', + Change: -1.62, + Net: 4.54, + Rating: 'Sell', + NetIncome: 8975.0, + Sector: 'Technology', + EmployeeCount: 2345, + Revenue: 1200000, + }, + { + id: 2, + CountryCode: 'UK', + Change: 0.33, + Net: 5.83, + Rating: 'Buy', + NetIncome: 10500.0, + Sector: 'Healthcare', + EmployeeCount: 1234, + Revenue: 1500000, + }, + { + id: 3, + CountryCode: 'AU', + Change: -0.89, + Net: 2.54, + Rating: 'Sell', + NetIncome: 12000.0, + Sector: 'Finance', + EmployeeCount: 3459, + Revenue: 1700000, + }, + { + id: 4, + CountryCode: 'JP', + Change: 0.12, + Net: 6.99, + Rating: 'Buy', + NetIncome: 5500.0, + Sector: 'Retail', + EmployeeCount: 4567, + Revenue: 1000000, + }, + { + id: 5, + CountryCode: 'FR', + Change: -0.59, + Net: 4.34, + Rating: 'Sell', + NetIncome: 7500.0, + Sector: 'Manufacturing', + EmployeeCount: 2347, + Revenue: 1100000, + }, + { + id: 6, + CountryCode: 'IN', + Change: 0.67, + Net: 4.19, + Rating: 'Buy', + NetIncome: 9500.0, + Sector: 'Energy', + EmployeeCount: 3457, + Revenue: 1300000, + }, + { + id: 7, + CountryCode: 'CA', + Change: -1.25, + Net: 3.02, + Rating: 'Sell', + NetIncome: 6500.0, + Sector: 'Consumer Goods', + EmployeeCount: 1235, + Revenue: 1600000, + }, + { + id: 8, + CountryCode: 'DE', + Change: 0.38, + Net: 7.23, + Rating: 'Buy', + NetIncome: 8500.0, + Sector: 'Telecommunications', + EmployeeCount: 2346, + Revenue: 1400000, + }, + { + id: 9, + CountryCode: 'NZ', + Change: -0.12, + Net: 5.19, + Rating: 'Sell', + NetIncome: 10500.0, + Sector: 'Transportation', + EmployeeCount: 4567, + Revenue: 1900000, + }, + { + id: 10, + CountryCode: 'RU', + Change: 0.67, + Net: 4.88, + Rating: 'Buy', + NetIncome: 7500.0, + Sector: 'Utilities', + EmployeeCount: 3458, + Revenue: 1800000, + }, + { + id: 11, + CountryCode: 'US', + Change: -0.4, + Net: 9.8, + Rating: 'Sell', + NetIncome: 5.2, + Sector: 'Technology', + EmployeeCount: 3000, + Revenue: 4500, + }, + { + id: 12, + CountryCode: 'GB', + Change: 0.7, + Net: 11.5, + Rating: 'Buy', + NetIncome: 6.3, + Sector: 'Retail', + EmployeeCount: 2000, + Revenue: 3000, + }, + { + id: 13, + CountryCode: 'FR', + Change: -0.2, + Net: 8.9, + Rating: 'Sell', + NetIncome: 4.5, + Sector: 'Manufacturing', + EmployeeCount: 4000, + Revenue: 7000, + }, + { + id: 14, + CountryCode: 'CN', + Change: 0.9, + Net: 12.1, + Rating: 'Buy', + NetIncome: 7.2, + Sector: 'Energy', + EmployeeCount: 5000, + Revenue: 10000, + }, + { + id: 15, + CountryCode: 'JP', + Change: -0.5, + Net: 9.3, + Rating: 'Sell', + NetIncome: 5.7, + Sector: 'Financial Services', + EmployeeCount: 2000, + Revenue: 4000, + }, + { + id: 16, + CountryCode: 'DE', + Change: 0.6, + Net: 11.2, + Rating: 'Buy', + NetIncome: 6.8, + Sector: 'Telecommunications', + EmployeeCount: 3000, + Revenue: 6000, + }, + { + id: 17, + CountryCode: 'IT', + Change: -0.3, + Net: 8.6, + Rating: 'Sell', + NetIncome: 4.2, + Sector: 'Transportation', + EmployeeCount: 4000, + Revenue: 8000, + }, + { + id: 18, + CountryCode: 'CA', + Change: 0.8, + Net: 11.8, + Rating: 'Buy', + NetIncome: 7.7, + Sector: 'Consumer Goods', + EmployeeCount: 5000, + Revenue: 12000, + }, + { + id: 19, + CountryCode: 'KR', + Change: -0.4, + Net: 9.4, + Rating: 'Sell', + NetIncome: 5.4, + Sector: 'Health Care', + EmployeeCount: 2000, + Revenue: 5000, + }, + { + id: 20, + CountryCode: 'AU', + Change: 0.7, + Net: 11.6, + Rating: 'Buy', + NetIncome: 6.5, + Sector: 'Real Estate', + EmployeeCount: 3000, + Revenue: 7000, + }, + { + id: 21, + CountryCode: 'US', + Change: -0.02, + Net: 4.5, + Rating: 'Sell', + NetIncome: 50000, + Sector: 'Technology', + EmployeeCount: 1000, + Revenue: 1000000, + }, + { + id: 22, + CountryCode: 'UK', + Change: 0.03, + Net: 3.2, + Rating: 'Buy', + NetIncome: 40000, + Sector: 'Finance', + EmployeeCount: 500, + Revenue: 500000, + }, + { + id: 23, + CountryCode: 'JP', + Change: 0.01, + Net: 2.1, + Rating: 'Buy', + NetIncome: 30000, + Sector: 'Retail', + EmployeeCount: 200, + Revenue: 200000, + }, + { + id: 24, + CountryCode: 'DE', + Change: -0.04, + Net: 1.5, + Rating: 'Sell', + NetIncome: 25000, + Sector: 'Manufacturing', + EmployeeCount: 150, + Revenue: 150000, + }, + { + id: 25, + CountryCode: 'FR', + Change: 0.06, + Net: 4.2, + Rating: 'Buy', + NetIncome: 45000, + Sector: 'Energy', + EmployeeCount: 800, + Revenue: 800000, + }, + { + id: 26, + CountryCode: 'IT', + Change: 0.02, + Net: 3.1, + Rating: 'Buy', + NetIncome: 35000, + Sector: 'Transportation', + EmployeeCount: 600, + Revenue: 600000, + }, + { + id: 27, + CountryCode: 'ES', + Change: -0.03, + Net: 2.5, + Rating: 'Sell', + NetIncome: 30000, + Sector: 'Telecommunications', + EmployeeCount: 400, + Revenue: 400000, + }, + { + id: 28, + CountryCode: 'CA', + Change: 0.05, + Net: 4.0, + Rating: 'Buy', + NetIncome: 40000, + Sector: 'Healthcare', + EmployeeCount: 700, + Revenue: 700000, + }, + { + id: 29, + CountryCode: 'AU', + Change: 0.01, + Net: 2.8, + Rating: 'Buy', + NetIncome: 28000, + Sector: 'Consumer Goods', + EmployeeCount: 500, + Revenue: 500000, + }, + { + id: 30, + CountryCode: 'CH', + Change: -0.02, + Net: 1.7, + Rating: 'Sell', + NetIncome: 25000, + Sector: 'Industrial Goods', + EmployeeCount: 300, + Revenue: 300000, + }, + { + id: 31, + CountryCode: 'US', + Change: 2.1, + Net: 156.22, + Rating: 'Buy', + NetIncome: 3600, + Sector: 'Technology', + EmployeeCount: 5000, + Revenue: 15000, + }, + { + id: 32, + CountryCode: 'UK', + Change: -1.1, + Net: 159.96, + Rating: 'Sell', + NetIncome: 3700, + Sector: 'Retail', + EmployeeCount: 3000, + Revenue: 12000, + }, + { + id: 33, + CountryCode: 'CA', + Change: 4.6, + Net: 102.8, + Rating: 'Buy', + NetIncome: 2260, + Sector: 'Oil and Gas', + EmployeeCount: 2000, + Revenue: 8500, + }, + { + id: 34, + CountryCode: 'IN', + Change: 0.6, + Net: 65.12, + Rating: 'Buy', + NetIncome: 4600, + Sector: 'Financial Services', + EmployeeCount: 2800, + Revenue: 15500, + }, + { + id: 35, + CountryCode: 'DE', + Change: 3.7, + Net: 200.11, + Rating: 'Buy', + NetIncome: 7000, + Sector: 'Technology', + EmployeeCount: 4000, + Revenue: 18000, + }, + { + id: 36, + CountryCode: 'FR', + Change: -2.8, + Net: 140.45, + Rating: 'Sell', + NetIncome: 3500, + Sector: 'Retail', + EmployeeCount: 3000, + Revenue: 12000, + }, + { + id: 37, + CountryCode: 'IT', + Change: 1.8, + Net: 78.3, + Rating: 'Buy', + NetIncome: 2500, + Sector: 'Telecommunications', + EmployeeCount: 4500, + Revenue: 17000, + }, + { + id: 38, + CountryCode: 'AU', + Change: -7.2, + Net: 73.09, + Rating: 'Sell', + NetIncome: 3800, + Sector: 'Utilities', + EmployeeCount: 3400, + Revenue: 16000, + }, + { + id: 39, + CountryCode: 'JP', + Change: 5.3, + Net: 180.23, + Rating: 'Buy', + NetIncome: 3600, + Sector: 'Consumer Goods', + EmployeeCount: 5500, + Revenue: 14000, + }, + { + id: 40, + CountryCode: 'CH', + Change: -0.1, + Net: 80.45, + Rating: 'Sell', + NetIncome: 4700, + Sector: 'Pharmaceuticals', + EmployeeCount: 3300, + Revenue: 11000, + }, + { + id: 41, + CountryCode: 'US', + Change: -3.5, + Net: -2.1, + Rating: 'Sell', + NetIncome: 578.3, + Sector: 'Technology', + EmployeeCount: 9500, + Revenue: 7.2, + }, + { + id: 42, + CountryCode: 'UK', + Change: -1.6, + Net: -0.9, + Rating: 'Sell', + NetIncome: 890.2, + Sector: 'Consumer Goods', + EmployeeCount: 7300, + Revenue: 5.5, + }, + { + id: 43, + CountryCode: 'FR', + Change: 2.1, + Net: 0.5, + Rating: 'Buy', + NetIncome: 645.2, + Sector: 'Financial Services', + EmployeeCount: 8400, + Revenue: 4.7, + }, + { + id: 44, + CountryCode: 'DE', + Change: 4.2, + Net: 1.3, + Rating: 'Buy', + NetIncome: 876.4, + Sector: 'Industrial Goods', + EmployeeCount: 6200, + Revenue: 3.9, + }, + { + id: 45, + CountryCode: 'JP', + Change: -5.7, + Net: -2.9, + Rating: 'Sell', + NetIncome: 543.2, + Sector: 'Technology', + EmployeeCount: 8100, + Revenue: 6.1, + }, + { + id: 46, + CountryCode: 'CA', + Change: -2.3, + Net: -1.2, + Rating: 'Sell', + NetIncome: 721.1, + Sector: 'Retail', + EmployeeCount: 9200, + Revenue: 5.4, + }, + { + id: 47, + CountryCode: 'AU', + Change: 3.4, + Net: 0.9, + Rating: 'Buy', + NetIncome: 678.3, + Sector: 'Energy', + EmployeeCount: 7400, + Revenue: 4.6, + }, + { + id: 48, + CountryCode: 'NZ', + Change: 5.1, + Net: 1.5, + Rating: 'Buy', + NetIncome: 521.4, + Sector: 'Health Care', + EmployeeCount: 8500, + Revenue: 3.8, + }, + { + id: 49, + CountryCode: 'CN', + Change: -4.8, + Net: -2.6, + Rating: 'Sell', + NetIncome: 789.2, + Sector: 'Retail', + EmployeeCount: 6300, + Revenue: 6.0, + }, + { + id: 50, + CountryCode: 'RU', + Change: -1.9, + Net: -1.0, + Rating: 'Sell', + NetIncome: 654.1, + Sector: 'Financial Services', + EmployeeCount: 7500, + Revenue: 5.3, + }, + { + id: 51, + CountryCode: 'US', + Change: -0.02, + Net: 4.5, + Rating: 'Sell', + NetIncome: 50000, + Sector: 'Technology', + EmployeeCount: 1000, + Revenue: 1000000, + }, + { + id: 52, + CountryCode: 'UK', + Change: 0.03, + Net: 3.2, + Rating: 'Buy', + NetIncome: 40000, + Sector: 'Finance', + EmployeeCount: 500, + Revenue: 500000, + }, + { + id: 53, + CountryCode: 'JP', + Change: 0.01, + Net: 2.1, + Rating: 'Buy', + NetIncome: 30000, + Sector: 'Retail', + EmployeeCount: 200, + Revenue: 200000, + }, + { + id: 54, + CountryCode: 'DE', + Change: -0.04, + Net: 5.6, + Rating: 'Sell', + NetIncome: 60000, + Sector: 'Manufacturing', + EmployeeCount: 1500, + Revenue: 1500000, + }, + { + id: 55, + CountryCode: 'FR', + Change: 0.06, + Net: 1.7, + Rating: 'Buy', + NetIncome: 25000, + Sector: 'Transportation', + EmployeeCount: 300, + Revenue: 300000, + }, + { + id: 56, + CountryCode: 'IT', + Change: 0.02, + Net: 4.3, + Rating: 'Buy', + NetIncome: 35000, + Sector: 'Energy', + EmployeeCount: 400, + Revenue: 400000, + }, + { + id: 57, + CountryCode: 'ES', + Change: -0.05, + Net: 3.4, + Rating: 'Sell', + NetIncome: 45000, + Sector: 'Healthcare', + EmployeeCount: 600, + Revenue: 600000, + }, + { + id: 58, + CountryCode: 'CA', + Change: 0.07, + Net: 2.5, + Rating: 'Buy', + NetIncome: 20000, + Sector: 'Telecommunications', + EmployeeCount: 100, + Revenue: 100000, + }, + { + id: 59, + CountryCode: 'AU', + Change: 0.03, + Net: 1.6, + Rating: 'Buy', + NetIncome: 30000, + Sector: 'Media', + EmployeeCount: 200, + Revenue: 200000, + }, + { + id: 60, + CountryCode: 'CH', + Change: -0.02, + Net: 5.7, + Rating: 'Sell', + NetIncome: 55000, + Sector: 'Consumer Goods', + EmployeeCount: 700, + Revenue: 700000, + }, + { + id: 61, + CountryCode: 'AD', + Change: 0.8, + Net: -30.4, + Rating: 'Sell', + NetIncome: 398932.53, + Sector: 'Technology', + EmployeeCount: 34023, + Revenue: 498932.39, + }, + { + id: 62, + CountryCode: 'AE', + Change: 9.5, + Net: 8.2, + Rating: 'Buy', + NetIncome: 2033942.12, + Sector: 'Consumer Goods', + EmployeeCount: 95487, + Revenue: 2839483.93, + }, + { + id: 63, + CountryCode: 'AF', + Change: 4.9, + Net: 15.1, + Rating: 'Buy', + NetIncome: 1549832.5, + Sector: 'Finance', + EmployeeCount: 204357, + Revenue: 2498783.48, + }, + { + id: 64, + CountryCode: 'AG', + Change: 2.6, + Net: 8.7, + Rating: 'Buy', + NetIncome: 1873456.32, + Sector: 'Energy', + EmployeeCount: 213586, + Revenue: 2673909.94, + }, + { + id: 65, + CountryCode: 'AI', + Change: 7.2, + Net: -14.0, + Rating: 'Sell', + NetIncome: 1938547.48, + Sector: 'Healthcare', + EmployeeCount: 95287, + Revenue: 2897456.81, + }, + { + id: 66, + CountryCode: 'AL', + Change: 25.7, + Net: -11.9, + Rating: 'Sell', + NetIncome: 283232.02, + Sector: 'Telecommunications', + EmployeeCount: 83287, + Revenue: 339552.82, + }, + { + id: 67, + CountryCode: 'AM', + Change: 0.5, + Net: 19.4, + Rating: 'Buy', + NetIncome: 2878439.9, + Sector: 'Utilities', + EmployeeCount: 393208, + Revenue: 3995968.39, + }, + { + id: 68, + CountryCode: 'AN', + Change: 3.6, + Net: -5.5, + Rating: 'Sell', + NetIncome: 298527.3, + Sector: 'Advertising', + EmployeeCount: 76285, + Revenue: 345753.07, + }, + { + id: 69, + CountryCode: 'AO', + Change: 11.2, + Net: 12.9, + Rating: 'Buy', + NetIncome: 1898422.92, + Sector: 'Entertainment', + EmployeeCount: 113002, + Revenue: 2489272.88, + }, + { + id: 70, + CountryCode: 'AP', + Change: 1.7, + Net: 6.8, + Rating: 'Buy', + NetIncome: 153893.56, + Sector: 'Retail', + EmployeeCount: 54392, + Revenue: 229239.22, + }, + { + id: 71, + CountryCode: 'IN', + Change: -0.2, + Net: 9.2, + Rating: 'Sell', + NetIncome: 150000, + Sector: 'Technology', + EmployeeCount: 1000, + Revenue: 2000000, + }, + { + id: 72, + CountryCode: 'US', + Change: 0.4, + Net: -2.13, + Rating: 'Buy', + NetIncome: 200000, + Sector: 'Retail', + EmployeeCount: 2000, + Revenue: 3000000, + }, + { + id: 73, + CountryCode: 'UK', + Change: 0.6, + Net: -15.2, + Rating: 'Buy', + NetIncome: 300000, + Sector: 'Manufacturing', + EmployeeCount: 3000, + Revenue: 4000000, + }, + { + id: 74, + CountryCode: 'JP', + Change: 0.8, + Net: 30.5, + Rating: 'Buy', + NetIncome: 400000, + Sector: 'Finance', + EmployeeCount: 4000, + Revenue: 5000000, + }, + { + id: 75, + CountryCode: 'DE', + Change: -0.2, + Net: 0.5, + Rating: 'Sell', + NetIncome: 500000, + Sector: 'Healthcare', + EmployeeCount: 5000, + Revenue: 6000000, + }, + { + id: 76, + CountryCode: 'CN', + Change: 0.4, + Net: -0.3, + Rating: 'Buy', + NetIncome: 600000, + Sector: 'Energy', + EmployeeCount: 6000, + Revenue: 7000000, + }, + { + id: 77, + CountryCode: 'FR', + Change: 0.6, + Net: 1.8, + Rating: 'Buy', + NetIncome: 700000, + Sector: 'Telecom', + EmployeeCount: 7000, + Revenue: 8000000, + }, + { + id: 78, + CountryCode: 'CH', + Change: 0.8, + Net: 19.5, + Rating: 'Buy', + NetIncome: 800000, + Sector: 'Transportation', + EmployeeCount: 8000, + Revenue: 9000000, + }, + { + id: 79, + CountryCode: 'CA', + Change: -0.2, + Net: -20.4, + Rating: 'Sell', + NetIncome: 900000, + Sector: 'Real Estate', + EmployeeCount: 9000, + Revenue: 10000000, + }, + { + id: 80, + CountryCode: 'AU', + Change: 0.4, + Net: 0.2, + Rating: 'Buy', + NetIncome: 1000000, + Sector: 'Consumer Goods', + EmployeeCount: 10000, + Revenue: 11000000, + }, + { + id: 81, + CountryCode: 'US', + Change: -0.02, + Net: 4.5, + Rating: 'Sell', + NetIncome: 50000, + Sector: 'Technology', + EmployeeCount: 1000, + Revenue: 1000000, + }, + { + id: 82, + CountryCode: 'UK', + Change: 0.03, + Net: 3.2, + Rating: 'Buy', + NetIncome: 40000, + Sector: 'Finance', + EmployeeCount: 500, + Revenue: 500000, + }, + { + id: 83, + CountryCode: 'JP', + Change: 0.01, + Net: 2.1, + Rating: 'Buy', + NetIncome: 30000, + Sector: 'Retail', + EmployeeCount: 200, + Revenue: 200000, + }, + { + id: 84, + CountryCode: 'DE', + Change: -0.04, + Net: 5.6, + Rating: 'Sell', + NetIncome: 60000, + Sector: 'Manufacturing', + EmployeeCount: 1500, + Revenue: 1500000, + }, + { + id: 85, + CountryCode: 'FR', + Change: 0.06, + Net: 1.7, + Rating: 'Buy', + NetIncome: 25000, + Sector: 'Transportation', + EmployeeCount: 300, + Revenue: 300000, + }, + { + id: 86, + CountryCode: 'IT', + Change: 0.02, + Net: 4.3, + Rating: 'Buy', + NetIncome: 35000, + Sector: 'Energy', + EmployeeCount: 400, + Revenue: 400000, + }, + { + id: 87, + CountryCode: 'ES', + Change: -0.05, + Net: 3.4, + Rating: 'Sell', + NetIncome: 45000, + Sector: 'Telecommunications', + EmployeeCount: 600, + Revenue: 600000, + }, + { + id: 88, + CountryCode: 'CA', + Change: 0.07, + Net: 2.5, + Rating: 'Buy', + NetIncome: 20000, + Sector: 'Healthcare', + EmployeeCount: 100, + Revenue: 100000, + }, + { + id: 89, + CountryCode: 'AU', + Change: 0.03, + Net: 1.6, + Rating: 'Buy', + NetIncome: 30000, + Sector: 'Media', + EmployeeCount: 200, + Revenue: 200000, + }, + { + id: 90, + CountryCode: 'CH', + Change: -0.02, + Net: 5.7, + Rating: 'Sell', + NetIncome: 55000, + Sector: 'Banking', + EmployeeCount: 700, + Revenue: 700000, + }, + { + id: 91, + CountryCode: 'IN', + Change: -2.43, + Net: 81.11, + Rating: 'Sell', + NetIncome: 572000, + Sector: 'Retail', + EmployeeCount: 6220, + Revenue: 2820000, + }, + { + id: 92, + CountryCode: 'DE', + Change: 6.38, + Net: 40.12, + Rating: 'Buy', + NetIncome: 417000, + Sector: 'Technology', + EmployeeCount: 5100, + Revenue: 1870000, + }, + { + id: 93, + CountryCode: 'UK', + Change: -4.87, + Net: 76.32, + Rating: 'Sell', + NetIncome: 658000, + Sector: 'Sports', + EmployeeCount: 7990, + Revenue: 2560000, + }, + { + id: 94, + CountryCode: 'ES', + Change: 2.15, + Net: 54.72, + Rating: 'Buy', + NetIncome: 433000, + Sector: 'Energy', + EmployeeCount: 4510, + Revenue: 1530000, + }, + { + id: 95, + CountryCode: 'CA', + Change: 7.44, + Net: 48.09, + Rating: 'Buy', + NetIncome: 576000, + Sector: 'Industrial', + EmployeeCount: 7020, + Revenue: 2010000, + }, + { + id: 96, + CountryCode: 'AU', + Change: -9.18, + Net: 75.11, + Rating: 'Sell', + NetIncome: 371000, + Sector: 'Mining', + EmployeeCount: 5220, + Revenue: 1670000, + }, + { + id: 97, + CountryCode: 'CH', + Change: 4.94, + Net: 67.32, + Rating: 'Buy', + NetIncome: 681000, + Sector: 'Automotive', + EmployeeCount: 7500, + Revenue: 2420000, + }, + { + id: 98, + CountryCode: 'US', + change: -0.04, + Net: -27.2, + Rating: 'Sell', + NetIncome: 120000, + Sector: 'Technology', + EmployeeCount: 1000, + Revenue: 240000, + }, + { + id: 99, + CountryCode: 'UK', + change: 0.12, + Net: 20.2, + Rating: 'Buy', + NetIncome: 280000, + Sector: 'Finance', + EmployeeCount: 2000, + Revenue: 560000, + }, + { + id: 100, + CountryCode: 'JP', + change: 0.02, + Net: 10.9, + Rating: 'Buy', + NetIncome: 320000, + Sector: 'Retail', + EmployeeCount: 3000, + Revenue: 640000, + } + ]; + const feedDelayInput: NumericTextBox = new NumericTextBox({ + value: 1000, + format: 'N0', + min: 10, + max: 5000, + step: 1, + width: "150px", + floatLabelType: "Auto" + }, '#feeddelay'); + const updateButton: Button = new Button({}, '#update'); + const clearButton: Button = new Button({ disabled: true }, '#clear'); + const grid: Grid = new Grid({ + dataSource: getTradeData, + enableVirtualization: true, + enableVirtualMaskRow: false, + allowSelection: false, + queryCellInfo: queryCellInfo, + rowHeight: 38, + height: 500, + enableHover: false, + columns: [ + { + field: 'id', + headerText: 'ID', + width: '140', + isPrimaryKey: true, + visible: false + }, + { + field: 'CountryCode', + headerText: 'Ticker', + width: '70' + }, + { + field: 'Change', + headerText: 'Change % 1D', + width: '100', + format: 'N0', + textAlign: 'Right' + }, + { + field: 'Net', + headerText: 'Net', + width: '100', + format: 'C2', + type: 'number', + textAlign: 'Right' + }, + { field: 'Rating', width: '150', headerText: 'Technical Rating 1D' }, + { + field: 'NetIncome', + headerText: 'Net Income', + width: '150', + format: 'C2', + type: 'number', + textAlign: 'Right' + }, + { field: 'Sector', width: '160', headerText: 'Sector' }, + { + field: 'EmployeeCount', + width: '130', + headerText: 'Employee Count', + textAlign: 'Right', + template: '#empCountTemplate' + }, + ], + }); + grid.appendTo('#Grid'); + let initial: boolean = true; + grid.on('data-ready', function () { + if (initial) { + updateButton.element.click(); + initial = false; + feedDelayInput.element.addEventListener('keypress', (e: any) => { + if (e && e.key === 'Enter' && feedDelayInput.element.parentElement.classList.contains('e-input-focus')) { + feedDelayInput.value = parseInt(feedDelayInput.element.value); + feedDelayInput.focusOut(); + updateButton.element.click(); + } + }); + } + }); + grid.on('destroy', function () { + if (timerID) { + clearInterval(timerID); + timerID = undefined; + } + }); + let isDataBound: boolean = true; + function queryCellInfo(args: QueryCellInfoEventArgs) { + if (args.column.field === 'NetIncome') { + if (args.data['Net'] < 0) { + args.cell.classList.remove('e-increase'); + args.cell.classList.add('e-decrease'); + } else if (args.data['Net'] > 0) { + args.cell.classList.remove('e-decrease'); + args.cell.classList.add('e-increase'); + } + } else if (args.column.field === 'Change') { + if (args.data['Change'] < 0) { + updateCellDetails(args.cell, 'below-0'); + } else { + updateCellDetails(args.cell, 'above-0'); + } + } else if (args.column.field === 'Net') { + if (args.data['Net'] < 0) { + updateCellDetails(args.cell, 'below-0'); + } else { + updateCellDetails(args.cell, 'above-0'); + } + } else if (isDataBound) { + if (args.column.field === 'Rating') { + args.cell.innerHTML = ''; + const span: Element = document.createElement('span'); + const span2: Element = document.createElement('span'); + if (args.data['Change'] === 0) { + span.classList.add('e-icons'); + span.classList.add('e-intermediate-state-2'); + span.classList.add('neutral'); + span.classList.add('ic'); + span.classList.add('side-space'); + span2.classList.add('neutral'); + (span2 as HTMLElement).innerText = 'Neutral'; + args.cell.appendChild(span); + args.cell.appendChild(span2); + } else if (args.data['Change'] < -2 && args.data['Net'] < 0) { + span.classList.add('e-negc'); + span.classList.add('e-icons'); + span.classList.add('e-chevron-down-double'); + span.classList.add('below-0'); + span.classList.add('ic'); + span.classList.add('side-space'); + span2.classList.add('below-0'); + (span2 as HTMLElement).innerText = 'Strongly Sell'; + args.cell.appendChild(span); + args.cell.appendChild(span2); + } else if (args.data['Net'] < 0) { + span.classList.add('e-negc'); + span.classList.add('e-icons'); + span.classList.add('e-chevron-down'); + span.classList.add('below-0'); + span.classList.add('ic'); + span.classList.add('side-space'); + span2.classList.add('below-0'); + (span2 as HTMLElement).innerText = 'Sell'; + args.cell.appendChild(span); + args.cell.appendChild(span2); + } else if (args.data['Change'] > 5 && args.data['Net'] > 10) { + span.classList.add('e-posc'); + span.classList.add('e-icons'); + span.classList.add('e-chevron-up-double'); + span.classList.add('above-0'); + span.classList.add('ic'); + span.classList.add('side-space'); + span2.classList.add('above-0'); + (span2 as HTMLElement).innerText = 'Strongly Buy'; + args.cell.appendChild(span); + args.cell.appendChild(span2); + } else { + span.classList.add('e-posc'); + span.classList.add('e-icons'); + span.classList.add('e-chevron-up'); + span.classList.add('above-0'); + span.classList.add('ic'); + span.classList.add('side-space'); + span2.classList.add('above-0'); + (span2 as HTMLElement).innerText = 'Buy'; + args.cell.appendChild(span); + args.cell.appendChild(span2); + } + } + } + isDataBound = true; + } + function updateCellDetails(cell: Element, className: string) { + const div: Element = document.createElement('div'); + const span1: Element = document.createElement('span'); + span1.classList.add('rowcell-left'); + div.classList.add(className); + span1.innerHTML = cell.innerHTML; + cell.innerHTML = ''; + div.appendChild(span1); + cell.appendChild(div); + } + let timerID: any; + updateButton.element.onclick = function () { + if (!timerID) { + updateButton.disabled = true; + feedDelayInput.enabled = false; + clearButton.disabled = false; + timerID = setInterval( + updateCellValues, + parseInt(feedDelayInput.value.toString()) + ); + } + }; + clearButton.element.onclick = function () { + if (timerID) { + updateButton.disabled = false; + feedDelayInput.enabled = true; + clearButton.disabled = true; + clearInterval(timerID); + timerID = undefined; + } + }; + function updateCellValues() { + let oldValue; + let newValue; + for (let i: number = 0; i < grid.currentViewData.length; i++) { + if (grid.currentViewData[i] === undefined) { + return; + } + let num: number = Math.floor(Math.random() * 99) + 1; + num *= Math.floor(Math.random() * 2) === 1 ? 1 : -1; + oldValue = grid.currentViewData[i]['Net']; + if (i % 2 === 0) { + num = num * 0.25; + } else if (i % 3 === 0) { + num = num * 0.83; + } else if (i % 5 === 0) { + num = num * 0.79; + } else if (i % 4 === 0) { + num = num * 0.42; + } else { + num = num * 0.51; + } + isDataBound = true; + grid.setCellValue( + grid.currentViewData[i]['id'], + 'Net', + parseFloat(num.toFixed(2)) + ); + isDataBound = true; + newValue = parseFloat( + (grid.currentViewData[i]['Net'] - oldValue).toString().substring(0, 2) + ); + grid.setCellValue( + grid.currentViewData[i]['id'], + 'Change', + parseFloat(newValue.toFixed(2)) + ); + isDataBound = true; + const ratingValue: string = grid.currentViewData[i]['Net'] < 0 ? 'Sell' : 'Buy'; + grid.setCellValue(grid.currentViewData[i]['id'], 'Rating', ratingValue); + const val: number = num + newValue; + grid.setCellValue(grid.currentViewData[i]['id'], 'NetIncome', val); + } + } +}; diff --git a/src/grid/loading-animation.html b/src/grid/loading-animation.html index 1793eed9..5b69cb0c 100644 --- a/src/grid/loading-animation.html +++ b/src/grid/loading-animation.html @@ -12,14 +12,14 @@
- - +
-
Indicator Type
+ 		+
Indicator Type
 -
+
+
-
diff --git a/src/grid/loading-animation.ts b/src/grid/loading-animation.ts index a54d0850..6b323d46 100644 --- a/src/grid/loading-animation.ts +++ b/src/grid/loading-animation.ts @@ -15,7 +15,7 @@ Grid.Inject(Page, Selection, Sort, Filter); { id: 'Spinner', type: 'Spinner' } ]; let data: Object = new DataManager({ - url: 'https://ej2services.syncfusion.com/production/web-services/api/UrlDataSource', + url: 'https://services.syncfusion.com/js/production/api/UrlDataSource', adaptor: new UrlAdaptor, }); let grid: Grid = new Grid( diff --git a/src/grid/remote-data.ts b/src/grid/remote-data.ts index 13dca19f..db01257c 100644 --- a/src/grid/remote-data.ts +++ b/src/grid/remote-data.ts @@ -9,9 +9,9 @@ Grid.Inject(Page, Selection); */ (window as any).default = (): void => { loadCultureFiles(); - let hostUrl: string = 'https://ej2services.syncfusion.com/production/web-services/'; + let hostUrl: string = 'https://services.syncfusion.com/js/production/api/orders'; let data: Object = new DataManager({ - url: hostUrl + 'api/Orders', + url: hostUrl, adaptor: new WebApiAdaptor , crossDomain: true }); @@ -25,8 +25,7 @@ Grid.Inject(Page, Selection); { field: 'EmployeeID', headerText: 'Employee ID', width: 135, textAlign: 'Right' }, { field: 'Freight', headerText: 'Freight', width: 160, textAlign: 'Right', format: 'C2' }, { field: 'ShipCountry', headerText: 'Ship Country', width: 150, textAlign: 'Center' }, - ], - pageSettings: { pageCount: 3 } + ] }); grid.appendTo('#Grid'); }; diff --git a/src/grid/sample.json b/src/grid/sample.json index baef259d..4d905d37 100644 --- a/src/grid/sample.json +++ b/src/grid/sample.json @@ -6,19 +6,21 @@ "ftName": "datagrid", "samples" : [ {"url":"grid-overview", "name": "Overview", "description":"This demo for Essential JS 2 grid control is an overview of how to display and manipulate large data with configuration options.", "category":"Data Grid","api":{"Grid":["dataSource","enableVirtualization","allowFiltering","allowSorting","allowSelection","selectionSettings","height","columns","dataBound","actionComplete","load"] }}, + { "url": "live-data", "type": "new", "name": "Live Data", "category": "Data Grid","description":"This demo for Essential JS 2 grid component shows how frequently the Grid cell is updated with real-time data.","api": { "Grid": ["dataSource", "columns", "enableVirtualization", "enableVirtualMaskRow", "allowSelection", "height", "rowHeight", "queryCellInfo"]}}, {"url":"default", "name": "Default Functionalities", "description":"This demo for Essential JS 2 grid control shows the default rendering of the grid control with minimum configuration.", "category":"Data Grid","api":{"Grid":["columns","dataSource"] }}, { "url": "adaptive-layout", "name": "Adaptive Layout", "category": "Data Grid","description":"This demo for Essential JS 2 grid component shows the Grid row in vertical direction","api": { "Grid": ["columns", "dataSource","allowSorting","allowFiltering","editSettings","toolbar","allowPaging","rowRenderingMode","enableAdaptiveUI"]}}, { "url": "loading-animation","name": "Loading Animation", "category": "Data Grid","description":"This demo for Essential JS 2 grid component shows the loading indicator when grid loading and refreshing.","api": { "Grid": ["columns", "dataSource","allowSorting","allowPaging", "allowFiltering", "loadingIndicator", "pageSettings"]}}, {"url":"local-data", "name": "Local Data", "description":"This demo for Essential JS 2 grid control demonstrates the way for binding a grid with a local data source.", "category": "Data Binding","api":{"Grid":["dataSource","allowPaging","columns","pageSettings"] }}, {"url":"remote-data", "name": "Remote Data", "description":"This demo for Essential JS 2 grid control shows the way of data binding grid with remote service. Grid data source is bound to remote data using DataManager.", "category": "Data Binding","api":{"Grid":["dataSource","allowPaging","actionBegin","actionComplete","created","dataBound","columns","pageSettings"] }}, - + {"url":"flexible-data", "type": "new", "name": "Flexible Data", "category": "Data Binding","description":"This demo for Essential JS 2 grid control shows the way of flexible data binding in grid from various remote services.","api":{"Grid":["dataSource","DataManager","changeDataSource"] }}, + {"url":"column-template", "name": "Column Template", "description":"This demo for Essential JS 2 grid control demonstrates usage of template columns in Grid to shown custom images in the Employee Image column.", "category":"Columns","api":{"Grid":["dataSource","width","height","columns"] }}, {"url":"header-template", "name": "Header Template", "description":"This demo for Essential JS 2 grid control shows the Grid header template feature, we have shown custom icons in the column headers.", "category":"Columns","api":{"Grid":["dataSource","columns"] }}, {"url":"stacked-header", "name": "Stacked Header", "description":"This demo for Essential JS 2 grid control shows the usage of the sorting API in grid. Use the properties panel to sort/unsort columns using API.", "category":"Columns","api":{"Grid":["dataSource","allowPaging","pageSettings","columns"] }}, {"url":"foreign-key", "name": "Foreign Key Column", "description":"This demo for Essential JS 2 grid control shows the usage of a foreign key column and perform actions like filtering, sorting and editing.", "category":"Columns", "api":{"Grid":["dataSource","allowSorting", "columns", "allowFiltering", "filterSettings", "editSettings"]}}, {"url":"reorder", "name": "Reorder", "description":"This demo for Essential JS 2 grid control shows the reordering columns feature. Select column name and index from properties panel to reorder the columns.", "category": "Columns","api":{"Grid":["dataSource","allowReordering","actionComplete","columns"] }}, - {"url":"column-resize", "name": "Column Resizing", "description":"This demo for Essential JS 2 grid control shows how the column resizing feature can be used to change width dynamically.", "category":"Columns","api":{"Grid":["dataSource","allowResizing","height","columns"] }}, + {"url":"column-resize", "type": "update", "name": "AutoFit and Resizing", "description":"This demo for Essential JS 2 grid control shows column rendering with fixed width and resizing feature.", "category":"Columns","api":{"Grid":["dataSource","allowResizing","height","columns","autoFit"] }}, {"url":"column-menu", "name": "Column Menu", "description":"This demo for Essential JS 2 grid control shows the usage of the various column functionalities of the column menu feature.", "category":"Columns", "api":{"Grid":["dataSource","allowSorting", "allowGrouping","showColumnMenu", "groupSettings", "columns", "allowSorting"]}}, {"url":"auto-wrap", "name": "AutoWrap Column Cells", "description":"This demo for Essential JS 2 grid control shows how the grid cell content is autowrapped to show large cell content.", "category":"Columns","api":{"Grid":["dataSource","allowPaging","allowTextWrap","columns","pageSettings"] }}, {"url":"column-chooser", "name": "Column Chooser", "description":"This demo for Essential JS 2 grid control shows how the column chooser feature can be used to show or hide columns dynamically.", "category": "Columns","api":{"Grid":["dataSource","allowPaging","showColumnChooser","columns","toolbar"] }}, @@ -42,8 +44,8 @@ {"url":"sorting", "name": "Multi Sorting", "description":"This demo for Essential JS 2 grid control shows the grid multisorting feature. Using this feature, grid rows can be sorted by two or more columns.", "category":"Sorting","api":{"Grid":["dataSource","allowSelection","selectionSettings","columns","enableHover"] }}, {"url":"sorting-api", "name": "Sorting API", "description":"This demo for Essential JS 2 grid control shows the usage of the sorting API in grid. Use the properties panel to sort/unsort columns using API.", "category":"Sorting","api":{"Grid":["dataSource","allowPaging","allowSelection","selectionSettings","enableHover","columns","pageSettings"] }}, - {"url":"filter", "name": "Default Filtering", "description":"This demo for Essential JS 2 grid control shows how to place a filter bar row in the header to filter grid rows.", "category":"Filtering","api":{"Grid":["allowFiltering","dataSource","allowPaging","pageSettings","columns"] }}, - {"url":"filter-menu", "name": "Filter Menu", "description":"This demo for Essential JS 2 grid control demonstrates a way of filtering rows using a menu, check box, and Excel filter UI.", "category":"Filtering", "api":{"Grid":["allowFiltering","allowSorting","filterSettings","dataSource","allowPaging","pageSettings","columns"] }}, + {"url":"filter", "type": "update", "name": "Default Filtering", "description":"This demo for Essential JS 2 grid control shows how to place a filter bar row in the header to filter grid rows.", "category":"Filtering","api":{"Grid":["allowFiltering","dataSource","allowPaging","pageSettings","columns"] }}, + {"url":"filter-menu", "type": "update", "name": "Filter Menu", "description":"This demo for Essential JS 2 grid control demonstrates a way of filtering rows using a menu, check box, and Excel filter UI.", "category":"Filtering", "api":{"Grid":["allowFiltering","allowSorting","filterSettings","dataSource","allowPaging","pageSettings","columns"] }}, {"url":"search", "name": "Search", "description":"This demo for Essential JS 2 grid control shows the content searching feature. Use the search box from toolbar to search for records in grid.", "category":"Filtering","api":{"Grid":["dataSource","allowPaging","pageSettings","columns","toolbar"] }}, {"url":"pager-dropdown", "name": "Pager Dropdown", "description":"This demo for Essential JS 2 grid control shows how you can display the contents of the grid in page segments using the paging feature.", "category": "Paging","api":{"Grid":["dataSource","allowPaging","pageSettings","columns"] }}, @@ -71,7 +73,7 @@ {"url":"lazy-load-grouping-with-paging", "name": "Grouping with Paging", "description":"This demo for Essential JS 2 grid control demonstrates the usage of the lazy load grouping feature.", "category":"Lazy Load Grouping","api":{"Grid":["dataSource","allowPaging","allowGrouping","groupSettings","height","columns"] }}, {"url":"lazy-load-grouping-with-infinite-scrolling", "name": "Grouping with Infinite Scrolling", "description":"This demo for Essential JS 2 grid control demonstrates the usage of the lazy load grouping with infinite scrolling.", "category":"Lazy Load Grouping","api":{"Grid":["dataSource","enableInfiniteScrolling","height","allowGrouping","groupSettings","columns"] }}, - {"url":"lazy-load-grouping-with-virtual-scrolling", "type": "new", "name": "Grouping with Virtual Scrolling", "description":"This demo for Essential JS 2 grid control demonstrates the usage of the lazy load grouping with virtual scrolling.", "category":"Lazy Load Grouping","api":{"Grid":["dataSource","enableVirtualization","height","allowGrouping","groupSettings","columns"] }}, + {"url":"lazy-load-grouping-with-virtual-scrolling", "name": "Grouping with Virtual Scrolling", "description":"This demo for Essential JS 2 grid control demonstrates the usage of the lazy load grouping with virtual scrolling.", "category":"Lazy Load Grouping","api":{"Grid":["dataSource","enableVirtualization","height","allowGrouping","groupSettings","columns"] }}, {"url":"default-exporting", "name": "Default Exporting", "description":"This demo for Essential JS 2 grid control shows the client-side exporting of grid content to Excel, PDF, and CSV formats.", "category":"Exporting","api":{"Grid":["dataSource","allowExcelExport","allowPdfExport","allowPaging","toolbar","pageSettings","columns","groupSettings","allowGrouping"] }}, {"url":"advanced-exporting", "name": "Advanced Exporting", "description":"This demo for Essential JS 2 grid control demonstrates how exporting can be customized to add headers and footers in exported documents.", "category":"Exporting","api":{"Grid":["dataSource","allowExcelExport","allowPdfExport","toolbar","allowPaging","pageSettings","columns"] }}, diff --git a/src/heatmap-chart/empty-points.html b/src/heatmap-chart/empty-points.html index f019f3bf..f1d8c2a0 100644 --- a/src/heatmap-chart/empty-points.html +++ b/src/heatmap-chart/empty-points.html @@ -4,7 +4,7 @@

This sample visualizes the number of defective product count per 1000 units coming out from a manufacturing unit - Data points are enhanced with labels and tooltip. Some data points were not marked with any values which indicates there are no deffective products and these data points are termed as empty points. + Data points are enhanced with labels and tooltip. Some data points were not marked with any values which indicates there are no defective products and these data points are termed as empty points.

diff --git a/src/heatmap-chart/empty-points.ts b/src/heatmap-chart/empty-points.ts index e6137985..287bd81a 100644 --- a/src/heatmap-chart/empty-points.ts +++ b/src/heatmap-chart/empty-points.ts @@ -47,7 +47,7 @@ HeatMap.Inject(Tooltip, Legend); showLabel: true, }, tooltipRender: (args: ITooltipEventArgs) => { - args.content = [args.yLabel + ' | ' + args.xLabel + ' : ' + args.value + ' deffective units']; + args.content = [args.yLabel + ' | ' + args.xLabel + ' : ' + args.value + ' defective units']; }, load: (args: ILoadedEventArgs) => { let selectedTheme: string = location.hash.split('/')[1]; diff --git a/src/image-editor/default.html b/src/image-editor/default.html index 9da27964..6dd07719 100644 --- a/src/image-editor/default.html +++ b/src/image-editor/default.html @@ -29,7 +29,7 @@ documentation section.

- + - \ No newline at end of file diff --git a/src/image-editor/default.ts b/src/image-editor/default.ts index 50ffa4fd..ce685802 100644 --- a/src/image-editor/default.ts +++ b/src/image-editor/default.ts @@ -22,5 +22,15 @@ import { DropDownList } from '@syncfusion/ej2-dropdowns'; } } }); + if (document.getElementById('right-pane')) { + document.getElementById('right-pane').addEventListener('scroll', onScroll); + } + // Handler used to reposition the tooltip on page scroll + function onScroll(): void { + if (document.getElementById('imageeditor_sliderWrapper')) { + let slider: any = getComponent(document.getElementById('imageeditor_sliderWrapper'), 'slider'); + slider.refreshTooltip(slider.tooltipTarget); + } + } imageEditorObj.appendTo('#imageeditor'); }; \ No newline at end of file diff --git a/src/image-editor/locale.json b/src/image-editor/locale.json index ce12c79c..847cc0fd 100644 --- a/src/image-editor/locale.json +++ b/src/image-editor/locale.json @@ -41,7 +41,22 @@ "Medium": "Mittel", "Large": "Groß", "XLarge": "X-Groß", - "ABC": "ABC" + "ABC": "ABC", + "Finetune": "Feinabstimmung", + "Brightness": "Helligkeit", + "Contrast": "Kontrast", + "Hue": "Farbton", + "Saturation": "Sättigung", + "Opacity": "Opazität", + "Blur": "Verwischen", + "Exposure": "Belichtung", + "Filter": "Filter", + "Chrome": "Chrom", + "Cold": "Kalt", + "Warm": "Warm", + "Grayscale": "Graustufen", + "Sepia": "Sepia", + "Invert": "Umkehren" } }, "ar": { @@ -86,7 +101,22 @@ "Medium": "متوسط", "Large": "كبير", "XLarge": "X-كبير", - "ABC": "ABC" + "ABC": "ABC", + "Finetune": "ضبط دقيق", + "Brightness": "سطوع", + "Contrast": "التباين", + "Hue": "مسحة", + "Saturation": "التشبع", + "Opacity": "التعتيم", + "Blur": "طمس", + "Exposure": "التعرض", + "Filter": "منقي", + "Chrome": "كروم", + "Cold": "البرد", + "Warm": "دافيء", + "Grayscale": "تدرج الرمادي", + "Sepia": "بني داكن", + "Invert": "عكس" } }, "en": { @@ -131,7 +161,22 @@ "Medium": "Medium", "Large": "Large", "XLarge": "X-Large", - "ABC": "ABC" + "ABC": "ABC", + "Finetune": "Finetune", + "Brightness": "Brightness", + "Contrast": "Contrast", + "Hue": "Hue", + "Saturation": "Saturation", + "Opacity": "Opacity", + "Blur": "Blur", + "Exposure": "Exposure", + "Filter": "Filter", + "Chrome": "Chrome", + "Cold": "Cold", + "Warm": "Warm", + "Grayscale": "Grayscale", + "Sepia": "Sepia", + "Invert": "Invert" } }, "zh": { @@ -175,13 +220,28 @@ "Small": "小的", "Medium": "中等的", "Large": "大的", - "XLarge": "超大", - "ABC": "ABC" + "XLarge": "特大号", + "ABC": "ABC", + "Finetune": "微调", + "Brightness": "亮度", + "Contrast": "对比", + "Hue": "色调", + "Saturation": "饱和", + "Opacity": "不透明度", + "Blur": "模糊", + "Exposure": "暴露", + "Filter": "筛选", + "Chrome": "铬合金", + "Cold": "寒冷的", + "Warm": "温暖的", + "Grayscale": "灰阶", + "Sepia": "棕褐色", + "Invert": "倒置" } }, "fr-CH": { "image-editor": { - "Browse": "Feuilleter", + "Browse": "Parcourir", "Crop": "recadrer", "ZoomIn": "agrandir", "ZoomOut": "Dézoomer", @@ -220,8 +280,23 @@ "Small": "Petit", "Medium": "Moyen", "Large": "Grand", - "XLarge": "X-Grand", - "ABC": "ABC" + "XLarge": "Très grand", + "ABC": "ABC", + "Finetune": "Affiner", + "Brightness": "Luminosité", + "Contrast": "Contraste", + "Hue": "Teinte", + "Saturation": "Saturation", + "Opacity": "Opacité", + "Blur": "Se brouiller", + "Exposure": "Exposition", + "Filter": "Filtre", + "Chrome": "Chrome", + "Cold": "Froid", + "Warm": "Chaleureuse", + "Grayscale": "Niveaux de gris", + "Sepia": "Sépia", + "Invert": "Inverser" } } } \ No newline at end of file diff --git a/src/image-editor/profile-picture.html b/src/image-editor/profile-picture.html index a2465750..753f84ad 100644 --- a/src/image-editor/profile-picture.html +++ b/src/image-editor/profile-picture.html @@ -4,7 +4,7 @@ - + @@ -69,7 +69,8 @@ font-size: 28px; color: white; left: 5px; - top: 7px; + top: 4px; + line-height: initial; position: absolute; } diff --git a/src/kanban/remote-data.ts b/src/kanban/remote-data.ts index 2eaaa489..5ce00d04 100644 --- a/src/kanban/remote-data.ts +++ b/src/kanban/remote-data.ts @@ -6,7 +6,7 @@ import { Kanban, DialogEventArgs } from '@syncfusion/ej2-kanban'; */ let dataManger: DataManager = new DataManager({ - url: 'https://js.syncfusion.com/ejServices/wcf/Northwind.svc/Tasks', + url: 'https://services.syncfusion.com/js/production/api/Kanban', crossDomain: true }); @@ -32,4 +32,4 @@ let dataManger: DataManager = new DataManager({ function dialogOpen(args: DialogEventArgs): void { args.cancel = true; } -}; \ No newline at end of file +}; diff --git a/src/mention/multiple-list.ts b/src/mention/multiple-list.ts index 06147688..b7af5950 100644 --- a/src/mention/multiple-list.ts +++ b/src/mention/multiple-list.ts @@ -14,7 +14,7 @@ import { WebApiAdaptor } from '@syncfusion/ej2/data'; let mentionOdataObj: Mention = new Mention({ mentionChar: '@', dataSource: new DataManager({ - url: 'https://ej2services.syncfusion.com/production/web-services/api/Employees', + url: 'https://ej2services.syncfusion.com/js/development/api/Employees', adaptor: new WebApiAdaptor , crossDomain: true }), diff --git a/src/message/customization.html b/src/message/customization.html index 74f15697..deb90679 100644 --- a/src/message/customization.html +++ b/src/message/customization.html @@ -15,7 +15,7 @@

The Message control’s content can be aligned by adding predefined classes. By default, messages are aligned to the left. The other available alignments are center and right, achieved by adding, e-content-center and e-content-right.

-

The icon and appearance can be customized at the application level by using the cssClass property.

+

The icon and appearance can be customized at the application level by using the cssClass property.

In this sample, the Message control’s predefined content is aligned based on the cssClass property. Also, this control is rendered with a custom severity icon and custom appearance.

diff --git a/src/message/default.html b/src/message/default.html index ffb65513..d6f31f79 100644 --- a/src/message/default.html +++ b/src/message/default.html @@ -20,7 +20,7 @@
  • Warning - The message is displayed with an icon and color to denote it as a warning message.
  • Error - The message is displayed with an icon and color to denote it as an error message.
    • -

    In this sample, messages are displayed with a distinct icon and a color based on the content and severity properties.

    +

    In this sample, messages are displayed with a distinct icon and a color based on the content and severity properties.

    \ No newline at end of file diff --git a/src/pivot-table/custom-sorting.ts b/src/pivot-table/custom-sorting.ts index c50cf045..1ca55395 100644 --- a/src/pivot-table/custom-sorting.ts +++ b/src/pivot-table/custom-sorting.ts @@ -4,7 +4,7 @@ import { DropDownList, MultiSelect, ChangeEventArgs, SelectEventArgs, RemoveEven import { Button, CheckBox, ChangeEventArgs as CheckChange } from '@syncfusion/ej2-buttons'; import { enableRipple } from '@syncfusion/ej2-base'; import * as pivotData from './pivot-data/Pivot_Data.json'; -import { SortModel } from '@syncfusion/ej2-pivotview/src/pivotview/model/datasourcesettings-model'; +import { SortModel } from '@syncfusion/ej2-pivotview/src/model/datasourcesettings-model'; enableRipple(false); MultiSelect.Inject(CheckBoxSelection); PivotView.Inject(GroupingBar); diff --git a/src/pivot-table/filtering.ts b/src/pivot-table/filtering.ts index abc09f6d..4ea93226 100644 --- a/src/pivot-table/filtering.ts +++ b/src/pivot-table/filtering.ts @@ -4,7 +4,7 @@ import { DropDownList, MultiSelect, ChangeEventArgs, SelectEventArgs, RemoveEven import { CheckBoxSelection } from '@syncfusion/ej2-dropdowns'; import { Button } from '@syncfusion/ej2-buttons'; import { enableRipple } from '@syncfusion/ej2-base'; -import { FilterModel } from '@syncfusion/ej2-pivotview/src/pivotview/model/datasourcesettings-model'; +import { FilterModel } from '@syncfusion/ej2-pivotview/src/model/datasourcesettings-model'; import * as pivotData from './pivot-data/Pivot_Data.json'; enableRipple(false); MultiSelect.Inject(CheckBoxSelection); diff --git a/src/pivot-table/grouping.ts b/src/pivot-table/grouping.ts index 1a718464..c3099718 100644 --- a/src/pivot-table/grouping.ts +++ b/src/pivot-table/grouping.ts @@ -3,7 +3,7 @@ import { PivotView, GroupingBar, IDataSet, ColumnRenderEventArgs, DateGroup } fr import { enableRipple, extend } from '@syncfusion/ej2-base'; import { MultiSelect, SelectEventArgs, RemoveEventArgs, CheckBoxSelection } from '@syncfusion/ej2-dropdowns'; import { NumericTextBox } from '@syncfusion/ej2-inputs'; -import { GroupSettingsModel } from '@syncfusion/ej2-pivotview/src/pivotview/model/datasourcesettings-model'; +import { GroupSettingsModel } from '@syncfusion/ej2-pivotview/src/model/datasourcesettings-model'; import { Button } from '@syncfusion/ej2-buttons'; import * as gData from './pivot-data/gData.json'; enableRipple(false); diff --git a/src/pivot-table/hyper-link.ts b/src/pivot-table/hyper-link.ts index fa7a1db6..bdbffaec 100644 --- a/src/pivot-table/hyper-link.ts +++ b/src/pivot-table/hyper-link.ts @@ -52,12 +52,14 @@ let Pivot_Data: IDataSet[] = (pivotData as any).data; if (args.currentCell.className.indexOf('e-stot') > -1 || args.currentCell.className.indexOf('e-gtot') > -1 || args.currentCell.className.indexOf('e-summary') > -1) { cell += 'Summary '; } - if (args.currentCell.querySelector('.e-headercelldiv') && !(args.data as IAxisSet).indexObject) { + if ((args.currentCell.querySelector('.e-headercelldiv') && !(args.data as IAxisSet).indexObject) || + args.currentCell.className.indexOf('e-cellvalue') > -1) { cell += 'Value Header '; } else if (args.currentCell.className.indexOf('e-rowsheader') > -1) { cell += 'Row Header '; } - else if (args.currentCell.className.indexOf('e-columnsheader') > -1) { + else if (args.currentCell.className.indexOf('e-columnsheader') > -1 || + args.currentCell.className.indexOf('e-pivotcell-container') > -1) { cell += 'Column Header '; } else if (args.currentCell.className.indexOf('e-valuescontent') > -1) { diff --git a/src/pivot-table/label-filtering.ts b/src/pivot-table/label-filtering.ts index 5824b232..d4787013 100644 --- a/src/pivot-table/label-filtering.ts +++ b/src/pivot-table/label-filtering.ts @@ -4,7 +4,7 @@ import { DropDownList, ChangeEventArgs } from '@syncfusion/ej2-dropdowns'; import { Button } from '@syncfusion/ej2-buttons'; import { enableRipple } from '@syncfusion/ej2-base'; import { MaskedTextBox, MaskChangeEventArgs } from '@syncfusion/ej2-inputs'; -import { FilterModel } from '@syncfusion/ej2-pivotview/src/pivotview/model/datasourcesettings-model'; +import { FilterModel } from '@syncfusion/ej2-pivotview/src/model/datasourcesettings-model'; import * as pivotData from './pivot-data/Pivot_Data.json'; enableRipple(false); diff --git a/src/pivot-table/overview.ts b/src/pivot-table/overview.ts index 4a601c6b..0c49bbcc 100644 --- a/src/pivot-table/overview.ts +++ b/src/pivot-table/overview.ts @@ -7,6 +7,7 @@ import { import { enableRipple, select, createElement } from '@syncfusion/ej2-base'; import { ILoadedEventArgs, ChartTheme } from '@syncfusion/ej2-charts'; import * as data from './pivot-data/universitydata.json'; +import { ExcelQueryCellInfoEventArgs } from '@syncfusion/ej2-grids'; enableRipple(false); PivotView.Inject(FieldList, CalculatedField, Toolbar, ConditionalFormatting, NumberFormatting, VirtualScroll, Grouping, GroupingBar, DrillThrough, PDFExport, ExcelExport); @@ -105,6 +106,10 @@ let Universitydata: IDataSet[] = (data as any).data; reports = JSON.parse(localStorage.pivotviewReports); } if (args.report && args.reportName && args.reportName !== '') { + let report = JSON.parse(args.report); + report.dataSourceSettings.dataSource = []; + report.pivotValues = []; + args.report = JSON.stringify(report); reports.map(function (item: any): any { if (args.reportName === item.reportName) { item.report = args.report; isSaved = true; @@ -136,7 +141,9 @@ let Universitydata: IDataSet[] = (data as any).data; } }); if (args.report) { - pivotObj.dataSourceSettings = JSON.parse(args.report).dataSourceSettings; + let report = JSON.parse(args.report); + report.dataSourceSettings.dataSource = pivotObj.dataSourceSettings.dataSource; + pivotObj.dataSourceSettings = report.dataSourceSettings; } }, removeReport: function (args: RemoveReportArgs): void { @@ -214,7 +221,12 @@ let Universitydata: IDataSet[] = (data as any).data; showFieldList: true, gridSettings: { columnWidth: 120, rowHeight: 36, allowSelection: true, - selectionSettings: { mode: 'Cell', type: 'Single', cellSelectionMode: 'Box' } + selectionSettings: { mode: 'Cell', type: 'Single', cellSelectionMode: 'Box' }, + excelQueryCellInfo: function (args: ExcelQueryCellInfoEventArgs): void { + if ((args.cell as IAxisSet).axis === 'value' && (args.cell as IAxisSet).value === undefined) { + args.style.numberFormat = undefined; + } + } }, cellTemplate: '${getCellContent(data)}', }); diff --git a/src/pivot-table/sample.json b/src/pivot-table/sample.json index 3f4f44be..a4135d33 100644 --- a/src/pivot-table/sample.json +++ b/src/pivot-table/sample.json @@ -2,13 +2,11 @@ "name": "Pivot Table", "directory": "pivot-table", "category": "Grids", - "type": "update", "samples": [{ "url": "overview", "name": "Overview", "category": "Pivot Table", - "description": "This sample shows an overview of Essential JS2 Pivot Table that allows to organize and summarize the pivot data in a detailed or abstract view and displays it as a grid and chart.", - "type": "new" + "description": "This sample shows an overview of Essential JS2 Pivot Table that allows to organize and summarize the pivot data in a detailed or abstract view and displays it as a grid and chart." }, { "url": "default", @@ -49,8 +47,7 @@ "url": "olap", "name": "OLAP", "category": "Data Binding", - "description": "This demo for Essential JS2 Pivot Table control demonstrate the basic rendering of the pivot table with olap datasource", - "type": "update" + "description": "This demo for Essential JS2 Pivot Table control demonstrate the basic rendering of the pivot table with olap datasource" }, { "url": "pivot-chart", @@ -98,8 +95,7 @@ "url": "summary-customization", "name": "Show/Hide Totals", "category": "User Interaction", - "description": "This demo for Essential JS2 Pivot Table control demonstrate the summary customization feature of the pivot table", - "type": "update" + "description": "This demo for Essential JS2 Pivot Table control demonstrate the summary customization feature of the pivot table" }, { "url": "grouping", @@ -111,8 +107,7 @@ "url": "toolbar", "name": "Toolbar", "category": "User Interaction", - "description": "This demo for Essential JS2 Pivot Table control demonstrate the toolbar feature with pivot table and pivot chart", - "type": "update" + "description": "This demo for Essential JS2 Pivot Table control demonstrate the toolbar feature with pivot table and pivot chart" }, { "url": "keyboard-navigation", diff --git a/src/pivot-table/value-filtering.ts b/src/pivot-table/value-filtering.ts index ce4717f4..591b3d77 100644 --- a/src/pivot-table/value-filtering.ts +++ b/src/pivot-table/value-filtering.ts @@ -4,7 +4,7 @@ import { DropDownList, ChangeEventArgs } from '@syncfusion/ej2-dropdowns'; import { Button } from '@syncfusion/ej2-buttons'; import { enableRipple } from '@syncfusion/ej2-base'; import { NumericTextBox, ChangeEventArgs as NumericEventArgs } from '@syncfusion/ej2-inputs'; -import { FilterModel } from '@syncfusion/ej2-pivotview/src/pivotview/model/datasourcesettings-model'; +import { FilterModel } from '@syncfusion/ej2-pivotview/src/model/datasourcesettings-model'; import * as pivotData from './pivot-data/Pivot_Data.json'; enableRipple(false); diff --git a/src/pivot-table/virtual-scrolling.ts b/src/pivot-table/virtual-scrolling.ts index 9a1c5a71..1152688d 100644 --- a/src/pivot-table/virtual-scrolling.ts +++ b/src/pivot-table/virtual-scrolling.ts @@ -65,7 +65,7 @@ let data: Function = (count: number) => { columns: [{ name: 'Year' }], values: [{ name: 'Price', caption: 'Unit Price' }, { name: 'Sold', caption: 'Unit Sold' }], }, - width: 860, + width: Browser.isDevice ? '100%' : 860, height: 300, enableVirtualization: true, gridSettings: { columnWidth: 140 }, diff --git a/src/progress-bar/linear.html b/src/progress-bar/linear.html index 748060c3..448d9ad0 100644 --- a/src/progress-bar/linear.html +++ b/src/progress-bar/linear.html @@ -27,15 +27,11 @@

    - This sample illustrates a linear progress bar with determinate and indeterminate states, segments and buffer value. + This sample illustrates a linear progress bar with determinate and indeterminate states, segments and buffer values.

    -

    - In this example, you can see how to render and configure the linear progress bar. Progress bar is used to - visualize the progression of an extended operation. The sample shows the determinate and indeterminate states, - buffer and segments of linear progress bar. -

    +

    In this example, you can see how to render and configure a linear progress bar. A progress bar is used to visualize the progression of an extended operation. The sample shows the determinate and indeterminate states, buffer values, and segments of a linear progress bar.

    \ No newline at end of file diff --git a/src/progress-bar/tooltip.ts b/src/progress-bar/tooltip.ts new file mode 100644 index 00000000..2460c863 --- /dev/null +++ b/src/progress-bar/tooltip.ts @@ -0,0 +1,107 @@ +import { loadCultureFiles } from '../common/culture-loader'; +import { ProgressBar, ILoadedEventArgs, ProgressTheme } from '@syncfusion/ej2-progressbar'; +import { EmitType } from '@syncfusion/ej2-base'; +import { Button } from '@syncfusion/ej2-buttons'; + +/** + * Sample for default linear progress bar. + */ +// tslint:disable-next-line:max-func-body-length +(window as any).default = (): void => { + loadCultureFiles(); + let div: HTMLCollection = document.getElementsByClassName('progressbar-label'); + let progressLoad: EmitType = (args: ILoadedEventArgs) => { + let selectedTheme: string = location.hash.split('/')[1]; + selectedTheme = selectedTheme ? selectedTheme : 'Material'; + args.progressBar.theme = (selectedTheme.charAt(0).toUpperCase() + + selectedTheme.slice(1)).replace(/-dark/i, 'Dark').replace(/contrast/i, 'Contrast'); + if (args.progressBar.theme === 'HighContrast' || args.progressBar.theme === 'Bootstrap5Dark' || args.progressBar.theme === 'BootstrapDark' || args.progressBar.theme === 'FabricDark' + || args.progressBar.theme === 'TailwindDark' || args.progressBar.theme === 'MaterialDark' || args.progressBar.theme === 'FluentDark') { + for (let i: number = 0; i < div.length; i++) { + div[i].setAttribute('style', 'color:white'); + } + } + }; + + + let uploadProgress: ProgressBar = new ProgressBar({ + type: 'Linear', + height: '60', + value: 75, + trackThickness: 20, + progressThickness: 20, + tooltip:{enable: true}, + animation: { + enable: true, + duration: 2000, + delay: 0, + }, + load: progressLoad + }); + uploadProgress.appendTo('#lineardeterminate'); + + let successProgress: ProgressBar = new ProgressBar({ + type: 'Linear', + height: '60', + value: 65, + trackThickness: 20, + progressThickness: 20, + tooltip:{enable: true}, + animation: { + enable: true, + duration: 2000, + delay: 0, + }, + load: progressLoad + }); + successProgress.appendTo('#linearindeterminate'); + + let warningsProgress: ProgressBar = new ProgressBar({ + type: 'Linear', + height: '60', + value: 75, + trackThickness: 20, + progressThickness: 20, + tooltip:{enable: true}, + animation: { + enable: true, + duration: 2000, + delay: 0, + }, + load: progressLoad + }); + warningsProgress.appendTo('#linearbuffer'); + + let errorProgress: ProgressBar = new ProgressBar({ + type: 'Linear', + height: '60', + value: 55, + trackThickness: 20, + progressThickness: 20, + tooltip:{enable: true}, + animation: { + enable: true, + duration: 2000, + delay: 0, + }, + load: progressLoad + }); + errorProgress.appendTo('#linearsegment'); + + let activeProgress: ProgressBar = new ProgressBar({ + type: 'Linear', + height: '60', + value: 75, + trackThickness: 20, + progressThickness: 20, + tooltip:{enable: true}, + animation: { + enable: true, + duration: 2000, + delay: 0, + }, + load: progressLoad + }); + activeProgress.appendTo('#linearactive'); + +}; diff --git a/src/range-navigator/date-time.ts b/src/range-navigator/date-time.ts index f348fb8a..a2bdc4db 100644 --- a/src/range-navigator/date-time.ts +++ b/src/range-navigator/date-time.ts @@ -46,11 +46,6 @@ let regionColor : string[] = ['rgba(38, 46, 11, 0.3)', 'rgba(94, 203, 155, 0.3)' labelFormat: 'n1', minimum: 0.6, maximum: 1, interval: 0.1, majorTickLines: { width: 0 }, lineStyle: { width: 0 } }, - axisLabelRender: (args: IAxisLabelRenderEventArgs) => { - if (args.axis.name === 'primaryYAxis') { - args.text = '€' + args.text; - } - }, height: '350', legendSettings: { visible: false }, width: Browser.isDevice ? '100%' : '80%', theme: theme diff --git a/src/rating/sample.json b/src/rating/sample.json index c23586ed..4fdb1199 100644 --- a/src/rating/sample.json +++ b/src/rating/sample.json @@ -3,7 +3,6 @@ "directory": "rating", "category": "Inputs", "ftName": "rating", - "type": "preview", "samples": [ { "url": "default", @@ -48,4 +47,4 @@ "description": "This example demonstrates the keyboard navigations of Syncfusion JavaScript Rating control." } ] -} \ No newline at end of file +} diff --git a/src/rating/template.ts b/src/rating/template.ts index ba4cb93c..0a8d335b 100644 --- a/src/rating/template.ts +++ b/src/rating/template.ts @@ -6,7 +6,6 @@ loadCultureFiles(); let fontIcon: Rating = new Rating({ emptyTemplate: '', - fullTemplate: '', value: 3.0 }); fontIcon.appendTo('#rating1'); @@ -33,4 +32,4 @@ let custom: Rating = new Rating({ enableAnimation: false }); custom.appendTo('#rating4'); -}; \ No newline at end of file +}; diff --git a/src/ribbon/default.html b/src/ribbon/default.html new file mode 100644 index 00000000..d7173da9 --- /dev/null +++ b/src/ribbon/default.html @@ -0,0 +1,187 @@ +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    + + +
    +

    This sample showcases the basic ribbon features with all its item types.

    +
    +
    +

    The ribbon organizes the application's features and functions into tabs and groups for easy navigation. The ribbon supports different types of built-in items such as buttons, drop-down buttons, split buttons, combo boxes, checkboxes, and color pickers.

    +
    \ No newline at end of file diff --git a/src/ribbon/default.ts b/src/ribbon/default.ts new file mode 100644 index 00000000..ecf7c8d3 --- /dev/null +++ b/src/ribbon/default.ts @@ -0,0 +1,542 @@ +import { loadCultureFiles } from '../common/culture-loader'; +import { Ribbon, ItemOrientation, RibbonItemSize, RibbonItemType, RibbonTabModel, RibbonColorPicker, DisplayMode, FileMenuSettingsModel, RibbonFileMenu, LauncherClickEventArgs } from '@syncfusion/ej2-ribbon'; +import { ListView, SelectEventArgs as SelectListEventArgs } from "@syncfusion/ej2-lists"; +import { MenuItemModel, MenuEventArgs } from "@syncfusion/ej2-navigations"; +import { FilteringEventArgs, SelectEventArgs } from "@syncfusion/ej2-dropdowns"; +import { Query } from "@syncfusion/ej2-data"; +import { Toast } from '@syncfusion/ej2/notifications'; +import { ColorPickerEventArgs } from '@syncfusion/ej2-inputs'; + +Ribbon.Inject(RibbonFileMenu, RibbonColorPicker); + +Ribbon.Inject(RibbonFileMenu); + +(window as any).default = (): void => { + loadCultureFiles(); + let fontSize: string[] = ['8', '9', '10', '11', '12', '14', '16', '18', '20', '22', '24', '26', '28', '36', '48', '72', '96']; + let fontStyle: string[] = ['Algerian', 'Arial', 'Calibri', 'Cambria', 'Cambria Math', 'Courier New', 'Candara', 'Georgia', 'Impact', 'Segoe Print', 'Segoe Script', 'Segoe UI', 'Symbol', 'Times New Roman', 'Verdana', 'Windings' + ]; + let tabs: RibbonTabModel[] = [{ + header: "Home", + groups: [{ + id: 'clipboard', + header: "Clipboard", + showLauncherIcon: true, + groupIconCss: 'e-icons e-paste', + collections: [{ + items: [{ + type: RibbonItemType.SplitButton, + allowedSizes: RibbonItemSize.Large, + disabled: true, + id: 'pastebtn', + splitButtonSettings: { + iconCss: 'e-icons e-paste', + items: [{ text: 'Keep Source Format' }, { text: 'Merge format' }, { text: 'Keep text only' }], + content: 'Paste', + select:(args: MenuEventArgs) => { updateContent( "Paste -> " + args.item.text) }, + click: () => { updateContent("Paste"); } + } + }] + }, { + items: [{ + type: RibbonItemType.Button, + buttonSettings: { + content: 'Cut', + iconCss: 'e-icons e-cut', + clicked: () => { updateContent("Cut"); enablePaste(); } + } + }, { + type: RibbonItemType.Button, + buttonSettings: { + content: 'Copy', + iconCss: 'e-icons e-copy', + clicked: () => { updateContent("Copy"); enablePaste(); } + } + }, { + type: RibbonItemType.Button, + buttonSettings: { + content: 'Format Painter', + iconCss: 'e-icons e-format-painter', + clicked: () => { updateContent("Format Painter") } + } + }] + }] + }, { + header: "Font", + isCollapsible: false, + enableGroupOverflow: true, + orientation: ItemOrientation.Row, + groupIconCss: 'e-icons e-bold', + cssClass: 'font-group', + collections: [{ + items: [{ + type: RibbonItemType.ComboBox, + comboBoxSettings: { + dataSource: fontStyle, + index: 3, + allowFiltering: true, + width: '150px', + change:(args: SelectEventArgs ) => {updateContent( "Font Style -> " + args.itemData.text)} + } + }, { + type: RibbonItemType.ComboBox, + comboBoxSettings: { + dataSource: fontSize, + index: 3, + width: '65px', + allowFiltering: true, + change:(args: SelectEventArgs) => {updateContent( "Font Size -> " + args.itemData.text)} + } + }] + }, { + items: [{ + type: RibbonItemType.ColorPicker, + allowedSizes: RibbonItemSize.Small, + displayOptions: DisplayMode.Simplified, + colorPickerSettings: { + value: '#123456', + change:(args: ColorPickerEventArgs) => {updateContent( args.currentValue.hex + ' color')} + } + }, { + type: RibbonItemType.Button, + allowedSizes: RibbonItemSize.Small, + buttonSettings: { + content: 'Bold', + iconCss: 'e-icons e-bold', + isToggle: true, + clicked: () => { updateContent("Bold") } + } + }, { + type: RibbonItemType.Button, + allowedSizes: RibbonItemSize.Small, + buttonSettings: { + content: 'Italic', + iconCss: 'e-icons e-italic', + isToggle: true, + clicked: () => { updateContent("Italic") } + } + }, { + type: RibbonItemType.Button, + allowedSizes: RibbonItemSize.Small, + buttonSettings: { + content: 'Underline', + iconCss: 'e-icons e-underline', + isToggle: true, + clicked: () => { updateContent("Underline") } + } + },{ + allowedSizes: RibbonItemSize.Small, + type: RibbonItemType.Button, + buttonSettings: { + content: 'Strikethrough', + iconCss: 'e-icons e-strikethrough', + isToggle: true, + clicked: () => { updateContent("Strikethrough") } + } + }, { + type: RibbonItemType.Button, + allowedSizes: RibbonItemSize.Small, + buttonSettings: { + content: 'Change Case', + iconCss: 'e-icons e-change-case', + isToggle: true, + clicked: () => { updateContent("Change Case") } + } + }] + }] + }, { + header: "Editing", + groupIconCss: 'e-icons e-edit', + orientation: ItemOrientation.Column, + collections: [{ + items: [{ + type: RibbonItemType.SplitButton, + splitButtonSettings: { + iconCss: 'e-icons e-search', + content: 'Find', + items: [ + { text: 'Find', iconCss: 'e-icons e-search' }, + { text: 'Advanced find', iconCss: 'e-icons e-search' }, + { text: 'Go to', iconCss: 'e-icons e-arrow-right' } + ], + select:(args: MenuEventArgs) => {updateContent( "Find -> " + args.item.text)}, + click: () => { updateContent("Find"); } + } + }, { + type: RibbonItemType.Button, + buttonSettings: { + content: 'Replace', + iconCss: 'e-icons e-replace', + clicked: () => { updateContent("Replace") } + } + }, { + type: RibbonItemType.SplitButton, + splitButtonSettings: { + iconCss: 'e-icons e-mouse-pointer', + content: 'Select', + items: [{ text: 'Select All' }, + { text: 'Select Objects' }], + select:(args: MenuEventArgs) => {updateContent( "Select -> " + args.item.text)}, + click: () => { updateContent("Select"); } + } + }] + }] + }, { + header: "Voice", + isCollapsible: false, + groupIconCss: 'sf-icon-dictate', + collections: [{ + items: [{ + type: RibbonItemType.SplitButton, + allowedSizes: RibbonItemSize.Large, + splitButtonSettings: { + content: 'Dictate', + iconCss: 'sf-icon-dictate', + items: [{ text: 'Chinese' }, { text: 'English' }, { text: 'German' }, { text: 'French' }], + select:(args: MenuEventArgs) => {updateContent( "Dictate -> " + args.item.text)}, + click: () => { updateContent("Dictate"); } + } + }] + }] + }, { + header: "Editor", + isCollapsible: false, + groupIconCss: 'sf-icon-editor', + collections: [{ + items: [{ + type: RibbonItemType.Button, + allowedSizes: RibbonItemSize.Large, + buttonSettings: { + content: 'Editor', + iconCss:'sf-icon-editor', + clicked: () => { updateContent("Editor") } + } + }] + }] + }, { + header: "Reuse Files", + isCollapsible: false, + groupIconCss: 'sf-icon-reuse', + collections: [{ + items: [{ + type: RibbonItemType.Button, + allowedSizes: RibbonItemSize.Large, + disabled: true, + buttonSettings: { + iconCss:'sf-icon-reuse', + content: 'Reuse Files', + clicked: () => { updateContent("Reuse Files") } + } + }] + }] + }] + }, { + header: 'Insert', + groups: [{ + header: 'Tables', + isCollapsible: false, + collections: [{ + items: [{ + type: RibbonItemType.DropDown, + allowedSizes: RibbonItemSize.Large, + dropDownSettings: { + iconCss: 'e-icons e-table', + content: 'Table', + items: [ + { text: 'Insert Table' }, { text: 'Draw Table' }, + { text: 'Convert Table' }, { text: 'Excel SpreadSheet' } + ], + select:(args: MenuEventArgs) => {updateContent( "Table -> " + args.item.text)} + } + }] + }] + }, { + id: 'illustration', + header: 'Illustrations', + showLauncherIcon: true, + orientation: ItemOrientation.Row, + enableGroupOverflow: true, + groupIconCss: 'e-icons e-image', + collections: [{ + items: [{ + type: RibbonItemType.DropDown, + id: 'pictureddl', + dropDownSettings: { + content: 'Pictures', + iconCss: 'e-icons e-image', + target: '#pictureList' + } + }, { + type: RibbonItemType.DropDown, + dropDownSettings: { + content: 'Shapes', + iconCss:'sf-icon-shapes', + items: [{ text: 'Lines' }, { text: 'Rectangles' }, { text: 'Basic Arrows' }, { text: 'Basic Shapes' }, { text: 'FlowChart' }], + select:(args: MenuEventArgs) => {updateContent( "Shapes -> " + args.item.text)} + } + }, { + type: RibbonItemType.Button, + buttonSettings: { + content: '3D Models', + iconCss:'sf-icon-3d-model', + clicked: () => { updateContent("3D Models") } + } + }, { + type: RibbonItemType.Button, + buttonSettings: { + iconCss: 'sf-icon-smart-art', + content: 'SmartArt', + clicked: () => { updateContent("SmartArt") } + } + }, { + type: RibbonItemType.Button, + buttonSettings: { + content: 'Chart', + iconCss:'sf-icon-chart', + clicked: () => { updateContent("Chart") } + } + }, { + type: RibbonItemType.Button, + buttonSettings: { + content: 'Screenshot', + iconCss:'sf-icon-screenshot', + clicked: () => { updateContent("Screenshot") } + } + }] + }] + }, { + id: 'header_footer', + header: 'Header & Footer', + showLauncherIcon: true, + orientation: ItemOrientation.Column, + groupIconCss: 'e-icons e-table', + collections: [{ + items: [{ + type: RibbonItemType.DropDown, + dropDownSettings: { + content: 'Header', + iconCss: 'e-icons e-header', + items: [{ text: 'Insert Header' }, { text: 'Edit Header' }, { text: 'Remove Header' }], + select:(args: MenuEventArgs) => {updateContent( "Header -> " + args.item.text)} + } + }, { + type: RibbonItemType.DropDown, + dropDownSettings: { + iconCss: 'e-icons e-footer', + content: 'Footer', + items: [{ text: 'Insert Footer' }, { text: 'Edit Footer' }, { text: 'Remove Footer' }], + select:(args: MenuEventArgs) => {updateContent( "Footer -> " + args.item.text)} + } + }, { + type: RibbonItemType.DropDown, + dropDownSettings: { + content: 'Page Number', + iconCss: 'e-icons e-page-numbering', + items: [{ text: 'Insert Top of page' }, { text: 'Insert Bottom of page' }, { text: 'Format Page Number' }, { text: 'Remove Page Number' }], + select:(args: MenuEventArgs) => {updateContent( "Page Numbering -> " + args.item.text)} + } + }] + }] + }, + { + header: 'Comments', + isCollapsible: false, + collections: [{ + items: [{ + type: RibbonItemType.Button, + allowedSizes: RibbonItemSize.Large, + buttonSettings: { + content: 'New Comment', + iconCss: 'e-icons e-comment-add', + clicked: () => { updateContent("New Comment") } + } + }] + }] + }, { + header: 'Link', + groupIconCss: 'e-icons e-link', + isCollapsible: false, + collections: [{ + items: [{ + type: RibbonItemType.DropDown, + allowedSizes: RibbonItemSize.Large, + dropDownSettings: { + content: 'Link', + iconCss: 'e-icons e-link', + items: [{ text: 'Insert Link', iconCss: 'e-icons e-link' }, + { text: 'Recent Links', iconCss: 'e-icons e-clock' }, + { text: 'Bookmarks', iconCss: 'e-icons e-bookmark' } + ], + select:(args: MenuEventArgs) => {updateContent( "Link -> " + args.item.text)} + } + }] + }] + }] + }, { + header: 'View', + groups: [{ + header: 'Views', + groupIconCss: 'e-icons e-print', + orientation: ItemOrientation.Row, + collections: [{ + items: [{ + type: RibbonItemType.Button, + buttonSettings: { + iconCss: 'sf-icon-read', + content: 'Read Mode', + clicked: () => { updateContent("Read Mode") } + } + }, { + type: RibbonItemType.Button, + buttonSettings: { + content: 'Print Layout', + iconCss: 'e-print e-icons', + clicked: () => { updateContent("Print Layout") } + } + }, { + type: RibbonItemType.Button, + buttonSettings: { + iconCss: 'sf-icon-web-layout', + content: 'Web Layout', + clicked: () => { updateContent("Web Layout") } + } + }] + }] + }, { + header: 'Zoom', + orientation: ItemOrientation.Row, + groupIconCss: 'e-icons e-zoom-to-fit', + collections: [{ + items: [{ + type: RibbonItemType.Button, + buttonSettings: { + content: 'Zoom In', + iconCss: 'e-icons e-zoom-in', + clicked: () => { updateContent("Zoom In") } + } + }, { + type: RibbonItemType.Button, + buttonSettings: { + iconCss: 'e-icons e-zoom-out', + content: 'Zoom Out', + clicked: () => { updateContent("Zoom Out") } + } + }] + }] + }, { + header: 'Show', + isCollapsible: false, + collections: [{ + items: [{ + type: RibbonItemType.CheckBox, + checkBoxSettings: { + label: 'Ruler', + checked: false, + change: () => { updateContent("Ruler") } + } + }, { + type: RibbonItemType.CheckBox, + checkBoxSettings: { + checked: false, + label: 'Gridlines', + change: () => { updateContent("Gridlines") } + } + }, { + type: RibbonItemType.CheckBox, + checkBoxSettings: { + label: 'Navigation Pane', + checked: true, + change: () => { updateContent("Navigation Pane") } + } + }] + }] + }, { + header: 'Dark Mode', + isCollapsible: false, + collections: [{ + items: [{ + type: RibbonItemType.Button, + allowedSizes: RibbonItemSize.Large, + buttonSettings: { + iconCss: 'sf-icon-mode', + content: 'Dark Mode', + clicked: () => { updateContent("Dark Mode") } + } + }] + }] + }] + }]; + let list: ListView = new ListView({ + showHeader: true, + headerTitle: 'Insert Picture From', + dataSource: ['This device', 'Stock Images', 'Online Images'], + select:(args: SelectListEventArgs) => {updateContent( "Pictures -> " + args.text)} + }); + list.appendTo('#pictureList'); + let menuItems: MenuItemModel[] = [ + { text: 'New', iconCss:'e-icons e-file-new', id: 'new' }, + { text: 'Open', iconCss:'e-icons e-folder-open', id: 'open' }, + { text: 'Rename', iconCss:'e-icons e-rename', id: 'rename' }, + { + text: 'Save as', + iconCss:'e-icons e-save', + id: 'save', + items: [ + { text: 'Microsoft Word (.docx)', iconCss:'sf-icon-word', id: 'word' }, + { text: 'Microsoft Word 97-2003(.doc)', iconCss:'sf-icon-word', id: 'word97' }, + { text: 'Download as PDF', iconCss:'e-icons e-export-pdf', id: 'pdf' } + ] + } + ]; + let files: FileMenuSettingsModel = ({ + menuItems: menuItems, + visible: true, + select: (args: MenuEventArgs) => { + if (args.item.id == "word" || args.item.id == "word97" || args.item.id == "pdf") { + updateContent("File -> Save as -> " + args.item.text); + } else { + updateContent("File -> " + args.item.text); + } + } + }); + let ribbon: Ribbon = new Ribbon({ + tabs: tabs, + fileMenu: files, + launcherIconClick: (args: LauncherClickEventArgs) => { + if (args.groupId == "clipboard") { + updateContent("Clipboard LauncherIcon"); + } + else if (args.groupId == "illustration") { + updateContent("Illustration LauncherIcon"); + } + else if (args.groupId == "header_footer") { + updateContent("Header & Footer LauncherIcon"); + } + } + }); + ribbon.appendTo("#ribbon"); + + let toast: Toast = new Toast({ + target: '#ribbonPlaceHolder', + cssClass: 'e-toast-info', + height: 25, + width: 'auto', + timeOut: 2000, + newestOnTop: true, + animation: { show: { effect: 'FadeIn' }, hide: { effect: 'FadeOut' }}, + position: { X: "Right" }, + showCloseButton: true + }); + toast.appendTo('#toast'); + + function updateContent(args: string){ + toast.show({ content : "Last clicked item is " + args }); + } + + let isPasteDisabled: boolean = true; + function enablePaste() { + if (!isPasteDisabled) { return; } + ribbon.enableItem('pastebtn') + isPasteDisabled = false; + } +}; diff --git a/src/ribbon/resize.html b/src/ribbon/resize.html new file mode 100644 index 00000000..7c92014e --- /dev/null +++ b/src/ribbon/resize.html @@ -0,0 +1,200 @@ +
    +
    +
    +
    +
    +

    Resize Ribbon

    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    + + +
    +

    This sample demonstrates the adaptiveness of the ribbon to different screen sizes. Move the slider to resize the ribbon.

    +
    +
    +

    The ribbon supports three sizes of ribbon items in classic mode: Large, Medium, and Small, and two sizes in simplified mode: Medium, and Small. The ribbon items switch between these sizes based on the screen size. + In addition, the ribbon also has overflow dropdowns and horizontal scrolling to ensure all items are accessible in all screen sizes and resolutions.

    +
    \ No newline at end of file diff --git a/src/ribbon/resize.ts b/src/ribbon/resize.ts new file mode 100644 index 00000000..b14d9282 --- /dev/null +++ b/src/ribbon/resize.ts @@ -0,0 +1,536 @@ +import { loadCultureFiles } from '../common/culture-loader'; +import { Ribbon, ItemOrientation, RibbonItemSize, RibbonItemType, RibbonTabModel, DisplayMode, FileMenuSettingsModel, RibbonFileMenu, LauncherClickEventArgs, RibbonColorPicker } from '@syncfusion/ej2-ribbon'; +import { FilteringEventArgs, SelectEventArgs } from "@syncfusion/ej2-dropdowns"; +import { Slider, SliderChangeEventArgs } from "@syncfusion/ej2-inputs"; +import { Query } from '@syncfusion/ej2-data'; +import { ListView, SelectEventArgs as SelectListEventArgs } from "@syncfusion/ej2-lists"; +import { MenuItemModel } from "@syncfusion/ej2-navigations"; +import { MenuEventArgs } from '@syncfusion/ej2/splitbuttons'; +import { Toast } from '@syncfusion/ej2/notifications'; +import { ColorPickerEventArgs } from '@syncfusion/ej2-inputs'; + +Ribbon.Inject(RibbonFileMenu, RibbonColorPicker); + +Ribbon.Inject(RibbonFileMenu); + +(window as any).default = (): void => { + loadCultureFiles(); + let fontStyle: string[] = ['Algerian', 'Arial', 'Calibri', 'Cambria', 'Cambria Math', 'Candara', 'Courier New', 'Georgia', 'Impact', 'Segoe Print', 'Segoe Script', 'Segoe UI', 'Symbol', 'Times New Roman', 'Verdana', 'Windings' + ]; + let fontSize: string[] = ['8', '9', '10', '11', '12', '14', '16', '18', '20', '22', '24', '26', '28', '36', '48', '72', '96']; + let tabs: RibbonTabModel[] = [{ + header: "Home", + groups: [{ + id: 'clipboard', + header: "Clipboard", + groupIconCss: 'e-icons e-paste', + showLauncherIcon: true, + collections: [{ + items: [{ + type: RibbonItemType.SplitButton, + allowedSizes: RibbonItemSize.Large, + disabled: true, + id: 'pastebtn', + splitButtonSettings: { + content: 'Paste', + iconCss: 'e-icons e-paste', + items: [{ text: 'Keep Source Format' }, { text: 'Merge format' }, { text: 'Keep text only' }], + select:(args: MenuEventArgs) => { updateContent( "Paste -> " + args.item.text) }, + click: () => { updateContent("Paste"); } + } + }] + }, { + items: [{ + type: RibbonItemType.Button, + buttonSettings: { + content: 'Cut', + iconCss: 'e-icons e-cut', + clicked: () => { updateContent("Cut"); enablePaste(); } + } + }] + }, { + items: [{ + type: RibbonItemType.Button, + buttonSettings: { + content: 'Copy', + iconCss: 'e-icons e-copy', + clicked: () => { updateContent("Copy"); enablePaste(); } + } + }] + }, { + items: [{ + type: RibbonItemType.Button, + buttonSettings: { + content: 'Format Painter', + iconCss: 'e-icons e-format-painter', + clicked: () => { updateContent("Format Painter") } + } + }] + }] + }, { + header: "Font", + orientation: ItemOrientation.Row, + groupIconCss: 'e-icons e-bold', + isCollapsible: false, + enableGroupOverflow: true, + cssClass: 'font-group', + collections: [{ + items: [{ + type: RibbonItemType.ComboBox, + comboBoxSettings: { + dataSource: fontStyle, + index: 2, + allowFiltering: true, + width: '150px', + change:(args: SelectEventArgs ) => {updateContent( "Font Style -> " + args.itemData.text)} + } + }, { + type: RibbonItemType.ComboBox, + comboBoxSettings: { + dataSource: fontSize, + index: 4, + width: '65px', + allowFiltering: true, + change:(args: SelectEventArgs ) => {updateContent( "Font Size -> " + args.itemData.text)} + } + }] + }, { + items: [{ + type: RibbonItemType.ColorPicker, + allowedSizes: RibbonItemSize.Small, + displayOptions: DisplayMode.Simplified, + colorPickerSettings: { + value: '#123456', + change:(args: ColorPickerEventArgs) => {updateContent( args.currentValue.hex + ' color')} + } + },{ + type: RibbonItemType.Button, + allowedSizes: RibbonItemSize.Small, + buttonSettings: { + content: 'Bold', + iconCss: 'e-icons e-bold', + isToggle: true, + clicked: () => { updateContent("Bold") } + } + }, { + type: RibbonItemType.Button, + allowedSizes: RibbonItemSize.Small, + buttonSettings: { + content: 'Italic', + iconCss: 'e-icons e-italic', + isToggle: true, + clicked: () => { updateContent("Italic") } + } + }, { + type: RibbonItemType.Button, + allowedSizes: RibbonItemSize.Small, + buttonSettings: { + content: 'Underline', + iconCss: 'e-icons e-underline', + isToggle: true, + clicked: () => { updateContent("Underline") } + } + },{ + type: RibbonItemType.Button, + allowedSizes: RibbonItemSize.Small, + buttonSettings: { + content: 'Strikethrough', + iconCss: 'e-icons e-strikethrough', + isToggle: true, + clicked: () => { updateContent("Strikethrough") } + } + }, { + type: RibbonItemType.Button, + allowedSizes: RibbonItemSize.Small, + buttonSettings: { + content: 'Change Case', + iconCss: 'e-icons e-change-case', + isToggle: true, + clicked: () => { updateContent("Change Case") } + } + } + ] + }] + }, { + header: "Editing", + groupIconCss: 'e-icons e-edit', + orientation: ItemOrientation.Row, + collections: [{ + items: [{ + type: RibbonItemType.SplitButton, + splitButtonSettings: { + content: 'Find', + iconCss: 'e-icons e-search', + items: [{ text: 'Find', iconCss: 'e-icons e-search' }, + { text: 'Advanced find', iconCss: 'e-icons e-search' }, + { text: 'Go to', iconCss: 'e-icons e-arrow-right' }], + select:(args: MenuEventArgs) => {updateContent( "Find -> " + args.item.text)}, + click: () => { updateContent("Find"); } + } + }, { + type: RibbonItemType.Button, + buttonSettings: { + content: 'Replace', + iconCss: 'e-icons e-replace', + clicked: () => { updateContent("Replace") } + } + }, { + type: RibbonItemType.SplitButton, + splitButtonSettings: { + content: 'Select', + iconCss: 'e-icons e-mouse-pointer', + items: [{ text: 'Select All' }, + { text: 'Select Objects' }], + select:(args: MenuEventArgs) => {updateContent( "Select -> " + args.item.text)}, + click: () => { updateContent("Select"); } + } + }] + }] + }, { + header: "Voice", + isCollapsible: false, + groupIconCss: 'sf-icon-dictate', + collections: [{ + items: [{ + type: RibbonItemType.SplitButton, + allowedSizes: RibbonItemSize.Large, + disabled: true, + splitButtonSettings: { + content: 'Dictate', + iconCss: 'sf-icon-dictate', + items: [{ text: 'Chinese' }, { text: 'English' }, { text: 'German' }, { text: 'French' }], + select:(args: MenuEventArgs) => {updateContent( "Dictate -> " + args.item.text)}, + click: () => { updateContent("Dictate"); } + } + }] + }] + }] + }, { + header: 'Insert', + groups: [{ + header: 'Tables', + isCollapsible: false, + collections: [{ + items: [{ + type: RibbonItemType.DropDown, + allowedSizes: RibbonItemSize.Large, + dropDownSettings: { + content: 'Table', + iconCss: 'e-icons e-table', + items: [ + { text: 'Insert Table' }, { text: 'Draw Table' }, + { text: 'Convert Table' }, { text: 'Excel SpreadSheet' } + ], + select:(args: MenuEventArgs) => {updateContent( "Table -> " + args.item.text)} + } + }] + }] + }, { + id : 'illustration', + header: 'Illustrations', + showLauncherIcon: true, + orientation: ItemOrientation.Row, + enableGroupOverflow: true, + groupIconCss: 'e-icons e-image', + collections: [{ + items: [{ + type: RibbonItemType.DropDown, + id: 'pictureddl', + dropDownSettings: { + content: 'Pictures', + iconCss: 'e-icons e-image', + target: '#pictureList' + } + }, { + type: RibbonItemType.DropDown, + dropDownSettings: { + iconCss:'sf-icon-shapes', + content: 'Shapes', + items: [{ text: 'Lines' }, { text: 'Rectangles' }, { text: 'Basic Arrows' }, { text: 'Basic Shapes' }, { text: 'FlowChart' }], + select:(args) => {updateContent( "Shapes -> " + args.item.text)} + } + }, { + type: RibbonItemType.Button, + buttonSettings: { + content: '3D Models', + iconCss:'sf-icon-3d-model', + clicked: () => { updateContent("3D Models") } + } + }, { + type: RibbonItemType.Button, + buttonSettings: { + content: 'SmartArt', + iconCss: 'sf-icon-smart-art', + clicked: () => { updateContent("SmartArt") } + } + }, { + type: RibbonItemType.Button, + buttonSettings: { + content: 'Chart', + iconCss:'sf-icon-chart', + clicked: () => { updateContent("Chart") } + } + }, { + type: RibbonItemType.Button, + buttonSettings: { + content: 'Screenshot', + iconCss:'sf-icon-screenshot', + clicked: () => { updateContent("Screenshot") } + } + }] + }] + }, { + id: 'header_footer', + header: 'Header & Footer', + showLauncherIcon: true, + orientation: ItemOrientation.Column, + groupIconCss: 'e-icons e-table', + collections: [{ + items: [{ + type: RibbonItemType.DropDown, + dropDownSettings: { + content: 'Header', + iconCss: 'e-icons e-header', + items: [{ text: 'Insert Header' }, { text: 'Edit Header' }, { text: 'Remove Header' }], + select:(args: MenuEventArgs) => {updateContent( "Header -> " + args.item.text)} + } + }, { + type: RibbonItemType.DropDown, + dropDownSettings: { + content: 'Footer', + iconCss: 'e-icons e-footer', + items: [{ text: 'Insert Footer' }, { text: 'Edit Footer' }, { text: 'Remove Footer' }], + select:(args: MenuEventArgs) => {updateContent( "Footer -> " + args.item.text)} + } + }, { + type: RibbonItemType.DropDown, + dropDownSettings: { + content: 'Page Number', + iconCss: 'e-icons e-page-numbering', + items: [{ text: 'Insert Top of page' }, { text: 'Insert Bottom of page' }, { text: 'Format Page Number' }, { text: 'Remove Page Number' }], + select:(args: MenuEventArgs) => {updateContent( "Page Number -> " + args.item.text)} + } + }] + }] + }, + { + header: 'Comments', + isCollapsible: false, + collections: [{ + items: [{ + type: RibbonItemType.Button, + allowedSizes: RibbonItemSize.Large, + buttonSettings: { + iconCss: 'e-icons e-comment-add', + content: 'New Comment', + clicked: () => { updateContent("New Comment") } + } + }] + }] + }, { + header: 'Link', + groupIconCss: 'e-icons e-link', + isCollapsible: false, + collections: [{ + items: [{ + type: RibbonItemType.DropDown, + allowedSizes: RibbonItemSize.Large, + dropDownSettings: { + content: 'Link', + iconCss: 'e-icons e-link', + items: [{ text: 'Insert Link', iconCss: 'e-icons e-link' }, + { text: 'Recent Links', iconCss: 'e-icons e-clock' }, + { text: 'Bookmarks', iconCss: 'e-icons e-bookmark' } + ], + select:(args: MenuEventArgs) => {updateContent( "Link -> " + args.item.text)} + } + }] + }] + }] + }, { + header: 'View', + groups: [{ + header: 'Views', + orientation: ItemOrientation.Row, + groupIconCss: 'e-icons e-print', + collections: [{ + items: [{ + type: RibbonItemType.Button, + buttonSettings: { + iconCss: 'sf-icon-read', + content: 'Read Mode', + clicked: () => { updateContent("Read Mode") } + } + }, { + type: RibbonItemType.Button, + displayOptions: DisplayMode.Auto, + buttonSettings: { + iconCss: 'e-print e-icons', + content: 'Print Layout', + clicked: () => { updateContent("Print Layout") } + } + }, { + type: RibbonItemType.Button, + displayOptions:DisplayMode.Overflow, + buttonSettings: { + iconCss: 'sf-icon-web-layout', + content: 'Web Layout', + clicked: () => { updateContent("Web Layout") } + } + }] + }] + }, { + header: 'Zoom', + orientation: ItemOrientation.Row, + groupIconCss: 'e-icons e-zoom-to-fit', + collections: [{ + items: [{ + type: RibbonItemType.Button, + buttonSettings: { + iconCss: 'e-icons e-zoom-in', + content: 'Zoom In', + clicked: () => { updateContent("Zoom In") } + } + }, { + type: RibbonItemType.Button, + buttonSettings: { + iconCss: 'e-icons e-zoom-out', + content: 'Zoom Out', + clicked: () => { updateContent("Zoom Out") } + } + }] + }] + }, { + header: 'Show', + isCollapsible: false, + collections: [{ + items: [{ + type: RibbonItemType.CheckBox, + checkBoxSettings: { + label: 'Ruler', + checked: false, + change: () => { updateContent("Ruler") } + } + }, { + type: RibbonItemType.CheckBox, + checkBoxSettings: { + label: 'Gridlines', + checked: false, + change: () => { updateContent("Gridlines") } + } + }, { + type: RibbonItemType.CheckBox, + checkBoxSettings: { + label: 'Navigation Pane', + checked: true, + change: () => { updateContent("Navigation Pane") } + } + }] + }] + }, { + header: 'Dark Mode', + isCollapsible: false, + collections: [{ + items: [{ + type: RibbonItemType.Button, + allowedSizes: RibbonItemSize.Large, + buttonSettings: { + iconCss: 'sf-icon-mode', + content: 'Dark Mode', + clicked: () => { updateContent("Dark Mode") } + } + }] + }] + }] + }]; + let list: ListView = new ListView({ + showHeader: true, + headerTitle: 'Insert Picture From', + dataSource: ['This device', 'Stock Images', 'Online Images'], + select:(args: SelectListEventArgs) => {updateContent( "Pictures -> " + args.text)} + }); + list.appendTo('#pictureList'); + let menuItems: MenuItemModel[] = [ + { text: 'New', iconCss:'e-icons e-file-new' }, + { text: 'Open', iconCss:'e-icons e-folder-open' }, + { text: 'Rename', iconCss:'e-icons e-rename' }, + { + text: 'Save as', + iconCss:'e-icons e-save', + items: [ + { text: 'Microsoft Word (.docx)', iconCss:'sf-icon-word', id: 'word' }, + { text: 'Microsoft Word 97-2003(.doc)', iconCss:'sf-icon-word', id: 'word97' }, + { text: 'Download as PDF', iconCss:'e-icons e-export-pdf', id: 'pdf' } + ] + } + ]; + let files: FileMenuSettingsModel = ({ + menuItems: menuItems, + visible: true, + select: (args: MenuEventArgs) => { + if (args.item.id == "word" || args.item.id == "word97" || args.item.id == "pdf") { + updateContent("File -> Save as -> " + args.item.text); + } else { + updateContent("File -> " + args.item.text); + } + } + }); + let container: HTMLElement = document.getElementById('ribbonContainer'); + let slider: Slider = new Slider({ + min: 350, + max: container.offsetWidth, + value: container.offsetWidth, + change: onChange + }); + slider.appendTo('#ribbonSlider'); + + let ribbon: Ribbon = new Ribbon({ + tabs: tabs, + fileMenu: files, + launcherIconClick: (args: LauncherClickEventArgs) => { + if (args.groupId == "clipboard") { + updateContent("Clipboard LauncherIcon"); + } + else if (args.groupId == "illustration") { + updateContent("Illustration LauncherIcon"); + } + else if (args.groupId == "header_footer") { + updateContent("Header & Footer LauncherIcon"); + } + } + }); + ribbon.appendTo("#ribbon"); + + let toast: Toast = new Toast({ + target: '#ribbonPlaceHolder', + cssClass: 'e-toast-info', + height: 25, + width: 'auto', + timeOut: 2000, + newestOnTop: true, + animation: { show: { effect: 'FadeIn' }, hide: { effect: 'FadeOut' }}, + position: { X: "Right" }, + showCloseButton: true + }); + toast.appendTo('#toast'); + + function onChange(args: SliderChangeEventArgs) { + container.style.width = args.value + 'px'; + ribbon.refreshLayout(); + } + window.addEventListener("resize", function() { + container.style.width = '100%'; + slider.max = container.offsetWidth; + slider.value = container.offsetWidth; + ribbon.refreshLayout(); + }); + function updateContent(args: string){ + toast.show({ content : "Last clicked item is " + args }); + } + let isPasteDisabled: boolean = true; + function enablePaste() { + if (!isPasteDisabled) { return; } + ribbon.enableItem('pastebtn') + isPasteDisabled = false; + } +}; \ No newline at end of file diff --git a/src/ribbon/sample.json b/src/ribbon/sample.json new file mode 100644 index 00000000..f4ba7e98 --- /dev/null +++ b/src/ribbon/sample.json @@ -0,0 +1,27 @@ +{ + "name": "Ribbon", + "directory": "ribbon", + "category": "Navigation", + "type":"preview", + "ftName": "ribbon", + "samples": [ + { + "url": "default", + "name": "Default Functionalities", + "category": "Ribbon", + "description": "This sample demonstrates the default functionalities of the Syncfusion JavaScript(ES5) Ribbon component." + }, + { + "url": "simplified", + "name": "Simplified Mode", + "category": "Ribbon", + "description": "This sample demonstrates the simplified mode functionality of the Syncfusion JavaScript(ES5) Ribbon component." + }, + { + "url": "resize", + "name": "Ribbon Resizing", + "category": "Ribbon", + "description": "This sample demonstrates the resizing functionality of the Syncfusion JavaScript(ES5) Ribbon component." + } + ] +} \ No newline at end of file diff --git a/src/ribbon/simplified.html b/src/ribbon/simplified.html new file mode 100644 index 00000000..5549ab5a --- /dev/null +++ b/src/ribbon/simplified.html @@ -0,0 +1,187 @@ +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    + + +
    +

    This sample showcases the ribbon control with a more streamlined and compact UI in Simplified mode.

    +
    +
    +

    The ribbon supports two layouts: Classic and Simplified. The activeLayout property can be used to define the current layout of the ribbon. In Simplified mode, all ribbon items are arranged in a single row, providing more space for the application's content.

    +
    \ No newline at end of file diff --git a/src/ribbon/simplified.ts b/src/ribbon/simplified.ts new file mode 100644 index 00000000..a82431c5 --- /dev/null +++ b/src/ribbon/simplified.ts @@ -0,0 +1,543 @@ +import { loadCultureFiles } from '../common/culture-loader'; +import { Ribbon, ItemOrientation, RibbonItemSize, RibbonItemType, RibbonTabModel, DisplayMode, FileMenuSettingsModel, RibbonFileMenu, LauncherClickEventArgs, RibbonColorPicker } from '@syncfusion/ej2-ribbon'; +import { FilteringEventArgs, SelectEventArgs } from "@syncfusion/ej2-dropdowns"; +import { Query } from '@syncfusion/ej2-data'; +import { ListView, SelectEventArgs as SelectListEventArgs } from "@syncfusion/ej2-lists"; +import { MenuItemModel } from "@syncfusion/ej2-navigations"; +import { MenuEventArgs } from '@syncfusion/ej2/splitbuttons'; +import { Toast } from '@syncfusion/ej2/notifications'; +import { ColorPickerEventArgs } from '@syncfusion/ej2-inputs'; + +Ribbon.Inject(RibbonFileMenu, RibbonColorPicker); + +Ribbon.Inject(RibbonFileMenu); + +(window as any).default = (): void => { + loadCultureFiles(); + + let fontStyle: string[] = ['Algerian', 'Arial', 'Cambria', 'Calibri', 'Cambria Math', 'Candara', 'Courier New', 'Georgia', 'Impact', 'Segoe Script', 'Segoe Print', 'Segoe UI', 'Symbol', 'Times New Roman', 'Verdana', 'Windings' + ]; + let fontSize: string[] = ['8', '9', '10', '11', '12', '14', '16', '18', '20', '22', '24', '26', '28', '36', '48', '72', '96']; + let tabs: RibbonTabModel[] = [{ + header: "Home", + groups: [{ + id: 'clipboard', + header: "Clipboard", + groupIconCss: 'e-icons e-paste', + showLauncherIcon: true, + collections: [{ + items: [{ + type: RibbonItemType.SplitButton, + allowedSizes: RibbonItemSize.Large, + disabled: true, + id: 'pastebtn', + splitButtonSettings: { + content: 'Paste', + iconCss: 'e-icons e-paste', + items: [{ text: 'Keep Source Format' }, { text: 'Merge format' }, { text: 'Keep text only' }], + select:(args: MenuEventArgs) => {updateContent( "Paste -> " + args.item.text)}, + click: () => { updateContent("Paste"); } + } + }] + }, { + items: [{ + type: RibbonItemType.Button, + buttonSettings: { + content: 'Cut', + iconCss: 'e-icons e-cut', + clicked: () => { updateContent("Cut"); enablePaste(); } + } + }, { + type: RibbonItemType.Button, + buttonSettings: { + content: 'Copy', + iconCss: 'e-icons e-copy', + clicked: () => { updateContent("Copy"); enablePaste(); } + } + }, { + type: RibbonItemType.Button, + buttonSettings: { + content: 'Format Painter', + iconCss: 'e-icons e-format-painter', + clicked: () => { updateContent("Format Painter") } + } + }] + },] + }, { + header: "Font", + orientation: ItemOrientation.Row, + groupIconCss: 'e-icons e-bold', + isCollapsible: false, + enableGroupOverflow: true, + cssClass: 'font-group', + collections: [{ + items: [{ + type: RibbonItemType.ComboBox, + comboBoxSettings: { + width: '150px', + allowFiltering: true, + dataSource: fontStyle, + index: 2, + change:(args: SelectEventArgs) => {updateContent( "Font Style -> " + args.itemData.text)} + } + }, { + type: RibbonItemType.ComboBox, + comboBoxSettings: { + dataSource: fontSize, + index: 4, + width: '65px', + change:(args: SelectEventArgs) => {updateContent( "Font Size -> " + args.itemData.text)}, + allowFiltering: true, + } + }] + }, { + items: [{ + type: RibbonItemType.ColorPicker, + allowedSizes: RibbonItemSize.Small, + displayOptions: DisplayMode.Simplified, + colorPickerSettings: { + value: '#123456', + change:(args: ColorPickerEventArgs) => {updateContent( args.currentValue.hex + ' color' )} + } + }, { + type: RibbonItemType.Button, + allowedSizes: RibbonItemSize.Small, + buttonSettings: { + content: 'Bold', + iconCss: 'e-icons e-bold', + isToggle: true, + clicked: () => { updateContent("Bold") } + } + }, { + type: RibbonItemType.Button, + allowedSizes: RibbonItemSize.Small, + buttonSettings: { + content: 'Italic', + iconCss: 'e-icons e-italic', + isToggle: true, + clicked: () => { updateContent("Italic") } + } + }, { + type: RibbonItemType.Button, + allowedSizes: RibbonItemSize.Small, + buttonSettings: { + content: 'Underline', + iconCss: 'e-icons e-underline', + isToggle: true, + clicked: () => { updateContent("Underline") } + } + },{ + type: RibbonItemType.Button, + allowedSizes: RibbonItemSize.Small, + buttonSettings: { + content: 'Strikethrough', + iconCss: 'e-icons e-strikethrough', + isToggle: true, + clicked: () => { updateContent("Strikethrough") } + } + }, { + type: RibbonItemType.Button, + allowedSizes: RibbonItemSize.Small, + buttonSettings: { + content: 'Change Case', + iconCss: 'e-icons e-change-case', + isToggle: true, + clicked: () => { updateContent("Change Case") } + } + } + ] + }] + }, { + header: "Editing", + orientation: ItemOrientation.Column, + groupIconCss: 'e-icons e-edit', + collections: [{ + items: [{ + type: RibbonItemType.SplitButton, + splitButtonSettings: { + content: 'Find', + iconCss: 'e-icons e-search', + items: [{ text: 'Find', iconCss: 'e-icons e-search' }, + { text: 'Advanced find', iconCss: 'e-icons e-search' }, + { text: 'Go to', iconCss: 'e-icons e-arrow-right' }], + select:(args: MenuEventArgs) => {updateContent( "Find -> " + args.item.text)}, + click: () => { updateContent("Find"); } + } + }, { + type: RibbonItemType.Button, + buttonSettings: { + content: 'Replace', + iconCss: 'e-icons e-replace', + clicked: () => { updateContent("Replace") } + } + }, { + type: RibbonItemType.SplitButton, + splitButtonSettings: { + content: 'Select', + iconCss: 'e-icons e-mouse-pointer', + items: [{ text: 'Select All' }, + { text: 'Select Objects' }], + select:(args: MenuEventArgs) => {updateContent( "Select -> " + args.item.text)}, + click: () => { updateContent("Select"); } + } + }] + }] + }, { + header: "Voice", + isCollapsible: false, + groupIconCss: 'sf-icon-dictate', + collections: [{ + items: [{ + type: RibbonItemType.SplitButton, + allowedSizes: RibbonItemSize.Large, + splitButtonSettings: { + content: 'Dictate', + iconCss: 'sf-icon-dictate', + items: [{ text: 'Chinese' }, { text: 'English' }, { text: 'German' }, { text: 'French' }], + select:(args: MenuEventArgs) => {updateContent( "Dictate -> " + args.item.text)}, + click: () => { updateContent("Dictate"); } + } + }] + }] + }, { + header: "Editor", + isCollapsible: false, + groupIconCss: 'sf-icon-editor', + collections: [{ + items: [{ + type: RibbonItemType.Button, + allowedSizes: RibbonItemSize.Large, + buttonSettings: { + content: 'Editor', + iconCss:'sf-icon-editor', + clicked: () => { updateContent("Editor")} + } + }] + }] + }, { + header: "Reuse Files", + isCollapsible: false, + groupIconCss: 'sf-icon-reuse', + collections: [{ + items: [{ + type: RibbonItemType.Button, + allowedSizes: RibbonItemSize.Large, + disabled: true, + buttonSettings: { + content: 'Reuse Files', + iconCss:'sf-icon-reuse', + clicked: () => { updateContent("Reuse Files")} + } + }] + }] + }] + }, { + header: 'Insert', + groups: [{ + header: 'Tables', + isCollapsible: false, + collections: [{ + items: [{ + type: RibbonItemType.SplitButton, + allowedSizes: RibbonItemSize.Large, + splitButtonSettings: { + content: 'Table', + iconCss: 'e-icons e-table', + items: [ + { text: 'Insert Table' }, { text: 'Draw Table' }, + { text: 'Convert Table' }, { text: 'Excel SpreadSheet' } + ], + select:(args: MenuEventArgs) => {updateContent( "Table -> " + args.item.text)} + } + }] + }] + }, { + id: 'illustration', + header: 'illustration', + showLauncherIcon: true, + orientation: ItemOrientation.Row, + enableGroupOverflow: true, + groupIconCss: 'e-icons e-image', + collections: [{ + items: [{ + type: RibbonItemType.DropDown, + id: 'pictureddl', + dropDownSettings: { + content: 'Pictures', + iconCss: 'e-icons e-image', + target: '#pictureList' + } + }, { + type: RibbonItemType.DropDown, + dropDownSettings: { + iconCss:'sf-icon-shapes', + content: 'Shapes', + items: [{ text: 'Lines' }, { text: 'Rectangles' }, { text: 'Basic Arrows' }, { text: 'Basic Shapes' }, { text: 'FlowChart' }], + select:(args: MenuEventArgs) => {updateContent( "Shapes -> " + args.item.text)} + } + }, { + type: RibbonItemType.Button, + buttonSettings: { + content: '3D Models', + iconCss:'sf-icon-3d-model', + clicked: () => { updateContent("3D Models")} + } + }, { + type: RibbonItemType.Button, + buttonSettings: { + content: 'SmartArt', + iconCss: 'sf-icon-smart-art', + clicked: () => { updateContent("SmartArt")} + } + }, { + type: RibbonItemType.Button, + buttonSettings: { + content: 'Chart', + iconCss:'sf-icon-chart', + clicked: () => { updateContent("Chart")} + } + }, { + type: RibbonItemType.Button, + buttonSettings: { + content: 'Screenshot', + iconCss:'sf-icon-screenshot', + clicked: () => { updateContent("Screenshot")} + } + }] + }] + }, { + id: 'header_footer', + header: 'Header & Footer', + showLauncherIcon: true, + orientation: ItemOrientation.Column, + groupIconCss: 'e-icons e-table', + collections: [{ + items: [{ + type: RibbonItemType.DropDown, + dropDownSettings: { + content: 'Header', + iconCss: 'e-icons e-header', + items: [{ text: 'Insert Header' }, { text: 'Edit Header' }, { text: 'Remove Header' }], + select:(args: MenuEventArgs) => {updateContent( "Header -> " + args.item.text)} + } + }, { + type: RibbonItemType.DropDown, + dropDownSettings: { + content: 'Footer', + iconCss: 'e-icons e-footer', + items: [{ text: 'Insert Footer' }, { text: 'Edit Footer' }, { text: 'Remove Footer' }], + select:(args: MenuEventArgs) => {updateContent( "Footer -> " + args.item.text)} + } + }, { + type: RibbonItemType.DropDown, + dropDownSettings: { + content: 'Page Number', + iconCss: 'e-icons e-page-numbering', + items: [{ text: 'Insert Top of page' }, { text: 'Insert Bottom of page' }, { text: 'Format Page Number' }, { text: 'Remove Page Number' }], + select:(args: MenuEventArgs) => {updateContent( "Page Number -> " + args.item.text)} + } + }] + }] + }, + { + header: 'Comments', + isCollapsible: false, + collections: [{ + items: [{ + type: RibbonItemType.Button, + allowedSizes: RibbonItemSize.Large, + buttonSettings: { + iconCss: 'e-icons e-comment-add', + content: 'New Comment', + clicked: () => { updateContent("New Comment")} + } + }] + }] + }, { + header: 'Link', + groupIconCss: 'e-icons e-link', + isCollapsible: false, + collections: [{ + items: [{ + type: RibbonItemType.DropDown, + allowedSizes: RibbonItemSize.Large, + dropDownSettings: { + content: 'Link', + iconCss: 'e-icons e-link', + items: [{ text: 'Insert Link', iconCss: 'e-icons e-link' }, + { text: 'Recent Links', iconCss: 'e-icons e-clock' }, + { text: 'Bookmarks', iconCss: 'e-icons e-bookmark' } + ], + select:(args: MenuEventArgs) => {updateContent( "Link -> " + args.item.text)} + } + }] + }] + }] + }, { + header: 'View', + groups: [{ + header: 'Views', + orientation: ItemOrientation.Row, + groupIconCss: 'e-icons e-print', + collections: [{ + items: [{ + type: RibbonItemType.Button, + buttonSettings: { + iconCss: 'sf-icon-read', + content: 'Read Mode', + clicked: () => { updateContent("Read Mode")} + } + }, { + type: RibbonItemType.Button, + buttonSettings: { + iconCss: 'e-print e-icons', + content: 'Print Layout', + clicked: () => { updateContent("Print Layout")} + } + }, { + type: RibbonItemType.Button, + buttonSettings: { + iconCss: 'sf-icon-web-layout', + content: 'Web Layout', + clicked: () => { updateContent("Web Layout")} + } + }] + }] + }, { + header: 'Zoom', + orientation: ItemOrientation.Row, + groupIconCss: 'e-icons e-zoom-to-fit', + collections: [{ + items: [{ + type: RibbonItemType.Button, + buttonSettings: { + iconCss: 'e-icons e-zoom-in', + content: 'Zoom In', + clicked: () => { updateContent("Zoom In")} + } + }, { + type: RibbonItemType.Button, + buttonSettings: { + iconCss: 'e-icons e-zoom-out', + content: 'Zoom Out', + clicked: () => { updateContent("Zoom Out")} + } + }] + }] + }, { + header: 'Show', + isCollapsible: false, + collections: [{ + items: [{ + type: RibbonItemType.CheckBox, + checkBoxSettings: { + label: 'Ruler', + checked: false, + change: () => { updateContent("Ruler")} + } + }, { + type: RibbonItemType.CheckBox, + checkBoxSettings: { + label: 'Gridlines', + checked: false, + change: () => { updateContent("Gridlines")} + } + }, { + type: RibbonItemType.CheckBox, + checkBoxSettings: { + label: 'Navigation Pane', + checked: true, + change: () => { updateContent("Navigation Pane")} + } + }] + }] + }, { + header: 'Dark Mode', + isCollapsible: false, + collections: [{ + items: [{ + type: RibbonItemType.Button, + allowedSizes: RibbonItemSize.Large, + buttonSettings: { + iconCss: 'sf-icon-mode', + content: 'Dark Mode', + clicked: () => { updateContent("Dark Mode")} + } + }] + }] + }] + }]; + let list: ListView = new ListView({ + showHeader: true, + headerTitle: 'Insert Picture From', + dataSource: ['This device', 'Stock Images', 'Online Images'], + select:(args: SelectListEventArgs) => {updateContent( "Pictures -> " + args.text)} + }); + list.appendTo('#pictureList'); + + let menuItems: MenuItemModel[] = [ + { id:'new', text: 'New', iconCss:'e-icons e-file-new' }, + { id:'open',text: 'Open', iconCss:'e-icons e-folder-open' }, + { id:'rename',text: 'Rename', iconCss:'e-icons e-rename' }, + { + id: 'save', + text: 'Save as', + iconCss:'e-icons e-save', + items: [ + { text: 'Microsoft Word (.docx)', iconCss:'sf-icon-word', id: 'word' }, + { text: 'Microsoft Word 97-2003(.doc)', iconCss:'sf-icon-word', id: 'word97' }, + { text: 'Download as PDF', iconCss:'e-icons e-export-pdf', id: 'pdf' } + ] + } + ]; + let files: FileMenuSettingsModel = ({ + menuItems: menuItems, + visible: true, + select: (args: MenuEventArgs) => { + if (args.item.id == "word" || args.item.id == "word97" || args.item.id == "pdf") { + updateContent("File -> Save as -> " + args.item.text); + } else { + updateContent("File -> " + args.item.text); + } + } + }); + let ribbon: Ribbon = new Ribbon({ + tabs: tabs, + fileMenu: files, + activeLayout:'Simplified', + launcherIconClick: (args: LauncherClickEventArgs) => { + if (args.groupId == "clipboard") { + updateContent("Clipboard LauncherIcon"); + } + else if (args.groupId == "illustration") { + updateContent("Illustration LauncherIcon"); + } + else if (args.groupId == "header_footer") { + updateContent("Header & Footer LauncherIcon"); + } + } + }); + ribbon.appendTo("#ribbon"); + + let toast: Toast = new Toast({ + target: '#ribbonPlaceHolder', + cssClass: 'e-toast-info', + height: 25, + width: 'auto', + timeOut: 2000, + newestOnTop: true, + animation: { show: { effect: 'FadeIn' }, hide: { effect: 'FadeOut' }}, + position: { X: "Right" }, + showCloseButton: true + }); + toast.appendTo('#toast'); + function updateContent(args: string){ + toast.show({ content : "Last clicked item is " + args }); + } + let isPasteDisabled: boolean = true; + function enablePaste() { + if (!isPasteDisabled) { return; } + ribbon.enableItem('pastebtn') + isPasteDisabled = false; + } +}; \ No newline at end of file diff --git a/src/rich-text-editor/format-painter.html b/src/rich-text-editor/format-painter.html new file mode 100644 index 00000000..34f3fe86 --- /dev/null +++ b/src/rich-text-editor/format-painter.html @@ -0,0 +1,112 @@ +
    +
    +
    +
    +
    +

    Format Painter

    +

    + A Format Painter is a Rich Text Editor feature allowing users to quickly + copy + and + paste + formatting from one text to another. With a rich text editor, utilize the format painter as follows: +

    +
      +
    • + Select the text whose format you want to copy. +
      • +
    • + Click on the Format Painter button in the toolbar. It may look like a paintbrush icon. +
      • +
    • + The cursor will change to a paintbrush icon. Click and drag the cursor over the text you want to apply the copied format. +
      • +
    • + Release the mouse button to apply the format. +
      • +
    +

    + Using the format painter in a rich text editor can save you time when formatting a large document, You can quickly + copy and apply formatting + to multiple sections. + It's a helpful tool for anyone who works with text editing regularly, such as writers, editors, and content creators. +

    +
    +
    +
    +
    +
    +
    +
    + + + + + + + + + +
    +
    Allowed Formats
    +
    + +
    +
    +
    Denied Formats
    +
    + +
    +
    +
    +
    +
    +

    This demo demonstrates the Format Painter feature of the Rich Text Editor control. With Format Painter, copy and apply styles from one content to another.

    +
    + +
    +

    The Format Painter feature allows you to copy the formats and apply them to content without formatting thus saving time to reformat the content.

    +
      +
    • + Format painter can be accessed via the toolbar or the keyboard shortcuts. +
      • +
    • + The sticky mode can be enabled by double-clicking the toolbar button, and it can be utilized to apply a format to multiple locations. +
      • +
    +

    Keyboard Shortcut

    +
      +
    • + CTRL + SHIFT + C - Copy the selection format or current range. +
      • +
    • + CTRL + SHIFT + V - Paint the copied format. +
      • +
    • + ESC - Remove the previously copied format. +
      • +
    +

    The following settings are available to customize the format painter in the formatPainterSettings property.

    +
      +

    • Fill the Allowed Formats input with selectors only whose format styles will be allowed. For example:

      • +
        +
      • + span; strong; em; as the input allows only the span, strong, and em format styles to be copied. +
        • +
      +

    • Fill the Denied Formats input with selectors only whose format styles will be explicitly prohibited. For example:

      +
        +
      • + span(important)[title]{background-color,color} as the input will remove only the important class, + title attribute, color, and background-color + of the span element. All other format styles will be copied. +
        • +
      +
      • +
    +

    Injecting Modules:

    +

    The Format Painter feature is segregated as an individual module. To use the format painter import and then inject it into the RichTextEditor.

    +

    + For example, inject the 'FormatPainter' module using RichTextEditor.Inject(HtmlEditor, Toolbar, QuickToolbar, FormatPainter); to use the format painter feature. +

    +
    diff --git a/src/rich-text-editor/format-painter.ts b/src/rich-text-editor/format-painter.ts new file mode 100644 index 00000000..435c9c62 --- /dev/null +++ b/src/rich-text-editor/format-painter.ts @@ -0,0 +1,42 @@ +import { loadCultureFiles } from '../common/culture-loader'; +import { RichTextEditor, HtmlEditor, Toolbar, QuickToolbar, FormatPainter, Link, Image, Table } from "@syncfusion/ej2-richtexteditor"; +import { TextBox, FocusOutEventArgs } from "@syncfusion/ej2-inputs"; + +RichTextEditor.Inject(HtmlEditor, Toolbar, QuickToolbar, FormatPainter ,Table, Link, Image); + +(window as any).default = (): void => { + loadCultureFiles(); + + let formatPainterRTE:RichTextEditor = new RichTextEditor({ + toolbarSettings: { + items: ['FormatPainter','Bold', 'Italic', 'Underline', 'StrikeThrough', + 'FontName', 'FontSize', 'FontColor', 'BackgroundColor', 'SuperScript', 'SubScript', '|', + 'Formats', 'Alignments', 'NumberFormatList', 'BulletFormatList', + 'Outdent', 'Indent', '|', 'CreateTable', 'CreateLink', 'Image', '|', 'Undo', 'Redo','SourceCode', 'FullScreen'] + }} + ); + formatPainterRTE.appendTo('#formatPainterRTE'); + + let allowedFormatInput: TextBox = new TextBox({ + placeholder: `span; strong; em; sup, sub; code;`, + floatLabelType: 'Never', + cssClass : 'e-outline', + blur: setAllowedFormats + }); + allowedFormatInput.appendTo('#allowedFormatInput'); + + let deniedFormatInput: TextBox = new TextBox({ + placeholder: `span(important)[title]{background-color,color};`, + floatLabelType: 'Never', + cssClass : 'e-outline', + blur: setdeniedFormats + }); + deniedFormatInput.appendTo('#deniedFormatInput'); + + function setAllowedFormats (e: FocusOutEventArgs): void { + formatPainterRTE.formatPainterSettings.allowedFormats = e.value; + } + function setdeniedFormats (e: FocusOutEventArgs): void { + formatPainterRTE.formatPainterSettings.deniedFormats = e.value; + } +}; \ No newline at end of file diff --git a/src/rich-text-editor/insert-emoticons.html b/src/rich-text-editor/insert-emoticons.html index 0d524b5b..a4ed8686 100644 --- a/src/rich-text-editor/insert-emoticons.html +++ b/src/rich-text-editor/insert-emoticons.html @@ -220,9 +220,6 @@ .highcontrast .e-toolbar .e-toolbar-items .e-toolbar-item .e-tbar-btn.e-btn .e-tbar-btn-text { padding-right: 8px; } - .e-dialog .e-dlg-content { - padding: 0px 0px 0px 18px; - } .e-rte-emoticon-tbar-section .char_block { width: 30px; diff --git a/src/rich-text-editor/mention-integration.html b/src/rich-text-editor/mention-integration.html index acb74210..f0c8cbcc 100644 --- a/src/rich-text-editor/mention-integration.html +++ b/src/rich-text-editor/mention-integration.html @@ -12,11 +12,11 @@
    -

    This example shows how to integrate @mention component within Rich Text Editor component. Type @ character and select a user from the suggestion list.

    +

    This example shows how to integrate @mention control within Rich Text Editor control. Type @ character and select a user from the suggestion list.

    -

    The @Mention is a component used to display a list of items that users can select or tag from the suggested list. In this demo, configured the following properties with popup dimensions.

    +

    The @Mention is a control used to display a list of items that users can select or tag from the suggested list. In this demo, configured the following properties with popup dimensions.

    • allowSpaces - Allows to search a word with space.
    • suggestionCount - Control the items in suggestion list.
      • diff --git a/src/rich-text-editor/online-html-editor.html b/src/rich-text-editor/online-html-editor.html index efed84fd..44a1e7e1 100644 --- a/src/rich-text-editor/online-html-editor.html +++ b/src/rich-text-editor/online-html-editor.html @@ -131,9 +131,6 @@ { padding:0px; } - .e-splitter.e-splitter-horizontal .e-pane.e-pane-horizontal, .e-splitter.e-splitter-vertical .e-pane.e-pane-horizontal { - min-width: 400px !important; - } .fabric-dark .CodeMirror-gutters, .fabric-dark .CodeMirror { background-color: #201F1F; color: #fff; diff --git a/src/rich-text-editor/online-html-editor.ts b/src/rich-text-editor/online-html-editor.ts index fcb2708b..b6618ed8 100644 --- a/src/rich-text-editor/online-html-editor.ts +++ b/src/rich-text-editor/online-html-editor.ts @@ -2,7 +2,7 @@ import { loadCultureFiles } from '../common/culture-loader'; /** * RichTextEditor Online Html Editor sample */ -import { createElement } from '@syncfusion/ej2-base'; +import { createElement, Browser } from '@syncfusion/ej2-base'; import { RichTextEditor, Toolbar, Link, Image, Count, HtmlEditor, QuickToolbar, ToolbarType, Table } from '@syncfusion/ej2-richtexteditor'; RichTextEditor.Inject(Toolbar, Link, Image, Count, HtmlEditor, QuickToolbar, Table); import { Splitter } from '@syncfusion/ej2-layouts'; @@ -22,7 +22,8 @@ import 'codemirror/mode/htmlmixed/htmlmixed.js'; splitObj = new Splitter({ height: '450px', width: '100%', resizing: onResizing, - paneSettings: [{ resizable: true, size: '50%',min: '60px' }, {}], + paneSettings: [{ resizable: true, size: '50%',min: '200px' }, {min: '60px'}], + created: updateOrientation, }); splitObj.appendTo('#horizontal'); @@ -93,5 +94,11 @@ import 'codemirror/mode/htmlmixed/htmlmixed.js'; lineWrapping: true, }); } + function updateOrientation(): void { + if (Browser.isDevice) { + splitObj.orientation = 'Vertical'; + (document.body.querySelector('.heading') as HTMLElement).style.width = 'auto'; + } + } }; diff --git a/src/rich-text-editor/resize-editor.ts b/src/rich-text-editor/resize-editor.ts index dbc0e90c..964a4560 100644 --- a/src/rich-text-editor/resize-editor.ts +++ b/src/rich-text-editor/resize-editor.ts @@ -13,4 +13,4 @@ RichTextEditor.Inject(Toolbar, Link, Image, HtmlEditor, QuickToolbar, Resize); height: 250 }); defaultRTE.appendTo('#defaultRTE'); -}; \ No newline at end of file +}; diff --git a/src/rich-text-editor/sample.json b/src/rich-text-editor/sample.json index 8608b43a..81846b05 100644 --- a/src/rich-text-editor/sample.json +++ b/src/rich-text-editor/sample.json @@ -3,6 +3,7 @@ "directory": "rich-text-editor", "category": "File Viewers & Editors", "ftName": "wysiwyg-rich-text-editor", + "type": "update", "samples": [{ "url": "tools", "name": "Overview", @@ -45,13 +46,6 @@ "category": "Rich Text Editor", "api": { "RichTextEditor": ["Inject", "pasteCleanupSettings", "appendTo"], "PasteCleanupSettings": ["prompt", "plainText", "keepFormat", "deniedTags", "deniedAttrs", "allowedStyleProps"] } }, - { - "url": "mention-integration", - "name": "Mention Integration", - "description": "This demo explains the mention integration using the Rich Text Editor component with minimum configuration.", - "category": "Rich Text Editor", - "api": { "RichTextEditor": ["Inject", "actionBegin", "appendTo"] } - }, { "url": "iframe", "name": "IFrame", @@ -136,6 +130,21 @@ "category": "Rich Text Editor", "api": { "RichTextEditor": ["Inject", "actionComplete", "saveInterval","change", "toolbarSettings", "appendTo"] } }, + { + "url": "mention-integration", + "name": "@ Mention", + "description": "This demo explains the mention integration using the Rich Text Editor control with minimum configuration.", + "category": "Mention Integration", + "api": { "RichTextEditor": ["Inject", "actionBegin", "appendTo"] } + }, + { + "url": "smart-suggestion", + "name": "Smart Suggestion", + "description": "This demo explains the custom text formatting within the Rich Text Editor using the mention control", + "category": "Mention Integration", + "type": "new", + "api": { "RichTextEditor": ["Inject", "actionBegin", "appendTo"] } + }, { "url": "types", "name": "Type", diff --git a/src/rich-text-editor/smart-suggestion.html b/src/rich-text-editor/smart-suggestion.html new file mode 100644 index 00000000..a6d5657f --- /dev/null +++ b/src/rich-text-editor/smart-suggestion.html @@ -0,0 +1,280 @@ +
      +
      +
      +
      +
      + +
      +
      +
      +
      +

      This example demonstrates how to easily apply formatting or insert media and tables in the Rich Text Editor content using the Mention control. To use it, simply type the slash (/) key in the editor and select the desired format from the suggestion list that appears.

      +
      + +
      +

      The @mention control is integrated into the Rich Text Editor and shows the suggestion list when the slash (/) key is pressed in an editor and applies suggested formats. To achieve this, the sample is customized for the Mention and Rich Text Editor.

      +
        +
      • Prevent the @mention default selection action by setting the args.cancel as true at the select event.
        • +
      • Get the command name from the Mention control, select an event, and pass it to the public method executeCommand to perform the specified formats on the selected text in an editor.
        • +
      +

      The following formats are shown in the mention suggestion list; apply them in an editor.

      +
        +
      • Basic blocks - The Rich Text Editor supports basic text formatting blocks, including paragraph, headings, code,quotation, lists, and table making it easier for users to structure their content. When a user selects a basic block format, it will be applied to the next line or paragraph.
        • +
      • Inline formats - The Rich Text Editor supports inline formatting, allowing you to add emojis to the specific text within the content.
        • +
      • Media formats - The Rich Text Editor also supports media formats, including image, video, and audio making it an efficient tool for the content creation.
        • +
      +
      + + + diff --git a/src/rich-text-editor/smart-suggestion.ts b/src/rich-text-editor/smart-suggestion.ts new file mode 100644 index 00000000..2205ecce --- /dev/null +++ b/src/rich-text-editor/smart-suggestion.ts @@ -0,0 +1,211 @@ +import { loadCultureFiles } from '../common/culture-loader'; +/** + * Rich Text Editor smart suggestion + */ +import { RichTextEditor, Toolbar, Link, Image, Table, Audio, Video, HtmlEditor, QuickToolbar, NodeSelection, DialogType } from '@syncfusion/ej2-richtexteditor'; +import { Mention, SelectEventArgs } from '@syncfusion/ej2-dropdowns'; +import { Dialog } from '@syncfusion/ej2-popups'; +RichTextEditor.Inject(Toolbar, Link, Image, Table, Audio, Video, HtmlEditor, QuickToolbar); + +(window as any).default = (): void => { + loadCultureFiles(); + + let formatList: { [key: string]: Object }[] = [ + { formatName: "Text", command: "P", formatType: "Basic blocks", icon: "e-btn-icon e-text e-icons", description: "Writing with paragraphs"}, + { formatName: "Quotation", command: "BlockQuote", formatType: "Basic blocks", icon: "e-icons block-view", description: "Insert a quote or citation" }, + { formatName: "Heading 1", command: "H1", formatType: "Basic blocks", icon: "e-icons h1-view", description: "Use this for a top level heading"}, + { formatName: "Heading 2", command: "H2", formatType: "Basic blocks", icon: "e-icons h2-view", description: "Use this for key sections"}, + { formatName: "Heading 3", command: "H3", formatType: "Basic blocks", icon: "e-icons h3-view",description: "Use this for sub sections and group headings" }, + { formatName: "Heading 4", command: "H4", formatType: "Basic blocks", icon: "e-icons h4-view", description: "Use this for deep headings"}, + { formatName: "Numbered list", command: "OL", formatType: "Basic blocks", icon: "e-icons e-list-ordered icon", description: "Create an ordered list"}, + { formatName: "Bulleted list", command: "UL", formatType: "Basic blocks", icon: "e-icons e-list-unordered icon", description: "Create an unordered list"}, + { formatName: "Table", command: "CreateTable", formatType: "Basic blocks",icon: "e-icons e-table icon", description: "Insert a table"}, + { formatName: "Emoji", command: "Emoji", formatType: "Inline", icon: "e-icons emoji",description: "Use emojis to express ideas and emoticons"}, + { formatName: "Image", command: "Image", formatType: "Media", icon: "e-icons e-image icon", description: "Add image to your page"}, + { formatName: "Audio", command: "Audio", formatType: "Media", icon: "e-icons e-audio icon", description: "Add audio to your page"}, + { formatName: "Video", command: "Video", formatType: "Media", icon: "e-icons e-video icon", description: "Add video to your page"}, + ]; + + let mentionObj: Mention; + let saveSelection: NodeSelection; + let selection: NodeSelection = new NodeSelection(); + + let formatRTE: RichTextEditor = new RichTextEditor({ + toolbarSettings: { + items: ['Bold', 'Italic', 'Underline', 'StrikeThrough', + 'FontName', 'FontSize', 'FontColor', 'BackgroundColor', + 'LowerCase', 'UpperCase', 'SuperScript', 'SubScript', '|', + 'Formats', 'Alignments', 'NumberFormatList', 'BulletFormatList', + 'Outdent', 'Indent', '|', 'CreateTable', 'CreateLink', 'Image', + 'SourceCode', 'FullScreen', '|', 'Undo', 'Redo'] + }, + placeholder: 'Type "/" and choose format.', + actionBegin: (args) => { + if (args.requestType === 'EnterAction') { + if (mentionObj.element.classList.contains("e-popup-open")) { + args.cancel = true; + } + } + } + }); + formatRTE.appendTo('#MentionInlineFormat'); + + // begins the process of inserting emoticons. + + let dialogContent: string = '
      '; + let dialog: Dialog = new Dialog({ + header: 'Custom Emoticons', + content: dialogContent, + target: document.getElementById('mentionFormatIntegration'), + isModal: true, + width: '43%', + visible: false, + overlayClick: dialogOverlay, + buttons: [ + { buttonModel: { content: 'Insert', isPrimary: true }, click: onInsert }, + { buttonModel: { content: 'Cancel' }, click: dialogOverlay } + ], + created: onDialogCreate, + open: onOpen + }); + dialog.appendTo('#emojiDialog'); + + function dialogOverlay(): void { + let activeElement: HTMLElement = dialog.element.querySelector('.char_block.e-active'); + if (activeElement) { + activeElement.classList.remove('e-active'); + } + dialog.hide(); + } + + function onOpen() { + let emojiElement : HTMLElement = document.getElementById("rteEmoticons-smiley"); + if(!emojiElement.children[0].classList.contains('e-active')){ + emojiElement.children[0].classList.add('e-active'); + } + } + + function beforeApplyFormat(isBlockFormat: boolean) { + let range1: Range = formatRTE.getRange(); + let node: Node = formatRTE.formatter.editorManager.nodeSelection.getNodeCollection(range1)[0]; + let blockNewLine = !(node.parentElement.innerHTML.replace(/ |
      /g, '').trim() == '/' || node.textContent.trim().indexOf('/')==0); + let blockNode: Node; + let startNode:Node = node; + if (blockNewLine && isBlockFormat) { + while (startNode != formatRTE.inputElement) { + blockNode = startNode; + startNode = startNode.parentElement; + } + } + let startPoint = range1.startOffset; + while(formatRTE.formatter.editorManager.nodeSelection.getRange(document).toString().indexOf("/") ==-1 ){ + formatRTE.formatter.editorManager.nodeSelection.setSelectionText(document, node, node, startPoint, range1.endOffset); + startPoint--; + } + let range2: Range = formatRTE.getRange(); + let node2: Node = formatRTE.formatter.editorManager.nodeCutter.GetSpliceNode(range2, node as HTMLElement); + let previouNode: Node = node2.previousSibling; + node2.parentNode.removeChild(node2); + if(blockNewLine && isBlockFormat){ + let defaultTag: HTMLElement = document.createElement('p'); + defaultTag.innerHTML = '
      '; + blockNode.parentNode.insertBefore(defaultTag, blockNode.nextSibling); + selection.setCursorPoint(document, blockNode.nextSibling as Element, 0); + } else if(previouNode) { + selection.setCursorPoint(document, previouNode as Element, previouNode.textContent.length); + } + } + + function onInsert(): void { + let activeElement: HTMLElement = dialog.element.querySelector('.char_block.e-active'); + if (activeElement) { + if (formatRTE.formatter.getUndoRedoStack().length === 0) { + formatRTE.formatter.saveData(); + } + beforeApplyFormat(false); + let range: Range =formatRTE.getRange(); + selection.setCursorPoint(document, range.startContainer as Element, range.startOffset); + formatRTE.executeCommand('insertText', activeElement.textContent); + formatRTE.formatter.saveData(); + formatRTE.formatter.enableUndo(formatRTE); + } + dialogOverlay(); + } + + function onDialogCreate(): void { + let dialogContent: HTMLElement = document.getElementById('emojiDialog'); + dialogContent.onclick = (e: MouseEvent) => { + let target: Element = e.target as Element; + let activeElement: HTMLElement = dialog.element.querySelector('.char_block.e-active'); + if (target.classList.contains('char_block')) { + target.classList.add('e-active'); + if (activeElement) { + activeElement.classList.remove('e-active'); + } + } + }; + } + + // End the process of inserting emoticons. + + + // Initialize Mention control. + + mentionObj = new Mention({ + popupHeight: '290px', + popupWidth: '320px', + dataSource: formatList, + mentionChar : '/', + itemTemplate:'
      ${formatName}${description}
      ', + fields: { text: 'formatName', groupBy: 'formatType' }, + target: formatRTE.inputElement, + allowSpaces: true, + beforeOpen: function () { + saveSelection = selection.save(selection.getRange(document), document); + }, + filtering: function () { + saveSelection = selection.save(selection.getRange(document), document); + }, + select: applyCommand + }); + mentionObj.appendTo('#mentionEditor'); + + function applyCommand(args: SelectEventArgs ){ + args.cancel = true; + formatRTE.focusIn(); + saveSelection.restore(); + if (!((args.itemData as { [key: string]: Object }).formatType == 'Inline')) { + beforeApplyFormat(true); + } + if ((args.itemData as { [key: string]: Object }).command == 'OL') { + formatRTE.executeCommand('insertOrderedList'); + } + else if ((args.itemData as { [key: string]: Object }).command == 'UL') { + formatRTE.executeCommand('insertUnorderedList'); + } + else if ((args.itemData as { [key: string]: Object }).command == 'CreateTable') { + mentionObj.hidePopup(); + formatRTE.showDialog(DialogType.InsertTable); + } + else if ((args.itemData as { [key: string]: Object }).command == 'Image') { + mentionObj.hidePopup(); + formatRTE.showDialog(DialogType.InsertImage); + } + else if ((args.itemData as { [key: string]: Object }).command == 'Audio') { + mentionObj.hidePopup(); + formatRTE.showDialog(DialogType.InsertAudio); + } + else if ((args.itemData as { [key: string]: Object }).command == 'Video') { + mentionObj.hidePopup(); + formatRTE.showDialog(DialogType.InsertVideo); + } + else if ((args.itemData as { [key: string]: Object }).command == 'Emoji') { + dialog.element.style.display = 'block'; + mentionObj.hidePopup(); + dialog.show(); + } + else { + formatRTE.executeCommand('formatBlock', (args.itemData as { [key: string]: Object }).command); + } + } +} diff --git a/src/rich-text-editor/tribute.html b/src/rich-text-editor/tribute.html deleted file mode 100644 index f6f232e3..00000000 --- a/src/rich-text-editor/tribute.html +++ /dev/null @@ -1,116 +0,0 @@ -
      -
      -
      -
      -
      -
      -
      -
      -
      -

      This sample demonstrates how to integrate the third-party library `Tribute JS` (Mentions library) into the Rich Text Editor. Type @ to open autocomplete popup with employee list.

      -
      -
      -

      The Rich Text Editor allows you to integrate the third-party libraries such as Tribute JS or At JS for mentions. If you want to tag or address someone directly during a conversation, the mentions library will be helpful. Type @ to show autocomplete - popup with a list of matching items based on the provided key-value pair.

      - -

      For example, type '@' in the above sample to show the employee list with their mail IDs in the autocomplete popup.

      - -
      - \ No newline at end of file diff --git a/src/rich-text-editor/tribute.ts b/src/rich-text-editor/tribute.ts deleted file mode 100644 index 529970c1..00000000 --- a/src/rich-text-editor/tribute.ts +++ /dev/null @@ -1,38 +0,0 @@ -import { loadCultureFiles } from '../common/culture-loader'; -/** - * Rich Text Editor tribute js sample - */ -import { RichTextEditor, Toolbar, Link, Image, Count, HtmlEditor, QuickToolbar } from '@syncfusion/ej2-richtexteditor'; -RichTextEditor.Inject(Toolbar, Link, Image, Count, HtmlEditor, QuickToolbar); -declare const Tribute: any; - -(window as any).default = (): void => { - loadCultureFiles(); - let element: HTMLScriptElement = document.createElement('script'); - element.src = 'https://cdnjs.cloudflare.com/ajax/libs/tributejs/3.7.3/tribute.min.js'; - document.head.appendChild(element); - element.onload = (): void => { - let defaultRTE: RichTextEditor = new RichTextEditor({ - placeholder: 'Type @ to get the employee list with their email IDs.', - actionBegin: actionBeginEvent - }); - defaultRTE.appendTo('#AtRTE'); - - function actionBeginEvent(args: any) { - if (args.requestType === 'EnterAction') { - args.cancel = true; - } - } - /* tslint:disable */ - var tribute = new Tribute({ - /* tslint:enable */ - values: [ - { key: 'Phil Heartman', value: 'pheartman' }, - { key: 'Gordon Ramsey', value: 'gramsey' }, - { key: 'Jordan Humphreys', value: 'jhumphreys' }, - { key: 'Howard Johnson', value: 'hjohnson' } - ] - }); - tribute.attach(defaultRTE.inputElement); - }; -}; diff --git a/src/schedule/context-menu.ts b/src/schedule/context-menu.ts index 4f1705e0..5b24256d 100644 --- a/src/schedule/context-menu.ts +++ b/src/schedule/context-menu.ts @@ -82,6 +82,11 @@ Schedule.Inject(Day, Week, WorkWeek, Month, Agenda); menuObj.hideItems(['Add', 'AddRecurrence', 'Today', 'EditRecurrenceEvent', 'DeleteRecurrenceEvent'], true); } return; + } else if ((selectedTarget.classList.contains('e-work-cells') || selectedTarget.classList.contains('e-all-day-cells')) && + !selectedTarget.classList.contains('e-selected-cell')) { + removeClass([].slice.call(scheduleObj.element.querySelectorAll('.e-selected-cell')), 'e-selected-cell'); + selectedTarget.classList.add('e-selected-cell'); + selectedTarget.setAttribute('aria-selected', 'true'); } menuObj.hideItems(['Save', 'Delete', 'EditRecurrenceEvent', 'DeleteRecurrenceEvent'], true); menuObj.showItems(['Add', 'AddRecurrence', 'Today'], true); diff --git a/src/schedule/date-header-template.html b/src/schedule/date-header-template.html index 828ceaa5..50a65ef0 100644 --- a/src/schedule/date-header-template.html +++ b/src/schedule/date-header-template.html @@ -31,6 +31,10 @@ font-size: 11px; } + .schedule-date-header-template.e-schedule.e-rtl .e-month-view .weather-image { + float: left; + } + .schedule-date-header-template.e-schedule .e-month-view .weather-image { float: right; margin: -20px 2px 0 0; diff --git a/src/schedule/external-drag-drop.ts b/src/schedule/external-drag-drop.ts index 1a470031..95909439 100644 --- a/src/schedule/external-drag-drop.ts +++ b/src/schedule/external-drag-drop.ts @@ -107,6 +107,7 @@ Schedule.Inject(TimelineViews, TimelineMonth, Resize, DragAndDrop); nodeDragStop: onTreeDragStop, nodeDragging: onTreeDrag, nodeDragStart: onTreeDragStart, + nodeSelecting: onItemSelecting, nodeTemplate: '#treeTemplate', cssClass: 'treeview-external-drag', dragArea: '.content-wrapper' @@ -116,6 +117,10 @@ Schedule.Inject(TimelineViews, TimelineMonth, Resize, DragAndDrop); let isTreeItemDropped: boolean = false; let draggedItemId: string = ''; + function onItemSelecting(args: any): void { + args.cancel = true; + } + function onTreeDrag(event: any): void { if (scheduleObj.isAdaptive) { let classElement: HTMLElement = scheduleObj.element.querySelector('.e-device-hover'); diff --git a/src/schedule/overview.html b/src/schedule/overview.html index ade67ae3..882b825c 100644 --- a/src/schedule/overview.html +++ b/src/schedule/overview.html @@ -1,46 +1,37 @@
      -
      -
      -
      -
      Scheduler - Overview Functionalities
      -
      -
      - - -
      -
      -
      - -
      -
      - -
      -
      - -
      -
      +
      + + UTC + + Time +
      + +
      +
      -
      -
      -
      -
      -
      -
      - -
      -
      + + + +
      -
        +
          +
          +
          + +
          +
          + +
          +
          @@ -57,14 +48,6 @@
          -
          -
          - -
          -
          - -
          -
          @@ -78,7 +61,7 @@
          - +
          @@ -86,7 +69,7 @@
          - +
          @@ -94,7 +77,7 @@
          - +
          @@ -102,7 +85,7 @@
          - +
          @@ -134,7 +117,15 @@
          - + +
          +
          +
          +
          + +
          +
          +
          @@ -145,8 +136,9 @@
          -

          This JavaScript Scheduler example demonstrates the overview of Javascript Scheduler with its overall features. Use the toolbar buttons - to play with Scheduler functionalities.

          +

          This JavaScript + Scheduler example demonstrates the overview of Javascript Scheduler with its overall features. Use the + toolbar buttons to play with Scheduler functionalities.

          The Javascript Scheduler is a fully-features calendar component that is used to manage appointments with multiple @@ -157,404 +149,111 @@ Resources, Grouping, Timezone, Timescale, etc... are used along with multiple resources.

          - - - - - - - + \ No newline at end of file diff --git a/src/schedule/overview.ts b/src/schedule/overview.ts index 9341f971..0a8c9f32 100644 --- a/src/schedule/overview.ts +++ b/src/schedule/overview.ts @@ -2,17 +2,17 @@ import { loadCultureFiles } from '../common/culture-loader'; import { addClass, closest, extend, isNullOrUndefined, remove, removeClass, Browser, Internationalization, compile } from '@syncfusion/ej2-base'; -import { Button, Switch, ChangeEventArgs as SwitchEventArgs } from '@syncfusion/ej2-buttons'; +import { Button, Switch,CheckBox, ChangeEventArgs as SwitchEventArgs } from '@syncfusion/ej2-buttons'; import { TimePicker, ChangeEventArgs as TimeEventArgs } from '@syncfusion/ej2-calendars'; import { DataManager, Predicate, Query } from '@syncfusion/ej2-data'; import { DropDownList, MultiSelect, ChangeEventArgs, CheckBoxSelection, MultiSelectChangeEventArgs } from '@syncfusion/ej2-dropdowns'; -import { TextBox, Uploader, SelectedEventArgs } from '@syncfusion/ej2-inputs'; +import { Uploader, SelectedEventArgs } from '@syncfusion/ej2-inputs'; import { - ContextMenu, BeforeOpenCloseMenuEventArgs, Toolbar, ClickEventArgs, MenuEventArgs as ContextMenuEventArgs + ContextMenu, BeforeOpenCloseMenuEventArgs, Toolbar, ClickEventArgs, MenuEventArgs as ContextMenuEventArgs, AppBar } from '@syncfusion/ej2-navigations'; import { - Schedule, Day, Week, WorkWeek, Month, Year, Agenda, TimelineViews, TimelineMonth, TimelineYear, EJ2Instance, Resize, DragAndDrop, - ICalendarExport, ICalendarImport, Print, ExcelExport, ResourcesModel, CurrentAction, CellClickEventArgs, PopupOpenEventArgs, Timezone + Schedule, Day, Week, WorkWeek, Month, Year, Agenda, TimelineViews, TimelineMonth, TimelineYear, Resize, DragAndDrop, + ICalendarExport, ICalendarImport, Print, ExcelExport, ResourcesModel, CellClickEventArgs, Timezone } from '@syncfusion/ej2-schedule'; import { DropDownButton, MenuEventArgs } from '@syncfusion/ej2-splitbuttons'; import { tz } from 'moment-timezone'; @@ -30,88 +30,63 @@ Schedule.Inject(Day, Week, WorkWeek, Month, Year, Agenda, TimelineViews, Timelin loadCultureFiles(); interface TemplateFunction extends Window { - getHeaderDetails?: Function; - getHeaderStyles?: Function; - getEventType?: Function; - getResourceData?: Function; - getDateHeaderText?: Function; + getDateHeaderDate?: Function; + getDateHeaderDay?: Function; getWeather?: Function; } let intlObj: Internationalization = new Internationalization(); - (window as TemplateFunction).getDateHeaderText = (value: Date) => { - return intlObj.formatDate(value, { skeleton: 'Ed' }); + (window as TemplateFunction).getDateHeaderDay = (value: Date) => { + return intlObj.formatDate(value, { skeleton: 'E' }); + }; + (window as TemplateFunction).getDateHeaderDate = (value: Date) => { + return intlObj.formatDate(value, { skeleton: 'd' }); }; (window as TemplateFunction).getWeather = (value: Date) => { switch (value.getDay()) { case 0: - return '
          25°C
          '; + return ''; case 1: - return '
          18°C
          '; + return ''; case 2: - return '
          10°C
          '; + return ''; case 3: - return '
          16°C
          '; + return ''; case 4: - return '
          8°C
          '; + return ''; case 5: - return '
          27°C
          '; + return ''; case 6: - return '
          17°C
          '; + return ''; default: return null; } }; - (window as TemplateFunction).getResourceData = (data: Record) => { - let resources: ResourcesModel = scheduleObj.getResourceCollections().slice(-1)[0]; - let resourceData: Record = - (resources.dataSource as Record[]).filter((resource: Record) => - resource.CalendarId === data.CalendarId)[0] as Record; - return resourceData; - }; - - (window as TemplateFunction).getHeaderDetails = (eventObj: { [key: string]: Date }) => { - return intlObj.formatDate(eventObj.StartTime, { type: 'date', skeleton: 'full' }) + ' (' + - intlObj.formatDate(eventObj.StartTime, { skeleton: 'hm' }) + ' - ' + - intlObj.formatDate(eventObj.EndTime, { skeleton: 'hm' }) + ')'; - }; - - (window as TemplateFunction).getHeaderStyles = (data: Record) => { - if (data.elementType === 'event') { - let resourceData: Record = (window as TemplateFunction).getResourceData(data); - let calendarColor: string = '#3f51b5'; - if (resourceData) { - calendarColor = (resourceData.CalendarColor).toString(); - } - return 'background:' + calendarColor + '; color: #FFFFFF;'; - } else { - return 'align-items: center; color: #919191;'; - } - }; - - (window as TemplateFunction).getEventType = (data: { [key: string]: Date }) => { - let resourceData: Record = (window as TemplateFunction).getResourceData(data); - let calendarText: string = ''; - if (resourceData) { - calendarText = resourceData.CalendarText.toString(); - } - return calendarText; - }; + const defaultAppBarObj: AppBar = new AppBar({ + colorMode: 'Primary' + }); + defaultAppBarObj.appendTo('#defaultAppBar'); + let liveTimeInterval: NodeJS.Timeout | number; let updateLiveTime: Function = (): void => { let scheduleTimezone: string = scheduleObj ? scheduleObj.timezone : 'Etc/GMT'; - let timeBtn: Element = document.querySelector('.schedule-overview #timeBtn'); - if (timeBtn) { - timeBtn.innerHTML = '' + - new Date().toLocaleTimeString('en-US', { timeZone: scheduleTimezone }); + let timeBtn: Element = document.querySelector('.current-time'); + if (!timeBtn) { + return; + } + if (scheduleObj.isAdaptive) { + timeBtn.innerHTML = new Date().toLocaleTimeString('en-US', { hour: '2-digit', minute: '2-digit', timeZone: scheduleTimezone }); + } + else { + timeBtn.innerHTML = new Date().toLocaleTimeString('en-US', { timeZone: scheduleTimezone }); } }; let generateEvents: Function = (): Object[] => { let eventData: Object[] = []; let eventSubjects: string[] = [ - 'Bering Sea Gold', 'Technology', 'Maintenance', 'Meeting', 'Travelling', 'Annual Conference', 'Birthday Celebration', + 'Bering Sea Gold', 'Technology', 'Maintenance', 'Meeting', 'Traveling', 'Annual Conference', 'Birthday Celebration', 'Farewell Celebration', 'Wedding Anniversary', 'Alaska: The Last Frontier', 'Deadliest Catch', 'Sports Day', 'MoonShiners', 'Close Encounters', 'HighWay Thru Hell', 'Daily Planet', 'Cash Cab', 'Basketball Practice', 'Rugby Match', 'Guitar Class', 'Music Lessons', 'Doctor checkup', 'Brazil - Mexico', 'Opening ceremony', 'Final presentation' @@ -167,55 +142,9 @@ Schedule.Inject(Day, Week, WorkWeek, Month, Year, Agenda, TimelineViews, Timelin return overviewEvents; }; - let buttonClickActions: Function = (e: Event) => { - let quickPopup: HTMLElement = closest(e.target as HTMLElement, '.e-quick-popup-wrapper') as HTMLElement; - let getSlotData: Function = (): Record => { - let cellDetails: CellClickEventArgs = scheduleObj.getCellDetails(scheduleObj.getSelectedElements()); - if (isNullOrUndefined(cellDetails)) { - cellDetails = scheduleObj.getCellDetails(scheduleObj.activeCellsData.element); - } - let subject = ((quickPopup.querySelector('#title') as EJ2Instance).ej2_instances[0] as TextBox).value; - let notes = ((quickPopup.querySelector('#notes') as EJ2Instance).ej2_instances[0] as TextBox).value; - let eventObj: Record = {}; - eventObj.Id = scheduleObj.getEventMaxID(); - eventObj.Subject = isNullOrUndefined(subject) ? 'Add title' : subject; - eventObj.StartTime = new Date(+cellDetails.startTime); - eventObj.EndTime = new Date(+cellDetails.endTime); - eventObj.IsAllDay = cellDetails.isAllDay; - eventObj.Description = isNullOrUndefined(notes) ? 'Add notes' : notes; - eventObj.CalendarId = ((quickPopup.querySelector('#eventType') as EJ2Instance).ej2_instances[0] as DropDownList).value; - return eventObj; - }; - if ((e.target as HTMLElement).id === 'add') { - scheduleObj.addEvent(getSlotData()); - } else if ((e.target as HTMLElement).id === 'delete') { - let currentAction: CurrentAction; - if ((scheduleObj.activeEventData.event as { [key: string]: string }).RecurrenceRule) { - currentAction = 'DeleteOccurrence'; - } - scheduleObj.deleteEvent(scheduleObj.activeEventData.event as Record, currentAction); - } else { - let isCellPopup: boolean = quickPopup.firstElementChild.classList.contains('e-cell-popup'); - let eventDetails: Record = isCellPopup ? getSlotData() : - scheduleObj.activeEventData.event as Record; - let currentAction: CurrentAction = isCellPopup ? 'Add' : 'Save'; - if (eventDetails.RecurrenceRule) { - currentAction = 'EditOccurrence'; - } - scheduleObj.openEditor(eventDetails, currentAction, true); - } - scheduleObj.closeQuickInfoPopup(); - }; - let isTimelineView: boolean = false; - let timezoneBtn: Button = new Button({ iconCss: 'e-icons e-time-zone', cssClass: 'title-bar-btn', disabled: true }); - timezoneBtn.appendTo('#timezoneBtn'); - - let timeBtn: Button = new Button({ iconCss: 'e-icons e-clock', cssClass: 'title-bar-btn', disabled: true }); - timeBtn.appendTo('#timeBtn'); - - let printBtn: Button = new Button({ iconCss: 'e-icons e-print', cssClass: 'title-bar-btn' }); + let printBtn: Button = new Button({ iconCss: 'e-icons e-print', cssClass: 'e-inherit' }); printBtn.appendTo('#printBtn'); printBtn.element.onclick = () => { scheduleObj.print(); }; @@ -233,12 +162,14 @@ Schedule.Inject(Day, Week, WorkWeek, Month, Year, Agenda, TimelineViews, Timelin selected: (args: SelectedEventArgs) => scheduleObj.importICalendar((args.event.target).files[0]) }); importObj.appendTo('#icalendar'); + document.querySelector('.calendar-import .e-btn').classList.add('e-inherit'); let exportObj: DropDownButton = new DropDownButton({ items: [ { text: 'iCalendar', iconCss: 'e-icons e-export' }, { text: 'Excel', iconCss: 'e-icons e-export-excel' } ], + cssClass: 'e-inherit', select: (args: MenuEventArgs) => { if (args.item.text === 'Excel') { let exportDatas: Record[] = []; @@ -258,49 +189,43 @@ Schedule.Inject(Day, Week, WorkWeek, Month, Year, Agenda, TimelineViews, Timelin } } }); - exportObj.appendTo('#exporting'); - - let timelineTemplate: string = '
          ' + - '
          Timeline Views
          '; - let allowMultiDrag: string = '
          ' + - '
          Allow Multi Drag
          '; - let groupTemplate: string = '
          ' + - '
          Grouping
          '; - let gridlineTemplate: string = '
          ' + - '
          Gridlines
          '; - let autoHeightTemplate: string = '
          ' + - '
          Row Auto Height
          '; - let tooltipTemplate: string = '
          ' + - '
          Tooltip
          '; + exportObj.appendTo('#exportBtn'); + let timelineTemplate: string = '
          ' + + '
          Timeline Views
          '; + let groupTemplate: string = '
          ' + + '
          Grouping
          '; + let gridlineTemplate: string = '
          ' + + '
          Time Slots
          '; + let autoHeightTemplate: string = '
          ' + + '
          Auto Fit Rows
          '; let toolbarObj: Toolbar = new Toolbar({ height: 70, overflowMode: 'Scrollable', scrollStep: 100, + cssClass: 'overview-toolbar', items: [ - { prefixIcon: 'e-icons e-plus', tooltipText: 'New Event', text: 'New Event' }, - { prefixIcon: 'e-icons e-repeat', tooltipText: 'New Recurring Event', text: 'New Recurring Event' }, + { prefixIcon: 'e-icons e-plus', tooltipText: 'New Event', text: 'New Event', tabIndex: 0 }, + { prefixIcon: 'e-icons e-repeat', tooltipText: 'New Recurring Event', text: 'New Recurring Event', tabIndex: 0 }, { type: 'Separator' }, - { prefixIcon: 'e-icons e-day', tooltipText: 'Day', text: 'Day' }, - { prefixIcon: 'e-icons e-week', tooltipText: 'Week', text: 'Week' }, - { prefixIcon: 'e-icons e-week', tooltipText: 'WorkWeek', text: 'WorkWeek' }, - { prefixIcon: 'e-icons e-month', tooltipText: 'Month', text: 'Month' }, - { prefixIcon: 'e-icons e-month', tooltipText: 'Year', text: 'Year' }, - { prefixIcon: 'e-icons e-agenda-date-range', tooltipText: 'Agenda', text: 'Agenda' }, + { prefixIcon: 'e-icons e-day', tooltipText: 'Day', text: 'Day', tabIndex: 0 }, + { prefixIcon: 'e-icons e-week', tooltipText: 'Week', text: 'Week', tabIndex: 0 }, + { prefixIcon: 'e-icons e-week', tooltipText: 'Work Week', text: 'WorkWeek', tabIndex: 0 }, + { prefixIcon: 'e-icons e-month', tooltipText: 'Month', text: 'Month', tabIndex: 0 }, + { prefixIcon: 'e-icons e-month', tooltipText: 'Year', text: 'Year', tabIndex: 0 }, + { prefixIcon: 'e-icons e-agenda-date-range', tooltipText: 'Agenda', text: 'Agenda', tabIndex: 0 }, { tooltipText: 'Timeline Views', text: 'Timeline Views', template: timelineTemplate }, { type: 'Separator' }, { tooltipText: 'Grouping', text: 'Grouping', template: groupTemplate }, - { tooltipText: 'Gridlines', text: 'Gridlines', template: gridlineTemplate }, - { tooltipText: 'Row Auto Height', text: 'Row Auto Height', template: autoHeightTemplate }, - { tooltipText: 'Tooltip', text: 'Tooltip', template: tooltipTemplate }, - { tooltipText: 'Allow Multi Drag', text: 'Allow Multi Drag', template: allowMultiDrag }, + { tooltipText: 'Time Slots', text: 'Time Slots', template: gridlineTemplate }, + { tooltipText: 'Auto Fit Rows', text: 'Auto Fit Rows', template: autoHeightTemplate }, ], created: () => { - setInterval(() => { updateLiveTime(); }, 1000); + liveTimeInterval = setInterval(() => { updateLiveTime(); }, 1000); - let timelineView: Switch = new Switch({ + let timelineView: CheckBox = new CheckBox({ checked: false, - created: () => { timelineView.element.setAttribute('tabindex', '-1'); }, + created: () => { timelineView.element.setAttribute('tabindex', '0'); }, change: (args: SwitchEventArgs) => { isTimelineView = args.checked; switch (scheduleObj.currentView) { @@ -330,38 +255,25 @@ Schedule.Inject(Day, Week, WorkWeek, Month, Year, Agenda, TimelineViews, Timelin } } }); - timelineView.appendTo('#timeline_views'); - let multiDrag: Switch = new Switch({ - checked: false, - created: () => { multiDrag.element.setAttribute('tabindex', '-1'); }, - change: (args: SwitchEventArgs) => { scheduleObj.allowMultiDrag = args.checked; } - }); - multiDrag.appendTo('#multi_drag'); - let grouping: Switch = new Switch({ + timelineView.appendTo('#timeline-views'); + let grouping: CheckBox = new CheckBox({ checked: true, - created: () => { grouping.element.setAttribute('tabindex', '-1'); }, + created: () => { grouping.element.setAttribute('tabindex', '0'); }, change: (args: SwitchEventArgs) => { scheduleObj.group.resources = args.checked ? ['Calendars'] : []; } }); grouping.appendTo('#grouping'); - let gridlines: Switch = new Switch({ + let timeSlot: CheckBox = new CheckBox({ checked: true, - created: () => { gridlines.element.setAttribute('tabindex', '-1'); }, + created: () => { timeSlot.element.setAttribute('tabindex', '0'); }, change: (args: SwitchEventArgs) => { scheduleObj.timeScale.enable = args.checked; } }); - gridlines.appendTo('#gridlines'); - let rowAutoHeight: Switch = new Switch({ + timeSlot.appendTo('#timeSlot'); + let rowAutoHeight: CheckBox = new CheckBox({ checked: false, - created: () => { rowAutoHeight.element.setAttribute('tabindex', '-1'); }, + created: () => { rowAutoHeight.element.setAttribute('tabindex', '0'); }, change: (args: SwitchEventArgs) => { scheduleObj.rowAutoHeight = args.checked; } }); rowAutoHeight.appendTo('#row_auto_height'); - let tooltip: Switch = new Switch({ - checked: false, - created: () => { tooltip.element.setAttribute('tabindex', '-1'); }, - change: (args: SwitchEventArgs) => { scheduleObj.eventSettings.enableTooltip = args.checked; } - }); - tooltip.appendTo('#tooltip'); - (document.querySelector('#settingsBtn') as HTMLButtonElement).onclick = () => { let settingsPanel: Element = document.querySelector('.overview-content .right-panel'); if (settingsPanel.classList.contains('hide')) { @@ -425,11 +337,11 @@ Schedule.Inject(Day, Week, WorkWeek, Month, Year, Agenda, TimelineViews, Timelin } } }); - toolbarObj.appendTo('#toolbar_options'); + toolbarObj.appendTo('#toolbarOptions'); let settingsBtn: Button = new Button({ iconCss: 'e-icons e-settings', - cssClass: 'overview-toolbar-settings', iconPosition: 'Top' + cssClass: 'e-inherit' }); settingsBtn.appendTo('#settingsBtn'); @@ -439,7 +351,6 @@ Schedule.Inject(Day, Week, WorkWeek, Month, Year, Agenda, TimelineViews, Timelin { CalendarText: 'Birthday', CalendarId: 3, CalendarColor: '#AF27CD' }, { CalendarText: 'Holiday', CalendarId: 4, CalendarColor: '#808000' } ]; - let scheduleObj: Schedule = new Schedule({ width: '100%', height: '100%', @@ -455,53 +366,14 @@ Schedule.Inject(Day, Week, WorkWeek, Month, Year, Agenda, TimelineViews, Timelin textField: 'CalendarText', idField: 'CalendarId', colorField: 'CalendarColor', dataSource: resourceData, query: new Query().where('CalendarId', 'equal', 1) }], - dateHeaderTemplate: '
          ${getDateHeaderText(data.date)}
          ${getWeather(data.date)}', - quickInfoTemplates: { - header: '#header-template', - content: '#content-template', - footer: '#footer-template' - }, + dateHeaderTemplate: '
          ${getDateHeaderDay(data.date)}
          ' + + '${getDateHeaderDate(data.date)}
          ${getWeather(data.date)}', eventSettings: { dataSource: generateEvents() }, - popupOpen: (args: PopupOpenEventArgs) => { - if (args.type === 'QuickInfo' || args.type === 'ViewEventInfo') { - if (!args.target.classList.contains('e-appointment')) { - const titleObj: TextBox = new TextBox({ placeholder: 'Title' }); - titleObj.appendTo(args.element.querySelector('#title') as HTMLElement); - titleObj.focusIn(); - const typeObj: DropDownList = new DropDownList({ - dataSource: resourceData, - placeholder: 'Choose Type', - fields: { text: 'CalendarText', value: 'CalendarId' }, - index: args.data.CalendarId - 1 - }); - typeObj.appendTo(args.element.querySelector('#eventType') as HTMLElement); - const notesObj: TextBox = new TextBox({ placeholder: 'Notes' }); - notesObj.appendTo(args.element.querySelector('#notes') as HTMLElement); - } - - const moreDetailsBtn: HTMLButtonElement = args.element.querySelector('#more-details') as HTMLButtonElement; - if (moreDetailsBtn) { - const moreObj: Button = new Button({ - content: 'More Details', cssClass: 'e-flat', - isPrimary: args.element.firstElementChild.classList.contains('e-event-popup') - }); - moreObj.appendTo(moreDetailsBtn); - moreDetailsBtn.onclick = (e: Event) => { buttonClickActions(e); }; - } - const addBtn: HTMLButtonElement = args.element.querySelector('#add') as HTMLButtonElement; - if (addBtn) { - new Button({ content: 'Add', cssClass: 'e-flat', isPrimary: true }, addBtn); - addBtn.onclick = (e: Event) => { buttonClickActions(e); }; - } - const deleteBtn: HTMLButtonElement = args.element.querySelector('#delete') as HTMLButtonElement; - if (deleteBtn) { - new Button({ content: 'Delete', cssClass: 'e-flat' }, deleteBtn); - deleteBtn.onclick = (e: Event) => { buttonClickActions(e); }; - } - } - }, destroyed: () => { menuObj.destroy(); + if (liveTimeInterval) { + clearInterval(liveTimeInterval as number); + } } }); scheduleObj.appendTo('#scheduler'); @@ -558,6 +430,11 @@ Schedule.Inject(Day, Week, WorkWeek, Month, Year, Agenda, TimelineViews, Timelin menuObj.hideItems(['Add', 'AddRecurrence', 'Today', 'EditRecurrenceEvent', 'DeleteRecurrenceEvent'], true); } return; + } else if ((selectedTarget.classList.contains('e-work-cells') || selectedTarget.classList.contains('e-all-day-cells')) && + !selectedTarget.classList.contains('e-selected-cell')) { + removeClass([].slice.call(scheduleObj.element.querySelectorAll('.e-selected-cell')), 'e-selected-cell'); + selectedTarget.setAttribute('aria-selected', 'true'); + selectedTarget.classList.add('e-selected-cell'); } menuObj.hideItems(['Save', 'Delete', 'EditRecurrenceEvent', 'DeleteRecurrenceEvent'], true); menuObj.showItems(['Add', 'AddRecurrence', 'Today'], true); @@ -603,7 +480,7 @@ Schedule.Inject(Day, Week, WorkWeek, Month, Year, Agenda, TimelineViews, Timelin }, cssClass: 'schedule-context-menu' }); - menuObj.appendTo('#OverViewContextMenu'); + menuObj.appendTo('#overviewContextMenu'); let weekDays: Record[] = [ { text: 'Sunday', value: 0 }, @@ -632,7 +509,6 @@ Schedule.Inject(Day, Week, WorkWeek, Month, Year, Agenda, TimelineViews, Timelin enableSelectionOrder: false, showClearButton: false, showDropDownIcon: true, - popupHeight: 150, value: [1, 2, 3, 4, 5], change: (args: MultiSelectChangeEventArgs) => scheduleObj.workDays = args.value as number[] }); @@ -645,7 +521,6 @@ Schedule.Inject(Day, Week, WorkWeek, Month, Year, Agenda, TimelineViews, Timelin mode: 'CheckBox', showClearButton: false, showDropDownIcon: true, - popupHeight: 150, value: [1], change: (args: MultiSelectChangeEventArgs) => { let resourcePredicate: Predicate; @@ -699,8 +574,7 @@ Schedule.Inject(Day, Week, WorkWeek, Month, Year, Agenda, TimelineViews, Timelin change: (args: ChangeEventArgs) => { scheduleObj.timezone = args.value as string; updateLiveTime(); - document.querySelector('.schedule-overview #timezoneBtn').innerHTML = - '' + args.itemData.text; + document.querySelector('.schedule-overview #timezoneBtn').innerHTML = args.itemData.text; } }); timezone.appendTo('#timezone'); @@ -806,6 +680,23 @@ Schedule.Inject(Day, Week, WorkWeek, Month, Year, Agenda, TimelineViews, Timelin } }, }); - weekNumber.appendTo('#week_number'); + weekNumber.appendTo('#weekNumber'); + let tooltip: DropDownList = new DropDownList({ + dataSource: [ + { Name: 'Off', Value: 'Off' }, + { Name: 'On', Value: 'On' }, + ], + fields: { text: 'Name', value: 'Value' }, + popupHeight: 150, + value: 'Off', + change: (args: ChangeEventArgs) => { + if (args.value === 'Off') { + scheduleObj.eventSettings.enableTooltip = false; + } else { + scheduleObj.eventSettings.enableTooltip = true; + } + }, + }); + tooltip.appendTo('#tooltip'); }; diff --git a/src/schedule/remote-data.ts b/src/schedule/remote-data.ts index b49a95be..99b6d354 100644 --- a/src/schedule/remote-data.ts +++ b/src/schedule/remote-data.ts @@ -11,7 +11,7 @@ Schedule.Inject(Day, Week, WorkWeek, Month, Agenda); (window as any).default = (): void => { loadCultureFiles(); let dataManager: DataManager = new DataManager({ - url: 'https://ej2services.syncfusion.com/production/web-services/api/Schedule', + url: 'https://services.syncfusion.com/js/production/api/schedule', adaptor: new WebApiAdaptor, crossDomain: true }); diff --git a/src/schedule/sample.json b/src/schedule/sample.json index 9bef9dd0..dc8f9c86 100644 --- a/src/schedule/sample.json +++ b/src/schedule/sample.json @@ -3,7 +3,6 @@ "directory": "schedule", "category": "Calendars", "ftName": "scheduler", - "type": "update", "samples": [ { "url": "overview", @@ -518,7 +517,6 @@ "name": "Date-wise Grouping ", "category": "Resource Grouping", "description": "This demo shows how to group multiple resources by date in the JS Scheduler. The resource row is rendered under each date in the header.", - "type": "update", "api": { "Schedule": [ "width", diff --git a/src/slider/azure-pricing.html b/src/slider/azure-pricing.html index 27a058ad..a8dd56b8 100644 --- a/src/slider/azure-pricing.html +++ b/src/slider/azure-pricing.html @@ -304,6 +304,9 @@ .fabric-dark .pricing-slider, .fabric-dark #pricing-slider .label-text, .fabric-dark #pricing-slider .sub-heading, + .fluent-dark .pricing-slider, + .fluent-dark #pricing-slider .label-text, + .fluent-dark #pricing-slider .sub-heading, .tailwind-dark .pricing-slider, .tailwind-dark #pricing-slider .label-text, .tailwind-dark #pricing-slider .sub-heading, @@ -339,6 +342,12 @@ .fabric-dark #StorgeDialog, .fabric-dark #CloudDialog, .fabric-dark #processorDialog, + .fluent-dark #dollar, + .fluent-dark #value, + .fluent-dark #dialog-header, + .fluent-dark #StorgeDialog, + .fluent-dark #CloudDialog, + .fluent-dark #processorDialog, .bootstrap-dark #dollar, .bootstrap-dark #value, .bootstrap-dark #dialog-header, @@ -365,6 +374,7 @@ .bootstrap-dark #pricing-slider .row, .bootstrap5-dark #pricing-slider .row, .fabric-dark #pricing-slider .row, + .fluent-dark #pricing-slider .row, .material-dark #pricing-slider .row { border: 1px solid #969696; } @@ -374,6 +384,7 @@ .bootstrap-dark #cloud-right-pane, .bootstrap5-dark #cloud-right-pane, .fabric-dark #cloud-right-pane, + .fluent-dark #cloud-right-pane, .material-dark #cloud-right-pane { border-left: 1px solid #969696; } @@ -384,6 +395,8 @@ .material-dark #pricing-slider #cloud-right-pane .btn-size, .fabric-dark #cloud-slider-text, .fabric-dark #pricing-slider #cloud-right-pane .btn-size, + .fluent-dark #cloud-slider-text, + .fluent-dark #pricing-slider #cloud-right-pane .btn-size, .bootstrap-dark #cloud-slider-text, .bootstrap-dark #pricing-slider #cloud-right-pane .btn-size, .bootstrap5-dark #cloud-slider-text, @@ -398,6 +411,7 @@ .bootstrap-dark #processor, .bootstrap5-dark #processor, .fabric-dark #processor, + .fluent-dark #processor, .material-dark #processor { background-color: #AE80FF; } @@ -407,6 +421,7 @@ .bootstrap-dark #memory, .bootstrap5-dark #memory, .fabric-dark #memory, + .fluent-dark #memory, .material-dark #memory { background-color: #7ED321; } @@ -416,6 +431,7 @@ .bootstrap-dark #storage, .bootstrap5-dark #storage, .fabric-dark #storage, + .fluent-dark #storage, .material-dark #storage { background-color: #61A4EF; } @@ -425,6 +441,7 @@ .bootstrap-dark #cloud-left-pane, .bootstrap5-dark #cloud-left-pane, .fabric-dark #cloud-left-pane, + .fluent-dark #cloud-left-pane, .material-dark #cloud-left-pane { background-color: #1a1a1a; } @@ -434,6 +451,7 @@ .bootstrap-dark #cloud-right-pane, .bootstrap5-dark #cloud-right-pane, .fabric-dark #cloud-right-pane, + .fluent-dark #cloud-right-pane, .material-dark #cloud-right-pane { background-color: #000; } @@ -458,6 +476,10 @@ .fabric-dark #memoryPriceName, .fabric-dark #storgePriceName, .fabric-dark #cloudPriceName, + .fluent-dark #processorPriceName, + .fluent-dark #memoryPriceName, + .fluent-dark #storgePriceName, + .fluent-dark #cloudPriceName, .material-dark #processorPriceName, .material-dark #memoryPriceName, .material-dark #storgePriceName, diff --git a/src/speed-dial/styles.html b/src/speed-dial/styles.html index 0e154e8e..ea14746b 100644 --- a/src/speed-dial/styles.html +++ b/src/speed-dial/styles.html @@ -59,27 +59,27 @@ -moz-osx-font-smoothing: grayscale; } - .speeddial-icon-close:before { - content: "\e700"; + .speeddial-icon-cut:before { + content: "\e70a"; } - .speeddial-icon-house:before { - content: "\e701"; + .speeddial-icon-copy:before { + content: "\e70b"; } - .speeddial-icon-people:before { - content: "\e702"; + .speeddial-icon-paste:before { + content: "\e70c"; } - .speeddial-icon-search:before { - content: "\e703"; + .speeddial-icon-delete:before { + content: "\e70d"; + } + + .speeddial-icon-save:before { + content: "\e70e"; } - .speeddial-icon-message:before { - content: "\e704"; + .speeddial-icon-edit:before { + content: "\e70f"; } - - .speeddial-icon-menu:before { - content: "\e705"; - } - \ No newline at end of file + diff --git a/src/speed-dial/styles.ts b/src/speed-dial/styles.ts index e12db97d..7ef20eee 100644 --- a/src/speed-dial/styles.ts +++ b/src/speed-dial/styles.ts @@ -7,59 +7,70 @@ import { Tooltip } from '@syncfusion/ej2/popups'; let items:SpeedDialItemModel[] = [ { - text:'Home', - iconCss:'speeddial-icons speeddial-icon-house' + text:'Cut', + iconCss:'speeddial-icons speeddial-icon-cut' }, { - text:'Contacts', - iconCss:'speeddial-icons speeddial-icon-people' + text:'Copy', + iconCss:'speeddial-icons speeddial-icon-copy' }, { - text:'Search', - iconCss:'speeddial-icons speeddial-icon-search' + text:'Paste', + iconCss:'speeddial-icons speeddial-icon-paste' }, { - text:'Message', - iconCss:'speeddial-icons speeddial-icon-message' + text:'Delete', + iconCss:'speeddial-icons speeddial-icon-delete' + }, + { + text:'Save', + iconCss: 'speeddial-icons speeddial-icon-save' } ] let itemLabel:SpeedDialItemModel[] = [ { - text:'Home' + text:'Cut' }, { - text:'Contacts' + text:'Copy' }, { - text:'Search' + text:'Paste' }, { - text:'Message' + text:'Delete' + }, + { + text:'Save' } ] let tooltItem:SpeedDialItemModel[] = [ { - title:'Home', - iconCss:'speeddial-icons speeddial-icon-house' + title:'Cut', + iconCss:'speeddial-icons speeddial-icon-cut' }, { - title:'Contacts', - iconCss:'speeddial-icons speeddial-icon-people' + title:'Copy', + iconCss:'speeddial-icons speeddial-icon-copy' }, { - title:'Search', - iconCss:'speeddial-icons speeddial-icon-search' + title:'Paste', + iconCss:'speeddial-icons speeddial-icon-paste' }, { - title:'Message', - iconCss:'speeddial-icons speeddial-icon-message' + title:'Delete', + iconCss:'speeddial-icons speeddial-icon-delete' + }, + { + title:'Save', + iconCss: 'speeddial-icons speeddial-icon-save' } ] let iconLabel:SpeedDial = new SpeedDial( { content:'Edit', - openIconCss:'speeddial-icons speeddial-icon-menu', + openIconCss:'speeddial-icons speeddial-icon-edit', iconPosition:'Left', items:items, target: '#target', @@ -78,8 +89,7 @@ import { Tooltip } from '@syncfusion/ej2/popups'; let labelTooltip:SpeedDial = new SpeedDial( { - openIconCss:'speeddial-icons speeddial-icon-menu', - closeIconCss:'speeddial-icons speeddial-icon-close', + openIconCss:'speeddial-icons speeddial-icon-edit', items:tooltItem, position:'BottomRight', target: '#target', diff --git a/src/spreadsheet/chart.ts b/src/spreadsheet/chart.ts index c791131f..9ca9d1e3 100644 --- a/src/spreadsheet/chart.ts +++ b/src/spreadsheet/chart.ts @@ -41,8 +41,8 @@ import * as dataSource from './chart-data.json'; ] } ], - openUrl: 'https://ej2services.syncfusion.com/production/web-services/api/spreadsheet/open', - saveUrl: 'https://ej2services.syncfusion.com/production/web-services/api/spreadsheet/save', + openUrl: 'https://services.syncfusion.com/js/production/api/spreadsheet/open', + saveUrl: 'https://services.syncfusion.com/js/production/api/spreadsheet/save', created: () => { // Formatting cells dynamically using cellFormat method spreadsheet.cellFormat({ backgroundColor: '#e56590', color: '#fff', fontWeight: 'bold', textAlign: 'center' }, 'A3:E3'); diff --git a/src/spreadsheet/conditional-formatting.ts b/src/spreadsheet/conditional-formatting.ts index baab873d..6a731ba8 100644 --- a/src/spreadsheet/conditional-formatting.ts +++ b/src/spreadsheet/conditional-formatting.ts @@ -56,8 +56,8 @@ import * as dataSource from './conditional-formatting-data.json'; width: 73 }] }, ], - openUrl: 'https://ej2services.syncfusion.com/production/web-services/api/spreadsheet/open', - saveUrl: 'https://ej2services.syncfusion.com/production/web-services/api/spreadsheet/save', + openUrl: 'https://services.syncfusion.com/js/production/api/spreadsheet/open', + saveUrl: 'https://services.syncfusion.com/js/production/api/spreadsheet/save', created: () => { spreadsheet.merge('A1:H1'); spreadsheet.cellFormat({ fontWeight: 'bold', textAlign: 'center' }, 'A2:H2'); diff --git a/src/spreadsheet/default.ts b/src/spreadsheet/default.ts index ebb158bc..7468bd37 100644 --- a/src/spreadsheet/default.ts +++ b/src/spreadsheet/default.ts @@ -26,8 +26,8 @@ import * as dataSource from './default-data.json'; { width: 130 }, { width: 120 } ] }], - openUrl: 'https://ej2services.syncfusion.com/production/web-services/api/spreadsheet/open', - saveUrl: 'https://ej2services.syncfusion.com/production/web-services/api/spreadsheet/save', + openUrl: 'https://services.syncfusion.com/js/production/api/spreadsheet/open', + saveUrl: 'https://services.syncfusion.com/js/production/api/spreadsheet/save', created: (): void => { //Applies cell and number formatting to specified range of the active sheet spreadsheet.cellFormat({ fontWeight: 'bold', textAlign: 'center', verticalAlign: 'middle' }, 'A1:F1'); diff --git a/src/spreadsheet/freeze-pane.ts b/src/spreadsheet/freeze-pane.ts index 22bb3ed7..de85f062 100644 --- a/src/spreadsheet/freeze-pane.ts +++ b/src/spreadsheet/freeze-pane.ts @@ -66,8 +66,8 @@ import * as dataSource from './freeze-pane-data.json'; // Specifies the number of frozen columns frozenColumns: 2 }], - openUrl: 'https://ej2services.syncfusion.com/production/web-services/api/spreadsheet/open', - saveUrl: 'https://ej2services.syncfusion.com/production/web-services/api/spreadsheet/save', + openUrl: 'https://services.syncfusion.com/js/production/api/spreadsheet/open', + saveUrl: 'https://services.syncfusion.com/js/production/api/spreadsheet/save', created: (): void => { spreadsheet.wrap('C2:P2'); spreadsheet.merge('A1:B1'); diff --git a/src/spreadsheet/image.ts b/src/spreadsheet/image.ts index 2b6b2ea3..6a510179 100644 --- a/src/spreadsheet/image.ts +++ b/src/spreadsheet/image.ts @@ -102,8 +102,8 @@ import { Spreadsheet, SheetModel } from '@syncfusion/ej2-spreadsheet'; sheets: sheet, showRibbon: false, showFormulaBar: false, - openUrl: 'https://ej2services.syncfusion.com/production/web-services/api/spreadsheet/open', - saveUrl: 'https://ej2services.syncfusion.com/production/web-services/api/spreadsheet/save', + openUrl: 'https://services.syncfusion.com/js/production/api/spreadsheet/open', + saveUrl: 'https://services.syncfusion.com/js/production/api/spreadsheet/save', //Application level customization created: (): void => { spreadsheet.merge('B2:F2'); diff --git a/src/spreadsheet/locale.json b/src/spreadsheet/locale.json index fc2e8fc6..9298bb73 100644 --- a/src/spreadsheet/locale.json +++ b/src/spreadsheet/locale.json @@ -269,8 +269,16 @@ "NotEqual": "Nicht gleich", "Equal": "Gleich", "Contains": "Enthält", + "NotContains": "Enthält nicht", "EndsWith": "Endet mit", + "NotEndsWith": "Endet nicht mit", "StartsWith": "Beginnt mit", + "NotStartsWith": "Beginnt nicht mit", + "Like": "Wie", + "IsNull": "Null", + "NotNull": "Nicht null", + "IsEmpty": "Leer", + "IsNotEmpty": "Nicht leer", "ClearButton": "Klar", "FilterButton": "Filter", "CancelButton": "Absagen", @@ -531,7 +539,8 @@ "FillWithoutFormatting": "Ohne Formatierung ausfüllen", "CustomFormat": "Benutzerdefinierte Zahlenformate", "CustomFormatPlaceholder": "Geben Sie ein benutzerdefiniertes Format ein oder wählen Sie es aus", - "CustomFormatTypeList": "Typ" + "CustomFormatTypeList": "Typ", + "CellReferenceTypoError": "Wir haben einen Tippfehler in Ihrem Zellbezug gefunden. Möchten Sie diesen Verweis wie folgt korrigieren?" } }, "ar": { @@ -804,8 +813,16 @@ "NotEqual": "غير متساوي", "Equal": "متساوي", "Contains": "يحتوعلى", + "NotContains": "لا يحتوي على", "EndsWith": "ينتهي بـ", + "NotEndsWith": "لا تنتهي بـ", "StartsWith": "ابدا ب", + "NotStartsWith": "لا تبدأ بـ", + "Like": "يحب", + "IsNull": "باطل", + "NotNull": "غير فارغة", + "IsEmpty": "فارغ", + "IsNotEmpty": "ليس فارغًا", "ClearButton": "صافي", "FilterButton": "منقي", "CancelButton": "يلغي", @@ -1066,7 +1083,8 @@ "FillWithoutFormatting": "املأ بدون تنسيق", "CustomFormat": "تنسيقات الأرقام المخصصة", "CustomFormatPlaceholder": "اكتب أو حدد تنسيقًا مخصصًا", - "CustomFormatTypeList": "يكتب" + "CustomFormatTypeList": "يكتب", + "CellReferenceTypoError": "وجدنا خطأ مطبعي في مرجع الخلية الخاصة بك. هل تريد تصحيح هذا المرجع على النحو التالي؟" } }, "en": { @@ -1339,8 +1357,16 @@ "NotEqual": "Not Equal", "Equal": "Equal", "Contains": "Contains", + "NotContains": "Does Not Contains", "EndsWith": "Ends With", + "NotEndsWith": "Does Not End With", "StartsWith": "Starts With", + "NotStartsWith": "Does Not Start With", + "Like": "Like", + "IsNull": "Null", + "NotNull": "Not Null", + "IsEmpty": "Empty", + "IsNotEmpty": "Not Empty", "ClearButton": "Clear", "FilterButton": "Filter", "CancelButton": "Cancel", @@ -1601,7 +1627,8 @@ "FillWithoutFormatting": "Fill Without Formatting", "CustomFormat": "Custom Number Formats", "CustomFormatPlaceholder": "Type or Select a custom format", - "CustomFormatTypeList": "Type" + "CustomFormatTypeList": "Type", + "CellReferenceTypoError": "We found a typo in your cell reference. Do you want to correct this reference as follows?" } }, "zh": { @@ -1874,8 +1901,16 @@ "NotEqual": "不相等", "Equal": "平等的", "Contains": "包含", + "NotContains": "不包含", "EndsWith": "以。。結束", + "NotEndsWith": "不結束於", "StartsWith": "以。。開始", + "NotStartsWith": "不以開頭", + "Like": "喜歡", + "IsNull": "無效的", + "NotNull": "不為空", + "IsEmpty": "空的", + "IsNotEmpty": "不是空的", "ClearButton": "清除", "FilterButton": "篩選", "CancelButton": "取消", @@ -2136,7 +2171,8 @@ "FillWithoutFormatting": "無格式填充", "CustomFormat": "自定義數字格式", "CustomFormatPlaceholder": "鍵入或選擇自定義格式", - "CustomFormatTypeList": "類型" + "CustomFormatTypeList": "類型", + "CellReferenceTypoError": "我們在您的單元格引用中發現了拼寫錯誤。是否要按如下方式更正此引用？" } }, "fr-CH": { @@ -2409,8 +2445,16 @@ "NotEqual": "Inégal", "Equal": "Égal", "Contains": "Contient", + "NotContains": "Ne contient pas", "EndsWith": "Se termine par", + "NotEndsWith": "Ne se termine pas par", "StartsWith": "Commence avec", + "NotStartsWith": "Ne commence pas par", + "Like": "Comme", + "IsNull": "Nul", + "NotNull": "Non nul", + "IsEmpty": "Vide", + "IsNotEmpty": "Pas vide", "ClearButton": "Dégager", "FilterButton": "Filtre", "CancelButton": "Annuler", @@ -2671,7 +2715,8 @@ "FillWithoutFormatting": "Remplir sans formater", "CustomFormat": "Formats de nombre personnalisés", "CustomFormatPlaceholder": "Tapez ou sélectionnez un format personnalisé", - "CustomFormatTypeList": "Taper" + "CustomFormatTypeList": "Taper", + "CellReferenceTypoError": "Nous avons trouvé une faute de frappe dans votre référence de cellule. Voulez-vous corriger cette référence comme suit ?" } } } \ No newline at end of file diff --git a/src/spreadsheet/protect-sheet.ts b/src/spreadsheet/protect-sheet.ts index c0cdcc04..8936996f 100644 --- a/src/spreadsheet/protect-sheet.ts +++ b/src/spreadsheet/protect-sheet.ts @@ -115,8 +115,8 @@ import * as dataSource from './protect-sheet-data.json'; width: 90 }] }], - openUrl: 'https://ej2services.syncfusion.com/production/web-services/api/spreadsheet/open', - saveUrl: 'https://ej2services.syncfusion.com/production/web-services/api/spreadsheet/save', + openUrl: 'https://services.syncfusion.com/js/production/api/spreadsheet/open', + saveUrl: 'https://services.syncfusion.com/js/production/api/spreadsheet/save', created: () => { //Applied style and number formatting to a range spreadsheet.cellFormat({ fontWeight: 'bold', textAlign: 'center' }, 'EMI Schedule!A1:F1'); diff --git a/src/spreadsheet/remote-data-binding.ts b/src/spreadsheet/remote-data-binding.ts index 91332bdf..e4012a72 100644 --- a/src/spreadsheet/remote-data-binding.ts +++ b/src/spreadsheet/remote-data-binding.ts @@ -28,7 +28,7 @@ import { Spreadsheet } from '@syncfusion/ej2-spreadsheet'; //Initialize DataManager let data: DataManager = new DataManager({ // Remote service url - url: 'https://ej2services.syncfusion.com/production/web-services/api/Orders', + url: 'https://services.syncfusion.com/js/production/api/Orders', adaptor: new CustomAdaptor, crossDomain: true }); @@ -44,8 +44,8 @@ import { Spreadsheet } from '@syncfusion/ej2-spreadsheet'; ranges: [{ dataSource: data, showFieldAsHeader: false, startCell: 'A2' }], columns: [{ width: 100 }, { width: 130 }, { width: 150 }, { width: 200 }, { width: 180 }] }], - openUrl: 'https://ej2services.syncfusion.com/production/web-services/api/spreadsheet/open', - saveUrl: 'https://ej2services.syncfusion.com/production/web-services/api/spreadsheet/save', + openUrl: 'https://services.syncfusion.com/js/production/api/spreadsheet/open', + saveUrl: 'https://services.syncfusion.com/js/production/api/spreadsheet/save', created: (): void => { //Apply style to a range spreadsheet.cellFormat({ fontWeight: 'bold', textAlign: 'center' }, 'A1:G1'); diff --git a/src/spreadsheet/sorting-and-filtering.ts b/src/spreadsheet/sorting-and-filtering.ts index 12e2ebf3..3620c39a 100644 --- a/src/spreadsheet/sorting-and-filtering.ts +++ b/src/spreadsheet/sorting-and-filtering.ts @@ -40,8 +40,8 @@ import * as dataSource from './sorting-and-filtering-data.json'; width: 124 }] }], - openUrl: 'https://ej2services.syncfusion.com/production/web-services/api/spreadsheet/open', - saveUrl: 'https://ej2services.syncfusion.com/production/web-services/api/spreadsheet/save', + openUrl: 'https://services.syncfusion.com/js/production/api/spreadsheet/open', + saveUrl: 'https://services.syncfusion.com/js/production/api/spreadsheet/save', created: () => { spreadsheet.cellFormat({ fontWeight: 'bold', textAlign: 'center' }, 'A1:G1'); // Sorted B(Employee Name field) column in ascending order diff --git a/src/tab/drag-and-drop.html b/src/tab/drag-and-drop.html index 6c9f2f5e..cb08ec33 100644 --- a/src/tab/drag-and-drop.html +++ b/src/tab/drag-and-drop.html @@ -94,4 +94,12 @@ .sb-property-border { border-right: none; } + #TabContainer { + display: flex; + } + @media (max-width: 550px) { + #TabContainer { + display: block; + } + } diff --git a/src/toolbar/sample.json b/src/toolbar/sample.json index 6814b7e0..5201c10e 100644 --- a/src/toolbar/sample.json +++ b/src/toolbar/sample.json @@ -2,12 +2,11 @@ "name": "Toolbar", "directory": "toolbar", "category":"Navigation", - "type":"update", "ftName" :"toolbar", "samples" : [ - {"url":"default", "name": "Default Functionalities", "category":"Toolbar", "type":"update", "description": "The sample demonstrates the default functionalities of the Toolbar control which place commands with the scrollable mode in TypeScript platform.", "api":{"Item":["text","prefixIcon","type","tooltipText"],"Toolbar":["items"] } }, + {"url":"default", "name": "Default Functionalities", "category":"Toolbar", "description": "The sample demonstrates the default functionalities of the Toolbar control which place commands with the scrollable mode in TypeScript platform.", "api":{"Item":["text","prefixIcon","type","tooltipText"],"Toolbar":["items"] } }, {"url":"popup", "name": "Popup", "category":"Toolbar", "description": "The sample exposes popup mode of Toolbar control which configures overflowing toolbar commands inside a popup based on priority in TypeScript platform.", "api":{"Item":["showAlwaysInPopup", "showTextOn", "overflow"],"Toolbar":["overflowMode"] } }, - {"url":"template", "name": "Template", "category":"Toolbar", "type":"new", "description": "The sample mode of Toolbar control which configures overflowing toolbar commands inside a popup based on priority in TypeScript platform.", "api":{"Item":["prefixIcon","tooltipText", "text", "showTextOn"],"Toolbar":["template"] } }, + {"url":"template", "name": "Template", "category":"Toolbar", "description": "The sample mode of Toolbar control which configures overflowing toolbar commands inside a popup based on priority in TypeScript platform.", "api":{"Item":["prefixIcon","tooltipText", "text", "showTextOn"],"Toolbar":["template"] } }, {"url":"alignment", "name": "Alignment", "category":"Toolbar", "description": "This sample demonstrates how to align commands in left, right and center position in Toolbar control in TypeScript platform.", "api":{"Item":["align", "template"] } }, {"url":"keyboard-interaction", "name": "Keyboard Interaction", "category":"Toolbar", "description": "This demo showcases the keyboard shortcuts applicable on Toolbar", "api":{"Item":["showAlwaysInPopup", "showTextOn", "overflow"],"Toolbar":["overflowMode"] } } ] diff --git a/src/tree-grid/adaptive.ts b/src/tree-grid/adaptive.ts index 96f4052d..516451ce 100644 --- a/src/tree-grid/adaptive.ts +++ b/src/tree-grid/adaptive.ts @@ -30,7 +30,7 @@ TreeGrid.Inject(Page, Filter, Sort, Edit, Toolbar); columns: [ { field: 'taskID', headerText: 'Task ID', isPrimaryKey: true, width: 135, textAlign: 'Right', validationRules: { required: true, number: true }}, { field: 'taskName', headerText: 'Task Name', width: 280, textAlign: 'Left', validationRules: { required: true }}, - { field: 'duration', headerText: 'Duration', width: 150, textAlign: 'Right' }, + { field: 'duration', headerText: 'Duration', width: 140, textAlign: 'Right' }, { field: 'progress', headerText: 'Progress', width: 145, textAlign: 'Right' } ], }); diff --git a/src/tree-grid/custom-aggregate.ts b/src/tree-grid/custom-aggregate.ts index bc177509..5f3f6b4a 100644 --- a/src/tree-grid/custom-aggregate.ts +++ b/src/tree-grid/custom-aggregate.ts @@ -41,9 +41,10 @@ let foods: { [key: string]: Object }[] = [ height: 400, treeColumnIndex: 1, dataBound: () => { - if (!isNullOrUndefined(listObj)) { + if (!isNullOrUndefined(listObj) && listObj.element.classList.contains('e-' + listObj.getModuleName())) + { listObj.destroy(); - } + } listObj = new DropDownList({ dataSource: foods, fields: { value: 'food' }, diff --git a/src/tree-grid/custom-context-menu.ts b/src/tree-grid/custom-context-menu.ts index 73e7f56b..bd679bf5 100644 --- a/src/tree-grid/custom-context-menu.ts +++ b/src/tree-grid/custom-context-menu.ts @@ -1,4 +1,3 @@ -import { loadCultureFiles } from '../common/culture-loader'; import { getValue, isNullOrUndefined } from '@syncfusion/ej2-base'; import { TreeGrid, Resize, ExcelExport, PdfExport, Edit, Page, ContextMenu, Sort } from '@syncfusion/ej2-treegrid'; import { sampleData } from './data-source'; @@ -11,7 +10,6 @@ TreeGrid.Inject(Resize, ExcelExport, PdfExport, Edit, Page, ContextMenu, Sort); * Context menu in grid sample */ (window as any).default = (): void => { - loadCultureFiles(); let treegrid: TreeGrid = new TreeGrid( { dataSource: sampleData, diff --git a/src/tree-grid/data-source.ts b/src/tree-grid/data-source.ts index 3563727d..ab5dd5ca 100644 --- a/src/tree-grid/data-source.ts +++ b/src/tree-grid/data-source.ts @@ -1643,71 +1643,72 @@ export function dataSource(): void { let num: number = isNaN((virtualData.length % parent) - 1) ? 0 : (virtualData.length % parent) - 1; virtualData[num][crew].push({ 'TaskID': i + 1, - 'FIELD1': names[Math.floor(Math.random() * names.length)], + 'FIELD1': names[i % 100], 'FIELD2': 1967 + (i % 10), - 'FIELD3': Math.floor(Math.random() * 200), - 'FIELD4': Math.floor(Math.random() * 100), - 'FIELD5': Math.floor(Math.random() * 2000), - 'FIELD6': Math.floor(Math.random() * 1000), - 'FIELD7': Math.floor(Math.random() * 100), - 'FIELD8': Math.floor(Math.random() * 10), - 'FIELD9': Math.floor(Math.random() * 10), - 'FIELD10': Math.floor(Math.random() * 100), - 'FIELD11': Math.floor(Math.random() * 100), - 'FIELD12': Math.floor(Math.random() * 1000), - 'FIELD13': Math.floor(Math.random() * 10), - 'FIELD14': Math.floor(Math.random() * 10), - 'FIELD15': Math.floor(Math.random() * 1000), - 'FIELD16': Math.floor(Math.random() * 200), - 'FIELD17': Math.floor(Math.random() * 300), - 'FIELD18': Math.floor(Math.random() * 400), - 'FIELD19': Math.floor(Math.random() * 500), - 'FIELD20': Math.floor(Math.random() * 700), - 'FIELD21': Math.floor(Math.random() * 800), - 'FIELD22': Math.floor(Math.random() * 1000), - 'FIELD23': Math.floor(Math.random() * 2000), - 'FIELD24': Math.floor(Math.random() * 150), - 'FIELD25': Math.floor(Math.random() * 1000), - 'FIELD26': Math.floor(Math.random() * 100), - 'FIELD27': Math.floor(Math.random() * 400), - 'FIELD28': Math.floor(Math.random() * 600), - 'FIELD29': Math.floor(Math.random() * 500), - 'FIELD30': Math.floor(Math.random() * 300), + 'FIELD3': (i % 2 == 0) ? 395 + 2 : (i % 5 == 0) ? 395 + 1 : 395 + 25, + 'FIELD4': (i % 2 == 0) ? 87 + 2 : (i % 5 == 0) ? 87 + 1 : 87 + 15, + 'FIELD5': (i % 2 == 0) ? 410 + 2 : (i % 5 == 0) ? 410 + 1 : 410 + 45, + 'FIELD6': (i % 2 == 0) ? 67 + 2 : (i % 5 == 0) ? 67 + 1 : 67 + 6, + 'FIELD7': (i % 2 == 0) ? 35 + 2 : (i % 5 == 0) ? 24 + 1 : 45 + 12, + 'FIELD8': (i % 2 == 0) ? 100 + 2 : (i % 5 == 0) ? 100 + 1 : 100 + 12, + 'FIELD9': (i % 2 == 0) ? 35 + 2 : (i % 5 == 0) ? 24 + 1 : 45 + 12, + 'FIELD10': (i % 2 == 0) ? 46 + 2 : (i % 5 == 0) ? 46 + 1 : 64 + 6, + 'FIELD11': (i % 2 == 0) ? 67 + 2 : (i % 5 == 0) ? 67 + 1 : 67 + 6, + 'FIELD12': (i % 2 == 0) ? 100 + 62 : (i % 5 == 0) ? 100 + 41 : 100 + 112, + 'FIELD13': (i % 2 == 0) ? 2 + 2 : (i % 5 == 0) ? 1 + 1 : 1 + 6, + 'FIELD14': (i % 2 == 0) ? 46 + 2 : (i % 5 == 0) ? 46 + 1 : 64 + 6, + 'FIELD15': (i % 2 == 0) ? 1000 + 112 : (i % 5 == 0) ? 1000 + 153 : 1000 + 412, + 'FIELD16': (i % 2 == 0) ? 210 + 23 : (i % 5 == 0) ? 210 + 12 : 210 + 621, + 'FIELD17': (i % 2 == 0) ? 300 + 533 : (i % 5 == 0) ? 300 + 321 : 300 + 699, + 'FIELD18': (i % 2 == 0) ? 400 + 232 : (i % 5 == 0) ? 400 + 153 : 400 + 342, + 'FIELD19': (i % 2 == 0) ? 40 + 12 : (i % 5 == 0) ? 40 + 24 : 40 + 25, + 'FIELD20': (i % 2 == 0) ? 700 + 423 : (i % 5 == 0) ? 700 + 53 : 700 + 43, + 'FIELD21': (i % 2 == 0) ? 35 + 2 : (i % 5 == 0) ? 24 + 1 : 45 + 12, + 'FIELD22': (i % 2 == 0) ? 100 + 2 : (i % 5 == 0) ? 100 + 1 : 100 + 12, + 'FIELD23': (i % 2 == 0) ? 35 + 2 : (i % 5 == 0) ? 24 + 1 : 45 + 12, + 'FIELD24': (i % 2 == 0) ? 46 + 2 : (i % 5 == 0) ? 46 + 1 : 64 + 6, + 'FIELD25': (i % 2 == 0) ? 67 + 2 : (i % 5 == 0) ? 67 + 1 : 67 + 6, + 'FIELD26': (i % 2 == 0) ? 100 + 62 : (i % 5 == 0) ? 100 + 41 : 100 + 112, + 'FIELD27': (i % 2 == 0) ? 2 + 2 : (i % 5 == 0) ? 1 + 1 : 1 + 6, + 'FIELD28': (i % 2 == 0) ? 46 + 2 : (i % 5 == 0) ? 46 + 1 : 64 + 6, + 'FIELD29': (i % 2 == 0) ? 1000 + 112 : (i % 5 == 0) ? 1000 + 153 : 1000 + 412, + 'FIELD30': (i % 2 == 0) ? 210 + 23 : (i % 5 == 0) ? 210 + 12 : 210 + 621, + 'FIELD31': (i % 2 == 0) ? 300 + 533 : (i % 5 == 0) ? 300 + 321 : 300 + 699, }); } else { virtualData.push({ 'TaskID': i + 1, 'Crew': [], - 'FIELD1': names[Math.floor(Math.random() * names.length)], + 'FIELD1': names[i % 100], 'FIELD2': 1967 + (i % 10), - 'FIELD3': Math.floor(Math.random() * 200), - 'FIELD4': Math.floor(Math.random() * 100), - 'FIELD5': Math.floor(Math.random() * 2000), - 'FIELD6': Math.floor(Math.random() * 1000), - 'FIELD7': Math.floor(Math.random() * 100), - 'FIELD8': Math.floor(Math.random() * 10), - 'FIELD9': Math.floor(Math.random() * 10), - 'FIELD10': Math.floor(Math.random() * 100), - 'FIELD11': Math.floor(Math.random() * 100), - 'FIELD12': Math.floor(Math.random() * 1000), - 'FIELD13': Math.floor(Math.random() * 10), - 'FIELD14': Math.floor(Math.random() * 10), - 'FIELD15': Math.floor(Math.random() * 1000), - 'FIELD16': Math.floor(Math.random() * 200), - 'FIELD17': Math.floor(Math.random() * 300), - 'FIELD18': Math.floor(Math.random() * 400), - 'FIELD19': Math.floor(Math.random() * 500), - 'FIELD20': Math.floor(Math.random() * 700), - 'FIELD21': Math.floor(Math.random() * 800), - 'FIELD22': Math.floor(Math.random() * 1000), - 'FIELD23': Math.floor(Math.random() * 2000), - 'FIELD24': Math.floor(Math.random() * 150), - 'FIELD25': Math.floor(Math.random() * 1000), - 'FIELD26': Math.floor(Math.random() * 100), - 'FIELD27': Math.floor(Math.random() * 400), - 'FIELD28': Math.floor(Math.random() * 600), - 'FIELD29': Math.floor(Math.random() * 500), - 'FIELD30': Math.floor(Math.random() * 300), + 'FIELD3': (i % 3 == 0) ? 395 + (i + 6) : (i % 4 == 0) ? 395 + (i + 4) : 395 + (i + 13), + 'FIELD4': (i % 3 == 0) ? 87 + (i + 3) : (i % 4 == 0) ? 87 + (i + 2) : 87 + (i + 12), + 'FIELD5': (i % 3 == 0) ? 410 + (i + 2) : (i % 4 == 0) ? 410 + (i + 1) : 410 + (i + 14), + 'FIELD6': (i % 3 == 0) ? 67 + (i + 2) : (i % 4 == 0) ? 67 + (i + 1) : 67 + (i + 7), + 'FIELD7': (i % 3 == 0) ? 89 + (i + 2) : (i % 4 == 0) ? 94 + (i + 1) : 23 + (i + 7), + 'FIELD8': (i % 3 == 0) ? 76 + (i + 2) : (i % 4 == 0) ? 23 + (i + 1) : 45 + (i + 7), + 'FIELD9': (i % 3 == 0) ? 87 + (i + 2) : (i % 4 == 0) ? 87 + (i + 1) : 87 + (i + 12), + 'FIELD10': (i % 3 == 0) ? 54 + (i + 2) : (i % 4 == 0) ? 54 + (i + 1) : 54 + (i + 12), + 'FIELD11': (i % 3 == 0) ? 280 + (i + 2) : (i % 4 == 0) ? 280 + (i + 1) : 280 + (i + 12), + 'FIELD12': (i % 3 == 0) ? 126 + (i + 2) : (i % 4 == 0) ? 116 + (i + 1) : 156 + (i + 12), + 'FIELD13': (i % 3 == 0) ? 12 + (i + 2) : (i % 4 == 0) ? 12 + (i + 1) : 12 + (i + 12), + 'FIELD14': (i % 3 == 0) ? 54 + (i + 2) : (i % 4 == 0) ? 53 + (i + 1) : 23 + (i + 12), + 'FIELD15': (i % 3 == 0) ? 1003 + (i + 2) : (i % 4 == 0) ? 1100 + (i + 1) : 1000 + (i + 12), + 'FIELD16': (i % 3 == 0) ? 210 + (i + 2) : (i % 4 == 0) ? 237 + (i + 1) : 290 + (i + 12), + 'FIELD17': (i % 3 == 0) ? 300 + (i + 2) : (i % 4 == 0) ? 300 + (i + 1) : 300 + (i + 12), + 'FIELD18': (i % 3 == 0) ? 400 + (i + 2) : (i % 4 == 0) ? 400 + (i + 1) : 400 + (i + 12), + 'FIELD19': (i % 3 == 0) ? 700 + (i + 2) : (i % 4 == 0) ? 700 + (i + 1) : 700 + (i + 12), + 'FIELD20': (i % 3 == 0) ? 210 + (i + 2) : (i % 4 == 0) ? 237 + (i + 1) : 290 + (i + 12), + 'FIELD21': (i % 3 == 0) ? 54 + (i + 2) : (i % 4 == 0) ? 53 + (i + 1) : 23 + (i + 12), + 'FIELD22': (i % 3 == 0) ? 210 + (i + 2) : (i % 4 == 0) ? 237 + (i + 1) : 290 + (i + 12), + 'FIELD23': (i % 3 == 0) ? 126 + (i + 2) : (i % 4 == 0) ? 116 + (i + 1) : 156 + (i + 12), + 'FIELD24': (i % 3 == 0) ? 126 + (i + 2) : (i % 4 == 0) ? 116 + (i + 1) : 156 + (i + 12), + 'FIELD25': (i % 3 == 0) ? 210 + (i + 2) : (i % 4 == 0) ? 237 + (i + 1) : 290 + (i + 12), + 'FIELD26': (i % 3 == 0) ? 400 + (i + 2) : (i % 4 == 0) ? 400 + (i + 1) : 400 + (i + 12), + 'FIELD27': (i % 3 == 0) ? 76 + (i + 2) : (i % 4 == 0) ? 23 + (i + 1) : 45 + (i + 7), + 'FIELD28': (i % 3 == 0) ? 395 + (i + 2) : (i % 4 == 0) ? 395 + (i + 4) : 395 + (i + 13), + 'FIELD29': (i % 3 == 0) ? 89 + (i + 2) : (i % 4 == 0) ? 94 + (i + 1) : 23 + (i + 7), + 'FIELD30': (i % 3 == 0) ? 300 + (i + 2) : (i % 4 == 0) ? 300 + (i + 1) : 300 + (i + 12), }); } } diff --git a/src/tree-grid/inline-editing.ts b/src/tree-grid/inline-editing.ts index 872bf2e9..4b4e9ac6 100644 --- a/src/tree-grid/inline-editing.ts +++ b/src/tree-grid/inline-editing.ts @@ -21,7 +21,7 @@ TreeGrid.Inject(Toolbar, Edit, RowDD); newRowPosition: 'Below' }, - toolbar: ['Add', 'Delete', 'Update', 'Cancel'], + toolbar: ['Add', 'Delete', 'Update', 'Cancel', 'Indent', 'Outdent'], columns: [ { field: 'taskID', headerText: 'Task ID', isPrimaryKey: true, textAlign: 'Right', diff --git a/src/tree-grid/loading-animation.ts b/src/tree-grid/loading-animation.ts index cc6d1452..7d1e9772 100644 --- a/src/tree-grid/loading-animation.ts +++ b/src/tree-grid/loading-animation.ts @@ -15,7 +15,7 @@ TreeGrid.Inject(Page, Selection, Sort); { id: 'Spinner', type: 'Spinner' } ]; let data = new DataManager({ - url: 'https://ej2services.syncfusion.com/production/web-services/api/SelfReferenceData', + url: 'https://services.syncfusion.com/js/production/api/SelfReferenceData', adaptor: new WebApiAdaptor(), crossDomain: true }); diff --git a/src/tree-grid/remote-data.ts b/src/tree-grid/remote-data.ts index aea34f08..658dcbe5 100644 --- a/src/tree-grid/remote-data.ts +++ b/src/tree-grid/remote-data.ts @@ -10,7 +10,7 @@ TreeGrid.Inject(Page); (window as any).default = (): void => { loadCultureFiles(); let data: Object = new DataManager({ - url: 'https://ej2services.syncfusion.com/production/web-services/api/SelfReferenceData', + url: 'https://services.syncfusion.com/js/production/api/SelfReferenceData', adaptor: new WebApiAdaptor , crossDomain: true }); diff --git a/src/tree-grid/sample.json b/src/tree-grid/sample.json index 80200546..6fb6b239 100644 --- a/src/tree-grid/sample.json +++ b/src/tree-grid/sample.json @@ -3,7 +3,6 @@ "directory": "tree-grid", "category": "Grids", "ftName": "tree-grid", - "type": "update", "samples": [ { "url": "treegrid-overview", "name": "Overview", "category":"Tree Grid","api":{"TreeGrid":["dataSource","childMapping","height","columns","allowReordering","allowFiltering","allowSorting","filterSettings","queryCellInfo"] }, @@ -18,7 +17,7 @@ "description": "This example demonstrates the adaptive rendering behavior of Tree Grid features." }, { - "url": "loading-animation","name": "Loading Animation", "type": "new", "category": "Tree Grid","api":{"TreeGrid": ["columns", "dataSource","allowSorting","allowPaging", "allowFiltering", "loadingIndicator", "pageSettings"] }, + "url": "loading-animation","name": "Loading Animation", "category": "Tree Grid","api":{"TreeGrid": ["columns", "dataSource","allowSorting","allowPaging", "allowFiltering", "loadingIndicator", "pageSettings"] }, "description": "This example shows the loading indicator when tree grid loading and refreshing." }, { @@ -167,7 +166,7 @@ "description": "This demo for Essential JS 2 Tree Grid control shows frozen columns feature of Tree Grid with Freeze direction Left/Right." }, { - "url":"virtual-scrolling", "name": "Virtual Scrolling", "type": "update", "description":"This demo demonstrates how to use Essential JS 2 Tree Grid to show a large data view without performance degradation by rendering only the required rows.", "category":"Scrolling","api":{"TreeGrid":["dataSource","enableVirtualization","dataBound","height","columns"] } + "url":"virtual-scrolling", "name": "Virtual Scrolling", "description":"This demo demonstrates how to use Essential JS 2 Tree Grid to show a large data view without performance degradation by rendering only the required rows.", "category":"Scrolling","api":{"TreeGrid":["dataSource","enableVirtualization","dataBound","height","columns"] } }, { "url":"infinite-scrolling", "name": "Infinite Scrolling", "description":"This sample demonstrates the Tree Grid component with infinite scrolling feature.", "category":"Scrolling","api":{"TreeGrid":["dataSource","enableInfiniteScrolling","dataBound","height","columns"] } diff --git a/src/tree-grid/treegrid-overview.ts b/src/tree-grid/treegrid-overview.ts index 943fe645..9d275191 100644 --- a/src/tree-grid/treegrid-overview.ts +++ b/src/tree-grid/treegrid-overview.ts @@ -24,7 +24,7 @@ TreeGrid.Inject(Filter, Sort, Reorder); field: 'name', headerText: 'Province', template: '#flagtemplate', filter: { type: 'Excel', itemTemplate: '#flagtemplate' }, width: 195 }, - { field: 'population', headerText: 'Population (Million)', valueAccessor: populationValue, textAlign: 'Right', width: 250 }, + { field: 'population', headerText: 'Population (Million)', valueAccessor: populationValue, textAlign: 'Right', width: 188 }, { field: 'gdp', headerText: 'GDP Rate %', template: '#gdptemplate', allowFiltering: false, width: 120 }, { field: 'rating', headerText: 'Credit Rating', customAttributes: { class: 'ratingCircle' }, diff --git a/src/uploader/file-upload-with-forms.html b/src/uploader/file-upload-with-forms.html index 1862768e..dc89cbdc 100644 --- a/src/uploader/file-upload-with-forms.html +++ b/src/uploader/file-upload-with-forms.html @@ -195,12 +195,15 @@ -webkit-appearance: none; margin: 0; } - .e-bigger .e-dialog .e-dlg-header-content{ - padding: 12px 16px; + .fluent .e-bigger .e-dialog .e-dlg-header-content, + .fluent-dark .e-bigger .e-dialog .e-dlg-header-content, + .tailwind .e-bigger .e-dialog .e-dlg-header-content, + .tailwind-dark .e-bigger .e-dialog .e-dlg-header-content{ + padding-bottom: 2%; } - .e-bigger .e-dialog .e-dlg-content{ - padding: 4px 16px 12px; - margin: 0px; + .material-dark .e-bigger .e-dialog .e-dlg-header-content, + .material .e-bigger .e-dialog .e-dlg-header-content{ + padding-bottom: 3%; } diff --git a/styles/index.css b/styles/index.css index 5dd18997..adc6cb73 100644 --- a/styles/index.css +++ b/styles/index.css @@ -3991,13 +3991,13 @@ color:white; margin-top: 9px; } -.fluent .sb-content-tab .e-tab .e-tab-header .e-toolbar-item:not(.e-separator) { +.fluent .sb-content-tab > .e-tab > .e-tab-header > .e-items > .e-toolbar-item:not(.e-separator) { height: 35px; margin: 0px 8px 0 0; min-height: 35px; } -.fluent .sb-content-tab .e-tab .e-tab-header .e-toolbar-items,.fluent .e-tab .e-tab-header { +.fluent .sb-content-tab > .e-tab > .e-tab-header > .e-toolbar-items,.fluent .sb-content-tab > .e-tab > .e-tab-header { min-height: 35px; height: 35px; } @@ -4022,13 +4022,13 @@ color:white; margin-left: 0px !important; } -.fluent-dark .sb-content-tab .e-tab .e-tab-header .e-toolbar-item:not(.e-separator) { +.fluent-dark .sb-content-tab > .e-tab > .e-tab-header > .e-items > .e-toolbar-item:not(.e-separator) { height: 35px; margin: 0px 8px 0 0; min-height: 35px; } -.fluent-dark .sb-content-tab .e-tab .e-tab-header .e-toolbar-items,.fluent-dark .sb-content-tab .e-tab .e-tab-header { +.fluent-dark .sb-content-tab > .e-tab > .e-tab-header > .e-toolbar-items,.fluent-dark .sb-content-tab > .e-tab > .e-tab-header { min-height: 35px; height: 35px; }