diff --git a/config.json b/config.json index 8ae9843a..330eb2fd 100644 --- a/config.json +++ b/config.json @@ -147,6 +147,11 @@ "multiline", "sys", "realtime", - "binding" + "binding", + "insert-emoticons", + "online-html-editor", + "form-validator", + "signature", + "multiline-textbox" ] } \ No newline at end of file diff --git a/index.html b/index.html index 27e22e23..b92dd370 100644 --- a/index.html +++ b/index.html @@ -192,6 +192,14 @@
+ + + + Infinite Looping + + + + + + Show Indicators + + + + + + Show Play Button + + + + + + Show Arrows + + + + + + Slide Interval + + + + + + +
+ + + + + + + + +
+

This sample demonstrates the properties available in the JavaScript Carousel component.

+
+
+

In this demo, you can manually change the properties of the JavaScript Carousel component like + autoPlay, buttonsVisibility, showIndicators, + interval, showPlayButton, loop using the property panel. +

+

More information about the properties available in the Carousel component can be found in this documentation section.

+
\ No newline at end of file diff --git a/src/carousel/api.ts b/src/carousel/api.ts new file mode 100644 index 00000000..a1a407dc --- /dev/null +++ b/src/carousel/api.ts @@ -0,0 +1,73 @@ +import { loadCultureFiles } from '../common/culture-loader'; +import { CarouselButtonVisibility, Carousel } from '@syncfusion/ej2-navigations'; +import { DropDownList, ChangeEventArgs } from '@syncfusion/ej2-dropdowns'; +import { Switch } from '@syncfusion/ej2-buttons'; + +(window as any).default = (): void => { + loadCultureFiles(); + + const carouselObj: Carousel = new Carousel({ + cssClass: 'api-carousel', + interval: 3000, + items: [ + { template: '#itemTemplate1' }, + { template: '#itemTemplate2' }, + { template: '#itemTemplate3' }, + { template: '#itemTemplate4' }, + { template: '#itemTemplate5' } + ], + }); + carouselObj.appendTo('#carousel'); + + const showButtons: DropDownList = new DropDownList({ + change: (args: ChangeEventArgs) => { + carouselObj.buttonsVisibility = args.value as CarouselButtonVisibility; + carouselObj.dataBind(); + } + }); + showButtons.appendTo('#showButtons'); + + const interval: DropDownList = new DropDownList({ + change: (args: ChangeEventArgs) => { + carouselObj.interval = args.value as number; + carouselObj.dataBind(); + } + }); + interval.appendTo('#interval'); + + const showIndicators: Switch = new Switch({ + checked: true, + change: function (args) { + carouselObj.showIndicators = args.checked; + carouselObj.dataBind(); + } + }); + showIndicators.appendTo('#showIndicators'); + + const showPlayButton: Switch = new Switch({ + checked: false, + change: function (args) { + carouselObj.showPlayButton = args.checked; + carouselObj.dataBind(); + } + }); + showPlayButton.appendTo('#showPlayButton'); + + const autoPlay: Switch = new Switch({ + checked: true, + change: function (args) { + carouselObj.autoPlay = args.checked; + carouselObj.dataBind(); + } + }); + autoPlay.appendTo('#autoPlay'); + + const infiniteLoop: Switch = new Switch({ + checked: true, + change: function (args) { + carouselObj.loop = args.checked; + carouselObj.dataBind(); + } + }); + infiniteLoop.appendTo('#loop'); +}; diff --git a/src/carousel/data-binding.html b/src/carousel/data-binding.html new file mode 100644 index 00000000..71632089 --- /dev/null +++ b/src/carousel/data-binding.html @@ -0,0 +1,86 @@ + + +
+
+
+ +
+
+
+
+

+ This sample demonstrates the basic rendering of the JavaScript Carousel component by binding + dataSource property. +

+
+
+

+ In this demo, products and its details available in our Syncfusion has been shown as slide show. The data to the + JavaScript Carousel component is bound using dataSource property. Also, itemTemplate is + used to customize the slides of the carousel. +

+

+ More information about dataSource binding to the JavaScript Carousel component can be found in this + + documentation section. +

+
\ No newline at end of file diff --git a/src/carousel/data-binding.ts b/src/carousel/data-binding.ts new file mode 100644 index 00000000..e8165879 --- /dev/null +++ b/src/carousel/data-binding.ts @@ -0,0 +1,41 @@ +import { loadCultureFiles } from '../common/culture-loader'; +import { Carousel } from '@syncfusion/ej2-navigations'; + +(window as any).default = (): void => { + loadCultureFiles(); + + const productDetails: Record[] = [ + { + ID: 1, + Title: 'San Francisco', + Content: 'San Francisco, officially the City and County of San Francisco, is a cultural, commercial, and financial center in the U.S. state of California. Located in Northern California, San Francisco is the 17th most populous city proper in the United States, and the fourth most populous in California.', + ImgPath: 'src/carousel/images/san-francisco.jpg', + URL: 'https://en.wikipedia.org/wiki/San_Francisco' + }, { + ID: 2, + Title: 'London', + Content: 'London, the capital of England and the United Kingdom, is a 21st-century city with history stretching back to Roman times. At its centre stand the imposing Houses of Parliament, the iconic ‘Big Ben’ clock tower and Westminster Abbey, site of British monarch coronations.', + ImgPath: 'src/carousel/images/london.jpg', + URL: 'https://en.wikipedia.org/wiki/London' + }, { + ID: 3, + Title: 'Tokyo', + Content: 'Tokyo, Japan’s busy capital, mixes the ultramodern and the traditional, from neon-lit skyscrapers to historic temples. The opulent Meiji Shinto Shrine is known for its towering gate and surrounding woods. The Imperial Palace sits amid large public gardens.', + ImgPath: 'src/carousel/images/tokyo.jpg', + URL: 'https://en.wikipedia.org/wiki/Tokyo' + }, { + ID: 4, + Title: 'Moscow', + Content: 'Moscow, on the Moskva River in western Russia, is the nation’s cosmopolitan capital. In its historic core is the Kremlin, a complex that’s home to the president and tsarist treasures in the Armoury. Outside its walls is Red Square, Russia`s symbolic center.', + ImgPath: 'src/carousel/images/moscow.jpg', + URL: 'https://en.wikipedia.org/wiki/Moscow' + } + ]; + const carouselObj: Carousel = new Carousel({ + cssClass: 'db-carousel', + dataSource: productDetails, + itemTemplate: '#productTemplate', + buttonsVisibility: 'Hidden' + }); + carouselObj.appendTo(document.getElementById('carousel')); +}; diff --git a/src/carousel/default.html b/src/carousel/default.html new file mode 100644 index 00000000..c094ee12 --- /dev/null +++ b/src/carousel/default.html @@ -0,0 +1,42 @@ +
+
+
+ +
+
+
+ +
+

This sample demonstrates the basic rendering of the JavaScript Carousel component with + items.

+
+
+

The JavaScript Carousel component is commonly used as a slideshow of images and contents. In this + demo, simple + slideshow of natural images has been showcased with the help of items property.

+

By default, the slide will be changed automatically with the interval of 5 seconds. You can also manually + change the slide items using previous and next icons.

+

More information about Carousel component can be found in this documentation section.

+
\ No newline at end of file diff --git a/src/carousel/default.ts b/src/carousel/default.ts new file mode 100644 index 00000000..4ef9dc8e --- /dev/null +++ b/src/carousel/default.ts @@ -0,0 +1,18 @@ +import { loadCultureFiles } from '../common/culture-loader'; +import { Carousel } from '@syncfusion/ej2-navigations'; + +(window as any).default = (): void => { + loadCultureFiles(); + + const carouselObj: Carousel = new Carousel({ + cssClass: 'default-carousel', + items: [ + { template: '
bridge
Golden Gate Bridge, San Francisco
' }, + { template: '
spring_trees
Spring Flower Trees
' }, + { template: '
waterfall
Oddadalen Waterfalls, Norway
' }, + { template: '
sea
Anse Source d`Argent, Seychelles
' }, + { template: '
rocks
Stonehenge, England
' } + ] + }); + carouselObj.appendTo('#carousel'); +}; diff --git a/src/carousel/images/bee-eater.png b/src/carousel/images/bee-eater.png new file mode 100644 index 00000000..836160f4 Binary files /dev/null and b/src/carousel/images/bee-eater.png differ diff --git a/src/carousel/images/bridge.jpg b/src/carousel/images/bridge.jpg new file mode 100644 index 00000000..a012c640 Binary files /dev/null and b/src/carousel/images/bridge.jpg differ diff --git a/src/carousel/images/cardinal.png b/src/carousel/images/cardinal.png new file mode 100644 index 00000000..19237c91 Binary files /dev/null and b/src/carousel/images/cardinal.png differ diff --git a/src/carousel/images/costa-rica.png b/src/carousel/images/costa-rica.png new file mode 100644 index 00000000..433f5d61 Binary files /dev/null and b/src/carousel/images/costa-rica.png differ diff --git a/src/carousel/images/hunei.png b/src/carousel/images/hunei.png new file mode 100644 index 00000000..b86f3b6e Binary files /dev/null and b/src/carousel/images/hunei.png differ diff --git a/src/carousel/images/jhon.png b/src/carousel/images/jhon.png new file mode 100644 index 00000000..2824e613 Binary files /dev/null and b/src/carousel/images/jhon.png differ diff --git a/src/carousel/images/kaohsiung.png b/src/carousel/images/kaohsiung.png new file mode 100644 index 00000000..9d77579b Binary files /dev/null and b/src/carousel/images/kaohsiung.png differ diff --git a/src/carousel/images/laura.png b/src/carousel/images/laura.png new file mode 100644 index 00000000..861f5907 Binary files /dev/null and b/src/carousel/images/laura.png differ diff --git a/src/carousel/images/london.jpg b/src/carousel/images/london.jpg new file mode 100644 index 00000000..9ad54d28 Binary files /dev/null and b/src/carousel/images/london.jpg differ diff --git a/src/carousel/images/mayumi.png b/src/carousel/images/mayumi.png new file mode 100644 index 00000000..d1e21b88 Binary files /dev/null and b/src/carousel/images/mayumi.png differ diff --git a/src/carousel/images/moscow.jpg b/src/carousel/images/moscow.jpg new file mode 100644 index 00000000..12dfe1e7 Binary files /dev/null and b/src/carousel/images/moscow.jpg differ diff --git a/src/carousel/images/rocks.jpeg b/src/carousel/images/rocks.jpeg new file mode 100644 index 00000000..23a02907 Binary files /dev/null and b/src/carousel/images/rocks.jpeg differ diff --git a/src/carousel/images/san-francisco.jpg b/src/carousel/images/san-francisco.jpg new file mode 100644 index 00000000..e95047eb Binary files /dev/null and b/src/carousel/images/san-francisco.jpg differ diff --git a/src/carousel/images/sea.jpg b/src/carousel/images/sea.jpg new file mode 100644 index 00000000..0a10675f Binary files /dev/null and b/src/carousel/images/sea.jpg differ diff --git a/src/carousel/images/tokyo.jpg b/src/carousel/images/tokyo.jpg new file mode 100644 index 00000000..3ea48630 Binary files /dev/null and b/src/carousel/images/tokyo.jpg differ diff --git a/src/carousel/images/trees.jpg b/src/carousel/images/trees.jpg new file mode 100644 index 00000000..5e5d7bfd Binary files /dev/null and b/src/carousel/images/trees.jpg differ diff --git a/src/carousel/images/waterfall.jpg b/src/carousel/images/waterfall.jpg new file mode 100644 index 00000000..9db138ab Binary files /dev/null and b/src/carousel/images/waterfall.jpg differ diff --git a/src/carousel/keyboard-navigation.html b/src/carousel/keyboard-navigation.html new file mode 100644 index 00000000..eb0b87d2 --- /dev/null +++ b/src/carousel/keyboard-navigation.html @@ -0,0 +1,281 @@ +
+
+
+ +
+ +
+
+ + + + + +
+

+ This sample demonstrates the keyboard interactions with the JavaScript Carousel component. +

+
+
+

+ The JavaScript Carousel component can be interacted with keyboard navigation. Below key combinations + can be used in Carousel to initiate various actions. +

+ +

+ More information about accessbilities of JavaScript Carousel component can be found in this + + documentation section. +

+
\ No newline at end of file diff --git a/src/carousel/keyboard-navigation.ts b/src/carousel/keyboard-navigation.ts new file mode 100644 index 00000000..86d55137 --- /dev/null +++ b/src/carousel/keyboard-navigation.ts @@ -0,0 +1,25 @@ +import { loadCultureFiles } from '../common/culture-loader'; +import { Carousel } from '@syncfusion/ej2-navigations'; + +(window as any).default = (): void => { + loadCultureFiles(); + + const carouselObj: Carousel = new Carousel({ + autoPlay: false, + cssClass: 'kb-carousel', + items: [ + { template: '#itemTemplate1' }, + { template: '#itemTemplate2' }, + { template: '#itemTemplate3' }, + { template: '#itemTemplate4' } + ], + showPlayButton: true + }); + carouselObj.appendTo('#carousel'); + //Focus the Carousel Control (alt+j) key combination + document.body.addEventListener('keydown', (e: KeyboardEvent) => { + if (e.altKey && e.keyCode === 74 && carouselObj.element) { + carouselObj.element.focus(); + } + }); +}; diff --git a/src/carousel/overview.html b/src/carousel/overview.html new file mode 100644 index 00000000..704c117d --- /dev/null +++ b/src/carousel/overview.html @@ -0,0 +1,338 @@ + + +
+
+
+
+
+
+ +
+ +
+ +
+
+
+
+
+
+ + + + + +
+
+ +
+
+
+
+ +
+
+
+

+ This sample demonstrates the overview of the JavaScript Carousel component and customizing it + with external navigators. +

+
+
+

+ The JavaScript Carousel component is commonly used as a slideshow of images and contents. In this + demo, the external navigators and indicators are rendered outside the carousel by hiding the default + navigators and indicators using buttonsVisibility and showIndicators properties. + The slide items are rendered using dataSource and customized using itemTemplate. +

+

+ The external navigation of slide items is handled using public methods prev and next + and changing selectedIndex property. +

+

+ More information about JavaScript Carousel component can be found in this documentation section. +

+
\ No newline at end of file diff --git a/src/carousel/overview.ts b/src/carousel/overview.ts new file mode 100644 index 00000000..46945f5f --- /dev/null +++ b/src/carousel/overview.ts @@ -0,0 +1,61 @@ +import { loadCultureFiles } from '../common/culture-loader'; +import { Carousel } from '@syncfusion/ej2-navigations'; +import { Button } from '@syncfusion/ej2-buttons'; +import { addClass, removeClass, createElement } from '@syncfusion/ej2-base'; + +(window as any).default = (): void => { + loadCultureFiles(); + + const carouselData = [ + { imageUrl: 'src/carousel/images/google-pixel-6-pro.png', title: 'Google Pixel', model: 'Pixel 6 Pro', brand: 'Google', releaseDate: 'Oct 28, 2021', ram: '12GB', rom: '128GB', platform: 'Android', version: 12 }, + { imageUrl: 'src/carousel/images/iphone-13-pro.png', title: 'iPhone', model: 'iPhone 13 Pro', brand: 'Apple', releaseDate: 'Sept 14, 2021', ram: '4GB', rom: '128GB', platform: 'iOS', version: 15 }, + { imageUrl: 'src/carousel/images/nokia-xr-20.png', title: 'Nokia', model: 'XR-20', brand: 'Nokia', releaseDate: 'Oct 30, 2021', ram: '6GB', rom: '128GB', platform: 'Android', version: 11 }, + { imageUrl: 'src/carousel/images/one-plus-9-pro.png', title: 'OnePlus', model: 'OP9 Pro', brand: 'OnePlus', releaseDate: 'March 23, 2021', ram: '8GB', rom: '128GB', platform: 'OxygenOS based on Android', version: 11 }, + { imageUrl: 'src/carousel/images/samsung-s21-fe.png', title: 'Samsung', model: 'S21 FE', brand: 'Samsung', releaseDate: 'Jan 27, 2021', ram: '8GB', rom: '128GB', platform: 'Samsung One UI 4.0 based on Android', version: 12 } + ]; + const carouselObj: Carousel = new Carousel({ + cssClass: 'overview-carousel', + width: 'calc(100% - 10rem)', + buttonsVisibility: 'Hidden', + showIndicators: false, + dataSource: carouselData, + itemTemplate: '#itemTemplate', + slideChanging: function (args) { + const indicators = [].slice.call(document.querySelectorAll('.indicator')); + removeClass(indicators, 'active-indicator'); + addClass([indicators[args.nextIndex]], 'active-indicator'); + } + }); + carouselObj.appendTo('#carousel'); + const previousBtn = new Button({ cssClass: 'e-flat e-round', iconCss: 'e-icons e-arrow-left' }, '#previousBtn'); + previousBtn.element.onclick = function () { carouselObj.prev(); }; + + const nextBtn = new Button({ cssClass: 'e-flat e-round', iconCss: 'e-icons e-arrow-right' }, '#nextBtn'); + nextBtn.element.onclick = function () { carouselObj.next(); }; + + const playPauseBtn = new Button({ cssClass: 'e-flat e-round', iconCss: 'e-icons e-pause', isToggle: true }, '#playPauseBtn'); + playPauseBtn.element.onclick = function () { + setTimeout(() => { + carouselObj.autoPlay = !playPauseBtn.element.classList.contains('e-active'); + carouselObj.dataBind(); + playPauseBtn.iconCss = playPauseBtn.element.classList.contains('e-active') ? 'e-icons e-play' : 'e-icons e-pause'; + playPauseBtn.dataBind(); + }); + }; + + const indicatorOne = new Button({ cssClass: 'e-flat e-round' }, '#indicatorBtnOne'); + indicatorOne.element.addEventListener('click', function () { onIndicatorClick(0) }); + const indicatorTwo = new Button({ cssClass: 'e-flat e-round' }, '#indicatorBtnTwo'); + indicatorTwo.element.addEventListener('click', function () { onIndicatorClick(1) }); + const indicatorThree = new Button({ cssClass: 'e-flat e-round' }, '#indicatorBtnThree'); + indicatorThree.element.addEventListener('click', function () { onIndicatorClick(2) }); + const indicatorFour = new Button({ cssClass: 'e-flat e-round' }, '#indicatorBtnFour'); + indicatorFour.element.addEventListener('click', function () { onIndicatorClick(3) }); + const indicatorFive = new Button({ cssClass: 'e-flat e-round' }, '#indicatorBtnFive'); + indicatorFive.element.addEventListener('click', function () { onIndicatorClick(4) }); + + function onIndicatorClick(index: number) { + carouselObj.selectedIndex = index; + carouselObj.dataBind(); + } +}; diff --git a/src/carousel/sample.json b/src/carousel/sample.json new file mode 100644 index 00000000..a160fb33 --- /dev/null +++ b/src/carousel/sample.json @@ -0,0 +1,93 @@ +{ + "name": "Carousel", + "directory": "carousel", + "category": "Navigation", + "ftName": "carousel", + "type": "preview", + "samples": [ + { + "url": "default", + "name": "Default Functionalities", + "category": "Carousel", + "api": { + "Carousel": [ + "items" + ], + "CarouselItem": [ + "template" + ] + }, + "description": "This example demonstrates the simple slide show of images using Syncfusion JavaScript Carousel component." + }, + { + "url": "data-binding", + "name": "Data Binding", + "category": "Carousel", + "api": { + "Carousel": [ + "dataSource", + "itemTemplate", + "buttonsVisibility" + ] + }, + "description": "This example demonstrates how to bind data and customize them by using dataSource and templates to the Syncfusion JavaScript Carousel component." + }, + { + "url": "templates", + "name": "Templates", + "category": "Carousel", + "api": { + "Carousel": [ + "previousButtonTemplate", + "nextButtonTemplate", + "indicatorsTemplate", + "items", + "buttonsVisibility" + ], + "CarouselItem": [ + "template" + ], + "animation": [ + "effect" + ] + }, + "description": "This example demonstrates the template options available in JavaScript Carousel component." + }, + { + "url": "keyboard-navigation", + "name": "Keyboard Navigation", + "category": "Carousel", + "api": { + "Carousel": [ + "autoPlay", + "items", + "showPlayButton" + ], + "CarouselItem": [ + "template" + ] + }, + "description": "This example explains the key combinations used to perform various actions in Syncfusion JavaScript Carousel component." + }, + { + "url": "api", + "name": "API", + "category": "Carousel", + "api": { + "Carousel": [ + "showIndicators", + "interval", + "items", + "autoPlay", + "showPlayButton", + "buttonsVisibility", + "loop" + ], + "CarouselItem": [ + "template" + ] + }, + "description": "This example showcase the available APIs and its functionalities in Syncfusion JavaScript Carousel component." + } + ] +} \ No newline at end of file diff --git a/src/carousel/templates.html b/src/carousel/templates.html new file mode 100644 index 00000000..90c5c9a5 --- /dev/null +++ b/src/carousel/templates.html @@ -0,0 +1,115 @@ + + + + + + + +
+
+
+ +
+
+
+ +
+

+ This sample demonstrates the customization of the JavaScript Carousel component using various + templates. +

+
+
+

+ In this demo, the JavaScript Carousel component is customized by using the templates. The navigators + are customized using previousButtonTemplate and nextButtonTemplate. The indicators are + customized using indicatorsTemplate. The carousel item is customized using template + option. +

+

+ More information about customizing JavaScript Carousel component can be found in this documentation section. +

+
\ No newline at end of file diff --git a/src/carousel/templates.ts b/src/carousel/templates.ts new file mode 100644 index 00000000..d3c2f8b1 --- /dev/null +++ b/src/carousel/templates.ts @@ -0,0 +1,39 @@ +import { loadCultureFiles } from '../common/culture-loader'; +import { Carousel } from '@syncfusion/ej2-navigations'; +import { Button } from '@syncfusion/ej2-buttons'; + +(window as any).default = (): void => { + loadCultureFiles(); + + (window as TemplateFunction).getThumpImage = (index: number) => { + const birds: string[] = ['cardinal', 'hunei', 'costa-rica', 'kaohsiung', 'bee-eater']; + return `src/carousel/images/${birds[index]}.png`; + }; + interface TemplateFunction extends Window { + getThumpImage?: Function; + } + + const carouselObj: Carousel = new Carousel({ + animation: { + effect: 'Fade' + }, + cssClass: 'templateCarousel', + items: [ + { template: '#itemTemplate1' }, + { template: '#itemTemplate2' }, + { template: '#itemTemplate3' }, + { template: '#itemTemplate4' }, + { template: '#itemTemplate5' }, + ], + previousButtonTemplate: '', + nextButtonTemplate: '', + indicatorsTemplate: '#indicatorTemplate' + }); + carouselObj.appendTo('#carousel'); + + const prevBtn: Button = new Button({ cssClass: 'e-flat e-round nav-btn' }); + prevBtn.appendTo('#previous'); + + const nextBtn: Button = new Button({ cssClass: 'e-flat e-round nav-btn' }); + nextBtn.appendTo('#next'); +}; diff --git a/src/chart/RTL.ts b/src/chart/RTL.ts index 41c03682..1f024fd0 100644 --- a/src/chart/RTL.ts +++ b/src/chart/RTL.ts @@ -30,15 +30,15 @@ import { Browser, EmitType } from '@syncfusion/ej2-base'; series: [ { type: 'Column', xName: 'x', width: 2, yName: 'y', name: 'Sales', - dataSource: [{ x: 2016, y: 1000 }, { x: 2017, y: 970}, { x: 2018, y: 1060 }, { x: 2019, y: 1030 }] + dataSource: [{ x: 2016, y: 1000 }, { x: 2017, y: 1170}, { x: 2018, y: 660 }, { x: 2019, y: 1030 }] }, { type: 'Column', xName: 'x', width: 2, yName: 'y', name: 'Expense', - dataSource: [{ x: 2016, y: 400 }, { x: 2017, y: 360 }, { x: 2018, y: 920 }, { x: 2019, y: 540 }] + dataSource: [{ x: 2016, y: 400 }, { x: 2017, y: 460 }, { x: 2018, y: 1120 }, { x: 2019, y: 540 }] }, { type: 'Column', xName: 'x', width: 2, yName: 'y', name: 'Profit', - dataSource: [{ x: 2016, y: 600 }, { x: 2017, y: 610 }, { x: 2018, y: 140 }, { x: 2019, y: 490 }] + dataSource: [{ x: 2016, y: 200 }, { x: 2017, y: 250 }, { x: 2018, y: 300 }, { x: 2019, y: 350 }] } ], //Initializing Chart title diff --git a/src/chart/box-and-whisker.ts b/src/chart/box-and-whisker.ts index cc9aaea8..e364bd93 100644 --- a/src/chart/box-and-whisker.ts +++ b/src/chart/box-and-whisker.ts @@ -18,6 +18,10 @@ import { EmitType } from '@syncfusion/ej2-base'; '#c1c1c1', '#6f6fe2', '#e269ae', '#9e480e', '#997300', '#4472c4', '#70ad47', '#ffc000', '#ed7d31']; let bootstrapColors: string[] = ['#a16ee5', '#f7ce69', '#55a5c2', '#7ddf1e', '#ff6ea6', '#7953ac', '#b99b4f', '#407c92', '#5ea716', '#b91c52']; + let fluentColors: string[] = ['#614570', '#4C6FB1', '#CC6952', '#3F579A', '#4EA09B', '#6E7A89', '#D4515C', '#E6AF5D', '#639751', + '#9D4D69']; + let fluentDarkColors: string[] = ['#8AB113', '#2A72D5', '#43B786', '#584EC6', '#E85F9C', '#6E7A89', '#EA6266', '#EBA844', '#26BC7A', + '#BC4870']; let labelRender: EmitType = (args: IPointRenderEventArgs): void => { let selectedTheme: string = location.hash.split('/')[1]; selectedTheme = selectedTheme ? selectedTheme : 'Material'; @@ -25,6 +29,10 @@ import { EmitType } from '@syncfusion/ej2-base'; args.fill = fabricColors[args.point.index % 10]; } else if (selectedTheme === 'material') { args.fill = materialColors[args.point.index % 10]; + } else if (selectedTheme === 'fluent') { + args.fill = fluentColors[args.point.index % 10]; + } else if (selectedTheme === 'fluent-dark') { + args.fill = fluentDarkColors[args.point.index % 10]; } else { args.fill = bootstrapColors[args.point.index % 10]; } diff --git a/src/chart/bubble.ts b/src/chart/bubble.ts index 6c352663..2f301a5d 100644 --- a/src/chart/bubble.ts +++ b/src/chart/bubble.ts @@ -3,7 +3,7 @@ import { Chart, BubbleSeries, Tooltip, IPointRenderEventArgs } from '@syncfusion import { ILoadedEventArgs, ChartTheme } from '@syncfusion/ej2-charts'; import { EmitType } from '@syncfusion/ej2-base'; import { Browser } from '@syncfusion/ej2-base'; -import { fabricColors, materialColors, bootstrapColors, highContrastColors } from './theme-color'; +import { fabricColors, materialColors, bootstrapColors, highContrastColors, fluentColors, fluentDarkColors } from './theme-color'; Chart.Inject(BubbleSeries, Tooltip); let pointRender: EmitType = (args: IPointRenderEventArgs): void => { @@ -15,6 +15,10 @@ let pointRender: EmitType = (args: IPointRenderEventArgs) args.fill = materialColors[args.point.index % 10]; } else if (selectedTheme === 'highcontrast') { args.fill = highContrastColors[args.point.index % 10]; + } else if (selectedTheme === 'fluent') { + args.fill = fluentColors[args.point.index % 10]; + } else if (selectedTheme === 'fluent-dark') { + args.fill = fluentDarkColors[args.point.index % 10]; } else { args.fill = bootstrapColors[args.point.index % 10]; } diff --git a/src/chart/candle-stick.ts b/src/chart/candle-stick.ts index c7aaf0f2..18049e6d 100644 --- a/src/chart/candle-stick.ts +++ b/src/chart/candle-stick.ts @@ -1,7 +1,7 @@ import { loadCultureFiles } from '../common/culture-loader'; import { ChartTheme, Chart, CandleSeries, Category, Tooltip, ILoadedEventArgs, DateTime, Zoom, Logarithmic, ColumnSeries, - Crosshair, StripLine, IAxisLabelRenderEventArgs, ITooltipRenderEventArgs + Crosshair, StripLine, IAxisLabelRenderEventArgs, ISharedTooltipRenderEventArgs } from '@syncfusion/ej2-charts'; import { IPointRenderEventArgs } from '@syncfusion/ej2-charts'; import { Browser, Ajax } from '@syncfusion/ej2-base'; @@ -44,9 +44,9 @@ this.renderChart = (chartData: Object[]): void => { xName: 'x', low: 'low', high: 'high', open: 'open', close: 'close', name: 'Apple Inc', } ], tooltip: { enable: true, shared: true }, - tooltipRender: (args: ITooltipRenderEventArgs) => { - if (!args.series.index) { - args.text = 'Volume : ' + getLabelText(args.text.split('')[1].split('')[0]) + ''; + sharedTooltipRender: (args: ISharedTooltipRenderEventArgs) => { + if (!args.series[0].index) { + args.text[0] = 'Volume : ' + getLabelText(args.text[0].split('')[1].split('')[0]) + ''; } }, pointRender: (args: IPointRenderEventArgs) => { diff --git a/src/chart/category.ts b/src/chart/category.ts index e623f618..68b784fb 100644 --- a/src/chart/category.ts +++ b/src/chart/category.ts @@ -5,7 +5,7 @@ import { } from '@syncfusion/ej2-charts'; import { EmitType } from '@syncfusion/ej2-base'; import { Browser } from '@syncfusion/ej2-base'; -import { fabricColors, materialColors, bootstrapColors, highContrastColors } from './theme-color'; +import { fabricColors, materialColors, bootstrapColors, highContrastColors, fluentColors, fluentDarkColors } from './theme-color'; Chart.Inject(BarSeries, Category, Tooltip, DataLabel); /** @@ -20,6 +20,10 @@ let labelRender: EmitType = (args: IPointRenderEventArgs) args.fill = materialColors[args.point.index % 10]; } else if (selectedTheme === 'highcontrast') { args.fill = highContrastColors[args.point.index % 10]; + } else if (selectedTheme === 'fluent') { + args.fill = fluentColors[args.point.index % 10]; + } else if (selectedTheme === 'fluent-dark') { + args.fill = fluentDarkColors[args.point.index % 10]; } else { args.fill = bootstrapColors[args.point.index % 10]; } diff --git a/src/chart/data-label-template.html b/src/chart/data-label-template.html index cbf193cb..2b742164 100644 --- a/src/chart/data-label-template.html +++ b/src/chart/data-label-template.html @@ -234,4 +234,36 @@ ${point.y}M + + + + + \ No newline at end of file diff --git a/src/chart/drill-down-pie.ts b/src/chart/drill-down-pie.ts index 2df51ecf..bf165e81 100644 --- a/src/chart/drill-down-pie.ts +++ b/src/chart/drill-down-pie.ts @@ -102,11 +102,6 @@ AccumulationChart.Inject(AccumulationLegend, PieSeries, AccumulationTooltip, Acc textRender: (args: IAccTextRenderEventArgs) => { args.text = args.point.x + ' ' + args.point.y + ' %'; }, tooltip: { enable: false, format: '${point.x}
${point.y} %' }, title: 'Automobile Sales by Category', - chartMouseMove: (args: IMouseEventArgs) => { - if (args.target.indexOf("container_Series_0_") > -1) { - document.getElementById(args.target).style.cursor = "pointer"; - } - }, load: (args: IAccLoadedEventArgs) => { let selectedTheme: string = location.hash.split('/')[1]; selectedTheme = selectedTheme ? selectedTheme : 'Material'; diff --git a/src/chart/error-bar.ts b/src/chart/error-bar.ts index af54314a..00e32397 100644 --- a/src/chart/error-bar.ts +++ b/src/chart/error-bar.ts @@ -7,7 +7,7 @@ import { IPointRenderEventArgs } from '@syncfusion/ej2-charts'; import { EmitType } from '@syncfusion/ej2-base'; -import { fabricColors, materialColors, bootstrapColors, highContrastColors } from './theme-color'; +import { fabricColors, materialColors, bootstrapColors, highContrastColors, fluentColors, fluentDarkColors } from './theme-color'; Chart.Inject(ScatterSeries, Category, ErrorBar, Tooltip); /** * Sample for error bar @@ -21,6 +21,10 @@ let pointRender: EmitType = (args: IPointRenderEventArgs) args.fill = materialColors[args.point.index % 10]; } else if (selectedTheme === 'highcontrast') { args.fill = highContrastColors[args.point.index % 10]; + } else if (selectedTheme === 'fluent') { + args.fill = fluentColors[args.point.index % 10]; + } else if (selectedTheme === 'fluent-dark') { + args.fill = fluentDarkColors[args.point.index % 10]; } else { args.fill = bootstrapColors[args.point.index % 10]; } diff --git a/src/chart/export.ts b/src/chart/export.ts index 5f3bc9b9..21c98edb 100644 --- a/src/chart/export.ts +++ b/src/chart/export.ts @@ -6,7 +6,7 @@ import { } from '@syncfusion/ej2-charts'; Chart.Inject(ColumnSeries, Category, Legend, Export); import { Button } from '@syncfusion/ej2-buttons'; -import { fabricColors, materialColors, bootstrapColors, highContrastColors } from './theme-color'; +import { fabricColors, materialColors, bootstrapColors, highContrastColors, fluentColors, fluentDarkColors } from './theme-color'; import { EmitType } from '@syncfusion/ej2-base'; import { DropDownList } from '@syncfusion/ej2-dropdowns'; @@ -22,6 +22,10 @@ let labelRender: EmitType = (args: IPointRenderEventArgs) args.fill = materialColors[args.point.index % 10]; } else if (selectedTheme === 'highcontrast') { args.fill = highContrastColors[args.point.index % 10]; + } else if (selectedTheme === 'fluent') { + args.fill = fluentColors[args.point.index % 10]; + } else if (selectedTheme === 'fluent-dark') { + args.fill = fluentDarkColors[args.point.index % 10]; } else { args.fill = bootstrapColors[args.point.index % 10]; } diff --git a/src/chart/inversed.ts b/src/chart/inversed.ts index b1858b69..f1207b80 100644 --- a/src/chart/inversed.ts +++ b/src/chart/inversed.ts @@ -4,7 +4,7 @@ import { Tooltip, DataLabel, ILoadedEventArgs, ChartTheme } from '@syncfusion/ej2-charts'; Chart.Inject(ColumnSeries, Category, Legend, Tooltip, DataLabel); -import { fabricColors, materialColors, bootstrapColors, highContrastColors } from './theme-color'; +import { fabricColors, materialColors, bootstrapColors, highContrastColors, fluentColors, fluentDarkColors } from './theme-color'; import { Browser, EmitType } from '@syncfusion/ej2-base'; /** * Sample for invesed axis @@ -18,6 +18,10 @@ let labelRender: EmitType = (args: IPointRenderEventArgs) args.fill = materialColors[args.point.index % 10]; } else if (selectedTheme === 'highcontrast') { args.fill = highContrastColors[args.point.index % 10]; + } else if (selectedTheme === 'fluent') { + args.fill = fluentColors[args.point.index % 10]; + } else if (selectedTheme === 'fluent-dark') { + args.fill = fluentDarkColors[args.point.index % 10]; } else { args.fill = bootstrapColors[args.point.index % 10]; } diff --git a/src/chart/default-doughnut.html b/src/chart/pie-legend.html similarity index 85% rename from src/chart/default-doughnut.html rename to src/chart/pie-legend.html index a3aa36e3..f6707dc6 100644 --- a/src/chart/default-doughnut.html +++ b/src/chart/pie-legend.html @@ -7,8 +7,7 @@

-

In this example, you can see how to render doughnut chart. You can use radius and innerRadius properties to render the doughnut and also use border, fill properties to customize the point. dataLabel is 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.

+

In this example, you can see how to render doughnut chart. You can use radius and innerRadius properties to render the doughnut and also use border, fill properties to customize the point. dataLabel is used to represent individual data and its value. Here the legend text is wrapped using textWrap property.

Injecting Module

AccumulationChart component features are segregated into individual feature-wise modules. To use legend, we need to Inject diff --git a/src/chart/default-doughnut.ts b/src/chart/pie-legend.ts similarity index 96% rename from src/chart/default-doughnut.ts rename to src/chart/pie-legend.ts index 5251f690..aedf0a09 100644 --- a/src/chart/default-doughnut.ts +++ b/src/chart/pie-legend.ts @@ -25,13 +25,13 @@ centerTitle.style.visibility = 'hidden'; series: [ { dataSource: [ - { 'x': 'Net-tution and Fees', y: 21, text: '21%' }, - { 'x': 'Self-supporting Operations', y: 21, text: '21%' }, + { 'x': 'Net-tution', y: 21, text: '21%' }, { 'x': 'Private Gifts', y: 8, text: '8%' }, - { 'x': 'All Other', y: 8, text: '8%' }, + { 'x': 'All Other', y: 9, text: '9%' }, { 'x': 'Local Revenue', y: 4, text: '4%' }, { 'x': 'State Revenue', y: 21, text: '21%' }, - { 'x': 'Federal Revenue', y: 16, text: '16%' } + { 'x': 'Federal Revenue', y: 16, text: '16%' }, + { 'x': 'Self-supporting Operations', y: 21, text: '21%' } ], xName: 'x', yName: 'y', startAngle: 0, endAngle: 360, innerRadius: '40%', @@ -43,7 +43,9 @@ centerTitle.style.visibility = 'hidden'; ], legendSettings: { visible: true, toggleVisibility: false, - position: 'Right', height: '28%', width: '44%' + position: 'Right', height: '28%', width: '36%', + textWrap:'Wrap', + maximumLabelWidth:100, }, // Triggered animation complete, text render and load event animationComplete: (args: IAccAnimationCompleteEventArgs) => { diff --git a/src/chart/pie-radius.ts b/src/chart/pie-radius.ts index 697c90cc..d852aed5 100644 --- a/src/chart/pie-radius.ts +++ b/src/chart/pie-radius.ts @@ -39,9 +39,8 @@ AccumulationChart.Inject(AccumulationLegend, PieSeries, AccumulationTooltip, Acc visible: true, reverse: true }, - useGroupingSeparator: true, // Initialize tht tooltip - tooltip: { enable: true }, + tooltip: { enable: true, format: '${point.x} : ${point.y}' }, enableAnimation: true, load: (args: IAccLoadedEventArgs) => { let selectedTheme: string = location.hash.split('/')[1]; diff --git a/src/chart/print.html b/src/chart/print.html index e0c7789b..a8d853f9 100644 --- a/src/chart/print.html +++ b/src/chart/print.html @@ -68,4 +68,10 @@ .e-view.bootstrap5 .e-print-icon::before, .e-view.bootstrap5-dark .e-print-icon::before { content: '\e75d'; } + + .e-view.fluent .e-print-icon::before, .e-view.fluent-dark .e-print-icon::before { + content: '\e75d'; + } + + \ No newline at end of file diff --git a/src/chart/print.ts b/src/chart/print.ts index a4d172cc..26cbab34 100644 --- a/src/chart/print.ts +++ b/src/chart/print.ts @@ -5,7 +5,7 @@ import { } from '@syncfusion/ej2-charts'; Chart.Inject(ColumnSeries, Category, Legend); import { Button } from '@syncfusion/ej2-buttons'; -import { fabricColors, materialColors, bootstrapColors, highContrastColors } from './theme-color'; +import { fabricColors, materialColors, bootstrapColors, highContrastColors, fluentColors, fluentDarkColors } from './theme-color'; import { EmitType } from '@syncfusion/ej2-base'; /** @@ -20,6 +20,10 @@ let labelRender: EmitType = (args: IPointRenderEventArgs) args.fill = materialColors[args.point.index % 10]; } else if (selectedTheme === 'highcontrast') { args.fill = highContrastColors[args.point.index % 10]; + } else if (selectedTheme === 'fluent') { + args.fill = fluentColors[args.point.index % 10]; + } else if (selectedTheme === 'fluent-dark') { + args.fill = fluentDarkColors[args.point.index % 10]; } else { args.fill = bootstrapColors[args.point.index % 10]; } diff --git a/src/chart/remote-data.ts b/src/chart/remote-data.ts index 4c15acfd..5323ed3d 100644 --- a/src/chart/remote-data.ts +++ b/src/chart/remote-data.ts @@ -14,7 +14,7 @@ Chart.Inject(ColumnSeries, Category, Legend, Tooltip, DataLabel); let dataManager: DataManager = new DataManager({ url: 'https://ej2services.syncfusion.com/production/web-services/api/Orders' }); -import { fabricColors, materialColors, bootstrapColors, highContrastColors } from './theme-color'; +import { fabricColors, materialColors, bootstrapColors, highContrastColors, fluentColors, fluentDarkColors } from './theme-color'; let query: Query = new Query().take(5).where('Estimate', 'lessThan', 3, false); let labelRender: EmitType = (args: IAxisLabelRenderEventArgs): void => { if (args.axis.orientation === 'Horizontal') { @@ -39,6 +39,10 @@ let pointRender: EmitType = (args: IPointRenderEventArgs) args.fill = materialColors[args.point.index % 10]; } else if (selectedTheme === 'highcontrast') { args.fill = highContrastColors[args.point.index % 10]; + } else if (selectedTheme === 'fluent') { + args.fill = fluentColors[args.point.index % 10]; + } else if (selectedTheme === 'fluent-dark') { + args.fill = fluentDarkColors[args.point.index % 10]; } else { args.fill = bootstrapColors[args.point.index % 10]; } diff --git a/src/chart/sample.json b/src/chart/sample.json index e971db63..11c2a513 100644 --- a/src/chart/sample.json +++ b/src/chart/sample.json @@ -283,7 +283,6 @@ { "url": "grouped-column", "name": "Grouped Column", - "type": "new", "description": "This demo sample for Essential JavaScript2 Chart control demonstrates how to render and configure the grouping in column series.", "category": "Bar Charts", "api": { @@ -802,7 +801,6 @@ { "url": "pie-radius", "name": "Pie with Various Radius", - "type": "update", "description": "This demo sample for Essential JavaScript2 Chart control demonstrates how to render and configure the various radius pie chart.", "category": "Accumulation Charts", "api": { @@ -853,8 +851,9 @@ } }, { - "url": "default-doughnut", + "url": "pie-legend", "name": "Pie with Legend", + "type": "update", "description": "This demo sample for Essential JavaScript2 Chart control demonstrates how to render and configure the legends in pie charts.", "category": "Accumulation Charts", "api": { @@ -1282,7 +1281,6 @@ { "url": "RTL", "name": "RTL", - "type": "new", "description": "This demo sample for Essential JavaScript2 Chart control demonstrates how to render and configure the RTL feature in chart.", "category": "Chart Customization", "api": { @@ -1421,7 +1419,6 @@ { "url": "selection", "name": "Selection", - "type": "update", "description": "This demo sample for Essential JavaScript2 Chart control demonstrates the selection behavior in chart.", "category": "User Interaction", "api": { diff --git a/src/chart/scatter-plot.ts b/src/chart/scatter-plot.ts index 69c49d38..15eeae36 100644 --- a/src/chart/scatter-plot.ts +++ b/src/chart/scatter-plot.ts @@ -17,7 +17,7 @@ Chart.Inject(ScatterSeries, Legend, Tooltip); minimum: 100, maximum: 220, edgeLabelPlacement: 'Shift', - title: 'Height in Inches' + title: 'Height (cm)' }, chartArea: { border: { @@ -35,7 +35,7 @@ Chart.Inject(ScatterSeries, Legend, Tooltip); lineStyle: { width: 0 }, - title: 'Weight in Pounds', + title: 'Weight (kg)', rangePadding: 'None' }, @@ -70,7 +70,7 @@ Chart.Inject(ScatterSeries, Legend, Tooltip); //Initializing User Interaction Tooltip tooltip: { enable: true, - format: 'Weight: ${point.x} lbs
Height: ${point.y}"' + format: 'Weight: ${point.x} kg
Height: ${point.y}cm' }, width: Browser.isDevice ? '100%' : '80%', // custom code start diff --git a/src/chart/selection.html b/src/chart/selection.html index 714a075d..2bfd1774 100644 --- a/src/chart/selection.html +++ b/src/chart/selection.html @@ -6,14 +6,6 @@

- - - - + + + + - - - - + + + +
-
Enable Multi Selection:
- 		- -
Selection Mode:
@@ -26,6 +18,14 @@
+
Enable Multi Selection:
+ 		+ +
Selection Patterns:
@@ -41,14 +41,6 @@
-
Enable Highlight:
- 		- -
Highlight Color:
@@ -57,6 +49,14 @@
+
Enable Highlight:
+ 		+ +
Highlight Patterns:
diff --git a/src/chart/smart-axis-labels.ts b/src/chart/smart-axis-labels.ts index cfcbe277..54271947 100644 --- a/src/chart/smart-axis-labels.ts +++ b/src/chart/smart-axis-labels.ts @@ -5,7 +5,7 @@ import { } from '@syncfusion/ej2-charts'; import { DropDownList } from '@syncfusion/ej2-dropdowns'; import { EmitType, Browser } from '@syncfusion/ej2-base'; -import { fabricColors, materialColors, bootstrapColors, highContrastColors } from './theme-color'; +import { fabricColors, materialColors, bootstrapColors, highContrastColors, fluentColors, fluentDarkColors } from './theme-color'; import { NumericTextBox } from '@syncfusion/ej2-inputs'; Chart.Inject(ColumnSeries, Category, DataLabel, Tooltip); @@ -18,6 +18,10 @@ let labelRender: EmitType = (args: IPointRenderEventArgs) args.fill = materialColors[args.point.index % 10]; } else if (selectedTheme === 'highcontrast') { args.fill = highContrastColors[args.point.index % 10]; + } else if (selectedTheme === 'fluent') { + args.fill = fluentColors[args.point.index % 10]; + } else if (selectedTheme === 'fluent-dark') { + args.fill = fluentDarkColors[args.point.index % 10]; } else { args.fill = bootstrapColors[args.point.index % 10]; } diff --git a/src/chart/theme-color.ts b/src/chart/theme-color.ts index 9ff91a90..000c7a9d 100644 --- a/src/chart/theme-color.ts +++ b/src/chart/theme-color.ts @@ -8,4 +8,8 @@ export let fabricColors: string[] = ['#4472c4', '#ed7d31', '#ffc000', '#70ad47', export let bootstrapColors: string[] = ['#a16ee5', '#f7ce69', '#55a5c2', '#7ddf1e', '#ff6ea6', '#7953ac', '#b99b4f', '#407c92', '#5ea716', '#b91c52']; export let highContrastColors: string[] = ['#79ECE4', '#E98272', '#DFE6B6', '#C6E773', '#BA98FF', - '#FA83C3', '#00C27A', '#43ACEF', '#D681EF', '#D8BC6E']; \ No newline at end of file + '#FA83C3', '#00C27A', '#43ACEF', '#D681EF', '#D8BC6E']; +export let fluentColors: string[] = ['#614570', '#4C6FB1', '#CC6952', '#3F579A', '#4EA09B', '#6E7A89', '#D4515C', '#E6AF5D', '#639751', + '#9D4D69']; +export let fluentDarkColors: string[] = ['#8AB113', '#2A72D5', '#43B786', '#584EC6', '#E85F9C', '#6E7A89', '#EA6266', '#EBA844', '#26BC7A', + '#BC4870']; \ No newline at end of file diff --git a/src/chart/zooming.html b/src/chart/zooming.html index 440f87e9..5b04aa78 100644 --- a/src/chart/zooming.html +++ b/src/chart/zooming.html @@ -19,6 +19,13 @@ stop-color: #a16ee5; } + #fluent-gradient-chart stop { + stop-color: #614570; + } + #fluent-dark-gradient-chart stop { + stop-color: #8AB113; + } + #highcontrast-gradient-chart stop { stop-color: #79ECE4; } @@ -148,5 +155,13 @@ + + + + + + + + \ No newline at end of file diff --git a/src/chart/zooming.ts b/src/chart/zooming.ts index 9b4e99da..c1bbe259 100644 --- a/src/chart/zooming.ts +++ b/src/chart/zooming.ts @@ -11,8 +11,8 @@ Chart.Inject(AreaSeries, DateTime, Legend, Zoom, ScrollBar); 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']; - let borderColor : string[] = ['#262E0B', '#5ECB9B', '#5A61F6', '#8B5CF6', '#00bdae', '#9ECB08', '#a16ee5', '#a16ee5', '#a16ee5', '#4472c4', '#4472c4', '#79ECE4']; + 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)'; (window as any).default = (): void => { loadCultureFiles(); diff --git a/src/circular-gauge/export.html b/src/circular-gauge/export.html index d288b0f2..5000d847 100644 --- a/src/circular-gauge/export.html +++ b/src/circular-gauge/export.html @@ -95,6 +95,14 @@ content: '\e710'; } + .e-view.fluent .e-play-icon::before, .e-view.fluent-dark .e-play-icon::before { + content: '\e75d'; + } + + .e-view.fluent .e-play-icon1::before, .e-view.fluent-dark .e-play-icon1::before { + content: '\e72e'; + } + .e-view.bootstrap .e-play-icon::before { content: '\ebd2'; } diff --git a/src/circular-gauge/export.ts b/src/circular-gauge/export.ts index 9aa054e8..7e61be9e 100644 --- a/src/circular-gauge/export.ts +++ b/src/circular-gauge/export.ts @@ -88,7 +88,7 @@ CircularGauge.Inject(Print, ImageExport, PdfExport); }); mode.appendTo('#type'); let exportGauge: Button = new Button({ - iconCss: 'e-icons e-play-icon1', cssClass: 'e-flat', isPrimary: true, + isPrimary: true }); exportGauge.appendTo('#export'); let fileText: TextBox = new TextBox({ @@ -99,7 +99,7 @@ CircularGauge.Inject(Print, ImageExport, PdfExport); circulargauge.export(mode.value, fileName); }; let printGauge: Button = new Button({ - iconCss: 'e-icons e-play-icon', cssClass: 'e-flat', isPrimary: true, + isPrimary: true }); printGauge.appendTo('#print'); document.getElementById('print').onclick = () => { diff --git a/src/combo-box/grouping-icon.html b/src/combo-box/grouping-icon.html index ca201a78..d2035a49 100644 --- a/src/combo-box/grouping-icon.html +++ b/src/combo-box/grouping-icon.html @@ -51,7 +51,8 @@ } .material-dark .e-list-icon, .bootstrap5-dark .e-list-icon, - .tailwind-dark .e-list-icon { + .tailwind-dark .e-list-icon, + .fluent-dark .e-list-icon { color: #fff; } diff --git a/src/combo-box/template.html b/src/combo-box/template.html index 324b1c70..eb00dc53 100644 --- a/src/combo-box/template.html +++ b/src/combo-box/template.html @@ -57,6 +57,40 @@ background-color: #000; } + .fluent-dark .header { + background: #252423; + color: #2899F5; + } + + .bootstrap5-dark .header { + background: #343A40; + color: #7B848D; + } + + .fluent .header{ + color: #2899F5; + } + + .tailwind-dark .header { + background: #374151; + color: rgb(255, 255, 255); + } + + .material-dark .header { + background: rgb(66, 66, 66); + color: rgb(255, 255, 255); + } + + .fabric-dark .header { + background: rgb(40, 39, 39); + color: rgb(255, 255, 255); + } + + .bootstrap-dark .header { + background: rgb(49, 49, 49); + color: rgb(255, 255, 255); + } + .bootstrap .header { background-color: #f5f5f5; border-bottom: 1px solid #ccc; diff --git a/src/common/index.ts b/src/common/index.ts index 72e05369..cb3918d7 100644 --- a/src/common/index.ts +++ b/src/common/index.ts @@ -3,1655 +3,1656 @@ * default script manupulation for sample browser */ -import { Popup, Tooltip } from '@syncfusion/ej2-popups'; -import { Toast } from '@syncfusion/ej2-notifications'; -import { Animation, Browser, extend, setCulture, enableRipple, Ajax, closest, createElement, detach, L10n } from '@syncfusion/ej2-base'; -import { select, setCurrencyCode, loadCldr, selectAll } from '@syncfusion/ej2-base'; -import { DataManager, Query } from '@syncfusion/ej2-data'; -import { DropDownList, AutoComplete } from '@syncfusion/ej2-dropdowns'; -import { Button } from '@syncfusion/ej2-buttons'; -import { Tab, TreeView, Sidebar } from '@syncfusion/ej2-navigations'; -import { ListView } from '@syncfusion/ej2-lists'; -import { Grid } from '@syncfusion/ej2-grids'; -import { addRoute, bypassed, parse } from 'crossroads'; -import { renderPropertyPane, renderDescription, renderActionDescription } from './propertypane'; -import { Locale } from './locale-string'; -import * as samplesJSON from './sampleList'; -import * as elasticlunr from './lib/elasticlunr'; -import * as searchJson from './search-index.json'; -import * as hljs from './lib/highlightjs'; -import * as hasher from 'hasher'; -import * as numberingSystems from '../common/cldr-data/supplemental/numberingSystems.json'; -import * as currencyData from '../common/cldr-data/supplemental/currencyData.json'; -import * as deCultureData from '../common/cldr-data/main/de/all.json'; -import * as arCultureData from '../common/cldr-data/main/ar/all.json'; -import * as swissCultureDate from '../common/cldr-data/main/fr-CH/all.json'; -import * as enCultureData from '../common/cldr-data/main/fr-CH/all.json'; -import * as chinaCultureData from '../common/cldr-data/main/zh/all.json'; -import * as packageJson from '../common/pack.json'; -let packages: string = JSON.stringify((packageJson).dependencies); -let cBlock: string[] = ['ts-src-tab', 'html-src-tab']; -const matchedCurrency: { [key: string]: string } = { - 'en': 'USD', - 'de': 'EUR', - 'ar': 'AED', - 'zh': 'CNY', - 'fr-CH': 'CHF' -}; -import '../../node_modules/es6-promise/dist/es6-promise'; -/** - * interfaces - */ -interface Controls { - directory: string; - category?: string; - name: string; - uid: string; - type: string; - hideOnDevice: boolean; - samples: Samples[]; -} - -interface Samples { - url: string; - uid: string; - type: string; - name: string; - category: string; -} - -interface DestroyMethod extends HTMLElement { - destroy: Function; - ej2_instances: Object[]; - enableRtl: Boolean; - setProperties: Function; -} - -interface HighlightJS { - registerLanguage?: (type: string, req: Object) => void; - highlightBlock?: (ele: Element | HTMLElement | Node) => void; -} - -interface MyWindow extends Window { - default: () => void; - navigateSample: () => void; - loadCultureFiles: () => void; - apiList: any; - hashString: string; -} -loadCldr(numberingSystems, chinaCultureData, enCultureData, swissCultureDate, currencyData, deCultureData, arCultureData); -L10n.load(Locale); -setCulture('en'); -let switcherPopup: Popup; -let preventToggle: boolean; -let themeSwitherPopup: Popup; -let openedPopup: any; -let searchPopup: AutoComplete; -let settingsPopup: Popup; -let prevAction: string; -let sidebar: Sidebar; -let settingsidebar: Sidebar; -let searchInstance: any; -let headerThemeSwitch: HTMLElement = document.getElementById('header-theme-switcher'); -let settingElement: HTMLElement = select('.sb-setting-btn'); -let themeList: HTMLElement = document.getElementById('themelist'); -var themeCollection = ['bootstrap5', 'bootstrap5-dark', 'tailwind', 'tailwind-dark', 'material', 'material-dark', 'fabric', 'fabric-dark', 'bootstrap4', 'bootstrap', 'bootstrap-dark', 'highcontrast']; -let themeDropDown: DropDownList; - let cultureDropDown: DropDownList; - let currencyDropDown: DropDownList; - let contentTab: Tab; - let sourceTab: Tab; - let sourceTabItems: object[] = []; - let isExternalNavigation: boolean = true; - let defaultTree: boolean = false; - let intialLoadCompleted: boolean = false; - let resizeManualTrigger: boolean = false; - let leftToggle: Element = select('#sb-toggle-left'); - let sbRightPane: HTMLElement = select('.sb-right-pane'); - let sbContentOverlay: HTMLElement = select('.sb-content-overlay'); - let sbBodyOverlay: HTMLElement = select('.sb-body-overlay'); - let sbHeader: HTMLElement = select('#sample-header'); - let resetSearch: Element = select('.sb-reset-icon'); - let newYear: number = new Date().getFullYear(); - let copyRight: HTMLElement= document.querySelector('.sb-footer-copyright'); - copyRight.innerHTML = "Copyright © 2001 - " + newYear + " Syncfusion Inc."; + import { Popup, Tooltip } from '@syncfusion/ej2-popups'; + import { Toast } from '@syncfusion/ej2-notifications'; + import { Animation, Browser, extend, setCulture, enableRipple, Ajax, closest, createElement, detach, L10n } from '@syncfusion/ej2-base'; + import { select, setCurrencyCode, loadCldr, selectAll, registerLicense } from '@syncfusion/ej2-base'; + import { DataManager, Query } from '@syncfusion/ej2-data'; + import { DropDownList, AutoComplete } from '@syncfusion/ej2-dropdowns'; + import { Button } from '@syncfusion/ej2-buttons'; + import { Tab, TreeView, Sidebar } from '@syncfusion/ej2-navigations'; + import { ListView } from '@syncfusion/ej2-lists'; + import { Grid } from '@syncfusion/ej2-grids'; + import { addRoute, bypassed, parse } from 'crossroads'; + import { renderPropertyPane, renderDescription, renderActionDescription } from './propertypane'; + import { Locale } from './locale-string'; + import * as samplesJSON from './sampleList'; + import * as elasticlunr from './lib/elasticlunr'; + import * as searchJson from './search-index.json'; + import * as hljs from './lib/highlightjs'; + import * as hasher from 'hasher'; + import * as numberingSystems from '../common/cldr-data/supplemental/numberingSystems.json'; + import * as currencyData from '../common/cldr-data/supplemental/currencyData.json'; + import * as deCultureData from '../common/cldr-data/main/de/all.json'; + import * as arCultureData from '../common/cldr-data/main/ar/all.json'; + import * as swissCultureDate from '../common/cldr-data/main/fr-CH/all.json'; + import * as enCultureData from '../common/cldr-data/main/fr-CH/all.json'; + import * as chinaCultureData from '../common/cldr-data/main/zh/all.json'; + import * as packageJson from '../common/pack.json'; + let packages: string = JSON.stringify((packageJson).dependencies); + let cBlock: string[] = ['ts-src-tab', 'html-src-tab']; + const matchedCurrency: { [key: string]: string } = { + 'en': 'USD', + 'de': 'EUR', + 'ar': 'AED', + 'zh': 'CNY', + 'fr-CH': 'CHF' + }; + import '../../node_modules/es6-promise/dist/es6-promise'; /** - * constant to process the sample url + * interfaces */ - const urlRegex: RegExp = /(npmci\.syncfusion\.com|ej2\.syncfusion\.com)(\/)(development|production)*/; - const sampleRegex: RegExp = /#\/(([^\/]+\/)+[^\/\.]+)/; - // Regex for removal of hidden codes - const reg: RegExp = /.*custom code start([\S\s]*?)custom code end.*/g; - const sbArray: string[] = ['angular', 'react', 'javascript', 'aspnetcore', 'aspnetmvc', 'vue', 'blazor']; - /** - * constant for search operations - */ - let inputele: any = select('#search-input'); - let searchOverlay: Element = select('.e-search-overlay'); - let searchButton: Element = document.getElementById('sb-trigger-search'); - let setResponsiveElement: Element = select('.setting-responsive'); - /** - * Mobile View - */ - let isMobile: boolean = window.matchMedia('(max-width:550px)').matches; - /** - * tablet mode - */ - let isTablet: boolean = window.matchMedia('(min-width:600px) and (max-width: 850px)').matches; - /** - * PC mode - */ - let isPc: boolean = window.matchMedia('(min-width:850px)').matches; + interface Controls { + directory: string; + category?: string; + name: string; + uid: string; + type: string; + hideOnDevice: boolean; + samples: Samples[]; + } - /** - * default theme on sample loaded - */ - let selectedTheme: string = location.hash.split('/')[1] || 'bootstrap5'; - /** - * Toggle Pane Animation - */ - let toggleAnim: Animation = new Animation({ duration: 500, timingFunction: 'ease' }); - /** - * Left pane sample browser constant - */ - let controlSampleData: any = {}; - let samplesList: Controls[] | { [key: string]: Object }[] = getSampleList(); - let samplesTreeList: any = []; - let execFunction: { [key: string]: Object } = {}; - isMobile = window.matchMedia('(max-width:550px)').matches; - if (Browser.isDevice || isMobile) { - if (sidebar) { - sidebar.destroy(); - } - sidebar = new Sidebar({ width: '280px', showBackdrop: true, closeOnDocumentClick: true, enableGestures: false,change: resizeFunction }); - sidebar.appendTo('#left-sidebar'); - } else { - sidebar = new Sidebar({ - width: '282px', target: document.querySelector('.sb-content '), - showBackdrop: false, - closeOnDocumentClick: false, - enableGestures: false, - change:resizeFunction - }); - sidebar.appendTo('#left-sidebar'); + interface Samples { + url: string; + uid: string; + type: string; + name: string; + category: string; } - settingsidebar = new Sidebar({ - position: 'Right', width: '282', zIndex: '1003', showBackdrop: true, type: 'Over', enableGestures: false, - closeOnDocumentClick: false - }); - settingsidebar.appendTo('#right-sidebar'); - /** - * Right pane - */ - window.apiList = (samplesJSON as any).apiList; - let sampleNameElement: Element = document.querySelector('#component-name>.sb-sample-text'); - let breadCrumbComponent: Element = document.querySelector('.sb-bread-crumb-text>.category-text'); - let breadCrumSeperator: HTMLElement = select('.category-seperator'); - let breadCrumbSubCategory: HTMLElement = document.querySelector('.sb-bread-crumb-text>.component'); - let breadCrumbSample: Element = document.querySelector('.sb-bread-crumb-text>.crumb-sample'); - let hsplitter: string = '
'; - // tslint:disable-next-line:no-multiline-string - let openNewTemplate: string = `
-
`; - // tslint:disable-next-line:no-multiline-string - let sampleNavigation: string = `
- -
`; - let plnrTemplate: string = 'Edit in StackBlitz'; - // tslint:disable-next-line:no-multiple-var-decl - let contentToolbarTemplate: string = '
' + hsplitter + openNewTemplate + hsplitter + - '
' + sampleNavigation + '
'; - let tabContentToolbar: Element = createElement('div', { className: 'sb-content-toolbar', innerHTML: contentToolbarTemplate }); - let apiGrid: Grid; - let demoSection: Element = select('.sb-demo-section'); - /** - * Routing variables - */ - window.navigateSample = (window.navigateSample !== undefined) ? window.navigateSample : (): void => { return; }; - let isInitRedirected: boolean; - let samplePath: string[] = []; - let defaultSamples: any = []; - let samplesAr: string[] = []; - let currentControlID: string; - let currentSampleID: string; - let currentControl: string; - declare let window: MyWindow; - /** - * Popups intitalize - */ - function preventTabSwipe(e: any): void { - if (e.isSwiped) { - e.cancel = true; - } + interface DestroyMethod extends HTMLElement { + destroy: Function; + ej2_instances: Object[]; + enableRtl: Boolean; + setProperties: Function; } - function dynamicTab(e: any): void { - let blockEle: Element = this.element.querySelector('#e-content' + this.tabId + '_' + e.selectedIndex).children[0]; - blockEle.innerHTML = this.items[e.selectedIndex].data; - blockEle.innerHTML = blockEle.innerHTML.replace(reg,''); - blockEle.classList.add('sb-src-code'); - if (blockEle) { - hljs.highlightBlock(blockEle); - } + + interface HighlightJS { + registerLanguage?: (type: string, req: Object) => void; + highlightBlock?: (ele: Element | HTMLElement | Node) => void; } - function dynamicTabCreation(obj: any): void { - let tabObj: any; - if (obj) { - tabObj = obj; - } else { tabObj = this; } - let contentEle: Element = tabObj.element.querySelector('#e-content' + tabObj.tabId + '_' + tabObj.selectedItem); - if (!contentEle) { - return; - } - let blockEle: Element = tabObj.element.querySelector('#e-content' + tabObj.tabId + '_' + tabObj.selectedItem).children[0]; - blockEle.innerHTML = tabObj.items[tabObj.selectedItem].data; - blockEle.innerHTML = blockEle.innerHTML.replace(reg,''); - blockEle.classList.add('sb-src-code'); - if (blockEle) { - hljs.highlightBlock(blockEle); - } + + interface MyWindow extends Window { + default: () => void; + navigateSample: () => void; + loadCultureFiles: () => void; + apiList: any; + hashString: string; } - // tslint:disable-next-line:max-func-body-length - function renderSbPopups(): void { - switcherPopup = new Popup(document.getElementById('sb-switcher-popup'), { - relateTo: document.querySelector('.sb-header-text-right'), position: { X: 'left' }, - collision: { X: 'flip', Y: 'flip' }, - offsetX: 0, - offsetY: -15, - }); - themeSwitherPopup = new Popup(document.getElementById('theme-switcher-popup'), { - offsetY: 2, - relateTo: document.querySelector('.theme-wrapper'), position: { X: 'left', Y: 'bottom' }, - collision: { X: 'flip', Y: 'flip' } - }); - searchPopup = new AutoComplete( + loadCldr(numberingSystems, chinaCultureData, enCultureData, swissCultureDate, currencyData, deCultureData, arCultureData); + L10n.load(Locale); + setCulture('en'); + registerLicense('{SyncfusionJSLicensekey}'); + let switcherPopup: Popup; + let preventToggle: boolean; + let themeSwitherPopup: Popup; + let openedPopup: any; + let searchPopup: AutoComplete; + let settingsPopup: Popup; + let prevAction: string; + let sidebar: Sidebar; + let settingsidebar: Sidebar; + let searchInstance: any; + let headerThemeSwitch: HTMLElement = document.getElementById('header-theme-switcher'); + let settingElement: HTMLElement = select('.sb-setting-btn'); + let themeList: HTMLElement = document.getElementById('themelist'); + var themeCollection = ['fluent', 'fluent-dark', 'bootstrap5', 'bootstrap5-dark', 'tailwind', 'tailwind-dark', 'material', 'material-dark', 'fabric', 'fabric-dark', 'bootstrap4', 'bootstrap', 'bootstrap-dark', 'highcontrast']; + let themeDropDown: DropDownList; + let cultureDropDown: DropDownList; + let currencyDropDown: DropDownList; + let contentTab: Tab; + let sourceTab: Tab; + let sourceTabItems: object[] = []; + let isExternalNavigation: boolean = true; + let defaultTree: boolean = false; + let intialLoadCompleted: boolean = false; + let resizeManualTrigger: boolean = false; + let leftToggle: Element = select('#sb-toggle-left'); + let sbRightPane: HTMLElement = select('.sb-right-pane'); + let sbContentOverlay: HTMLElement = select('.sb-content-overlay'); + let sbBodyOverlay: HTMLElement = select('.sb-body-overlay'); + let sbHeader: HTMLElement = select('#sample-header'); + let resetSearch: Element = select('.sb-reset-icon'); + let newYear: number = new Date().getFullYear(); + let copyRight: HTMLElement= document.querySelector('.sb-footer-copyright'); + copyRight.innerHTML = "Copyright © 2001 - " + newYear + " Syncfusion Inc."; + /** + * constant to process the sample url + */ + const urlRegex: RegExp = /(npmci\.syncfusion\.com|ej2\.syncfusion\.com)(\/)(development|production)*/; + const sampleRegex: RegExp = /#\/(([^\/]+\/)+[^\/\.]+)/; + // Regex for removal of hidden codes + const reg: RegExp = /.*custom code start([\S\s]*?)custom code end.*/g; + const sbArray: string[] = ['angular', 'react', 'javascript', 'aspnetcore', 'aspnetmvc', 'vue', 'blazor']; + /** + * constant for search operations + */ + let inputele: any = select('#search-input'); + let searchOverlay: Element = select('.e-search-overlay'); + let searchButton: Element = document.getElementById('sb-trigger-search'); + let setResponsiveElement: Element = select('.setting-responsive'); + /** + * Mobile View + */ + let isMobile: boolean = window.matchMedia('(max-width:550px)').matches; + /** + * tablet mode + */ + let isTablet: boolean = window.matchMedia('(min-width:600px) and (max-width: 850px)').matches; + /** + * PC mode + */ + let isPc: boolean = window.matchMedia('(min-width:850px)').matches; + + /** + * default theme on sample loaded + */ + let selectedTheme: string = location.hash.split('/')[1] || 'bootstrap5'; + /** + * Toggle Pane Animation + */ + let toggleAnim: Animation = new Animation({ duration: 500, timingFunction: 'ease' }); + /** + * Left pane sample browser constant + */ + let controlSampleData: any = {}; + let samplesList: Controls[] | { [key: string]: Object }[] = getSampleList(); + let samplesTreeList: any = []; + let execFunction: { [key: string]: Object } = {}; + isMobile = window.matchMedia('(max-width:550px)').matches; + if (Browser.isDevice || isMobile) { + if (sidebar) { + sidebar.destroy(); + } + sidebar = new Sidebar({ width: '280px', showBackdrop: true, closeOnDocumentClick: true, enableGestures: false,change: resizeFunction }); + sidebar.appendTo('#left-sidebar'); + } else { + sidebar = new Sidebar({ + width: '282px', target: document.querySelector('.sb-content '), + showBackdrop: false, + closeOnDocumentClick: false, + enableGestures: false, + change:resizeFunction + }); + sidebar.appendTo('#left-sidebar'); + } + settingsidebar = new Sidebar({ + position: 'Right', width: '282', zIndex: '1003', showBackdrop: true, type: 'Over', enableGestures: false, + closeOnDocumentClick: false + }); + settingsidebar.appendTo('#right-sidebar'); + /** + * Right pane + */ + window.apiList = (samplesJSON as any).apiList; + let sampleNameElement: Element = document.querySelector('#component-name>.sb-sample-text'); + let breadCrumbComponent: Element = document.querySelector('.sb-bread-crumb-text>.category-text'); + let breadCrumSeperator: HTMLElement = select('.category-seperator'); + let breadCrumbSubCategory: HTMLElement = document.querySelector('.sb-bread-crumb-text>.component'); + let breadCrumbSample: Element = document.querySelector('.sb-bread-crumb-text>.crumb-sample'); + let hsplitter: string = '
'; + // tslint:disable-next-line:no-multiline-string + let openNewTemplate: string = `
+
`; + // tslint:disable-next-line:no-multiline-string + let sampleNavigation: string = `
+ +
`; + let plnrTemplate: string = 'Edit in StackBlitz'; + // tslint:disable-next-line:no-multiple-var-decl + let contentToolbarTemplate: string = '
' + hsplitter + openNewTemplate + hsplitter + + '
' + sampleNavigation + '
'; + + let tabContentToolbar: Element = createElement('div', { className: 'sb-content-toolbar', innerHTML: contentToolbarTemplate }); + let apiGrid: Grid; + let demoSection: Element = select('.sb-demo-section'); + /** + * Routing variables + */ + window.navigateSample = (window.navigateSample !== undefined) ? window.navigateSample : (): void => { return; }; + let isInitRedirected: boolean; + let samplePath: string[] = []; + let defaultSamples: any = []; + let samplesAr: string[] = []; + let currentControlID: string; + let currentSampleID: string; + let currentControl: string; + declare let window: MyWindow; + /** + * Popups intitalize + */ + function preventTabSwipe(e: any): void { + if (e.isSwiped) { + e.cancel = true; + } + } + function dynamicTab(e: any): void { + let blockEle: Element = this.element.querySelector('#e-content' + this.tabId + '_' + e.selectedIndex).children[0]; + blockEle.innerHTML = this.items[e.selectedIndex].data; + blockEle.innerHTML = blockEle.innerHTML.replace(reg,''); + blockEle.classList.add('sb-src-code'); + if (blockEle) { + hljs.highlightBlock(blockEle); + } + } + function dynamicTabCreation(obj: any): void { + let tabObj: any; + if (obj) { + tabObj = obj; + } else { tabObj = this; } + let contentEle: Element = tabObj.element.querySelector('#e-content' + tabObj.tabId + '_' + tabObj.selectedItem); + if (!contentEle) { + return; + } + let blockEle: Element = tabObj.element.querySelector('#e-content' + tabObj.tabId + '_' + tabObj.selectedItem).children[0]; + blockEle.innerHTML = tabObj.items[tabObj.selectedItem].data; + blockEle.innerHTML = blockEle.innerHTML.replace(reg,''); + blockEle.classList.add('sb-src-code'); + if (blockEle) { + hljs.highlightBlock(blockEle); + } + } + // tslint:disable-next-line:max-func-body-length + function renderSbPopups(): void { + switcherPopup = new Popup(document.getElementById('sb-switcher-popup'), { + relateTo: document.querySelector('.sb-header-text-right'), position: { X: 'left' }, + collision: { X: 'flip', Y: 'flip' }, + offsetX: 0, + offsetY: -15, + }); + themeSwitherPopup = new Popup(document.getElementById('theme-switcher-popup'), { + offsetY: 2, + relateTo: document.querySelector('.theme-wrapper'), position: { X: 'left', Y: 'bottom' }, + collision: { X: 'flip', Y: 'flip' } + }); + searchPopup = new AutoComplete( + { + dataSource: [], + filtering: function (e: any): void { + if (e.text && e.text.length < 3) { + return; + } + let val: any = searchInstance.search(e.text, { + fields: { + component: { boost: 1 }, + name: { boost: 2 } + }, + expand: true, + boolean: 'AND' + }); + let value: any = []; + if (Browser.isDevice) { + for (let file of val) { + if (file.doc.hideOnDevice !== true) { + value = value.concat(file); + } + } + } + let query: Query = new Query().take(10).select('doc'); + let fields: any = this.fields; + let searchValue: any = Browser.isDevice ? value : val; + e.updateData(searchValue, query, fields) + + }, + placeholder: 'Search here...', + noRecordsTemplate: '
We’re sorry. We cannot find any matches for your search term.
', + fields: { groupBy: 'doc.component', value: 'doc.name', text: 'doc.name' }, + popupHeight: 'auto', + suggestionCount: 10, + highlight: true, + select: (e: any) => { + let data: any = e.itemData.doc; + let hashval: string = '#/' + location.hash.split('/')[1] + '/' + data.dir + '/' + data.url + '.html'; + searchPopup.hidePopup(); + searchOverlay.classList.add('e-search-hidden'); + if (location.hash !== hashval) { + sampleOverlay(); + location.hash = hashval; + window.hashString = location.hash; + setSelectList(); + } + } + }, + inputele + ); + settingsPopup = new Popup(document.getElementById('settings-popup'), { + offsetY: 5, + zIndex: 1001, + relateTo: settingElement, + position: { X: 'right', Y: 'bottom' } + , collision: { X: 'flip', Y: 'flip' } + }); + if (!isMobile) { + settingsPopup.hide(); + settingsidebar.hide(); + } else { + select('.sb-mobile-preference').appendChild(select('#settings-popup')); + } + searchPopup.hidePopup(); + switcherPopup.hide(); + themeSwitherPopup.hide(); + themeDropDown = new DropDownList({ + index: 0, + change: (e: any) => { switchTheme(e.value); } + }); + cultureDropDown = new DropDownList({ + index: 0, + change: (e: any) => { + let value: string = e.value; + changeRtl({ + locale: value, currencyCode: matchedCurrency[value], + enableRtl: value === 'ar' + }); + currencyDropDown.value = matchedCurrency[value]; + setCulture(e.value); + } + }); + currencyDropDown = new DropDownList({ + index: 0, + change: (e: any) => { + changeRtl({ currencyCode: e.value }); + // setCurrencyCode(e.value); + } + }); + cultureDropDown.appendTo('#sb-setting-culture'); + currencyDropDown.appendTo('#sb-setting-currency'); + themeDropDown.appendTo('#sb-setting-theme'); + /** + * Render tab for content + */ + contentTab = new Tab({ + selected: changeTab, selecting: preventTabSwipe + }, + // tslint:disable-next-line:align + '#sb-content'); + // enableRipple(false); + sourceTab = new Tab({ + items: [], + headerPlacement: 'Bottom', cssClass: 'sb-source-code-section', + created: dynamicTabCreation, + selected: dynamicTab, + // headerPlacement: 'Bottom', cssClass: 'sb-source-code-section', + selecting: preventTabSwipe + }, + // tslint:disable-next-line:align + '#sb-source-tab'); + enableRipple(selectedTheme.indexOf('material') !== -1|| !selectedTheme); + /** + * api grid + */ + apiGrid = new Grid({ + width: '100%', + dataSource: [], + allowTextWrap: true, + columns: [ + { field: 'name', headerText: 'Name', template: '#template', width: 180, textAlign: 'Center' }, + { field: 'type', headerText: 'Type', width: 180 }, + { field: 'description', headerText: 'Description', template: '#template-description', width: 200 }, + ], + dataBound: dataBound + }); + apiGrid.appendTo('#api-grid'); + /** + * add header to element + */ + let prevbutton: Button = new Button({ iconCss: 'sb-icons sb-icon-Previous', cssClass: 'e-flat' }, '#mobile-prev-sample'); + let nextbutton: Button = new Button( + { + iconCss: 'sb-icons sb-icon-Next', + cssClass: 'e-flat', iconPosition: 'Right' + }, + // tslint:disable-next-line:align + '#mobile-next-sample'); + let tabHeader: Element = document.getElementById('sb-content-header'); + tabHeader.appendChild(tabContentToolbar); + let openNew: Tooltip = new Tooltip({ + content: 'Open in New Window' + }); + + openNew.appendTo('.sb-open-new-wrapper'); + let previous: Tooltip = new Tooltip({ + content: 'Previous Sample' + }); + + previous.appendTo('#prev-sample'); + let next: Tooltip = new Tooltip({ + content: 'Next Sample' + }); + + select('#right-pane').addEventListener('scroll', (event: any) => { + next.close(); + openNew.close(); + previous.close(); + }); + + next.appendTo('#next-sample'); + } + + /** + * api grid functions + */ + function checkApiTableDataSource(): void { + let hash: string[] = location.hash.split('/'); + let data: Object[] = window.apiList[hash[2] + '/' + hash[3].replace('.html', '')] || []; + if (!data.length) { + contentTab.hideTab(2); + } else { + contentTab.hideTab(2, false); + } + } + function changeTab(args: any): void { + if (args.selectedIndex === 2) { + let hash: string[] = location.hash.split('/'); + let data: Object[] = window.apiList[hash[2] + '/' + hash[3].replace('.html', '')] || []; + if (data.length) { + apiGrid.dataSource = data; + } else { + apiGrid.dataSource = []; + } + } + if (args.selectedIndex === 1) { + sourceTab.items = sourceTabItems; + sourceTab.refresh(); + renderCopyCode(); + dynamicTabCreation(sourceTab); + } + } + function changeRtl(args: any): void { + let elementlist: HTMLElement[] = selectAll('.e-control', document.getElementById('control-content')); + for (let control of elementlist) { + let eleinstance: Object[] = (control).ej2_instances; + if (eleinstance) { + for (let instance of eleinstance) { + (instance).setProperties(args); + } + } + } + } + function dataBound(args: object): void { + if (!this.getRows()) { + return; + } + let gridtrs: number = this.getRows().length; + let trs: any = this.getRows(); + for (let count: number = 0; count < gridtrs; count++) { + let tr1: HTMLElement = trs[count]; + if (tr1.getBoundingClientRect().height > 100) { + let desDiv: Element = tr1.querySelector('.sb-sample-description'); + let tag: Element = createElement('a', { id: 'showtag', innerHTML: ' show more...' }); + tag.addEventListener('click', tagShowmore.bind(this, desDiv)); + desDiv.classList.add('e-custDesription'); + desDiv.appendChild(tag); + } + } + } + + function tagShowmore(target: HTMLElement): void { + target.classList.remove('e-custDesription'); + target.querySelector('#showtag').classList.add('e-display'); + let hideEle: Element = target.querySelector('#hidetag'); + if (!hideEle) { + let tag: Element = createElement('a', { id: 'hidetag', attrs: {}, innerHTML: ' hide less..' }); + target.appendChild(tag); + tag.addEventListener('click', taghideless.bind(this, target)); + } else { + hideEle.classList.remove('e-display'); + } + } + + function taghideless(target: HTMLElement): void { + target.querySelector('#hidetag').classList.add('e-display'); + target.querySelector('#showtag').classList.remove('e-display'); + target.classList.add('e-custDesription'); + } + + function setPressedAttribute(ele: HTMLElement): void { + let status: boolean = ele.classList.contains('active'); + ele.setAttribute('aria-pressed', status ? 'true' : 'false'); + } + + // tslint:disable-next-line:max-func-body-length + function sbHeaderClick(action: string, preventSearch?: boolean | any): void { + if (openedPopup) { + openedPopup.hide(new Animation({ name: 'FadeOut', duration: 300, delay: 0 })); + } + if (preventSearch !== true && !searchOverlay.classList.contains('sb-hide')) { + searchOverlay.classList.add('sb-hide'); + searchButton.classList.remove('active'); + setPressedAttribute(searchButton); + } + let curPopup: Popup; + switch (action) { + case 'changeSampleBrowser': + curPopup = switcherPopup; + break; + case 'changeTheme': + headerThemeSwitch.classList.toggle('active'); + setPressedAttribute(headerThemeSwitch); + curPopup = themeSwitherPopup; + break; + case 'toggleSettings': + settingElement.classList.toggle('active'); + setPressedAttribute(settingElement); + themeDropDown.index = themeCollection.indexOf(selectedTheme); + curPopup = settingsPopup; + break; + } + if (action === 'closePopup') { + headerThemeSwitch.classList.remove('active'); + settingElement.classList.remove('active'); + setPressedAttribute(headerThemeSwitch); + setPressedAttribute(settingElement); + if (settingsidebar.isOpen && preventSearch && preventSearch.target && preventSearch.target.closest !== undefined && + (preventSearch.target.closest('#sb-setting-theme_popup') || preventSearch.target.closest('#sb-setting-culture_popup') || + preventSearch.target.closest('#sb-setting-currency_popup') || preventSearch.target.closest('.e-sidebar-overlay'))) { + settingsidebar.hide(); + } + } + if (curPopup && curPopup !== openedPopup) { + curPopup.show(new Animation({ name: 'FadeIn', duration: 400, delay: 0 })); + openedPopup = curPopup; + } else { + openedPopup = null; + } + prevAction = action; + } + /** + * toggle search overlay + */ + function toggleSearchOverlay(): void { + sbHeaderClick('closePopup', true); + inputele.value = ''; + searchPopup.hidePopup(); + searchButton.classList.toggle('active'); + setPressedAttribute(searchButton); + searchOverlay.classList.toggle('sb-hide'); + if (!searchOverlay.classList.contains('sb-hide')) { + inputele.focus(); + } + } + /** + * Theme change function + */ + + function changeTheme(e: MouseEvent): void { + let target: Element = e.target; + target = closest(target, 'li'); + let themeName: string = target.id; + switchTheme(themeName); + // loadTheme(themeName); + } + + function switchTheme(str: string): void { + let hash: string[] = location.hash.split('/'); + if (hash[1] !== str) { + hash[1] = str; + location.hash = hash.join('/'); + } + } + + function highlight(searchString: string, listElement: any): void { + let regex: RegExp = new RegExp(searchString.split(' ').join('|'), 'gi'); + let contentElements: any[] = selectAll('.e-list-item .e-text-content .e-list-text', listElement); + for (let i: number = 0; i < contentElements.length; i++) { + let spanText: any = select('.sb-highlight'); + if (spanText) { + contentElements[i].innerHTML = contentElements[i].text; + } + contentElements[i].innerHTML = contentElements[i].innerHTML.replace(regex, (matched: string) => { + return '' + matched + ''; + }); + } + } + /** + * Storing the mouse action + */ + function setMouseOrTouch(e: MouseEvent): void { + let ele: HTMLElement = closest(e.target, '.sb-responsive-items'); + let switchType: string = ele.id; + changeMouseOrTouch(switchType); + sbHeaderClick('closePopup'); + localStorage.setItem('ej2-switch', switchType); + location.reload(); + } + /** + * button cick handlers + */ + function onNextButtonClick(arg: MouseEvent): void { + sampleOverlay(); + let curSampleUrl: string = location.hash; + let inx: number = samplesAr.indexOf(curSampleUrl); + if (inx !== -1) { + let prevhref: string = samplesAr[inx]; + let curhref: string = samplesAr[inx + 1]; + location.href = curhref; + } + window.hashString = location.hash; + setSelectList(); + } + + function onPrevButtonClick(arg: MouseEvent): void { + sampleOverlay(); + let curSampleUrl: string = location.hash; + let inx: number = samplesAr.indexOf(curSampleUrl); + if (inx !== -1) { + let prevhref: string = samplesAr[inx]; + let curhref: string = samplesAr[inx - 1]; + location.href = curhref; + } + window.hashString = location.hash; + setSelectList(); + } + /** + * Resize event processing + */ + // tslint:disable-next-line:max-func-body-length + function processResize(e: any): void { + let toggle: boolean = sidebar.isOpen; + isMobile = window.matchMedia('(max-width:550px)').matches; + isTablet = window.matchMedia('(min-width:550px) and (max-width: 850px)').matches; + if (isTablet) { + resizeManualTrigger = false; + } + if (resizeManualTrigger || (isMobile && select('#right-sidebar').classList.contains('sb-hide'))) { + return; + } + isPc = window.matchMedia('(min-width:850px)').matches; + processDeviceDependables(); + setLeftPaneHeight(); + let leftPane: Element = select('.sb-left-pane'); + let rightPane: Element = select('.sb-right-pane'); + let footer: Element = select('.sb-footer-left'); + let pref: Element = select('#settings-popup'); + if (isTablet || isMobile) { + contentTab.hideTab(1); + } else { + contentTab.hideTab(1, false); + } + if (toggle && !isPc) { + toggleLeftPane(); + } + if (isMobile || isTablet) { + sidebar.target = null; + sidebar.showBackdrop = true; + sidebar.closeOnDocumentClick = true; + select('.sb-left-footer-links').appendChild(footer); + if (isTablet) { + select('.sb-footer').appendChild(footer); + } + if (isVisible('.sb-mobile-overlay')) { + removeMobileOverlay(); + } + if (!pref.parentElement.classList.contains('sb-mobile-preference')) { + select('.sb-mobile-preference').appendChild(pref); + settingsPopup.show(); + } + let propPanel: Element = select('#control-content .property-section'); + if (propPanel) { + select('.sb-mobile-prop-pane').appendChild(propPanel); + select('.sb-mobile-setting').classList.remove('sb-hide'); + } + if (isVisible('.sb-mobile-overlay')) { + removeMobileOverlay(); + } + } + if (isPc) { + sidebar.target = document.querySelector('.sb-content '); + sidebar.showBackdrop = false; + sidebar.closeOnDocumentClick = false; + if (isVisible('.sb-mobile-overlay')) { + removeMobileOverlay(); + } + if (isPc && !Browser.isDevice && isVisible('.sb-left-pane')) { + rightPane.classList.remove('control-fullview'); + } + if (pref.parentElement.classList.contains('sb-mobile-preference')) { + select('#sb-popup-section').appendChild(pref); + settingsidebar.hide(); + settingsPopup.hide(); + } + let mobilePropPane: Element = select('.sb-mobile-prop-pane .property-section'); + if (mobilePropPane) { + select('#control-content').appendChild(mobilePropPane); + } + if (!select('.sb-mobile-right-pane').classList.contains('sb-hide')) { + toggleRightPane(); + } + } + if (switcherPopup) { + switcherPopup.refreshPosition(); + } + } + + function resizeFunction(): void { + if (!isMobile && !isTablet) { + resizeManualTrigger = true; + setTimeout(cusResize(), 400); + } + } + + function resetInput(arg: MouseEvent): void { + arg.preventDefault(); + arg.stopPropagation(); + (document.getElementById('search-input')).value = ''; + document.getElementById('search-input-wrapper').setAttribute('data-value', ''); + searchPopup.hidePopup(); + } + /** + * Binding events for sample browser operations + */ + function bindEvents(): void { + document.getElementById('sb-switcher').addEventListener('click', (e: MouseEvent) => { + e.preventDefault(); + e.stopPropagation(); + sbHeaderClick('changeSampleBrowser'); + }); + select('.sb-header-text-right').addEventListener('click', (e: MouseEvent) => { + e.preventDefault(); + e.stopPropagation(); + sbHeaderClick('changeSampleBrowser'); + }); + headerThemeSwitch.addEventListener('click', (e: MouseEvent) => { + e.preventDefault(); + e.stopPropagation(); + sbHeaderClick('changeTheme'); + }); + themeList.addEventListener('click', changeTheme); + // tslint:disable + document.addEventListener((Browser.isDevice ? Browser.touchStartEvent : 'click'), sbHeaderClick.bind(this, 'closePopup')); + settingElement.addEventListener('click', (e: MouseEvent) => { + e.preventDefault(); + e.stopPropagation(); + sbHeaderClick('toggleSettings'); + }); + searchButton.addEventListener('click', (e: MouseEvent) => { + e.preventDefault(); + e.stopPropagation(); + toggleSearchOverlay(); + }); + document.getElementById('settings-popup').addEventListener('click', (e: MouseEvent) => { + e.preventDefault(); + e.stopPropagation(); + }); + inputele.addEventListener('click', (e: MouseEvent) => { + e.preventDefault(); + e.stopPropagation(); + }); + setResponsiveElement.addEventListener('click', setMouseOrTouch); + select('#sb-left-back').addEventListener('click', showHideControlTree); + leftToggle.addEventListener('click', toggleLeftPane); + select('.sb-header-settings').addEventListener('click', viewMobilePrefPane); + select('.sb-mobile-setting').addEventListener('click', viewMobilePropPane); + resetSearch.addEventListener('click', resetInput); + /** + * plnkr trigger + */ + document.getElementById('open-plnkr').addEventListener('click', () => { + let plnkrForm: HTMLFormElement = select('#stack-form') as HTMLFormElement; + if (plnkrForm) { + plnkrForm.submit(); + } + }); + document.getElementById('switch-sb').addEventListener('click', (e: MouseEvent) => { + let target: Element = closest(e.target, 'li'); + if (target) { + let anchor: any = target.querySelector('a'); + if (anchor) { + anchor.click(); + } + } + }); + /** + * prev-button-click + */ + select('#next-sample').addEventListener('click', onNextButtonClick); + select('#mobile-next-sample').addEventListener('click', onNextButtonClick); + select('#prev-sample').addEventListener('click', onPrevButtonClick); + select('#mobile-prev-sample').addEventListener('click', onPrevButtonClick); + /** + * resize event + */ + window.addEventListener('resize', processResize); + select('.sb-right-pane').addEventListener('click', () => { + if (isTablet && isLeftPaneOpen()) { + toggleLeftPane(); + } + }); + // select('.copycode').addEventListener('click', copyCode); + } + + /** + * set anchor links for other sample browser + */ + + /** + * + */ + function copyCode(): void { + let copyElem: HTMLElement = selectAll('.sb-src-code')[sourceTab.selectedItem] as HTMLElement; + let textArea: HTMLTextAreaElement = createElement('textArea') as HTMLTextAreaElement; + textArea.textContent = copyElem.textContent.trim(); + document.body.appendChild(textArea); + textArea.select(); + document.execCommand('copy'); + detach(textArea); + (select('.copy-tooltip') as any).ej2_instances[0].close(); + } + function renderCopyCode() { + let ele: HTMLElement = createElement('div', { className: 'copy-tooltip', innerHTML: '
' }); + document.getElementById('sb-source-tab').appendChild(ele); + select('.copycode').addEventListener('click', copyCode); + let copiedTooltip: Tooltip = new Tooltip({ + content: 'Copied to clipboard ', + position: 'BottomCenter', + opensOn: 'Click', + closeDelay: 500 + }); + copiedTooltip.appendTo(ele); + select('.copycode').addEventListener('click', copyCode); + } + + function setSbLink(): void { + let href: string = location.href; + let link: string[] = href.match(urlRegex); + let sample: string = href.match(sampleRegex)[1]; + for (let sb of sbArray) { + let ele: HTMLFormElement = select('#' + sb); + if (sb === 'aspnetcore' || sb === 'aspnetmvc') { + ele.href = sb === 'aspnetcore' ? 'https://ej2.syncfusion.com/aspnetcore/' : 'https://ej2.syncfusion.com/aspnetmvc/'; + } else if (sb === 'blazor') { + ele.href = 'https://blazor.syncfusion.com/demos/'; + } else { + ele.href = ((link) ? ('http://' + link[1] + '/' + (link[3] ? (link[3] + '/') : '')) : ('https://ej2.syncfusion.com/')) + + sb + '/' + 'demos/#/' + sample + (sb === 'javascript' ? '.html' : ''); + } + } + } + /** + * Set Mouse or Touch on page load + */ + function changeMouseOrTouch(str: string): void { + let activeEle: Element = setResponsiveElement.querySelector('.active'); + if (activeEle) { + activeEle.classList.remove('active'); + } + if (str === 'mouse') { + document.body.classList.remove('e-bigger'); + } else { + document.body.classList.add('e-bigger'); + } + setResponsiveElement.querySelector('#' + str).classList.add('active'); + } + /** + * load theme on page loading + */ + function loadTheme(theme: string): void { + let body: HTMLElement = document.body; + if (body.classList.length > 0) { + for (let themeItem of themeCollection) { + body.classList.remove(themeItem); + } + } + body.classList.add(theme); + themeList.querySelector('.active').classList.remove('active'); + themeList.querySelector('#' + theme).classList.add('active'); + let doc: HTMLFormElement = document.getElementById('themelink'); + doc.setAttribute('href','./styles/' + theme + '.css'); + let ajax: Ajax = new Ajax('./styles/' + theme + '.css', 'GET', true); + ajax.send().then((result: any) => { + selectedTheme = theme; + //renderleftpane + renderLeftPaneComponents(); + //renderPopups + renderSbPopups(); + bindEvents(); + if (isTablet || isMobile) { + contentTab.hideTab(1); + } + // add routing + //triggerRouting + processDeviceDependables(); + addRoutes(samplesList); + //setSbLink(); + //bindEvents(); + /** + * load elastic lunr + */ + if (isTablet && isLeftPaneOpen()) { + toggleLeftPane(); + } + (elasticlunr as any).clearStopWords(); + searchInstance = (elasticlunr as any).Index.load(searchJson); + hasher.initialized.add(parseHash); + hasher.changed.add(parseHash); + hasher.init(); + }); + } + /** + * Mobile Overlay + */ + + function removeMobileOverlay(): void { + select('.sb-mobile-overlay').classList.add('sb-hide'); + } + function isLeftPaneOpen(): boolean { + return sidebar.isOpen; + } + function isVisible(elem: string): boolean { + return !select(elem).classList.contains('sb-hide'); + } + /** + * left pane toggle function + */ + function setLeftPaneHeight(): void { + let leftPane: HTMLElement = select('.sb-left-pane') as HTMLElement; + leftPane.style.height = isMobile ? (document.body.offsetHeight + 'px') : ''; + } + + function toggleLeftPane(): void { + let reverse: boolean = sidebar.isOpen; + select('#left-sidebar').classList.remove('sb-hide'); + if (!reverse) { + leftToggle.classList.add('toggle-active'); + } else { + leftToggle.classList.remove('toggle-active'); + } + if (sidebar) { + reverse = sidebar.isOpen; + if (reverse) { + sidebar.hide(); + } else { + sidebar.show(); + } + } + } + + function cusResize() { + let event: Event; + if (typeof (Event) === 'function') { + event = new Event('resize'); + } else { + event = document.createEvent('Event'); + event.initEvent('resize', true, true); + } + window.dispatchEvent(event); + } + + + /** + * Mobile Right pane toggle functions + */ + function toggleRightPane(): void { + select('#right-sidebar').classList.remove('sb-hide'); + themeDropDown.index = themeCollection.indexOf(selectedTheme); + if (isMobile) { + settingsidebar.toggle(); + } + } + function viewMobilePrefPane(): void { + select('.sb-mobile-prop-pane').classList.add('sb-hide'); + select('.sb-mobile-preference').classList.remove('sb-hide'); + toggleRightPane(); + } + function viewMobilePropPane(): void { + select('.sb-mobile-preference').classList.add('sb-hide'); + select('.sb-mobile-prop-pane').classList.remove('sb-hide'); + toggleRightPane(); + } + /** + * left pane samples switcher functions start + */ + function getSampleList(): Controls[] | { [key: string]: Object }[] { + if (Browser.isDevice) { + // (select('.copy-tooltip') as HTMLElement).style.display = 'none'; + let tempList: Controls[] = extend([], samplesJSON.samplesList); + let sampleList: any = []; + for (let temp of tempList) { + if (temp.hideOnDevice == true) { + continue; + } + let data: DataManager = new DataManager((temp as any).samples); + temp.samples = data.executeLocal(new Query().where('hideOnDevice', 'notEqual', true)); + sampleList = sampleList.concat(temp); + } + return sampleList; + } + return samplesJSON.samplesList; + } + + function renderLeftPaneComponents(): void { + samplesTreeList = getTreeviewList(samplesList); + let sampleTreeView: TreeView = new TreeView( + { + fields: { + dataSource: samplesTreeList, id: 'id', parentID: 'pid', + text: 'name', hasChildren: 'hasChild', htmlAttributes: 'url' + }, + nodeClicked: controlSelect, + nodeTemplate: '
${name}' + + '${if(type === "update")}Updated' + + '${else}${if(type)}${type}${/if}${/if}
' + }, + '#controlTree'); + let controlList: ListView = new ListView( + { + dataSource: controlSampleData[location.hash.split('/')[2]] || controlSampleData.grid, + fields: { id: 'uid', text: 'name', groupBy: 'order', htmlAttributes: 'data' }, + select: controlSelect, + template: '
${name}' + + '${if(type === "update")}Updated' + + '${else}${if(type)}${type}${/if}${/if}' + + '${if(directory)}
${/if}
', + groupTemplate: '${if(items[0]["category"])}
' + + '${items[0].category}' + + '
${/if}', + actionComplete: setSelectList + }, + '#controlList'); + } + function getTreeviewList(list: any[]): Controls[] | { [key: string]: Object }[] { + let id: number; + let pid: number; + let tempList: any[] = []; + let category: string = ''; + for (let i: number = 0; i < list.length; i++) { + if (category !== list[i].category) { + category = list[i].category; + tempList = tempList.concat({ id: i + 1, name: list[i].category, hasChild: true, expanded: true }); + pid = i + 1; + id = pid; + } + id += 1; + tempList = tempList.concat( + { + id: id, + pid: pid, + name: list[i].name, + type: list[i].type, + url: { + 'data-path': '/' + list[i].directory + '/' + list[i].samples[0].url + '.html', + 'control-name': list[i].directory, + } + }); + controlSampleData[list[i].directory] = getSamples(list[i].samples); + } + return tempList; + } + + function getSamples(samples: any): any { + let tempSamples: any = []; + for (let i: number = 0; i < samples.length; i++) { + tempSamples[i] = samples[i]; + tempSamples[i].data = { 'sample-name': samples[i].url, 'data-path': '/' + samples[i].dir + '/' + samples[i].url + '.html' }; + } + return tempSamples; + } + function controlSelect(arg: any): void { + let path: string = (arg.node || arg.item).getAttribute('data-path'); + let curHashCollection: string = '/' + location.hash.split('/').slice(2).join('/'); + if (path) { + controlListRefresh(arg.node || arg.item); + if (path !== curHashCollection) { + sampleOverlay(); + let theme: string = location.hash.split('/')[1] || 'bootstrap5'; + if (arg.item && ((isMobile && !select('#left-sidebar').classList.contains('sb-hide')) || + ((isTablet || (Browser.isDevice && isPc)) && isLeftPaneOpen()))) { + toggleLeftPane(); + } + window.hashString = '#/' + theme + path; + setTimeout(() => { + location.hash = '#/' + theme + path; + }, 600); + } + } + } + + function controlListRefresh(ele: Element): void { + let samples: any = controlSampleData[ele.getAttribute('control-name')]; + if (samples) { + let listView: ListView = (select('#controlList') as any).ej2_instances[0]; + listView.dataSource = samples; + showHideControlTree(); + } + } + + function showHideControlTree(): void { + let controlTree: HTMLElement = select('#controlTree') as HTMLElement; + let controlList: HTMLElement = select('#controlSamples') as HTMLElement; + let reverse: boolean = (select('#controlTree') as HTMLElement).style.display === 'none'; + reverse ? viewSwitch(controlList, controlTree, reverse) : viewSwitch(controlTree, controlList, reverse); + } + + function viewSwitch(from: HTMLElement, to: HTMLElement, reverse: boolean): void { + let anim: Animation = new Animation({ duration: 500, timingFunction: 'ease' }); + let controlTree: HTMLElement = select('#controlTree') as HTMLElement; + let controlList: Element = select('#controlList'); + controlTree.style.overflowY = 'hidden'; + controlList.classList.remove('e-view'); + controlList.classList.remove('sb-control-list-top'); + controlList.classList.add('sb-adjust-juggle'); + to.style.display = ''; + anim.animate(from, { + name: reverse ? 'SlideRightOut' : 'SlideLeftOut', end: (): void => { + controlTree.style.overflowY = 'auto'; + from.style.display = 'none'; + controlList.classList.add('e-view'); + controlList.classList.add('sb-control-list-top'); + controlList.classList.remove('sb-adjust-juggle'); + } + }); + anim.animate(to, { name: reverse ? 'SlideLeftIn' : 'SlideRightIn' }); + } + + function setSelectList(): void { + let hString: string = window.hashString || location.hash; + let hash: string[] = hString.split('/'); + let list: ListView = (select('#controlList') as any).ej2_instances[0]; + let control: Element = select('[control-name="' + hash[2] + '"]'); + if (control) { + let data: any = list.dataSource; + let samples: any = controlSampleData[control.getAttribute('control-name')]; + if (JSON.stringify(data) !== JSON.stringify(samples)) { + list.dataSource = samples; + list.dataBind(); + } + let selectSample: Element = select('[sample-name="' + hash.slice(-1)[0].split('.html')[0] + '"]'); + if (selectSample) { + if ((select('#controlTree') as HTMLElement).style.display !== 'none') { + showHideControlTree(); + } + list.selectItem(selectSample); + selectSample.scrollIntoView({ block: "nearest" }) + } + } else { + showHideControlTree(); + list.selectItem(select('[sample-name="grid-overview"]')); + } + } + /** + * Sample Navigation + */ + function toggleButtonState(id: string, state: boolean): void { + let ele: HTMLButtonElement = document.getElementById(id); + let mobileEle: HTMLButtonElement = document.getElementById('mobile-' + id); + ele.disabled = state; + mobileEle.disabled = state; + if (state) { + mobileEle.classList.add('e-disabled'); + ele.classList.add('e-disabled'); + } else { + mobileEle.classList.remove('e-disabled'); + ele.classList.remove('e-disabled'); + } + } + /** + * Routing functions + */ + + function setPropertySectionHeight(): void { + let propertypane: HTMLElement = select('.property-section'); + let ele: HTMLElement = document.querySelector('.control-section'); + if (ele && propertypane) { + ele.classList.add('sb-property-border'); + } else { + ele.classList.remove('sb-property-border'); + } + } + + function routeDefault(): void { + addRoute('', () => { + window.location.href = '#/' + selectedTheme + '/grid/grid-overview.html'; + isInitRedirected = true; + }); + bypassed.add((request: string) => { + let hash: string[] = request.split('.html')[0].split('/'); + if (samplePath.indexOf(hash.slice(1).join('/')) === -1) { + location.hash = '#/' + hash[0] + '/' + (defaultSamples[hash[1]] || 'grid/grid-overview.html'); + isInitRedirected = true; + } + }); + } + function destroyControls(): void { + let elementlist: HTMLElement[] = selectAll('.e-control', document.getElementById('control-content')); + for (let control of elementlist) { + let eleinstance: Object[] = (control).ej2_instances; + if (eleinstance) { + for (let instance of eleinstance) { + (instance).destroy(); + } + } + } + } + + + function loadScriptfile(path: string): Promise { + let scriptEle: HTMLScriptElement = document.querySelector('script[src="' + path + '"]'); + let doFun: Function; + let p2: Promise = new Promise((resolve: Function, reject: Function) => { + doFun = resolve; + }); + if (!scriptEle) { + scriptEle = document.createElement('script'); + scriptEle.setAttribute('type', 'text/javascript'); + scriptEle.setAttribute('src', path); + scriptEle.onload = <() => void>doFun; + if (typeof scriptEle !== 'undefined') { + document.getElementsByTagName('head')[0].appendChild(scriptEle); + } + } else { + doFun(); + } + return p2; + } + function getExecFunction(sample: string): Function { + if ((execFunction).hasOwnProperty(sample)) { + return execFunction[sample]; + } else { + return execFunction[sample] = (window as any).default; + } + } + function errorHandler(error: string): void { + document.getElementById('control-content').innerHTML = error ? error : 'Not Available'; + select('#control-content').classList.add('error-content'); + removeOverlay(); + } + function plunker(results: string): void { + let plnkr: { [key: string]: Object } = JSON.parse(results); + let prevForm: Element = select('#stack-form'); + if (prevForm) { + detach(prevForm); + } + let form: HTMLFormElement = createElement('form'); + let res: string = ((location.href as any).indexOf('ej2.syncfusion.com') !== -1 ? 'https:' : 'http:') + '//stackblitz.com/run'; + form.setAttribute('action', res); + form.setAttribute('method', 'post'); + form.setAttribute('target', '_blank'); + form.id = 'stack-form'; + form.style.display = 'none'; + document.body.appendChild(form); + let plunks: string[] = Object.keys(plnkr); + for (let x: number = 0; x < plunks.length; x++) { + createStackInput('project[files][' + plunks[x] + ']', plnkr[plunks[x]], form); + } + createStackInput('project[template]', 'typescript', form); + createStackInput('project[description]', 'Essential JS 2 Sample', form); + createStackInput('project[settings]', '{"compile":{"clearConsole":true}}', form); + createStackInput('project[dependencies]', packages, form); + } + + function createStackInput(name: string, value: string, form: HTMLFormElement): void { + let input: HTMLElement = createElement('input'); + input.setAttribute('type', 'hidden'); + input.setAttribute('name', name); + input.setAttribute('value', value.replace(/{{theme}}/g, selectedTheme).replace(/{{ripple}}/, + (selectedTheme.indexOf('material') !== -1) ? 'import { enableRipple } from \'@syncfusion/ej2-base\';\nenableRipple(true);\n' : '')); + form.appendChild(input); + } + + // tslint:disable-next-line:max-func-body-length + function addRoutes(samplesList: Controls[]): void { + for (let node of samplesList) { + defaultSamples[node.directory] = node.directory + '/' + node.samples[0].url + '.html'; + let dataManager: DataManager = new DataManager((node as any).samples); + let samples: Samples[] & { [key: string]: Object }[] = + dataManager.executeLocal(new Query().sortBy('order', 'ascending')); + for (let subNode of samples) { + let control: string = node.directory; + let sample: string = subNode.url; + samplePath = samplePath.concat(control + '/' + sample); + let sampleName: string = node.name + ' / ' + ((node.name !== subNode.category) ? + (subNode.category + ' / ') : '') + subNode.name; + let selectedTheme: string = location.hash.split('/')[1] ? location.hash.split('/')[1] : 'bootstrap5'; + let urlString: string = '/' + selectedTheme + '/' + control + '/' + sample + '.html'; + samplesAr.push('#' + urlString); + // tslint:disable-next-line:max-func-body-length + addRoute(urlString, () => { + let controlID: string = node.uid; + let sampleID: string = subNode.uid; + (document.getElementById('open-plnkr') as any).disabled = true; + let openNew: HTMLFormElement = (select('#openNew') as HTMLFormElement); + if (openNew) { + openNew.href = location.href.split('#')[0] + node.directory + '/' + subNode.url + '/index.html'; + } + setSbLink(); + // select('#switch').classList.remove('hidden'); + //document.getElementById('source-panel').style.display = 'block'; + // .href = + // location.href.split('#')[0] + 'samples/' + node.directory + '/' + subNode.url + '/index.html'; + let sourcePromise: Array> = []; + let sObj: any[] = []; + sourcePromise.push((new Ajax('src/' + control + '/' + sample + '.ts', 'GET', true)).send()); + sObj.push({ + header: { text: sample + '.ts' }, + data: '', + content: sample + '.ts' + }); + sourcePromise.push((new Ajax('src/' + control + '/' + sample + '.html', 'GET', true)).send()); + sObj.push({ + header: { text: sample + '.html' }, + data: '', + content: sample + '.html' + }); + if (subNode.sourceFiles) { + sourcePromise = []; + sObj = []; + let sourcefiles: any = subNode.sourceFiles; + for (let sfile of sourcefiles) { + let spromise: Promise = (new Ajax(sfile.path, 'GET', true)).send(); + sourcePromise.push(spromise); + sObj.push({ + header: { text: sfile.displayName }, + data: '', + content: sfile.displayName + }); + } + } + let content: any; + Promise.all(sourcePromise).then((results: Object[]): void => { + results.forEach((value, index) => { + let srcobj = sObj[index]; + if (srcobj.content.indexOf('.html') > 0) { + content = getStringWithOutDescription(value.toString(), /(\'|\")description/g); + content = getStringWithOutDescription(content.toString(), /(\'|\")action-description/g) + } + let defRegex: RegExp = /(this.|export |\(window as any\).)default (= |)\(\)(: void|) => {/g; + let resValue: string = value.toString().replace(defRegex, ''); + resValue = resValue.replace(/&/g, '&').replace(/"/g, '"').replace(//g, '>'); + var lInd = resValue.lastIndexOf('};'); + resValue = resValue.substring(0, lInd) + resValue.substring(lInd + 2); + content = srcobj.content.indexOf('.html') > 0 ? content.replace(/@section (ActionDescription|Description){[^}]*}/g, '').replace(/&/g, '&') + .replace(/"/g, '"').replace(/"/g, '"').replace(//g, '>') : resValue; + + sObj[index].data = content; + }); + sourceTabItems = sObj; + }); + let ajaxHTML: Ajax = new Ajax('src/' + control + '/' + sample + '.html', 'GET', true); + let p1: Promise = ajaxHTML.send(); + let p2: Promise = loadScriptfile('src/' + control + '/' + sample + '.js'); + /** + * sample header + */ + sampleNameElement.innerHTML = node.name; + /** + * BreadCrumb + */ + contentTab.selectedItem = 0; + breadCrumbComponent.innerHTML = node.name; + if (node.name !== subNode.category) { + breadCrumbSubCategory.innerHTML = subNode.category; + breadCrumbSubCategory.style.display = ''; + breadCrumSeperator.style.display = ''; + } else { + breadCrumbSubCategory.style.display = 'none'; + breadCrumSeperator.style.display = 'none'; + } + breadCrumbSample.innerHTML = subNode.name; + let title: HTMLElement = document.querySelector('title'); + title.innerHTML = node.name + ' · ' + subNode.name + ' · Essential JS 2 · Syncfusion '; + let plunk: Ajax = new Ajax('src/' + control + '/' + sample + '-stack.json', 'GET', true); + let p3: Promise = plunk.send(); + p3.then((result: Object) => { + (document.getElementById('open-plnkr') as any).disabled = false; + plunker(result); + }); + Promise.all([ + p1, + p2 + ]).then((results: Object[]): void => { + let htmlString: string = results[0].toString(); + destroyControls(); + currentControlID = controlID; + currentSampleID = sampleID; + currentControl = node.directory; + let curIndex: number = samplesAr.indexOf(location.hash); + let samLength: number = samplesAr.length - 1; + if (curIndex === samLength) { + toggleButtonState('next-sample', true); + } else { + toggleButtonState('next-sample', false); + } + if (curIndex === 0) { + toggleButtonState('prev-sample', true); + } else { + toggleButtonState('prev-sample', false); + } + select('#control-content').classList.remove('error-content'); + document.getElementById('control-content').innerHTML = htmlString; + let controlEle: Element = document.querySelector('.control-section'); + let controlString: string = controlEle.innerHTML; + controlEle.innerHTML = ''; + controlEle.appendChild(createElement('div', { className: 'control-wrapper', innerHTML: controlString })); + renderPropertyPane('#property'); + renderDescription(); + renderActionDescription(); + //document.getElementsByClassName('sample-name')[0].innerHTML = sampleName; + let htmlCode: HTMLElement = createElement('div', { innerHTML: htmlString }); + let description: Element = htmlCode.querySelector('#description'); + if (description) { + detach(description); + } + let actionDesc: Element = htmlCode.querySelector('#action-description'); + if (actionDesc) { + detach(actionDesc); + } + getExecFunction(control + sample)(); + window.navigateSample(); + //select('.sb-loading').classList.add('hidden'); + //document.body.classList.remove('sb-overlay'); + //select('#source-panel').classList.remove('hidden'); + isExternalNavigation = defaultTree = false; + checkApiTableDataSource(); + setPropertySectionHeight(); + removeOverlay(); + let mobilePropPane: Element = select('.sb-mobile-prop-pane .property-section'); + if (mobilePropPane) { + detach(mobilePropPane); + } + let propPanel: Element = select('#control-content .property-section'); + if (isMobile) { + if (propPanel) { + select('.sb-mobile-setting').classList.remove('sb-hide'); + select('.sb-mobile-prop-pane').appendChild(propPanel); + } else { + select('.sb-mobile-setting').classList.add('sb-hide'); + } + } + }); + }); + } + } + let isTempLocaion: string; + if(location.hash.indexOf('.html') === -1) { + isTempLocaion = location.hash+".html"; + } else { + isTempLocaion = location.hash; + } + if(Browser.isDevice) + { + if(location.hash && location.hash !== "" && samplesAr.indexOf(isTempLocaion) == -1) { - dataSource: [], - filtering: function (e: any): void { - if (e.text && e.text.length < 3) { - return; - } - let val: any = searchInstance.search(e.text, { - fields: { - component: { boost: 1 }, - name: { boost: 2 } - }, - expand: true, - boolean: 'AND' - }); - let value: any = []; - if (Browser.isDevice) { - for (let file of val) { - if (file.doc.hideOnDevice !== true) { - value = value.concat(file); - } - } - } - let query: Query = new Query().take(10).select('doc'); - let fields: any = this.fields; - let searchValue: any = Browser.isDevice ? value : val; - e.updateData(searchValue, query, fields) - - }, - placeholder: 'Search here...', - noRecordsTemplate: '
We’re sorry. We cannot find any matches for your search term.
', - fields: { groupBy: 'doc.component', value: 'doc.name', text: 'doc.name' }, - popupHeight: 'auto', - suggestionCount: 10, - highlight: true, - select: (e: any) => { - let data: any = e.itemData.doc; - let hashval: string = '#/' + location.hash.split('/')[1] + '/' + data.dir + '/' + data.url + '.html'; - searchPopup.hidePopup(); - searchOverlay.classList.add('e-search-hidden'); - if (location.hash !== hashval) { - sampleOverlay(); - location.hash = hashval; - window.hashString = location.hash; - setSelectList(); - } - } - }, - inputele - ); - settingsPopup = new Popup(document.getElementById('settings-popup'), { - offsetY: 5, - zIndex: 1001, - relateTo: settingElement, - position: { X: 'right', Y: 'bottom' } - , collision: { X: 'flip', Y: 'flip' } - }); - if (!isMobile) { - settingsPopup.hide(); - settingsidebar.hide(); - } else { - select('.sb-mobile-preference').appendChild(select('#settings-popup')); - } - searchPopup.hidePopup(); - switcherPopup.hide(); - themeSwitherPopup.hide(); - themeDropDown = new DropDownList({ - index: 0, - change: (e: any) => { switchTheme(e.value); } - }); - cultureDropDown = new DropDownList({ - index: 0, - change: (e: any) => { - let value: string = e.value; - changeRtl({ - locale: value, currencyCode: matchedCurrency[value], - enableRtl: value === 'ar' - }); - currencyDropDown.value = matchedCurrency[value]; - setCulture(e.value); + let toastObj: Toast = new Toast({ + position: { + X: 'Right' + } + }); + toastObj.appendTo('#sb-home'); + setTimeout( + () => { + toastObj.show({ + content: `${location.hash.split('/')[2]} component not supported in mobile device` + }); + }, 200); } - }); - currencyDropDown = new DropDownList({ - index: 0, - change: (e: any) => { - changeRtl({ currencyCode: e.value }); - // setCurrencyCode(e.value); - } - }); - cultureDropDown.appendTo('#sb-setting-culture'); - currencyDropDown.appendTo('#sb-setting-currency'); - themeDropDown.appendTo('#sb-setting-theme'); - /** - * Render tab for content - */ - contentTab = new Tab({ - selected: changeTab, selecting: preventTabSwipe - }, - // tslint:disable-next-line:align - '#sb-content'); - // enableRipple(false); - sourceTab = new Tab({ - items: [], - headerPlacement: 'Bottom', cssClass: 'sb-source-code-section', - created: dynamicTabCreation, - selected: dynamicTab, - // headerPlacement: 'Bottom', cssClass: 'sb-source-code-section', - selecting: preventTabSwipe - }, - // tslint:disable-next-line:align - '#sb-source-tab'); - enableRipple(selectedTheme.indexOf('material') !== -1|| !selectedTheme); - /** - * api grid - */ - apiGrid = new Grid({ - width: '100%', - dataSource: [], - allowTextWrap: true, - columns: [ - { field: 'name', headerText: 'Name', template: '#template', width: 180, textAlign: 'Center' }, - { field: 'type', headerText: 'Type', width: 180 }, - { field: 'description', headerText: 'Description', template: '#template-description', width: 200 }, - ], - dataBound: dataBound - }); - apiGrid.appendTo('#api-grid'); - /** - * add header to element - */ - let prevbutton: Button = new Button({ iconCss: 'sb-icons sb-icon-Previous', cssClass: 'e-flat' }, '#mobile-prev-sample'); - let nextbutton: Button = new Button( - { - iconCss: 'sb-icons sb-icon-Next', - cssClass: 'e-flat', iconPosition: 'Right' - }, - // tslint:disable-next-line:align - '#mobile-next-sample'); - let tabHeader: Element = document.getElementById('sb-content-header'); - tabHeader.appendChild(tabContentToolbar); - let openNew: Tooltip = new Tooltip({ - content: 'Open in New Window' - }); - - openNew.appendTo('.sb-open-new-wrapper'); - let previous: Tooltip = new Tooltip({ - content: 'Previous Sample' - }); - - previous.appendTo('#prev-sample'); - let next: Tooltip = new Tooltip({ - content: 'Next Sample' - }); - - select('#right-pane').addEventListener('scroll', (event: any) => { - next.close(); - openNew.close(); - previous.close(); - }); - - next.appendTo('#next-sample'); - } - - /** - * api grid functions - */ - function checkApiTableDataSource(): void { - let hash: string[] = location.hash.split('/'); - let data: Object[] = window.apiList[hash[2] + '/' + hash[3].replace('.html', '')] || []; - if (!data.length) { - contentTab.hideTab(2); - } else { - contentTab.hideTab(2, false); - } - } - function changeTab(args: any): void { - if (args.selectedIndex === 2) { - let hash: string[] = location.hash.split('/'); - let data: Object[] = window.apiList[hash[2] + '/' + hash[3].replace('.html', '')] || []; - if (data.length) { - apiGrid.dataSource = data; - } else { - apiGrid.dataSource = []; - } - } - if (args.selectedIndex === 1) { - sourceTab.items = sourceTabItems; - sourceTab.refresh(); - renderCopyCode(); - dynamicTabCreation(sourceTab); - } - } - function changeRtl(args: any): void { - let elementlist: HTMLElement[] = selectAll('.e-control', document.getElementById('control-content')); - for (let control of elementlist) { - let eleinstance: Object[] = (control).ej2_instances; - if (eleinstance) { - for (let instance of eleinstance) { - (instance).setProperties(args); - } - } - } - } - function dataBound(args: object): void { - if (!this.getRows()) { - return; - } - let gridtrs: number = this.getRows().length; - let trs: any = this.getRows(); - for (let count: number = 0; count < gridtrs; count++) { - let tr1: HTMLElement = trs[count]; - if (tr1.getBoundingClientRect().height > 100) { - let desDiv: Element = tr1.querySelector('.sb-sample-description'); - let tag: Element = createElement('a', { id: 'showtag', innerHTML: ' show more...' }); - tag.addEventListener('click', tagShowmore.bind(this, desDiv)); - desDiv.classList.add('e-custDesription'); - desDiv.appendChild(tag); - } - } - } - - function tagShowmore(target: HTMLElement): void { - target.classList.remove('e-custDesription'); - target.querySelector('#showtag').classList.add('e-display'); - let hideEle: Element = target.querySelector('#hidetag'); - if (!hideEle) { - let tag: Element = createElement('a', { id: 'hidetag', attrs: {}, innerHTML: ' hide less..' }); - target.appendChild(tag); - tag.addEventListener('click', taghideless.bind(this, target)); - } else { - hideEle.classList.remove('e-display'); - } - } - - function taghideless(target: HTMLElement): void { - target.querySelector('#hidetag').classList.add('e-display'); - target.querySelector('#showtag').classList.remove('e-display'); - target.classList.add('e-custDesription'); - } - - function setPressedAttribute(ele: HTMLElement): void { - let status: boolean = ele.classList.contains('active'); - ele.setAttribute('aria-pressed', status ? 'true' : 'false'); - } - - // tslint:disable-next-line:max-func-body-length - function sbHeaderClick(action: string, preventSearch?: boolean | any): void { - if (openedPopup) { - openedPopup.hide(new Animation({ name: 'FadeOut', duration: 300, delay: 0 })); - } - if (preventSearch !== true && !searchOverlay.classList.contains('sb-hide')) { - searchOverlay.classList.add('sb-hide'); - searchButton.classList.remove('active'); - setPressedAttribute(searchButton); - } - let curPopup: Popup; - switch (action) { - case 'changeSampleBrowser': - curPopup = switcherPopup; - break; - case 'changeTheme': - headerThemeSwitch.classList.toggle('active'); - setPressedAttribute(headerThemeSwitch); - curPopup = themeSwitherPopup; - break; - case 'toggleSettings': - settingElement.classList.toggle('active'); - setPressedAttribute(settingElement); - themeDropDown.index = themeCollection.indexOf(selectedTheme); - curPopup = settingsPopup; - break; - } - if (action === 'closePopup') { - headerThemeSwitch.classList.remove('active'); - settingElement.classList.remove('active'); - setPressedAttribute(headerThemeSwitch); - setPressedAttribute(settingElement); - if (settingsidebar.isOpen && preventSearch && preventSearch.target && preventSearch.target.closest !== undefined && - (preventSearch.target.closest('#sb-setting-theme_popup') || preventSearch.target.closest('#sb-setting-culture_popup') || - preventSearch.target.closest('#sb-setting-currency_popup') || preventSearch.target.closest('.e-sidebar-overlay'))) { - settingsidebar.hide(); - } - } - if (curPopup && curPopup !== openedPopup) { - curPopup.show(new Animation({ name: 'FadeIn', duration: 400, delay: 0 })); - openedPopup = curPopup; - } else { - openedPopup = null; - } - prevAction = action; - } - /** - * toggle search overlay - */ - function toggleSearchOverlay(): void { - sbHeaderClick('closePopup', true); - inputele.value = ''; - searchPopup.hidePopup(); - searchButton.classList.toggle('active'); - setPressedAttribute(searchButton); - searchOverlay.classList.toggle('sb-hide'); - if (!searchOverlay.classList.contains('sb-hide')) { - inputele.focus(); - } - } - /** - * Theme change function - */ - - function changeTheme(e: MouseEvent): void { - let target: Element = e.target; - target = closest(target, 'li'); - let themeName: string = target.id; - switchTheme(themeName); - // loadTheme(themeName); - } - - function switchTheme(str: string): void { - let hash: string[] = location.hash.split('/'); - if (hash[1] !== str) { - hash[1] = str; - location.hash = hash.join('/'); - } - } - - function highlight(searchString: string, listElement: any): void { - let regex: RegExp = new RegExp(searchString.split(' ').join('|'), 'gi'); - let contentElements: any[] = selectAll('.e-list-item .e-text-content .e-list-text', listElement); - for (let i: number = 0; i < contentElements.length; i++) { - let spanText: any = select('.sb-highlight'); - if (spanText) { - contentElements[i].innerHTML = contentElements[i].text; - } - contentElements[i].innerHTML = contentElements[i].innerHTML.replace(regex, (matched: string) => { - return '' + matched + ''; - }); - } - } - /** - * Storing the mouse action - */ - function setMouseOrTouch(e: MouseEvent): void { - let ele: HTMLElement = closest(e.target, '.sb-responsive-items'); - let switchType: string = ele.id; - changeMouseOrTouch(switchType); - sbHeaderClick('closePopup'); - localStorage.setItem('ej2-switch', switchType); - location.reload(); - } - /** - * button cick handlers - */ - function onNextButtonClick(arg: MouseEvent): void { - sampleOverlay(); - let curSampleUrl: string = location.hash; - let inx: number = samplesAr.indexOf(curSampleUrl); - if (inx !== -1) { - let prevhref: string = samplesAr[inx]; - let curhref: string = samplesAr[inx + 1]; - location.href = curhref; - } - window.hashString = location.hash; - setSelectList(); - } - - function onPrevButtonClick(arg: MouseEvent): void { - sampleOverlay(); - let curSampleUrl: string = location.hash; - let inx: number = samplesAr.indexOf(curSampleUrl); - if (inx !== -1) { - let prevhref: string = samplesAr[inx]; - let curhref: string = samplesAr[inx - 1]; - location.href = curhref; - } - window.hashString = location.hash; - setSelectList(); - } - /** - * Resize event processing - */ - // tslint:disable-next-line:max-func-body-length - function processResize(e: any): void { - let toggle: boolean = sidebar.isOpen; - isMobile = window.matchMedia('(max-width:550px)').matches; - isTablet = window.matchMedia('(min-width:550px) and (max-width: 850px)').matches; - if (isTablet) { - resizeManualTrigger = false; - } - if (resizeManualTrigger || (isMobile && select('#right-sidebar').classList.contains('sb-hide'))) { - return; - } - isPc = window.matchMedia('(min-width:850px)').matches; - processDeviceDependables(); - setLeftPaneHeight(); - let leftPane: Element = select('.sb-left-pane'); - let rightPane: Element = select('.sb-right-pane'); - let footer: Element = select('.sb-footer-left'); - let pref: Element = select('#settings-popup'); - if (isTablet || isMobile) { - contentTab.hideTab(1); - } else { - contentTab.hideTab(1, false); - } - if (toggle && !isPc) { - toggleLeftPane(); - } - if (isMobile || isTablet) { - sidebar.target = null; - sidebar.showBackdrop = true; - sidebar.closeOnDocumentClick = true; - select('.sb-left-footer-links').appendChild(footer); - if (isTablet) { - select('.sb-footer').appendChild(footer); - } - if (isVisible('.sb-mobile-overlay')) { - removeMobileOverlay(); - } - if (!pref.parentElement.classList.contains('sb-mobile-preference')) { - select('.sb-mobile-preference').appendChild(pref); - settingsPopup.show(); - } - let propPanel: Element = select('#control-content .property-section'); - if (propPanel) { - select('.sb-mobile-prop-pane').appendChild(propPanel); - select('.sb-mobile-setting').classList.remove('sb-hide'); - } - if (isVisible('.sb-mobile-overlay')) { - removeMobileOverlay(); - } - } - if (isPc) { - sidebar.target = document.querySelector('.sb-content '); - sidebar.showBackdrop = false; - sidebar.closeOnDocumentClick = false; - if (isVisible('.sb-mobile-overlay')) { - removeMobileOverlay(); - } - if (isPc && !Browser.isDevice && isVisible('.sb-left-pane')) { - rightPane.classList.remove('control-fullview'); - } - if (pref.parentElement.classList.contains('sb-mobile-preference')) { - select('#sb-popup-section').appendChild(pref); - settingsidebar.hide(); - settingsPopup.hide(); - } - let mobilePropPane: Element = select('.sb-mobile-prop-pane .property-section'); - if (mobilePropPane) { - select('#control-content').appendChild(mobilePropPane); - } - if (!select('.sb-mobile-right-pane').classList.contains('sb-hide')) { - toggleRightPane(); - } - } - if (switcherPopup) { - switcherPopup.refreshPosition(); - } - } - - function resizeFunction(): void { - if (!isMobile && !isTablet) { - resizeManualTrigger = true; - setTimeout(cusResize(), 400); - } - } - - function resetInput(arg: MouseEvent): void { - arg.preventDefault(); - arg.stopPropagation(); - (document.getElementById('search-input')).value = ''; - document.getElementById('search-input-wrapper').setAttribute('data-value', ''); - searchPopup.hidePopup(); - } - /** - * Binding events for sample browser operations - */ - function bindEvents(): void { - document.getElementById('sb-switcher').addEventListener('click', (e: MouseEvent) => { - e.preventDefault(); - e.stopPropagation(); - sbHeaderClick('changeSampleBrowser'); - }); - select('.sb-header-text-right').addEventListener('click', (e: MouseEvent) => { - e.preventDefault(); - e.stopPropagation(); - sbHeaderClick('changeSampleBrowser'); - }); - headerThemeSwitch.addEventListener('click', (e: MouseEvent) => { - e.preventDefault(); - e.stopPropagation(); - sbHeaderClick('changeTheme'); - }); - themeList.addEventListener('click', changeTheme); - // tslint:disable - document.addEventListener((Browser.isDevice ? Browser.touchStartEvent : 'click'), sbHeaderClick.bind(this, 'closePopup')); - settingElement.addEventListener('click', (e: MouseEvent) => { - e.preventDefault(); - e.stopPropagation(); - sbHeaderClick('toggleSettings'); - }); - searchButton.addEventListener('click', (e: MouseEvent) => { - e.preventDefault(); - e.stopPropagation(); - toggleSearchOverlay(); - }); - document.getElementById('settings-popup').addEventListener('click', (e: MouseEvent) => { - e.preventDefault(); - e.stopPropagation(); - }); - inputele.addEventListener('click', (e: MouseEvent) => { - e.preventDefault(); - e.stopPropagation(); - }); - setResponsiveElement.addEventListener('click', setMouseOrTouch); - select('#sb-left-back').addEventListener('click', showHideControlTree); - leftToggle.addEventListener('click', toggleLeftPane); - select('.sb-header-settings').addEventListener('click', viewMobilePrefPane); - select('.sb-mobile-setting').addEventListener('click', viewMobilePropPane); - resetSearch.addEventListener('click', resetInput); - /** - * plnkr trigger - */ - document.getElementById('open-plnkr').addEventListener('click', () => { - let plnkrForm: HTMLFormElement = select('#stack-form') as HTMLFormElement; - if (plnkrForm) { - plnkrForm.submit(); - } - }); - document.getElementById('switch-sb').addEventListener('click', (e: MouseEvent) => { - let target: Element = closest(e.target, 'li'); - if (target) { - let anchor: any = target.querySelector('a'); - if (anchor) { - anchor.click(); - } - } - }); - /** - * prev-button-click - */ - select('#next-sample').addEventListener('click', onNextButtonClick); - select('#mobile-next-sample').addEventListener('click', onNextButtonClick); - select('#prev-sample').addEventListener('click', onPrevButtonClick); - select('#mobile-prev-sample').addEventListener('click', onPrevButtonClick); - /** - * resize event - */ - window.addEventListener('resize', processResize); - select('.sb-right-pane').addEventListener('click', () => { - if (isTablet && isLeftPaneOpen()) { - toggleLeftPane(); - } - }); - // select('.copycode').addEventListener('click', copyCode); - } - - /** - * set anchor links for other sample browser - */ - - /** - * - */ - function copyCode(): void { - let copyElem: HTMLElement = selectAll('.sb-src-code')[sourceTab.selectedItem] as HTMLElement; - let textArea: HTMLTextAreaElement = createElement('textArea') as HTMLTextAreaElement; - textArea.textContent = copyElem.textContent.trim(); - document.body.appendChild(textArea); - textArea.select(); - document.execCommand('copy'); - detach(textArea); - (select('.copy-tooltip') as any).ej2_instances[0].close(); - } - function renderCopyCode() { - let ele: HTMLElement = createElement('div', { className: 'copy-tooltip', innerHTML: '
' }); - document.getElementById('sb-source-tab').appendChild(ele); - select('.copycode').addEventListener('click', copyCode); - let copiedTooltip: Tooltip = new Tooltip({ - content: 'Copied to clipboard ', - position: 'BottomCenter', - opensOn: 'Click', - closeDelay: 500 - }); - copiedTooltip.appendTo(ele); - select('.copycode').addEventListener('click', copyCode); - } - - function setSbLink(): void { - let href: string = location.href; - let link: string[] = href.match(urlRegex); - let sample: string = href.match(sampleRegex)[1]; - for (let sb of sbArray) { - let ele: HTMLFormElement = select('#' + sb); - if (sb === 'aspnetcore' || sb === 'aspnetmvc') { - ele.href = sb === 'aspnetcore' ? 'https://ej2.syncfusion.com/aspnetcore/' : 'https://ej2.syncfusion.com/aspnetmvc/'; - } else if (sb === 'blazor') { - ele.href = 'https://blazor.syncfusion.com/demos/'; - } else { - ele.href = ((link) ? ('http://' + link[1] + '/' + (link[3] ? (link[3] + '/') : '')) : ('https://ej2.syncfusion.com/')) + - sb + '/' + 'demos/#/' + sample + (sb === 'javascript' ? '.html' : ''); - } - } - } - /** - * Set Mouse or Touch on page load - */ - function changeMouseOrTouch(str: string): void { - let activeEle: Element = setResponsiveElement.querySelector('.active'); - if (activeEle) { - activeEle.classList.remove('active'); - } - if (str === 'mouse') { - document.body.classList.remove('e-bigger'); - } else { - document.body.classList.add('e-bigger'); - } - setResponsiveElement.querySelector('#' + str).classList.add('active'); - } - /** - * load theme on page loading - */ - function loadTheme(theme: string): void { - let body: HTMLElement = document.body; - if (body.classList.length > 0) { - for (let themeItem of themeCollection) { - body.classList.remove(themeItem); - } - } - body.classList.add(theme); - themeList.querySelector('.active').classList.remove('active'); - themeList.querySelector('#' + theme).classList.add('active'); - let doc: HTMLFormElement = document.getElementById('themelink'); - doc.setAttribute('href','./styles/' + theme + '.css'); - let ajax: Ajax = new Ajax('./styles/' + theme + '.css', 'GET', true); - ajax.send().then((result: any) => { - selectedTheme = theme; - //renderleftpane - renderLeftPaneComponents(); - //renderPopups - renderSbPopups(); - bindEvents(); - if (isTablet || isMobile) { - contentTab.hideTab(1); - } - // add routing - //triggerRouting - processDeviceDependables(); - addRoutes(samplesList); - //setSbLink(); - //bindEvents(); - /** - * load elastic lunr - */ - if (isTablet && isLeftPaneOpen()) { - toggleLeftPane(); - } - (elasticlunr as any).clearStopWords(); - searchInstance = (elasticlunr as any).Index.load(searchJson); - hasher.initialized.add(parseHash); - hasher.changed.add(parseHash); - hasher.init(); - }); - } - /** - * Mobile Overlay - */ - - function removeMobileOverlay(): void { - select('.sb-mobile-overlay').classList.add('sb-hide'); - } - function isLeftPaneOpen(): boolean { - return sidebar.isOpen; - } - function isVisible(elem: string): boolean { - return !select(elem).classList.contains('sb-hide'); - } - /** - * left pane toggle function - */ - function setLeftPaneHeight(): void { - let leftPane: HTMLElement = select('.sb-left-pane') as HTMLElement; - leftPane.style.height = isMobile ? (document.body.offsetHeight + 'px') : ''; - } - - function toggleLeftPane(): void { - let reverse: boolean = sidebar.isOpen; - select('#left-sidebar').classList.remove('sb-hide'); - if (!reverse) { - leftToggle.classList.add('toggle-active'); - } else { - leftToggle.classList.remove('toggle-active'); - } - if (sidebar) { - reverse = sidebar.isOpen; - if (reverse) { - sidebar.hide(); - } else { - sidebar.show(); - } - } - } - - function cusResize() { - let event: Event; - if (typeof (Event) === 'function') { - event = new Event('resize'); - } else { - event = document.createEvent('Event'); - event.initEvent('resize', true, true); - } - window.dispatchEvent(event); - } - - - /** - * Mobile Right pane toggle functions - */ - function toggleRightPane(): void { - select('#right-sidebar').classList.remove('sb-hide'); - themeDropDown.index = themeCollection.indexOf(selectedTheme); - if (isMobile) { - settingsidebar.toggle(); - } - } - function viewMobilePrefPane(): void { - select('.sb-mobile-prop-pane').classList.add('sb-hide'); - select('.sb-mobile-preference').classList.remove('sb-hide'); - toggleRightPane(); - } - function viewMobilePropPane(): void { - select('.sb-mobile-preference').classList.add('sb-hide'); - select('.sb-mobile-prop-pane').classList.remove('sb-hide'); - toggleRightPane(); - } - /** - * left pane samples switcher functions start - */ - function getSampleList(): Controls[] | { [key: string]: Object }[] { - if (Browser.isDevice) { - // (select('.copy-tooltip') as HTMLElement).style.display = 'none'; - let tempList: Controls[] = extend([], samplesJSON.samplesList); - let sampleList: any = []; - for (let temp of tempList) { - if (temp.hideOnDevice == true) { - continue; - } - let data: DataManager = new DataManager((temp as any).samples); - temp.samples = data.executeLocal(new Query().where('hideOnDevice', 'notEqual', true)); - sampleList = sampleList.concat(temp); - } - return sampleList; - } - return samplesJSON.samplesList; - } - - function renderLeftPaneComponents(): void { - samplesTreeList = getTreeviewList(samplesList); - let sampleTreeView: TreeView = new TreeView( - { - fields: { - dataSource: samplesTreeList, id: 'id', parentID: 'pid', - text: 'name', hasChildren: 'hasChild', htmlAttributes: 'url' - }, - nodeClicked: controlSelect, - nodeTemplate: '
${name}' + - '${if(type === "update")}Updated' + - '${else}${if(type)}${type}${/if}${/if}
' - }, - '#controlTree'); - let controlList: ListView = new ListView( - { - dataSource: controlSampleData[location.hash.split('/')[2]] || controlSampleData.grid, - fields: { id: 'uid', text: 'name', groupBy: 'order', htmlAttributes: 'data' }, - select: controlSelect, - template: '
${name}' + - '${if(type === "update")}Updated' + - '${else}${if(type)}${type}${/if}${/if}' + - '${if(directory)}
${/if}
', - groupTemplate: '${if(items[0]["category"])}
' + - '${items[0].category}' + - '
${/if}', - actionComplete: setSelectList - }, - '#controlList'); - } - function getTreeviewList(list: any[]): Controls[] | { [key: string]: Object }[] { - let id: number; - let pid: number; - let tempList: any[] = []; - let category: string = ''; - for (let i: number = 0; i < list.length; i++) { - if (category !== list[i].category) { - category = list[i].category; - tempList = tempList.concat({ id: i + 1, name: list[i].category, hasChild: true, expanded: true }); - pid = i + 1; - id = pid; - } - id += 1; - tempList = tempList.concat( - { - id: id, - pid: pid, - name: list[i].name, - type: list[i].type, - url: { - 'data-path': '/' + list[i].directory + '/' + list[i].samples[0].url + '.html', - 'control-name': list[i].directory, - } - }); - controlSampleData[list[i].directory] = getSamples(list[i].samples); - } - return tempList; - } - - function getSamples(samples: any): any { - let tempSamples: any = []; - for (let i: number = 0; i < samples.length; i++) { - tempSamples[i] = samples[i]; - tempSamples[i].data = { 'sample-name': samples[i].url, 'data-path': '/' + samples[i].dir + '/' + samples[i].url + '.html' }; - } - return tempSamples; - } - function controlSelect(arg: any): void { - let path: string = (arg.node || arg.item).getAttribute('data-path'); - let curHashCollection: string = '/' + location.hash.split('/').slice(2).join('/'); - if (path) { - controlListRefresh(arg.node || arg.item); - if (path !== curHashCollection) { - sampleOverlay(); - let theme: string = location.hash.split('/')[1] || 'bootstrap5'; - if (arg.item && ((isMobile && !select('#left-sidebar').classList.contains('sb-hide')) || - ((isTablet || (Browser.isDevice && isPc)) && isLeftPaneOpen()))) { - toggleLeftPane(); - } - window.hashString = '#/' + theme + path; - setTimeout(() => { - location.hash = '#/' + theme + path; - }, 600); - } - } - } - - function controlListRefresh(ele: Element): void { - let samples: any = controlSampleData[ele.getAttribute('control-name')]; - if (samples) { - let listView: ListView = (select('#controlList') as any).ej2_instances[0]; - listView.dataSource = samples; - showHideControlTree(); - } - } - - function showHideControlTree(): void { - let controlTree: HTMLElement = select('#controlTree') as HTMLElement; - let controlList: HTMLElement = select('#controlSamples') as HTMLElement; - let reverse: boolean = (select('#controlTree') as HTMLElement).style.display === 'none'; - reverse ? viewSwitch(controlList, controlTree, reverse) : viewSwitch(controlTree, controlList, reverse); - } - - function viewSwitch(from: HTMLElement, to: HTMLElement, reverse: boolean): void { - let anim: Animation = new Animation({ duration: 500, timingFunction: 'ease' }); - let controlTree: HTMLElement = select('#controlTree') as HTMLElement; - let controlList: Element = select('#controlList'); - controlTree.style.overflowY = 'hidden'; - controlList.classList.remove('e-view'); - controlList.classList.remove('sb-control-list-top'); - controlList.classList.add('sb-adjust-juggle'); - to.style.display = ''; - anim.animate(from, { - name: reverse ? 'SlideRightOut' : 'SlideLeftOut', end: (): void => { - controlTree.style.overflowY = 'auto'; - from.style.display = 'none'; - controlList.classList.add('e-view'); - controlList.classList.add('sb-control-list-top'); - controlList.classList.remove('sb-adjust-juggle'); - } - }); - anim.animate(to, { name: reverse ? 'SlideLeftIn' : 'SlideRightIn' }); - } - - function setSelectList(): void { - let hString: string = window.hashString || location.hash; - let hash: string[] = hString.split('/'); - let list: ListView = (select('#controlList') as any).ej2_instances[0]; - let control: Element = select('[control-name="' + hash[2] + '"]'); - if (control) { - let data: any = list.dataSource; - let samples: any = controlSampleData[control.getAttribute('control-name')]; - if (JSON.stringify(data) !== JSON.stringify(samples)) { - list.dataSource = samples; - list.dataBind(); - } - let selectSample: Element = select('[sample-name="' + hash.slice(-1)[0].split('.html')[0] + '"]'); - if (selectSample) { - if ((select('#controlTree') as HTMLElement).style.display !== 'none') { - showHideControlTree(); - } - list.selectItem(selectSample); - selectSample.scrollIntoView({ block: "nearest" }) - } - } else { - showHideControlTree(); - list.selectItem(select('[sample-name="grid-overview"]')); - } - } - /** - * Sample Navigation - */ - function toggleButtonState(id: string, state: boolean): void { - let ele: HTMLButtonElement = document.getElementById(id); - let mobileEle: HTMLButtonElement = document.getElementById('mobile-' + id); - ele.disabled = state; - mobileEle.disabled = state; - if (state) { - mobileEle.classList.add('e-disabled'); - ele.classList.add('e-disabled'); - } else { - mobileEle.classList.remove('e-disabled'); - ele.classList.remove('e-disabled'); - } - } - /** - * Routing functions - */ - - function setPropertySectionHeight(): void { - let propertypane: HTMLElement = select('.property-section'); - let ele: HTMLElement = document.querySelector('.control-section'); - if (ele && propertypane) { - ele.classList.add('sb-property-border'); - } else { - ele.classList.remove('sb-property-border'); - } - } - - function routeDefault(): void { - addRoute('', () => { - window.location.href = '#/' + selectedTheme + '/grid/grid-overview.html'; - isInitRedirected = true; - }); - bypassed.add((request: string) => { - let hash: string[] = request.split('.html')[0].split('/'); - if (samplePath.indexOf(hash.slice(1).join('/')) === -1) { - location.hash = '#/' + hash[0] + '/' + (defaultSamples[hash[1]] || 'grid/grid-overview.html'); - isInitRedirected = true; - } - }); - } - function destroyControls(): void { - let elementlist: HTMLElement[] = selectAll('.e-control', document.getElementById('control-content')); - for (let control of elementlist) { - let eleinstance: Object[] = (control).ej2_instances; - if (eleinstance) { - for (let instance of eleinstance) { - (instance).destroy(); - } - } - } - } - - - function loadScriptfile(path: string): Promise { - let scriptEle: HTMLScriptElement = document.querySelector('script[src="' + path + '"]'); - let doFun: Function; - let p2: Promise = new Promise((resolve: Function, reject: Function) => { - doFun = resolve; - }); - if (!scriptEle) { - scriptEle = document.createElement('script'); - scriptEle.setAttribute('type', 'text/javascript'); - scriptEle.setAttribute('src', path); - scriptEle.onload = <() => void>doFun; - if (typeof scriptEle !== 'undefined') { - document.getElementsByTagName('head')[0].appendChild(scriptEle); - } - } else { - doFun(); - } - return p2; - } - function getExecFunction(sample: string): Function { - if ((execFunction).hasOwnProperty(sample)) { - return execFunction[sample]; - } else { - return execFunction[sample] = (window as any).default; - } - } - function errorHandler(error: string): void { - document.getElementById('control-content').innerHTML = error ? error : 'Not Available'; - select('#control-content').classList.add('error-content'); - removeOverlay(); - } - function plunker(results: string): void { - let plnkr: { [key: string]: Object } = JSON.parse(results); - let prevForm: Element = select('#stack-form'); - if (prevForm) { - detach(prevForm); - } - let form: HTMLFormElement = createElement('form'); - let res: string = ((location.href as any).indexOf('ej2.syncfusion.com') !== -1 ? 'https:' : 'http:') + '//stackblitz.com/run'; - form.setAttribute('action', res); - form.setAttribute('method', 'post'); - form.setAttribute('target', '_blank'); - form.id = 'stack-form'; - form.style.display = 'none'; - document.body.appendChild(form); - let plunks: string[] = Object.keys(plnkr); - for (let x: number = 0; x < plunks.length; x++) { - createStackInput('project[files][' + plunks[x] + ']', plnkr[plunks[x]], form); - } - createStackInput('project[template]', 'typescript', form); - createStackInput('project[description]', 'Essential JS 2 Sample', form); - createStackInput('project[settings]', '{"compile":{"clearConsole":true}}', form); - createStackInput('project[dependencies]', packages, form); - } - - function createStackInput(name: string, value: string, form: HTMLFormElement): void { - let input: HTMLElement = createElement('input'); - input.setAttribute('type', 'hidden'); - input.setAttribute('name', name); - input.setAttribute('value', value.replace(/{{theme}}/g, selectedTheme).replace(/{{ripple}}/, - (selectedTheme.indexOf('material') !== -1) ? 'import { enableRipple } from \'@syncfusion/ej2-base\';\nenableRipple(true);\n' : '')); - form.appendChild(input); - } - - // tslint:disable-next-line:max-func-body-length - function addRoutes(samplesList: Controls[]): void { - for (let node of samplesList) { - defaultSamples[node.directory] = node.directory + '/' + node.samples[0].url + '.html'; - let dataManager: DataManager = new DataManager((node as any).samples); - let samples: Samples[] & { [key: string]: Object }[] = - dataManager.executeLocal(new Query().sortBy('order', 'ascending')); - for (let subNode of samples) { - let control: string = node.directory; - let sample: string = subNode.url; - samplePath = samplePath.concat(control + '/' + sample); - let sampleName: string = node.name + ' / ' + ((node.name !== subNode.category) ? - (subNode.category + ' / ') : '') + subNode.name; - let selectedTheme: string = location.hash.split('/')[1] ? location.hash.split('/')[1] : 'bootstrap5'; - let urlString: string = '/' + selectedTheme + '/' + control + '/' + sample + '.html'; - samplesAr.push('#' + urlString); - // tslint:disable-next-line:max-func-body-length - addRoute(urlString, () => { - let controlID: string = node.uid; - let sampleID: string = subNode.uid; - (document.getElementById('open-plnkr') as any).disabled = true; - let openNew: HTMLFormElement = (select('#openNew') as HTMLFormElement); - if (openNew) { - openNew.href = location.href.split('#')[0] + node.directory + '/' + subNode.url + '/index.html'; - } - setSbLink(); - // select('#switch').classList.remove('hidden'); - //document.getElementById('source-panel').style.display = 'block'; - // .href = - // location.href.split('#')[0] + 'samples/' + node.directory + '/' + subNode.url + '/index.html'; - let sourcePromise: Array> = []; - let sObj: any[] = []; - sourcePromise.push((new Ajax('src/' + control + '/' + sample + '.ts', 'GET', true)).send()); - sObj.push({ - header: { text: sample + '.ts' }, - data: '', - content: sample + '.ts' - }); - sourcePromise.push((new Ajax('src/' + control + '/' + sample + '.html', 'GET', true)).send()); - sObj.push({ - header: { text: sample + '.html' }, - data: '', - content: sample + '.html' - }); - if (subNode.sourceFiles) { - sourcePromise = []; - sObj = []; - let sourcefiles: any = subNode.sourceFiles; - for (let sfile of sourcefiles) { - let spromise: Promise = (new Ajax(sfile.path, 'GET', true)).send(); - sourcePromise.push(spromise); - sObj.push({ - header: { text: sfile.displayName }, - data: '', - content: sfile.displayName - }); - } - } - let content: any; - Promise.all(sourcePromise).then((results: Object[]): void => { - results.forEach((value, index) => { - let srcobj = sObj[index]; - if (srcobj.content.indexOf('.html') > 0) { - content = getStringWithOutDescription(value.toString(), /(\'|\")description/g); - content = getStringWithOutDescription(content.toString(), /(\'|\")action-description/g) - } - let defRegex: RegExp = /(this.|export |\(window as any\).)default (= |)\(\)(: void|) => {/g; - let resValue: string = value.toString().replace(defRegex, ''); - resValue = resValue.replace(/&/g, '&').replace(/"/g, '"').replace(//g, '>'); - var lInd = resValue.lastIndexOf('};'); - resValue = resValue.substring(0, lInd) + resValue.substring(lInd + 2); - content = srcobj.content.indexOf('.html') > 0 ? content.replace(/@section (ActionDescription|Description){[^}]*}/g, '').replace(/&/g, '&') - .replace(/"/g, '"').replace(/"/g, '"').replace(//g, '>') : resValue; - - sObj[index].data = content; - }); - sourceTabItems = sObj; - }); - let ajaxHTML: Ajax = new Ajax('src/' + control + '/' + sample + '.html', 'GET', true); - let p1: Promise = ajaxHTML.send(); - let p2: Promise = loadScriptfile('src/' + control + '/' + sample + '.js'); - /** - * sample header - */ - sampleNameElement.innerHTML = node.name; - /** - * BreadCrumb - */ - contentTab.selectedItem = 0; - breadCrumbComponent.innerHTML = node.name; - if (node.name !== subNode.category) { - breadCrumbSubCategory.innerHTML = subNode.category; - breadCrumbSubCategory.style.display = ''; - breadCrumSeperator.style.display = ''; - } else { - breadCrumbSubCategory.style.display = 'none'; - breadCrumSeperator.style.display = 'none'; - } - breadCrumbSample.innerHTML = subNode.name; - let title: HTMLElement = document.querySelector('title'); - title.innerHTML = node.name + ' · ' + subNode.name + ' · Essential JS 2 · Syncfusion '; - let plunk: Ajax = new Ajax('src/' + control + '/' + sample + '-stack.json', 'GET', true); - let p3: Promise = plunk.send(); - p3.then((result: Object) => { - (document.getElementById('open-plnkr') as any).disabled = false; - plunker(result); - }); - Promise.all([ - p1, - p2 - ]).then((results: Object[]): void => { - let htmlString: string = results[0].toString(); - destroyControls(); - currentControlID = controlID; - currentSampleID = sampleID; - currentControl = node.directory; - let curIndex: number = samplesAr.indexOf(location.hash); - let samLength: number = samplesAr.length - 1; - if (curIndex === samLength) { - toggleButtonState('next-sample', true); - } else { - toggleButtonState('next-sample', false); - } - if (curIndex === 0) { - toggleButtonState('prev-sample', true); - } else { - toggleButtonState('prev-sample', false); - } - select('#control-content').classList.remove('error-content'); - document.getElementById('control-content').innerHTML = htmlString; - let controlEle: Element = document.querySelector('.control-section'); - let controlString: string = controlEle.innerHTML; - controlEle.innerHTML = ''; - controlEle.appendChild(createElement('div', { className: 'control-wrapper', innerHTML: controlString })); - renderPropertyPane('#property'); - renderDescription(); - renderActionDescription(); - //document.getElementsByClassName('sample-name')[0].innerHTML = sampleName; - let htmlCode: HTMLElement = createElement('div', { innerHTML: htmlString }); - let description: Element = htmlCode.querySelector('#description'); - if (description) { - detach(description); - } - let actionDesc: Element = htmlCode.querySelector('#action-description'); - if (actionDesc) { - detach(actionDesc); - } - getExecFunction(control + sample)(); - window.navigateSample(); - //select('.sb-loading').classList.add('hidden'); - //document.body.classList.remove('sb-overlay'); - //select('#source-panel').classList.remove('hidden'); - isExternalNavigation = defaultTree = false; - checkApiTableDataSource(); - setPropertySectionHeight(); - removeOverlay(); - let mobilePropPane: Element = select('.sb-mobile-prop-pane .property-section'); - if (mobilePropPane) { - detach(mobilePropPane); - } - let propPanel: Element = select('#control-content .property-section'); - if (isMobile) { - if (propPanel) { - select('.sb-mobile-setting').classList.remove('sb-hide'); - select('.sb-mobile-prop-pane').appendChild(propPanel); - } else { - select('.sb-mobile-setting').classList.add('sb-hide'); - } - } - }); - }); - } - } - let isTempLocaion: string; - if(location.hash.indexOf('.html') === -1) { - isTempLocaion = location.hash+".html"; - } else { - isTempLocaion = location.hash; - } - if(Browser.isDevice) - { - if(location.hash && location.hash !== "" && samplesAr.indexOf(isTempLocaion) == -1) - { - let toastObj: Toast = new Toast({ - position: { - X: 'Right' - } - }); - toastObj.appendTo('#sb-home'); - setTimeout( - () => { - toastObj.show({ - content: `${location.hash.split('/')[2]} component not supported in mobile device` - }); - }, 200); - } - } - } - function removeOverlay(): void { - document.body.setAttribute('aria-busy', 'false'); - sbContentOverlay.classList.add('sb-hide'); - sbRightPane.classList.remove('sb-right-pane-overlay'); - sbHeader.classList.remove('sb-right-pane-overlay'); - mobNavOverlay(false); - if (!sbBodyOverlay.classList.contains('sb-hide')) { - sbBodyOverlay.classList.add('sb-hide'); - } - if (!isMobile) { - sbRightPane.scrollTop = 0; - } else { - sbRightPane.scrollTop = 74; - } - if(cultureDropDown.value !== 'en'){ - changeRtl({ - locale: cultureDropDown.value, - enableRtl: cultureDropDown.value === 'ar', - currencyCode: currencyDropDown.value - }); - } - - } - - function sampleOverlay(): void { - document.body.setAttribute('aria-busy', 'true'); - sbHeader.classList.add('sb-right-pane-overlay'); - sbRightPane.classList.add('sb-right-pane-overlay'); - mobNavOverlay(true); - sbContentOverlay.classList.remove('sb-hide'); - } - - function mobNavOverlay(isOverlay: boolean): void { - if (Browser.isDevice) { - let mobileFoorter: HTMLElement = select('.sb-mobilefooter'); - if (isOverlay) { - mobileFoorter.classList.add('sb-right-pane-overlay'); - } else { - mobileFoorter.classList.remove('sb-right-pane-overlay'); - } - } - } - function overlay(): void { - sbHeader.classList.add('sb-right-pane-overlay'); - sbBodyOverlay.classList.remove('sb-hide'); - } - - function checkSampleLength(directory: string): boolean { - let data: DataManager = new DataManager(samplesList as any); - let controls: Controls[] = data.executeLocal(new Query().where('directory', 'equal', directory)); - return controls[0].samples.length > 1; - } - - function parseHash(newHash: string, oldHash: string): void { - let newTheme: string = newHash.split('/')[0]; - let control: string = newHash.split('/')[1]; - if (newTheme !== selectedTheme && themeCollection.indexOf(newTheme) !== -1) { - location.reload(); - } - (samplesJSON.skipCommonChunk as any) = (window as any).sampleSkip || []; - if (newHash.length && !select('#' + control + '-common') && checkSampleLength(control) && - samplesJSON.skipCommonChunk.indexOf(control) === -1) { - let scriptElement: HTMLScriptElement = document.createElement('script'); - scriptElement.src = 'src/' + control + '/common.js'; - scriptElement.id = control + '-common'; - scriptElement.type = 'text/javascript'; - scriptElement.onload = () => { - parse(newHash); - }; - document.getElementsByTagName('head')[0].appendChild(scriptElement); - } else { - parse(newHash); - } - } - - function getSourceTabHeader(index: number): Element { - return document.querySelectorAll('.sb-source-code-section>.e-tab-header .e-tab-text')[index]; - } - - function processDeviceDependables(): void { - if (Browser.isDevice) { - select('.sb-desktop-setting').classList.add('sb-hide'); - } else { - select('.sb-desktop-setting').classList.remove('sb-hide'); - } - } - /* - * left pane functions end - */ - /* - * Tab hide on intial load - */ - function checkTabHideStatus(): void { - if (!intialLoadCompleted) { - contentTab.hideTab(1); - intialLoadCompleted = true; - } - } - function getStringWithOutDescription(code: string, descRegex: RegExp): string { - let lines: string[] = code.split('\n'); - let desStartLine: number = null; - let desEndLine: number = null; - let desInsideDivCnt: number = 0; - for (let i: number = 0; i < lines.length; i++) { - let curLine: string = lines[i]; - if (desStartLine) { - if (/
/g.test(curLine)) { - desInsideDivCnt = desInsideDivCnt - 1; - } else if (!desEndLine && /<\/div>/g.test(curLine)) { - desEndLine = i + 1; - } - } - if (descRegex.test(curLine)) { - desStartLine = i; - } - } - if (desEndLine && desStartLine) { - lines.splice(desStartLine, desEndLine - desStartLine); - } - return lines.join('\n'); - } - - /** - * init function - */ - function loadJSON(): void { - /** - * Mouse or touch setting - */ - let switchText: string = localStorage.getItem('ej2-switch') || 'mouse'; - if (Browser.isDevice || window.screen.width <= 850) { - switchText = 'touch'; - } - /** - * Left Pane Height Setting - */ - setLeftPaneHeight(); - /** - * Mobile View - */ - if (isMobile) { - select('.sb-left-footer-links').appendChild(select('.sb-footer-left')); - select('#left-sidebar').classList.add('sb-hide'); - leftToggle.classList.remove('toggle-active'); - } - /** - * Tab View - */ - if (isTablet || (Browser.isDevice && isPc)) { - leftToggle.classList.remove('toggle-active'); - select('.sb-right-pane').classList.add('control-fullview'); - } - overlay(); - changeMouseOrTouch(switchText); - localStorage.removeItem('ej2-switch'); - loadTheme(selectedTheme); - } - - - loadJSON(); - \ No newline at end of file + } + } + function removeOverlay(): void { + document.body.setAttribute('aria-busy', 'false'); + sbContentOverlay.classList.add('sb-hide'); + sbRightPane.classList.remove('sb-right-pane-overlay'); + sbHeader.classList.remove('sb-right-pane-overlay'); + mobNavOverlay(false); + if (!sbBodyOverlay.classList.contains('sb-hide')) { + sbBodyOverlay.classList.add('sb-hide'); + } + if (!isMobile) { + sbRightPane.scrollTop = 0; + } else { + sbRightPane.scrollTop = 74; + } + if(cultureDropDown.value !== 'en'){ + changeRtl({ + locale: cultureDropDown.value, + enableRtl: cultureDropDown.value === 'ar', + currencyCode: currencyDropDown.value + }); + } + + } + + function sampleOverlay(): void { + document.body.setAttribute('aria-busy', 'true'); + sbHeader.classList.add('sb-right-pane-overlay'); + sbRightPane.classList.add('sb-right-pane-overlay'); + mobNavOverlay(true); + sbContentOverlay.classList.remove('sb-hide'); + } + + function mobNavOverlay(isOverlay: boolean): void { + if (Browser.isDevice) { + let mobileFoorter: HTMLElement = select('.sb-mobilefooter'); + if (isOverlay) { + mobileFoorter.classList.add('sb-right-pane-overlay'); + } else { + mobileFoorter.classList.remove('sb-right-pane-overlay'); + } + } + } + function overlay(): void { + sbHeader.classList.add('sb-right-pane-overlay'); + sbBodyOverlay.classList.remove('sb-hide'); + } + + function checkSampleLength(directory: string): boolean { + let data: DataManager = new DataManager(samplesList as any); + let controls: Controls[] = data.executeLocal(new Query().where('directory', 'equal', directory)); + return controls[0].samples.length > 1; + } + + function parseHash(newHash: string, oldHash: string): void { + let newTheme: string = newHash.split('/')[0]; + let control: string = newHash.split('/')[1]; + if (newTheme !== selectedTheme && themeCollection.indexOf(newTheme) !== -1) { + location.reload(); + } + (samplesJSON.skipCommonChunk as any) = (window as any).sampleSkip || []; + if (newHash.length && !select('#' + control + '-common') && checkSampleLength(control) && + samplesJSON.skipCommonChunk.indexOf(control) === -1) { + let scriptElement: HTMLScriptElement = document.createElement('script'); + scriptElement.src = 'src/' + control + '/common.js'; + scriptElement.id = control + '-common'; + scriptElement.type = 'text/javascript'; + scriptElement.onload = () => { + parse(newHash); + }; + document.getElementsByTagName('head')[0].appendChild(scriptElement); + } else { + parse(newHash); + } + } + + function getSourceTabHeader(index: number): Element { + return document.querySelectorAll('.sb-source-code-section>.e-tab-header .e-tab-text')[index]; + } + + function processDeviceDependables(): void { + if (Browser.isDevice) { + select('.sb-desktop-setting').classList.add('sb-hide'); + } else { + select('.sb-desktop-setting').classList.remove('sb-hide'); + } + } + /* + * left pane functions end + */ + /* + * Tab hide on intial load + */ + function checkTabHideStatus(): void { + if (!intialLoadCompleted) { + contentTab.hideTab(1); + intialLoadCompleted = true; + } + } + function getStringWithOutDescription(code: string, descRegex: RegExp): string { + let lines: string[] = code.split('\n'); + let desStartLine: number = null; + let desEndLine: number = null; + let desInsideDivCnt: number = 0; + for (let i: number = 0; i < lines.length; i++) { + let curLine: string = lines[i]; + if (desStartLine) { + if (/
/g.test(curLine)) { + desInsideDivCnt = desInsideDivCnt - 1; + } else if (!desEndLine && /<\/div>/g.test(curLine)) { + desEndLine = i + 1; + } + } + if (descRegex.test(curLine)) { + desStartLine = i; + } + } + if (desEndLine && desStartLine) { + lines.splice(desStartLine, desEndLine - desStartLine); + } + return lines.join('\n'); + } + + /** + * init function + */ + function loadJSON(): void { + /** + * Mouse or touch setting + */ + let switchText: string = localStorage.getItem('ej2-switch') || 'mouse'; + if (Browser.isDevice || window.screen.width <= 850) { + switchText = 'touch'; + } + /** + * Left Pane Height Setting + */ + setLeftPaneHeight(); + /** + * Mobile View + */ + if (isMobile) { + select('.sb-left-footer-links').appendChild(select('.sb-footer-left')); + select('#left-sidebar').classList.add('sb-hide'); + leftToggle.classList.remove('toggle-active'); + } + /** + * Tab View + */ + if (isTablet || (Browser.isDevice && isPc)) { + leftToggle.classList.remove('toggle-active'); + select('.sb-right-pane').classList.add('control-fullview'); + } + overlay(); + changeMouseOrTouch(switchText); + localStorage.removeItem('ej2-switch'); + loadTheme(selectedTheme); + } + + + loadJSON(); + \ No newline at end of file diff --git a/src/common/sampleOrder.json b/src/common/sampleOrder.json index 1b65c168..8c39a38b 100644 --- a/src/common/sampleOrder.json +++ b/src/common/sampleOrder.json @@ -4,7 +4,7 @@ "Editors": ["Rich Text Editor", "DocumentEditor", "Chips", "Button", "In-place Editor"], "Calendars": ["Scheduler", "Gantt", "Calendar", "DatePicker", "DateRangePicker", "DateTimePicker", "TimePicker"], "Dropdowns": ["AutoComplete", "ComboBox", "Dropdown List", "Dropdown Tree", "MultiSelect Dropdown", "List Box"], - "Navigation": ["Accordion", "Breadcrumb", "Context Menu", "Menu Bar", "Sidebar", "Tabs", "Toolbar", "TreeView", "File Manager"], + "Navigation": ["Accordion", "Breadcrumb", "Carousel", "Context Menu", "Menu Bar", "Sidebar", "Tabs", "Toolbar", "TreeView", "File Manager"], "Notifications": ["Badge", "Toast", "Progress Bar"], "Inputs": ["Form Validation", "TextBox", "Input Mask", "Numeric Textbox", "Color Picker", "File Upload", "Range Slider", "Signature"], "Layout": ["Avatar", "Card", "Dialog", "ListView", "Tooltip", "Splitter", "Dashboard Layout"], diff --git a/src/dashboard-layout/predefined-layouts.html b/src/dashboard-layout/predefined-layouts.html index c26fe2b6..73599abd 100644 --- a/src/dashboard-layout/predefined-layouts.html +++ b/src/dashboard-layout/predefined-layouts.html @@ -63,39 +63,8 @@ display: block; } - .bootstrap5 .e-panel .e-header-text, - .bootstrap5-dark .e-panel .e-header-text, - .tailwind .e-panel .e-header-text, - .tailwind-dark .e-panel .e-header-text, - .material .e-panel .e-header-text, - .bootstrap4 .e-panel .e-header-text, - .bootstrap .e-panel .e-header-text, - .bootstrap-dark .e-panel .e-header-text, - .fabric .e-panel .e-header-text, - .fabric-dark .e-panel .e-header-text, - .highcontrast .e-panel .e-header-text{ - padding: 10px 0 0; - } - - .e-bigger.bootstrap5 .e-panel .e-header-text, - .e-bigger.bootstrap5-dark .e-panel .e-header-text, - .e-bigger.tailwind .e-panel .e-header-text, - .e-bigger.tailwind-dark .e-panel .e-header-text { - padding: 2px 0 0; - } - - .e-bigger.material .e-panel .e-header-text, - .e-bigger.bootstrap4 .e-panel .e-header-text, - .e-bigger.bootstrap .e-panel .e-header-text, - .e-bigger.bootstrap-dark .e-panel .e-header-text - { - padding: 8px 0 0; - } - - .e-bigger.fabric .e-panel .e-header-text, - .e-bigger.fabric-dark .e-panel .e-header-text, - .e-bigger.highcontrast .e-panel .e-header-text { - padding: 6px 0 0; + .e-panel .e-header-text { + padding: 12px 0 12px 0; } .e-dashboardlayout.e-control .e-panel .e-panel-container .e-panel-header { diff --git a/src/datepicker/date-format.ts b/src/datepicker/date-format.ts index fdf7aad7..bc1d6299 100644 --- a/src/datepicker/date-format.ts +++ b/src/datepicker/date-format.ts @@ -8,6 +8,7 @@ import { DropDownList } from '@syncfusion/ej2-dropdowns'; (window as any).default = (): void => { loadCultureFiles(); let datepicker: DatePicker = new DatePicker({ + placeholder: "Choose a date", value: new Date(), format: 'dd-MMM-yy', }); diff --git a/src/datepicker/date-range.ts b/src/datepicker/date-range.ts index 67d9b522..0aa6329a 100644 --- a/src/datepicker/date-range.ts +++ b/src/datepicker/date-range.ts @@ -12,6 +12,7 @@ import { DatePicker } from '@syncfusion/ej2-calendars'; let currentMonth: number = today.getMonth(); let currentDay: number = today.getDate(); let datepicker: DatePicker = new DatePicker({ + placeholder: "Choose a date", min: new Date(currentYear, currentMonth, 7), max: new Date(currentYear, currentMonth, 27), value: new Date(currentYear, currentMonth, 14) diff --git a/src/datepicker/default.ts b/src/datepicker/default.ts index 4d6b7ad5..da67cc27 100644 --- a/src/datepicker/default.ts +++ b/src/datepicker/default.ts @@ -6,6 +6,8 @@ import { DatePicker } from '@syncfusion/ej2-calendars'; (window as any).default = (): void => { loadCultureFiles(); - let datepicker: DatePicker = new DatePicker({}); + let datepicker: DatePicker = new DatePicker({ + placeholder: "Choose a date", + }); datepicker.appendTo('#datepicker'); }; \ No newline at end of file diff --git a/src/datepicker/disabled.ts b/src/datepicker/disabled.ts index a2d5c560..906d505c 100644 --- a/src/datepicker/disabled.ts +++ b/src/datepicker/disabled.ts @@ -7,6 +7,7 @@ import { DatePicker, RenderDayCellEventArgs } from '@syncfusion/ej2-calendars'; (window as any).default = (): void => { loadCultureFiles(); let datepicker: DatePicker = new DatePicker({ + placeholder: "Choose a date", renderDayCell: disableDate }); datepicker.appendTo('#datepicker'); diff --git a/src/datepicker/input-mask.ts b/src/datepicker/input-mask.ts index 2c8758ea..4523386a 100644 --- a/src/datepicker/input-mask.ts +++ b/src/datepicker/input-mask.ts @@ -7,6 +7,7 @@ import { DatePicker, MaskedDateTime } from '@syncfusion/ej2-calendars'; (window as any).default = (): void => { loadCultureFiles(); let datepicker: DatePicker = new DatePicker({ + placeholder: "Choose a date", format: "M/d/yyyy", enableMask: true }); diff --git a/src/datepicker/month-picker.ts b/src/datepicker/month-picker.ts index b320817b..3376c864 100644 --- a/src/datepicker/month-picker.ts +++ b/src/datepicker/month-picker.ts @@ -5,6 +5,6 @@ import { DatePicker } from '@syncfusion/ej2-calendars'; */ (window as any).default = (): void => { loadCultureFiles(); - let datepicker: DatePicker = new DatePicker({ start: 'Year', depth: 'Year', format: 'MMMM y' }); + let datepicker: DatePicker = new DatePicker({ placeholder: "Choose a date", start: 'Year', depth: 'Year', format: 'MMMM y' }); datepicker.appendTo('#datepicker'); }; \ No newline at end of file diff --git a/src/datepicker/special-dates.ts b/src/datepicker/special-dates.ts index 4def7a4d..8374cf82 100644 --- a/src/datepicker/special-dates.ts +++ b/src/datepicker/special-dates.ts @@ -8,6 +8,7 @@ import { addClass } from '@syncfusion/ej2-base'; (window as any).default = (): void => { loadCultureFiles(); let datepicker: DatePicker = new DatePicker({ + placeholder: "Choose a date", renderDayCell: customDates, value: new Date('1/13/2017'), cssClass: 'e-customStyle' }); diff --git a/src/daterangepicker/date-format.ts b/src/daterangepicker/date-format.ts index 64d7dfdb..2866fb9e 100644 --- a/src/daterangepicker/date-format.ts +++ b/src/daterangepicker/date-format.ts @@ -14,6 +14,7 @@ import { FloatLabelType } from '@syncfusion/ej2-inputs'; ]; let daterangepicker: DateRangePicker = new DateRangePicker({ + placeholder: "Select a range", format: 'dd\'\/\'MMM\'\/\'yy hh:mm a', startDate: new Date(new Date().setDate(1)), endDate: new Date(new Date().setDate(20)) diff --git a/src/daterangepicker/date-range.ts b/src/daterangepicker/date-range.ts index 8d22b8e3..bfe2ab79 100644 --- a/src/daterangepicker/date-range.ts +++ b/src/daterangepicker/date-range.ts @@ -6,6 +6,7 @@ import { DateRangePicker } from '@syncfusion/ej2-calendars'; (window as any).default = (): void => { loadCultureFiles(); let daterangepicker: DateRangePicker = new DateRangePicker({ + placeholder: "Select a range", min: new Date('1/15/2017'), max: new Date('12/20/2017') }); diff --git a/src/daterangepicker/day-span.ts b/src/daterangepicker/day-span.ts index 24dec48b..d9173b7f 100644 --- a/src/daterangepicker/day-span.ts +++ b/src/daterangepicker/day-span.ts @@ -5,6 +5,6 @@ import { DateRangePicker } from '@syncfusion/ej2-calendars'; */ (window as any).default = (): void => { loadCultureFiles(); - let daterangepicker: DateRangePicker = new DateRangePicker({minDays: 5, maxDays: 10}); + let daterangepicker: DateRangePicker = new DateRangePicker({ placeholder: "Select a range", minDays: 5, maxDays: 10}); daterangepicker.appendTo('#daterangepicker'); }; \ No newline at end of file diff --git a/src/daterangepicker/default.ts b/src/daterangepicker/default.ts index cc830240..fcb70ef2 100644 --- a/src/daterangepicker/default.ts +++ b/src/daterangepicker/default.ts @@ -5,6 +5,8 @@ import { DateRangePicker } from '@syncfusion/ej2-calendars'; */ (window as any).default = (): void => { loadCultureFiles(); - let daterangepicker: DateRangePicker = new DateRangePicker(); + let daterangepicker: DateRangePicker = new DateRangePicker({ + placeholder: "Select a range", + }); daterangepicker.appendTo('#daterangepicker'); }; \ No newline at end of file diff --git a/src/daterangepicker/month-range-picker.ts b/src/daterangepicker/month-range-picker.ts index 33edf921..c5cb7942 100644 --- a/src/daterangepicker/month-range-picker.ts +++ b/src/daterangepicker/month-range-picker.ts @@ -5,6 +5,6 @@ import { DateRangePicker } from '@syncfusion/ej2-calendars'; */ (window as any).default = (): void => { loadCultureFiles(); - let daterangepicker: DateRangePicker = new DateRangePicker({ start: 'Year', depth: 'Year', format: 'MMM yyyy' }); + let daterangepicker: DateRangePicker = new DateRangePicker({ placeholder: "Select a range", start: 'Year', depth: 'Year', format: 'MMM yyyy' }); daterangepicker.appendTo('#daterangepicker'); }; \ No newline at end of file diff --git a/src/daterangepicker/presets.ts b/src/daterangepicker/presets.ts index a84b5d17..11b93b0a 100644 --- a/src/daterangepicker/presets.ts +++ b/src/daterangepicker/presets.ts @@ -7,6 +7,7 @@ import { DateRangePicker } from '@syncfusion/ej2-calendars'; loadCultureFiles(); let start: Date = new Date(new Date(new Date().setDate(new Date().getDate() - (new Date().getDay() + 7) % 7)).toDateString()); let daterangepicker: DateRangePicker = new DateRangePicker({ + placeholder: "Select a range", presets: [ { label: 'This Week', diff --git a/src/datetimepicker/date-time-format.ts b/src/datetimepicker/date-time-format.ts index acc6086c..60020d29 100644 --- a/src/datetimepicker/date-time-format.ts +++ b/src/datetimepicker/date-time-format.ts @@ -8,6 +8,7 @@ import { DropDownList} from '@syncfusion/ej2-dropdowns'; (window as any).default = (): void => { loadCultureFiles(); let datetimepicker: DateTimePicker = new DateTimePicker({ + placeholder: "Select a date and time", format: 'dd-MMM-yy hh:mm a', value: new Date() }); diff --git a/src/datetimepicker/date-time-range.ts b/src/datetimepicker/date-time-range.ts index 2e689efe..01ed0c07 100644 --- a/src/datetimepicker/date-time-range.ts +++ b/src/datetimepicker/date-time-range.ts @@ -12,6 +12,7 @@ import { DateTimePicker } from '@syncfusion/ej2-calendars'; let currentMonth: number = today.getMonth(); let currentDay: number = today.getDate(); let dateTimeInstance: DateTimePicker = new DateTimePicker({ + placeholder: "Select a date and time", min: new Date(currentYear, currentMonth, 7, 10, 0, 0), max: new Date(currentYear, currentMonth, 27, 22, 30, 0), value: new Date(currentYear, currentMonth, 14, 12, 0, 0) diff --git a/src/datetimepicker/default.ts b/src/datetimepicker/default.ts index 6b4d8423..237b2003 100644 --- a/src/datetimepicker/default.ts +++ b/src/datetimepicker/default.ts @@ -6,6 +6,8 @@ import { DateTimePicker } from '@syncfusion/ej2-calendars'; (window as any).default = (): void => { loadCultureFiles(); - let dateTimeInstance: DateTimePicker = new DateTimePicker(); + let dateTimeInstance: DateTimePicker = new DateTimePicker({ + placeholder: "Select a date and time", + }); dateTimeInstance.appendTo('#datetimepicker'); }; \ No newline at end of file diff --git a/src/datetimepicker/disabled.ts b/src/datetimepicker/disabled.ts index daad3c5d..41525c44 100644 --- a/src/datetimepicker/disabled.ts +++ b/src/datetimepicker/disabled.ts @@ -7,6 +7,7 @@ import { DateTimePicker, RenderDayCellEventArgs } from '@syncfusion/ej2-calendar (window as any).default = (): void => { loadCultureFiles(); let dateTimeInstance: DateTimePicker = new DateTimePicker({ + placeholder: "Select a date and time", renderDayCell: disableDate }); dateTimeInstance.appendTo('#datetimepicker'); diff --git a/src/datetimepicker/input-mask.ts b/src/datetimepicker/input-mask.ts index 225cd20f..c823f81f 100644 --- a/src/datetimepicker/input-mask.ts +++ b/src/datetimepicker/input-mask.ts @@ -7,6 +7,7 @@ import { DateTimePicker, MaskedDateTime } from '@syncfusion/ej2-calendars'; (window as any).default = (): void => { loadCultureFiles(); let dateTimeInstance: DateTimePicker = new DateTimePicker({ + placeholder: "Select a date and time", format: "M/d/yyyy hh:mm a", enableMask: true }); diff --git a/src/datetimepicker/special-dates.ts b/src/datetimepicker/special-dates.ts index a2777578..0049d385 100644 --- a/src/datetimepicker/special-dates.ts +++ b/src/datetimepicker/special-dates.ts @@ -8,6 +8,7 @@ import { addClass } from '@syncfusion/ej2-base'; (window as any).default = (): void => { loadCultureFiles(); let dateTimeInstance: DateTimePicker = new DateTimePicker({ + placeholder: "Select a date and time", renderDayCell: customDates, value: new Date('1/13/2017'), cssClass: 'e-customStyle' }); diff --git a/src/dialog/components-dialog.html b/src/dialog/components-dialog.html index 11a9f3e3..f9aa8f80 100644 --- a/src/dialog/components-dialog.html +++ b/src/dialog/components-dialog.html @@ -186,12 +186,15 @@ top:0%! important; .tailwind-dark #formId { background: #1f2937; } - +.fluent-dark #formId { + background: #111111; +} .material-dark .form-title, .bootstrap-dark .form-title, .fabric-dark .form-title, .tailwind-dark .form-title, -.bootstrap5-dark .form-title { +.bootstrap5-dark .form-title, +.fluent-dark .form-title { color: rgb(249 249 249); } diff --git a/src/dialog/dialog-contents-via-ajax.html b/src/dialog/dialog-contents-via-ajax.html index 1c46f7df..cfb0cf23 100644 --- a/src/dialog/dialog-contents-via-ajax.html +++ b/src/dialog/dialog-contents-via-ajax.html @@ -34,7 +34,9 @@ .tailwind-dark .e-dialog .e-dlg-header >img.img1, .bootstrap5 .e-dialog .e-dlg-header >img.img1, .bootstrap5-dark .e-dialog .e-dlg-header >img.img1, - .bootstrap4 .e-dialog .e-dlg-header >img.img1 { + .bootstrap4 .e-dialog .e-dlg-header >img.img1, + .fluent .e-dialog .e-dlg-header >img.img1, + .fluent-dark .e-dialog .e-dlg-header >img.img1 { margin-top: 0px; } .e-dlg-header-content { diff --git a/src/dialog/position.html b/src/dialog/position.html index 29752783..7b57b018 100644 --- a/src/dialog/position.html +++ b/src/dialog/position.html @@ -1,7 +1,7 @@
- +
@@ -46,6 +46,25 @@ margin-bottom: 15px; margin-top: 10px; } + + #target .e-dialog { + width: 452px; + } + + .fluent.e-bigger #target .e-dialog, + .fluent-dark.e-bigger #target .e-dialog { + width: 502px; + } + + #poschange { + width: 405px; + } + + .fluent.e-bigger #poschange, + .fluent-dark.e-bigger #poschange { + width: 455px; + } + #dialog table, #dialog th, #dialog td { @@ -101,4 +120,4 @@ width: 100%; } - \ No newline at end of file + diff --git a/src/dialog/position.ts b/src/dialog/position.ts index c28af5fb..474ebb50 100644 --- a/src/dialog/position.ts +++ b/src/dialog/position.ts @@ -17,8 +17,6 @@ import { RadioButton } from '@syncfusion/ej2-buttons'; header: 'Choose a Dialog Position', // The dialog shows within the target element target: document.getElementById('target'), - // Dialog width - width: '452px', open: dialogOpen, close: dialogClose, //Dialog footerTemplate @@ -74,4 +72,4 @@ import { RadioButton } from '@syncfusion/ej2-buttons'; function dialogClose(): void { document.getElementById('dialogBtn').style.display = 'block'; } -}; \ No newline at end of file +}; diff --git a/src/dialog/template.html b/src/dialog/template.html index d05fc1b5..cf92b2b4 100644 --- a/src/dialog/template.html +++ b/src/dialog/template.html @@ -24,8 +24,7 @@ padding-bottom: 20px; min-height: 350px; } - .material button#sendButton, - button#sendButton { + .material button#sendButton { top: 3px; position: relative; } @@ -59,6 +58,10 @@ top: 5px; left: -11px; } + .fluent .e-dialog .e-dlg-header-content .e-btn.e-dlg-closeicon-btn { + top: 3px; + left: 0px; + } .e-bigger .e-dialog .e-dlg-header-content .e-btn.e-dlg-closeicon-btn { top: 3px; left: -11px; @@ -155,7 +158,8 @@ .fabric-dark .dialogContent .dialogText, .bootstrap-dark .dialogContent .dialogText, .bootstrap5-dark .dialogContent .dialogText, - .tailwind-dark .dialogContent .dialogText + .tailwind-dark .dialogContent .dialogText, + .fluent-dark .dialogContent .dialogText { color: #424242; } @@ -173,6 +177,12 @@ } .bootstrap4 .e-dialog .e-footer-content { border-top: 1px solid #e9ecef; + } + .bootstrap5 .e-dialog .e-footer-content { + border-top: 1px solid #dee2e6; + } + .bootstrap5-dark .e-dialog .e-footer-content { + border-top: 1px solid #444c54; } .highcontrast .dialogContent .dialogText { background-color : rgba(255,255,255,0.20); @@ -216,6 +226,17 @@ .bootstrap4 .e-dialog .e-dlg-header-content .e-btn.e-dlg-closeicon-btn:focus { background-color : transparent; } + + .tailwind .e-dialog .e-dlg-header-content .e-btn.e-dlg-closeicon-btn:hover, + .tailwind .e-dialog .e-dlg-header-content .e-btn.e-dlg-closeicon-btn:focus, + .tailwind-dark .e-dialog .e-dlg-header-content .e-btn.e-dlg-closeicon-btn:hover, + .tailwind-dark .e-dialog .e-dlg-header-content .e-btn.e-dlg-closeicon-btn:focus, + .bootstrap5 .e-dialog .e-dlg-header-content .e-btn.e-dlg-closeicon-btn:hover, + .bootstrap5 .e-dialog .e-dlg-header-content .e-btn.e-dlg-closeicon-btn:focus, + .bootstrap5-dark .e-dialog .e-dlg-header-content .e-btn.e-dlg-closeicon-btn:hover, + .bootstrap5-dark .e-dialog .e-dlg-header-content .e-btn.e-dlg-closeicon-btn:focus { + background-color : transparent; + } .material .e-dialog .e-dlg-header-content .e-btn.e-dlg-closeicon-btn:active .e-icon-dlg-close , .material .e-dialog .e-dlg-header-content .e-btn.e-dlg-closeicon-btn:focus .e-icon-dlg-close, .material .e-dialog .e-dlg-header-content .e-btn.e-dlg-closeicon-btn:hover .e-icon-dlg-close, @@ -244,4 +265,4 @@ width: 36px; height: 36px; } - \ No newline at end of file + diff --git a/src/document-editor/auto-save.html b/src/document-editor/auto-save.html index eedcf12f..aab99631 100644 --- a/src/document-editor/auto-save.html +++ b/src/document-editor/auto-save.html @@ -47,6 +47,9 @@

\ No newline at end of file diff --git a/src/form-validator/external-submit.html b/src/form-validator/external-submit.html index 74f9973c..52eb4a7f 100644 --- a/src/form-validator/external-submit.html +++ b/src/form-validator/external-submit.html @@ -156,7 +156,8 @@ .fabric-dark .e-float-input label.e-float-text, .bootstrap-dark .e-float-input label.e-float-text, .bootstrap5-dark .e-float-input label.e-float-text, - .tailwind-dark .e-float-input label.e-float-text { + .tailwind-dark .e-float-input label.e-float-text, + .fluent-dark .e-float-input label.e-float-text { color: #fff !important ; } @@ -174,7 +175,8 @@ .fabric-dark .form-title, .bootstrap-dark .form-title, .bootstrap5-dark .form-title, - .tailwind-dark .form-title { + .tailwind-dark .form-title, + .fluent-dark .form-title { color: #fff; } @@ -233,4 +235,7 @@ .tailwind-dark .form-horizontal.e-formvalidator { background: #6c757d; } + .fluent-dark .form-horizontal.e-formvalidator { + background: #212529; + } \ No newline at end of file diff --git a/src/form-validator/html5.html b/src/form-validator/html5.html index 0eb131f1..c2f26085 100644 --- a/src/form-validator/html5.html +++ b/src/form-validator/html5.html @@ -286,7 +286,8 @@ .fabric-dark .form-title, .bootstrap-dark .form-title, .bootstrap5-dark .form-title, - .tailwind-dark .form-title { + .tailwind-dark .form-title, + .fluent-dark .form-title { color: #fff; } @@ -300,4 +301,7 @@ .tailwind-dark .form-horizontal.e-formvalidator { background: #6c757d; } + .fluent-dark .form-horizontal.e-formvalidator { + background: #212529; + } \ No newline at end of file diff --git a/src/form-validator/wizard-form.html b/src/form-validator/wizard-form.html index c0f5771d..5178a132 100644 --- a/src/form-validator/wizard-form.html +++ b/src/form-validator/wizard-form.html @@ -203,7 +203,8 @@ .fabric-dark .form-title, .bootstrap-dark .form-title, .bootstrap5-dark .form-title, - .tailwind-dark .form-title { + .tailwind-dark .form-title, + .fluent-dark .form-title { color: #fff; } @@ -366,4 +367,7 @@ .tailwind-dark #formId { background: #6c757d; } + .fluent-dark #formId { + background: #212529; + } \ No newline at end of file diff --git a/src/gantt/contextMenu.ts b/src/gantt/contextMenu.ts index 48b99c19..0bf6bbbb 100644 --- a/src/gantt/contextMenu.ts +++ b/src/gantt/contextMenu.ts @@ -49,7 +49,7 @@ let contextMenuOpen: EmitType = (args?: ContextMenuOpe resourceInfo: 'resources' }, columns: [ - { field: 'TaskID', width: 60 }, + { field: 'TaskID', width: 80 }, { field: 'TaskName', headerText: 'Job Name', width: '250', clipMode: 'EllipsisWithTooltip' }, { field: 'StartDate' }, { field: 'EndDate' }, diff --git a/src/gantt/default.ts b/src/gantt/default.ts index f2033fcb..399ee9eb 100644 --- a/src/gantt/default.ts +++ b/src/gantt/default.ts @@ -13,6 +13,7 @@ Gantt.Inject(Selection); { dataSource: projectNewData, height: '450px', + treeColumnIndex: 1, taskFields: { id: 'TaskID', name: 'TaskName', @@ -23,6 +24,15 @@ Gantt.Inject(Selection); dependency: 'Predecessor', child: 'subtasks' }, + columns: [ + { field: 'TaskID', width: 80 }, + { field: 'TaskName',headerText: 'Name', width: 250 }, + { field: 'StartDate' }, + { field: 'EndDate' }, + { field: 'Duration' }, + { field: 'Predecessor' }, + { field: 'Progress' }, + ], labelSettings: { leftLabel: 'TaskName' }, diff --git a/src/gantt/editing.ts b/src/gantt/editing.ts index b8a84d8b..3c5750bb 100644 --- a/src/gantt/editing.ts +++ b/src/gantt/editing.ts @@ -53,7 +53,7 @@ Gantt.Inject(Edit, Selection, Toolbar, DayMarkers); }, }, columns: [ - { field: 'TaskID', width: 60 }, + { field: 'TaskID', width: 80 }, { field: 'TaskName', headerText: 'Job Name', width: '250', clipMode: 'EllipsisWithTooltip' }, { field: 'StartDate' }, { field: 'Duration' }, diff --git a/src/gantt/event-markers.ts b/src/gantt/event-markers.ts index e49d0c1a..819297f8 100644 --- a/src/gantt/event-markers.ts +++ b/src/gantt/event-markers.ts @@ -24,6 +24,16 @@ Gantt.Inject(Selection, DayMarkers); dependency: 'Predecessor', child: 'subtasks' }, + treeColumnIndex: 1, + columns: [ + { field: 'TaskID', width: 80 }, + { field: 'TaskName',headerText: 'Name', width: 250 }, + { field: 'StartDate' }, + { field: 'EndDate' }, + { field: 'Duration' }, + { field: 'Predecessor' }, + { field: 'Progress' }, + ], labelSettings: { leftLabel: 'TaskName' }, diff --git a/src/gantt/events.ts b/src/gantt/events.ts index d869964b..ee26f2b4 100644 --- a/src/gantt/events.ts +++ b/src/gantt/events.ts @@ -69,7 +69,7 @@ Gantt.Inject(Selection, Reorder, Sort, Resize, ContextMenu, ColumnMenu, Toolbar, child: 'subtasks' }, columns: [ - { field: 'TaskID', width: 60 }, + { field: 'TaskID', width: 75 }, { field: 'TaskName', width: 250 }, { field: 'StartDate' }, { field: 'EndDate' }, @@ -210,4 +210,4 @@ function appendElement(html: string): void { span.innerHTML = html; let log: HTMLElement = document.getElementById('EventLog'); log.insertBefore(span, log.firstChild); -} \ No newline at end of file +} diff --git a/src/gantt/exporting.ts b/src/gantt/exporting.ts index 4a98c94a..410e24d3 100644 --- a/src/gantt/exporting.ts +++ b/src/gantt/exporting.ts @@ -25,7 +25,7 @@ Gantt.Inject(Selection, Toolbar, ExcelExport, PdfExport); resourceInfo: 'resources' }, columns: [ - { field: 'TaskID', width: 60 }, + { field: 'TaskID', width: 80 }, { field: 'TaskName', width: 250 }, { field: 'StartDate' }, { field: 'EndDate' }, diff --git a/src/gantt/grid-lines.ts b/src/gantt/grid-lines.ts index de1920ea..bbd913c9 100644 --- a/src/gantt/grid-lines.ts +++ b/src/gantt/grid-lines.ts @@ -27,7 +27,7 @@ Gantt.Inject(DayMarkers, Selection ); child: 'subtasks' }, columns: [ - { field: 'TaskID', width: 60 }, + { field: 'TaskID', width: 80 }, { field: 'TaskName', width: 250 }, { field: 'StartDate' }, { field: 'EndDate' }, @@ -54,7 +54,7 @@ Gantt.Inject(DayMarkers, Selection ); { id: 'Horizontal', type: 'Horizontal' }, { id: 'None', type: 'None' } ], - popupWidth: '100px', + popupWidth: '125px', fields: { text: 'type', value: 'id' }, value: 'Both', change: (e: ChangeEventArgs) => { diff --git a/src/gantt/header-template.html b/src/gantt/header-template.html index 7d53e12f..7d54e338 100644 --- a/src/gantt/header-template.html +++ b/src/gantt/header-template.html @@ -1,43 +1,53 @@ \ No newline at end of file diff --git a/src/gantt/indicators.ts b/src/gantt/indicators.ts index 18166c8c..fdc824d8 100644 --- a/src/gantt/indicators.ts +++ b/src/gantt/indicators.ts @@ -25,6 +25,16 @@ Gantt.Inject(Selection, DayMarkers); child: 'subtasks', indicators: 'Indicators' }, + treeColumnIndex: 1, + columns: [ + { field: 'TaskID', width: 80 }, + { field: 'TaskName',headerText: 'Name', width: 250 }, + { field: 'StartDate' }, + { field: 'EndDate' }, + { field: 'Duration' }, + { field: 'Predecessor' }, + { field: 'Progress' }, + ], labelSettings: { leftLabel: 'TaskName' }, diff --git a/src/gantt/keyboard-interactions.ts b/src/gantt/keyboard-interactions.ts index b27e9e86..70c2f5da 100644 --- a/src/gantt/keyboard-interactions.ts +++ b/src/gantt/keyboard-interactions.ts @@ -28,7 +28,7 @@ Gantt.Inject(Selection, Toolbar, Edit, Filter, DayMarkers ); child: 'subtasks' }, columns: [ - { field: 'TaskID', width: 70 }, + { field: 'TaskID', width: 80 }, { field: 'TaskName', width: 250 }, { field: 'StartDate' }, { field: 'EndDate' }, diff --git a/src/gantt/local-data.ts b/src/gantt/local-data.ts index 1acedcc2..71ecd41c 100644 --- a/src/gantt/local-data.ts +++ b/src/gantt/local-data.ts @@ -27,7 +27,7 @@ Gantt.Inject(Selection, DayMarkers ); child: 'subtasks' }, columns: [ - { field: 'TaskID', width: 60 }, + { field: 'TaskID', width: 80 }, { field: 'TaskName', width: 250 }, { field: 'StartDate' }, { field: 'EndDate' }, diff --git a/src/gantt/remote-data.ts b/src/gantt/remote-data.ts index f793030c..a417ef24 100644 --- a/src/gantt/remote-data.ts +++ b/src/gantt/remote-data.ts @@ -33,7 +33,7 @@ Gantt.Inject(Selection, DayMarkers); { field: 'StartDate' }, { field: 'Duration' }, ], - treeColumnIndex: 0, + treeColumnIndex: 1, allowSelection: true, gridLines: 'Both', highlightWeekends: true, @@ -64,8 +64,8 @@ Gantt.Inject(Selection, DayMarkers); leftLabel: 'TaskName', }, includeWeekend: true, - projectStartDate: new Date('02/24/2019'), - projectEndDate: new Date('06/10/2019') + projectStartDate: new Date('02/24/2021'), + projectEndDate: new Date('06/10/2021') }); gantt.appendTo('#RemoteData'); }; diff --git a/src/gantt/resizing.ts b/src/gantt/resizing.ts index 13763832..3cfd4a56 100644 --- a/src/gantt/resizing.ts +++ b/src/gantt/resizing.ts @@ -25,7 +25,7 @@ Gantt.Inject(Selection, Resize ); child: 'subtasks' }, columns: [ - { field: 'TaskID', headerText: 'ID', width: 60 , minWidth: 8}, + { field: 'TaskID', headerText: 'ID', width: 80 , minWidth: 8}, { field: 'TaskName', headerText: 'Job Name', width: 250, minWidth: 120, maxWidth: 300 }, { field: 'StartDate', width: 135, minWidth: 8 }, { field: 'EndDate', width: 135, minWidth: 8 }, diff --git a/src/gantt/self-reference-data.ts b/src/gantt/self-reference-data.ts index 321ce3ea..d4989fda 100644 --- a/src/gantt/self-reference-data.ts +++ b/src/gantt/self-reference-data.ts @@ -27,7 +27,7 @@ Gantt.Inject(Selection, DayMarkers ); parentID: 'parentID' }, columns: [ - { field: 'taskID', width: 60 }, + { field: 'taskID', width: 80 }, { field: 'taskName', width: 250 }, { field: 'startDate' }, { field: 'endDate' }, diff --git a/src/gantt/sorting-api.html b/src/gantt/sorting-api.html index c7bd9883..715c9f74 100644 --- a/src/gantt/sorting-api.html +++ b/src/gantt/sorting-api.html @@ -38,8 +38,8 @@ diff --git a/src/gantt/sorting-api.ts b/src/gantt/sorting-api.ts index ace64658..7cf78675 100644 --- a/src/gantt/sorting-api.ts +++ b/src/gantt/sorting-api.ts @@ -30,7 +30,7 @@ Gantt.Inject(Sort, DayMarkers, Selection ); child: 'subtasks' }, columns: [ - { field: 'TaskID', headerText: 'ID', width: 70 }, + { field: 'TaskID', headerText: 'ID', width: 80 }, { field: 'TaskName', headerText: 'TaskName', width: 250 }, { field: 'StartDate', headerText: 'StartDate' }, { field: 'EndDate', headerText: 'EndDate' }, diff --git a/src/gantt/split-tasks.ts b/src/gantt/split-tasks.ts index 2be7ca80..aa681d8b 100644 --- a/src/gantt/split-tasks.ts +++ b/src/gantt/split-tasks.ts @@ -34,7 +34,7 @@ Gantt.Inject(Selection, DayMarkers, Toolbar, Edit, ContextMenu); showDeleteConfirmDialog: true }, columns: [ - { field: 'TaskID', width: 60 }, + { field: 'TaskID', width: 80 }, { field: 'TaskName', headerText: 'Job Name', width: '250', clipMode: 'EllipsisWithTooltip' }, { field: 'StartDate' }, { field: 'EndDate' }, diff --git a/src/gantt/tasklabel-template.ts b/src/gantt/tasklabel-template.ts index 5e35b1fe..4ef0d47f 100644 --- a/src/gantt/tasklabel-template.ts +++ b/src/gantt/tasklabel-template.ts @@ -42,7 +42,7 @@ Gantt.Inject(DayMarkers, Selection); child: 'subtasks' }, columns: [ - { field: 'TaskID', width: 60 }, + { field: 'TaskID', width: 80 }, { field: 'TaskName', width: 250 }, { field: 'StartDate' }, { field: 'EndDate' }, diff --git a/src/gantt/timezone.ts b/src/gantt/timezone.ts index 1a7285eb..a1c4cf27 100644 --- a/src/gantt/timezone.ts +++ b/src/gantt/timezone.ts @@ -31,6 +31,16 @@ Gantt.Inject(Selection); dependency: 'predecessor', parentID: 'parentID' }, + treeColumnIndex: 1, + columns: [ + { field: 'taskID', width: 80 }, + { field: 'taskName',headerText: 'Name', width: 250 }, + { field: 'startDate' }, + { field: 'endDate' }, + { field: 'duration' }, + { field: 'predecessor' }, + { field: 'progress' }, + ], timelineSettings: { timelineUnitSize: 65, topTier: { diff --git a/src/gantt/toolbar-template.html b/src/gantt/toolbar-template.html index 02f7908f..ff9507c1 100644 --- a/src/gantt/toolbar-template.html +++ b/src/gantt/toolbar-template.html @@ -46,13 +46,10 @@ content: '\e714'; font-family: 'e-icons'; } - .tailwind #ToolbarTemplate .e-quickfilter::before, - .tailwind-dark #ToolbarTemplate .e-quickfilter::before { - content: '\e71b'; - font-family: 'e-icons'; - } .bootstrap5 #ToolbarTemplate .e-quickfilter::before, - .bootstrap5-dark #ToolbarTemplate .e-quickfilter::before { + .bootstrap5-dark #ToolbarTemplate .e-quickfilter::before, + .fluent #ToolbarTemplate .e-quickfilter::before, .fluent-dark #ToolbarTemplate .e-quickfilter::before, + .tailwind #ToolbarTemplate .e-quickfilter::before, .tailwind-dark #ToolbarTemplate .e-quickfilter::before { content: '\e7f7'; font-family: 'e-icons'; } diff --git a/src/gantt/toolbar-template.ts b/src/gantt/toolbar-template.ts index d680d513..e8a57c4d 100644 --- a/src/gantt/toolbar-template.ts +++ b/src/gantt/toolbar-template.ts @@ -29,7 +29,7 @@ Gantt.Inject(Filter, Toolbar, DayMarkers, Selection); child: 'subtasks' }, columns: [ - { field: 'TaskID', width: 70 }, + { field: 'TaskID', width: 80 }, { field: 'TaskName', width: 250 }, { field: 'StartDate' }, { field: 'EndDate' }, diff --git a/src/gantt/tooltip-template.ts b/src/gantt/tooltip-template.ts index 0cd7c4ea..c686c3fc 100644 --- a/src/gantt/tooltip-template.ts +++ b/src/gantt/tooltip-template.ts @@ -31,7 +31,7 @@ Gantt.Inject(Selection, DayMarkers ); child: 'subtasks' }, columns: [ - { field: 'TaskID', width: 60 }, + { field: 'TaskID', width: 80 }, { field: 'TaskName', width: 250 }, { field: 'StartDate' }, { field: 'EndDate' }, diff --git a/src/gantt/unscheduled-tasks.html b/src/gantt/unscheduled-tasks.html index 27c7857a..486e8699 100644 --- a/src/gantt/unscheduled-tasks.html +++ b/src/gantt/unscheduled-tasks.html @@ -14,7 +14,9 @@ .tailwind #Unscheduled .e-add-icon:before,.tailwind-dark #Unscheduled .e-add-icon:before { content: "\e7dd" } - .bootstrap5 #Unscheduled .e-add-icon:before,.bootstrap5-dark #Unscheduled .e-add-icon:before { + .bootstrap5 #Unscheduled .e-add-icon:before,.bootstrap5-dark #Unscheduled .e-add-icon:before, + .tailwind #Unscheduled .e-add-icon:before,.tailwind-dark #Unscheduled .e-add-icon:before, + .fluent #Unscheduled .e-add-icon:before, .fluent-dark #Unscheduled .e-add-icon:before { content: "\e836" } diff --git a/src/gantt/unscheduled-tasks.ts b/src/gantt/unscheduled-tasks.ts index f8c302c7..a0f9a9cf 100644 --- a/src/gantt/unscheduled-tasks.ts +++ b/src/gantt/unscheduled-tasks.ts @@ -24,7 +24,7 @@ Gantt.Inject(Edit, Toolbar, Selection); allowEditing: true }, columns: [ - {field: 'TaskId', width: 75 }, + {field: 'TaskId', width: 90 }, {field: 'TaskName', width: 80 }, {field: 'StartDate', width: 120}, {field: 'EndDate', width: 120 }, diff --git a/src/gantt/work-week.ts b/src/gantt/work-week.ts index 6e68670f..54fc462b 100644 --- a/src/gantt/work-week.ts +++ b/src/gantt/work-week.ts @@ -38,6 +38,16 @@ MultiSelect.Inject(CheckBoxSelection); dependency: 'Predecessor', child: 'subtasks' }, + treeColumnIndex: 1, + columns: [ + { field: 'TaskID', width: 80 }, + { field: 'TaskName',headerText: 'Name', width: 250 }, + { field: 'StartDate' }, + { field: 'EndDate' }, + { field: 'Duration' }, + { field: 'Predecessor' }, + { field: 'Progress' }, + ], labelSettings: { leftLabel: 'TaskName' }, diff --git a/src/gantt/working-time-range.ts b/src/gantt/working-time-range.ts index 9fbf017c..6e0df41c 100644 --- a/src/gantt/working-time-range.ts +++ b/src/gantt/working-time-range.ts @@ -25,6 +25,16 @@ Gantt.Inject(Selection, DayMarkers); dependency: 'Predecessor', child: 'subtasks' }, + treeColumnIndex: 1, + columns: [ + { field: 'TaskID', width: 80 }, + { field: 'TaskName',headerText: 'Name', width: 250 }, + { field: 'StartDate' }, + { field: 'EndDate' }, + { field: 'Duration' }, + { field: 'Predecessor' }, + { field: 'Progress' }, + ], durationUnit: 'Hour', labelSettings: { leftLabel: 'TaskName' diff --git a/src/gantt/zooming.ts b/src/gantt/zooming.ts index 5b772dbd..a2d2b0e9 100644 --- a/src/gantt/zooming.ts +++ b/src/gantt/zooming.ts @@ -25,7 +25,7 @@ Gantt.Inject(Toolbar); child: 'subtasks' }, columns: [ - { field: 'TaskID', width: 60 }, + { field: 'TaskID', width: 80 }, { field: 'TaskName', width: 250 }, { field: 'StartDate' }, { field: 'EndDate' }, diff --git a/src/grid/adaptive.html b/src/grid/adaptive.html index 016f3d28..61b71893 100644 --- a/src/grid/adaptive.html +++ b/src/grid/adaptive.html @@ -125,6 +125,9 @@ vertical-align: top; width: calc(60% - 48px); } + .e-adaptive-demo .e-rtl.e-pager div.e-parentmsgbar { + margin-top: 0; + } .e-adaptive-demo .e-pager .e-pagesizes { display: none; } @@ -161,6 +164,9 @@ text-align: left; width: 10%; } + .e-adaptive-demo .e-rtl.e-pager .e-mnext { + margin: 0; + } .e-adaptive-demo .e-pager .e-mlast { margin-left: 4px; text-align: left; @@ -209,4 +215,4 @@ documentation section.

- \ No newline at end of file + diff --git a/src/grid/grid-overview.html b/src/grid/grid-overview.html index 22a85512..8680bf02 100644 --- a/src/grid/grid-overview.html +++ b/src/grid/grid-overview.html @@ -24,6 +24,9 @@ .highcontrast .empimg{ background-color:#ffd939; } + .fluent .empimg{ + background-color:#106EBE; + } _:-ms-fullscreen, :root .highcontrast .e-userimg.sf-icon-Male::before, _:-ms-fullscreen, :root .highcontrast .e-userimg.sf-icon-FeMale::before{ color: black; @@ -300,4 +303,4 @@ documentation section.

- \ No newline at end of file + diff --git a/src/kanban/card-template.html b/src/kanban/card-template.html index 4052855b..1d7fa67a 100644 --- a/src/kanban/card-template.html +++ b/src/kanban/card-template.html @@ -3,82 +3,135 @@
- + + + \ No newline at end of file diff --git a/src/pivot-table/exporting.ts b/src/pivot-table/exporting.ts index 4293724d..c4e27443 100644 --- a/src/pivot-table/exporting.ts +++ b/src/pivot-table/exporting.ts @@ -41,7 +41,7 @@ let Pivot_Data: IDataSet[] = (pivotData as any).data; }); exportType.appendTo('#mode'); let exportBtn: Button = new Button({ - cssClass: 'e-flat', isPrimary: true, + isPrimary: true, }); exportBtn.appendTo('#export-btn'); document.getElementById('export-btn').onclick = () => { diff --git a/src/pivot-table/grouping-bar.ts b/src/pivot-table/grouping-bar.ts index 63c728df..231f30bc 100644 --- a/src/pivot-table/grouping-bar.ts +++ b/src/pivot-table/grouping-bar.ts @@ -38,38 +38,43 @@ let Pivot_Data: IDataSet[] = (pivotData as any).data; let filter: CheckBox = new CheckBox({ label: 'Show Filter Icon', checked: true, - change: onChange + change: onFilter }); filter.appendTo('#filter'); let sort: CheckBox = new CheckBox({ label: 'Show Sort Icon', checked: true, - change: onChange + change: onSort }); sort.appendTo('#sort'); let remove: CheckBox = new CheckBox({ label: 'Show Remove Icon', checked: true, - change: onChange + change: onRemove }); remove.appendTo('#remove'); let summary: CheckBox = new CheckBox({ label: 'Show Value Type Icon', checked: true, - change: onChange + change: onValueType }); summary.appendTo('#summary'); /* tslint:disable */ - function onChange(args: any) { - if ((args.event.target as HTMLElement).id === 'filter') { - pivotObj.groupingBarSettings.showFilterIcon = args.checked; - } else if (args.event.target.id === 'sort') { - pivotObj.groupingBarSettings.showSortIcon = args.checked; - } else if (args.event.target.id === 'remove') { - pivotObj.groupingBarSettings.showRemoveIcon = args.checked; - } else { - pivotObj.groupingBarSettings.showValueTypeIcon = args.checked; - } + + function onSort(args: any) { + pivotObj.groupingBarSettings.showSortIcon = args.checked; + } + + function onFilter(args: any) { + pivotObj.groupingBarSettings.showFilterIcon = args.checked; + } + + function onRemove(args: any) { + pivotObj.groupingBarSettings.showRemoveIcon = args.checked; + } + + function onValueType(args: any) { + pivotObj.groupingBarSettings.showValueTypeIcon = args.checked; } }; diff --git a/src/pivot-table/locale.json b/src/pivot-table/locale.json index e0c4855f..689c65aa 100644 --- a/src/pivot-table/locale.json +++ b/src/pivot-table/locale.json @@ -1,7 +1,7 @@ { "de": { "pivotview": { - "png":"PNG", + "png": "PNG", "jpeg": "JPEG", "svg": "SVG", "pie": "Kuchen", @@ -266,13 +266,16 @@ "no": "Nein", "numberFormatMenu": "Zahlenformatierung ...", "conditionalFormatingMenu": "Bedingte Formatierung...", - "removeCalculatedField":"Möchten Sie dieses berechnete Feld wirklich löschen?", + "removeCalculatedField": "Möchten Sie dieses berechnete Feld wirklich löschen?", "replaceConfirmBefore": "Ein Bericht mit dem Namen ", "replaceConfirmAfter": " ist bereits vorhanden. Möchten Sie es ersetzen?", "Median": "Median", "stacked": "Gestapelt", "single": "Single", - "multipleAxisMode": "Mehrachsenmodus" + "multipleAxisMode": "Mehrachsenmodus", + "grandTotalPosition": "Gesamtposition", + "top": "oben", + "bottom": "Unterseite" }, "pivotfieldlist": { "all": "alles", @@ -444,7 +447,7 @@ }, "ar": { "pivotview": { - "png":"بي إن جي", + "png": "بي إن جي", "jpeg": "JPEG", "svg": "SVG", "pie": "فطيرة", @@ -709,13 +712,16 @@ "no": "لا", "numberFormatMenu": "تنسيق الأرقام ...", "conditionalFormatingMenu": "تنسيق مشروط...", - "removeCalculatedField":"هل أنت متأكد أنك تريد حذف هذا الحقل المحسوب؟", + "removeCalculatedField": "هل أنت متأكد أنك تريد حذف هذا الحقل المحسوب؟", "replaceConfirmBefore": "تقرير مسمى ", "replaceConfirmAfter": "موجود مسبقا. هل تريد استبدالها؟ ", "Median": "الوسيط", "stacked": "مرصوصة", "single": "أعزب", - "multipleAxisMode": "وضع المحاور المتعددة" + "multipleAxisMode": "وضع المحاور المتعددة", + "grandTotalPosition": "الموضع الإجمالي الكبير", + "top": "أعلى", + "bottom": "الأسفل" }, "pivotfieldlist": { "all": "الكل", @@ -886,7 +892,7 @@ }, "en": { "pivotview": { - "png":"PNG", + "png": "PNG", "jpeg": "JPEG", "svg": "SVG", "pie": "Pie", @@ -1151,13 +1157,16 @@ "no": "No", "numberFormatMenu": "Number Formatting...", "conditionalFormatingMenu": "Conditional Formatting...", - "removeCalculatedField":"Are you sure you want to delete this calculated field?", + "removeCalculatedField": "Are you sure you want to delete this calculated field?", "replaceConfirmBefore": "A report named ", "replaceConfirmAfter": " already exists. Do you want to replace it?", "Median": "Median", "stacked": "Stacked", "single": "Single", - "multipleAxisMode": "Multiple Axis Mode" + "multipleAxisMode": "Multiple Axis Mode", + "grandTotalPosition": "Grand totals position", + "top": "Top", + "bottom": "Bottom" }, "pivotfieldlist": { "all": "All", @@ -1328,7 +1337,7 @@ }, "zh": { "pivotview": { - "png":"PNG", + "png": "PNG", "jpeg": "JPEG格式", "svg": "SVG", "pie": "馅饼", @@ -1593,13 +1602,16 @@ "no": "沒有", "numberFormatMenu": "數字格式...", "conditionalFormatingMenu": "條件格式...", - "removeCalculatedField":"您确定要删除此计算字段吗？", + "removeCalculatedField": "您确定要删除此计算字段吗？", "replaceConfirmBefore": "一份名为 ", "replaceConfirmAfter": " 已经存在。您要更换吗？", "Median": "中位数", "stacked": "堆叠式", "single": "单身的", - "multipleAxisMode": "多轴模式" + "multipleAxisMode": "多轴模式", + "grandTotalPosition": "总头寸", + "top": "最佳", + "bottom": "底部" }, "pivotfieldlist": { "all": "所有", @@ -1770,7 +1782,7 @@ }, "fr-CH": { "pivotview": { - "png":"PNG", + "png": "PNG", "jpeg": "JPEG", "svg": "SVG", "pie": "Tarte", @@ -2035,13 +2047,16 @@ "no": "Non", "numberFormatMenu": "Formatage des nombres ...", "conditionalFormatingMenu": "Mise en forme conditionnelle...", - "removeCalculatedField":"Voulez-vous vraiment supprimer ce champ calculé?", + "removeCalculatedField": "Voulez-vous vraiment supprimer ce champ calculé?", "replaceConfirmBefore": "Un rapport nommé ", "replaceConfirmAfter": " existe déjà. Voulez-vous le remplacer?", "Median": "Médian", "stacked": "Empilé", "single": "Seul", - "multipleAxisMode": "Mode à axes multiples" + "multipleAxisMode": "Mode à axes multiples", + "grandTotalPosition": "position du total général", + "top": "Haut", + "bottom": "bas" }, "pivotfieldlist": { "all": "tout", diff --git a/src/pivot-table/sample.json b/src/pivot-table/sample.json index 3744dda3..727dd59b 100644 --- a/src/pivot-table/sample.json +++ b/src/pivot-table/sample.json @@ -32,6 +32,7 @@ "url": "olap", "name": "OLAP", "category": "Data Binding", + "type": "update", "description": "This demo for Essential JS2 Pivot Table control demonstrate the basic rendering of the pivot table with olap datasource" }, { @@ -74,7 +75,6 @@ "url": "summary-customization", "name": "Show/Hide Totals", "category": "User Interaction", - "type": "update", "description": "This demo for Essential JS2 Pivot Table control demonstrate the summary customization feature of the pivot table" }, { @@ -87,6 +87,7 @@ "url": "toolbar", "name": "Toolbar", "category": "User Interaction", + "type": "update", "description": "This demo for Essential JS2 Pivot Table control demonstrate the toolbar feature with pivot table and pivot chart" }, { diff --git a/src/pivot-table/sorting.ts b/src/pivot-table/sorting.ts index e8319ce3..598c01e5 100644 --- a/src/pivot-table/sorting.ts +++ b/src/pivot-table/sorting.ts @@ -82,7 +82,7 @@ let Pivot_Data: IDataSet[] = (pivotData as any).data; orderddl.appendTo('#order'); let applyBtn: Button = new Button({ - cssClass: 'e-flat', isPrimary: true, + isPrimary: true, }); applyBtn.appendTo('#sort-apply'); diff --git a/src/pivot-table/virtual-scrolling.ts b/src/pivot-table/virtual-scrolling.ts index b77dd6fe..9a1c5a71 100644 --- a/src/pivot-table/virtual-scrolling.ts +++ b/src/pivot-table/virtual-scrolling.ts @@ -1,6 +1,6 @@ import { loadCultureFiles } from '../common/culture-loader'; import { PivotView, IDataSet, VirtualScroll } from '@syncfusion/ej2-pivotview'; -import { enableRipple } from '@syncfusion/ej2-base'; +import { enableRipple, Browser } from '@syncfusion/ej2-base'; import { Button } from '@syncfusion/ej2-buttons'; enableRipple(false); @@ -79,6 +79,9 @@ let data: Function = (count: number) => { button.disabled = true; document.getElementById('popup').style.display = 'none'; } + if (Browser.isDevice && pivotObj && pivotObj.enableRtl) { + document.querySelector('.control-section').classList.add('e-rtl'); + } }, }); pivotObj.appendTo('#PivotView'); diff --git a/src/progress-bar/angle.ts b/src/progress-bar/angle.ts index e486d51f..1da19ee1 100644 --- a/src/progress-bar/angle.ts +++ b/src/progress-bar/angle.ts @@ -58,6 +58,8 @@ ProgressBar.Inject(ProgressAnnotation); break; case 'bootstrap5': case 'bootstrap5-dark': + case 'fluent': + case 'fluent-dark': args.progressBar.annotations[0].content = annotationElementContent(annotationColors[8], args.progressBar.element.id); break; case 'tailwind-dark': diff --git a/src/progress-bar/circular.ts b/src/progress-bar/circular.ts index b7ec32f5..c6fc1cf2 100644 --- a/src/progress-bar/circular.ts +++ b/src/progress-bar/circular.ts @@ -18,7 +18,7 @@ ProgressBar.Inject(ProgressAnnotation); 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 === 'TailwindDark' || args.progressBar.theme === 'MaterialDark' || args.progressBar.theme === 'FluentDark') { for (let i: number = 0; i < div.length; i++) { div[i].setAttribute('style', 'color:white'); } diff --git a/src/progress-bar/custom-content.ts b/src/progress-bar/custom-content.ts index b00f425e..28799157 100644 --- a/src/progress-bar/custom-content.ts +++ b/src/progress-bar/custom-content.ts @@ -23,8 +23,10 @@ ProgressBar.Inject(ProgressAnnotation); fabricdark: string, materialdark: string, tailwinddark: string, - bootstrap5: string - } = { material: '#e91e63', fabric: '#0078D6', bootstrap: '#317ab9', bootstrap4: '#007bff', highcontrast: '#FFD939', tailwind: '#4F46E5', bootstrap5: '#0D6EFD', bootstrap5dark: '#0D6EFD', bootstrapdark: '#9A9A9A', fabricdark: '#9A9A9A', materialdark: '#9A9A9A', tailwinddark: '#22D3EE' }; + bootstrap5: string, + fluent: string, + fluentdark: string + } = { fluent: '#0D6EFD', fluentdark: '#0D6EFD', material: '#e91e63', fabric: '#0078D6', bootstrap: '#317ab9', bootstrap4: '#007bff', highcontrast: '#FFD939', tailwind: '#4F46E5', bootstrap5: '#0D6EFD', bootstrap5dark: '#0D6EFD', bootstrapdark: '#9A9A9A', fabricdark: '#9A9A9A', materialdark: '#9A9A9A', tailwinddark: '#22D3EE' }; let progressLoad: EmitType = (args: ILoadedEventArgs) => { let selectedTheme: string = location.hash.split('/')[1]; selectedTheme = selectedTheme ? selectedTheme : 'Material'; diff --git a/src/progress-bar/images/fluent-Download.svg b/src/progress-bar/images/fluent-Download.svg new file mode 100644 index 00000000..3780f92d --- /dev/null +++ b/src/progress-bar/images/fluent-Download.svg @@ -0,0 +1,9 @@ + + + + Download + Created with Sketch. + + + + \ No newline at end of file diff --git a/src/progress-bar/images/fluent-Play.svg b/src/progress-bar/images/fluent-Play.svg new file mode 100644 index 00000000..ac8f72b1 --- /dev/null +++ b/src/progress-bar/images/fluent-Play.svg @@ -0,0 +1,9 @@ + + + + Play + Created with Sketch. + + + + \ No newline at end of file diff --git a/src/progress-bar/images/fluent-Tick.svg b/src/progress-bar/images/fluent-Tick.svg new file mode 100644 index 00000000..8907f155 --- /dev/null +++ b/src/progress-bar/images/fluent-Tick.svg @@ -0,0 +1,9 @@ + + + + Tick + Created with Sketch. + + + + \ No newline at end of file diff --git a/src/progress-bar/images/fluent-pause.svg b/src/progress-bar/images/fluent-pause.svg new file mode 100644 index 00000000..a9c8b671 --- /dev/null +++ b/src/progress-bar/images/fluent-pause.svg @@ -0,0 +1,9 @@ + + + + pause + Created with Sketch. + + + + \ No newline at end of file diff --git a/src/progress-bar/images/fluentdark-Download.svg b/src/progress-bar/images/fluentdark-Download.svg new file mode 100644 index 00000000..3780f92d --- /dev/null +++ b/src/progress-bar/images/fluentdark-Download.svg @@ -0,0 +1,9 @@ + + + + Download + Created with Sketch. + + + + \ No newline at end of file diff --git a/src/progress-bar/images/fluentdark-Play.svg b/src/progress-bar/images/fluentdark-Play.svg new file mode 100644 index 00000000..ac8f72b1 --- /dev/null +++ b/src/progress-bar/images/fluentdark-Play.svg @@ -0,0 +1,9 @@ + + + + Play + Created with Sketch. + + + + \ No newline at end of file diff --git a/src/progress-bar/images/fluentdark-Tick.svg b/src/progress-bar/images/fluentdark-Tick.svg new file mode 100644 index 00000000..8907f155 --- /dev/null +++ b/src/progress-bar/images/fluentdark-Tick.svg @@ -0,0 +1,9 @@ + + + + Tick + Created with Sketch. + + + + \ No newline at end of file diff --git a/src/progress-bar/images/fluentdark-pause.svg b/src/progress-bar/images/fluentdark-pause.svg new file mode 100644 index 00000000..a9c8b671 --- /dev/null +++ b/src/progress-bar/images/fluentdark-pause.svg @@ -0,0 +1,9 @@ + + + + pause + Created with Sketch. + + + + \ No newline at end of file diff --git a/src/progress-bar/linear.ts b/src/progress-bar/linear.ts index ed8c3ce6..4ebcdb35 100644 --- a/src/progress-bar/linear.ts +++ b/src/progress-bar/linear.ts @@ -16,7 +16,7 @@ import { Button } from '@syncfusion/ej2-buttons'; 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 === 'TailwindDark' || args.progressBar.theme === 'MaterialDark' || args.progressBar.theme === 'FluentDark') { for (let i: number = 0; i < div.length; i++) { div[i].setAttribute('style', 'color:white'); } diff --git a/src/progress-bar/progress_segment.ts b/src/progress-bar/progress_segment.ts index fbb3579c..af3ca110 100644 --- a/src/progress-bar/progress_segment.ts +++ b/src/progress-bar/progress_segment.ts @@ -87,6 +87,8 @@ ProgressBar.Inject(ProgressAnnotation); break; case 'bootstrap5': case 'bootstrap5-dark': + case 'fluent': + case 'fluent-dark': args.progressBar.annotations[0].content = '
'; break; case 'tailwind-dark': diff --git a/src/progress-bar/radius.ts b/src/progress-bar/radius.ts index 319e8a72..1219440f 100644 --- a/src/progress-bar/radius.ts +++ b/src/progress-bar/radius.ts @@ -61,7 +61,17 @@ ProgressBar.Inject(ProgressAnnotation); case 'bootstrap5': case 'bootstrap5-dark': args.progressBar.progressColor = '#0D6EFD'; - break; + break; + case 'fluent': + if (args.progressBar.element.id === "full-background") { + args.progressBar.trackColor = '#0D6EFD'; + } else { + args.progressBar.progressColor = '#0D6EFD'; + } + break; + case 'fluent-dark': + args.progressBar.progressColor = '#0D6EFD'; + break; default: args.progressBar.trackColor = '#007bff'; break; diff --git a/src/query-builder/locale.json b/src/query-builder/locale.json index c7ebed45..28342154 100644 --- a/src/query-builder/locale.json +++ b/src/query-builder/locale.json @@ -64,7 +64,11 @@ "NOT": "ليس", "NotContains": "لا يحتوي", "NotStartsWith": "لا يبدأ مع", - "NotEndsWith": "لا ينتهي مع" + "NotEndsWith": "لا ينتهي مع", + "IsEmpty": "فارغ", + "IsNotEmpty": "ليس فارغا", + "IsNull": "باطل", + "IsNotNull": "هو ليس لاشيء" } }, "en": { diff --git a/src/range-navigator/date-time.html b/src/range-navigator/date-time.html index a765af2e..22cf68ec 100644 --- a/src/range-navigator/date-time.html +++ b/src/range-navigator/date-time.html @@ -74,6 +74,14 @@ stop-color: #a16ee5; } + #fluent-gradient-chart stop { + stop-color: #614570; + } + + #fluentdark-gradient-chart stop { + stop-color: #8AB113; + } + #tailwinddark-gradient-chart stop { stop-color: #4f46e5; } @@ -148,5 +156,13 @@ + + + + + + + + \ No newline at end of file diff --git a/src/range-navigator/date-time.ts b/src/range-navigator/date-time.ts index 111f43fa..9ed943dd 100644 --- a/src/range-navigator/date-time.ts +++ b/src/range-navigator/date-time.ts @@ -13,8 +13,8 @@ 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']; -let borderColor : string[] = ['#262E0B', '#5ECB9B', '#5A61F6', '#8B5CF6', '#00bdae', '#9ECB08', '#a16ee5', '#a16ee5', '#a16ee5', '#4472c4', '#4472c4', '#79ECE4']; +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 regionColor : string[] = ['rgba(38, 46, 11, 0.3)', 'rgba(94, 203, 155, 0.3)', 'rgba(90, 97, 246, 0.3)', 'rgba(139, 92, 246, 0.3)', 'rgba(0, 189, 174, 0.3)', 'rgba(158, 203, 8, 0.3)', 'rgba(161, 110, 229, 0.3)', 'rgba(161, 110, 229, 0.3)', 'rgba(161, 110, 229, 0.3)', 'rgba(68, 114, 196, 0.3)', 'rgba(68, 114, 196, 0.3)', 'rgba(121, 236, 228, 0.3)']; diff --git a/src/range-navigator/default.html b/src/range-navigator/default.html index 0d02fb85..03962d29 100644 --- a/src/range-navigator/default.html +++ b/src/range-navigator/default.html @@ -89,6 +89,14 @@ stop-color: #5ECB9B; } + #fluent-gradient-chart stop { + stop-color: #614570; + } + + #fluentdark-gradient-chart stop { + stop-color: #8AB113; + } + .chart-gradient stop[offset="0"] { stop-opacity: 0.9; } @@ -147,5 +155,13 @@ + + + + + + + + \ No newline at end of file diff --git a/src/range-navigator/default.ts b/src/range-navigator/default.ts index 064fd12e..092741c8 100644 --- a/src/range-navigator/default.ts +++ b/src/range-navigator/default.ts @@ -11,8 +11,8 @@ 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']; -let borderColor : string[] = ['#262E0B', '#5ECB9B', '#5A61F6', '#8B5CF6', '#00bdae', '#9ECB08', '#a16ee5', '#a16ee5', '#a16ee5', '#4472c4', '#4472c4', '#79ECE4']; +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 regionColor : string[] = ['rgba(38, 46, 11, 0.3)', 'rgba(94, 203, 155, 0.3)', 'rgba(90, 97, 246, 0.3)', 'rgba(139, 92, 246, 0.3)', 'rgba(0, 189, 174, 0.3)', 'rgba(158, 203, 8, 0.3)', 'rgba(161, 110, 229, 0.3)', 'rgba(161, 110, 229, 0.3)', 'rgba(161, 110, 229, 0.3)', 'rgba(68, 114, 196, 0.3)', 'rgba(68, 114, 196, 0.3)', 'rgba(121, 236, 228, 0.3)']; diff --git a/src/range-navigator/empty-data.html b/src/range-navigator/empty-data.html index 2f3d14cd..bb281f5d 100644 --- a/src/range-navigator/empty-data.html +++ b/src/range-navigator/empty-data.html @@ -70,6 +70,14 @@ stop-color: #5ECB9B; } + #fluent-gradient-chart stop { + stop-color: #614570; + } + + #fluentdark-gradient-chart stop { + stop-color: #8AB113; + } + .chart-gradient stop[offset="0"] { stop-opacity: 0.9; } @@ -128,5 +136,13 @@ + + + + + + + + \ No newline at end of file diff --git a/src/range-navigator/empty-data.ts b/src/range-navigator/empty-data.ts index 083e7270..58ef8ff8 100644 --- a/src/range-navigator/empty-data.ts +++ b/src/range-navigator/empty-data.ts @@ -15,8 +15,8 @@ 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']; -let borderColor : string[] = ['#262E0B', '#5ECB9B', '#5A61F6', '#8B5CF6', '#00bdae', '#9ECB08', '#a16ee5', '#a16ee5', '#a16ee5', '#4472c4', '#4472c4', '#79ECE4']; +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 regionColor : string[] = ['rgba(38, 46, 11, 0.3)', 'rgba(94, 203, 155, 0.3)', 'rgba(90, 97, 246, 0.3)', 'rgba(139, 92, 246, 0.3)', 'rgba(0, 189, 174, 0.3)', 'rgba(158, 203, 8, 0.3)', 'rgba(161, 110, 229, 0.3)', 'rgba(161, 110, 229, 0.3)', 'rgba(161, 110, 229, 0.3)', 'rgba(68, 114, 196, 0.3)', 'rgba(68, 114, 196, 0.3)', 'rgba(121, 236, 228, 0.3)']; diff --git a/src/range-navigator/export.html b/src/range-navigator/export.html index 269457cc..0adcf8f5 100644 --- a/src/range-navigator/export.html +++ b/src/range-navigator/export.html @@ -131,4 +131,8 @@ .e-view.bootstrap5 .e-print-icon::before, .e-view.bootstrap5-dark .e-print-icon::before { content: '\e75d'; } + + .e-view.fluent .e-print-icon::before, .e-view.fluent-dark .e-print-icon::before { + content: '\e75d'; + } \ No newline at end of file diff --git a/src/range-navigator/export.ts b/src/range-navigator/export.ts index 6d7b1116..9fb9e4d9 100644 --- a/src/range-navigator/export.ts +++ b/src/range-navigator/export.ts @@ -16,8 +16,8 @@ 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[] = ['Material', 'Fabric', 'Bootstrap', 'Bootstrap4', 'HighContrast', 'Bootstrap5', 'Tailwind','MaterialDark', 'FabricDark', 'BootstrapDark', 'TailwindDark', 'Bootstrap5Dark']; -let borderColor: string[] = ['#FF4081', '#007897', '#428BCA', '#FFD939', '#FFD939', '#4F46E5', '#4F46E5','#FF4081', '#007897', '#428BCA', '#22D3EE', '#ADB5BD']; +let themes: string[] = ['Material', 'Fabric', 'Bootstrap', 'Bootstrap4', 'HighContrast', 'Bootstrap5', 'Tailwind','MaterialDark', 'FabricDark', 'BootstrapDark', 'TailwindDark', 'Bootstrap5Dark', 'Fluent', 'FluentDark']; +let borderColor: string[] = ['#FF4081', '#007897', '#428BCA', '#FFD939', '#FFD939', '#4F46E5', '#4F46E5','#FF4081', '#007897', '#428BCA', '#22D3EE', '#ADB5BD', '#614570', '#8AB113']; let regionColor: string[] = ['rgba(255, 64, 129, 0.3)', 'rgba(0, 120, 151, 0.3)', 'rgba(66, 139, 202, 0.3)', 'rgba(255, 217, 57, 0.3)', 'rgba(255, 217, 57, 0.3)', 'rgba(79, 70, 229, 0.3)', 'rgba(79, 70, 229, 0.3)', 'rgba(255, 64, 129, 0.3)', 'rgba(0, 120, 151, 0.3)', 'rgba(66, 139, 202, 0.3)', 'rgba(34, 211, 238, 0.3)', 'rgba(173,181,189,0.3)']; diff --git a/src/range-navigator/logarithmic.html b/src/range-navigator/logarithmic.html index 6e843da1..59bf573c 100644 --- a/src/range-navigator/logarithmic.html +++ b/src/range-navigator/logarithmic.html @@ -77,6 +77,14 @@ stop-color: #5ECB9B; } + #fluent-gradient-chart stop { + stop-color: #614570; + } + + #fluentdark-gradient-chart stop { + stop-color: #8AB113; + } + .chart-gradient stop[offset="0"] { stop-opacity: 0.9; } @@ -135,5 +143,13 @@ + + + + + + + + \ No newline at end of file diff --git a/src/range-navigator/logarithmic.ts b/src/range-navigator/logarithmic.ts index a56f462c..9931a6ab 100644 --- a/src/range-navigator/logarithmic.ts +++ b/src/range-navigator/logarithmic.ts @@ -22,8 +22,8 @@ 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']; -let borderColor : string[] = ['#262E0B', '#5ECB9B', '#5A61F6', '#8B5CF6', '#00bdae', '#9ECB08', '#a16ee5', '#a16ee5', '#a16ee5', '#4472c4', '#4472c4', '#79ECE4']; +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 regionColor : string[] = ['rgba(38, 46, 11, 0.3)', 'rgba(94, 203, 155, 0.3)', 'rgba(90, 97, 246, 0.3)', 'rgba(139, 92, 246, 0.3)', 'rgba(0, 189, 174, 0.3)', 'rgba(158, 203, 8, 0.3)', 'rgba(161, 110, 229, 0.3)', 'rgba(161, 110, 229, 0.3)', 'rgba(161, 110, 229, 0.3)', 'rgba(68, 114, 196, 0.3)', 'rgba(68, 114, 196, 0.3)', 'rgba(121, 236, 228, 0.3)']; diff --git a/src/range-navigator/right-to-left.html b/src/range-navigator/right-to-left.html index 6198ee27..2a12278a 100644 --- a/src/range-navigator/right-to-left.html +++ b/src/range-navigator/right-to-left.html @@ -75,6 +75,14 @@ stop-color: #5ECB9B; } + #fluent-gradient-chart stop { + stop-color: #614570; + } + + #fluentdark-gradient-chart stop { + stop-color: #8AB113; + } + .chart-gradient stop[offset="0"] { stop-opacity: 0.9; } @@ -134,5 +142,13 @@ + + + + + + + + \ No newline at end of file diff --git a/src/range-navigator/right-to-left.ts b/src/range-navigator/right-to-left.ts index aac72673..9062a29e 100644 --- a/src/range-navigator/right-to-left.ts +++ b/src/range-navigator/right-to-left.ts @@ -13,8 +13,8 @@ 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']; -let borderColor : string[] = ['#262E0B', '#5ECB9B', '#5A61F6', '#8B5CF6', '#00bdae', '#9ECB08', '#a16ee5', '#a16ee5', '#a16ee5', '#4472c4', '#4472c4', '#79ECE4']; +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 regionColor : string[] = ['rgba(38, 46, 11, 0.3)', 'rgba(94, 203, 155, 0.3)', 'rgba(90, 97, 246, 0.3)', 'rgba(139, 92, 246, 0.3)', 'rgba(0, 189, 174, 0.3)', 'rgba(158, 203, 8, 0.3)', 'rgba(161, 110, 229, 0.3)', 'rgba(161, 110, 229, 0.3)', 'rgba(161, 110, 229, 0.3)', 'rgba(68, 114, 196, 0.3)', 'rgba(68, 114, 196, 0.3)', 'rgba(121, 236, 228, 0.3)']; diff --git a/src/rich-text-editor/auto-save.html b/src/rich-text-editor/auto-save.html index 58fbb9e6..1af7e914 100644 --- a/src/rich-text-editor/auto-save.html +++ b/src/rich-text-editor/auto-save.html @@ -75,12 +75,16 @@ } .bootstrap5 .e-icons.e-icon-refresh::before, - .bootstrap5-dark .e-icons.e-icon-refresh::before { + .bootstrap5-dark .e-icons.e-icon-refresh::before, + .fluent .e-icons.e-icon-refresh::before, + .fluent-dark .e-icons.e-icon-refresh::before { content: "\e706"; } .bootstrap5 .e-icons.e-icon-tick::before, - .bootstrap5-dark .e-icons.e-icon-tick::before { + .bootstrap5-dark .e-icons.e-icon-tick::before, + .fluent .e-icons.e-icon-tick::before, + .fluent-dark .e-icons.e-icon-tick::before { content: "\e774"; } diff --git a/src/rich-text-editor/blog-posting.html b/src/rich-text-editor/blog-posting.html index bf7e10e5..af384054 100644 --- a/src/rich-text-editor/blog-posting.html +++ b/src/rich-text-editor/blog-posting.html @@ -41,13 +41,13 @@ @@ -439,4 +439,4 @@ #createpostholder { margin-top: 25px; } - \ No newline at end of file + diff --git a/src/rich-text-editor/enter-key-configuration.html b/src/rich-text-editor/enter-key-configuration.html index 434149f9..d57e913e 100644 --- a/src/rich-text-editor/enter-key-configuration.html +++ b/src/rich-text-editor/enter-key-configuration.html @@ -1,4 +1,4 @@ -
+
- - + +
- + like Like - + dislike Dislike
@@ -81,4 +81,11 @@ .codeViewContent { padding-left: 16px; } + .control-section.enter-key .e-popup.e-popup-open.e-dialog { + height: 387px !important; + } + .control-section.enter-key .e-dialog .e-dlg-content { + overflow: inherit; + overflow-x: inherit; + } \ No newline at end of file diff --git a/src/rich-text-editor/image.html b/src/rich-text-editor/image.html index 53a77ce1..633c270a 100644 --- a/src/rich-text-editor/image.html +++ b/src/rich-text-editor/image.html @@ -96,12 +96,16 @@ } .bootstrap5 .e-rte-quick-popup .e-rte-quick-toolbar .e-rotate-left::before, - .bootstrap5-dark .e-rte-quick-popup .e-rte-quick-toolbar .e-rotate-left::before { + .bootstrap5-dark .e-rte-quick-popup .e-rte-quick-toolbar .e-rotate-left::before, + .fluent .e-rte-quick-popup .e-rte-quick-toolbar .e-rotate-left::before, + .fluent-dark .e-rte-quick-popup .e-rte-quick-toolbar .e-rotate-left::before { content: "\e713"; } .bootstrap5 .e-rte-quick-popup .e-rte-quick-toolbar .e-rotate-right::before, - .bootstrap5-dark .e-rte-quick-popup .e-rte-quick-toolbar .e-rotate-right::before { + .bootstrap5-dark .e-rte-quick-popup .e-rte-quick-toolbar .e-rotate-right::before, + .fluent .e-rte-quick-popup .e-rte-quick-toolbar .e-rotate-right::before, + .fluent-dark .e-rte-quick-popup .e-rte-quick-toolbar .e-rotate-right::before { content: "\e755"; } \ 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 1ddce6e8..0d524b5b 100644 --- a/src/rich-text-editor/insert-emoticons.html +++ b/src/rich-text-editor/insert-emoticons.html @@ -178,6 +178,12 @@ outline: 1px solid #317ab9; border-color: #317ab9; } + + .fluent .e-rte-emoticon-tbar-section .char_block.e-active, + .fluent-dark .e-rte-emoticon-tbar-section .char_block.e-active { + outline: 1px solid #0078DE; + border-color: #0078DE; + } .highcontrast .e-rte-emoticon-tbar-section .char_block.e-active { outline: 1px solid #ffd939; diff --git a/src/rich-text-editor/insert-special-characters.html b/src/rich-text-editor/insert-special-characters.html index 8a34906b..ca003810 100644 --- a/src/rich-text-editor/insert-special-characters.html +++ b/src/rich-text-editor/insert-special-characters.html @@ -135,6 +135,12 @@ border-color: #0D6EFD; } + .fluent .e-rte-custom-tbar-section .char_block.e-active, + .fluent-dark .e-rte-custom-tbar-section .char_block.e-active { + outline: 1px solid #0078DE; + border-color: #0078DE; + } + .fabric.e-bigger .e-toolbar .e-toolbar-items .e-toolbar-item .e-tbar-btn.e-btn .e-tbar-btn-text, .highcontrast.e-bigger .e-toolbar .e-toolbar-items .e-toolbar-item .e-tbar-btn.e-btn .e-tbar-btn-text { padding-right: 10px; diff --git a/src/rich-text-editor/markdown-editor-custom-format.html b/src/rich-text-editor/markdown-editor-custom-format.html index fc76a45f..bf8207ff 100644 --- a/src/rich-text-editor/markdown-editor-custom-format.html +++ b/src/rich-text-editor/markdown-editor-custom-format.html @@ -49,19 +49,21 @@ content: '\e787'; } - .tailwind .e-icon-btn .e-md-preview::before { - content: '\e7d0'; - } - - .tailwind .e-icon-btn.e-active .e-md-preview::before { - content: '\e748'; - } - - .bootstrap5 .e-icon-btn.e-active .e-md-preview::before { + .tailwind .e-icon-btn.e-active .e-md-preview::before, + .tailwind-dark .e-icon-btn.e-active .e-md-preview::before, + .fluent .e-icon-btn.e-active .e-md-preview::before, + .fluent-dark .e-icon-btn.e-active .e-md-preview::before, + .bootstrap5 .e-icon-btn.e-active .e-md-preview::before, + .bootstrap5-dark .e-icon-btn.e-active .e-md-preview::before { content: '\e80e'; } - .bootstrap5 .e-icon-btn .e-md-preview::before { + .tailwind .e-icon-btn .e-md-preview::before, + .tailwind-dark .e-icon-btn .e-md-preview::before, + .bootstrap5 .e-icon-btn .e-md-preview::before, + .bootstrap5-dark .e-icon-btn .e-md-preview::before, + .fluent .e-icon-btn .e-md-preview::before, + .fluent-dark .e-icon-btn .e-md-preview::before { content: '\e7de'; } @@ -76,4 +78,4 @@ .e-rte-content .e-content.e-pre-source { width: 100%; } - \ No newline at end of file + diff --git a/src/rich-text-editor/markdown-editor-preview.html b/src/rich-text-editor/markdown-editor-preview.html index 8d6b781d..b17f501a 100644 --- a/src/rich-text-editor/markdown-editor-preview.html +++ b/src/rich-text-editor/markdown-editor-preview.html @@ -53,19 +53,21 @@ The third-party library Marked is used in this sample to convert markdown content: '\e787'; } - .tailwind .e-icon-btn .e-md-preview::before { - content: '\e7d0'; - } - - .tailwind .e-icon-btn.e-active .e-md-preview::before { - content: '\e748'; - } - - .bootstrap5 .e-icon-btn.e-active .e-md-preview::before { + .tailwind .e-icon-btn.e-active .e-md-preview::before, + .tailwind-dark .e-icon-btn.e-active .e-md-preview::before, + .fluent .e-icon-btn.e-active .e-md-preview::before, + .fluent-dark .e-icon-btn.e-active .e-md-preview::before, + .bootstrap5 .e-icon-btn.e-active .e-md-preview::before, + .bootstrap5-dark .e-icon-btn.e-active .e-md-preview::before { content: '\e80e'; } - .bootstrap5 .e-icon-btn .e-md-preview::before { + .tailwind .e-icon-btn .e-md-preview::before, + .tailwind-dark .e-icon-btn .e-md-preview::before, + .bootstrap5 .e-icon-btn .e-md-preview::before, + .bootstrap5-dark .e-icon-btn .e-md-preview::before, + .fluent .e-icon-btn .e-md-preview::before, + .fluent-dark .e-icon-btn .e-md-preview::before { content: '\e7de'; } @@ -109,4 +111,4 @@ The third-party library Marked is used in this sample to convert markdown display: none; } - \ No newline at end of file + diff --git a/src/rich-text-editor/markdown-editor-preview.ts b/src/rich-text-editor/markdown-editor-preview.ts index 9548aae6..6e0201d1 100644 --- a/src/rich-text-editor/markdown-editor-preview.ts +++ b/src/rich-text-editor/markdown-editor-preview.ts @@ -118,22 +118,24 @@ let htmlPreview: HTMLElement; leftBar = document.querySelector('#left-sidebar'); transformElement = document.querySelector('#right-pane'); } - if (e.targetItem === 'Maximize') { - if (Browser.isDevice && Browser.isIos) { - addClass([sbCntEle, sbHdrEle], ['hide-header']); + if (sbCntEle && sbHdrEle && leftBar && transformElement) { + if (e.targetItem === 'Maximize') { + if (Browser.isDevice && Browser.isIos) { + addClass([sbCntEle, sbHdrEle], ['hide-header']); + } + addClass([leftBar], ['e-close']); removeClass([leftBar], ['e-open']); + if (!Browser.isDevice) { transformElement.style.marginLeft = '0px'; } + transformElement.style.transform = 'inherit'; + } else if (e.targetItem === 'Minimize') { + if (Browser.isDevice && Browser.isIos) { + removeClass([sbCntEle, sbHdrEle], ['hide-header']); + } + removeClass([leftBar], ['e-close']); + if (!Browser.isDevice) { + addClass([leftBar], ['e-open']); + transformElement.style.marginLeft = leftBar.offsetWidth + 'px'; } + transformElement.style.transform = 'translateX(0px)'; } - addClass([leftBar], ['e-close']); removeClass([leftBar], ['e-open']); - if (!Browser.isDevice) { transformElement.style.marginLeft = '0px'; } - transformElement.style.transform = 'inherit'; - } else if (e.targetItem === 'Minimize') { - if (Browser.isDevice && Browser.isIos) { - removeClass([sbCntEle, sbHdrEle], ['hide-header']); - } - removeClass([leftBar], ['e-close']); - if (!Browser.isDevice) { - addClass([leftBar], ['e-open']); - transformElement.style.marginLeft = leftBar.offsetWidth + 'px'; } - transformElement.style.transform = 'translateX(0px)'; } } -}; \ No newline at end of file +}; diff --git a/src/rich-text-editor/markdown-editor.html b/src/rich-text-editor/markdown-editor.html index f9fa3b69..3836d5a2 100644 --- a/src/rich-text-editor/markdown-editor.html +++ b/src/rich-text-editor/markdown-editor.html @@ -59,19 +59,25 @@ The third-party library Marked is used in this sample to convert markdown content: '\e787'; } - .tailwind .e-icon-btn .e-md-preview::before { - content: '\e7d0'; - } - .tailwind .e-icon-btn.e-active .e-md-preview::before { content: '\e748'; } - .bootstrap5 .e-icon-btn.e-active .e-md-preview::before { + .tailwind .e-icon-btn.e-active .e-md-preview::before, + .tailwind-dark .e-icon-btn.e-active .e-md-preview::before, + .fluent .e-icon-btn.e-active .e-md-preview::before, + .fluent-dark .e-icon-btn.e-active .e-md-preview::before, + .bootstrap5 .e-icon-btn.e-active .e-md-preview::before, + .bootstrap5-dark .e-icon-btn.e-active .e-md-preview::before { content: '\e80e'; } - .bootstrap5 .e-icon-btn .e-md-preview::before { + .tailwind .e-icon-btn .e-md-preview::before, + .tailwind-dark .e-icon-btn .e-md-preview::before, + .bootstrap5 .e-icon-btn .e-md-preview::before, + .bootstrap5-dark .e-icon-btn .e-md-preview::before, + .fluent .e-icon-btn .e-md-preview::before, + .fluent-dark .e-icon-btn .e-md-preview::before { content: '\e7de'; } - \ No newline at end of file + diff --git a/src/rich-text-editor/online-html-editor.html b/src/rich-text-editor/online-html-editor.html index 2799ce78..b3148646 100644 --- a/src/rich-text-editor/online-html-editor.html +++ b/src/rich-text-editor/online-html-editor.html @@ -1,108 +1,24 @@
-
-
- Click/Touch the button to view the sample +
+
+
+
+

Welcome to the HTML real-time live editor!

+

Create and edit the valid HTML code simply! You don't worry about the HTML syntax to format your text content. The WYSIWYG editor (left side view) provided the toolbar to make format text and insert images, tables, and more options.

+

Don't worry about syntax

+

The content editing works bi-directional, you can write the HTML code on the right-side view (code view), and changes will reflect in the WYSIWYG editor.

-
- -
-
-
-
-
-
Essential JS 2 for JavaScript
-
-
-
-
-
-
-

Rich Text Editor Online Html Editor

-
-
PREVIEW
-
-
-
HTML SOURCE CODE
-
-
-
-
-

The Rich Text Editor is a WYSIWYG (what you see is what you get) editor used to create and edit - the content and return the valid HTML markup or markdown of the content. - This provides a lot of commands to edit and format the content.

-

Toolbar

-

The editor’s toolbar provides various commands to align the text, format, insert a link, image, - list, undo/redo operations, HTML view, and more. The toolbar comes with different modes such as - floating, multi-row, and expanded.

-

Links

-

Create a hyperlink using the 'insert link' dialog and you can edit the hyperlink text, display text, - and tooltip using the 'edit link' dialog and quick toolbar. If the text has valid hyperlink text, - the editor converts it to hyperlink automatically. For example, link to Rich Text Editor.

-

Table

-

This editor allows you to insert a table with options to add, edit, and remove and perform other - table-related actions.

-

For example

-
- - - - - - - - - - - - - - - - - - - - - - - - - - -
Employee nameRoleMailCountry
Janet FleetManagerjanet95@arpy.comFrance
Nancy BuchananProject Leadnancy55@rpy.comSweden
Rose RoseProject Leadrose44@sample.comFrance
-

Image

-

Allows you to insert images with caption, alt text, link, resize, and drag-and-drop from an - online source and local computer. You can upload an image to the server and insert it into the editor. - It provides an option to customize a quick toolbar for an image.

-

For example

- Logo -

Lists

-

You can include content with ordered and unordered lists.

-

Examples for an ordered list:

-
    -
  • TypeScript
    • -
  • Javascript
    • -
  • Angular
    • -
  • React
    • -
  • Vue
    • -
-

Examples for an unordered list:

-
    -
  1. Rich Text Editor
    2. -
  2. Toolbar
    3. -
  3. Button
    4. -
  4. Dialog
    5. -
  5. Data Grid
    6. -
-

The editor has a lot of features to edit HTML content and Markdown content in web applications.

-
-
- -
-
+
+
+
+
HTML SOURCE
+
+
+ +

The online HTML editor sample demonstrates how to create LIVE editing scenario with real-world applications using JavaScript Rich Text Editor. Most of the control features are enabled in this sample to edit the @@ -110,157 +26,152 @@

You can edit the source code and content also parallelly. The source code is formatted using the code mirror library.

-
-

This sample explains how to create a live HTML editor application using Rich Text Editor. Click ‘open in new - window’ and edit both the content and HTML source.

+

This sample explains how to create a live HTML editor application using Rich Text Editor.

\ No newline at end of file diff --git a/src/rich-text-editor/online-html-editor.ts b/src/rich-text-editor/online-html-editor.ts index 42e57017..d1cef5e7 100644 --- a/src/rich-text-editor/online-html-editor.ts +++ b/src/rich-text-editor/online-html-editor.ts @@ -19,42 +19,23 @@ import 'codemirror/mode/htmlmixed/htmlmixed.js'; let defaultRTE: RichTextEditor; let splitObj: Splitter; // Add the styles and script referrence for code-mirror. - let link: Element = document.createElement('link'); - link.setAttribute('rel', 'stylesheet'); - link.setAttribute('type', 'text/css'); - link.setAttribute('href', 'https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.3.0/codemirror.min.css'); - document.head.appendChild(link); - let elem: HTMLScriptElement = document.createElement('script'); - elem.src = 'https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.3.0/codemirror.min.js'; - elem.type = 'text/javascript'; - document.head.appendChild(elem); - let element: HTMLScriptElement = document.createElement('script'); - element.src = 'https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.3.0/mode/xml/xml.min.js'; - element.type = 'text/javascript'; - document.head.appendChild(element); - - element.onload = (): void => { - let openButton: HTMLElement = document.querySelector('#OpenBtn'); - if (openButton) { - openButton.addEventListener('click', () => { - window.open(location.href.replace(location.search, '').split('#')[0] + 'rich-text-editor/online-html-editor/index.html'); - }); - } splitObj = new Splitter({ height: '450px', width: '100%', - paneSettings: [{ resizable: false, size: '50%' }, {}], + resizing: onResizing, + paneSettings: [{ resizable: true, size: '50%',min: '60px' }, {}], }); splitObj.appendTo('#horizontal'); defaultRTE = new RichTextEditor({ height: '100%', + floatingToolbarOffset:0, toolbarSettings: { - type : ToolbarType.MultiRow, + type : ToolbarType.Expand, + enableFloating: false, items: ['Bold', 'Italic', 'Underline', 'StrikeThrough', 'FontName', 'FontSize', 'FontColor', 'BackgroundColor', - 'LowerCase', 'UpperCase', 'SuperScript', 'SubScript', '|', 'Formats', 'Alignments', 'OrderedList', 'UnorderedList', - 'Outdent', 'Indent', '|', + 'Outdent', 'Indent', 'CreateTable', 'CreateLink', 'Image', '|', 'ClearFormat', '|', 'Undo', 'Redo' ] @@ -66,6 +47,10 @@ import 'codemirror/mode/htmlmixed/htmlmixed.js'; function onChange(): void { updateValue(); } + function onResizing():void + { + defaultRTE.refreshUI(); + } function onCreate(): void { updateValue(); textArea = defaultRTE.contentModule.getEditPanel() as HTMLTextAreaElement; @@ -77,7 +62,7 @@ import 'codemirror/mode/htmlmixed/htmlmixed.js'; } } function updateHtmlValue(): void { - textArea.innerHTML = myCodeMirror.getValue(); + defaultRTE.value = myCodeMirror.getValue(); } function updateValue(): void { let mirrorView: HTMLElement = document.querySelector('#src-view'); @@ -96,17 +81,17 @@ import 'codemirror/mode/htmlmixed/htmlmixed.js'; if (codemirrorEle) { codemirrorEle.remove(); } + if(defaultRTE.value){ renderCodeMirror(srcViewEle as HTMLElement, defaultRTE.value); - } - function renderCodeMirror(mirrorView: HTMLElement, content: string): void { - if (content) { - myCodeMirror = CodeMirror(mirrorView, { - value: content, - lineNumbers: true, - mode: 'text/html', - lineWrapping: true, - }); } } + function renderCodeMirror(mirrorView: HTMLElement, content: string): void { + myCodeMirror = CodeMirror(mirrorView, { + value: content, + lineNumbers: true, + mode: 'text/html', + lineWrapping: true, + }); + } }; -}; + diff --git a/src/rich-text-editor/paste-cleanup.ts b/src/rich-text-editor/paste-cleanup.ts index 69495560..07140d87 100644 --- a/src/rich-text-editor/paste-cleanup.ts +++ b/src/rich-text-editor/paste-cleanup.ts @@ -1,4 +1,3 @@ -import { loadCultureFiles } from '../common/culture-loader'; /** * Rich Text Editor Paste Cleanup sample */ @@ -7,7 +6,6 @@ import { DropDownList } from '@syncfusion/ej2-dropdowns'; RichTextEditor.Inject(Toolbar, Link, Image, Count, HtmlEditor, QuickToolbar, Table, PasteCleanup); (window as any).default = (): void => { - loadCultureFiles(); let defaultRTE: RichTextEditor = new RichTextEditor({ pasteCleanupSettings: { prompt: true, diff --git a/src/rich-text-editor/resize-editor.html b/src/rich-text-editor/resize-editor.html index 539d349a..31ce26d5 100644 --- a/src/rich-text-editor/resize-editor.html +++ b/src/rich-text-editor/resize-editor.html @@ -1,4 +1,4 @@ -
+
@@ -25,4 +25,11 @@ min-height: 170px; max-height: 400px; } + .control-section.resize-rte .e-popup.e-popup-open.e-dialog { + height: 387px !important; + } + .control-section.resize-rte .e-dialog .e-dlg-content { + overflow: inherit; + overflow-x: inherit; + } \ No newline at end of file diff --git a/src/rich-text-editor/sample.json b/src/rich-text-editor/sample.json index b033b0f0..4795a131 100644 --- a/src/rich-text-editor/sample.json +++ b/src/rich-text-editor/sample.json @@ -2,6 +2,7 @@ "name": "Rich Text Editor", "directory": "rich-text-editor", "category": "Editors", + "type": "update", "ftName": "wysiwyg-rich-text-editor", "samples": [{ "url": "tools", @@ -118,6 +119,7 @@ { "url": "online-html-editor", "name": "Online Html Editor", + "type":"update", "description": "The online HTML editor is a demo that provides LIVE experience for both content and HTML editing with Rich Text Editor features in a real-world scenario.", "category": "Rich Text Editor", "api": { "RichTextEditor": ["Inject", "actionComplete", "saveInterval","change", "toolbarSettings", "appendTo"] } diff --git a/src/rich-text-editor/tools.ts b/src/rich-text-editor/tools.ts index a367b2f0..1d768bd8 100644 --- a/src/rich-text-editor/tools.ts +++ b/src/rich-text-editor/tools.ts @@ -87,19 +87,21 @@ import 'codemirror/mode/htmlmixed/htmlmixed.js'; } else { leftBar = document.querySelector('#left-sidebar'); transformElement = document.querySelector('#right-pane'); } - if (e.targetItem === 'Maximize') { - if (Browser.isDevice && Browser.isIos) { addClass([sbCntEle, sbHdrEle], ['hide-header']); } - addClass([leftBar], ['e-close']); - removeClass([leftBar], ['e-open']); - if (!Browser.isDevice) { transformElement.style.marginLeft = '0px'; } - transformElement.style.transform = 'inherit'; - } else if (e.targetItem === 'Minimize') { - if (Browser.isDevice && Browser.isIos) { removeClass([sbCntEle, sbHdrEle], ['hide-header']); } - removeClass([leftBar], ['e-close']); - if (!Browser.isDevice) { - addClass([leftBar], ['e-open']); - transformElement.style.marginLeft = leftBar.offsetWidth + 'px'; } - transformElement.style.transform = 'translateX(0px)'; + if (sbCntEle && sbHdrEle && leftBar && transformElement) { + if (e.targetItem === 'Maximize') { + if (Browser.isDevice && Browser.isIos) { addClass([sbCntEle, sbHdrEle], ['hide-header']); } + addClass([leftBar], ['e-close']); + removeClass([leftBar], ['e-open']); + if (!Browser.isDevice) { transformElement.style.marginLeft = '0px'; } + transformElement.style.transform = 'inherit'; + } else if (e.targetItem === 'Minimize') { + if (Browser.isDevice && Browser.isIos) { removeClass([sbCntEle, sbHdrEle], ['hide-header']); } + removeClass([leftBar], ['e-close']); + if (!Browser.isDevice) { + addClass([leftBar], ['e-open']); + transformElement.style.marginLeft = leftBar.offsetWidth + 'px'; } + transformElement.style.transform = 'translateX(0px)'; + } } } diff --git a/src/schedule/add-remove-resources.ts b/src/schedule/add-remove-resources.ts index e0deb38d..2e8b1b6f 100644 --- a/src/schedule/add-remove-resources.ts +++ b/src/schedule/add-remove-resources.ts @@ -37,7 +37,7 @@ Schedule.Inject(Month, TimelineViews, TimelineMonth, Resize, DragAndDrop); // custom code start function onChange(args: ChangeEventArgs): void { - let value: number = parseInt((args.event.target).getAttribute('value'), 10); + let value: number = parseInt((args.event.currentTarget).querySelector('input').getAttribute('value'), 10); let resourceData: Object[] = calendarCollections.filter((calendar: { [key: string]: number }) => calendar.CalendarId === value); if (args.checked) { scheduleObj.addResource(resourceData[0], 'Calendars', value - 1); diff --git a/src/schedule/external-drag-drop.ts b/src/schedule/external-drag-drop.ts index 4d6028dd..df291867 100644 --- a/src/schedule/external-drag-drop.ts +++ b/src/schedule/external-drag-drop.ts @@ -122,8 +122,8 @@ Schedule.Inject(TimelineViews, TimelineMonth, Resize, DragAndDrop); if (classElement) { classElement.classList.remove('e-device-hover'); } - if (event.target.classList.contains('e-work-cells')) { - addClass([event.target], 'e-device-hover'); + if (event.event.target.classList.contains('e-work-cells')) { + addClass([event.event.target], 'e-device-hover'); } } if (document.body.style.cursor === 'not-allowed') { diff --git a/src/schedule/header-bar.html b/src/schedule/header-bar.html index 40583606..ee367b50 100644 --- a/src/schedule/header-bar.html +++ b/src/schedule/header-bar.html @@ -123,6 +123,10 @@ background-color: #1a1a1a; } + .fluent-dark .e-profile-wrapper { + background-color: #201f1e; + } + .fabric-dark .e-profile-wrapper { background-color: #333232; } diff --git a/src/schedule/overview.html b/src/schedule/overview.html index 21848634..9814e16c 100644 --- a/src/schedule/overview.html +++ b/src/schedule/overview.html @@ -261,10 +261,23 @@ border: 1px solid #414040; } + .fluent-dark .schedule-overview .overview-content { + border: 1px solid #c1c1c1; + } + + .fluent-dark .schedule-overview .overview-toolbar .e-toolbar { + border: 1px solid #c1c1c1; + border-top-color: transparent; + } + .fabric-dark .schedule-overview .overview-toolbar .overview-toolbar-settings { border-color: #414040; } + .fluent-dark .schedule-overview .overview-toolbar .overview-toolbar-settings { + border-color: #c1c1c1; + } + .tailwind .schedule-overview .overview-toolbar .e-toolbar { border: 1px solid #e5e7eb; } @@ -319,6 +332,11 @@ color: #fff; } + .fluent .schedule-overview .overview-toolbar .overview-toolbar-settings, + .fluent .schedule-overview .overview-content .right-panel .control-panel { + background-color: #f3f2f1; + } + .bootstrap .schedule-overview .overview-toolbar .overview-toolbar-settings, .bootstrap .schedule-overview .overview-content .right-panel .control-panel { background-color: #f8f8f8; @@ -338,6 +356,13 @@ font-weight: 400; } + .fluent-dark .schedule-overview .overview-toolbar .overview-toolbar-settings, + .fluent-dark .schedule-overview .overview-content .right-panel .control-panel { + background-color: #252423; + border-color: #c1c1c1; + color: #fff; + } + .bootstrap-dark .schedule-overview .overview-toolbar .overview-toolbar-settings, .bootstrap-dark .schedule-overview .overview-content .right-panel .control-panel { background-color: #2a2a2a; @@ -647,6 +672,10 @@ background-color: #201f1f; } + .fluent-dark .schedule-overview .quick-info-header { + background-color: #252423; + } + .material-dark .schedule-overview .quick-info-header { background-color: #424242; } @@ -706,6 +735,7 @@ letter-spacing: 0.33px; height: 24px; padding: 5px; + display: flex; } .schedule-overview .event-content div label { @@ -720,17 +750,22 @@ letter-spacing: 0.33px; line-height: 14px; padding-left: 8px; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; } .tailwind-dark .schedule-overview .event-content div label, .bootstrap-dark .schedule-overview .event-content div label, .bootstrap5-dark .schedule-overview .event-content div label, + .fluent-dark .schedule-overview .event-content div label, .fabric-dark .schedule-overview .event-content div label, .material-dark .schedule-overview .event-content div label, .highcontrast .schedule-overview .event-content div label, .tailwind-dark .schedule-overview .event-content div span, .bootstrap-dark .schedule-overview .event-content div span, .bootstrap5-dark .schedule-overview .event-content div span, + .fluent-dark .schedule-overview .event-content div span, .fabric-dark .schedule-overview .event-content div span, .material-dark .schedule-overview .event-content div span, .highcontrast .schedule-overview .event-content div span { diff --git a/src/schedule/print.html b/src/schedule/print.html index 4c55d433..4839c96b 100644 --- a/src/schedule/print.html +++ b/src/schedule/print.html @@ -41,6 +41,10 @@ display: none; } + .e-schedule-toolbar .e-toolbar-items .e-toolbar-item.e-separator { + display: none; + } + .property-panel-table .e-checkbox-wrapper { padding: 0; } diff --git a/src/schedule/print.ts b/src/schedule/print.ts index 6eea7386..c8713728 100644 --- a/src/schedule/print.ts +++ b/src/schedule/print.ts @@ -45,7 +45,7 @@ import * as dataSource from './datasource.json'; let printHeightAndWidthData: string[] = ['auto', '100%', '500px']; let heightObj: DropDownList = new DropDownList({ - width: 'auto', + width: '100%', placeholder: 'Height', floatLabelType: 'Always', dataSource: printHeightAndWidthData, @@ -55,7 +55,7 @@ import * as dataSource from './datasource.json'; heightObj.appendTo('#heightElement'); let widthObj: DropDownList = new DropDownList({ - width: 'auto', + width: '100%', placeholder: 'Width', floatLabelType: 'Always', dataSource: printHeightAndWidthData, @@ -65,7 +65,7 @@ import * as dataSource from './datasource.json'; widthObj.appendTo('#widthElement'); let selectedDateObj: DatePicker = new DatePicker({ - width: 'auto', + width: '100%', placeholder: 'Selected date', floatLabelType: 'Always', value: new Date(2021, 0, 10) diff --git a/src/schedule/quick-info-template.html b/src/schedule/quick-info-template.html index eaa61090..088f94b1 100644 --- a/src/schedule/quick-info-template.html +++ b/src/schedule/quick-info-template.html @@ -161,6 +161,90 @@ margin-right: 5px; } + .quick-info-header { + background-color: white; + padding: 8px 18px; + } + + .quick-info-header-content { + justify-content: flex-end; + display: flex; + flex-direction: column; + padding: 5px 10px 5px; + } + + .quick-info-title { + font-weight: 500; + font-size: 16px; + letter-spacing: 0.48px; + height: 22px; + } + + .duration-text { + font-size: 11px; + letter-spacing: 0.33px; + height: 14px; + } + + .content-area { + padding: 10px; + width: 100%; + } + + .event-content { + height: 90px; + display: flex; + flex-direction: column; + justify-content: center; + padding: 0 15px; + } + + .meeting-type-wrap, + .meeting-subject-wrap, + .notes-wrap { + font-size: 11px; + color: #666; + letter-spacing: 0.33px; + height: 24px; + padding: 5px; + } + + .event-content div label { + display: inline-block; + min-width: 45px; + color: #666; + } + + .event-content div span { + font-size: 11px; + color: #151515; + letter-spacing: 0.33px; + line-height: 14px; + padding-left: 8px; + } + + .cell-footer.e-btn { + background-color: #ffffff; + border-color: #878787; + color: #878787; + } + + .cell-footer { + padding-top: 10px; + } + + .e-quick-popup-wrapper .e-cell-popup .e-popup-content { + padding: 0 14px; + } + + .e-quick-popup-wrapper .e-event-popup .e-popup-footer { + display: block; + } + + .e-quick-popup-wrapper .e-popup-footer button:first-child { + margin-right: 5px; + } + .material-dark .schedule-quick-info .quick-info-header { background-color: #424242; } @@ -169,6 +253,7 @@ .tailwind-dark .schedule-quick-info .quick-info-header, .bootstrap-dark .schedule-quick-info .quick-info-header, .bootstrap5-dark .schedule-quick-info .quick-info-header, + .fluent-dark .schedule-quick-info .quick-info-header, .fabric-dark .schedule-quick-info .quick-info-header { background-color: transparent; } @@ -187,6 +272,8 @@ .bootstrap-dark .schedule-quick-info .event-content div span, .bootstrap5-dark .schedule-quick-info .event-content div label, .bootstrap5-dark .schedule-quick-info .event-content div span, + .fluent-dark .schedule-quick-info .event-content div label, + .fluent-dark .schedule-quick-info .event-content div span, .fabric-dark .schedule-quick-info .event-content div label, .fabric-dark .schedule-quick-info .event-content div span, .material-dark .schedule-quick-info .event-content div label, diff --git a/src/schedule/sample.json b/src/schedule/sample.json index 51574150..9fa68971 100644 --- a/src/schedule/sample.json +++ b/src/schedule/sample.json @@ -2,7 +2,6 @@ "name": "Scheduler", "directory": "schedule", "category": "Calendars", - "type": "update", "ftName": "scheduler", "samples": [ { @@ -275,7 +274,6 @@ "url": "custom-month-view", "name": "Custom Month View", "category": "Views", - "type": "new", "description": "This example showcases how to customize the starting week of the month and also customize the number of weeks to be rendered in month view with JavaScript Scheduler.", "api": { "Schedule": [ @@ -772,7 +770,6 @@ "name": "Excel Exporting", "category": "Exporting", "hideOnDevice": false, - "type": "update", "description": "This example demonstrates how to export JavaScript Scheduler events (appointments) to the Microsoft Excel file format on the client side.", "api": { "Schedule": [ diff --git a/src/schedule/timeline-resources.html b/src/schedule/timeline-resources.html index e18255fb..453c1c68 100644 --- a/src/schedule/timeline-resources.html +++ b/src/schedule/timeline-resources.html @@ -101,6 +101,11 @@ border-color: #414040; } + .fluent-dark .e-schedule .e-resource-cells .template-wrap>div, + .fluent-dark .e-schedule .e-timeline-view .e-resource-left-td .e-resource-text>div { + border-color: #292827; + } + .bootstrap-dark .e-schedule .e-resource-cells .template-wrap>div, .bootstrap-dark .e-schedule .e-timeline-view .e-resource-left-td .e-resource-text>div { border-color: #505050; diff --git a/src/schedule/views-configuration.ts b/src/schedule/views-configuration.ts index 5dd2a3e5..bfcb2888 100644 --- a/src/schedule/views-configuration.ts +++ b/src/schedule/views-configuration.ts @@ -22,9 +22,9 @@ Schedule.Inject(Day, Week, Month, Agenda, Resize, DragAndDrop); getTimeString?: Function; } // custom code end - let agendaTemplate: string = '
${Subject}
${if(Description !== null && Description !== undefined)}' + + let agendaTemplate: string = '
${Subject}
${if(Description !== null && Description !== undefined)}' + '
${ Description }
${/if}
${getTimeString(data.StartTime)} ${if(City !== null &&' + - 'City !== undefined)}, ${ City } ${/if}
'; + 'City !== undefined)}, ${ City } ${/if}
'; let monthEventTemplate: string = '
${Subject}
'; let scheduleObj: Schedule = new Schedule({ width: '100%', diff --git a/src/schedule/virtual-scrolling.ts b/src/schedule/virtual-scrolling.ts index ee734ac7..9c87118e 100644 --- a/src/schedule/virtual-scrolling.ts +++ b/src/schedule/virtual-scrolling.ts @@ -13,7 +13,6 @@ Schedule.Inject(TimelineViews, TimelineMonth, Resize, DragAndDrop); let eventData: Record[] = generateStaticEvents(new Date(date), 300, 12); let scheduleObj: Schedule = new Schedule({ height: '650px', width: '100%', - currentView: 'TimelineMonth', views: [ { option: 'TimelineMonth', eventTemplate: '#timeline-event-template', allowVirtualScrolling: true } ], diff --git a/src/sidebar/api.html b/src/sidebar/api.html index 7d8d17dc..d0d34b70 100644 --- a/src/sidebar/api.html +++ b/src/sidebar/api.html @@ -1,259 +1,179 @@ - -
- -
- Click/Touch the button to view the sample -
-
- Open in new tab -
-
-